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">
	                <p>欢迎您来到采美365网二手商品市场，您可以在这里发布二手设备、产品信息，每个商品需要收取您100元的展示费，展示期为6个月；
	                   为了完整展示您的商品，请您认真填写以下内容，谢谢合作。</p>
	             </view>
				 <form>
					 <view class="row"> 
						 <label class="label"><span class="red">*</span>分类</label>
						 <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">
						<label class="label"><span class="red">*</span>商品品牌</label>
						 <view class="select spacing" @click="showBrand">
							 <span class="placeholder" >{{brandname}}</span>
							<!-- <ul v-show="selectBrand">
								 <li  v-for="(item,index) in BrandList" :key="index" :value='item.id' @click="ChangeBrand(item)">{{item.name}}</li>
							 </ul> -->
						 </view>
					 </view>
					 <view class="row">
						 <label class="label">公司名称</label>
						 <view class="spacing">
							 <input type="text" maxlength="40"  id="shopname"  v-model="secondParams.name" placeholder="请输入商品名称，不超过40个汉字">
						 </view>
					 </view>
					 <view class="row">
						 <label class="label">出厂日期</label>
						 <view class="spacing">
							<input type="text" v-model="secondParams.fixedYears" id="shopyear" maxlength="10" placeholder="请输入出厂日期 如：2020年06月">
						 </view>
					 </view>
					 <view class="row"  v-show="secondParams.secondHandType==2">
						 <label class="label"><span class="red">*</span>产品到期日</label>
						 <view class="spacing">
							<input type="text"  v-model="secondParams.maturityYears" id="expire" maxlength="10" placeholder="请输入产品到期日，如：2020年12月">
						 </view>
					 </view>
					 <view class="row">
						 <label class="label"><span class="red">*</span>公司名称</label>
						 <view class="spacing">
							 <input type="text"  v-model="secondParams.companyName" id="mechanismname" maxlength="30" placeholder="请输入公司名称，不超过30个汉字">
						 </view>
					 </view>
					 <view class="row">
						 <label class="label"><span class="red">*</span>交易价</label>
						 <view class="spacing">
							 <input type="text" style="width: 288px;" maxlength="20" id="shopprice" oninput="value=value.replace(/[^\d]/g, '')"
							     v-model="secondParams.price1"  placeholder="请输入交易价">
						 </view>
					 </view>
					 <view style="margin-top: 15rpx;">
						 <span  @click="Detailed($event)"  v-model="secondParams.detailTalkFlags" class="iconfont xiangliao"
						 :class="vShow_detailTalkFlag?'icon-jiagexiangliao':'icon-juxingweigouxuan'" ><span style="margin-left: 10rpx;">价格详聊</span></span>
						 <span class="showflag" v-show="vShow_detailTalkFlag">(勾选代表同意不显示交易价)</span>
					 </view>
					 <view class="row" v-show="secondParams.secondHandType==2">
						 <label class="label"><span class="red">*</span>市场价</label>
						 <view class="spacing">
							  <input type="text"  v-model="secondParams.normalPrice" id="market" maxlength="30" oninput="value=value.replace(/[^\d]/g, '')"   placeholder="请输入市场价">
						 </view>
					 </view>
					 <view class="row"  v-show="secondParams.secondHandType==2">
						 <label class="label"><span class="red">*</span>采购价/原价</label>
						 <view class="spacing">
							  <input type="text"  v-model="secondParams.originalPrice" id="original_price" maxlength="30" oninput="value=value.replace(/[^\d]/g, '')" placeholder="请输入采购价/原价"/>
						 </view>
					 </view>
					 <view class="row" v-show="secondParams.secondHandType==2">
						 <label class="label"><span class="red">*</span>数量</label>
						 <view class="spacing">
							  <input type="text"  id="number" v-model="secondParams.stock" maxlength="30" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入数量">
						 </view>
					 </view>
					 <view class="row">
						 <label class="label"><span class="red">*</span>商品成色</label>
						 <view class="spacing">
						     <input type="text" maxlength="10" id="shopcolor"v-model="secondParams.productQuality"  placeholder="请输入商品成色，如“9成新”">
					    </view> 
					 </view>
					 <view class="row">
						 <label class="label"><span class="red">*</span>联系人</label>
						 <view class="spacing">
							  <input type="text" maxlength="6" v-model="secondParams.contactName" id="linkman"  placeholder="请输入联系人姓名">
					    </view> 
					 </view>
					 <view class="row">
						 <label class="label"><span class="red">*</span>联系方式</label>
						 <view class="spacing">
							 <input type="text"  v-model="secondParams.contactMobile"  oninput="value=value.replace(/[^\d]/g,'')"  id="phoneNum" maxlength="11" placeholder="请输入联系人手机号 / 固话">
					    </view> 
					 </view>
					 <view class="row">
						 <label class="label">商品类型</label>
						 <view class="secondradio">
							 <view class="buy icon mIcon" 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">
						 <label class="label"><span class="red">*</span>联系地址</label>
						 <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" id="addressDetails" class="border-grey address-details" v-model="secondParams.address" maxlength="50"
						placeholder="请填写详细地址，如街道/小区/门牌等" /></textarea>
					 
				 </form>
				 <tui-drawer  @mode="bottom" :class="{'tui-drawer-mask_show':visible}" >
				 </tui-drawer>
				 <mpvue-city-picker :themeColor="themeColor"
				 					ref="mpvueCityPicker" 
				 				    :pickerValueDefault="cityPickerValueDefault"
				 					@onCancel="onCancel" 
				 					@onConfirm="onConfirm">
				 </mpvue-city-picker>
	          </view>
	
	             
	
	</view>
</template>

<script>
	import tuiDrawer from "@/components/thorui/tui-drawer/tui-drawer.vue"
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	import { mapState,mapMutations } from 'vuex';
	export default{
		name:'secondHandrelease',
		components:{
			tuiDrawer,
			mpvueCityPicker
		},
		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,
				        includedTax:'',
				        GoodsImagesList:[],
				        oldNum:0,
				        secondType:0,
				        vShow_GoodsImages:false,
				        fromMessage:'',//提示文字
				        // formData:new FormData(),
				        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: [],//区
				        from: {
				            name:'',
				            province: '',//省id
				            city: '',
				            town: ''
				        },
				        TypeList:'',
				        playid:'',
				        checkVal:[],
				        vShow_secondBj:false,
				        resultBj:false,
				        vShow_detailTalkFlag:false,
				        vShow_secondHandType:false,
				        vShow_instrumentType:false,
				        vShow_BrandID:false,
				        vShow_Name:false,
				        vShow_Price:false,
				        vShow_shopColor:false,
				        vShow_contactName:false,
				        vShow_contactMobile:false,
				        vShow_Address:false,
				        vShow_TownId:false,
				        vShow_Market:false,
				        vShow_original:false,
				        vShow_Number:false,
				        vShow_expire:false,
				        vShow_detailInfoEditor:true,
				        vShow_GoodsImages:false,
				        vShow_checkBox:false,
				        selectBrand:false,
						isShowInput:true,
			}
		},
		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;
			},	
			showBrand:function(){
			            var _this = this;
			            _this.selectBrand = !_this.selectBrand;
			        },
			        secondHandRidio: function(item) {
			        var _this = this;
			            _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;
			        var _this = this;
			          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){ //品牌列表
			         var _this = this;
			            _this.brandname = item.name;
			            _this.secondParams.brandID = item.id;
			            if(_this.secondParams.brandID==161){
			              _this.shoplogoTwo = true;
			            }else {
			              _this.shoplogoTwo = false;
			            }
			        },
			        Detailed:function(){
			        var _this = this;
					_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){//上传商品图片
			            var _this = this;
			            var inputDOM = _this.$refs.goodsImages;
			            var file = inputDOM.files;
			            _this.formData.append('file', file[0]);
			            SecondApi.uploadimg(_this.formData,function(response){
			               _this.GoodsImagesList.push(response.data);
			               _this.secondParams.image1 =_this.GoodsImagesList.toString()+',';
			                event.target.value = '';
			            });
			        },
			         removeGoodsImagesFn: function(index){//删除商品图片
			            var _this = this;
			            _this.GoodsImagesList.splice(index,1);
			            _this.secondParams.image1 =_this.GoodsImagesList.toString()+',';
			         },
			        getProductType:function(item){
			        var _this = this;
			         _this.secondType=item;
			          _this.secondParams.secondProductType = item ;
			        },
			        submitBtn:function () {
			         var _this = this;
			          if(_this.secondParams.secondHandType == ''){
			                _this.vShow_secondHandType = true;
			                _this.fromMessage = '请选择分类';
			                _this.scrollIntoView();
			                setTimeout(function(){
			                    _this.vShow_secondHandType= false;
			                },2000);
			                return;
			            }
			            if(_this.secondParams.secondHandType == 1 ){
			               if(_this.secondParams.instrumentType ==''){
			                _this.vShow_instrumentType = true;
			                _this.fromMessage = '请完善仪器分类';
			                _this.scrollIntoView();
			                setTimeout(function(){
			                    _this.vShow_instrumentType= false;
			                },2000);
			                return;
			                }
			            }
			         if(_this.secondParams.brandID == ''){
			                _this.vShow_BrandID = true;
			                _this.fromMessage = '请选择商品品牌';
			                _this.scrollIntoView();
			                setTimeout(function(){
			                    _this.vShow_BrandID = false;
			                },2000);
			                return;
			            }
			         if(_this.secondParams.name == ''){
			              _this.vShow_Name = true;
			              _this.fromMessage = '请输入商品名称';
			              _this.scrollIntoView();
			                setTimeout(function(){
			                    _this.vShow_Name = false;
			                },2000);
			                return
			         }
			         if(_this.secondParams.secondHandType ==2) {
			         if (_this.secondParams.normalPrice == '') {
			                 _this.vShow_Market = true;
			                 _this.fromMessage = '请输入市场价';
			                 _this.scrollIntoView();
			                 setTimeout(function () {
			                     _this.vShow_Market = false;
			                 }, 2000);
			                 return
			             }
			             if (_this.secondParams.maturityYears == '') {
			                 _this.vShow_expire = true;
			                 _this.fromMessage = '请输入产品到期日';
			                 _this.scrollIntoView();
			                 setTimeout(function () {
			                     _this.vShow_expire = false;
			                 }, 2000);
			                 return
			             }
			         }
			         if(_this.secondParams.price1 == ''){
			                  _this.vShow_Price = true;
			                  _this.fromMessage = '请输入交易价';
			                  _this.scrollIntoView();
			                    setTimeout(function(){
			                        _this.vShow_Price = false;
			                    },2000);
			                    return
			             }
			         if(_this.secondParams.secondHandType ==2){
			             if(_this.secondParams.originalPrice == ''){
			              _this.vShow_original = true;
			              _this.fromMessage = '请输入采购价/原价';
			              _this.scrollIntoView();
			                setTimeout(function(){
			                    _this.vShow_original = false;
			                },2000);
			                return
			           }
			         if(_this.secondParams.stock == ''){
			              _this.vShow_Number = true;
			              _this.fromMessage = '请输入数量';
			              _this.scrollIntoView();
			                setTimeout(function(){
			                    _this.vShow_Number = false;
			                },2000);
			                return
			            }
			         }
			
			
			         if(_this.secondParams.productQuality == ''){
			              _this.vShow_shopColor = true;
			              _this.fromMessage = '请输入商品成色';
			              _this.scrollIntoView();
			                setTimeout(function(){
			                    _this.vShow_shopColor = false;
			                },2000);
			                return
			         }
			          if(_this.secondParams.contactName == ''){
			              _this.vShow_contactName = true;
			              _this.fromMessage = '请输入联系人姓名';
			              _this.scrollIntoView();
			                setTimeout(function(){
			                    _this.vShow_contactName = false;
			                },2000);
			                return
			         }
			          if(_this.secondParams.contactMobile == ''){
			              _this.vShow_contactMobile = true;
			              _this.fromMessage = '请输入联系方式';
			              _this.scrollIntoView();
			                setTimeout(function(){
			                    _this.vShow_contactMobile = false;
			                },2000);
			                return
			         }
			         if(_this.secondParams.contactMobile.length !=11){
			              _this.vShow_contactMobile = true;
			              _this.fromMessage = '联系方式格式不正确';
			              _this.scrollIntoView();
			                setTimeout(function(){
			                    _this.vShow_contactMobile = false;
			                },2000);
			                 return
			          }
			          if(_this.secondParams.townId == ''|| _this.secondParams.townId == undefined){
			              _this.vShow_TownId = true;
			              _this.fromMessage = '请完善联系地址';
			              _this.scrollIntoView();
			                setTimeout(function(){
			                    _this.vShow_TownId = false;
			                },2000);
			                return
			         }
			           if(_this.secondParams.address == ''){
			              _this.vShow_Address = true;
			              _this.fromMessage = '请填写详细地址';
			               document.getElementById('Address').scrollIntoView({block: 'start', behavior: 'smooth'});
			                setTimeout(function(){
			                    _this.vShow_Address = false;
			                },2000);
			                return
			         }
			            if(_this.GoodsImagesList ==''){
			               _this.vShow_GoodsImages = true;
			              _this.fromMessage = '请上传图片';
			                document.documentElement.scrollTop=900;
			              setTimeout(function(){
			                   _this.vShow_GoodsImages = false;
			                },2000);
			                return;
			            }
			         if(_this.checkbox==false){
			               _this.vShow_checkBox = true;
			               _this.fromMessage='请勾选已阅读';
			                setTimeout(function(){
			                   _this.vShow_checkBox = false;
			                },2000);
			                return
			         }
			         console.log(_this.secondParams)
			          SecondApi.SecondHandProduct(_this.secondParams,function (res) { //提交发布
			             if (res.code==0){
			                 console.log(res)
			               _this.vShow_secondBj = true;
			               _this.playid= res.data;
			             }else{
			                  this.$util.msg(res.msg,2000)
			                 _this.secondBj = false;
			                 return
			             }
			         })
			        },
			        quxiao:function(){
			        var _this = this;
			         _this.vShow_secondBj = false;
			        },
			        gopay:function(){
			            var _this = this;
			            window.location.href = '/pay/caimei-paycash.html?pageType=1&&type=confirm&productID='+_this.playid;
			            _this.vShow_secondBj = false;
			        },
			         scrollIntoView: function(){
			            document.getElementById('secondHandrelease').scrollIntoView({block: 'start', behavior: 'smooth'});
			        },
			        province:function () {
			           var _this = this;
			           _this.from.province = event.target.value;
			            if(_this.from.province==''){//省为请选择时市区初始化
			                _this.cityArray=[];
			                _this.townArray=[];
			                _this.secondParams.townId=''
			            }else {
			              _this.getcity();
			            }
			        },
			        getcity:function(event){//加载市
			           var _this = this;
			            PublicApi.GetCity({ provinceId: _this.from.province },function(response){
			                 if(response.code == 0 ){
			                    _this.cityArray = response.data;
			                     _this.from.city = event.target.value;
			                     if(_this.from.city==''){
			                           _this.townArray=[];
			                     }else {
			                         _this.getcTown();
			                     }
			
			                }
			            })
			
			
			        },
			        getcTown:function(event){
			            var _this = this;
			            PublicApi.GetTown({cityId:_this.from.city},function(response){
			                if(response.code == 0 ){
			                    _this.townArray = response.data;
			                    _this.secondParams.townId = event.target.value;
			                }else{
			                    this.$util.msg(response.msg,2000)
			                }
			            })
			        },
			        changeBox:function () {
			            if(event.target.checked ==true){
			             this.checkbox = true
			            }else {
			             this.checkbox = false
			            }
			        },
					
		},
		 created(){
				this.SecondService.brandList().then(res =>{//品牌列表
		            if(res.code == 0){
		               this.BrandList = res.data;
					   console.log( this.BrandList)
		            }
		        })
		     this.SecondService.GetProvince().then(response=>{//省份
		            if(response.code == 0){
		                this.provinceArray = response.data
		            }else{
		               this.$util.msg(response.msg,2000)
		            }
		        })
		    },
	}
</script>

<style>
	*{
	     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;}
		.row .label .red{
			color: #f94b4b;
		}
		input[type="text"]::placeholder, textarea::placeholder {color: #b2b2b2;;}
		.row label.iconfont{margin-right: 10rpx;color: #e15616;}
		.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;
		}
		.jiaobiao {
		    width: 0;
		    height: 0;
		    border-left: 20rpx solid transparent;
		    border-right: 20rpx solid transparent;
		    top: 376rpx;
		    right: 45%;
		    border-bottom: 20rpx solid #1890f9;
		    position: absolute;
			}
		.row .label{color: #666666;width: 126rpx;display: inline-block;}
		.row{border-bottom: 2rpx solid #e1e1e1;line-height: 90rpx;height: 90rpx;}
		.select {
			position: relative;
			color: #9aa5b5;
			text-align: left;
			user-select: none;
		}
		.row .spacing{
			display: inline-block;
			margin-left: 60rpx;
			width: 73%;
			vertical-align:middle
		}
	  .select .placeholder {
			position: relative;
			cursor: pointer;
			width: 100%;
			display: inline-block;
		}
		.icon-xiayibu{margin-left: 280rpx;color: #b2b2b2;}
		.xiangliao{font-size: 26rpx;margin-right: 10rpx;}
		.icon-jiagexiangliao{color: #e15616;}
		.showflag{color: #b2b2b2;}
		.border-grey{
			width: 100%;
			resize: none;
			padding: 20rpx;
			height: 160rpx;
			border-bottom: 2rpx solid #e1e1e1;
		}
		.release-main-container {
		    overflow: hidden;
		}
</style>