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

<template name="secondHandrelease">
	<view class="fleaMarketForm">
	     <view class="bannerimg"><image src="https://static.caimei365.com/app/img/bg/secondbg.jpg"></image></view>
	      <view class="my-maintenance" >
	            <view class="newsTitle">
					<view class="nestext">欢迎您来到采美365网二手商品市场，您可以在这里发布二手设备/产品信息，每个商品需要收取您100元的展示费，展示期为6个月； 为了完整展示您的商品，请您认真填写以下内容，谢谢合作</view>
	             </view>
				 <form>
					 <view class="row fenlei"> 
						 <view class="label">分类</view>
						 <view class="secondradio">
							  <radio-group class="row-group" @change="secondHandRidio" >
							  	<label class="row-input" v-for="(item, index) in fenlei" :key="index">
									<radio class="row-radio" :value="item.value" color="#E15616"/>
							  		<view class="row-text">{{item.name}}</view>
							  	</label>
							  </radio-group>
						  </view>
						  <view class="secondradio Secondary"  v-if="isShow" >
							  <checkbox-group class="row-group" @change="secondHandType">
									<label class="row-input" v-for="(item, index) in radioList" :key="item.value" >
										<checkbox class="row-check" :value="item.value" ></checkbox>
										<view class="row-text">{{item.name}}</view>
									</label>
							  </checkbox-group>
						  </view>
						  <view class="linqi_text" v-show="secondParams.secondHandType==2">
							  <view class="jiaobiao"></view>
							  <p class="p">临期产品是指临近保质期的产品，距离到期日最好在6个月以上</p>
						  </view>
					 </view>
					 <view class="row">
						<view class="label">商品品牌</view>
						<view class="select spacing"  @click="hanldOperationConfim">
							 <view class="placeholder" :style="brandname=='请选择品牌名称'?'':'color:#333333'">{{brandname}}</view>
						</view>
						<text class="iconfont icon-xiayibu"></text>
						<!-- 品牌弹窗 -->
						<tui-bottom-popup :radius="true" :show="popupShow" @close="hidePopup()">
							<view class="tui-popup-box clearfix">
								<text class="iconfont  icon-iconfontguanbi"  @click="hidePopup()"></text>
								<view class="content">
									<view class="freight-radio">
										 <scroll-view scroll-y style="max-height: 605rpx;">
											<radio-group class="row-group" @change="radioChange" >
												<label class="row-input" v-for="(item, index) in BrandList" :key="item.id">
													<view class="row-text">{{item.name}}</view>
													<radio class="row-radio" :value="item.id"  color="#E15616"/>
												</label>
											</radio-group>
										</scroll-view>
									</view>
								</view>
							</view>	
						</tui-bottom-popup>	
					 </view>
					 <view class="row" v-if="secondParams.brandID==161">
						 <view class="label">其它品牌</view>
						 <view class="spacing">
							 <input type="text" maxlength="40" v-model="secondParams.brandName" placeholder="请输入商品品牌" placeholder-class="placeholder">
						 </view>
					 </view>
					 <view class="row">
						 <view class="label">商品名称</view>
						 <view class="spacing">
							 <input type="text" maxlength="40"  v-model="secondParams.name" placeholder="请输入商品名称，不超过40个汉字" placeholder-class="placeholder">
						 </view>
					 </view>
					 <view class="row">
						 <view class="label">出厂日期</view>
						 <view class="spacing">
							<input type="text" v-model="secondParams.fixedYears"  maxlength="10" placeholder="请输入出厂日期 如：2020年06月" placeholder-class="placeholder">
						 </view>
					 </view>
					 <!-- <view class="row"  v-show="secondParams.secondHandType==2">
						 <view class="label second">产品到期日</view>
						 <view class="spacing second">
							<input type="text"  v-model="secondParams.maturityYears" maxlength="10" placeholder="请输入产品到期日，如：2020年12月" placeholder-class="placeholder">
						 </view>
					 </view> -->
					 <view class="row">
						 <view class="label">公司名称</view>
						 <view class="spacing">
							 <input type="text"  v-model="secondParams.companyName"  maxlength="30" placeholder="请输入公司名称，不超过30个汉字" placeholder-class="placeholder">
						 </view>
					 </view>
					 <view class="row">
						 <view class="label">交易价</view>
						 <view class="spacing">
							 <input type="text" maxlength="20" v-model="secondParams.price1"  placeholder="请输入交易价" placeholder-class="placeholder">
						 </view>
					 </view>
					 <view style="margin-top: 15rpx;">
						 <label  v-model="secondParams.detailTalkFlags" class="iconfont xiangliao"
						 :class="vShow_detailTalkFlag ? 'icon-jiagexiangliao':'icon-juxingweigouxuan'" @click="Detailed($event)">
							<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" placeholder="请输入市场价" placeholder-class="placeholder">
						 </view>
					 </view> -->
					<!-- <view class="row"  v-show="secondParams.secondHandType==2">
						 <view class="label second">采购价/原价</view>
						 <view class="spacing second">
							  <input type="text"  v-model="secondParams.originalPrice" maxlength="30" placeholder="请输入采购价/原价" placeholder-class="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="请输入数量" placeholder-class="placeholder">
						 </view>
					 </view> -->
					 <view class="row">
						 <view class="label">商品成色</view>
						 <view class="spacing">
						     <input type="text" maxlength="10"  v-model="secondParams.productQuality"  placeholder="请输入商品成色，如“9成新”" placeholder-class="placeholder">
					    </view> 
					 </view>
					 <view class="row">
						 <view class="label">联系人</view>
						 <view class="spacing">
							  <input type="text" maxlength="15" v-model="secondParams.contactName" placeholder="请输入联系人姓名" placeholder-class="placeholder">
					    </view> 
					 </view>
					 <view class="row">
						 <view class="label">联系方式</view>
						 <view class="spacing">
							 <input type="text"  v-model="secondParams.contactMobile" maxlength="11" placeholder="请输入联系人手机号" placeholder-class="placeholder">
					    </view> 
					 </view>
					 <view class="row">
						 <view class="label">采美对接人</view>
						 <view class="spacing">
							 <input type="text"  v-model="secondParams.dockingPeopleName" maxlength="15" placeholder="请输入采美对接人姓名" placeholder-class="placeholder">
					    </view> 
					 </view>
					 <view class="row">
						 <view class="label">对接人联系方式</view>
						 <view class="spacing">
							 <input type="text"  v-model="secondParams.dockingPeopleMobile" maxlength="11" placeholder="请输入采美对接人手机号" placeholder-class="placeholder">
					    </view> 
					 </view>
					 <view class="row">
						 <view class="label">商品类型</view>
						 <view class="secondradio">
							 <radio-group class="row-group" @change="getProductType" >
							 	<label class="row-input" v-for="(item, index) in beauty" :key="index">
							 		<radio class="row-radio" :value="item.value" color="#E15616"/>
							 		<view class="row-text">{{item.name}}</view>
							 	</label>
							 </radio-group>
						 </view>
					 </view>
					<view class="row" >
						 <view class="label">联系地址</view>
						 <view class="spacing"  @click="showMulLinkageThreePicker">
							 <text class="row-input" :class="addressData.address === '请选择所在地区' ? 'none,placeholder' : ''"  >
							 	{{addressData.address}}
							 </text>		
					    </view> 
						<text class="iconfont icon-xiayibu"></text>
					 </view>
					 <textarea type="text"  class="border-grey address-details" v-model="secondParams.address" maxlength="50"
						placeholder="请填写详细地址，如街道/小区/门牌等"  placeholder-class="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-if="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">
										<image :data-original='item' :src="item" :data-image="item" alt="" class="upload-img" ></image>
										<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 	class="textarea"
								 			type="text" 
								 			v-model="secondParams.productDetails" 
								 			placeholder="请填写商品详细信息，对商品进行更详细的描述" 
								 			placeholder-class="placeholder"
								 			maxlength="200"
								 			@input="onTextareaInputInfo"
								 />
								 <span class="word-limit">{{secondParams.productDetails.length}}/200</span>
							 </div>
						</view>
						<view class="productinfo">
							 <view class="label unlogin-label" style="width: 100%;">免责声明</view>
							 <text class="smText" >鉴于本网站提供的二手版块信息包括但不限于公司名称，商品的简介、性能、描述与说明，相关图片、视频等均由卖家自行提供，由卖家对其提供的信息承担相应法律责任。买家应自行甄别商品信息并查验商品性状。本网站对二手版块中买卖双方的交易不提供任何形式的担保与保证，特此声明！</text>
						</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" :style="{ paddingBottom :isIphoneX ? '68rpx' : '0rpx' }">
							<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 mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	import paymentRecord from '@/components/cm-module/orderDetails/paymentRecord'
	import { uploadFileImage } from "@/api/utils.js"
	import authorize from '@/common/config/authorize.js'
	import $reg from '@/common/config/common.js'
	import { mapState,mapMutations } from 'vuex';
	export default{
		name:'secondHandrelease',
		components:{
			mpvueCityPicker,
			paymentRecord,
		},
		data(){
			return{
				userIdentity:0,
				popupShow:false,
				fenlei:[
				   {name:'二手仪器',value:'1'},
				   // {name:'临期产品',value:'2'},
				   {name:'其他',value:'3'},
				],
				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:[],
				vShow_GoodsImages:false,
				secondParams:{
					secondHandType:'',//一级分类
					instrumentType:'',//二手仪器分类
					name:'',
					brandID:'',//品牌ID
					brandName:'',//其他品牌
					fixedYears:null,//出厂
					companyName:'',//公司名称
					maturityYears:'',//产品到期
					price1:'',//交易价
					detailTalkFlag:1,//是否启用详聊
					normalPrice:'',//市场价
					originalPrice:'',//采购价
					stock:'',//数量
					productQuality:'',//商品成色
					contactName:'',//联系人
					contactMobile:'',//联系方式
					dockingPeopleName:'',//采美对接人姓名
					dockingPeopleMobile:'',//采美对接人手机号
					secondProductType:'',//
					townId:'',//县区地址
					address:'',//详细地址
					image1:'',//图片
					productDetails:'',//商品详细信息
					source:2
				 },
				 addressData:{
					address:'请选择所在地区',
					townID:'',			//区ID
					cityID:'',			//区ID
					provinceID:'',		//区ID
					addressDetail: '',	//地址
				 },
				brandname:'请选择品牌名称',
				checkbox:false,
				shoplogoTwo:false,
				vShow_secondBj:false,
				resultBj:false,
				vShow_detailTalkFlag:false,
				playid:'',
			}
		},
		methods:{
			onTextareaInputInfo(e){
			   this.secondParams.productDetails = e.detail.value;
			},
			radioChange(e){//品牌
				this.secondParams.brandID = e.target.value;
				this.BrandList.forEach((item,index)=>{
					if(item.id==this.secondParams.brandID){
						this.brandname = item.name;
						this.popupShow = false;
					}
				})
			},
			showMulLinkageThreePicker() {//三级地址联动
				this.isShowInput = true
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(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;
			},
			hanldOperationConfim(){
				this.popupShow = true;
			},
			hidePopup(){
				this.popupShow = false;
			},
			secondHandRidio(e) {
				this.secondParams.secondHandType = e.target.value;
				if (e.target.value == 1){
					this.isShow = true;
				}else {
					this.isShow = false;
				}
			},
			secondHandType(e){ //二手仪器
				this.secondParams.instrumentType = e.target.value.toString();
			},
			Detailed(){
			this.vShow_detailTalkFlag = !this.vShow_detailTalkFlag;
			 if(this.vShow_detailTalkFlag){
				 this.secondParams.detailTalkFlag = 2 ;//启用价格详聊
			  }else {
				this.secondParams.detailTalkFlag = 1 ;//不启用价格详聊
			  }
			},
			 uploadGoodsImagesFn(event){//上传商品图片
				uploadFileImage().then(res =>{
					 this.GoodsImagesList.push(JSON.parse(res.data).data);
					 this.secondParams.image1 =this.GoodsImagesList.toString()+',';
				})
			},
			 removeGoodsImagesFn(index){//删除商品图片
				this.GoodsImagesList.splice(index,1);
				this.secondParams.image1 =this.GoodsImagesList.toString()+',';
			 },
			getProductType(e){
			  this.secondParams.secondProductType = e.target.value ;
			},
			submitBtn () {
				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.maturityYears=='') {
				// 		 this.$util.msg('请输入产品到期日',2000);
				// 		 return
				// 	} 
				// }
				if(!this.$api.isNumber(this.secondParams.price1)){
					  this.$util.msg('请输入交易价',2000);
						return
				}
				// if(this.secondParams.secondHandType ==2) {
				// 	if (!this.$api.isNumber(this.secondParams.normalPrice)) {
				// 		 this.$util.msg('请输入市场价',2000);
				// 		 return
				// 	}
				// 	if(!this.$api.isNumber(this.secondParams.originalPrice)){
				// 		  this.$util.msg('请输入采购价/原价',2000);
				// 			return
				// 	}
				// 	if(!this.$api.isNumber(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(!$reg.isMobile(this.secondParams.contactMobile)){
					this.$util.msg('请填写正确的手机号',2000);
					return
				}
				if(this.userIdentity === 1){
					if(this.secondParams.dockingPeopleName == ''){
						this.$util.msg('请输入采美对接人姓名',2000);
						return
					}
					if(this.secondParams.dockingPeopleMobile == ''){
						this.$util.msg('请输入采美对接人手机号',2000);
						return
					}
				}
				if(this.secondParams.dockingPeopleMobile !=''){
					if(!$reg.isMobile(this.secondParams.dockingPeopleMobile)){
						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=>{ //提交发布
					this.vShow_secondBj = true;
					this.playid= res.data;
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
					this.secondBj = false;
					return
				})
			},
			quxiao:function(){
			 this.vShow_secondBj = false;
			},
			gopay(){
				this.MiniWxPayFor()
				this.vShow_secondBj = false;
			},
			MiniWxPayFor(){
				authorize.getCode('weixin').then(wechatcode =>{
					let params ={
							code:wechatcode,
							productId:this.playid
						}
					this.PayService.SecondHandPay(params).then(response =>{
						let PayInfo = JSON.parse(response.data.data.payInfo);
						this.WxRequestPayment(PayInfo)
					}).catch(error =>{
						this.$util.msg(error.msg,2000)
					})
				})
			},
			WxRequestPayment(data){
				let self = this
				wx.requestPayment({
					'timeStamp': data.timeStamp,
					'nonceStr': data.nonceStr,
					'package': data.package,
					'signType': data.signType,
					'paySign': data.paySign,
					'success':function(res){
						wx.reLaunch({url: 'second/pages/product/product-list'});
					},
					'fail':function(res){
						self.$util.msg('用户取消支付~')
					},
					'complete':function(res){
			
					}
				})
			},
			changeBox:function () {
				this.checkbox = !this.checkbox;
			},
		},
		onShow() {
			this.SecondService.brandList().then(res =>{//品牌列表
				if(res.code == 0){
				   this.BrandList = res.data;
				}
			})
			this.$api.getComStorage('userInfo').then((resolve) =>{
				this.userIdentity = resolve.userIdentity
				console.log(this.userIdentity)
			}).catch(error =>{
				console.log(error)
			})
		}
	}
</script>

<style lang="scss">
	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);
	}
	.nestext{
		font-size: 24rpx;
	}
	.secondradio view{
		display: inline-block;
		color: #333333;
		margin-right: 21rpx;
	}
	.secondradio{
		display: inline-block;
		margin-left: 40rpx;
	}	
	.Secondary{
		margin-left: 96rpx;
	}
	.secondradio view.active {
		color: #e15616;
	}
	.placeholder{
		color: #b2b2b2;
	}
	.linqi_text { 
		width: 607rpx; 
		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: -25%;
		right: 40%;
		border-bottom: 20rpx solid #1890f9;
		position: absolute;
		}
	.label{
		color: #666666;
		display: inline-block;
	}
	.label.second{
		width: 155rpx;
	}
	.row .spacing.second{
		width: 70%;
	}
	.row{
		border-bottom: 2rpx solid #e1e1e1;
		line-height: 90rpx;
		height: 90rpx;
		position: relative;
	}
	.row.fenlei{
		height: auto;
		margin: 10rpx 0;
		border: 0;
	}
	.select {
		position: relative;
		color: #b2b2b2;
		text-align: left;
		user-select: none;
	}
	.row .spacing{
		display: inline-block;
		margin-left: 50rpx;
		width: 430rpx;
		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;
	}
	.secondradio{
		.row-radio{
			transform: scale(.8);
		}
		.row-input{margin-right: 10rpx;}
	}
	.linqi_text .p{
		font-size: $font-size-20;
	}
	.upload-file {
		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: #333333;
		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;}
	.tui-popup-box {
		z-index: 22;
		width: 702rpx;
		padding: 24rpx 24rpx 36rpx 24rpx;
		height: 670rpx;
		position: relative;
		.icon-iconfontguanbi{
			font-size: 40rpx;
			color: #b2b2b2;
			width: 60rpx;
			float: right;
			display: block;
		}
		.content{
			.freight-radio{
				height: 66rpx;
				line-height: 66rpx;
				padding: 0 35rpx;
				.row-group{
					width: 100%;
					// max-height: 605rpx;
					// overflow: auto;
			
				}
				.row-input{
					height: 66rpx;
					line-height: 66rpx;
					width: 100%;
					display: block;
			
				}
				.row-radio{
					float: right;
					transform: scale(0.9);
					color: #b2b2b2;
				}
				.row-text{
					font-size: $font-size-28;
					color: #666666;
					float: left;
				}
			}
		}
		}
		checkbox .wx-checkbox-input{
		  border-radius: 50%;
		}
		.row-check{
			 transform: scale(0.8);
		}
		checkbox .wx-checkbox-input.wx-checkbox-input-checked{
		  background: #E15616;
		  border: 2rpx solid #e15616;
		}
		checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
		  border-radius: 50%;
		  border: 2rpx solid #e15616;
		  width: 34rpx;
		  height: 34rpx;
		  line-height: 34rpx;
		  text-align: center;
		  font-size:34rpx; 
		  color:#fff;
		  background: transparent;
		  transform:translate(-50%, -50%) scale(.8);
		  -webkit-transform:translate(-50%, -50%) scale(.8);
		}
</style>