shop-applet/pages/product/addGoodDetail/goodsPrice.vue

<template>
	<view class="content">
		<view class="">
			<u-button icon="plus" text="新增规格" @click="attrValue.push({is_use:true}),attr.push({value:'',detail: [],})"
				class="custom-style" iconColor='#38BE41'></u-button>
		</view>
		<view class="card" v-for="(item,index) in attrValue">
			<view class="card-head card-li">
				<text style="font-size: 32rpx;font-family: PingFangFamily;">规格{{index+1}}</text>
				<view class="" style="width: 300rpx;">
					<u--input placeholder="请输入规格名称" inputAlign='right' v-model="attr[index].value"></u--input>
				</view>
			</view>
			<u-line direction="row" style="margin: 30rpx 0;" color="#ECECEC"></u-line>

			<view class="">
				<view class="" style="display: flex;align-items: center;justify-content: space-between;">
					<u--input style="flex: 2; background-color: #F6F6F6;" placeholder="请输入商品单价"
						v-model="item.price"></u--input>
					<view class="" style="flex: 1;text-align: center;">
						/
					</view>
					<u--input style=" flex: 2;width:100rpx;background-color: #F6F6F6;" placeholder="请输入计量单位"
						v-model="item.unit_name"></u--input>
				</view>
				<view class="" v-if='isWholeSale'
					style="display: flex;align-items: center;justify-content: space-between;margin-top: 30rpx;">
					<u--input style="flex: 2; background-color: #F6F6F6;" placeholder="请输批发价格"
						v-model="item.wholesale_price"></u--input>
					<view class="" style="flex: 1;text-align: center;">
						/
					</view>
					<u--input style=" flex: 2;width:100rpx;background-color: #F6F6F6;" placeholder="请输入计量单位"
						v-model="item.wholesale_unit_name"></u--input>
				</view>
			</view>
			<u-line direction="row" style="margin: 25rpx 0;" color="#ECECEC"></u-line>
			<view class=" card-li">
				<text style="font-size: 32rpx;">商品库存</text>
				<view class="" style="width: 300rpx;">
					<u--input type='number' placeholder="请填写库存数量" inputAlign='right' v-model="item.stock"></u--input>
				</view>
			</view>
			<u-line direction="row" style="margin: 25rpx 0;" color="#ECECEC"></u-line>
			<view class=" card-li">
				<text style="font-size: 32rpx;">条形码</text>
				<view class="" style="width: 300rpx;">
					<u--input placeholder="请填写商品条形码" inputAlign='right' v-model="item.bar_code"
						type='number'></u--input>
				</view>
			</view>
			<u-line direction="row" style="margin: 25rpx 0;" color="#ECECEC"></u-line>
			<view class="card-li">
				<view style="display: flex;color: #777777;" @click="attrValue.splice(index,1)">
					<u-icon name="trash" style='margin-right: 8rpx;'></u-icon> 删除
				</view>
				<view class="" style="display: flex;align-items: center;">
					<u-switch v-model="item.is_use" type='primaryy' activeColor="#38BE41" size="19"></u-switch>
					<text style="margin-left: 8rpx;color: #777777;">启用</text>
				</view>
			</view>
		</view>
		<view class="submit-btn">
			<u-button type="primary" shape="circle" text="保存" @click="submit"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mer_id: "",
				isWholeSale: "",
				text: "",
				value: "",
				formData: {},
				attr: [{
					detail: [],
					value: ""
				}, ],
				attrValue: [{
						spec_type: "",

						"price": "",
						"unit_name": "",
						"wholesale_unit_name": "",
						"wholesale_price": '',
						"cost": "",
						"stock": "",
						"ot_price": "",
						"procure_price": "",
						"bar_code": "",
						"weight": "",
						"volume": "",
						"extension_one": "",
						"extension_two": "",
						is_use: true
					},

				],
			}
		},
		methods: {
			submit() {
				this.attrValue.forEach(item => {
					item.is_use ? item.is_use = 0 : item.is_use = 1
				})
				this.formData.attrValue = this.attrValue
				this.formData.attr = this.attr

				let that = this
				uni.navigateTo({
					url: `/pages/product/addGoodDetail/addGoodDetail?mer_id=${that.mer_id}&&formData=${JSON.stringify(that.formData) }&&showSet=${true}`
				})
			}
		},
		onLoad(option) {
			this.isWholeSale = this.$store.state.app.userInfo?.mer_info?.wholesale == 2;
			if (option.formData) {
				this.formData = JSON.parse(option.formData)
				this.attrValue = this.formData.attrValue
				this.attr = this.formData.attr

				this.attrValue.forEach(item => {
					item.is_use = !Boolean(item.is_use)
				})

			}
			if (option.mer_id) {
				this.mer_id = option.mer_id
			}
			console.log(this.mer_id, 'meridd')
		}

	}
</script>

<style lang='scss'>
	.custom-style {
		color: $uni-newTheme-color;
		height: 104rpx;
	}

	.content {
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #F1F1F1;
		min-height: 100vh;
		position: relative;
		font-size: 28rpx;
		font-family: PingFangRegular;
		padding-bottom: 200rpx;
		/* font-family: PingFangFamily; */


		.card {
			margin-top: 30rpx;
			padding: 30rpx 46rpx;
			background-color: white;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
			position: relative;

			.card-li {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

		}


		.card-head::after {
			content: '';
			position: absolute;
			font-size: 32rpx;
			left: 20rpx;
			width: 8rpx;
			height: 32rpx;
			top: 50rpx;
			background-color: #40AE36;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
		}

		.submit-btn {
			position: fixed;
			bottom: 50rpx;
			width: 670rpx;
		}
	}
</style>