cxc/yshop-pro-uniapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

代码提交

Browse Source
This commit is contained in:
黄少君
2023-11-22 18:55:55 +08:00
parent c3e62f8922
commit 68b3f2dcc3
46 changed files with 1021 additions and 763 deletions
Download Patch File Download Diff File Expand all files Collapse all files

703
pages/goodsDetail/goodsDetail.vue
View File

@ -1,52 +1,42 @@
<template>
<layout class="goodsDetail">
<view :style="computedHeightStyle"></view>
<Header
:scroll-top="scrollTop"
ref="headerRef"
:propUp="false"
>
</Header>
<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="aspectFill"
/>
</view>
</swiper-item>
</swiper>
<view class="goodsDetail-info">
<view class="goodsDetail-price-row">
<view
<Header :scroll-top="scrollTop" ref="headerRef" :propUp="false"> </Header>
<view v-if="!showEmpty">
<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="aspectFill" />
</view>
</swiper-item>
</swiper>
<view class="goodsDetail-info">
<view class="goodsDetail-price-row">
<view
class="goodsDetail-price goodsDetail-price-primary"
v-if="storeAttr || storeInfo"
>
¥{{ storeAttr && storeAttr.price || storeInfo && storeInfo.price || '0.00' }}
</view>
<view
>
¥{{
(storeAttr && storeAttr.price) ||
(storeInfo && storeInfo.price) ||
"0.00"
}}
</view>
<view
class="goodsDetail-price goodsDetail-price-original"
v-if="storeAttr && storeInfo"
>
¥{{ storeAttr&&storeAttr.otPrice || storeInfo&&storeInfo.otPrice }}
>
¥{{
(storeAttr && storeAttr.otPrice) ||
(storeInfo && storeInfo.otPrice)
}}
</view>
</view>
</view>
<view class="goodsDetail-storeName">{{ storeInfo.storeName }}</view>
<view class="goodsDetail-info-action">
<view class="goodsDetail-info-action-tag">
<!-- <space>
<view class="goodsDetail-storeName">{{ storeInfo.storeName }}</view>
<view class="goodsDetail-info-action">
<view class="goodsDetail-info-action-tag">
<!-- <space>
<uv-tags
plain
type="primary"
@ -58,227 +48,208 @@
text="满100减10"
></uv-tags>
</space> -->
</view>
<view class="goodsDetail-info-action-desc" v-if="storeInfo.stock">
仅剩{{ storeInfo.stock }}件
</view>
</view>
</view>
<view class="row-context">
<view class="label-row">
<view class="left">
<view class="label">运费：</view>
</view>
<view class="value">
{{
detailData.tempName !== "规定运费"
? detailData.tempName
: storeInfo.postage + "元"
}}
</view>
</view>
<view class="label-row" @click="discountCouponSelect('select')">
<view class="label">
<view class="text"> 促销：{{ detailData.couponSplicing }} </view>
</view>
<view class="value">
领券
<uv-icon name="arrow-right" />
</view>
</view>
<view class="label-row" @click="handleOpenSelect('select')">
<view class="label">
<view class="text">
选择： {{ !storeAttr ? "请选择商品规格" : storeAttr.sku }}
</view>
</view>
<view class="value">
<uv-icon name="arrow-right" />
</view>
</view>
</view>
<view class="card full">
<view
class="goodsDetail-info-action-desc"
v-if="storeInfo.stock"
>
仅剩{{ storeInfo.stock }}件
</view>
</view>
</view>
<view class="row-context">
<view class="label-row">
<view class="left">
<view class="label">运费：</view>
</view>
<view class="value">
{{ detailData.tempName !== '规定运费' ? detailData.tempName : storeInfo.postage + '元' }}
</view>
</view>
<view
class="label-row"
@click="discountCouponSelect('select')"
>
<view class="label">
<view class="text">
促销：{{ detailData.couponSplicing }}
</view>
</view>
<view class="value">
领券
<uv-icon name="arrow-right" />
</view>
</view>
<view
class="label-row"
@click="handleOpenSelect('select')"
>
<view class="label">
<view class="text">
选择： {{ !storeAttr ? '请选择商品规格' : storeAttr.sku }}
</view>
</view>
<view class="value">
<uv-icon name="arrow-right" />
</view>
</view>
</view>
<view class="card full">
<view
class="card-head"
:style="{borderBottom:detailData.replyCount<=0?'none':'1rpx solid #e6e6e6'}"
>
<view class="card-title">商品评价({{ detailData.replyCount }})</view>
<view
:style="{
borderBottom:
detailData.replyCount <= 0 ? 'none' : '1rpx solid #e6e6e6',
}"
>
<view class="card-title"
>商品评价({{ detailData.replyCount }})</view
>
<view
class="card-more"
@click="push({url: '/pages/goodsReply/goodsReply'},{data:{id: detailData.storeInfo.id}})"
><span>
查看更多
</span>
<uv-icon
@click="
push(
{ url: '/pages/goodsReply/goodsReply' },
{ data: { 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">
<detail-reply :data="detailData.reply"></detail-reply>
</view>
</view>
<view
class="card-content"
v-if="detailData.reply"
>
<detail-reply :data="detailData.reply"></detail-reply>
</view>
</view>
<blank size="15"></blank>
<view class="card full">
<view class="card-head">
<view class="card-title">
商品详情
<blank size="15"></blank>
<view class="card full">
<view class="card-head">
<view class="card-title"> 商品详情 </view>
</view>
<view class="goods-detail-content">
<rich-text :nodes="storeInfo.description" bindtap="onOpenLink" />
</view>
</view>
<view class="goods-detail-content">
<rich-text
:nodes="storeInfo.description"
bindtap="onOpenLink"
/>
</view>
</view>
<blank size="15"></blank>
<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
<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 class="coupon-select">
<good-coupon-select
/>
<view class="coupon-select">
<good-coupon-select
ref="selectCouponPanel"
:id="storeInfo.id"
@select="handleSelectCoupon"
/>
/>
</view>
</view>
</view>
<view
<view
class="action-bar"
:class="detailData.storeInfo.isShow === 0 && 'off'"
v-if="detailData"
>
<view class="action-icons">
<view class="action-icons-item">
<view
class="action-icon"
@click="goToService"
>
<img
class="action-icon-img"
src="https://b2c-pro-static-dev.zkthink.com/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 class="off-tip">商品已经下架了啦～要不要瞧瞧别的～</view>
<view class="action-cont">
<view class="action-icons">
<view class="action-icons-item">
<view class="action-icon" @click="goToService">
<img class="action-icon-img" :src="productCustomerIcon" />
<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>
<image
class="action-icon-img"
src="https://b2c-pro-static-dev.zkthink.com/static/images/icon-gouwuche.png"
/>
<text class="action-icon-label">购物车</text>
<image class="action-icon-img" :src="productCartIcon" />
<text class="action-icon-label">购物车</text>
</view>
</view>
<view class="action-icons-item">
<view class="action-icon" @click="handleCollect">
<image
v-if="!storeInfo?.userCollect"
class="action-icon-img"
:src="productCollectIcon"
/>
<image
v-if="storeInfo?.userCollect"
class="action-icon-img"
:src="productAffirmCollectIcon"
/>
<text class="action-icon-label">收藏</text>
</view>
</view>
</view>
</view>
<view class="action-icons-item">
<view
class="action-icon"
@click="handleCollect"
>
<image
v-if="!storeInfo?.userCollect"
class="action-icon-img"
src="https://b2c-pro-static-dev.zkthink.com/static/images/icon-shouceng.png"
/>
<image
v-if="storeInfo?.userCollect"
class="action-icon-img"
src="https://b2c-pro-static-dev.zkthink.com/static/images/icon-shouceng-o.png"
/>
<text class="action-icon-label">收藏</text>
<view class="action-btns">
<uv-button
type="info"
text="加入购物车"
:disabled="detailData.storeInfo.isShow === 0"
plain
@click="handleOpenSelect('cart')"
></uv-button>
<uv-button
type="primary"
text="立即购买"
:disabled="detailData.storeInfo.isShow === 0"
@click="handleOpenSelect('buy')"
></uv-button>
</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>
<ReturnTop :scroll-top="scrollTop" />
</view>
<ReturnTop :scroll-top="scrollTop" />
<GoodEmpty v-else></GoodEmpty>
</layout>
</template>
<script setup>
import {productCustomerIcon, productCollectIcon, productCartIcon, productAffirmCollectIcon} from "@/utils/images";
import { computed, onMounted, ref, unref } from 'vue'
import { collectSingle, getProductDetail, unCollectSingle } from '@/api/product'
import { getCartAdd, getCartCount } from '@/api/cart'
import { onLoad, onPageScroll } from '@dcloudio/uni-app'
import { onLoad, onPageScroll, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { useRouter } from "@/hooks/useRouter";
import { useInterface } from "@/hooks/useInterface";
import Header from '@/components/Header/index.vue'
import Header from "@/components/Header/index.vue";
import GoodCouponSelect from "@/components/good-coupon-select/good-coupon-select.vue";
import UvIcon from "@/uni_modules/uv-icon/components/uv-icon/uv-icon.vue";
import { useScroll } from "@/hooks/useScroll";
import ReturnTop from "@/components/ReturnTop/index.vue"
import GoodEmpty from "@/pages/goodsDetail/components/GoodEmpty.vue";
import { SharePathMap, useShare } from "@/hooks/useShare";
const {push, getParams, pushToTab, goBack} = useRouter();
const {toast} = useInterface()
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 { push, getParams, pushToTab, goBack } = useRouter();
const { toast } = useInterface();
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 selectCouponPanel = ref(false)
const selectCoupon = ref(false)
const headerRef = ref()
const selectAttrPanel = ref(false);
const selectCouponPanel = ref(false);
const selectCoupon = ref(false);
const headerRef = ref();
const showEmpty = ref(false)
const computedHeightStyle = computed(() => {
const style = {width: '100 %', height: 0,background:'#f5f5f5'}
@ -289,137 +260,141 @@ const computedHeightStyle = computed(() => {
onMounted(() => {
})
const {shareAppMessage,shareTimeline,goodsDetailShare} = useShare(SharePathMap.GOODS_DETAIL)
onShareAppMessage(shareAppMessage)
onShareTimeline(shareTimeline)
const handleGetDetail = async (id) => {
try {
const detail = await getProductDetail(id)
uni.hideLoading();
const detail = await getProductDetail(id);
if (detail) {
detailData.value = detail
sliderImageData.value = detail.storeInfo.sliderImage.split(',')
storeInfo.value = detail.storeInfo
const description = storeInfo.value.description
storeInfo.value.description = description.replace(/<img /g, "<img style='width:100%;' ")
let attr = []
detailData.value = detail;
sliderImageData.value = detail.storeInfo.sliderImage.split(",");
storeInfo.value = detail.storeInfo;
const description = storeInfo.value.description;
storeInfo.value.description = description.replace(
/<img /g,
"<img style='width:100%;' "
);
let attr = [];
detail.productAttr.forEach((item, i) => {
attr[i] = item.attrValueArr[0]
})
let selectedAttrStr = attr.join(',')
storeAttr.value = detail.productValue[selectedAttrStr]
goodsDetailShare(detail.storeInfo)
} else {
showEmpty.value = true
}
} catch (error) {
uni.hideLoading();
}
}
};
onLoad((options) => {
uni.showLoading({
title: '加载中'
});
const params = getParams(options)
handleGetDetail(params.id)
handleGetCartCount(params.id)
})
const {scrollTop} = useScroll()
const goToService = () => {
toast({title: '😒敬请期待😒'})
}
toast({ title: "敬请期待" });
};
const goToShopCart = () => {
push({
url: '/pages/shoppingCartJump/shoppingCart'
})
}
url: "/pages/shoppingCartJump/shoppingCart",
});
};
const handleOpenSelect = (action) => {
actionType.value = action
selectAttrPanel.value.open()
}
if (detailData.value.storeInfo.isShow === 1) {
actionType.value = action;
selectAttrPanel.value.open();
}
};
const discountCouponSelect = () => {
selectCouponPanel.value.open()
}
selectCouponPanel.value.open();
};
const handleSelectAttr = (attr) => {
selectAttrPanel.value.close()
storeAttr.value = attr.store
storeNum.value = attr.num
selectAttrPanel.value.close();
storeAttr.value = attr.store;
storeNum.value = attr.num;
switch (actionType.value) {
case 'select':
case "select":
break;
case 'cart':
handleCardAdd()
case "cart":
handleCardAdd();
break;
case 'buy':
handleBuy()
case "buy":
handleBuy();
break;
}
actionType.value = ''
}
actionType.value = "";
};
const handleSelectCoupon = (coupon) => {
selectCoupon.value = coupon
}
selectCoupon.value = coupon;
};
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
new: 0,
});
}
handleGetCartCount();
uni.showToast({
title: "已加入购物车",
duration: 2000,
});
};
const handleBuy = async () => {
uni.showLoading({
title: '加载中'
title: "加载中",
});
let res = await getCartAdd({
cartNum: storeNum.value,
productId: storeAttr.value.productId,
uniqueId: storeAttr.value.unique,
new: 1
})
new: 1,
});
uni.hideLoading();
push({url: '/pages/submitOrder/submitOrder'}, {data: {cartId: res.cartId}})
}
push(
{ url: "/pages/submitOrder/submitOrder" },
{ data: { cartId: res.cartId } }
);
};
const handleCollect = async () => {
const goodInfo = unref(storeInfo)
const isCollect = goodInfo.userCollect
const goodInfo = unref(storeInfo);
const isCollect = goodInfo.userCollect;
const data = {
productId: goodInfo.id,
type: 'collect',
category: 'common'
}
type: "collect",
category: "common",
};
if (isCollect) {
// 取消
await unCollectSingle(data)
await unCollectSingle(data);
} else {
// 收藏
await collectSingle(data)
await collectSingle(data);
}
goodInfo.userCollect = !goodInfo.userCollect
isCollect ? toast({title: '已取消收藏'}) : toast({title: '已收藏'})
}
goodInfo.userCollect = !goodInfo.userCollect;
isCollect ? toast({ title: "已取消收藏" }) : toast({ title: "已收藏" });
};
const handleGetCartCount = async () => {
const count = await getCartCount()
cardCount.value = count.count
}
const count = await getCartCount();
cardCount.value = count.count;
};
</script>
<style lang="scss">
@ -447,7 +422,6 @@ const handleGetCartCount = async () => {
}
}
.goodsDetail {
width: 100%;
@ -458,22 +432,17 @@ const handleGetCartCount = async () => {
margin-bottom: 20rpx;
}
&-price {
&-row {
margin-bottom: 17rpx;
display: flex;
align-items: center;
.goods-price {
}
}
&-primary {
line-height: 50rpx;
font-size: 50rpx;
color: #EE6D46;
color: #ee6d46;
}
&-default {
@ -489,7 +458,6 @@ const handleGetCartCount = async () => {
color: #999999;
text-decoration: line-through;
}
}
&-info {
@ -499,9 +467,6 @@ const handleGetCartCount = async () => {
// align-items: flex-end;
// justify-content: space-between;
&-left {
}
&-action {
display: flex;
justify-content: space-between;
@ -518,8 +483,6 @@ const handleGetCartCount = async () => {
color: #999999;
}
}
}
&-image {
@ -556,150 +519,6 @@ const handleGetCartCount = async () => {
}
}
}
// .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 {
@ -723,7 +542,6 @@ const handleGetCartCount = async () => {
}
.buy-num {
&-info-desc {
color: #999999;
font-size: 24rpx;
@ -753,7 +571,6 @@ const handleGetCartCount = async () => {
.row-context {
margin: 30rpx 0;
.label-row {
@include useFlex(space-between, center);
@include usePadding(30, 20);
@ -781,7 +598,6 @@ const handleGetCartCount = async () => {
}
}
.value {
@include useFlex(flex-end, center);
flex-shrink: 0;
@ -802,5 +618,4 @@ const handleGetCartCount = async () => {
}
}
}
</style>