purchase-let/components/goodPopup.vue

<template>
	<up-popup :show="show" closeable round="10" @close="close" :safeAreaInsetBottom="false">
		<view class="good-popup">
			<view class="head-title">
				{{ datas.is_bulk ? '称重商品' : '计件商品' }}
			</view>
			<view class="row">
				<view>商品名称</view>
				<view>{{ datas.name || datas.goods_name || datas.store_name }}</view>
			</view>
			<!-- 			<view class="row" v-if="datas.store_info">
				<view>商品规格</view>
				<view>{{ datas.store_info}}</view>
			</view>
			<view class="row">
				<view>商品单位</view>
				<view >{{ datas.unit_name }}
				</view>
			</view>
			<view class="row">
				<view>商品价格</view>
				<view>¥ {{priceKey.off_activity==1? datas[priceKey.price]: datas[priceKey.op_price]  }} /
					{{ datas.unit_name }}
				</view>
			</view> -->
			<view class="u-page__tag-item" v-for="(item, index) in datas.attr_value" :key="index">
				<up-tag :text="item.sku_name" :plain="checkedProduct!=index" type="warning" :name="index"
					@click="radioClick" size="large">
				</up-tag>
			</view>
			<view class="row">
				<view>商品价格</view>
				<view>¥ {{price}}
				</view>
			</view>
			<view class="row" v-if="datas.batch > 0">
				<view>起批量</view>
				<view>{{ datas.batch }}{{ datas.unit_name }}起批 </view>
			</view>

			<view class="row">
				<view>小计</view>
				<view style="color: #F55726;" v-if="+datas.cart_num < +datas.batch">
					{{ `${datas.batch}${datas.unit_name}起批` }}
				</view>
				<view style="color: #F55726;" v-else>¥ {{ subtotal }}</view>
			</view>
			<view v-if="datas.is_bulk" class="row" style="height: 100rpx;">
				<view>购买重量<text style="color: #F55726;">*</text></view>
				<view style="justify-content: end;">
					<up-input type="digit" placeholder="请输入重量" border="surround" v-model="datas.cart_num"
						@change="valChange" style="width: 100rpx;">
						<template #suffix>
							<span>{{ datas.unit_name }}</span>
						</template>
					</up-input>
					<!-- <up-number-box :min="0.1" :step="0.1" v-model="datas.cart_num" @change="valChange"></up-number-box> -->
				</view>
			</view>
			<view v-else class="row" style="height: 100rpx;">
				<view>购买数量<text style="color: #F55726;">*</text></view>
				<view style="justify-content: end;">
					<up-number-box :min="0" v-model="datas.cart_num" @change="valChange"></up-number-box>
				</view>
			</view>
			<view class="row" style="padding-top: 30px;padding-bottom: 30rpx;">
				<view style="width: 30%;margin-right: 30rpx;">
					<up-button @click="close" color="#f7f7f7"><text style="color: #333;">取消</text></up-button>
				</view>
				<view style="flex: 1;">
					<up-button @click="change" color="#20b128">确定</up-button>
				</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import {
		computed,
		nextTick,
		ref,
	} from "vue"

	const foucs1 = ref(null)
	const checkedProduct = ref(0)
	const price = ref(0)
	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		},
		priceKey: {
			type: Object,
			default: () => ({})
		}

	})

	const valChange = (e) => {
		uni.vibrateShort();
	}

	const datas = ref({
		cart_num: ''
	});
	const attr_value = ref({});
	const setData = (e) => {
		datas.value = e;
		attr_value.value = e.attr_value
		if (Number(e.batch) > 0) {
			datas.value.cart_num = e.batch;
		} else {
			datas.value.cart_num = 1;
		}

	}

	const emit = defineEmits(['close', 'change']);
	const close = () => {
		emit('close');
	}
	const radioClick = (key) => {
		checkedProduct.value = key
		price.value = attr_value.value[key].price
	};
	const change = () => {
		if (+datas.value.cart_num < +datas.value.batch) return uni.$u.toast(
			`购买数量不能小于${datas.value.batch}${datas.value.unit_name}`);
		if (subtotal.value <= 0) {
			uni.$u.toast('金额不可小于等于0');
			datas.value.cart_num = '';
			return;
		}
		datas.value.types = true
		emit('change', datas.value, );
	}

	const subtotal = computed(() => {
		let num = +datas.value.cart_num || 1;
		let sell = +datas.value[props.priceKey.off_activity == 1 ? props.priceKey.price : props
			.priceKey
			.op_price];
		if (!sell) {
			sell = datas.value.price
			num = datas.value.cart_num
		}

		return Number(num * sell * 100 / 100).toFixed(2)
	})

	defineExpose({
		setData,
		// founcsFn
	})
</script>

<style scoped lang="scss">
	.good-popup {
		padding: 30rpx;

		.head-title {
			font-weight: bold;
			text-align: center;
			margin-bottom: 20rpx;
		}

		.row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #f6f6f6;
			margin-bottom: 20rpx;

			&:last-child {
				border-bottom: none;
				margin-bottom: 0;
			}

			.content {
				.top {
					display: flex;

					view {
						margin-right: 20rpx;
					}
				}

				.bottom {}
			}

			image {
				width: 40rpx;
				height: 40rpx;
				flex-shrink: 0;
			}
		}
	}

	@keyframes disappear {
		to {
			opacity: 0;
			/* 渐隐 */
			transform: scale(0);
			/* 缩小 */
		}
	}

	.u-page__tag-item {
		display: inline-block;
		margin-right: 10rpx;
	}
</style>