feat: 商品详情交互调整

pages/goods/components/GoodConfirm/index.vue

@@ -0,0 +1,151 @@
+<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>