form.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689
  1. <template name="secondHandrelease">
  2. <view class="fleaMarketForm">
  3. <view class="bannerimg"><image src="https://admin-b.caimei365.com/userfiles/1/images/photo/2020/11/banner3.png"></image></view>
  4. <view class="my-maintenance" >
  5. <view class="newsTitle">
  6. <view>欢迎您来到采美365网二手商品市场,您可以在这里发布二手
  7. 设备/产品信息,每个商品需要收取您100元的展示费,展示期为6个月; 为了完整展示您的商品,请您认真填写以下内容,谢谢合作</view>
  8. </view>
  9. <form>
  10. <view class="row fenlei">
  11. <view class="label">分类</view>
  12. <view class="secondradio">
  13. <view v-for="(item,index) in fenlei" :key="index" v-model="secondParams.secondHandType" @click="secondHandRidio(item)"
  14. :class="currentId==item.value?'active':''">
  15. <label class="iconfont" :class="currentId==item.value?'icon-yixuanze':'icon-weixuanze'"></label>{{item.name}}
  16. </view>
  17. </view>
  18. <view class="secondradio Secondary" v-if="isShow" >
  19. <view v-for="(item ,index) in radioList" :key="index" :class="item.isChecked ? 'active':''"
  20. @click="secondHandType(item)" class="icon mIcon ">
  21. <label class="iconfont" :class="item.isChecked?'icon-yixuanze':'icon-weixuanze'"></label>{{item.name}}
  22. </view>
  23. </view>
  24. <view class="linqi_text" v-show="secondParams.secondHandType==2">
  25. <view class="jiaobiao"></view>
  26. <p>临期产品是指临近保质期的产品,距离到期日最好在6个月以上</p>
  27. </view>
  28. </view>
  29. <view class="row">
  30. <view class="label">商品品牌</view>
  31. <!-- <view class="select spacing" @tap.stop="hanldOperationConfim">
  32. <view class="placeholder" >{{brandname}}</view>
  33. <text class="iconfont icon-xiayibu"></text>
  34. </view> -->
  35. <!-- 品牌弹窗 -->
  36. <second-brandalert ref="brandalert"
  37. :barndDatas="brandData"
  38. @showAlert="handAlertShow">
  39. </second-brandalert>
  40. <!-- <seller-regulations ref="regulations"
  41. :regulaDatas="regulationsData"
  42. @showregulaAlert="handregulaAlertShow">
  43. </seller-regulations> -->
  44. </view>
  45. <view class="row">
  46. <view class="label">商品名称</view>
  47. <view class="spacing">
  48. <input type="text" maxlength="40" v-model="secondParams.name" placeholder="请输入商品名称,不超过40个汉字">
  49. </view>
  50. </view>
  51. <view class="row">
  52. <view class="label">出厂日期</view>
  53. <view class="spacing">
  54. <input type="text" v-model="secondParams.fixedYears" maxlength="10" placeholder="请输入出厂日期 如:2020年06月">
  55. </view>
  56. </view>
  57. <view class="row" v-show="secondParams.secondHandType==2">
  58. <view class="label">产品到期日</view>
  59. <view class="spacing">
  60. <input type="text" v-model="secondParams.maturityYears" maxlength="10" placeholder="请输入产品到期日,如:2020年12月">
  61. </view>
  62. </view>
  63. <view class="row">
  64. <view class="label">公司名称</view>
  65. <view class="spacing">
  66. <input type="text" v-model="secondParams.companyName" maxlength="30" placeholder="请输入公司名称,不超过30个汉字">
  67. </view>
  68. </view>
  69. <view class="row">
  70. <view class="label">交易价</view>
  71. <view class="spacing">
  72. <input type="text" maxlength="20" v-model="secondParams.price1" placeholder="请输入交易价">
  73. </view>
  74. </view>
  75. <view style="margin-top: 15rpx;">
  76. <label @click="Detailed($event)" v-model="secondParams.detailTalkFlags" class="iconfont xiangliao"
  77. :class="vShow_detailTalkFlag?'icon-jiagexiangliao':'icon-juxingweigouxuan'" >
  78. <label class='pricecolor' >价格详聊</label>
  79. </label>
  80. <label class="showflag" v-show="vShow_detailTalkFlag">(勾选代表同意不显示交易价)</label>
  81. </view>
  82. <view class="row" v-show="secondParams.secondHandType==2">
  83. <view class="label">市场价</view>
  84. <view class="spacing">
  85. <input type="text" v-model="secondParams.normalPrice" maxlength="30" oninput="value=value.replace(/[^\d]/g, '')" placeholder="请输入市场价">
  86. </view>
  87. </view>
  88. <view class="row" v-show="secondParams.secondHandType==2">
  89. <view class="label">采购价/原价</view>
  90. <view class="spacing">
  91. <input type="text" v-model="secondParams.originalPrice" maxlength="30" oninput="value=value.replace(/[^\d]/g, '')" placeholder="请输入采购价/原价"/>
  92. </view>
  93. </view>
  94. <view class="row" v-show="secondParams.secondHandType==2">
  95. <view class="label">数量</view>
  96. <view class="spacing">
  97. <input type="text" v-model="secondParams.stock" maxlength="30" placeholder="请输入数量">
  98. </view>
  99. </view>
  100. <view class="row">
  101. <view class="label">商品成色</view>
  102. <view class="spacing">
  103. <input type="text" maxlength="10" v-model="secondParams.productQuality" placeholder="请输入商品成色,如“9成新”">
  104. </view>
  105. </view>
  106. <view class="row">
  107. <view class="label">联系人</view>
  108. <view class="spacing">
  109. <input type="text" maxlength="6" v-model="secondParams.contactName" placeholder="请输入联系人姓名">
  110. </view>
  111. </view>
  112. <view class="row">
  113. <view class="label">联系方式</view>
  114. <view class="spacing">
  115. <input type="text" v-model="secondParams.contactMobile" maxlength="11" placeholder="请输入联系人手机号 / 固话">
  116. </view>
  117. </view>
  118. <view class="row">
  119. <view class="label">商品类型</view>
  120. <view class="secondradio">
  121. <view class="buy " v-for="(item ,index) in beauty" :key='index' value="item.value" @click="getProductType(item.value)" :class="secondType==item.value?' active':''">
  122. <label class="iconfont" :class="secondType==item.value?'icon-yixuanze':'icon-weixuanze'"></label>{{item.name}}
  123. </view>
  124. </view>
  125. </view>
  126. <view class="row" >
  127. <view class="label">联系地址</view>
  128. <view class="spacing" @click="showMulLinkageThreePicker">
  129. <text class="row-input" :class="addressData.address === '请选择所在地区' ? 'none' : ''">
  130. {{addressData.address}}
  131. </text>
  132. <text class="iconfont icon-xiayibu"></text>
  133. </view>
  134. </view>
  135. <textarea type="text" class="border-grey address-details" v-model="secondParams.address" maxlength="50"
  136. placeholder="请填写详细地址,如街道/小区/门牌等" /></textarea>
  137. <view class="release-main-container">
  138. <view class="release-from">
  139. <view class="label">商品图片</view>
  140. <view class="release-input upload image uploadGoodsImages" >
  141. <view class="upload-file" v-show="GoodsImagesList.length<5">
  142. <i class="iconfont icon-shangchuantupian"></i>
  143. <p class="add-text">营业执照</p>
  144. <view ref="goodsImages" class="input-file" @click="uploadGoodsImagesFn"></view>
  145. </view>
  146. <view class="upload-file" v-for="(item, index) in GoodsImagesList" :key="index">
  147. <img :data-original='item' :src="item" :data-image="item" alt="" class="upload-img" >
  148. <i class=" del iconfont icon-shanchu1" @click="removeGoodsImagesFn(index)"></i>
  149. </view>
  150. </view>
  151. <view class="form-upload-tips">
  152. <i class="iconfont icon-wenhao" ></i>
  153. <view class="wen-tips" >最多上传5张二手商品图片,请尽量全部上传,单张图片不能超过5M</view>
  154. </view>
  155. </view>
  156. </view>
  157. <view class="productinfo">
  158. <view class="label unlogin-label" style="width: 100%;">商品详细信息</view>
  159. <div class="textarea-wrapper">
  160. <textarea maxlength="200" v-model="secondParams.productDetails" cols="70" class="description" rows="6" placeholder="请填写商品详细信息,对商品进行更详细的描述"></textarea>
  161. <span class="word-limit">{{secondParams.productDetails.length}}/200</span>
  162. </div>
  163. </view>
  164. <view class="productinfo">
  165. <view class="label unlogin-label" style="width: 100%;">免责声明</view>
  166. <textarea class="smText">
  167. 鉴于本网站提供的二手版块信息包括但不限于公司名称,商品的简介、性能、描述与说明,相关图片、视频等均由卖家自行提供,
  168. 由卖家对其提供的信息承担相应法律责任。买家应自行甄别商品信息并查验商品性状。本网站对二手版块中买卖双方的交易不提供任何形式的担保与保证,特此声明!
  169. </textarea>
  170. </view>
  171. <view class="row Read">
  172. <span @click="changeBox($event)" class="iconfont xiangliao"
  173. :class="checkbox?'icon-jiagexiangliao':'icon-juxingweigouxuan'" ><span style="margin-left: 10rpx;">已阅读</span></span>
  174. </view>
  175. <div class="BtnAll" >
  176. <view @click="submitBtn" class="btn-submit">发布</view>
  177. </div>
  178. </form>
  179. <!-- 地址弹窗 -->
  180. <mpvue-city-picker :themeColor="themeColor"
  181. ref="mpvueCityPicker"
  182. :pickerValueDefault="cityPickerValueDefault"
  183. @onCancel="onCancel"
  184. @onConfirm="onConfirm">
  185. </mpvue-city-picker>
  186. </view>
  187. <view class="secondBj thebj" v-show="vShow_secondBj" :class="vShow_secondBj?'show':''">
  188. <view class="bjmain theresult">
  189. <span class="title">发布提示</span>
  190. <p>发布二手商品,采美需要收取您每个商品100元的展示费,展示期为6个月</br>
  191. 支付完成后,商品会在1-2个工作日内进行审核,审核通过后,商品会立即上线</p>
  192. <view class="paybtn">
  193. <view class="thegopay gozhofubao" @click.stop="quxiao">取消发布</view>
  194. <view class="cancel closebtn" @click.stop="gopay">去支付</view>
  195. </view>
  196. </view>
  197. </view>
  198. <payment-record ref="payment" v-if="isRequest" :discernReceiptList="discernReceiptList" :receiptAmount="receiptAmount"></payment-record>
  199. </view>
  200. </template>
  201. <script>
  202. import listCell from "@/components/tui-components/list-cell/list-cell.vue"
  203. import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
  204. import paymentRecord from '@/components/cm-module/orderDetails/paymentRecord'
  205. import secondBbrandAlert from '@/components/cm-module/modelAlert/secondBrandAlert.vue'
  206. import sellerRegulations from '@/components/cm-module/creatOrder/sellerRegulations.vue'
  207. import { uploadFileImage } from "@/api/utils.js"
  208. import { mapState,mapMutations } from 'vuex';
  209. export default{
  210. name:'secondHandrelease',
  211. components:{
  212. listCell,
  213. mpvueCityPicker,
  214. paymentRecord,
  215. secondBbrandAlert,
  216. sellerRegulations
  217. },
  218. data(){
  219. return{
  220. fenlei:[
  221. {name:'二手仪器',value:'1'},
  222. {name:'临期产品',value:'2'},
  223. {name:'其他',value:'3'},
  224. ],
  225. currentId:0,
  226. radioList:[
  227. {name:'轻光电',value:'1',isChecked:false},
  228. {name:'重光电',value:'2',isChecked:false},
  229. {name:'耗材配件',value:'3',isChecked:false},
  230. ],
  231. beauty:[
  232. {name:'医美',value:'1'},
  233. {name:'非医美',value:'2'},
  234. ],
  235. BrandList:[],
  236. isShow:false,
  237. GoodsImagesList:[],
  238. oldNum:0,
  239. secondType:0,
  240. vShow_GoodsImages:false,
  241. fromMessage:'',//提示文字
  242. secondParams:{
  243. secondHandType:'',//一级分类
  244. instrumentType:'',//二手仪器分类
  245. name:'',
  246. brandID:'',//品牌ID
  247. brandName:'',//其他品牌
  248. fixedYears:null,//出厂
  249. companyName:'',//公司名称
  250. maturityYears:'',//产品到期
  251. price1:'',//交易价
  252. detailTalkFlag:1,//是否启用详聊
  253. normalPrice:'',//市场价
  254. originalPrice:'',//采购价
  255. stock:'',//数量
  256. productQuality:'',//商品成色
  257. contactName:'',//联系人
  258. contactMobile:'',//联系方式
  259. secondProductType:null,//
  260. townId:'',//县区地址
  261. address:'',//详细地址
  262. image1:'',//图片
  263. productDetails:'',//商品详细信息
  264. source:1,
  265. },
  266. addressData:{
  267. address:'请选择所在地区',
  268. townID:'', //区ID
  269. cityID:'', //区ID
  270. provinceID:'', //区ID
  271. addressDetail: '', //地址
  272. },
  273. brandname:'请选择品牌名称',
  274. checkbox:false,
  275. shoplogoTwo:false,
  276. provinceIndex:'',
  277. provinceArray:[],
  278. cityArray: [],//市
  279. townArray: [],//区
  280. playid:'',
  281. checkVal:[],
  282. vShow_secondBj:false,
  283. resultBj:false,
  284. vShow_detailTalkFlag:false,
  285. showtips:false
  286. }
  287. },
  288. methods:{
  289. showMulLinkageThreePicker() {//三级地址联动
  290. this.isShowInput = true
  291. this.$refs.mpvueCityPicker.show()
  292. },
  293. onConfirm(e) {//获取选择的地址信息
  294. console.log('地址',e);
  295. this.addressData.address = e.name;
  296. this.addressData.townID = e.townCode;
  297. this.addressData.cityID = e.cityCode;
  298. this.addressData.provinceID = e.provinceCode;
  299. this.secondParams.townId = this.addressData.townID;
  300. this.secondParams.address = this.addressData.address;
  301. },
  302. onConfirmbrand(e){
  303. this.brandname = e.name;
  304. },
  305. // hanldOperationConfim(){
  306. // console.log(111)
  307. // this.specClass = 'show';
  308. // },
  309. secondHandRidio: function(item) {
  310. this.currentId = item.value;
  311. this.secondParams.secondHandType = item.value;
  312. if (item.value==1){
  313. this.isShow = true;
  314. }else {
  315. this.isShow = false;
  316. }
  317. },
  318. secondHandType:function(item){ //二手仪器
  319. item.isChecked = ! item.isChecked;
  320. if(item.isChecked){
  321. this.checkVal.push(item.value);
  322. this.secondParams.instrumentType = this.checkVal.toString();
  323. } else {
  324. this.checkVal.splice(this.checkVal.indexOf(item.value), 1);
  325. this.secondParams.instrumentType = this.checkVal.toString();
  326. }
  327. },
  328. ChangeBrand:function(item){ //品牌列表
  329. this.brandname = item.name;
  330. this.secondParams.brandID = item.id;
  331. if(this.secondParams.brandID==161){
  332. this.shoplogoTwo = true;
  333. }else {
  334. this.shoplogoTwo = false;
  335. }
  336. },
  337. Detailed:function(){
  338. this.vShow_detailTalkFlag = !this.vShow_detailTalkFlag;
  339. if(this.vShow_detailTalkFlag){
  340. this.secondParams.detailTalkFlag = 2 ;//启用价格详聊
  341. }else {
  342. this.secondParams.detailTalkFlag = 1 ;//不启用价格详聊
  343. }
  344. },
  345. dragstart: function(value) { // 记录初始信息
  346. this.oldNum = value;
  347. },
  348. uploadGoodsImagesFn: function(event){//上传商品图片
  349. uploadFileImage().then(res =>{
  350. this.GoodsImagesList.push(JSON.parse(res.data).data);
  351. this.secondParams.image1 =this.GoodsImagesList.toString()+',';
  352. })
  353. },
  354. removeGoodsImagesFn: function(index){//删除商品图片
  355. this.GoodsImagesList.splice(index,1);
  356. this.secondParams.image1 =this.GoodsImagesList.toString()+',';
  357. },
  358. getProductType:function(item){
  359. this.secondType=item;
  360. this.secondParams.secondProductType = item ;
  361. },
  362. submitBtn:function () {
  363. if(this.secondParams.secondHandType == ''){
  364. this.$util.msg('请选择分类',2000);
  365. return;
  366. }
  367. if(this.secondParams.secondHandType == 1 ){
  368. if(this.secondParams.instrumentType ==''){
  369. this.$util.msg('请完善仪器分类',2000);
  370. return;
  371. }
  372. }
  373. // if(this.secondParams.brandID == ''){
  374. // this.$util.msg('请选择商品品牌',2000);
  375. // return;
  376. // }
  377. if(this.secondParams.name == ''){
  378. this.$util.msg('请输入商品名称',2000);
  379. return
  380. }
  381. if(this.secondParams.secondHandType ==2) {
  382. if (this.secondParams.normalPrice == '') {
  383. this.$util.msg('请输入市场价',2000);
  384. return
  385. }
  386. if (this.secondParams.maturityYears == '') {
  387. this.$util.msg('请输入产品到期日',2000);
  388. return
  389. }
  390. }
  391. if(this.secondParams.price1 == ''){
  392. this.$util.msg('请输入交易价',2000);
  393. return
  394. }
  395. if(this.secondParams.secondHandType ==2){
  396. if(this.secondParams.originalPrice == ''){
  397. this.$util.msg('请输入采购价/原价',2000);
  398. return
  399. }
  400. if(this.secondParams.stock == ''){
  401. this.$util.msg('请输入数量',2000);
  402. return
  403. }
  404. }
  405. if(this.secondParams.productQuality == ''){
  406. this.$util.msg('请输入商品成色',2000);
  407. return
  408. }
  409. if(this.secondParams.contactName == ''){
  410. this.$util.msg('请输入联系人姓名',2000);
  411. return
  412. }
  413. if(this.secondParams.contactMobile == ''){
  414. console.log(this.secondParams.contactMobile)
  415. this.$util.msg('请输入联系方式',2000);
  416. return
  417. }
  418. if(this.secondParams.contactMobile.length !=11){
  419. this.$util.msg('联系方式格式不正确',2000);
  420. return
  421. }
  422. if(this.secondParams.townId == ''|| this.secondParams.townId == undefined){
  423. this.$util.msg('请完善联系地址',2000);
  424. return
  425. }
  426. if(this.secondParams.address == ''){
  427. this.$util.msg('请填写详细地址',2000);
  428. return
  429. }
  430. if(this.GoodsImagesList ==''){
  431. this.$util.msg('请上传图片',2000);
  432. return;
  433. }
  434. if(this.checkbox==false){
  435. this.$util.msg('请勾选已阅读',2000);
  436. return
  437. }
  438. console.log(this.secondParams)
  439. this.SecondService.SecondHandProduct(this.secondParams).then(res=>{ //提交发布
  440. if (res.code==0){
  441. this.vShow_secondBj = true;
  442. this.playid= res.data;
  443. }else{
  444. this.$util.msg(res.msg,2000)
  445. this.secondBj = false;
  446. return
  447. }
  448. })
  449. },
  450. quxiao:function(){
  451. this.vShow_secondBj = false;
  452. },
  453. gopay:function(){
  454. this.$api.navigateTo(`/pages/user/order/order-payment?type=confirm&productID=${this.playid}`)
  455. this.vShow_secondBj = false;
  456. },
  457. changeBox:function () {
  458. this.checkbox = !this.checkbox;
  459. },
  460. },
  461. created(){
  462. },
  463. }
  464. </script>
  465. <style lang="scss">
  466. *{
  467. border: 0;
  468. padding: 0;
  469. margin: 0;
  470. }
  471. view{font-size: 28rpx;}
  472. .my-maintenance{padding: 20rpx;}
  473. .bannerimg {height: 66rpx;width: 100%;}
  474. .bannerimg image{width: 100%;height: 100% ;}
  475. .newsTitle {line-height: 48rpx;text-align: left;color: #e15616;padding:20rpx;background-color: rgba(225, 86, 22, .1);font-size: 28rpx;}
  476. .secondradio view{display: inline-block;color: #333333;padding: 0 20rpx;}
  477. .secondradio{display: inline-block;margin-left: 40rpx;}
  478. .Secondary{width: 100%;text-align: center;margin: 0;}
  479. .secondradio view.active {color: #e15616;}
  480. .label .red{color: #f94b4b;}
  481. input[type="text"]::placeholder, textarea::placeholder {color: #b2b2b2;}
  482. input[type="text"]{line-height: 90rpx;overflow: unset;}
  483. .row label.iconfont{margin-right: 10rpx;}
  484. .icon-weixuanze{color: #b2b2b2;}
  485. .linqi_text { width: 100%; height: 68rpx;background-color: #1890f9;box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(24, 144, 249, 0.17);text-align: center;
  486. line-height: 68rpx;color: #ffffff;margin: auto;font-size:24rpx;position: relative;}
  487. .jiaobiao {width: 0;height: 0;border-left: 20rpx solid transparent;border-right: 20rpx solid transparent;top: -30%;
  488. right: 48%;border-bottom: 20rpx solid #1890f9;position: absolute;}
  489. .label{color: #666666;display: inline-block;idth: 120rpx;}
  490. .row{border-bottom: 2rpx solid #e1e1e1;line-height: 90rpx;height: 90rpx;}
  491. .row.fenlei{height: auto;}
  492. .select {position: relative;color: #9aa5b5;text-align: left;user-select: none;}
  493. .row .spacing{display: inline-block;margin-left: 60rpx;width: 68%;vertical-align:middle;position: relative}
  494. .select .placeholder {position: relative;cursor: pointer;width: 100%;display: inline-block;}
  495. .icon-xiayibu{right: 0rpx;;color: #b2b2b2;position: absolute}
  496. .xiangliao{font-size: 26rpx;margin-right: 10rpx;color: #b2b2b2}
  497. .icon-jiagexiangliao{color: #e15616 !important;}
  498. .pricecolor{margin-left: 10rpx;}
  499. .showflag{color: #b2b2b2;}
  500. .border-grey{width: 100%;resize: none;padding: 20rpx 0;height: 160rpx;border-bottom: 2rpx solid #e1e1e1;}
  501. .release-main-container {overflow: hidden;margin: 20rpx 0}
  502. .uploadGoodsImages{display: flex;overflow-x: auto;overflow-y: hidden;}
  503. .upload-file {
  504. position: relative;
  505. float: left;
  506. margin: 20rpx 20rpx 20rpx 0px;
  507. cursor: pointer;
  508. width: 194rpx;
  509. height: 194rpx;
  510. border-radius: 6rpx;
  511. border: solid 2rpx #e1e1e1;
  512. flex-shrink: 0;
  513. position: relative;
  514. display: inline-block;
  515. }
  516. .input-file {
  517. width: 194rpx;
  518. height: 194rpx;
  519. opacity: 0;
  520. cursor: pointer;
  521. position: absolute;
  522. }
  523. .add-text {
  524. font-size: 26rpx;
  525. color: #333330;
  526. opacity: 0.5;
  527. position: absolute;
  528. top: 55%;
  529. right:24%;
  530. }
  531. .upload-img {
  532. width: 100%;
  533. height: 100%;
  534. display: block;
  535. border-radius: .53vw;
  536. }
  537. .icon-shangchuantupian{
  538. width: 46rpx;
  539. height: 46rpx;
  540. color: #b2b2b2;
  541. font-size: 18px;
  542. position: absolute;
  543. top: 30%;
  544. left: 40%;
  545. }
  546. .icon-shanchu1{
  547. position: absolute;
  548. top: -25rpx;
  549. right:-10rpx;
  550. color: #f94b4b;
  551. font-size: 36rpx;
  552. }
  553. .wen-tips {
  554. width: 664rpx;
  555. height: 68rpx;
  556. line-height: 68rpx;
  557. text-align: center;
  558. color: #FFF;
  559. font-size: 20rpx;
  560. background-color: #1890f9;
  561. box-shadow: 0 0.8vw 1.6vw 0 rgba(24, 144, 249, 0.17);
  562. border-radius: 2rpx;
  563. display: none;
  564. }
  565. .form-upload-tips:hover .wen-tips {display: block;}
  566. .textarea-wrapper {
  567. letter-spacing: 2rpx;
  568. line-height: 48rpx;
  569. color: #b2b2b2;
  570. position: relative;
  571. font-size: 28rpx;
  572. border: 2rpx solid #b2b2b2;
  573. height: 300rpx;
  574. padding: 16rpx;
  575. border-radius: 6rpx;
  576. margin: 20rpx 0;
  577. }
  578. .textarea-wrapper textarea{
  579. width: 100%;
  580. }
  581. .word-limit {
  582. position: absolute;
  583. right: 2.7vw;
  584. bottom: 2.7vw;
  585. font-size: 3.2vw;
  586. color: #9aa5b5;
  587. }
  588. .smText{
  589. color: #999999;
  590. text-align: left;
  591. line-height: 42rpx;
  592. font-size: 24rpx;
  593. margin-top: 10rpx;
  594. width: 100%;
  595. height: 260rpx;
  596. }
  597. .BtnAll{
  598. width: 100%;
  599. margin-bottom: 20rpx;
  600. .btn-submit{
  601. width: 600rpx;
  602. height: 90rpx;
  603. margin: auto;
  604. text-align: center;
  605. line-height: 90rpx;
  606. color: #fff;
  607. background-image: linear-gradient(315deg,
  608. #f28f31 0%,
  609. #e15616 100%);
  610. border-radius: 90rpx;
  611. font-size: 30rpx;
  612. }
  613. }
  614. .row.Read{
  615. border: 0;
  616. text-align: center;
  617. color: #999999;
  618. }
  619. .thebj {
  620. position: fixed;
  621. left: 0;
  622. top: 0;
  623. bottom: 0;
  624. width: 100%;
  625. height: 100%;
  626. background-color: rgba(0, 0, 0, .5);
  627. z-index: 999999;
  628. opacity: 0;
  629. }
  630. .thebj.show{
  631. opacity: 1;
  632. }
  633. .theresult {
  634. position: absolute;
  635. top: 50%;
  636. left: 50%;
  637. transform: translate(-50%, -50%);
  638. width:580rpx;
  639. background-color: #fff;
  640. border-radius: 32rpx;
  641. }
  642. .theresult .title{
  643. line-height: 100rpx;
  644. text-align: center;
  645. display: block;
  646. color: #333333;
  647. font-size: 30rpx;
  648. font-weight: bold;
  649. border-bottom: 2rpx solid #efefef;
  650. }
  651. .theresult p{
  652. padding: 30rpx 52rpx;
  653. line-height: 48rpx;
  654. color: #666666;
  655. font-size: 30rpx;
  656. }
  657. .paybtn view{
  658. width: 290rpx;
  659. height: 90rpx;
  660. text-align: center;
  661. line-height: 90rpx;
  662. font-size: 30rpx;
  663. display: inline-block;
  664. }
  665. .paybtn .cancel{
  666. background-image: linear-gradient(270deg, #f28f31 0%, #e15616 100%);
  667. border-radius: 0rpx 0rpx 32rpx 0rpx;
  668. color: #fff;
  669. }
  670. .paybtn .thegopay{
  671. background-color: #efefef;
  672. border-radius: 0rpx 0rpx 0rpx 32rpx;
  673. color: #999999;
  674. }
  675. .icon-wenhao{
  676. color: #1890f9;
  677. font-size: 35rpx;
  678. width: 50rpx;
  679. }
  680. .form-upload-tips:hover .wen-tips {display: block;}
  681. </style>