83 lines
2.1 KiB
Vue
83 lines
2.1 KiB
Vue
<template>
|
|
<view class="goods-container">
|
|
<TopNavBar title="商品详情" :fixed="true" />
|
|
|
|
<view class="content-wrapper">
|
|
<ImageSwiper :border-radius="0" :images="goodsData.commodityPhotoList" />
|
|
|
|
<view class="goods-content">
|
|
<!-- 商品信息组件 -->
|
|
<GoodInfo :goodsData="goodsData" />
|
|
|
|
<ModuleTitle title="购买须知" />
|
|
|
|
<zero-markdown-view :markdown="goodsData.commodityTip" :fontSize="14" />
|
|
|
|
<!-- 立即抢购 -->
|
|
<view class="footer">
|
|
<button class="buy-button" @click="showConfirmPopup">立即抢购</button>
|
|
</view>
|
|
</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> |