form-seller.vue 42 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460
  1. <template name="secondHandrelease">
  2. <view class="fleaMarketForm">
  3. <view class="bannerimg"><image src="https://static.caimei365.com/app/img/bg/secondbg.png"></image></view>
  4. <view class="my-maintenance" :style="{ paddingBottom: isIphoneX ? '270rpx' : '250rpx' }">
  5. <view class="newsTitle">
  6. <view class="nestext">
  7. 欢迎您来到采美365网二手商品市场,您可以在这里发布二手仪器和产品,采美官方
  8. 人员将会对商品进行审核和专业的估价,估价完成后才能上架展示并销售,展示期为
  9. 3个月。为了完整展示您的商品,请您认真填写以下商品基本信息,谢谢合作。
  10. </view>
  11. </view>
  12. <view class="row">
  13. <view class="label"><text class="red">*</text>发布身份:</view>
  14. <view class="select spacing">
  15. <picker
  16. @change="bindPickerChangePublisher($event)"
  17. :value="index"
  18. :range="publisherActions"
  19. range-key="name"
  20. >
  21. <input
  22. class="input"
  23. type="text"
  24. disabled="true"
  25. v-model="publisherText"
  26. placeholder="请选择发布身份"
  27. placeholder-class="placeholder"
  28. />
  29. </picker>
  30. </view>
  31. <text class="iconfont icon-xiayibu"></text>
  32. </view>
  33. <view class="row">
  34. <view class="label"><text class="red">*</text>联系人:</view>
  35. <view class="spacing">
  36. <input type="text"
  37. maxlength="15"
  38. v-model="secondParams.contactName"
  39. placeholder="请输入联系人姓名"
  40. placeholder-class="placeholder">
  41. </view>
  42. </view>
  43. <view class="row">
  44. <view class="label"><text class="red">*</text>联系方式:</view>
  45. <view class="spacing">
  46. <input type="text"
  47. v-model="secondParams.contactMobile"
  48. maxlength="11"
  49. placeholder="请输入联系人手机号"
  50. @blur="contactMobileOnblur"
  51. placeholder-class="placeholder">
  52. </view>
  53. </view>
  54. <view class="row">
  55. <view class="label"><text class="red">*</text>验证码:</view>
  56. <view class="spacing">
  57. <input type="text"
  58. v-model="secondParams.checkCode"
  59. maxlength="6"
  60. placeholder="请输入验证码"
  61. placeholder-class="placeholder">
  62. </view>
  63. <view class="row-btn" :class="[isMobileDisabled ? 'disabled' : '']">
  64. <button class="row-input"
  65. type="button"
  66. @click.stop="getMobileCodeFn"
  67. :disabled="isMobileDisabled">
  68. {{ mobileCodeText }}
  69. </button>
  70. </view>
  71. </view>
  72. <view class="row">
  73. <view class="label"><text class="red">*</text>二手分类:</view>
  74. <view class="select spacing">
  75. <picker
  76. @change="bindPickerChange($event)"
  77. :value="index"
  78. :range="categoryActions"
  79. range-key="name"
  80. >
  81. <input
  82. class="input"
  83. type="text"
  84. disabled="true"
  85. v-model="organizationTypeText"
  86. placeholder="请选择分类"
  87. placeholder-class="placeholder"
  88. />
  89. </picker>
  90. </view>
  91. <text class="iconfont icon-xiayibu"></text>
  92. </view>
  93. <view class="row">
  94. <view class="label"><text class="red">*</text>商品品牌:</view>
  95. <view class="select spacing">
  96. <picker
  97. @change="bindPickerChangeBrand($event)"
  98. :value="index"
  99. :range="brandActions"
  100. range-key="name"
  101. >
  102. <input
  103. class="input"
  104. type="text"
  105. disabled="true"
  106. v-model="brandName"
  107. placeholder="请选择品牌"
  108. placeholder-class="placeholder"
  109. />
  110. </picker>
  111. </view>
  112. <text class="iconfont icon-xiayibu"></text>
  113. </view>
  114. <view class="row" v-if="secondParams.brandId==161">
  115. <view class="label">其它品牌:</view>
  116. <view class="spacing">
  117. <input type="text"
  118. maxlength="40"
  119. v-model="secondParams.brandName"
  120. placeholder="请输入商品品牌"
  121. placeholder-class="placeholder">
  122. </view>
  123. </view>
  124. <view class="row">
  125. <view class="label"><text class="red">*</text>商品名称:</view>
  126. <view class="spacing">
  127. <input type="text"
  128. maxlength="40"
  129. v-model="secondParams.name"
  130. placeholder="请输入商品名称,不超过40个汉字"
  131. placeholder-class="placeholder">
  132. </view>
  133. </view>
  134. <view class="row">
  135. <view class="label">出厂日期:</view>
  136. <view class="spacing">
  137. <input type="text"
  138. v-model="secondParams.fixedYears"
  139. maxlength="10"
  140. placeholder="请输入出厂日期 如:2020年06月"
  141. placeholder-class="placeholder">
  142. </view>
  143. </view>
  144. <view class="row" v-if="secondParams.publishIdentity === 2">
  145. <view class="label"><text class="red">*</text>公司名称:</view>
  146. <view class="spacing">
  147. <input type="text"
  148. v-model="secondParams.companyName"
  149. maxlength="30"
  150. placeholder="请输入公司名称,不超过30个汉字"
  151. placeholder-class="placeholder">
  152. </view>
  153. </view>
  154. <view class="row">
  155. <view class="label"><text class="red">*</text>交易价:</view>
  156. <view class="spacing">
  157. <input type="text" maxlength="20" v-model="secondParams.price" placeholder="请输入交易价" placeholder-class="placeholder">
  158. </view>
  159. </view>
  160. <view style="margin-top: 15rpx;">
  161. <text class="iconfont xiangliao"
  162. :class="vShow_detailTalkFlag ? 'icon-jiagexiangliao':'icon-juxingweigouxuan'"
  163. @click="Detailed($event)">
  164. <text class='pricecolor' >价格详聊</text>
  165. </text>
  166. <text class="showflag" v-show="vShow_detailTalkFlag">(勾选代表同意不显示交易价)</text>
  167. </view>
  168. <view class="row">
  169. <view class="label"><text class="red">*</text>商品成色:</view>
  170. <view class="spacing">
  171. <input type="text"
  172. maxlength="10"
  173. v-model="secondParams.productQuality"
  174. placeholder="请输入商品成色,如“9成新”"
  175. placeholder-class="placeholder">
  176. </view>
  177. </view>
  178. <view class="row none">
  179. <view class="label"><text class="red">*</text>商品包含的文件:</view>
  180. </view>
  181. <view class="row none">
  182. <view class="checkbox-main">
  183. <view
  184. class="checkbox-list"
  185. :class="type.isChecked ? 'checked' : ''"
  186. v-for="(type, index) in productFileTypeActions"
  187. :key="index"
  188. @click="choiceProductFileType(type, index)"
  189. >
  190. <text class="iconfont" :class="type.isChecked ? 'icon-yixuanze' : 'icon-weixuanze'"></text>
  191. {{ type.name }}
  192. </view>
  193. <view class="checkbox-list" @click="choiceNoProductFileType">
  194. <text class="iconfont" :class="isCheckedNotype ? 'icon-yixuanze' : 'icon-weixuanze'"></text>
  195. 无任何文件
  196. </view>
  197. </view>
  198. </view>
  199. <view class="row none" v-if="secondParams.publishIdentity === 1">
  200. <view class="label-im">身份证照片:</view>
  201. <view class="label-em">个人请上传身份证正反面照片(图片大小不超过5M)</view>
  202. <view class="release-input upload image uploadGoodsImages" >
  203. <view class="upload-file-view">
  204. <view class="upload-file" v-if="secondParams.authenticationImage == ''">
  205. <text class="iconfont icon-shangchuantupian"></text>
  206. <text class="add-text">身份证正面</text>
  207. <view ref="goodsImages" class="input-file" @click="uploadCardImageFn(1)"></view>
  208. </view>
  209. <view class="upload-file" v-else>
  210. <image :src="secondParams.authenticationImage" alt="" class="upload-img" ></image>
  211. <text class=" del iconfont icon-iconfontguanbi" @click="removeCardImageFn(1)"></text>
  212. </view>
  213. </view>
  214. <view class="upload-file-view">
  215. <view class="upload-file" v-if="secondParams.authenticationBackImage == ''">
  216. <text class="iconfont icon-shangchuantupian"></text>
  217. <text class="add-text">身份证反面</text>
  218. <view ref="goodsImages" class="input-file" @click="uploadCardImageFn(2)"></view>
  219. </view>
  220. <view class="upload-file" v-else>
  221. <image :src="secondParams.authenticationBackImage" alt="" class="upload-img" ></image>
  222. <text class=" del iconfont icon-iconfontguanbi" @click="removeCardImageFn(2)"></text>
  223. </view>
  224. </view>
  225. </view>
  226. </view>
  227. <view class="row none" v-if="secondParams.publishIdentity === 2">
  228. <view class="label-im">营业执照:</view>
  229. <view class="label-em">请上传营业执照照片(图片大小不超过5M)</view>
  230. <view class="release-input upload image uploadGoodsImages" >
  231. <view class="upload-file" v-if="secondParams.licenseImage == ''">
  232. <text class="iconfont icon-shangchuantupian"></text>
  233. <text class="add-text">营业执照</text>
  234. <view ref="goodsImages" class="input-file" @click="uploadUserImageFn"></view>
  235. </view>
  236. <view class="upload-file" v-else>
  237. <image :src="secondParams.licenseImage" alt="" class="upload-img" ></image>
  238. <i class=" del iconfont icon-iconfontguanbi" @click="removeUserImageFn"></i>
  239. </view>
  240. </view>
  241. </view>
  242. <view class="row">
  243. <view class="label">账户类型:</view>
  244. <view class="select spacing">
  245. <picker
  246. @change="bindPickerBankType($event)"
  247. :value="index"
  248. :range="bankActions"
  249. range-key="name"
  250. >
  251. <input
  252. class="input"
  253. type="text"
  254. disabled="true"
  255. v-model="bankTypeText"
  256. placeholder="请选择发布身份"
  257. placeholder-class="placeholder"
  258. />
  259. </picker>
  260. </view>
  261. <text class="iconfont icon-xiayibu"></text>
  262. </view>
  263. <view class="row">
  264. <view class="label">开户名:</view>
  265. <view class="spacing">
  266. <input type="text"
  267. v-model="secondParams.accountName"
  268. maxlength="15"
  269. placeholder="请输入采美对接人姓名"
  270. placeholder-class="placeholder">
  271. </view>
  272. </view>
  273. <view class="row">
  274. <view class="label">开户行:</view>
  275. <view class="spacing">
  276. <input type="text"
  277. v-model="secondParams.banOfDeposit"
  278. maxlength="15"
  279. placeholder="请输入采美对接人姓名"
  280. placeholder-class="placeholder">
  281. </view>
  282. </view>
  283. <view class="row">
  284. <view class="label-im">收款账号:<text class="sms">(用于接收最终结算金额)</text></view>
  285. <view class="spacing file-none">
  286. <input type="text"
  287. v-model="secondParams.cardNumber"
  288. maxlength="20"
  289. placeholder="请输入收款银行卡卡号"
  290. placeholder-class="placeholder">
  291. </view>
  292. </view>
  293. <view class="row">
  294. <view class="label">采美对接人:</view>
  295. <view class="spacing">
  296. <input type="text"
  297. v-model="secondParams.dockingPeopleName"
  298. maxlength="15"
  299. placeholder="请输入采美对接人姓名"
  300. placeholder-class="placeholder">
  301. </view>
  302. </view>
  303. <view class="row">
  304. <view class="label">对接人联系方式:</view>
  305. <view class="spacing">
  306. <input type="text"
  307. v-model="secondParams.dockingPeopleMobile"
  308. maxlength="11" placeholder="请输入采美对接人手机号"
  309. placeholder-class="placeholder">
  310. </view>
  311. </view>
  312. <!-- <view class="row">
  313. <view class="label">商品类型:</view>
  314. <view class="select spacing">
  315. <picker
  316. @change="bindPickerChangeProduct($event)"
  317. :value="index"
  318. :range="productActions"
  319. range-key="name"
  320. >
  321. <input
  322. class="input"
  323. type="text"
  324. disabled="true"
  325. v-model="organizationTypeText1"
  326. placeholder="请选择发布身份"
  327. placeholder-class="placeholder"
  328. />
  329. </picker>
  330. </view>
  331. <text class="iconfont icon-xiayibu"></text>
  332. </view> -->
  333. <view class="row" >
  334. <view class="label"><text class="red">*</text>联系地址:</view>
  335. <view class="spacing" @click="showMulLinkageThreePicker">
  336. <text class="row-input" :class="addressData.address === '请选择所在地区' ? 'none,placeholder' : ''" >
  337. {{addressData.address}}
  338. </text>
  339. </view>
  340. <text class="iconfont icon-xiayibu"></text>
  341. </view>
  342. <textarea type="text"
  343. class="border-grey address-details"
  344. v-model="secondParams.address"
  345. maxlength="50"
  346. placeholder="请填写详细地址,如街道/小区/门牌等"
  347. placeholder-class="placeholder"/>
  348. </textarea>
  349. <view class="release-main-container">
  350. <view class="release-from">
  351. <view class="label"><text class="red">*</text>商品图片</view>
  352. <view class="release-input upload image uploadGoodsImages" >
  353. <view class="upload-file" v-if="GoodsImagesList.length<5">
  354. <text class="iconfont icon-shangchuantupian"></text>
  355. <p class="add-text">商品图片</p>
  356. <view ref="goodsImages" class="input-file" @click="uploadGoodsImagesFn"></view>
  357. </view>
  358. <view class="upload-file" v-for="(item, index) in GoodsImagesList" :key="index">
  359. <image :data-original='item' :src="item" :data-image="item" alt="" class="upload-img" ></image>
  360. <text class=" del iconfont icon-iconfontguanbi" @click="removeGoodsImagesFn(index)"></text>
  361. </view>
  362. </view>
  363. <view class="form-upload-tips">
  364. <text class="iconfont icon-wenhao" ></text>
  365. <view class="wen-tips" >最多上传5张二手商品图片,请尽量全部上传,单张图片不能超过5M</view>
  366. </view>
  367. </view>
  368. <view class="row">
  369. <view class="label-im">二手出让承诺函签署文件:</view>
  370. <view class="label-em">(仅支持pdf文件,大小不能超过20)</view>
  371. <view class="spacing file-none" v-if="secondParams.fileName == ''">
  372. <view class="file-none-button" @click="uploadCommitmentFile">上传</view>
  373. </view>
  374. <view class="spacing file-text" v-else>
  375. <text class="file-text-em">{{ secondParams.fileName }}</text>
  376. <text class=" del iconfont icon-iconfontguanbi" @click="deleteCommitmentFile"></text>
  377. </view>
  378. </view>
  379. <view class="row none">
  380. <view class="label-im">二手出让承诺函签署图片</view>
  381. <view class="label-em">(若不方便上传承诺函签署文件,可对已签署的承诺函进行拍照或者截图再上传图片)</view>
  382. <view class="label-em">图片大小不超过5M</view>
  383. <view class="release-input upload image uploadGoodsImages" >
  384. <view class="upload-file" v-if="secondParams.commitmentImage == ''">
  385. <i class="iconfont icon-shangchuantupian"></i>
  386. <text class="add-text">承诺函图片</text>
  387. <view ref="goodsImages" class="input-file" @click="uploadCommitmentImageFn"></view>
  388. </view>
  389. <view class="upload-file" v-else>
  390. <image :src="secondParams.commitmentImage" alt="" class="upload-img" ></image>
  391. <i class=" del iconfont icon-iconfontguanbi" @click="removeCommitmentImageFn"></i>
  392. </view>
  393. </view>
  394. </view>
  395. <view class="productinfo">
  396. <view class="label unlogin-label" style="width: 100%;">商品详细信息</view>
  397. <view class="textarea-wrapper">
  398. <textarea class="textarea"
  399. type="text"
  400. v-model="secondParams.productDetails"
  401. placeholder="请填写商品详细信息,对商品进行更详细的描述"
  402. placeholder-class="placeholder"
  403. maxlength="200"
  404. @input="onTextareaInputInfo"
  405. />
  406. <span class="word-limit">{{secondParams.productDetails.length}}/200</span>
  407. </view>
  408. </view>
  409. </view>
  410. </view>
  411. <view class="secondBj thebj" v-show="modal1" :class="modal1 ? 'show':''">
  412. <view class="bjmain theresult">
  413. <text class="title">发布提示</text>
  414. <text class="content"> {{ tipsContentText }} </text>
  415. <view class="paybtn">
  416. <view class="btn cancel" @click.stop="cancelButtonFn">{{ cancelButtonText }}</view>
  417. <view class="btn confirm" @click.stop="confirmButtonFn">{{ confirmButtonText }}</view>
  418. </view>
  419. </view>
  420. </view>
  421. <!-- 地址弹窗 -->
  422. <mpvue-city-picker :themeColor="themeColor"
  423. ref="mpvueCityPicker"
  424. :pickerValueDefault="cityPickerValueDefault"
  425. @onCancel="onCancel"
  426. @onConfirm="onConfirm">
  427. </mpvue-city-picker>
  428. <!-- 发布按钮 -->
  429. <tui-bottom-popup :radius="false" :mask="false" :show="popupShow">
  430. <view class="tui-popup-box clearfix">
  431. <view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
  432. <view class="tui-flex-1">
  433. <view class="tui-button-text" @click="handleChangAgree">
  434. <text class="iconfont"
  435. :class="checkbox ? 'icon-yixuanze':'icon-weixuanze'" >
  436. </text>
  437. 已阅读并同意采美
  438. <text style="color:#1890f9;" @click.stop="this.$api.navigateTo('/pages/service/service?id=1039&title=二手出让协议')">《二手出让协议》</text>
  439. </view>
  440. </view>
  441. <view class="tui-flex-1">
  442. <view class="tui-button" @click="handleSubmitBtn">发布</view>
  443. </view>
  444. </view>
  445. </view>
  446. </tui-bottom-popup>
  447. <!-- 弹窗提示 -->
  448. <tui-modal :show="modal" :padding="'40rpx 30rpx'" @cancel="hideMobel" :custom="true" fadeIn >
  449. <view class="tui-modal-custom">
  450. <view class="tui-prompt-text">
  451. {{ contentModalText }}
  452. </view>
  453. <view class="tui-prompt-flex">
  454. <view class="btn btn-confirm" @click="handleClick">确定</view>
  455. </view>
  456. </view>
  457. </tui-modal>
  458. </view>
  459. </template>
  460. <script>
  461. import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
  462. import { uploadFileImage , uploadFilePdf } from '@/services/public.js'
  463. import authorize from '@/common/config/authorize.js'
  464. import $reg from '@/common/config/common.js'
  465. import { mapState,mapMutations } from 'vuex'
  466. export default{
  467. name:'secondHandrelease',
  468. components:{
  469. mpvueCityPicker,
  470. },
  471. data(){
  472. return{
  473. isIphoneX: this.$store.state.isIphoneX,
  474. popupShow:true,
  475. userIdentity:0,
  476. bankTypeText:'请选择账户类型',
  477. publisherText:'个人身份',
  478. organizationTypeText:'请选择二手分类',
  479. organizationTypeText1:'请选择商品类型',
  480. brandActions:[],
  481. publisherActions:[
  482. {name:'个人身份',value:1},
  483. {name:'公司身份',value:2},
  484. ],
  485. categoryActions:[
  486. {name:'二手仪器',value:1},
  487. {name:'其他',value:3},
  488. ],
  489. productActions:[
  490. {name:'医美',value:1},
  491. {name:'非医美',value:3},
  492. ],
  493. productFileTypeActions:[
  494. { name:'仪器原始合同',value:1,isChecked:false},
  495. { name:'仪器注册证',value:2,isChecked:false},
  496. { name:'仪器发票',value:3,isChecked:false},
  497. { name:'仪器报关单',value:4,isChecked:false},
  498. ],
  499. bankActions:[
  500. {name:'公账',value:1},
  501. {name:'私账',value:2},
  502. ],
  503. isCheckedNotype:false,
  504. GoodsImagesList:[],
  505. secondParams:{
  506. publishIdentity:1, // 发布者身份 1 个人身份 2 公司身份
  507. secondHandType:'',//一级分类
  508. instrumentType:1,//二手仪器分类
  509. name:'',
  510. brandId:'',//品牌ID
  511. brandName:'',//其他品牌
  512. fixedYears:'',//出厂
  513. companyName:'',//公司名称
  514. maturityYears:'',//产品到期
  515. price:'',//交易价
  516. detailTalkFlag:1,//是否启用详聊
  517. normalPrice:'',//市场价
  518. originalPrice:'',//采购价
  519. stock:'',//数量
  520. productQuality:'',//商品成色
  521. fileType:'', // 商品文件类型
  522. contactName:'',//联系人
  523. contactMobile:'',//联系方式
  524. checkCode:'',// 联系人手机验证码
  525. cardNumber:'',// 收款账号
  526. authenticationImage:'', //身份证正面
  527. authenticationBackImage:'', //身份证反面
  528. licenseImage:'',//营业执照图片
  529. commitmentImage:'',//承诺函图片
  530. dockingPeopleName:'',//采美对接人姓名
  531. dockingPeopleMobile:'',//采美对接人手机号
  532. secondProductType:'',//
  533. townId:'',//县区地址
  534. address:'',//详细地址
  535. image:'',//图片
  536. fileName:'',
  537. ossName:'',
  538. productDetails:'',//商品详细信息
  539. announType:1,//发布类型 1.二手预成交商品 2.二手估价商品
  540. source:4,//二手发布来源.1:WWW,2:小程序,3:后台,4:协销
  541. accountName:'',//开户名
  542. banOfDeposit:'',//开户行
  543. accountType:'', // 账户类型
  544. },
  545. checkedFileTypeList:[],
  546. addressData:{
  547. address:'请选择所在地区',
  548. townID:'', //区ID
  549. cityID:'', //区ID
  550. provinceID:'', //区ID
  551. addressDetail: '', //地址
  552. },
  553. brandName:'请选择品牌名称',
  554. checkbox:false,
  555. tipsContentText:'',
  556. cancelButtonText:'取消发布',
  557. confirmButtonText:'去支付',
  558. contentModalText:'发布成功!商品信息会在1-2个工作日内进行审核,审核通过后将立即上线到采美二手市场',
  559. isButtonsType:0,
  560. vShow_detailTalkFlag:false,
  561. modal:false,
  562. modal1:false,
  563. isMobileDisabled: true, //手机验证码按钮控制
  564. mobilCount: '', //倒计时
  565. mobileCodeText: '获取验证码',
  566. mobilTime: null,
  567. }
  568. },
  569. methods:{
  570. onTextareaInputInfo(e){
  571. this.secondParams.productDetails = e.detail.value
  572. },
  573. showMulLinkageThreePicker() {//三级地址联动
  574. this.isShowInput = true
  575. this.$refs.mpvueCityPicker.show()
  576. },
  577. onConfirm(e) {//获取选择的地址信息
  578. this.addressData.address = e.name
  579. this.addressData.townID = e.townCode
  580. this.addressData.cityID = e.cityCode
  581. this.addressData.provinceID = e.provinceCode
  582. this.secondParams.townId = this.addressData.townID
  583. },
  584. bindPickerChangePublisher(e) {// 选择发布者身份
  585. this.publisherText = this.publisherActions[e.target.value].name
  586. this.secondParams.publishIdentity = this.publisherActions[e.target.value].value
  587. },
  588. bindPickerBankType(e) {// 选择账户类型
  589. this.bankTypeText = this.bankActions[e.target.value].name
  590. this.secondParams.accountType = this.bankActions[e.target.value].name
  591. },
  592. bindPickerChange(e) {// 选择二手分类
  593. this.secondParams.secondHandType = this.categoryActions[e.target.value].value
  594. if(this.secondParams.secondHandType === 1){
  595. this.organizationTypeText = '二手仪器-美容仪器'
  596. }else{
  597. this.organizationTypeText = this.categoryActions[e.target.value].name
  598. }
  599. },
  600. bindPickerChangeBrand(e) {
  601. // 选择品牌
  602. this.brandName = this.brandActions[e.target.value].name
  603. this.secondParams.brandId = this.brandActions[e.target.value].value
  604. },
  605. bindPickerChangeProduct(e) {
  606. // 选择商品类型
  607. this.organizationTypeText1 = this.productActions[e.target.value].name
  608. this.secondParams.secondProductType = this.productActions[e.target.value].value
  609. },
  610. choiceProductFileType(type,index){
  611. // 选择类别
  612. this.isCheckedNotype = false
  613. type.isChecked = !type.isChecked
  614. if (type.isChecked) {
  615. if(!this.contains(this.checkedFileTypeList,type.value)){
  616. this.checkedFileTypeList.push(type.value)
  617. }
  618. } else {
  619. this.checkedFileTypeList.splice(this.checkedFileTypeList.indexOf(type.value),1)
  620. }
  621. this.secondParams.fileType = this.checkedFileTypeList.join(',')
  622. },
  623. choiceNoProductFileType(){//选择无文件
  624. this.isCheckedNotype = true
  625. this.secondParams.fileType = 5
  626. this.productFileTypeActions.forEach((el)=>{
  627. el.isChecked = false
  628. })
  629. },
  630. contains(arr, val) {// 校验
  631. return arr.some(item => item === val)
  632. },
  633. Detailed(){
  634. this.vShow_detailTalkFlag = !this.vShow_detailTalkFlag
  635. if(this.vShow_detailTalkFlag){
  636. this.secondParams.detailTalkFlag = 2 //启用价格详聊
  637. }else {
  638. this.secondParams.detailTalkFlag = 1 //不启用价格详聊
  639. }
  640. },
  641. uploadGoodsImagesFn(event){//上传商品图片
  642. uploadFileImage().then(res =>{
  643. this.GoodsImagesList.push(JSON.parse(res.data).data)
  644. this.secondParams.image =this.GoodsImagesList.toString()+','
  645. })
  646. },
  647. uploadCardImageFn(type){//上传身份正反面照
  648. uploadFileImage().then(res =>{
  649. if(type == 1){
  650. this.secondParams.authenticationImage = JSON.parse(res.data).data
  651. }else{
  652. this.secondParams.authenticationBackImage = JSON.parse(res.data).data
  653. }
  654. })
  655. },
  656. uploadUserImageFn(event){//上传营业执照图片
  657. console.log('event')
  658. uploadFileImage().then(res =>{
  659. this.secondParams.licenseImage = JSON.parse(res.data).data
  660. })
  661. },
  662. uploadCommitmentImageFn(event){//上传承诺函图片
  663. uploadFileImage().then(res =>{
  664. this.secondParams.commitmentImage = JSON.parse(res.data).data
  665. })
  666. },
  667. uploadCommitmentFile(){//上传承诺函文件
  668. uploadFilePdf().then(res =>{
  669. let data = JSON.parse(res.data).data
  670. this.secondParams.fileName = uni.getStorageSync('fileName')
  671. this.secondParams.ossName = data.ossName
  672. console.log('fileName',this.secondParams.fileName)
  673. console.log('ossName',this.secondParams.ossName)
  674. })
  675. },
  676. deleteCommitmentFile(){//删除承诺函文件
  677. this.secondParams.fileName = ''
  678. },
  679. removeGoodsImagesFn(index){//删除商品图片
  680. this.GoodsImagesList.splice(index,1)
  681. this.secondParams.image =this.GoodsImagesList.toString()+','
  682. },
  683. removeCardImageFn(type){//删除身份证图片
  684. if(type == 1){
  685. this.secondParams.authenticationImage = ''
  686. }else{
  687. this.secondParams.authenticationBackImage = ''
  688. }
  689. },
  690. removeUserImageFn(index){//删除公司营业执照图片
  691. this.secondParams.licenseImage = ''
  692. },
  693. removeCommitmentImageFn(index){//删除承诺函图片
  694. this.secondParams.commitmentImage = ''
  695. },
  696. contactMobileOnblur(e){// 识别手机号是否正确
  697. if(this.$reg.isMobile(e.detail.value)){
  698. this.isMobileDisabled = false
  699. }
  700. },
  701. getMobileCodeFn(){
  702. let params = {
  703. mobile:this.secondParams.contactMobile,
  704. isCheckCaptcha:1,
  705. activateCodeType:6,
  706. platformType:2
  707. }
  708. this.isMobileDisabled = true
  709. this.PublicService.GetRegisterMobileCode(params).then(response =>{
  710. this.$util.msg('验证短信已发送',2000)
  711. const TIME_COUNT = 60
  712. if (!this.mobilTime) {
  713. this.mobilCount = TIME_COUNT
  714. this.isMobileDisabled = true
  715. this.mobilTime = setInterval(() => {
  716. if (this.mobilCount > 1 && this.mobilCount <= TIME_COUNT) {
  717. this.mobilCount--
  718. this.mobileCodeText = this.mobilCount +'秒后重发'
  719. } else {
  720. this.isMobileDisabled = false
  721. clearInterval(this.mobilTime)
  722. this.mobilTime = null
  723. this.mobileCodeText = '获取验证码'
  724. }
  725. },1000)
  726. }
  727. }).catch( error =>{
  728. this.$util.msg(error.msg,2000)
  729. this.isMobileDisabled = false
  730. })
  731. },
  732. handleSubmitBtn () {
  733. if(this.secondParams.contactName == ''){
  734. this.$util.msg('请输入联系人姓名',2000)
  735. return
  736. }
  737. if(this.secondParams.contactMobile == ''){
  738. console.log(this.secondParams.contactMobile)
  739. this.$util.msg('请输入联系方式',2000)
  740. return
  741. }
  742. if(!$reg.isMobile(this.secondParams.contactMobile)){
  743. this.$util.msg('请填写正确的手机号',2000)
  744. return
  745. }
  746. if(this.secondParams.checkCode == ''){
  747. this.$util.msg('请输入短信验证码',2000)
  748. return
  749. }
  750. if(this.secondParams.secondHandType == ''){
  751. this.$util.msg('请选择分类',2000)
  752. return
  753. }
  754. if(this.secondParams.secondHandType == 1 ){
  755. if(this.secondParams.instrumentType ==''){
  756. this.$util.msg('请完善仪器分类',2000)
  757. return
  758. }
  759. }
  760. if(this.secondParams.brandId == ''){
  761. this.$util.msg('请选择商品品牌',2000)
  762. return
  763. }
  764. if(this.secondParams.name == ''){
  765. this.$util.msg('请输入商品名称',2000)
  766. return
  767. }
  768. if(this.secondParams.publishIdentity === 2) {
  769. if (this.secondParams.companyName=='') {
  770. this.$util.msg('请输入公司名称',2000)
  771. return
  772. }
  773. }
  774. if(!this.$api.isNumber(this.secondParams.price)){
  775. this.$util.msg('请输入交易价',2000)
  776. return
  777. }
  778. if(this.secondParams.productQuality == ''){
  779. this.$util.msg('请输入商品成色',2000)
  780. return
  781. }
  782. if(this.secondParams.fileType == ''){
  783. this.$util.msg('请选择商品包含的文件',2000)
  784. return
  785. }
  786. if(this.secondParams.cardNumber == ''){
  787. this.$util.msg('请输入收款银行卡卡号',2000)
  788. return
  789. }
  790. if(this.userIdentity === 1){
  791. if(this.secondParams.dockingPeopleName == ''){
  792. this.$util.msg('请输入采美对接人姓名',2000)
  793. return
  794. }
  795. if(this.secondParams.dockingPeopleMobile == ''){
  796. this.$util.msg('请输入采美对接人手机号',2000)
  797. return
  798. }
  799. }
  800. if(this.secondParams.dockingPeopleMobile !=''){
  801. if(!$reg.isMobile(this.secondParams.dockingPeopleMobile)){
  802. this.$util.msg('请填写正确的采美对接人手机号',2000)
  803. return
  804. }
  805. }
  806. if(this.secondParams.townId == ''|| this.secondParams.townId == undefined){
  807. this.$util.msg('请完善联系地址',2000)
  808. return
  809. }
  810. if(this.secondParams.address == ''){
  811. this.$util.msg('请填写详细地址',2000)
  812. return
  813. }
  814. if(this.GoodsImagesList ==''){
  815. this.$util.msg('请上传商品图片',2000)
  816. return
  817. }
  818. if(this.checkbox==false){
  819. this.$util.msg('请勾选已阅读',2000)
  820. return
  821. }
  822. if(this.secondParams.publishIdentity === 1){
  823. if(this.secondParams.authenticationImage == '' && this.secondParams.authenticationBackImage == ''){
  824. this.modal1 = true
  825. this.tipsContentText = '上传身份证照片,您的二手商品将获得更好的推荐和曝光,方便您快速卖出。'
  826. this.cancelButtonText = '继续发布'
  827. this.confirmButtonText = '去上传'
  828. this.isButtonsType = 1
  829. return
  830. }
  831. }else{
  832. if(this.secondParams.licenseImage == ''){
  833. this.modal1 = true
  834. this.tipsContentText = '上传营业执照照片,您的二手商品将获得更好的推荐和曝光,方便您快速卖出。'
  835. this.cancelButtonText = '继续发布'
  836. this.confirmButtonText = '去上传'
  837. this.isButtonsType = 1
  838. return
  839. }
  840. }
  841. if(this.secondParams.commitmentImage == '' || this.secondParams.ossName == ''){
  842. this.modal1 = true
  843. this.tipsContentText = '上传二手出让承诺函,您的二手商品将获得更好的推荐和曝光,方便您快速卖出。'
  844. this.cancelButtonText = '继续发布'
  845. this.confirmButtonText = '去上传'
  846. this.isButtonsType = 1
  847. return
  848. }
  849. console.log(this.secondParams)
  850. this.SecondHandProduct(this.secondParams)
  851. },
  852. SecondHandProduct(params){//提交发布
  853. this.SecondService.SecondHandProduct(params).then(res=>{
  854. this.modal = true
  855. })
  856. .catch(error =>{
  857. this.$util.msg(error.msg,2000)
  858. })
  859. },
  860. cancelButtonFn(){//弹窗操作按钮
  861. switch(this.isButtonsType){
  862. case 1:
  863. this.modal1 = false
  864. this.SecondHandProduct(this.secondParams)
  865. break
  866. case 2:
  867. this.modal1 = false
  868. break
  869. }
  870. },
  871. confirmButtonFn(){//弹窗操作按钮
  872. switch(this.isButtonsType){
  873. case 1:
  874. this.modal1 = false
  875. break
  876. case 2:
  877. this.modal1 = false
  878. break
  879. }
  880. },
  881. handleChangAgree() {
  882. this.checkbox = !this.checkbox
  883. },
  884. getBrandList() {
  885. // 获取收款类型列表
  886. this.SecondService.brandList()
  887. .then(response => {
  888. this.brandActions = response.data.map(item => ({
  889. ...item,
  890. name: item.name,
  891. value: item.id
  892. }))
  893. })
  894. .catch(err => {
  895. this.$util.msg(err.msg, 2000)
  896. })
  897. },
  898. hideMobel(){
  899. this.modal = false
  900. },
  901. handleClick(){
  902. this.modal = false
  903. this.$api.redirectTo ('/pages/second/product/product-list')
  904. }
  905. },
  906. onShow() {
  907. this.getBrandList()
  908. this.$api.getComStorage('userInfo').then((resolve) =>{
  909. this.userIdentity = resolve.userIdentity
  910. console.log(this.userIdentity)
  911. }).catch(error =>{
  912. console.log(error)
  913. })
  914. }
  915. }
  916. </script>
  917. <style lang="scss">
  918. view{font-size: 28rpx;}
  919. .my-maintenance{
  920. padding: 20rpx;
  921. }
  922. .bannerimg {
  923. height: 100rpx;
  924. width: 100%;
  925. }
  926. .bannerimg image{
  927. width: 100%;
  928. height: 100% ;
  929. }
  930. .newsTitle {
  931. line-height: 48rpx;
  932. text-align: left;
  933. color: #FF5B00;
  934. padding:20rpx;
  935. background-color: rgba(225, 86, 22, .1);
  936. border-radius: 10rpx;
  937. }
  938. .nestext{
  939. font-size: 24rpx;
  940. line-height: 40rpx;
  941. }
  942. .secondradio view{
  943. display: inline-block;
  944. color: #333333;
  945. margin-right: 21rpx;
  946. }
  947. .secondradio{
  948. display: inline-block;
  949. margin-left: 40rpx;
  950. }
  951. .Secondary{
  952. margin-left: 96rpx;
  953. }
  954. .secondradio view.active {
  955. color: #FF5B00;
  956. }
  957. .placeholder{
  958. color: #b2b2b2;
  959. }
  960. .linqi_text {
  961. width: 607rpx;
  962. height: 68rpx;
  963. background-color: #1890f9;
  964. box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(24, 144, 249, 0.17);
  965. text-align: center;
  966. line-height: 68rpx;
  967. color: #ffffff;
  968. margin: auto;
  969. font-size:24rpx;
  970. position: relative;
  971. }
  972. .jiaobiao {
  973. width: 0;
  974. height: 0;
  975. border-left: 20rpx solid transparent;
  976. border-right: 20rpx solid transparent;
  977. top: -25%;
  978. right: 40%;
  979. border-bottom: 20rpx solid #1890f9;
  980. position: absolute;
  981. }
  982. .label{
  983. color: #666666;
  984. display: inline-block;
  985. .red{
  986. color: #f94b4b;
  987. }
  988. }
  989. .label-im{
  990. width: 100%;
  991. line-height: 50rpx;
  992. font-size: $font-size-28;
  993. color: #666666;
  994. text-align: left;
  995. margin-top: 20rpx;
  996. .red{
  997. color: #f94b4b;
  998. }
  999. .sms{
  1000. font-size: $font-size-24;
  1001. color: #fea785;
  1002. }
  1003. }
  1004. .label-em{
  1005. line-height: 28rpx;
  1006. font-size: $font-size-20;
  1007. color: #fea785;
  1008. width: 100%;
  1009. text-align: left;
  1010. }
  1011. .label.second{
  1012. width: 155rpx;
  1013. }
  1014. .row .spacing.second{
  1015. width: 70%;
  1016. }
  1017. .row{
  1018. width: 100%;
  1019. border-bottom: 2rpx solid #e1e1e1;
  1020. line-height: 90rpx;
  1021. float: left;
  1022. height: auto;
  1023. position: relative;
  1024. .checkbox-main{
  1025. width: 100%;
  1026. .checkbox-list {
  1027. height: 60rpx;
  1028. font-size: $font-size-28;
  1029. line-height: 60rpx;
  1030. border-radius: 10rpx;
  1031. margin-right: 20rpx;
  1032. margin-bottom: 10rpx;
  1033. box-sizing: border-box;
  1034. float: left;
  1035. color: #333333;
  1036. .icon-yixuanze{
  1037. margin-right: 10rpx;
  1038. color: #FF5B00;
  1039. }
  1040. .icon-weixuanze{
  1041. margin-right: 10rpx;
  1042. color: #B2B2B2;
  1043. }
  1044. }
  1045. }
  1046. .row-btn{
  1047. width: 180rpx;
  1048. height:64rpx;
  1049. background: $btn-confirm;
  1050. padding: 0;
  1051. border-radius: 32rpx;
  1052. position: absolute;
  1053. right: 0;
  1054. top: 10rpx;
  1055. .row-input{
  1056. width: 180rpx;
  1057. height: 64rpx;
  1058. line-height: 64rpx;
  1059. padding: 0;
  1060. color: #FFFFFF;
  1061. background: $btn-confirm;
  1062. text-align: center;
  1063. border-radius: 32rpx;
  1064. &.other{
  1065. width: 180rpx;
  1066. background: #F7F7F7;
  1067. margin-right: 20rpx;
  1068. }
  1069. &.none{
  1070. background: #F7F7F7;
  1071. }
  1072. }
  1073. &.disabled{
  1074. background: #F7F7F7;
  1075. .row-input{
  1076. background: #F7F7F7;
  1077. color: #999999;
  1078. font-size: 24rpx;
  1079. }
  1080. }
  1081. }
  1082. &.none{
  1083. border-bottom: none;
  1084. }
  1085. }
  1086. .row.fenlei{
  1087. height: auto;
  1088. margin: 10rpx 0;
  1089. border: 0;
  1090. }
  1091. .select {
  1092. position: relative;
  1093. color: #b2b2b2;
  1094. text-align: left;
  1095. user-select: none;
  1096. }
  1097. .row .spacing{
  1098. display: inline-block;
  1099. margin-left: 50rpx;
  1100. width: 430rpx;
  1101. vertical-align:middle;
  1102. position: relative;
  1103. color: #333333;
  1104. .input{
  1105. color: #333333;
  1106. }
  1107. &.file{
  1108. width: 100%;
  1109. }
  1110. &.file-text{
  1111. width: 100%;
  1112. line-height: 44rpx;
  1113. font-size: 28rpx;
  1114. box-sizing: border-box;
  1115. margin-left: 0;
  1116. .file-text-em{
  1117. width: 100%;
  1118. text-overflow: ellipsis;
  1119. overflow: hidden;
  1120. display: -webkit-box;
  1121. -webkit-line-clamp: 1;
  1122. line-clamp: 1;
  1123. -webkit-box-orient: vertical;
  1124. line-height: 44rpx;
  1125. font-size: 28rpx;
  1126. padding-right: 40rpx;
  1127. box-sizing: border-box;
  1128. position: relative;
  1129. }
  1130. .icon-iconfontguanbi{
  1131. width: 40rpx;
  1132. height: 40rpx;
  1133. line-height: 40rpx;
  1134. display: block;
  1135. position: absolute;
  1136. top: 0;
  1137. right:0;
  1138. color: #f94b4b;
  1139. font-size: 36rpx;
  1140. }
  1141. }
  1142. &.file-none{
  1143. width: 100%;
  1144. margin-left: 0;
  1145. position: relative;
  1146. .file-none-button{
  1147. width: 88rpx;
  1148. height: 44rpx;
  1149. background-color: #FF5B00;
  1150. border-radius: 8rpx;
  1151. line-height: 44rpx;
  1152. text-align: center;
  1153. font-size: 24rpx;
  1154. color: #FFFFFF;
  1155. position: absolute;
  1156. right: 0;
  1157. top: -15rpx;
  1158. }
  1159. }
  1160. }
  1161. .select .placeholder {
  1162. position: relative;
  1163. cursor: pointer;
  1164. width: 100%;
  1165. display: inline-block;
  1166. }
  1167. .icon-xiayibu{
  1168. right: 0rpx;
  1169. color: #b2b2b2;
  1170. position: absolute;
  1171. }
  1172. .xiangliao{
  1173. font-size: 26rpx;
  1174. margin-right: 10rpx;
  1175. color: #b2b2b2;
  1176. }
  1177. .icon-jiagexiangliao{
  1178. color: #FF5B00 !important;
  1179. }
  1180. .pricecolor{
  1181. margin-left: 10rpx;
  1182. }
  1183. .showflag{
  1184. color: #b2b2b2;
  1185. }
  1186. .border-grey{
  1187. width: 100%;
  1188. resize: none;
  1189. padding: 20rpx 0;
  1190. height: 160rpx;
  1191. border-bottom: 2rpx solid #e1e1e1;
  1192. }
  1193. .release-main-container {
  1194. overflow: hidden;
  1195. margin: 20rpx 0;
  1196. }
  1197. .uploadGoodsImages{
  1198. display: flex;
  1199. overflow-x: auto;
  1200. overflow-y: hidden;
  1201. }
  1202. .secondradio{
  1203. .row-radio{
  1204. transform: scale(.8);
  1205. }
  1206. .row-input{margin-right: 10rpx;}
  1207. }
  1208. .linqi_text .p{
  1209. font-size: $font-size-20;
  1210. }
  1211. .upload-file {
  1212. float: left;
  1213. margin: 20rpx 20rpx 20rpx 0px;
  1214. cursor: pointer;
  1215. width: 194rpx;
  1216. height: 194rpx;
  1217. border-radius: 6rpx;
  1218. border: solid 2rpx #e1e1e1;
  1219. flex-shrink: 0;
  1220. position: relative;
  1221. display: inline-block;
  1222. .input-file {
  1223. width: 194rpx;
  1224. height: 194rpx;
  1225. opacity: 0;
  1226. cursor: pointer;
  1227. position: absolute;
  1228. top: 0;
  1229. left: 0;
  1230. }
  1231. .upload-img {
  1232. width: 100%;
  1233. height: 100%;
  1234. display: block;
  1235. border-radius: .53vw;
  1236. }
  1237. .icon-shangchuantupian{
  1238. display: block;
  1239. width: 100%;
  1240. height: 100rpx;
  1241. line-height: 90rpx;
  1242. color: #b2b2b2;
  1243. font-size: $font-size-40;
  1244. text-align: center;
  1245. padding-top: 20rpx;
  1246. box-sizing: border-box;
  1247. }
  1248. .add-text {
  1249. display: block;
  1250. width: 100%;
  1251. line-height: 50rpx;
  1252. font-size: 24rpx;
  1253. color: #b2b2b2;
  1254. text-align: center;
  1255. }
  1256. .icon-iconfontguanbi{
  1257. width: 40rpx;
  1258. height: 40rpx;
  1259. line-height: 40rpx;
  1260. display: block;
  1261. position: absolute;
  1262. background: #f94b4b;
  1263. text-align: center;
  1264. line-height: 40rpx;
  1265. border-radius: 50%;
  1266. top: -15rpx;
  1267. right:-18rpx;
  1268. color: #FFFFFF;
  1269. font-size: $font-size-24;
  1270. }
  1271. }
  1272. .wen-tips {
  1273. width: 664rpx;
  1274. height: 68rpx;
  1275. line-height: 68rpx;
  1276. text-align: center;
  1277. color: #FFF;
  1278. font-size: 20rpx;
  1279. background-color: #1890f9;
  1280. box-shadow: 0 0.8vw 1.6vw 0 rgba(24, 144, 249, 0.17);
  1281. border-radius: 2rpx;
  1282. display: none;
  1283. }
  1284. .form-upload-tips:hover .wen-tips {
  1285. display: block;
  1286. }
  1287. .textarea-wrapper {
  1288. letter-spacing: 2rpx;
  1289. line-height: 48rpx;
  1290. color: #333333;
  1291. position: relative;
  1292. font-size: 28rpx;
  1293. border: 2rpx solid #E1E1E1;
  1294. height: 300rpx;
  1295. padding: 16rpx;
  1296. border-radius: 6rpx;
  1297. margin: 20rpx 0;
  1298. }
  1299. .textarea-wrapper textarea{
  1300. width: 100%;
  1301. }
  1302. .word-limit {
  1303. position: absolute;
  1304. right: 2.7vw;
  1305. bottom: 2.7vw;
  1306. font-size: 3.2vw;
  1307. color: #9aa5b5;
  1308. }
  1309. .row.Read{
  1310. border: 0;
  1311. text-align: center;
  1312. color: #999999;
  1313. }
  1314. .thebj {
  1315. position: fixed;
  1316. left: 0;
  1317. top: 0;
  1318. bottom: 0;
  1319. width: 100%;
  1320. height: 100%;
  1321. background-color: rgba(0, 0, 0, .5);
  1322. z-index: 999999;
  1323. opacity: 0;
  1324. }
  1325. .thebj.show{
  1326. opacity: 1;
  1327. }
  1328. .theresult {
  1329. position: absolute;
  1330. top: 50%;
  1331. left: 50%;
  1332. transform: translate(-50%, -50%);
  1333. width:580rpx;
  1334. background-color: #fff;
  1335. border-radius: 32rpx;
  1336. }
  1337. .theresult .title{
  1338. line-height: 100rpx;
  1339. text-align: center;
  1340. display: block;
  1341. color: #333333;
  1342. font-size: 30rpx;
  1343. font-weight: bold;
  1344. border-bottom: 2rpx solid #efefef;
  1345. }
  1346. .theresult .content{
  1347. padding: 30rpx 52rpx;
  1348. line-height: 48rpx;
  1349. color: #666666;
  1350. font-size: 30rpx;
  1351. display: block;
  1352. }
  1353. .paybtn{
  1354. width: 100%;
  1355. height: 90rpx;
  1356. float: left;
  1357. .btn{
  1358. width: 50%;
  1359. height: 90rpx;
  1360. text-align: center;
  1361. line-height: 90rpx;
  1362. font-size: 30rpx;
  1363. display: inline-block;
  1364. float: left;
  1365. &.cancel{
  1366. background-color: #efefef;
  1367. border-radius: 0rpx 0rpx 0rpx 32rpx;
  1368. color: #999999;
  1369. }
  1370. &.confirm{
  1371. background-image: linear-gradient(270deg, #f28f31 0%, #FF5B00 100%);
  1372. border-radius: 0rpx 0rpx 32rpx 0rpx;
  1373. color: #fff;
  1374. }
  1375. }
  1376. }
  1377. .icon-wenhao{
  1378. color: #1890f9;
  1379. font-size: 35rpx;
  1380. width: 50rpx;
  1381. }
  1382. .form-upload-tips:hover .wen-tips {display: block;}
  1383. .tui-popup-box {
  1384. position: relative;
  1385. box-sizing: border-box;
  1386. min-height: 100rpx;
  1387. padding: 6rpx 24rpx;
  1388. .tui-popup-content {
  1389. padding-top: 30rpx;
  1390. }
  1391. }
  1392. .tui-popup-btn {
  1393. width: 100%;
  1394. height: auto;
  1395. float: left;
  1396. box-sizing: border-box;
  1397. margin-top: 30rpx;
  1398. .tui-button {
  1399. width: 600rpx;
  1400. height: 88rpx;
  1401. background: $btn-confirm;
  1402. line-height: 88rpx;
  1403. text-align: center;
  1404. color: #ffffff;
  1405. font-size: $font-size-28;
  1406. border-radius: 44rpx;
  1407. margin: 0 auto;
  1408. }
  1409. .tui-button-text{
  1410. width: 600rpx;
  1411. height: 70rpx;
  1412. line-height: 70rpx;
  1413. text-align: center;
  1414. color: #333333;
  1415. font-size: $font-size-26;
  1416. margin: 0 auto;
  1417. margin-top: 15rpx;
  1418. .iconfont{
  1419. margin-right: 10rpx;
  1420. &.icon-yixuanze{
  1421. color: $color-system;
  1422. }
  1423. }
  1424. }
  1425. }
  1426. .tui-prompt-flex{
  1427. width: 100%;
  1428. height: 80rpx;
  1429. display: flex;
  1430. margin-top: 20rpx;
  1431. .btn{
  1432. flex: 1;
  1433. line-height: 80rpx;
  1434. font-size: $font-size-26;
  1435. text-align: center;
  1436. color: #FFFFFF;
  1437. border-radius: 40rpx;
  1438. margin: 0 24rpx;
  1439. &.btn-cancel{
  1440. background: #F7F7F7;
  1441. color: #999999;
  1442. }
  1443. &.btn-confirm{
  1444. background: $btn-confirm;
  1445. }
  1446. }
  1447. }
  1448. .tui-prompt-text{
  1449. line-height: 44rpx;
  1450. font-size: $font-size-26;
  1451. color: #333333;
  1452. .text{
  1453. color: $color-system;
  1454. }
  1455. }
  1456. </style>