cbz-sj/pages/good/setting.vue

<template>
	<view class="content">
		<view class="center">
			<view class="title">共{{pageList.length}}个型号：{{title}}</view>
			<block v-for="(item,index) in pageList" :key="index">
				<view class="box">
					<view class="box_title cell" v-if="titleList.length > 0">{{titleList[index].title}}</view>
					<view class="hflex acenter jbetween cell">
						<view class="left">价格</view>
						<u-input v-model="item.price_selling" type="digit" border="none" placeholder="请填写商品价格" @blur="moneyinput(index)"></u-input>
					</view>
					<view class="hflex acenter jbetween cell">
						<view class="left">库存</view>
						<u-input v-model="item.stock_total" type="number" border="none" placeholder="请填写商品库存"></u-input>
					</view>
					<view class="hflex acenter cell">
						<view class="left">图片</view>
						<view class="img">
							<image src="/static/images/common/upload_img2.png" class="upload_img1" @click="uploadImg(index)" v-if="item.sku_image == ''"></image>
							<image :src="item.sku_image" class="upload_img1" @click="uploadImg(index)" v-else></image>
							<image src="/static/images/common/close.png" class="img_close" v-if="item.sku_image !== ''" @click="closeImg(index)"></image>
						</view>
					</view>
					<view class="hflex acenter jbetween cell">
						<view class="left">是否售卖</view>
						<u-switch v-model="item.status" activeColor="#81be6a" ></u-switch>
					</view>
				</view>
			</block>
		</view>
		<view class="bottom">
			<view class="btn hflex acenter jcenter" @click="save">
				保存
			</view>	
		</view>	
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				titleList: [],
				specList: [],
				pageList: [],
				title: '',
				good_id: '',
			}
		},
		onLoad(options) {
			that = this
			console.log('options',options);
			if(options.data) {
				that.specList = JSON.parse(options.data)
				console.log('that.specList',that.specList);
			}
			if(options.list) {
				that.pageList = JSON.parse(options.list)
				console.log('that.pageList',that.pageList);
			}
			if(options.good_id) {
				that.good_id = options.good_id
			}
			that.getList()
		},
		methods: {
			getList() {
				var list = []
				var list2 = []
				console.log(that.pageList);
				if(that.specList.length > 0) {
					for(var i=0;i<that.specList.length;i++) {
						that.title += that.specList[i].name + '、'
						for(var j=0;j<that.specList[i].list.length;j++) {
							var data = {
								type: i,
								name: that.specList[i].list[j].name,
								group: that.specList[i].list[j].group,
							}
							list.push(data)
						}
					}
					that.title = that.title.substr(0,that.title.length - 1)
				}
				if(that.specList.length == 2) {
					for(var i=0;i<list.length;i++) {
						for(var j=i+1;j<list.length;j++) {
							if(list[i].type !== list[j].type) {
								var temp = {
									title: list[i].name+'|' + list[j].name
								}
								that.titleList.push(temp)
								var data = {
									goods_spec: list[i].group + '::' + list[i].name+';;' + list[j].group + '::' + list[j].name,
									stock_total : '',
									price_selling : '',
									sku_image : '',
									status : true
								}
								list2.push(data)
							}
						}
					}
				} 
				if(that.specList.length == 1) {
					for(var i=0;i<list.length;i++) {
						var temp = {
							title : list[i].name
						}
						that.titleList.push(temp)
						var data = {
							goods_spec: list[i].group+ '::' + list[i].name,
							stock_total : '',
							price_selling : '',
							sku_image : '',
							status : true
						}
						list2.push(data)
					}
				}
				if(that.specList.length == 3) {
					for(var i=0;i<that.specList[0].list.length;i++) {
						for(var j=0;j<that.specList[1].list.length;j++) {
							for(var k=0;k<that.specList[2].list.length;k++) {
								var temp = {
									title: that.specList[0].list[i].name+'|' +  that.specList[1].list[j].name + '|' +  that.specList[2].list[k].name
								}
								that.titleList.push(temp)
								var data = {
									goods_spec: that.specList[0].list[i].group+ '::' + that.specList[0].list[i].name+';;'+ that.specList[1].list[j].group+ '::' +  that.specList[1].list[j].name + ';;' + that.specList[2].list[k].group+ '::' +  that.specList[2].list[k].name,
									stock_total : '',
									price_selling : '',
									sku_image : '',
									status : true
								}
								list2.push(data)
							}
						}
					}
				}
				var plist = []
				console.log(that.pageList);
				if(that.pageList.length == 0) {
					that.pageList = list2
				} else {
					for(var i=0;i<that.pageList.length;i++) {
						var data = {
							id: that.pageList[i].id,
							goods_spec: that.pageList[i].goods_spec,
							stock_total : that.pageList[i].stock_total,
							price_selling : that.pageList[i].price_selling,
							sku_image : that.pageList[i].show_image?that.pageList[i].show_image:that.pageList[i].sku_image,
							status : that.pageList[i].status == 1 ? true : false,
						}
						plist.push(data)
					}
					that.pageList = plist
				}
				console.log('titleList：',that.titleList);
			},
			uploadImg(index) {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: function (res) {
						const tempFilePaths = res.tempFilePaths
						uni.uploadFile({
							url: $api.config.baseUrl + '/data/api.auth.Center/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								'token': uni.getStorageSync('token')?uni.getStorageSync('token'):'',
								'api-name': 'iosapp'
							},
							// formData: {
							// 	'user': 'test'
							// },
							success: (res) => {
								const data = JSON.parse(res.data)
								if (data.code == 1) {
									that.pageList[index].sku_image = data.data.url
									
								}
							}
						});
					}
				});
			},
			closeImg(index) {
				that.pageList[index].sku_image = ""
			},
			moneyinput(index) {
				console.log(index);
				if(that.pageList[index].price_selling<=0) {
					$api.info('请输入>0的数字')
					that.pageList[index].price_selling = ''
				}
				
			},
			save() {
				console.log(that.pageList);
				for(var i=0;i<that.pageList.length;i++) {
					if(!that.pageList[i].price_selling || !that.pageList[i].stock_total) {
						$api.info("必填项不能为空")
						return
					}
					/* if(that.pageList[i].status) {
						that.pageList[i].status = 1
					} else {
						that.pageList[i].status = 2
					} */
				}
				
				uni.setStorageSync('specData',JSON.stringify(that.pageList))
				uni.setStorageSync('spectitle',JSON.stringify(that.specList))
				$api.jump(-1)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		.center {
			width: 100%;
			box-sizing: border-box;
			padding: 0 30rpx;
			.title {
				font-size: 28rpx;
				font-weight: 400;
				color: #222222;
				line-height: 40rpx;
				padding: 28rpx 0 0;
			}
			.box {
				background: #F5F5F5;
				border-radius: 12px;
				margin-top: 24rpx;
				padding: 0 20rpx 24rpx;
				.box_title {
					font-size: 28rpx;
					font-weight: 400;
					color: #222222;
					line-height: 40rpx;
				}
				.cell {
					padding: 24rpx 0 4rpx;
					.left {
						width: 130rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #222222;
						line-height: 40rpx;
					}
					.u-input {
						width: 500rpx;
						height: 64rpx;
						background: #FFFFFF;
						border-radius: 8rpx;
						padding: 0 20rpx !important;
					}
					.img {
						position: relative;
						.upload_img1 {
							width: 140rpx;
							height: 140rpx;
						}
						.img_close {
							position: absolute;
							width: 28rpx;
							height: 28rpx;
							right: 0;
							top: 0;
						}
					}
					
				}
			}
			.box:nth-last-child(1) {
				margin-bottom: 186rpx;
			}
		}
		
		.bottom {
			width: 100%;
			height: 166rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 8rpx 30rpx 0;
			position: fixed;
			bottom: 0;
			z-index: 99;
			.btn {
				width: 100%;
				height: 84rpx;
				background: #5471FF;
				border-radius: 46rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 50rpx;
			}
		}
	}
</style>