form.vue 40 KB

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