更新

packageIntegral/productAddition/index.vue

@@ -58,7 +58,6 @@
 		
  
     <view id="instruction" :class="currentBoxId == 'instruction' ? 'show' : 'hidden'">
-        <!-- <productAddStep2 /> -->
 		<uni-forms :modelValue="productDate" label-width="200rpx">
 					<uni-forms-item label="属性类别:" >
 						  <uni-data-select
@@ -85,8 +84,8 @@
 				</view>
 				<view>
 					<view>批量填充：<text style="color: #999999;">批量填充填入信息后，可以批量将内容填写到SKU 信息里</text></view>
-					<view class="tagButton" v-for="item in bottonList">{{item.label}}</view>
-					<view class="redButton">确定</view>
+					<view class="tagButton" :class="item.checked == true?'checkedTag':''" @tap="changeChecked(item)" v-for="item in bottonList">{{item.label}}</view>
+					<view class="redButton" @tap="addStockList">确定</view>
 				</view>
 				<view v-if="productDate.attributesTypeId&&checkboxAttributes.length>0" v-for="(items,index) in checkboxAttributes">
 					<view>
@@ -94,7 +93,9 @@
 						<text>规格：</text>
 						<text>{{radioAttributes}}+{{items}}</text>
 					</view>
-					<view class="tagButton" v-for="items in bottonList">{{item.label}}</view>
+					<view class="tagButton" v-if="item.checked==true" v-for="item in stockList">
+						<input type="text" v-model="item.value" :placeholder="item.label" />
+					</view>
 					<view style="display: inline-block;" @click="deleteCheckAll(index)">删除</view>
 				</view>
 				<view v-if="productDate.attributesTypeId&&radioAttributes" >
@@ -103,29 +104,38 @@
 						<text>规格：</text>
 						<text>{{radioAttributes}}</text>
 					</view>
-					<view class="tagButton" v-for="item in bottonList">{{item.label}}</view>
+					<view class="tagButton" v-if="item.checked==true" v-for="item in bottonList">
+						<input type="text" v-model="item.value" :placeholder="item.label" />
+					</view>
 					<view style="display: inline-block;" @click="deleteRadio">删除</view>
 				</view>
 				<view>
 					<view>
 						<text style="color: red;">*</text>
 						商品图片：<text style="color: #999999;">最多可上传10张图片</text></view>
-						<view>
-							<view class="imageBlack">商品主图</view>
-							<view class="imageBlack">设为主图</view>
-							<view class="imageBlack" @tap="srcFileImage">
-								<view style="cameraImage">
-									<uni-icons type="camera-filled" size="30"></uni-icons>
-								</view>
-								
+							<view class="imageList" v-for="(items,index) in productDate.images">
+							<view class="imageBlack" v-if="items.mainMark==1">
+								<image :src="items.url"></image>
+								<view class="cameraText">商品主图</view>
+								<uni-icons class="cameraClear" type="clear" size="20" @tap="clearImage(index)"></uni-icons>
+							</view>
+							<view class="imageBlack" v-else-if="items.mainMark!=1">
+								<image :src="items.url"></image>
+								<view class="cameraText">设为主图</view>
+								<uni-icons class="cameraClear" type="clear" size="20" @tap="clearImage(index)"></uni-icons>
+							</view>
+						</view>
+						<view class="imageBlack" @tap="takePhoto">
+							<view style="cameraImage">
+								<uni-icons type="camera-filled" size="30"></uni-icons>
 							</view>
 						</view>
 					
 				</view>
-				<view>
+				<!-- <view>
 					<view>详情图片：<text style="color: #999999;">最多可上传10张图片</text></view>
 					<view></view>
-				</view>
+				</view> -->
 				</uni-forms>
 		<view class="buttons">
 			<view id="previous"  @click="changeBox">上一步</view>
@@ -143,17 +153,17 @@
 	import utils from '@/utils/encode'
 	import serve from '@/api/packageIntegral/productList.js'
 	import mulpicker from '@/packageIntegral/components/mulpicker.vue'
-	import productAddStep2 from '@/packageIntegral/productAddition/productAddStep2.vue'
 	export default {
 	components: {
-		mulpicker,
-		productAddStep2
+		mulpicker
 	},
 		data() {
 			return {
 				currentBoxId: 'instruction', //当前显示的view的id
 				isBoxShow: false,
-				productDate:{},
+				productDate:{
+					images:[]
+				},
 				productList:[],
 				brandIdList:[],
 				radioItem:[{
@@ -172,13 +182,14 @@
 					 attributesTypeList:[],
 					 attributesList:[],
 					 bottonList:[
-					 	{label:'市场价格',value:'marketPrice'},
-					 	{label:'销售价格',value:'sellPrice'},
-					 	{label:'商品库存',value:'stock'},
-					 	{label:'兑换积分',value:'integral'}
+					 	{label:'市场价格',value:'marketPrice',checked:false},
+					 	{label:'销售价格',value:'sellPrice',checked:false},
+					 	{label:'商品库存',value:'stock',checked:false},
+					 	{label:'兑换积分',value:'integral',checked:false}
 					 ],
 					 radioAttributes:'',
-					 checkboxAttributes:[]
+					 checkboxAttributes:[],
+					 stockList:[]
 			}
 		},
 
@@ -296,6 +307,30 @@
 			  },
 			  deleteRadio(){
 				  this.radioAttributes = ''
+			  },
+			  changeChecked(item){
+				  
+				  item.checked = !item.checked
+				  console.log(this.radioAttributes,this.checkboxAttributes)
+				  
+			  },
+			  addStockList(){
+				  this.stockList = []
+				  let obj = {}
+				  this.bottonList.forEach(tab=>{
+				  					  if(tab.checked == true){
+				  						  if(tab.value == 'marketPrice'){
+				  							  obj.marketPrice = ''
+				  						  }else if(tab.value == 'sellPrice'){
+				  							  obj.sellPrice = ''
+				  						  }else if(tab.value == 'stock'){
+				  							  obj.stock = ''
+				  						  }else if(tab.value == 'integral'){
+				  							  obj.integral = ''
+				  						  }
+				  					  }
+				  })
+				  this.stockList.push(obj)
 			  },
 			   // 调用系统相机
 			      takePhoto() {
@@ -319,13 +354,13 @@
 			                    success: (modalRes) => {
 			                      if (modalRes.confirm) {
 			                        // 引导用户去设置中打开权限
-			                        wx.openSetting({
+			                        uni.openSetting({
 			                        	success(res) {
 			                        		if (res.authSetting['scope.camera']) {
 			                        			re()
-			                        			// 授权成功，重新定位
+			                        			// 授权成功
 			                        		} else {
-			                        			// 没有允许定位权限
+			                        			// 没有允许相机权限
 			                        			wx.showToast({
 			                        				title: '您拒绝了相机权限，将无法使用相机功能',
 			                        				icon: 'none'
@@ -356,6 +391,7 @@
 			  //调起上传图片
 			  srcFileImage() {
 			  	let _that = this
+				let imageUrl = ''
 			  	uni.chooseImage({
 			  		count: 10, //默认9
 			  		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
@@ -386,8 +422,8 @@
 			  					console.log('进入2')
 			  					console.log(e)
 			  					let obj = JSON.parse(e.data),
-			  						url = obj.data.publicUrl
-									console.log(obj.data.publicUrl)
+			  						imageUrl = obj.data.publicUrl
+									_that.getImage(imageUrl)
 			  				},
 							fail(err) {
 								console.log(err)
@@ -398,6 +434,27 @@
 			  		}
 			  	})
 			  },
+			  getImage(imageUrl){
+				  if(JSON.stringify(this.productDate.images) == '[]'){
+				  	this.productDate.images.push({
+				  		url:imageUrl,
+				  		mainMark:1
+				  	})
+				  }else{
+				  	this.productDate.images.push({
+				  		url:imageUrl,
+				  		mainMark:''
+				  	})
+				  }
+			  },
+			  clearImage(index){
+				if(this.productDate.images[index].mainMark == 1){
+					this.productDate.images.splice(index,1)
+					this.productDate.images[0].mainMark = 1
+				}else{
+					this.productDate.images.splice(index,1)
+				}
+			  },
 			  picker2(e){
 				  console.log(e.detail.value)
 				  this.productDate.value = e.detail.value
@@ -500,6 +557,10 @@
 				text-align: center;
 				margin: 8rpx;
 			}
+			.checkedTag{
+				background-color: #2979ff;
+				color: #FFFFFF;
+			}
 			.redButton{
 				display: inline-block;
 				width: 84rpx;
@@ -510,16 +571,41 @@
 				line-height: 58rpx;
 				text-align: center;
 			}
+			.commodityImage{
+				display: inline-block;
+				max-width: calc(100%-150rpx);
+			}
+			.imageList{
+				display: inline-block;
+				width: 140rpx;
+				margin: 0 10rpx;
+			}
 			.imageBlack{
 				display: inline-block;
 				width: 140rpx;
 				height: 140rpx;
-				line-height: 140rpx;
-				// position: relative;
-				.cameraImage{
-					// position: absolute;
-					// left: 70rpx;
-					// top: 70rpx;
+				position: relative;
+				>image{
+					width: 100%;
+					height: 100%;
+				}
+				.cameraText{
+					width: 140rpx;
+					height: 30rpx;
+					text-align: center;
+					line-height: 30rpx;
+					position: absolute;
+					background-color: #333;
+					opacity: 0.3;
+					color: #FFFFFF;
+					left: 0rpx;
+					top: 110rpx;
+				}
+				.cameraClear{
+					position: absolute;
+					left: 120rpx;
+					top: -10rpx;
+					z-index: 20;
 				}
 			}