|
@@ -1,17 +1,12 @@
|
|
|
<!-- 商品详情 -->
|
|
|
<template>
|
|
|
- <div class="default-width py-5" v-if="state.goodsInfo && Object.keys(state.goodsInfo).length">
|
|
|
- <div class="d-flex justify-space-between">
|
|
|
- <v-btn class="mb-3" size="large" color="primary" variant="text" @click="goBack"><v-icon size="24" class="mt-1 mr-1">mdi-chevron-triple-left</v-icon>返回商城</v-btn>
|
|
|
- <div v-if="getToken()">
|
|
|
- <v-btn class="mb-3" size="large" color="primary" variant="text" prepend-icon="mdi-account-circle-outline" to="/mall/user/order">我的订单</v-btn>
|
|
|
- <v-btn class="mb-3 ml-1" size="large" color="primary" variant="text" prepend-icon="mdi-cart-outline" to="/mall/cart">购物车</v-btn>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+<div>
|
|
|
+ <Navbar />
|
|
|
+ <div class="default-width pb-5 mt-3" v-if="state.goodsInfo && Object.keys(state.goodsInfo).length">
|
|
|
<v-card class="carousel border-radius-8 white-bgc pa-5" style="width: 100%;">
|
|
|
<div class=" d-flex">
|
|
|
<!-- 图片展示-轮播 -->
|
|
|
- <div style="width: 500px; height: 500px;">
|
|
|
+ <div style="width: 400px; height: 400px;">
|
|
|
<div v-if="selectedSkuPicUrl" class="selectedSkuImgBox" @mouseover="showSelectedSkuImg = true" @mouseleave="showSelectedSkuImg = false">
|
|
|
<v-img :src="selectedSkuPicUrl" :aspect-ratio="1" style="border-radius: 8px;"></v-img>
|
|
|
<v-btn
|
|
@@ -34,9 +29,12 @@
|
|
|
<!-- 小标题 -->
|
|
|
<div class="title-introduction">{{ state.goodsInfo?.introduction || '--' }}</div>
|
|
|
<!-- 价格 -->
|
|
|
- <div class="prices my-5">
|
|
|
- <div class="price mr-5"><span>¥</span>{{ selectedSkuPrice}}</div>
|
|
|
- <div class="marketPrice" v-if="selectedSkuMarketPrice && selectedSkuMarketPrice !== selectedSkuPrice">优惠前¥{{ selectedSkuMarketPrice}}</div>
|
|
|
+ <div class="prices py-4 px-5 my-3" :class="{'activePrices': showActivePrices}">
|
|
|
+ <div class="left">
|
|
|
+ <div class="price mr-5"><span>¥</span>{{ selectedSkuPrice}}</div>
|
|
|
+ <div class="marketPrice" v-if="selectedSkuMarketPrice && selectedSkuMarketPrice !== selectedSkuPrice">优惠前¥{{ selectedSkuMarketPrice}}</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="showActivePrices" class="right">下单即可参与房券抽奖活动,百分百中奖,快来下单参与抽奖吧~</div>
|
|
|
</div>
|
|
|
<!-- 销量 -->
|
|
|
<div class="salesCount mb-5 parameterColor"><span class="l-s-10">已售</span>:{{ state.goodsInfo?.salesCount || 0 }}</div>
|
|
@@ -55,39 +53,44 @@
|
|
|
<!-- 详情描述 detail-content-card -->
|
|
|
<v-card class="carousel border-radius-8 white-bgc pa-5 mt-3" style="width: 100%;">
|
|
|
<div>
|
|
|
- <div class="mb-3">
|
|
|
+ <!-- <div class="mb-3">
|
|
|
<v-tabs v-model="describeTab" align-tabs="start" color="primary" bg-color="#f7f8fa" @update:model-value="null">
|
|
|
<v-tab :value="0">商品介绍</v-tab>
|
|
|
<v-tab :value="1">商品评价</v-tab>
|
|
|
- <v-tab :value="2" v-if="(id-0)=== 648">房券抽奖活动</v-tab>
|
|
|
+ <v-tab :value="2" v-if="showPrize">房券抽奖活动</v-tab>
|
|
|
</v-tabs>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
<describe v-if="describeTab === 0 && state.goodsInfo?.description" :content="state.goodsInfo.description"></describe>
|
|
|
- <commentCard v-if="describeTab === 1 && state.goodsId" class="detail-comment-selector" :goodsId="state.goodsId" />
|
|
|
- <prizeDrawContent v-if="describeTab === 2" />
|
|
|
+ <!-- <commentCard v-if="describeTab === 1 && state.goodsId" class="detail-comment-selector" :goodsId="state.goodsId" />
|
|
|
+ <prizeDrawContent v-if="describeTab === 2 && lotteryId" :lotteryId="lotteryId" /> -->
|
|
|
</div>
|
|
|
</v-card>
|
|
|
</div>
|
|
|
+
|
|
|
<!-- 快速登录 -->
|
|
|
<loginPage v-if="showLogin" @loginSuccess="loginSuccess" @close="loginClose"></loginPage>
|
|
|
+
|
|
|
<!-- 结算 -->
|
|
|
- <CtDialog :visible="showSettlement" titleClass="text-h6" :widthType="3" title="订单信息" @submit="handleSubmit" @close="handleClose">
|
|
|
+ <CtDialog :visible="showSettlement" titleClass="text-h6" :widthType="3" title="订单提交" submitText="提交支付" @submit="handleSubmit" @close="handleClose">
|
|
|
<confirm ref="confirmRef" :data="skuInfo" @orderCreated="orderCreated"></confirm>
|
|
|
</CtDialog>
|
|
|
+
|
|
|
<!-- 支付 -->
|
|
|
<CtDialog :visible="showPay" titleClass="text-h6" :widthType="3" title="收银台" :footer="false" @close="payCancel">
|
|
|
<pay ref="payRef" :id="payOrderId" @paySuccess="paySuccess"></pay>
|
|
|
</CtDialog>
|
|
|
+</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
defineOptions({name: 'goods-details'})
|
|
|
+import Navbar from '@/views/mall/components/navbar.vue'
|
|
|
import { getProductDetail } from '@/api/mall/product'
|
|
|
import { addCart } from '@/api/mall/cart'
|
|
|
import selectSku from './details/s-select-sku.vue'
|
|
|
import describe from './details/describe.vue'
|
|
|
-import commentCard from './details/detail-comment-card.vue'
|
|
|
-import prizeDrawContent from './details/prizeDrawContent.vue'
|
|
|
+// import commentCard from './details/detail-comment-card.vue'
|
|
|
+// import prizeDrawContent from './details/prizeDrawContent.vue'
|
|
|
import confirm from './details/order/confirm.vue'
|
|
|
import { ref, reactive } from 'vue'
|
|
|
import { useRouter } from 'vue-router'
|
|
@@ -95,6 +98,7 @@ import Snackbar from '@/plugins/snackbar'
|
|
|
import { getToken } from '@/utils/auth'
|
|
|
import loginPage from '@/views/common/loginDialog.vue'
|
|
|
import pay from '@/views/mall/components/details/order/pay.vue'
|
|
|
+import { getPrizeByGoodsId } from '@/api/mall/prize'
|
|
|
|
|
|
const router = useRouter()
|
|
|
const { id } = router.currentRoute.value.params
|
|
@@ -106,6 +110,10 @@ const selectedSkuMarketPrice = ref('')
|
|
|
const showSelectSku = ref(false)
|
|
|
const carouselHover = ref(false)
|
|
|
const showSelectedSkuImg = ref(false)
|
|
|
+
|
|
|
+const showPrize = ref(false)
|
|
|
+const showActivePrices = ref(false) // 下单送房券
|
|
|
+const lotteryId = ref('')
|
|
|
// 获取商品详情
|
|
|
const getData = async () => {
|
|
|
const obj = await getProductDetail({ id })
|
|
@@ -116,6 +124,13 @@ const getData = async () => {
|
|
|
state.skeletonLoading = false;
|
|
|
state.goodsInfo = obj
|
|
|
showSelectSku.value = true
|
|
|
+
|
|
|
+ // 查询当前商品是否参与抽奖活动
|
|
|
+ const data = await getPrizeByGoodsId(id)
|
|
|
+ showPrize.value = data && Object.keys(data).length > 0
|
|
|
+ showActivePrices.value = data && Object.keys(data).length > 0
|
|
|
+
|
|
|
+ lotteryId.value = data.id
|
|
|
}
|
|
|
getData()
|
|
|
|
|
@@ -163,9 +178,11 @@ const onBuy = async (e) => {
|
|
|
const payRef = ref()
|
|
|
const showPay = ref(false)
|
|
|
const payOrderId = ref('')
|
|
|
-const orderCreated = (id) => {
|
|
|
+const orderId = ref('')
|
|
|
+const orderCreated = (id, order) => {
|
|
|
showSettlement.value = false
|
|
|
payOrderId.value = id
|
|
|
+ orderId.value = order
|
|
|
showPay.value = true
|
|
|
}
|
|
|
//
|
|
@@ -177,7 +194,7 @@ const payCancel = () => {
|
|
|
const paySuccess = (e) => {
|
|
|
// Snackbar.success('支付成功,请前往我的订单查看!')
|
|
|
// showPay.value = false
|
|
|
- router.push({ path: '/mall/payOver', query: { price: e.price }})
|
|
|
+ router.push({ path: '/mall/payOver', query: { price: e.price, spuId: id, orderId: orderId.value } })
|
|
|
}
|
|
|
|
|
|
// 添加购物车
|
|
@@ -218,12 +235,8 @@ const loginClose = () => {
|
|
|
Snackbar.warning('您已取消登录')
|
|
|
}
|
|
|
|
|
|
-const goBack = () => {
|
|
|
- // router.go(-1)
|
|
|
- router.push('/mall')
|
|
|
-}
|
|
|
-
|
|
|
</script>
|
|
|
+
|
|
|
<style lang="scss" scoped>
|
|
|
.border-radius-8 {
|
|
|
border-radius: 8px;
|
|
@@ -244,11 +257,25 @@ const goBack = () => {
|
|
|
color: #7a7a7a;
|
|
|
}
|
|
|
.prices {
|
|
|
- display: flex;
|
|
|
- align-items: flex-end;
|
|
|
- color: #ff5000;
|
|
|
+ // display: flex;
|
|
|
+ // justify-content: space-between;
|
|
|
font-size: 28px;
|
|
|
- margin: 8px 0;
|
|
|
+ border-radius: 8px;
|
|
|
+ width: 80%;
|
|
|
+ color: #ff5000;
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ font-size: 18px;
|
|
|
+ padding-top: 10px;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+}
|
|
|
+.activePrices {
|
|
|
+ color: #fff;
|
|
|
+ background-color: #fb0037;
|
|
|
}
|
|
|
.price {
|
|
|
font-weight: 600;
|