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><span>*</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?'select active':''" class="icon">
								  <label class="icon typeradio"></label>{{item.name}}
							  </view>
						  </view>
					 </view>
					 
				 </form>
	          </view>
	
	             
	
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex';
	export default{
		name:'secondHandrelease',
		components:{
		},
		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,
				         },
				        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
			}
		},
		methods:{
			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;
			         if(event.target.checked==true){
			             _this.secondParams.detailTalkFlag = 2 ;//启用价格详聊
			             _this.vShow_detailTalkFlag = true;
			          }else {
			            _this.secondParams.detailTalkFlag = 1 ;//不启用价格详聊
			            _this.vShow_detailTalkFlag = false;
			          }
			        },
			        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:function () {
		        var _this = this;
		        _this.SecondService.brandList({},function (res) {//品牌列表
		            if(res.code == 0){
		               _this.BrandList = res.data;
		            }
		        })
		     _this.SecondService.GetProvince({},function(response){ //省份
		            if(response.code == 0){
		                _this.provinceArray = response.data
		            }else{
		               this.$util.msg(response.msg,2000)
		            }
		        })
		    },
	}
</script>

<style>
		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;}
		.typeradio.icon::before{
		.secondradio{margin-bottom:20rpx}	
		}
</style>