LSM_OIL_SITE/packageIntegral/productAddition/index.vue

<template>
	<view class="container">
		<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
			<block slot="backText">返回</block>
			<block slot="content">新增商品</block>
		</cu-custom>
    <view id="chooseType" :class="currentBoxId == 'chooseType' ? 'show' : 'hidden'">
		<uni-forms ref="productForm" :modelValue="productDate" label-width="200rpx">
					<uni-forms-item label="商品分类:" name="name">
						<mulpicker
						        v-model="productDate.demandRegion"
						        :list="productList" 
						    rangekey="name"
						    code="id"
						    pidkey="pid" 
						    childkey="city" 
						    :emitPath="true"
						    :level="2"
						    :placeholder="'选择商品分类'"
						/>
						<uni-icons color="#666666" type="right" size="22" style="position: absolute;right: 0;top: 10rpx;"></uni-icons>
					</uni-forms-item>
					<uni-forms-item label="商品名称:" name="age">
						<input type="text" v-model="productDate.age" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="关键词:" name="age">
						<input type="text" v-model="productDate.age" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="商品品牌:" name="age">
						<input type="text" v-model="productDate.age" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="商品售价:" name="age">
						<input type="text" v-model="productDate.age" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="商品上架:" name="age">
						<switch color="#FE0606" checked style="transform:scale(0.7)" />
					</uni-forms-item>
					<uni-forms-item label="商品推荐:" name="age">
						<view class='checkbox-con'>
						 <radio-group @change="checkboxChange">
						  <label :class="item.checked?'checkbox checked':'checkbox'" @click="checkbox(index)" v-for="(item, index) in radioItem" :key="item.value">
						  <checkbox :value="item.value" :checked="item.checked"/>{{item.name}}
						  </label>
						 </radio-group>
						 </view>
					</uni-forms-item>
				</uni-forms>
			<view class="buttons">
				<view @click="closed">取消</view>
			<view id="next" @click="changeBox">下一步</view>
			</view>
		</view>
		
 
    <view id="instruction" :class="currentBoxId == 'instruction' ? 'show' : 'hidden'">
        <productAddStep2 />
		<view class="buttons">
			<view id="previous"  @click="changeBox">上一步</view>
        <view @click="addCompleted">完成</view>
		</view>
    </view>
 



	</view>
</template>

<script>
	import serve from '@/api/packageIntegral/orderList.js'
	import mulpicker from '@/packageIntegral/components/mulpicker.vue'
	import productAddStep2 from '@/packageIntegral/productAddition/productAddStep2.vue'
	export default {
	components: {
		mulpicker,
		productAddStep2
	},
		data() {
			return {
				currentBoxId: 'instruction', //当前显示的view的id
				isBoxShow: false,
				productDate:{},
				productList:[{
		    "name": "北京市",
			'id':'0',
		    "city": [{
					'name':"东城区",
					'id':'1',
				},{
					'name':"西城区",
					'id':'2',
				},{
					'name':"崇文区",
					'id':'3',
				},{
					'name':"宣武区",
					'id':'4',
				},{
					'name':"朝阳区",
					'id':'5',
				}
		    ]
		  }],
		  radioItem:[{
					  name: '新品',
					  checked: true
					 }, {
					  name: '推荐',
					  checked: false
					 }]
			}
		},

		onLoad(options) {
			// this.get(options.orderId)
		},
		methods: {
			checkbox (e) {
				console.log(e)
				 var index = e;//获取当前点击的下标
				 var checkboxArr = this.radioItem;//选项集合
				 if (checkboxArr[index].checked) return;//如果点击的当前已选中则返回
				 checkboxArr.forEach(item => {
				  item.checked = false
				 })
				 checkboxArr[index].checked = true;//改变当前选中的checked值
				 // this.setData({
				 //  checkboxArr: checkboxArr
				 // });
		
			 },
			 checkboxChange (e) {
			 var checkValue = e.detail.value;
			 // this.setData({
			 //  checkValue: checkValue
			 // });
			 },
			  changeBox(e){
			    let currentFlag = e.currentTarget.id;
			    switch(currentFlag){
			      case 'next':
			          this.currentBoxId = 'instruction'
			        break;
			      case 'previous':
			          this.currentBoxId = 'chooseType'
			        break;
			        default:
			            this.currentBoxId = 'viewInstruction'
			          break;
			    }
			  },
			  picker2(e){
				  console.log(e.detail.value)
				  this.productDate.value = e.detail.value
			  },
			  closed(){
				  uni.navigateTo({
				  	url: '/pages/index/index'
				  })
			  },
			  addCompleted(){
				  
			  }
		}
	}
</script>

<style lang="scss" scoped>
	
		.fadeBox{
		    width: 100%;
		    margin-bottom: 20rpx;
		}
		#chooseType{
		padding: 30rpx;
		
		mulpicker{
			height: 72rpx;
			line-height: 72rpx;
		}
		/deep/ .uni-forms{
			width: 100%;
		}
		/deep/ .uni-forms-item{
			width: 100%;
		}
		
		/deep/ .uni-forms-item__label{
			color: #333 !important;
			font-size: 30rpx;
			font-weight: 700;
		}
		/deep/ .uni-forms-item__content{
			width: 100%;
			input{
				height: 72rpx;
				line-height: 72rpx;
			}
		}
		
		switch{
			margin-top: 9rpx;
		}
		switch::before{
			 content: '';
		 }
		 switch::after{
			 content: '';
		 }	
		}
		.checkbox-con{
		 margin-top: 40rpx;
		 text-align: center;
		 position: relative;
		}
		.checkbox{
		 width: 180rpx;
		 height: 76rpx;
		 line-height: 76rpx;
		 font-size: 30rpx;
		 color: #666666;
		 border: 1rpx solid #B6B6B6;
		 border-radius: 5rpx;
		 display: inline-block;
		 margin: 0 10rpx 20rpx 0;
		 position: absolute;
		 top: 50rpx;
		 &:nth-of-type(1){
			 left: -190rpx;
		 }
		 &:nth-of-type(2){
			 left: 50rpx;
		 }
		}
		
		.checked{
		 color: #FFFFFF;
		 background: #FE0606;
		 border: 1rpx solid #FE0606;
		}
		.checkbox checkbox{
		 display: none
		}
		 
		 
		 
		 
		.buttons {
			width: 100%;
			display: flex;
			justify-content: space-evenly;
			margin-top: 180rpx;
		
			>view {
				width: 250rpx;
				height: 76rpx;
				text-align: center;
				line-height: 76rpx;
				border-radius: 10rpx;
				font-size: 28rpx;
		
				&:nth-of-type(1) {
					background: #FFFFFF;
					border: 1rpx solid #B6B6B6;
					color: #333;
				}
		
				&:nth-of-type(2) {
					background: #FE0505;
					color: #fff;
				}
			}
		}
		.show{
		    display: flex;
		    flex-wrap: wrap;
		}
		.hidden{
		    display: none;
		}
</style>