shop-applet/pages/product/updateStock/updateStock.vue

<template>
	<view class="content">
		<view class="head">
			<view class="" style="width: 210rpx;height: 210rpx;position: relative;">
				<!-- <u--image :src="short.image" width='210rpx' height='210rpx' duration="450"></u--image> -->
				<image :src="short.image" style="width: 210rpx;height: 210rpx;" mode=""></image>
				<view class="preview" @click="preViewImg(short.image)">
					点击预览
				</view>
			</view>

			<view class="right">
				<view class="">
					<view class="" style="font-size: 32rpx;color: #444444;">
						{{short.store_name}}
					</view>
					<view class="" style="font-size: 24rpx;color: #989898;margin-top: 10rpx;">
						库存： {{attrvalueStock}}
					</view>
				</view>
				<view class="" style="color: #FC452F;font-size: 24rpx;">
					<text style="font-size: 22rpx;">￥</text><text>{{short.attrValue[0].price}}</text><text
						style="color: #828282;">/{{short.attrValue && short.attrValue[0].unit_name}}</text>
				</view>
			</view>
		</view>
		<view class="attr" v-for="(item,index) in short.attrValue" :key="index">
			<view class="attr-tit">
				{{item.sku||'单规格'}}
			</view>
			<u-line color="#CECECE" style="margin: 30rpx 0 28rpx 0"></u-line>
			<view class="" style="display: flex;justify-content: space-between;font-size: 32rpx;align-items: center;">
				<view class="">
					商品库存
				</view>
				<view class="" style="display: flex;align-items: center;color: #FC452F;">
					<u--input type="number" border="surround" color='#FC452F' inputAlign='right' style='padding: 0;'
						:value="item.stock" @input="onInput($event,item)"></u--input>{{item.unit_name}}
				</view>
			</view>
		</view>

		<!-- <view class="table">
			<u-sticky custom-nav-height="0" bgColor="#fff">
				<view class="line th">
					<view class="td img">图片</view>
					<view class="td sku">规格</view>
					<view class="td stock">库存</view>
				</view>
			</u-sticky>
			<view class="line tr" v-for="(item,index) in short.attrValue" :key="index">
				<view class="td img">
					<image :src="item.image||short.image||defualtImg"></image>
				</view>
				<view class="td sku">
					<block v-if="item.sku">
						<view v-for="name in item.sku.split(',')">{{name}}</view>
					</block>
					<view v-else>{{short.store_name}}</view>
				</view>
				<view class="td stock">
					<input type="number" v-model="item.stock" />
				</view>
			</view>
		</view> -->
		<view style="height: 150rpx;"></view>
		<!-- <view class="btn-view">f
			<button class="btn" @click="show=true">确认修改</button>
		</view> -->
		<view class="submit-btn">
			<u-button type="primary" shape="circle" text="确认修改" @click="show=true"></u-button>
		</view>
		<u-modal :show="show" :closeOnClickOverlay="true" title="提示" content="确定更新库存吗" showCancelButton
			@confirm="onUpdate" @cancel="show=false"></u-modal>
	</view>
</template>

<script>
	import {
		getProductDetail,
	} from '@/api/store.js';
	import {
		productDetail,
		productUpdateFree
	} from "@/api/product.js"
	import {
		Toast
	} from '../../../libs/uniApi';
	export default {
		data() {
			return {
				test: '20',
				show: false,
				defualtImg: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/uploads/20230130/00ebcfdf75684f5494c0193075055d1.png',
				mer_id: '',
				type: "",
				short: {
					product_id: ''
				},
				attrvalueStock: 0,
			}
		},
		onLoad(options) {
			this.short.product_id = options.product_id;
			let userInfo = this.$store.state.app.userInfo;
			if (typeof userInfo == 'string') userInfo = JSON.parse(userInfo);
			this.mer_id = userInfo.service.mer_id;
			this.initInfo();
		},
		onShow() {},
		methods: {
			onInput(event, item) {
				if (!/^\d*$/.test(event)) {
					event = event.replace(/[^\d]/g, '');
				}
				item.stock = event;
				this.$forceUpdate();
				// 更新整数值
			},
			preViewImg(url) {
				let that = this
				uni.previewImage({
					urls: [url],
					// longPressActions: {
					// 	itemList: ['发送给朋友', '保存图片', '收藏'],
					// 	success: function(data) {
					// 		console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					// 	},
					// 	fail: function(err) {
					// 		console.log(err.errMsg);
					// 	}
					// }
				});

			},
			initInfo() {
				productDetail(this.mer_id, this.short.product_id).then((res) => {
					this.short = res.data;
					// 总库存
					this.attrvalueStock = res.data.attrValue.reduce((prev, next) => prev + next.stock, 0);
				})
			},
			onUpdate() {
				let obj = {
					"attr": this.short.attr,
					"attrValue": this.short.attrValue,
					"mer_cate_id": this.short.merCateId || [],
					"spec_type": this.short.spec_type,
					"is_stock": 1
				};
				// return console.log({...obj},this.short.product_id);
				productUpdateFree(this.short.product_id, obj).then(res => {
					this.show = false;
					this.$nextTick(() => {
						Toast('更新成功');
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
					})
					// uni.redirectTo({
					// 	url: `/pages/product/list/index?mer_id=${this.mer_id}&type=6`
					// })
					// uni.navigateBack({
					// 	success: () => {
					// 		let stock = 0;
					// 		this.short.attrValue.forEach(item => {
					// 			stock = stock + parseInt(item.stock);
					// 		})
					// 		uni.$emit('updateStock', {
					// 			product_id: this.short.product_id,
					// 			stock: stock
					// 		})
					// 	}
					// })
				}).catch(err => {
					this.show = false;
					this.$util.Tips({
						title: err
					})
				})
			}
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 20rpx 16rpx;
		background-color: #F1F1F1;
		min-height: 100vh;

		.head {
			background-color: #fff;
			display: flex;
			padding: 20rpx;
			border-radius: 16rpx;

			.right {
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

			}
		}

		.attr {
			width: 690rpx;
			margin: 22rpx auto;
			box-sizing: border-box;
			background-color: white;
			padding: 30rpx;
			border-radius: 16rpx;
			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);

			.attr-tit {
				margin-left: 16rpx;
				font-size: 32rpx;
				position: relative;
			}

			.attr-tit::after {
				content: '';
				position: absolute;
				width: 8rpx;
				height: 32rpx;
				background-color: #40AE36;
				border-radius: 4rpx;
				left: -16rpx;
				top: 10rpx;

			}

		}
	}

	.preview {
		width: 210rpx;
		height: 50rpx;
		position: absolute;
		bottom: 0;
		background: rgba(0, 0, 0, 0.2);
		color: white;
		text-align: center;
		font-size: 24rpx;
		line-height: 50rpx;
	}

	.submit-btn {
		position: fixed;
		bottom: 50rpx;
		width: 670rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	// old

	.table {
		background-color: #fff;
		border-top: 1rpx solid rgba(0, 0, 0, 0.1);
		border-left: 1rpx solid rgba(0, 0, 0, 0.1);
		border-right: 1rpx solid rgba(0, 0, 0, 0.1);
		font-size: 28rpx;

		.line {
			display: flex;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);

			.img {
				// width:140rpx;
				width: 200rpx;
			}

			.sku {
				flex: 1;
				border-left: 1rpx solid rgba(0, 0, 0, 0.1);
				border-right: 1rpx solid rgba(0, 0, 0, 0.1);
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.stock {
				width: 200rpx;

				input {
					width: 100%;
					height: 100%;
					text-align: center;
					color: #F84221;
				}
			}
		}

		.th {
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
		}

		.tr {
			min-height: 140rpx;

			.td {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.img {
				image {
					width: 120rpx;
					height: 120rpx;
				}
			}

			.sku {
				padding: 16rpx 16rpx;
			}
		}
	}

	.btn-view {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 130rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: 1rpx solid rgba(0, 0, 0, 0.1);

		.btn {
			background: linear-gradient(180deg, #FF6D20 0%, #F84221 100%);
			// background-color: #FF6D20;
			height: 100rpx;
			line-height: 100rpx;
			width: 694rpx;
			text-align: center;
			border-radius: 100rpx;
			color: #fff;
		}
	}
</style>