store-new/pages/stock-manage/stock-manage.vue

<template>
	<view class="stock">
		<view class="goods_box" v-for="(item,goodsIdx) in goodsList" :key="item.id">
			<view class="goods_con flexB" @click="cur(goodsIdx)">
				<view class="flexS">
					<image :src="item.img" class="goods_img"></image>
					<view>
						<view style="font-size:30rpx;font-weight: bold;">{{item.name}}</view>
						<view class="one_year" style="width:120rpx;">3条装</view>
					</view>
				</view>
				<text class="store_icon iconjiantou4" v-if="item.toggle"></text>
				<text class="store_icon iconjiantou2" v-else></text>
			</view>
			<view class="goods_detail" v-if="item.toggle">
				<view class="title flexS">
					<text>规格</text>
					<text>尺码</text>
					<text>库存</text>
					<text class="pedometer">修改</text>
				</view>
				<view>
					<view class="stock_opear flexS" v-for="(temp,skuIdx) in item.sku" :key="temp.id">
						<view>{{temp.type}}</view>
						<view>{{temp.size}}</view>
						<view>{{temp.num}}</view>
						<view class="pedometer flexC">
							<image src="../../static/imgs/shop/minus.png" class="symbol_icon"
								@click="minus(goodsIdx,skuIdx,temp.num)"></image>
							<input type="number" v-model="temp.num" @input="getVal($event, goodsIdx, skuIdx)"
								maxlength="5">
							<image src="../../static/imgs/shop/add.png" class="symbol_icon"
								@click="add(goodsIdx,skuIdx)"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="dataAll">
				<view class="sex">
					男款：{{ item.sku|man }}套
					/
					女款：{{ item.sku|female }}套
				</view>
				<view class="num">
					<text>
						合计：
					</text>
					<text class="spec">
						{{ item.sku.reduce((sum, e) => sum + Number(e.num || 0), 0) }}套
					</text>
				</view>
			</view>
		</view>
		<view class="sub_btn_box flexC">
			<view class="sub_btn" @click="submit">立即提交</view>
		</view>


	</view>
</template>

<script>
	import {
		getSku,
		setStock
	} from '../../apis/shop.js'
	export default {
		data() {
			return {
				goodsList: []
			}
		},
		onShow() {
			this.getlist()
		},
		filters: {
			man(data) {
				let num = 0;
				if (data) {
					data.map(i => {
						if (i.type == '男款') {
							num += i.num
						}
					})
				}
				return num;
			},
			female(data) {
				let num = 0;
				if (data) {
					data.map(i => {
						if (i.type == '女款') {
							num += i.num
						}
					})
				}
				return num;
			}
		},
		methods: {
			//展开关闭列表
			cur(idx) {
				this.goodsList[idx].toggle = !this.goodsList[idx].toggle
			},
			//添加数量
			add(goodsIdx, skuIdx) {
				this.goodsList[goodsIdx].sku[skuIdx].num++;
			},
			//获取添加的数量
			getVal(e, goodsIdx, skuIdx) {
				this.goodsList[goodsIdx].sku[skuIdx].num = Number(e.detail.value);
			},
			//减少数量
			minus(goodsIdx, skuIdx, num) {
				if (num == 0) {
					uni.showToast({
						title: '没有啦~',
						icon: 'none'
					})
					return false;
				}
				this.goodsList[goodsIdx].sku[skuIdx].num--;
			},
			getlist() {
				getSku().then(res => {
					if (res.code == 200) {
						let list = res.data;
						list.map((i, idx) => {
							this.$set(i, 'sku', [])
							if (idx == 0) {
								this.$set(i, 'toggle', true)
							} else {
								this.$set(i, 'toggle', false)
							}
							let size = i.size;
							for (let k in size) {
								size[k].map(j => {
									i.sku.push(j)
								})
							}
						})
						this.goodsList = list;
					}
				})
			},
			//立即提交
			submit() {
				let list = this.goodsList;
				let data = [];
				let k = 0;
				list.map(i => {
					let sku = i.sku;
					for (let j in sku) {
						if (sku[j].num > 0) {
							data[k] = [sku[j].id, sku[j].num]
							k++;
						}
					}
				})
				setStock({
					data
				}).then(res => {
					if (res.code == 200) {
						uni.showModal({
							content: '设置成功',
							showCancel: false,
							success: res => {
								uni.navigateBack({})
							}
						})
					} else {
						uni.showModal({
							content: res.data || '设置失败',
							showCancel: false
						})
					}
				})
			},
		}
	}
</script>
<style>
	page {
		width: 100%;
		min-height: 100%;
		background: #F9F9FB;
	}
</style>
<style lang="scss">
	.stock {
		position: relative;
		padding-bottom: 140rpx;
	}

	.goods_box {
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		background: #fff;

		.goods_con {
			.store_icon {
				font-size: 40rpx;
				color: #333;
			}

			.goods_img {
				width: 180rpx;
				height: 144rpx;
				border-radius: 16rpx;
				flex-shrink: 0;
				margin-right: 20rpx;
			}
		}

		.goods_detail {

			.title,
			.stock_opear {

				text,
				>view {
					width: 20%;
					text-align: center;
					font-size: 30rpx;
				}

				.pedometer {
					width: 40%;
					text-align: center;

					.symbol_icon {
						width: 60rpx;
						height: 60rpx;
					}

					input {
						width: 130rpx;
					}
				}
			}

			.title {
				padding: 20rpx 0;
				border-bottom: 2rpx solid #eee;

				text {
					color: #999;
				}
			}

			.stock_opear {
				height: 104rpx;
				border-bottom: 2rpx solid #eee;

				>view {
					font-weight: bold;
				}
			}

			.stock_opear:last-child {
				border-bottom: none;
			}
		}

		.dataAll {
			width: 100%;
			margin-top: 15rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-top: 2rpx solid #eee;
			padding-top: 15rpx;

			.sex {
				color: #333333;
				font-size: 28rpx;
			}

			.num {
				color: #999999;
				font-size: 28rpx;

				.spec {
					color: $base-color;
					font-size: 40rpx;
					font-weight: bolder;
				}
			}
		}
	}

	.sub_btn_box {
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fff;
		z-index: 9999;

		.sub_btn {
			width: 690rpx;
		}
	}
</style>