caimei-applets-caimei/second/pages/form/form.vue

<template name="secondHandrelease">
	<view class="fleaMarketForm">
	     <view class="bannerimg"><image src="https://admin-b.caimei365.com/userfiles/1/images/photo/2020/11/banner3.png"></image></view>
	      <view class="my-maintenance" >
	            <view class="newsTitle">
					<view>欢迎您来到采美365网二手商品市场，您可以在这里发布二手
					设备/产品信息，每个商品需要收取您100元的展示费，展示期为6个月； 为了完整展示您的商品，请您认真填写以下内容，谢谢合作</view>
	             </view>
				 <form>
					 <view class="row fenlei"> 
						 <view class="label">分类</view>
						 <view class="secondradio">
							  <view v-for="(item,index) in fenlei" :key="index" v-model="secondParams.secondHandType"  @click="secondHandRidio(item)"
								  :class="currentId==item.value?'active':''">
								  <label class="iconfont" :class="currentId==item.value?'icon-yixuanze':'icon-weixuanze'"></label>{{item.name}}
							  </view>
						  </view>
						  <view class="secondradio Secondary"  v-if="isShow" >
							  <view v-for="(item ,index) in radioList" :key="index" :class="item.isChecked ? 'active':''"
									  @click="secondHandType(item)" class="icon mIcon ">
								      <label class="iconfont" :class="item.isChecked?'icon-yixuanze':'icon-weixuanze'"></label>{{item.name}}
							  </view>
						  </view>
						  <view class="linqi_text" v-show="secondParams.secondHandType==2">
							  <view class="jiaobiao"></view>
							  <p>临期产品是指临近保质期的产品，距离到期日最好在6个月以上</p>
						  </view>
					 </view>
					 <view class="row">
						<view class="label">商品品牌</view>
						<!-- <view class="select spacing"  @tap.stop="hanldOperationConfim">
							 <view class="placeholder" >{{brandname}}</view>
							 	 <text class="iconfont icon-xiayibu"></text>
						 </view> -->
						 <!-- 品牌弹窗 -->
						 <second-brandalert ref="brandalert"
						 					:barndDatas="brandData" 
						 					@showAlert="handAlertShow">
						 </second-brandalert>
						 <!-- <seller-regulations ref="regulations"
						 					:regulaDatas="regulationsData" 
						 					@showregulaAlert="handregulaAlertShow">
						 </seller-regulations> -->
					 </view>
					 <view class="row">
						 <view class="label">商品名称</view>
						 <view class="spacing">
							 <input type="text" maxlength="40"  v-model="secondParams.name" placeholder="请输入商品名称，不超过40个汉字">
						 </view>
					 </view>
					 <view class="row">
						 <view class="label">出厂日期</view>
						 <view class="spacing">
							<input type="text" v-model="secondParams.fixedYears"  maxlength="10" placeholder="请输入出厂日期 如：2020年06月">
						 </view>
					 </view>
					 <view class="row"  v-show="secondParams.secondHandType==2">
						 <view class="label">产品到期日</view>
						 <view class="spacing">
							<input type="text"  v-model="secondParams.maturityYears" maxlength="10" placeholder="请输入产品到期日，如：2020年12月">
						 </view>
					 </view>
					 <view class="row">
						 <view class="label">公司名称</view>
						 <view class="spacing">
							 <input type="text"  v-model="secondParams.companyName"  maxlength="30" placeholder="请输入公司名称，不超过30个汉字">
						 </view>
					 </view>
					 <view class="row">
						 <view class="label">交易价</view>
						 <view class="spacing">
							 <input type="text" maxlength="20" v-model="secondParams.price1"  placeholder="请输入交易价">
						 </view>
					 </view>
					 <view style="margin-top: 15rpx;">
						 <label  @click="Detailed($event)"  v-model="secondParams.detailTalkFlags" class="iconfont xiangliao"
						 :class="vShow_detailTalkFlag?'icon-jiagexiangliao':'icon-juxingweigouxuan'" >
						 <label class='pricecolor' >价格详聊</label>
						 </label>
						 <label class="showflag" v-show="vShow_detailTalkFlag">(勾选代表同意不显示交易价)</label>
					 </view>
					 <view class="row" v-show="secondParams.secondHandType==2">
						 <view class="label">市场价</view>
						 <view class="spacing">
							  <input type="text"  v-model="secondParams.normalPrice" maxlength="30" oninput="value=value.replace(/[^\d]/g, '')"   placeholder="请输入市场价">
						 </view>
					 </view>
					 <view class="row"  v-show="secondParams.secondHandType==2">
						 <view class="label">采购价/原价</view>
						 <view class="spacing">
							  <input type="text"  v-model="secondParams.originalPrice" maxlength="30" oninput="value=value.replace(/[^\d]/g, '')" placeholder="请输入采购价/原价"/>
						 </view>
					 </view>
					 <view class="row" v-show="secondParams.secondHandType==2">
						 <view class="label">数量</view>
						 <view class="spacing">
							  <input type="text"   v-model="secondParams.stock" maxlength="30"  placeholder="请输入数量">
						 </view>
					 </view>
					 <view class="row">
						 <view class="label">商品成色</view>
						 <view class="spacing">
						     <input type="text" maxlength="10"  v-model="secondParams.productQuality"  placeholder="请输入商品成色，如“9成新”">
					    </view> 
					 </view>
					 <view class="row">
						 <view class="label">联系人</view>
						 <view class="spacing">
							  <input type="text" maxlength="6" v-model="secondParams.contactName"   placeholder="请输入联系人姓名">
					    </view> 
					 </view>
					 <view class="row">
						 <view class="label">联系方式</view>
						 <view class="spacing">
							 <input type="text"  v-model="secondParams.contactMobile"    maxlength="11" placeholder="请输入联系人手机号 / 固话">
					    </view> 
					 </view>
					 <view class="row">
						 <view class="label">商品类型</view>
						 <view class="secondradio">
							 <view class="buy " v-for="(item ,index) in beauty" :key='index' value="item.value" @click="getProductType(item.value)" :class="secondType==item.value?' active':''">
								 <label class="iconfont" :class="secondType==item.value?'icon-yixuanze':'icon-weixuanze'"></label>{{item.name}}
							 </view>
						 </view>
					 </view>
					<view class="row" >
						 <view class="label">联系地址</view>
						 <view class="spacing"  @click="showMulLinkageThreePicker">
							 <text class="row-input" :class="addressData.address === '请选择所在地区' ? 'none' : ''">
							 	{{addressData.address}}
							 </text>		
							 <text class="iconfont icon-xiayibu"></text>
					    </view> 
					 </view>
					 <textarea type="text"  class="border-grey address-details" v-model="secondParams.address" maxlength="50"
						placeholder="请填写详细地址，如街道/小区/门牌等" /></textarea>
					<view class="release-main-container">
						<view class="release-from">
							<view class="label">商品图片</view>
								<view class="release-input upload image uploadGoodsImages" >
									<view class="upload-file" v-show="GoodsImagesList.length<5">
										<i class="iconfont icon-shangchuantupian"></i>
										<p class="add-text">营业执照</p>
										<view ref="goodsImages" class="input-file"  @click="uploadGoodsImagesFn"></view>
									</view>
									<view class="upload-file"  v-for="(item, index) in GoodsImagesList" :key="index">
										<img :data-original='item' :src="item" :data-image="item" alt="" class="upload-img" >
										<i class=" del iconfont icon-shanchu1" @click="removeGoodsImagesFn(index)"></i>
									</view>
								</view>
								<view class="form-upload-tips">
									<i class="iconfont icon-wenhao" ></i>
									<view class="wen-tips" >最多上传5张二手商品图片，请尽量全部上传，单张图片不能超过5M</view>
								</view>
							</view>
						</view>
						<view class="productinfo">
							 <view class="label unlogin-label" style="width: 100%;">商品详细信息</view>
							 <div class="textarea-wrapper">
								 <textarea maxlength="200" v-model="secondParams.productDetails"  cols="70" class="description" rows="6"  placeholder="请填写商品详细信息，对商品进行更详细的描述"></textarea>
								 <span class="word-limit">{{secondParams.productDetails.length}}/200</span>
							 </div>
						</view>
						<view class="productinfo">
							 <view class="label unlogin-label" style="width: 100%;">免责声明</view>
							 <textarea class="smText">
								 鉴于本网站提供的二手版块信息包括但不限于公司名称，商品的简介、性能、描述与说明，相关图片、视频等均由卖家自行提供，
								 由卖家对其提供的信息承担相应法律责任。买家应自行甄别商品信息并查验商品性状。本网站对二手版块中买卖双方的交易不提供任何形式的担保与保证，特此声明！
							 </textarea>
						</view>
						<view class="row Read">
							<span  @click="changeBox($event)" class="iconfont xiangliao"
							:class="checkbox?'icon-jiagexiangliao':'icon-juxingweigouxuan'" ><span style="margin-left: 10rpx;">已阅读</span></span>
						</view>
						<div class="BtnAll" >
							<view   @click="submitBtn" class="btn-submit">发布</view>
					</div>
				 </form>
				 <!-- 地址弹窗 -->
				 <mpvue-city-picker :themeColor="themeColor"
				 					ref="mpvueCityPicker" 
				 				    :pickerValueDefault="cityPickerValueDefault"
				 					@onCancel="onCancel" 
				 					@onConfirm="onConfirm">
				 </mpvue-city-picker>
				 
				
	          </view>
			<view class="secondBj thebj"   v-show="vShow_secondBj" :class="vShow_secondBj?'show':''">
					<view class="bjmain theresult">
						<span class="title">发布提示</span>
						<p>发布二手商品，采美需要收取您每个商品100元的展示费，展示期为6个月</br>
							支付完成后，商品会在1-2个工作日内进行审核，审核通过后，商品会立即上线</p>
						<view class="paybtn">
							<view class="thegopay gozhofubao" @click.stop="quxiao">取消发布</view>
							<view class="cancel closebtn" @click.stop="gopay">去支付</view>
						</view>
					</view>
				</view>
		<payment-record ref="payment" v-if="isRequest" :discernReceiptList="discernReceiptList" :receiptAmount="receiptAmount"></payment-record>
	</view>
</template>

<script>
	import listCell from "@/components/tui-components/list-cell/list-cell.vue"
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	import paymentRecord from '@/components/cm-module/orderDetails/paymentRecord'
	import secondBbrandAlert from '@/components/cm-module/modelAlert/secondBrandAlert.vue'
	import sellerRegulations from '@/components/cm-module/creatOrder/sellerRegulations.vue'
	import { uploadFileImage } from "@/api/utils.js"
	import { mapState,mapMutations } from 'vuex';
	export default{
		name:'secondHandrelease',
		components:{
			listCell,
			mpvueCityPicker,
			paymentRecord,
			secondBbrandAlert,
			sellerRegulations
		},
		data(){
			return{
				fenlei:[
				            {name:'二手仪器',value:'1'},
				            {name:'临期产品',value:'2'},
				            {name:'其他',value:'3'},
				        ],
				        currentId:0,
				        radioList:[
				            {name:'轻光电',value:'1',isChecked:false},
				            {name:'重光电',value:'2',isChecked:false},
				            {name:'耗材配件',value:'3',isChecked:false},
				
				        ],
				        beauty:[
				           {name:'医美',value:'1'},
				           {name:'非医美',value:'2'},
				        ],
				        BrandList:[],
				        isShow:false,
				        GoodsImagesList:[],
				        oldNum:0,
				        secondType:0,
				        vShow_GoodsImages:false,
				        fromMessage:'',//提示文字
				        secondParams:{
				            secondHandType:'',//一级分类
				            instrumentType:'',//二手仪器分类
				            name:'',
				            brandID:'',//品牌ID
				            brandName:'',//其他品牌
				            fixedYears:null,//出厂
				            companyName:'',//公司名称
				            maturityYears:'',//产品到期
				            price1:'',//交易价
				            detailTalkFlag:1,//是否启用详聊
				            normalPrice:'',//市场价
				            originalPrice:'',//采购价
				            stock:'',//数量
				            productQuality:'',//商品成色
				            contactName:'',//联系人
				            contactMobile:'',//联系方式
				            secondProductType:null,//
				            townId:'',//县区地址
				            address:'',//详细地址
				            image1:'',//图片
				            productDetails:'',//商品详细信息
				            source:1,
				         },
						 addressData:{
						 	address:'请选择所在地区',
						 	townID:'',			//区ID
						 	cityID:'',			//区ID
						 	provinceID:'',		//区ID
						 	addressDetail: '',	//地址
						 },
				        brandname:'请选择品牌名称',
				        checkbox:false,
				        shoplogoTwo:false,
				        provinceIndex:'',
				        provinceArray:[],
				        cityArray: [],//市
				        townArray: [],//区
				        playid:'',
				        checkVal:[],
				        vShow_secondBj:false,
				        resultBj:false,
				        vShow_detailTalkFlag:false,
						showtips:false
			}
		},
		methods:{
			showMulLinkageThreePicker() {//三级地址联动
				this.isShowInput = true
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e) {//获取选择的地址信息
				console.log('地址',e);
				this.addressData.address = e.name;
				this.addressData.townID = e.townCode;
				this.addressData.cityID = e.cityCode;
				this.addressData.provinceID = e.provinceCode;
				this.secondParams.townId = this.addressData.townID;
				this.secondParams.address = this.addressData.address;
			},
		 onConfirmbrand(e){
			 this.brandname = e.name;
		 },
			// hanldOperationConfim(){
			// 	console.log(111)
			// 			this.specClass = 'show';
			//         },
			        secondHandRidio: function(item) {
			            this.currentId = item.value;
			            this.secondParams.secondHandType = item.value;
			            if (item.value==1){
			            this.isShow = true;
			            }else {
			             this.isShow = false;
			            }
			        },
			        secondHandType:function(item){ //二手仪器
			        item.isChecked = ! item.isChecked;
			          if(item.isChecked){
			           this.checkVal.push(item.value);
			           this.secondParams.instrumentType =  this.checkVal.toString();
			          } else {
			            this.checkVal.splice(this.checkVal.indexOf(item.value), 1);
			            this.secondParams.instrumentType = this.checkVal.toString();
			          }
			        },
			        ChangeBrand:function(item){ //品牌列表
			            this.brandname = item.name;
			            this.secondParams.brandID = item.id;
			            if(this.secondParams.brandID==161){
			              this.shoplogoTwo = true;
			            }else {
			              this.shoplogoTwo = false;
			            }
			        },
			        Detailed:function(){
					this.vShow_detailTalkFlag = !this.vShow_detailTalkFlag;
			         if(this.vShow_detailTalkFlag){
			             this.secondParams.detailTalkFlag = 2 ;//启用价格详聊
			          }else {
			            this.secondParams.detailTalkFlag = 1 ;//不启用价格详聊
			          }
			        },
			        dragstart: function(value) {  // 记录初始信息
			            this.oldNum = value;
			        },
			         uploadGoodsImagesFn: function(event){//上传商品图片
							uploadFileImage().then(res =>{
								 this.GoodsImagesList.push(JSON.parse(res.data).data);
								 this.secondParams.image1 =this.GoodsImagesList.toString()+',';
							})
			        },
			         removeGoodsImagesFn: function(index){//删除商品图片
			            this.GoodsImagesList.splice(index,1);
			            this.secondParams.image1 =this.GoodsImagesList.toString()+',';
			         },
			        getProductType:function(item){
			         this.secondType=item;
			          this.secondParams.secondProductType = item ;
			        },
			        submitBtn:function () {
			          if(this.secondParams.secondHandType == ''){
							this.$util.msg('请选择分类',2000);
			                return;
			            }
			            if(this.secondParams.secondHandType == 1 ){
			               if(this.secondParams.instrumentType ==''){
							this.$util.msg('请完善仪器分类',2000);
			                return;
			                }
			            }
			    //      if(this.secondParams.brandID == ''){
							// this.$util.msg('请选择商品品牌',2000);
			    //             return;
			    //         }
			         if(this.secondParams.name == ''){
						  this.$util.msg('请输入商品名称',2000);
			                return
			         }
			         if(this.secondParams.secondHandType ==2) {
			         if (this.secondParams.normalPrice == '') {
							 this.$util.msg('请输入市场价',2000);
			                 return
			             }
			             if (this.secondParams.maturityYears == '') {
							 this.$util.msg('请输入产品到期日',2000);
			                 return
			             }
			         }
			         if(this.secondParams.price1 == ''){
							  this.$util.msg('请输入交易价',2000);
			                    return
			             }
			         if(this.secondParams.secondHandType ==2){
			             if(this.secondParams.originalPrice == ''){
						  this.$util.msg('请输入采购价/原价',2000);
			                return
			           }
			         if(this.secondParams.stock == ''){
						  this.$util.msg('请输入数量',2000);
			                return
			            }
			         }
			         if(this.secondParams.productQuality == ''){
						  this.$util.msg('请输入商品成色',2000);
			                return
			         }
			          if(this.secondParams.contactName == ''){
						  this.$util.msg('请输入联系人姓名',2000);
			                return
			         }
			          if(this.secondParams.contactMobile == ''){
						  console.log(this.secondParams.contactMobile)
						  this.$util.msg('请输入联系方式',2000);
			                return
			         }
			         if(this.secondParams.contactMobile.length !=11){
						  this.$util.msg('联系方式格式不正确',2000);
			                 return
			          }
			          if(this.secondParams.townId == ''|| this.secondParams.townId == undefined){
						  this.$util.msg('请完善联系地址',2000);
			                return
			         }
			           if(this.secondParams.address == ''){
						  this.$util.msg('请填写详细地址',2000);
			                return
			         }
			            if(this.GoodsImagesList ==''){
						    this.$util.msg('请上传图片',2000);
			                return;
			            }
			         if(this.checkbox==false){
						   this.$util.msg('请勾选已阅读',2000);
			                return
			         }
			         console.log(this.secondParams)
					 this.SecondService.SecondHandProduct(this.secondParams).then(res=>{ //提交发布
			             if (res.code==0){
			               this.vShow_secondBj = true;
			               this.playid= res.data;
			             }else{
			                  this.$util.msg(res.msg,2000)
			                 this.secondBj = false;
			                 return
			             }
			         })
			        },
			        quxiao:function(){
			         this.vShow_secondBj = false;
			        },
			        gopay:function(){
						this.$api.navigateTo(`/pages/user/order/order-payment?type=confirm&productID=${this.playid}`)
			            this.vShow_secondBj = false;
			        },
			        changeBox:function () {
						this.checkbox = !this.checkbox;
			        },
					
		},
		 created(){
		    },
	}
</script>

<style lang="scss">
	*{
	     border: 0;
	     padding: 0;
	     margin: 0;
	   }
		view{font-size: 28rpx;}
	    .my-maintenance{padding: 20rpx;} 
		.bannerimg {height: 66rpx;width: 100%;}
	    .bannerimg  image{width: 100%;height: 100% ;}
		.newsTitle {line-height: 48rpx;text-align: left;color: #e15616;padding:20rpx;background-color: rgba(225, 86, 22, .1);font-size: 28rpx;}
		.secondradio view{display: inline-block;color: #333333;padding: 0 20rpx;}
		.secondradio{display: inline-block;margin-left: 40rpx;}	
		.Secondary{width: 100%;text-align: center;margin: 0;}
		.secondradio view.active {color: #e15616;}
		.label .red{color: #f94b4b;}
		input[type="text"]::placeholder, textarea::placeholder {color: #b2b2b2;}
		input[type="text"]{line-height: 90rpx;overflow: unset;}
		.row label.iconfont{margin-right: 10rpx;}
		.icon-weixuanze{color: #b2b2b2;}
		.linqi_text { width: 100%; height: 68rpx;background-color: #1890f9;box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(24, 144, 249, 0.17);text-align: center;
		    line-height: 68rpx;color: #ffffff;margin: auto;font-size:24rpx;position: relative;}
		.jiaobiao {width: 0;height: 0;border-left: 20rpx solid transparent;border-right: 20rpx solid transparent;top: -30%;
		    right: 48%;border-bottom: 20rpx solid #1890f9;position: absolute;}
		.label{color: #666666;display: inline-block;idth: 120rpx;}
		.row{border-bottom: 2rpx solid #e1e1e1;line-height: 90rpx;height: 90rpx;}
		.row.fenlei{height: auto;}
		.select {position: relative;color: #9aa5b5;text-align: left;user-select: none;}
		.row .spacing{display: inline-block;margin-left: 60rpx;width: 68%;vertical-align:middle;position: relative}
		.select .placeholder {position: relative;cursor: pointer;width: 100%;display: inline-block;}
		.icon-xiayibu{right: 0rpx;;color: #b2b2b2;position: absolute}
		.xiangliao{font-size: 26rpx;margin-right: 10rpx;color: #b2b2b2}
		.icon-jiagexiangliao{color: #e15616 !important;}
		.pricecolor{margin-left: 10rpx;}
		.showflag{color: #b2b2b2;}
		.border-grey{width: 100%;resize: none;padding: 20rpx 0;height: 160rpx;border-bottom: 2rpx solid #e1e1e1;}
		.release-main-container {overflow: hidden;margin: 20rpx 0}
		.uploadGoodsImages{display: flex;overflow-x: auto;overflow-y: hidden;}
		.upload-file {
		    position: relative;
		    float: left;
		    margin: 20rpx 20rpx 20rpx 0px;
		    cursor: pointer;
		    width: 194rpx;
		    height: 194rpx;
		    border-radius: 6rpx;
		    border: solid 2rpx #e1e1e1;
			flex-shrink: 0;
			position: relative;
			display: inline-block;
		}
		.input-file {
		    width: 194rpx;
		    height: 194rpx;
		    opacity: 0;
		    cursor: pointer;
		    position: absolute;
		}
		.add-text {
		    font-size: 26rpx;
		    color: #333330;
		    opacity: 0.5;
		    position: absolute;
		    top: 55%;
		    right:24%;
		}
		.upload-img {
		    width: 100%;
		    height: 100%;
		    display: block;
		    border-radius: .53vw;
		}
		.icon-shangchuantupian{
			width: 46rpx;
			height: 46rpx;
			color: #b2b2b2;
			font-size: 18px;
			position: absolute;
			top: 30%;
			left: 40%;
		}
		.icon-shanchu1{
			position: absolute;
			top: -25rpx;
			right:-10rpx;
			color: #f94b4b;
			font-size: 36rpx;
		}
		.wen-tips {
		    width: 664rpx;
		    height: 68rpx;
		    line-height: 68rpx;
		    text-align: center;
		    color: #FFF;
		    font-size: 20rpx;
		    background-color: #1890f9;
		    box-shadow: 0 0.8vw 1.6vw 0 rgba(24, 144, 249, 0.17);
		    border-radius: 2rpx;
			display: none;
		}
		 .form-upload-tips:hover .wen-tips {display: block;}
		.textarea-wrapper {
		    letter-spacing: 2rpx;
		    line-height: 48rpx;
		    color: #b2b2b2;
		    position: relative;
		    font-size: 28rpx;
		    border: 2rpx solid #b2b2b2;
		    height: 300rpx;
			padding: 16rpx;
			border-radius: 6rpx;
			margin: 20rpx 0;
		}
		.textarea-wrapper textarea{
			width: 100%;
		}
		.word-limit {
		    position: absolute;
		    right: 2.7vw;
		    bottom: 2.7vw;
		    font-size: 3.2vw;
		    color: #9aa5b5;
		}
		.smText{
			color: #999999;
			text-align: left;
			line-height: 42rpx;
			font-size: 24rpx;
			margin-top: 10rpx;
			width: 100%;
			height: 260rpx;
		}
		.BtnAll{
			width: 100%;
			margin-bottom: 20rpx;
			.btn-submit{
				width: 600rpx;
				height: 90rpx;
				margin: auto;
				text-align: center;
				line-height: 90rpx;
				color: #fff;
				background-image: linear-gradient(315deg, 
						#f28f31 0%, 
						#e15616 100%);
				border-radius: 90rpx;
				font-size: 30rpx;
			}
		}
		.row.Read{
			border: 0;
			text-align: center;
			color: #999999;
		}
		.thebj {
		    position: fixed;
		    left: 0;
		    top: 0;
		    bottom: 0;
		    width: 100%;
		    height: 100%;
		    background-color: rgba(0, 0, 0, .5);
		    z-index: 999999;
		    opacity: 0;
		}
		.thebj.show{
			 opacity: 1;
		}
		.theresult {
		    position: absolute;
		    top: 50%;
		    left: 50%;
		    transform: translate(-50%, -50%);
		    width:580rpx;
		    background-color: #fff;
		    border-radius: 32rpx;
		}
		.theresult .title{
			line-height: 100rpx;
			text-align: center;
			display: block;
			color: #333333;
			font-size: 30rpx;
			font-weight: bold;
			border-bottom: 2rpx solid #efefef;
		}
		.theresult p{
			padding: 30rpx 52rpx;
			line-height: 48rpx;
			color: #666666;
			font-size: 30rpx;
		}
		.paybtn view{
			width: 290rpx;
			height: 90rpx;
			text-align: center;
			line-height: 90rpx;
			font-size: 30rpx;
			display: inline-block;
		}
		.paybtn .cancel{
			background-image: linear-gradient(270deg, #f28f31 0%, #e15616 100%);
			border-radius: 0rpx 0rpx 32rpx 0rpx;
			color: #fff;
			
		}
		.paybtn .thegopay{
			background-color: #efefef;
			border-radius: 0rpx 0rpx 0rpx 32rpx;
			color: #999999;
		}
		.icon-wenhao{
			color: #1890f9;
			font-size: 35rpx;
			width: 50rpx;
		}
		.form-upload-tips:hover .wen-tips {display: block;}
			
</style>