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

<template>
	<view class="content">
		<view class="">
			<u-button icon="plus" text="新增规格" @click="pushFn" 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;">
					<!-- {{formData.attr}} -->
					<!-- <u--input placeholder="请输入规格名称" inputAlign='right' v-model="formData.attr[index].value"></u--input> -->
					<u--input placeholder="请输入规格名称" inputAlign='right' v-model="item.sku"></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"
						type='number'></u--input>
					<view class="" style="flex: 1;text-align: center;">
						/
					</view>
					<u--input @focus="unitIptClick(index,false)"
						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" type='number'></u--input>
					<view class="" style="flex: 1;text-align: center;">
						/
					</view>
					<u--input style=" flex: 2;width:100rpx;background-color: #F6F6F6;" @focus="unitIptClick(index,true)"
						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),formData.attr.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>

		<u-popup :show="showPouple" @close="showPouple=false" @open="showPouple=true" :round="10">
			<view class="RegularFont" style="padding: 42rpx 40rpx">
				<view class="pop-head">
					<text v-if='!showCustom' @click='showPouple=false'>取消</text>
					<text v-else @click='showCustom=false'>
						<u-icon name="arrow-left" size="20"></u-icon>
					</text>
					<text style="font-size:32rpx ;color:#333333 ;">计量单位</text>
					<text v-if='showCustom' @click='addAttr'>确定</text>
					<text v-else></text>
				</view>
				<view style="height: 500rpx;">
					<u-transition :show="!showCustom" mode="slide-right">
						<view class="goods-leval">
							<view class="goods-leval-li" v-for='(item,index) in attrList' :key='index'
								@click='choseAttr(item)'>
								{{item}}
							</view>
							<view class="goods-leval-li " style="display: flex;color:#38BE41 ;"
								@click="showCustom=true">
								<u-icon name="plus" color="#38BE41" style='margin-right: 8rpx;'></u-icon> 自定义
							</view>
						</view>
					</u-transition>
					<u-transition :show="showCustom" mode="slide-left">
						<view class="transition">
							<u--textarea v-model="selfAttr" placeholder="请输入计量单位"></u--textarea>
						</view>
					</u-transition>
				</view>
			</view>
		</u-popup>



	</view>
</template>

<script>
	import {
		formatDate
	} from '../../../libs/uniApi'
	export default {
		data() {
			return {
				selfAttr: "",
				attrList: ['斤',
					"公斤",
					"吨",
					"升",
					"个",
					"台",
					"瓶",
					"桶",
					"箱",
					"袋",
					"包",
					"盒",
					"件",
					"罐"
				],
				showCustom: false, //计量单位自定义
				showPouple: false,
				unitIndex: 0,
				mer_id: "",
				isWholeSale: "",
				isWhose: false,
				text: "",
				value: "",
				formData: {},
				"attrValue": [{
					detail: {
						' ': '',
					},
					"price": "",
					"unit_name": "",
					"wholesale_unit_name": "",
					"wholesale_price": '',
					"cost": "",
					"stock": "",
					sku: '',
					"ot_price": "",
					"procure_price": "",
					"bar_code": "",
					"weight": "",
					"extension_one": "",
					"extension_two": "",
					uuid: "",
					volume: "",
					"is_use": 0,
				}],
				rules: {
					price: '单价不能为空',
					unit_name: '计量单位不能为空',
					wholesale_price: '批发价格不能为空',
					wholesale_unit_name: '批发单位不能为空',
					stock: '库存不能为空'
				}


			}
		},
		methods: {
			choseAttr(name) {
				this.isWhose ?
					this.attrValue[this.unitIndex].wholesale_unit_name = name :
					this.attrValue[this.unitIndex].unit_name = name;
				this.showPouple = false
			},
			addAttr() {
				if (!this.selfAttr) return;
				this.attrList.push(this.selfAttr)
				this.isWhose ?
					this.attrValue[this.unitIndex].wholesale_unit_name = this.attrList[this.attrList.length - 1] :
					this.attrValue[this.unitIndex].unit_name = this.attrList[this.attrList.length - 1];
				// this.attrValue[this.unitIndex].unit_name = this.attrList[this.attrList.length - 1]
				// this.attrValue[this.unitIndex].wholesale_unit_name = this.attrList[this.attrList.length - 1]
				this.selfAttr = ''
				this.showCustom = false
				this.showPouple = false
			},

			unitIptClick(index, type) {
				this.isWhose = type
				console.log(index)
				this.unitIndex = index
				this.showPouple = true

			},
			pushFn() {
				this.attrValue.push({
					detail: {
						' ': '',
					},
					"price": "",
					"unit_name": "",
					"wholesale_unit_name": "",
					"wholesale_price": '',
					"cost": "",
					"stock": "",
					sku: '',
					"ot_price": "",
					"procure_price": "",
					"bar_code": "",
					"weight": "",
					"extension_one": "",
					"extension_two": "",
					uuid: "",
					volume: "",
					"is_use": true,

				})
				// this.formData.attr.push({
				// 	value: '',
				// 	detail: [],
				// })

			},
			submit() {
				// 校验
				let errList = []
				if (!this.isWholeSale) {
					delete this.rules.wholesale_unit_name
					delete this.rules.wholesale_price
				}
				this.attrValue.forEach(item => {
					for (let key in this.rules) {
						if (!item[key]) {
							errList.push(this.rules[key])
						}
					}
				})
				if (errList.length > 0) {
					uni.$u.toast(errList[0])
					return
				}
				let flag = false
				if (this.formData.attr.length > 1) {
					this.formData.attr.forEach(item => {
						if (!item.value) {
							flag = true
						}
					})
				}
				if (flag) {
					uni.$u.toast('请填写规格名称')
					return
				}
				// 校验结束
				this.formData.attr[0].detail = []
				this.attrValue.forEach(item => {
					item.detail[' '] = item.sku
					console.log(this.formData.attr)
					this.formData.attr[0].detail.push(item.sku)
				})
				this.formData.attrValue = this.attrValue
				this.formData.attrValue.forEach(item => {
					item.is_use = item.is_use ? '0' : '1'
				})
				let that = this
				// this.formData.attrValue.forEach((item, index) => {
				// 	item.detail.规格名 = this.formData.attr[index].value
				// 	item.sku = this.formData.attr[index].value

				// })
				this.formData.spec_type = this.formData.attrValue.length > 1 ? '1' : '0'
				uni.redirectTo({
					url: `/pages/product/addGoodDetail/addGoodDetail?mer_id=${that.mer_id}&&formData=${JSON.stringify(that.formData) }&&showSet=${true}`
				})
			},
			initFomrData(option) {
				if (option.mer_id) {
					this.mer_id = option.mer_id
				}
				if (option.formData) {
					this.formData = JSON.parse(option.formData)
				}
			}
		},
		onLoad(option) {
			this.isWholeSale = this.$store.state.app.userInfo?.mer_info?.wholesale == 2;
			this.initFomrData(option)
			this.attrValue = this.formData.attrValue
			this.attrValue.forEach(item => {
				item.is_use = !Boolean(Number(item.is_use))
			})
			if (this.formData.attr.length == 0) {
				this.formData.attr.push({
					value: '',
					detail: [],
				})
			}
			console.log(this.formData)
		}

	}
</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;
		}
	}

	.pop-head {
		display: flex;
		justify-content: space-between;
		color: #20B128;
		margin-bottom: 42rpx;
	}

	.goods-leval {
		display: flex;
		flex-wrap: wrap;
		overflow-y: auto;

		.goods-leval-li {
			margin-right: 20rpx;
			padding: 10rpx 40rpx;
			height: 60rpx;
			margin-bottom: 20rpx;
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			background-color: #F1F1F1;
		}

		.act {
			color: #20B128;
			background-color: #E8F7E9;
			border: 1px solid #20B128;


		}
	}
</style>