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

<template name="secondHandrelease">
	<view class="fleaMarketForm">
		<view class="bannerimg"><image src="https://static.caimei365.com/app/img/bg/secondbg.png"></image></view>
		<view class="my-maintenance" :style="{ paddingBottom: isIphoneX ? '270rpx' : '250rpx' }">
			<view class="newsTitle">
				<view class="nestext">
					欢迎您来到采美365网二手商品市场，您可以在这里发布二手仪器和产品，采美官方
					人员将会对商品进行审核和专业的估价，估价完成后才能上架展示并销售，展示期为
					3个月。为了完整展示您的商品，请您认真填写以下商品基本信息，谢谢合作。
				</view>
			</view>
			<!-- <view class="row">
				<view class="label"><text class="red">*</text>发布身份：</view>
				<view class="select spacing">
					<picker
						@change="bindPickerChangePublisher($event)"
						:value="index"
						:range="publisherActions"
						range-key="name"
					>
						<input
							class="input"
							type="text"
							disabled="true"
							v-model="publisherText"
							placeholder="请选择发布身份"
							placeholder-class="placeholder"
						/>
					</picker>
				</view>
				<text class="iconfont icon-xiayibu"></text>
			</view> -->
			<view class="row">
				 <view class="label"><text class="red">*</text>联系人：</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"><text class="red">*</text>联系方式：</view>
				<view class="spacing">
					<input  type="text" 
							v-model="secondParams.contactMobile" 
							maxlength="11" 
							placeholder="请输入联系人手机号" 
							@blur="contactMobileOnblur"
							placeholder-class="placeholder">
				</view> 
			</view>
			<view class="row">
				<view class="label"><text class="red">*</text>验证码：</view>
				<view class="spacing">
					<input  type="text" 
							v-model="secondParams.checkCode" 
							maxlength="6" 
							placeholder="请输入验证码" 
							placeholder-class="placeholder">
				</view> 
				<view class="row-btn" :class="[isMobileDisabled  ? 'disabled' : '']">
					<button class="row-input"
							type="button" 
							@click.stop="getMobileCodeFn" 
							:disabled="isMobileDisabled">
							{{ mobileCodeText }}
					</button>
				</view>		
			</view>
			<view class="row">
				<view class="label"><text class="red">*</text>二手分类：</view>
				<view class="select spacing">
					<picker
						@change="bindPickerChange($event)"
						:value="index"
						:range="categoryActions"
						range-key="name"
					>
						<input
							class="input"
							type="text"
							disabled="true"
							v-model="organizationTypeText"
							placeholder="请选择分类"
							placeholder-class="placeholder"
						/>
					</picker>
				</view>
				<text class="iconfont icon-xiayibu"></text>
			</view>
			<view class="row">
				<view class="label"><text class="red">*</text>商品品牌：</view>
				<view class="select spacing">
					<picker
						@change="bindPickerChangeBrand($event)"
						:value="index"
						:range="brandActions"
						range-key="name"
					>
						<input
							class="input"
							type="text"
							disabled="true"
							v-model="brandName"
							placeholder="请选择品牌"
							placeholder-class="placeholder"
						/>
					</picker>
				</view>
				<text class="iconfont icon-xiayibu"></text>
			 </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"><text class="red">*</text>商品名称：</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-if="secondParams.publishIdentity === 2">
				 <view class="label"><text class="red">*</text>公司名称：</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"><text class="red">*</text>商品成色：</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="select spacing">
				 	<picker
				 		@change="bindPickerChangeProduct($event)"
				 		:value="index"
				 		:range="productActions"
				 		range-key="name"
				 	>
				 		<input
				 			class="input"
				 			type="text"
				 			disabled="true"
				 			v-model="organizationTypeText1"
				 			placeholder="请选择发布身份"
				 			placeholder-class="placeholder"
				 		/>
				 	</picker>
				 </view>
				 <text class="iconfont icon-xiayibu"></text>
			 </view>
			<view class="row" >
				 <view class="label"><text class="red">*</text>联系地址：</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"><text class="red">*</text>商品图片</view>
					<view class="release-input upload image uploadGoodsImages" >
						<view class="upload-file" v-if="GoodsImagesList.length<5">
							<text class="iconfont icon-shangchuantupian"></text>
							<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>
							<text class=" del iconfont icon-iconfontguanbi" @click="removeGoodsImagesFn(index)"></text>
						</view>
					</view>
					<view class="form-upload-tips">
						<text class="iconfont icon-wenhao" ></text>
						<view class="wen-tips" >最多上传5张二手商品图片，请尽量全部上传，单张图片不能超过5M</view>
					</view>
				</view>
				<view class="productinfo">
					 <view class="label unlogin-label" style="width: 100%;">商品详细信息</view>
					 <view 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>
					 </view>
				</view>
			</view>	
		</view>
		<view class="secondBj thebj"   v-show="modal1" :class="modal1 ? 'show':''">
			<view class="bjmain theresult">
				<text class="title">发布提示</text>
				<text class="content"> {{ tipsContentText }} </text>
				<view class="paybtn">
					<view class="btn cancel" @click.stop="cancelButtonFn">{{ cancelButtonText  }}</view>
					<view class="btn confirm" @click.stop="confirmButtonFn">{{ confirmButtonText }}</view>
				</view>
			</view>
		</view>
		<!-- 地址弹窗 -->
		<mpvue-city-picker :themeColor="themeColor"
							ref="mpvueCityPicker" 
							:pickerValueDefault="cityPickerValueDefault"
							@onCancel="onCancel" 
							@onConfirm="onConfirm">
		</mpvue-city-picker>
		<!-- 发布按钮 -->
		<tui-bottom-popup :radius="false" :mask="false" :show="popupShow">
			<view class="tui-popup-box clearfix">
				<view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
					<view class="tui-flex-1">
						<view class="tui-button-text" @click="handleChangAgree">
							<text  class="iconfont"
								   :class="checkbox ? 'icon-yixuanze':'icon-weixuanze'" >
							</text>
							已阅读并同意采美
							<text style="color:#1890f9;" @click.stop="this.$api.navigateTo('/pages/service/service?id=1039&title=二手出让协议')">《二手出让协议》</text>
						</view>
					</view>
					<view class="tui-flex-1">
						<view class="tui-button" @click="handleSubmitBtn">发布</view>
					</view>
				</view>
			</view>
		</tui-bottom-popup>
		<!-- 弹窗提示 -->
		<tui-modal :show="modal" :padding="'40rpx 30rpx'" @cancel="hideMobel" :custom="true" fadeIn >
			<view class="tui-modal-custom">
				<view class="tui-prompt-text">
					{{ contentModalText }}
				</view>
				<view class="tui-prompt-flex">
					<view class="btn btn-confirm" @click="handleClick">确定</view>
				</view>
			</view>
		</tui-modal>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	import { uploadFileImage , uploadFilePdf } from '@/services/public.js'
	import authorize from '@/common/config/authorize.js'
	import $reg from '@/common/config/common.js'
	export default{
		components:{
			mpvueCityPicker,
		},
		data(){
			return{
				isIphoneX: this.$store.state.isIphoneX,
				popupShow:true,
				userIdentity:0,
				publisherText:'个人身份',
				organizationTypeText:'请选择二手分类',
				organizationTypeText1:'请选择商品类型',
				brandActions:[],
				publisherActions:[
					{name:'个人身份',value:1},
					{name:'公司身份',value:2},
				],
				categoryActions:[
					{name:'二手仪器',value:1},
					{name:'其他',value:3},
				],
				productActions:[
					{name:'医美',value:1},
					{name:'非医美',value:3},
				],
				GoodsImagesList:[],
				secondParams:{
					publishIdentity:1, // 发布者身份 1 个人身份 2 公司身份
					secondHandType:'',//一级分类
					instrumentType:1,//二手仪器分类
					name:'',
					brandId:'',//品牌ID
					brandName:'',//其他品牌
					fixedYears:'',//出厂
					companyName:'',//公司名称
					maturityYears:'',//产品到期
					price:'',//交易价
					detailTalkFlag:1,//是否启用详聊
					normalPrice:'',//市场价
					originalPrice:'',//采购价
					stock:'',//数量
					productQuality:'',//商品成色
					fileType:'', // 商品文件类型
					contactName:'',//联系人
					contactMobile:'',//联系方式
					checkCode:'',// 联系人手机验证码
					cardNumber:'',// 收款账号
					authenticationImage:'', //身份证正面
					authenticationBackImage:'', //身份证反面
					licenseImage:'',//营业执照图片
					commitmentImage:'',//承诺函图片
					dockingPeopleName:'',//采美对接人姓名
					dockingPeopleMobile:'',//采美对接人手机号
					secondProductType:'',//
					townId:'',//县区地址
					address:'',//详细地址
					image:'',//图片
					fileName:'',
					ossName:'',
					productDetails:'',//商品详细信息
					announType:2,//发布类型 1.二手预成交商品 2.二手估价商品
					source:2,//二手发布来源.1:WWW,2:小程序,3:后台,4:协销
                    userId:0
				 },
				 addressData:{
					address:'请选择所在地区',
					townID:'',			//区ID
					cityID:'',			//区ID
					provinceID:'',		//区ID
					addressDetail: '',	//地址
				 },
				brandName:'请选择品牌名称',
				checkbox:false,
				tipsContentText:'',
				cancelButtonText:'取消发布',
				confirmButtonText:'去支付',
				contentModalText:'发布成功！商品信息会在1-2个工作日内进行审核，采美官方人员也会联系您进行商品估价，审核通过后将立即上线到采美二手市场。',
				isButtonsType:0,
				modal:false,
				modal1:false,
				isMobileDisabled: true,	//手机验证码按钮控制
				mobilCount: '',				//倒计时
				mobileCodeText: '获取验证码',
				mobilTime: null,
			}
		},
		methods:{
			onTextareaInputInfo(e){
			   this.secondParams.productDetails = e.detail.value
			},
			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
			},
			bindPickerChangePublisher(e) {// 选择发布者身份
				this.publisherText = this.publisherActions[e.target.value].name
				this.secondParams.publishIdentity = this.publisherActions[e.target.value].value
			},
			bindPickerChange(e) {// 选择二手分类
				this.secondParams.secondHandType = this.categoryActions[e.target.value].value
				if(this.secondParams.secondHandType === 1){
					this.organizationTypeText =  '二手仪器-美容仪器'
				}else{
					this.organizationTypeText = this.categoryActions[e.target.value].name
				}
			},
			bindPickerChangeBrand(e) {
				// 选择品牌
				this.brandName = this.brandActions[e.target.value].name
				this.secondParams.brandId = this.brandActions[e.target.value].value
			},
			bindPickerChangeProduct(e) {
				// 选择商品类型
				this.organizationTypeText1 = this.productActions[e.target.value].name
				this.secondParams.secondProductType = this.productActions[e.target.value].value
			},
			contains(arr, val) {// 校验
				return arr.some(item => item === val)
			},
			uploadGoodsImagesFn(event){//上传商品图片
				uploadFileImage().then(res =>{
					 this.GoodsImagesList.push(JSON.parse(res.data).data)
					 this.secondParams.image =this.GoodsImagesList.toString()+','
				})
			},
			removeGoodsImagesFn(index){//删除商品图片
				this.GoodsImagesList.splice(index,1)
				this.secondParams.image =this.GoodsImagesList.toString()+','
			},
			contactMobileOnblur(e){// 识别手机号是否正确
				if(this.$reg.isMobile(e.detail.value)){
					this.isMobileDisabled = false
				}
			},
			getMobileCodeFn(){
				let params = {
						mobile:this.secondParams.contactMobile,
						isCheckCaptcha:1,
						activateCodeType:6,
						platformType:2
					}
				this.isMobileDisabled = true
				this.PublicService.GetRegisterMobileCode(params).then(response =>{
					this.$util.msg('验证短信已发送',2000)
					const TIME_COUNT = 60
			     	if (!this.mobilTime) {
			       		this.mobilCount = TIME_COUNT
			       		this.isMobileDisabled = true
			       		this.mobilTime = setInterval(() => {
			       			if (this.mobilCount > 1 && this.mobilCount <= TIME_COUNT) {
			         			this.mobilCount--
			         			this.mobileCodeText = this.mobilCount +'秒后重发'
			        		} else {
				         		this.isMobileDisabled = false
				         		clearInterval(this.mobilTime)
				         		this.mobilTime = null
								this.mobileCodeText = '获取验证码'
			        		}
			       		},1000)
			      	}
				}).catch( error =>{
					this.$util.msg(error.msg,2000)
					this.isMobileDisabled = false
				})
			},
			handleSubmitBtn () {
				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.secondParams.checkCode == ''){
					this.$util.msg('请输入短信验证码',2000)
					return
				}
				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.publishIdentity === 2) {
					if (this.secondParams.companyName=='') {
						 this.$util.msg('请输入公司名称',2000)
						 return
					} 
				}
				if(this.secondParams.productQuality == ''){
					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.SecondHandProduct(this.secondParams)
			},
			SecondHandProduct(params){//提交发布
				this.SecondService.SecondHandProduct(params).then(res=>{ 
					this.modal = true
				})
				.catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			cancelButtonFn(){//弹窗操作按钮
				switch(this.isButtonsType){
					case 1:
						this.modal1 = false
						this.SecondHandProduct(this.secondParams)
						break
					case 2:	
						this.modal1 = false
						break
				}
			},
			confirmButtonFn(){//弹窗操作按钮
				switch(this.isButtonsType){
					case 1:
						this.modal1 = false
						break
					case 2:	
						this.modal1 = false
						break
				}
			},
			handleChangAgree() {
				this.checkbox = !this.checkbox
			},
			getBrandList() {
				// 获取收款类型列表
				this.SecondService.brandList()
					.then(response => {
						this.brandActions = response.data.map(item => ({
							...item,
							name: item.name,
							value: item.id
						}))
					})
					.catch(err => {
						this.$util.msg(err.msg, 2000)
					})
			},
			hideMobel(){
				this.modal = false
			},
			handleClick(){
				this.modal = false
				this.$api.redirectTo ('/pages/second/product/product-list')
			},
            async getUserInfo(){
                try{
                    const res = await this.$api.getComStorage('userInfo')
                    this.userIdentity = res.userIdentity
                    this.secondParams.userId = res.userId
                }catch(error){
                    console.log('获取用户信息异常！')
                }
            }
		},
		onShow() {
			this.getBrandList()
			this.getUserInfo()
		}
	}
</script>

<style lang="scss">
	view{font-size: 28rpx;}
	.my-maintenance{
		padding: 20rpx;
	} 
	.bannerimg {
		height: 100rpx;
		width: 100%;
        display: none;
	}
	.bannerimg  image{
		width: 100%;
		height: 100% ;
	}
	.newsTitle {
		line-height: 48rpx;
		text-align: left;
		color: #FF5B00;
		padding:20rpx;
		background-color: rgba(225, 86, 22, .1);
		border-radius: 10rpx;
        display: none;
	}
	.nestext{
		font-size: 24rpx;
		line-height: 40rpx;
	}
	.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: #FF5B00;
	}
	.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;
		.red{
			color: #f94b4b;
		}
	}
	.label-im{
		width: 100%;
		line-height: 50rpx;
		font-size: $font-size-28;
		color: #666666;
		text-align: left;
		margin-top: 20rpx;
		.red{
			color: #f94b4b;
		}
		.sms{
			font-size: $font-size-24;
			color: #fea785;
		}
	}
	.label-em{
		line-height: 28rpx;
		font-size: $font-size-20;
		color: #fea785;
		width: 100%;
		text-align: left;
	}
	.label.second{
		width: 155rpx;
	}
	.row .spacing.second{
		width: 70%;
	}
	.row{
		width: 100%;
		border-bottom: 2rpx solid #e1e1e1;
		line-height: 90rpx;
		float: left;
		height: auto;
		position: relative;
		.checkbox-main{
			width: 100%;
			.checkbox-list {
				height: 60rpx;
				font-size: $font-size-28;
				line-height: 60rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
				margin-bottom: 10rpx;
				box-sizing: border-box;
				float: left;
				color: #333333;
				.icon-yixuanze{
					margin-right: 10rpx;
					color: #FF5B00;
				}
				.icon-weixuanze{ 
					margin-right: 10rpx;
					color: #B2B2B2;
				}
			}
		}
		.row-btn{
			width: 180rpx;
			height:64rpx;
			background: $btn-confirm;
			padding: 0;
			border-radius: 32rpx;
			position: absolute;
			right: 0;
			top: 10rpx;
			.row-input{
				width: 180rpx;
				height: 64rpx;
				line-height: 64rpx;
				padding: 0;
				color: #FFFFFF;
				background: $btn-confirm;
				text-align: center;
				border-radius: 32rpx;
				&.other{
					width: 180rpx;
					background: #F7F7F7;
					margin-right: 20rpx;
				}
				&.none{
					background: #F7F7F7;
				}
			}
			&.disabled{
				background: #F7F7F7;
				.row-input{
					background: #F7F7F7;
					color: #999999;
					font-size: 24rpx;
				}
			}
		}
		&.none{
			border-bottom: none;
		}
	}
	.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;
		color: #333333;
		.input{
			color: #333333;
		}
		&.file{
			width: 100%;
		}
		&.file-text{
			width: 100%;
			line-height: 44rpx;
			font-size: 28rpx;
			box-sizing: border-box;
			margin-left: 0;
			.file-text-em{
				width: 100%;
				text-overflow: ellipsis;
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				-webkit-box-orient: vertical;
				line-height: 44rpx;
				font-size: 28rpx;
				padding-right: 40rpx;
				box-sizing: border-box;
				position: relative;
			}
			.icon-iconfontguanbi{
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				display: block;
				position: absolute;
				top: 0;
				right:0;
				color: #f94b4b;
				font-size: 36rpx;
			}
		}
		&.file-none{
			width: 100%;
			margin-left: 0;
			position: relative;
			.file-none-button{
				width: 88rpx;
				height: 44rpx;
				background-color: #FF5B00;
				border-radius: 8rpx;
				line-height: 44rpx;
				text-align: center;
				font-size: 24rpx;
				color: #FFFFFF;
				position: absolute;
				right: 0;
				top: -15rpx;
			}
		}
	}
	.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: #FF5B00 !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;
			top: 0;
			left: 0;
		}
		.upload-img {
			width: 100%;
			height: 100%;
			display: block;
			border-radius: .53vw;
		}
		
		.icon-shangchuantupian{
			display: block;
			width: 100%;
			height: 100rpx;
			line-height: 90rpx;
			color: #b2b2b2;
			font-size: $font-size-40;
			text-align: center;
			padding-top: 20rpx;
			box-sizing: border-box;
		}
		.add-text {
			display: block;
			width: 100%;
			line-height: 50rpx;
			font-size: 24rpx;
			color: #b2b2b2;
			text-align: center;
		}
		.icon-iconfontguanbi{
			width: 40rpx;
			height: 40rpx;
			line-height: 40rpx;
			display: block;
			position: absolute;
			background: #f94b4b;
			text-align: center;
			line-height: 40rpx;
			border-radius: 50%;
			top: -15rpx;
			right:-18rpx;
			color: #FFFFFF;
			font-size: $font-size-24;
		}
	}
	.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 #E1E1E1;
		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;
	}
	.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 .content{
		padding: 30rpx 52rpx;
		line-height: 48rpx;
		color: #666666;
		font-size: 30rpx;
		display: block;
	}
	.paybtn{
		width: 100%;
		height: 90rpx;
		float: left;
		.btn{
			width: 50%;
			height: 90rpx;
			text-align: center;
			line-height: 90rpx;
			font-size: 30rpx;
			display: inline-block;
			float: left;
			&.cancel{
				background-color: #efefef;
				border-radius: 0rpx 0rpx 0rpx 32rpx;
				color: #999999;
			}
			&.confirm{
				background-image: linear-gradient(270deg, #f28f31 0%, #FF5B00 100%);
				border-radius: 0rpx 0rpx 32rpx 0rpx;
				color: #fff;
			}
		}
	}
	.icon-wenhao{
		color: #1890f9;
		font-size: 35rpx;
		width: 50rpx;
	}
	.form-upload-tips:hover .wen-tips {display: block;}
	.tui-popup-box {
		position: relative;
		box-sizing: border-box;
		min-height: 100rpx;
		padding: 6rpx 24rpx;
		.tui-popup-content {
			padding-top: 30rpx;
		}
	}
	.tui-popup-btn {
		width: 100%;
		height: auto;
		float: left;
		box-sizing: border-box;
		margin-top: 30rpx;
		.tui-button {
			width: 600rpx;
			height: 88rpx;
			background: $btn-confirm;
			line-height: 88rpx;
			text-align: center;
			color: #ffffff;
			font-size: $font-size-28;
			border-radius: 44rpx;
			margin: 0 auto;
		}
		.tui-button-text{
			width: 600rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			color: #333333;
			font-size: $font-size-26;
			margin: 0 auto;
			margin-top: 15rpx;
			.iconfont{
				margin-right: 10rpx;
				&.icon-yixuanze{
					color: $color-system;
				}
			}
		}
	}	
	.tui-prompt-flex{
		width: 100%;
		height: 80rpx;
		display: flex;
		margin-top: 20rpx;
		.btn{
			flex: 1;
			line-height: 80rpx;
			font-size: $font-size-26;
			text-align: center;
			color: #FFFFFF;
			border-radius: 40rpx;
			margin: 0 24rpx;
			&.btn-cancel{
				background: #F7F7F7;
				color: #999999;
			}
			&.btn-confirm{
				background: $btn-confirm;
			}
		}
		
	}
	.tui-prompt-text{
		line-height: 44rpx;
		font-size: $font-size-26;
		color: #333333;
		.text{
			color: $color-system;
		}
	}
</style>