151 lines
3.6 KiB
Vue
151 lines
3.6 KiB
Vue
<template>
|
|
<uni-popup ref="popup" type="bottom">
|
|
<view class="good-confirm-container">
|
|
<!-- 头部标题栏 -->
|
|
<view class="header">
|
|
<view class="header-title">确认订单</view>
|
|
<view class="close-btn" @click="closePopup">
|
|
<uni-icons type="closeempty" size="20" color="#666"></uni-icons>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 商品信息区域 -->
|
|
<view class="goods-info">
|
|
<view class="goods-image">
|
|
<image
|
|
:src="
|
|
goodsData.commodityPhotoList?.[0]?.photoUrl ||
|
|
'/static/test/mk_img_1.png'
|
|
"
|
|
mode="aspectFill"
|
|
/>
|
|
</view>
|
|
<view class="goods-details">
|
|
<view class="goods-title">{{
|
|
goodsData.commodityName || "商品名称"
|
|
}}</view>
|
|
<view class="goods-price">
|
|
<text class="currency">¥</text>
|
|
<text class="price">{{ goodsData.price || 399 }}</text>
|
|
</view>
|
|
<view class="goods-tag" v-if="goodsData.timeTag">
|
|
{{ goodsData.timeTag }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 数量选择区域 -->
|
|
<view class="quantity-section">
|
|
<view class="quantity-label">购买数量</view>
|
|
<view class="quantity-control">
|
|
<view
|
|
class="quantity-btn"
|
|
:class="{ disabled: quantity <= 1 }"
|
|
@click="decreaseQuantity"
|
|
>
|
|
<uni-icons type="minus" size="16" color="#666"></uni-icons>
|
|
</view>
|
|
<view class="quantity-input">
|
|
<input
|
|
type="number"
|
|
v-model="quantity"
|
|
@input="handleQuantityInput"
|
|
:disabled="false"
|
|
/>
|
|
</view>
|
|
<view class="quantity-btn" @click="increaseQuantity">
|
|
<uni-icons type="plus" size="16" color="#666"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 总价区域 -->
|
|
<view class="total-section">
|
|
<view class="total-label">合计</view>
|
|
<view class="total-price">
|
|
<text class="currency">¥</text>
|
|
<text class="price">{{ totalPrice }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部按钮区域 -->
|
|
<view class="footer">
|
|
<button class="confirm-btn" @click="confirmOrder">确认购买</button>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, defineProps, defineEmits } from "vue";
|
|
|
|
// Props定义
|
|
const props = defineProps({
|
|
goodsData: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
});
|
|
|
|
// Emits定义
|
|
const emits = defineEmits(["confirm", "close"]);
|
|
|
|
// 响应式数据
|
|
const popup = ref(null);
|
|
const quantity = ref(1);
|
|
|
|
// 计算属性
|
|
const totalPrice = computed(() => {
|
|
const price = props.goodsData.price || 399;
|
|
return (price * quantity.value).toFixed(0);
|
|
});
|
|
|
|
// 方法定义
|
|
const showPopup = () => {
|
|
popup.value?.open();
|
|
};
|
|
|
|
const closePopup = () => {
|
|
popup.value?.close();
|
|
emits("close");
|
|
};
|
|
|
|
const increaseQuantity = () => {
|
|
quantity.value++;
|
|
};
|
|
|
|
const decreaseQuantity = () => {
|
|
if (quantity.value > 1) {
|
|
quantity.value--;
|
|
}
|
|
};
|
|
|
|
const handleQuantityInput = (e) => {
|
|
const value = parseInt(e.detail.value);
|
|
if (value && value > 0) {
|
|
quantity.value = value;
|
|
} else {
|
|
quantity.value = 1;
|
|
}
|
|
};
|
|
|
|
const confirmOrder = () => {
|
|
const orderData = {
|
|
goodsData: props.goodsData,
|
|
quantity: quantity.value,
|
|
totalPrice: totalPrice.value,
|
|
};
|
|
emits("confirm", orderData);
|
|
closePopup();
|
|
};
|
|
|
|
// 暴露方法给父组件
|
|
defineExpose({
|
|
showPopup,
|
|
closePopup,
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "./styles/index.scss";
|
|
</style> |