发布

second/pages/form/form.vue

@@ -8,16 +8,134 @@
 	             </view>
 				 <form>
 					 <view class="row"> 
-						 <label><span>*</span>分类</label>
-						 <view class="secondradio" >
+						 <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?'select active':''" class="icon">
-								  <label class="icon typeradio"></label>{{item.name}}
+								  :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>
 	
 	             
@@ -26,10 +144,14 @@
 </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{
@@ -82,6 +204,13 @@
 				            productDetails:'',//商品详细信息
 				            source:1,
 				         },
+						 addressData:{
+						 	address:'请选择所在地区',
+						 	townID:'',			//区ID
+						 	cityID:'',			//区ID
+						 	provinceID:'',		//区ID
+						 	addressDetail: '',	//地址
+						 },
 				        brandname:'请选择',
 				        checkbox:false,
 				        shoplogoTwo:false,
@@ -118,10 +247,22 @@
 				        vShow_detailInfoEditor:true,
 				        vShow_GoodsImages:false,
 				        vShow_checkBox:false,
-				        selectBrand: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;
@@ -159,12 +300,11 @@
 			        },
 			        Detailed:function(){
 			        var _this = this;
-			         if(event.target.checked==true){
+					_this.vShow_detailTalkFlag = !_this.vShow_detailTalkFlag;
+			         if(_this.vShow_detailTalkFlag){
 			             _this.secondParams.detailTalkFlag = 2 ;//启用价格详聊
-			             _this.vShow_detailTalkFlag = true;
 			          }else {
 			            _this.secondParams.detailTalkFlag = 1 ;//不启用价格详聊
-			            _this.vShow_detailTalkFlag = false;
 			          }
 			        },
 			        dragstart: function(value) {  // 记录初始信息
@@ -426,16 +566,16 @@
 			        },
 					
 		},
-		 created:function () {
-		        var _this = this;
-		        _this.SecondService.brandList({},function (res) {//品牌列表
+		 created(){
+				this.SecondService.brandList().then(res =>{//品牌列表
 		            if(res.code == 0){
-		               _this.BrandList = res.data;
+		               this.BrandList = res.data;
+					   console.log( this.BrandList)
 		            }
 		        })
-		     _this.SecondService.GetProvince({},function(response){ //省份
+		     this.SecondService.GetProvince().then(response=>{//省份
 		            if(response.code == 0){
-		                _this.provinceArray = response.data
+		                this.provinceArray = response.data
 		            }else{
 		               this.$util.msg(response.msg,2000)
 		            }
@@ -445,13 +585,78 @@
 </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;}
-		.typeradio.icon::before{
-		.secondradio{margin-bottom:20rpx}	
+		.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>