cashier_app/pageProduct/index/components/edit-price.vue

<template>
	<up-popup :show="popShow" @close="close" @open="open" mode="center" :round="9">
		<view class="u-p-32 box u-font-28">
			<view class="u-flex u-relative u-row-center">
				<view class="u-font-32">修改价格</view>
				<view class="u-absolute close">
					<up-icon @click="close" :size="16" color="#000" name="close-circle-fill"></up-icon>
				</view>
			</view>
			<view class="u-m-t-48">
				<up-form labelPosition="left" :model="data" :rules="rules" ref="refForm">
					<view>商品名称</view>
					<view class="u-m-t-16" v-if="data.type == 'sku'">{{data.name}}</view>
					<view class="u-m-t-38">
						<template v-if="data.type != 'sku'">
							<view class="u-m-b-32">
								<view class="u-flex u-row-between">
									<view>{{data.name}}</view>
									<view class="u-font-24">
										<text>变动金额：</text>
										<text class="number">{{data.lowPrice*1-data._lowPrice*1}}</text>
									</view>
								</view>
								<view class="u-m-t-16">
									<up-input v-model="data.lowPrice" type="number"
										@change="priceFormat(data,'lowPrice',$event)">
										<template #suffix>
											<view>元</view>
										</template>
									</up-input>
								</view>
							</view>
							<view class="u-m-b-32">
								<view class="u-flex u-row-between">
									<view>备注</view>
								</view>
								<view class="u-m-t-16">
									<up-textarea :height="42" v-model="form.note" placeholder="请输入备注"></up-textarea>
								</view>
							</view>
						</template>
						<template v-else>
							<scroll-view scroll-y="true" style="max-height: 50vh;">
								<view class="u-m-b-32" v-for="(item,index) in data.skuList" :key="index">
									<view class="u-flex u-row-between">
										<view>{{item.name}}</view>
										<view class="u-font-24">
											<text>变动金额：</text>
											<text class="number">{{item.lowPrice-item._lowPrice}}</text>
										</view>
									</view>
									<view class="u-m-t-16">
										<up-input @change="priceFormat(item,'lowPrice',$event)" v-model="item.lowPrice"
											type="number">
											<template #suffix>
												<view>元</view>
											</template>
										</up-input>
									</view>
								</view>
								<view class="u-m-b-32">
									<view class="u-flex u-row-between">
										<view>备注</view>
									</view>
									<view class="u-m-t-16">
										<up-textarea :height="42" v-model="form.note" placeholder="请输入备注"></up-textarea>
									</view>
								</view>
							</scroll-view>
						</template>

						<view class="u-m-t-60">
							<my-button type="primary" shape="circle" @tap="save">
								<view class="u-font-32">
									保存
								</view>
							</my-button>
						</view>
					</view>
				</up-form>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import { computed, reactive, ref, watch, onMounted } from 'vue';
	import { returnSkuSnap, returnTypeEnum, returnCategory } from '@/pageProduct/util.js'
	import { formatPrice } from "@/commons/utils/format.js";
	
	const emits = defineEmits(['update:show', 'save'])
	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		},
		category: {
			type: Array,
			default: () => []
		},
		goods: {
			type: Object,
			default: () => {
				return {
					lowPrice: 0,
					skuList: []
				}
	
			}
		}
	})
	let popShow = ref(props.show)
	let data = ref({
		lowPrice: 0,
		skuList: []
	})
	const rules = {
		'lowPrice': [{
				type: 'Number',
				min: 0,
				required: true,
				message: '价格不能小于0',
				trigger: ['blur', 'change']
			},
			{
				validator: (rule, value, callback) => {
					return true
				},
				message: ''
			}
		]
	}
	const refForm = ref(null)
	onMounted(()=>{
		// #ifndef H5
		refForm.value.setRules(rules)
		// #endif
	})
	watch(() => popShow.value, (newval) => {
		emits('update:show', newval)
	})
	
	/**
	 * 金额处理
	 * @param {Object} item
	 * @param {Object} key
	 * @param {Object} val
	 */
	function priceFormat(item, key, val) {
		let min = 0;
		let max = 100000000;
		const returnNewVal = formatPrice(val, min, max, true)
		const newval = typeof returnNewVal !== 'number' ? returnNewVal.value : returnNewVal
		if (typeof returnNewVal !== 'number') {
			uni.showToast({
				title: `请输入${min}到${max}范围内的数字`,
				icon: 'none'
			})
		}
		setTimeout(() => {
			item[key] = newval
		}, 100)
	}
	
	
	const form = reactive({
		note: ''
	})
	watch(() => props.show, (newval) => {
		popShow.value = newval
		if (newval) {
			data.value = {
				...props.goods
			}
			
		}
	})


	function save() {
		refForm.value.validate().then(valid => {
			if (valid) {
				console.log(data)
				emits('save', {
					...data.value,
				})
			} else {
				console.log(err);
			}
		}).catch(() => {
			// 处理验证错误  
		});

	}
	
	function close() {
		popShow.value = false
	}
	
	function open() {
	
	}

</script>

<style lang="scss" scoped>
	.box {
		width: 556rpx;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		box-sizing: border-box;
	}

	.close {
		position: absolute;
		right: 0;
	}

	.number {
		color: #EE4646;
	}
</style>