698 lines
15 KiB
Vue
698 lines
15 KiB
Vue
<template>
|
||
<layout class="goodsDetail">
|
||
<uv-navbar
|
||
fixed
|
||
:safeAreaInsetTop="true"
|
||
autoBack
|
||
title=""
|
||
bg-color="transparent"
|
||
/>
|
||
<view v-if="detailData">
|
||
<swiper
|
||
class="swiper detail"
|
||
circular
|
||
indicator-dots
|
||
autoplay
|
||
>
|
||
<swiper-item
|
||
v-for="(item, index) in sliderImageData"
|
||
:key="index"
|
||
>
|
||
<view class="swiper-item">
|
||
<image
|
||
class="image"
|
||
:src="item"
|
||
mode="widthFix"
|
||
/>
|
||
</view>
|
||
</swiper-item>
|
||
|
||
</swiper>
|
||
<view class="goodsDetail-info">
|
||
<view class="goodsDetail-price-row">
|
||
<view class="goodsDetail-price goodsDetail-price-primary">
|
||
¥{{ storeInfo.price }}
|
||
</view>
|
||
<view
|
||
class="goodsDetail-price goodsDetail-price-original"
|
||
v-if="storeInfo.otPrice"
|
||
>
|
||
¥{{ storeInfo.otPrice }}
|
||
</view>
|
||
</view>
|
||
<view class="goodsDetail-storeName">{{ storeInfo.storeName }}</view>
|
||
<view class="goodsDetail-info-action">
|
||
<view class="goodsDetail-info-action-tag">
|
||
<!-- <space>
|
||
<uv-tags
|
||
plain
|
||
type="primary"
|
||
text="满100减10"
|
||
></uv-tags>
|
||
<uv-tags
|
||
plain
|
||
type="primary"
|
||
text="满100减10"
|
||
></uv-tags>
|
||
</space> -->
|
||
</view>
|
||
<view
|
||
class="goodsDetail-info-action-desc"
|
||
v-if="storeInfo.stock"
|
||
>
|
||
仅剩{{ storeInfo.stock }}件
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<blank size="15"></blank>
|
||
<view class="y-list min">
|
||
<uv-list border>
|
||
<uv-list-item border>
|
||
<view class="y-list-content">
|
||
<view class="y-list-label">运费：</view>
|
||
<view class="y-list-default">{{ detailData.tempName }}</view>
|
||
</view>
|
||
</uv-list-item>
|
||
</uv-list>
|
||
</view>
|
||
|
||
<view class="y-list min">
|
||
<uv-list border>
|
||
<uv-list-item
|
||
border
|
||
clickable
|
||
show-arrow
|
||
@click="handleOpenSelect('select')"
|
||
>
|
||
<view class="y-list-content">
|
||
<view class="y-list-label">选择：</view>
|
||
<view
|
||
class="y-list-select-placeholder"
|
||
v-if="!storeAttr"
|
||
>请选择商品规格</view>
|
||
<view
|
||
class="y-list-select"
|
||
v-if="storeAttr"
|
||
>{{ storeAttr.sku }}</view>
|
||
</view>
|
||
</uv-list-item>
|
||
</uv-list>
|
||
</view>
|
||
|
||
<view class="card full">
|
||
<view class="card-head">
|
||
<view class="card-title">商品评价({{ detailData.replyCount }})</view>
|
||
<view
|
||
class="card-more"
|
||
@tap="$yrouter.navigateTo({
|
||
url: '/pages/goodsReply/goodsReply', query: {
|
||
id: detailData.storeInfo.id
|
||
}
|
||
})"
|
||
><span>
|
||
查看更多
|
||
</span>
|
||
<uv-icon
|
||
name="arrow-right"
|
||
color="rgb(187, 187, 187)"
|
||
size="10"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="card-content"
|
||
v-if="detailData.reply"
|
||
>
|
||
<reply :data="detailData.reply" />
|
||
</view>
|
||
</view>
|
||
|
||
<blank size="15"></blank>
|
||
|
||
|
||
<view class="card full">
|
||
<view class="card-head">
|
||
<view class="card-title">
|
||
商品详情
|
||
</view>
|
||
</view>
|
||
<rich-text
|
||
:nodes="storeInfo.description"
|
||
bindtap="onOpenLink"
|
||
/>
|
||
</view>
|
||
<blank size="15"></blank>
|
||
|
||
<container min>
|
||
<view class="center-title">
|
||
<view class="center-title-line"></view>
|
||
<view class="title">热门推荐</view>
|
||
<view class="center-title-line"></view>
|
||
</view>
|
||
|
||
</container>
|
||
<good-attr-select
|
||
ref="selectAttrPanel"
|
||
:id="storeInfo.id"
|
||
:storeInfo="storeInfo"
|
||
:productAttr="detailData.productAttr"
|
||
:productValue="detailData.productValue"
|
||
@select="handleSelectAttr"
|
||
/>
|
||
|
||
</view>
|
||
|
||
<view
|
||
class="action-bar"
|
||
v-if="detailData"
|
||
>
|
||
<view class="action-icons">
|
||
<view class="action-icons-item">
|
||
<view
|
||
class="action-icon"
|
||
@click="goToShopCart"
|
||
>
|
||
<img
|
||
class="action-icon-img"
|
||
src="@/static/images/icon-kefu.png"
|
||
/>
|
||
<text class="action-icon-label">客服</text>
|
||
</view>
|
||
</view>
|
||
<view class="action-icons-item">
|
||
|
||
<view
|
||
class="action-icon"
|
||
@click="goToShopCart"
|
||
>
|
||
<view class="action-icon-badge">
|
||
<uv-badge
|
||
type="error"
|
||
max="99"
|
||
:value="cardCount"
|
||
></uv-badge>
|
||
</view>
|
||
|
||
<img
|
||
class="action-icon-img"
|
||
src="@/static/images/icon-gouwuche.png"
|
||
/>
|
||
<text class="action-icon-label">购物车</text>
|
||
</view>
|
||
</view>
|
||
<view class="action-icons-item">
|
||
|
||
<view
|
||
class="action-icon"
|
||
@click="handleCollect"
|
||
>
|
||
<img
|
||
v-if="!storeInfo?.userCollect"
|
||
class="action-icon-img"
|
||
src="@/static/images/icon-shouceng.png"
|
||
/>
|
||
<img
|
||
v-if="storeInfo?.userCollect"
|
||
class="action-icon-img"
|
||
src="@/static/images/icon-shouceng-o.png"
|
||
/>
|
||
<text class="action-icon-label">收藏</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="action-btns">
|
||
<uv-button
|
||
type="info"
|
||
text="加入购物车"
|
||
plain
|
||
@click="handleOpenSelect('cart')"
|
||
></uv-button>
|
||
<uv-button
|
||
type="primary"
|
||
text="立即购买"
|
||
@click="handleOpenSelect('buy')"
|
||
></uv-button>
|
||
</view>
|
||
</view>
|
||
|
||
</layout>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { getProductDetail, getProductAddCollect, getProductDelCollect } from '@/api/product'
|
||
import { getCartAdd, getCartCount } from '@/api/cart'
|
||
import { switchTab } from '@/utils/router'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import { useGlobalProperties } from '@/hooks';
|
||
|
||
const { $yrouter } = useGlobalProperties()
|
||
|
||
const detailData = ref(null)
|
||
const sliderImageData = ref([])
|
||
const storeInfo = ref(null)
|
||
const actionType = ref(null)
|
||
const storeAttr = ref(null)
|
||
const storeNum = ref(null)
|
||
const cardCount = ref(null)
|
||
|
||
const selectAttrPanel = ref(false)
|
||
|
||
const handleGetDetail = async (id) => {
|
||
try {
|
||
const detail = await getProductDetail(id)
|
||
uni.hideLoading();
|
||
if (detail) {
|
||
detailData.value = detail
|
||
sliderImageData.value = detail.storeInfo.sliderImage.split(',')
|
||
storeInfo.value = detail.storeInfo
|
||
}
|
||
} catch (error) {
|
||
uni.hideLoading();
|
||
}
|
||
}
|
||
|
||
|
||
onLoad(({ id }) => {
|
||
uni.showLoading({
|
||
title: '加载中'
|
||
});
|
||
handleGetDetail(id)
|
||
handleGetCartCount(id)
|
||
})
|
||
|
||
const goToShopCart = () => {
|
||
switchTab({
|
||
url: '/pages/shoppingCart/shoppingCart',
|
||
})
|
||
}
|
||
|
||
const handleOpenSelect = (action) => {
|
||
actionType.value = action
|
||
selectAttrPanel.value.open()
|
||
}
|
||
|
||
const handleSelectAttr = (attr) => {
|
||
selectAttrPanel.value.close()
|
||
storeAttr.value = attr.store
|
||
storeNum.value = attr.num
|
||
switch (actionType.value) {
|
||
case 'select':
|
||
|
||
break;
|
||
case 'cart':
|
||
handleCardAdd()
|
||
break;
|
||
case 'buy':
|
||
handleBuy()
|
||
break;
|
||
}
|
||
actionType.value = ''
|
||
}
|
||
|
||
|
||
const handleCardAdd = async () => {
|
||
|
||
let res = await getCartAdd({
|
||
cartNum: storeNum.value,
|
||
productId: storeAttr.value.productId,
|
||
uniqueId: storeAttr.value.unique,
|
||
new: 0
|
||
})
|
||
handleGetCartCount()
|
||
uni.showToast({
|
||
title: '已加入购物车',
|
||
duration: 2000
|
||
});
|
||
}
|
||
|
||
const handleBuy = async () => {
|
||
|
||
uni.showLoading({
|
||
title: '加载中'
|
||
});
|
||
|
||
let res = await getCartAdd({
|
||
cartNum: storeNum.value,
|
||
productId: storeAttr.value.productId,
|
||
uniqueId: storeAttr.value.unique,
|
||
new: 1
|
||
})
|
||
|
||
uni.hideLoading();
|
||
|
||
$yrouter.navigateTo({
|
||
url: '/pages/submitOrder/submitOrder',
|
||
query: {
|
||
cartId: res.cartId
|
||
}
|
||
})
|
||
}
|
||
|
||
const handleCollect = async () => {
|
||
storeInfo.value.userCollect = !storeInfo.value.userCollect
|
||
if (storeInfo.value.userCollect) {
|
||
let res = await getProductAddCollect({
|
||
id: storeInfo.value.id,
|
||
})
|
||
uni.showToast({
|
||
title: '已收藏',
|
||
duration: 2000
|
||
});
|
||
if (!res) {
|
||
|
||
storeInfo.value.userCollect = !storeInfo.value.userCollect
|
||
}
|
||
|
||
} else {
|
||
await getProductDelCollect({
|
||
id: storeInfo.value.id,
|
||
})
|
||
uni.showToast({
|
||
title: '取消收藏',
|
||
duration: 2000
|
||
});
|
||
if (!res) {
|
||
storeInfo.value.userCollect = !storeInfo.value.userCollect
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
const handleGetCartCount = async () => {
|
||
const count = await getCartCount()
|
||
console.log("gxs --> % handleGetCartCount % count:\n", count)
|
||
cardCount.value = count.count
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.search {
|
||
padding: 0 17px;
|
||
}
|
||
|
||
.logo {
|
||
width: 63px;
|
||
height: 25px;
|
||
|
||
.image {
|
||
width: 63px;
|
||
height: 25px;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.swiper {
|
||
width: 100%;
|
||
|
||
.image {
|
||
width: 100%;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
|
||
.goodsDetail {
|
||
width: 100%;
|
||
|
||
&-storeName {
|
||
line-height: 40rpx;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
|
||
|
||
&-price {
|
||
|
||
&-row {
|
||
margin-bottom: 17rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.goods-price {}
|
||
}
|
||
|
||
&-primary {
|
||
line-height: 50rpx;
|
||
font-size: 50rpx;
|
||
color: #EE6D46;
|
||
}
|
||
|
||
&-default {
|
||
line-height: 40rpx;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
&-original {
|
||
margin-left: 20rpx;
|
||
line-height: 28rpx;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
}
|
||
|
||
&-info {
|
||
background-color: #fff;
|
||
padding: 30rpx 35rpx;
|
||
// display: flex;
|
||
// align-items: flex-end;
|
||
// justify-content: space-between;
|
||
|
||
&-left {}
|
||
|
||
&-action {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
&-tags {
|
||
.uv-tags {
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
&-desc {
|
||
line-height: 28rpx;
|
||
font-size: 20rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
&-image {
|
||
&-img {}
|
||
}
|
||
|
||
&-list {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
padding: 14rpx;
|
||
|
||
.goods {
|
||
&-thumb {
|
||
margin-bottom: 0;
|
||
width: 220rpx;
|
||
height: 220rpx;
|
||
|
||
&-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
&-content {
|
||
padding-right: 40rpx;
|
||
margin-left: 30rpx;
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
// .goods {
|
||
// padding: 16rpx 14rpx;
|
||
|
||
// &-header {
|
||
// display: flex;
|
||
// align-items: flex-start;
|
||
// }
|
||
|
||
// &-thumb {
|
||
|
||
// width: 220rpx;
|
||
// height: 220rpx;
|
||
|
||
// &-img {
|
||
// width: 100%;
|
||
// height: 100%;
|
||
// display: block;
|
||
// }
|
||
// }
|
||
|
||
// &-content {
|
||
// margin-top: 24rpx;
|
||
// margin-left: 40rpx;
|
||
// flex: 1
|
||
// }
|
||
|
||
// &-storeName {
|
||
// line-height: 40rpx;
|
||
// font-size: 28rpx;
|
||
// font-weight: 500;
|
||
// color: #333333;
|
||
// margin-bottom: 35rpx;
|
||
// }
|
||
|
||
// &-info {
|
||
// display: flex;
|
||
// align-items: center;
|
||
// justify-content: space-between;
|
||
|
||
// &-left {
|
||
// display: flex;
|
||
// align-items: flex-end;
|
||
|
||
// }
|
||
|
||
// &-action {
|
||
// &-btn {}
|
||
|
||
// &-desc {
|
||
// color: #999999;
|
||
// font-size: 24rpx;
|
||
// line-height: 40rpx;
|
||
// }
|
||
// }
|
||
|
||
// }
|
||
|
||
|
||
// &-price {
|
||
// &-default {
|
||
// line-height: 28rpx;
|
||
// font-size: 20rpx;
|
||
// color: #999999;
|
||
|
||
// }
|
||
|
||
// &-primary {
|
||
// line-height: 42rpx;
|
||
// font-size: 30rpx;
|
||
// font-weight: 500;
|
||
// color: #EE6D46;
|
||
// margin-left: 5rpx;
|
||
// }
|
||
// }
|
||
|
||
|
||
|
||
// &-desc {
|
||
// color: #999999;
|
||
// font-size: 24rpx;
|
||
// line-height: 40rpx;
|
||
// }
|
||
|
||
|
||
// &-model {
|
||
// display: inline-flex;
|
||
// align-items: center;
|
||
// width: auto;
|
||
// height: 40rpx;
|
||
// border: 1px solid #CCCCCC;
|
||
// opacity: 1;
|
||
// border-radius: 0rpx;
|
||
// padding: 0 10rpx;
|
||
|
||
// margin-bottom: 28rpx;
|
||
|
||
// &-label {
|
||
// line-height: 38rpx;
|
||
// font-size: 24rpx;
|
||
// color: #999999;
|
||
// }
|
||
|
||
// &-value {
|
||
// line-height: 38rpx;
|
||
// font-size: 24rpx;
|
||
// color: #333333;
|
||
// margin-right: 10rpx;
|
||
// }
|
||
|
||
// &-action {
|
||
// width: 11rpx;
|
||
// height: 7rpx;
|
||
// }
|
||
// }
|
||
|
||
// &-model-info {
|
||
// display: inline-flex;
|
||
// align-items: center;
|
||
// width: auto;
|
||
// height: 40rpx;
|
||
// opacity: 1;
|
||
// border-radius: 0rpx;
|
||
// margin-bottom: 28rpx;
|
||
|
||
// &-label {
|
||
// line-height: 38rpx;
|
||
// font-size: 24rpx;
|
||
// color: #999999;
|
||
// }
|
||
|
||
// &-value {
|
||
// line-height: 38rpx;
|
||
// font-size: 24rpx;
|
||
// color: #333333;
|
||
// margin-right: 10rpx;
|
||
// }
|
||
|
||
// &-action {
|
||
// width: 11rpx;
|
||
// height: 7rpx;
|
||
// }
|
||
// }
|
||
// }
|
||
}
|
||
|
||
.buy-progress {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
&-info {
|
||
flex: 1;
|
||
|
||
&-desc {
|
||
color: #999999;
|
||
font-size: 24rpx;
|
||
line-height: 32rpx;
|
||
}
|
||
}
|
||
|
||
&-action {
|
||
margin-left: 17rpx;
|
||
}
|
||
}
|
||
|
||
.buy-num {
|
||
|
||
&-info-desc {
|
||
color: #999999;
|
||
font-size: 24rpx;
|
||
line-height: 32rpx;
|
||
}
|
||
}
|
||
</style>
|