92 lines
2.4 KiB
Vue
92 lines
2.4 KiB
Vue
<template>
|
||
<view class="goods-container">
|
||
<TopNavBar title="商品详情" />
|
||
|
||
<!-- 滚动区域 -->
|
||
<scroll-view class="content-wrapper" scroll-y>
|
||
<ImageSwiper
|
||
:border-radius="0"
|
||
:height="300"
|
||
:images="goodsData.commodityPhotoList"
|
||
/>
|
||
|
||
<view class="goods-content">
|
||
<!-- 商品信息组件 -->
|
||
<GoodInfo :goodsData="goodsData" />
|
||
|
||
<ModuleTitle title="购买须知" />
|
||
|
||
<zero-markdown-view :markdown="goodsData.commodityTip" :fontSize="14" />
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 立即抢购 -->
|
||
<view class="footer">
|
||
<view class="left">
|
||
<text class="label">价格：</text>
|
||
<text class="price">{{ goodsData.commodityPrice || 399 }}</text>
|
||
</view>
|
||
<view class="buy-button" @click="showConfirmPopup">立即抢购</view>
|
||
</view>
|
||
|
||
<!-- 商品确认弹窗 -->
|
||
<GoodConfirm
|
||
ref="goodConfirmRef"
|
||
:goodsData="goodsData"
|
||
@confirm="handleConfirmOrder"
|
||
@close="handleCloseConfirm"
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from "vue";
|
||
import { onLoad } from "@dcloudio/uni-app";
|
||
import { goodsDetail } from "@/request/api/GoodsApi";
|
||
import TopNavBar from "@/components/TopNavBar/index.vue";
|
||
import ImageSwiper from "@/components/ImageSwiper/index.vue";
|
||
import GoodInfo from "./components/GoodInfo/index.vue";
|
||
import ModuleTitle from "@/components/ModuleTitle/index.vue";
|
||
import GoodConfirm from "./components/GoodConfirm/index.vue";
|
||
|
||
const goodsData = ref({});
|
||
const goodConfirmRef = ref(null);
|
||
|
||
// 获取商品详情数据
|
||
const goodsInfo = async (params) => {
|
||
const res = await goodsDetail(params);
|
||
|
||
goodsData.value = res.data;
|
||
};
|
||
|
||
// 显示确认弹窗
|
||
const showConfirmPopup = () => {
|
||
goodConfirmRef.value?.showPopup();
|
||
};
|
||
|
||
// 处理确认订单
|
||
const handleConfirmOrder = (orderData) => {
|
||
console.log("确认订单:", orderData);
|
||
uni.showToast({
|
||
title: "订单确认成功",
|
||
icon: "success",
|
||
});
|
||
// 这里可以跳转到订单页面或支付页面
|
||
// uni.navigateTo({
|
||
// url: '/pages/order/detail?orderId=' + orderData.orderId
|
||
// });
|
||
};
|
||
|
||
// 处理关闭弹窗
|
||
const handleCloseConfirm = () => {
|
||
console.log("关闭确认弹窗");
|
||
};
|
||
|
||
onLoad(({ commodityId = "1950766939442774018" }) => {
|
||
goodsInfo({ commodityId });
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import "./styles/index.scss";
|
||
</style> |