490 lines
12 KiB
Vue
490 lines
12 KiB
Vue
<template>
|
|
<view class='content'>
|
|
<view class='swiper-container'>
|
|
<swiper class='swiper' :interval='1500' :duration='1000' @change='swiperChange'>
|
|
<swiper-item v-for='(item,index) in [goodsBean?.images]' :key='index'>
|
|
<image :src='item||defaultImage' mode='aspectFill' />
|
|
</swiper-item>
|
|
</swiper>
|
|
<view class='indicator' style='display: none'>
|
|
<text>{{ swiperIndex + 1 }}</text>
|
|
<text>/{{ bannerList.length }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class='goods-info-view c-flex-column' style='margin-right: 10rpx'>
|
|
<view class='c-flex-row'>
|
|
<text class='goods-price accent-text-color'>
|
|
¥{{ ((goodsBean?.price || 0) * userInfo.userDiscount).toFixed(2) }}
|
|
<text v-if='userInfo.userDiscount>0&&userInfo.userDiscount<1'
|
|
style='display:unset;text-decoration: line-through;font-size: 30rpx;color: #999999'>
|
|
¥{{ goodsBean?.price || 0 }}
|
|
</text>
|
|
</text>
|
|
<text>销量{{ goodsBean?.salesCount || 0 }}</text>
|
|
</view>
|
|
|
|
<view class='c-flex-row'>
|
|
<text style='flex: 1'>{{ goodsBean?.name || '未知' }}</text>
|
|
<view class='share-button'>
|
|
<image :src='assetsUrl("ic_share.png")'></image>
|
|
<button class='btn' plain open-type='share'>分享</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class='goods-sku-view c-flex-column'>
|
|
<view class='c-flex-row' @click.stop='showSkuDialog'>
|
|
<text>选择</text>
|
|
<text>规格 颜色/尺码</text>
|
|
<image :src='assetsUrl("ic_arrow_right_gray.png")' />
|
|
<text>共{{ getStockColorCount }}种颜色可选</text>
|
|
</view>
|
|
<view class='divider' style='width:auto;height: 0.5rpx;margin-left: 100rpx;display: none' />
|
|
<view class='c-flex-row' style='display: none' @click.stop='showSkuDialog'>
|
|
<text>参数</text>
|
|
<text>品牌 风格 季节 款号</text>
|
|
<image :src='assetsUrl("ic_arrow_right_gray.png")' />
|
|
</view>
|
|
</view>
|
|
|
|
<view class='recommend-view c-flex-column' v-if='(recommendList?.length||0)>0'>
|
|
<text>浏览此商品的客户还浏览了</text>
|
|
<scroll-view scroll-x>
|
|
<view style='display: inline-block' v-for='(item, index) in recommendList'
|
|
:key='index'>
|
|
<view class='recommend-item c-flex-column'>
|
|
<image :src='item.images||defaultImage' />
|
|
<text>{{ item.goodsName || '未知' }}</text>
|
|
<text class='goods-price'>{{ (item.price * userInfo.userDiscount).toFixed(2) }}
|
|
<text v-if='userInfo.userDiscount>0&&userInfo.userDiscount<1'
|
|
style='text-decoration: line-through;font-size: 25rpx;color: #999999'>{{ item.price }}
|
|
</text>
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view class='goods-detail c-flex-column' style='display: none'>
|
|
<text>商品详情</text>
|
|
<image :src='assetsUrl("test_bg.png")' mode='aspectFill' />
|
|
<image :src='assetsUrl("test_bg.png")' mode='aspectFill' />
|
|
<image :src='assetsUrl("test_bg.png")' mode='aspectFill' />
|
|
</view>
|
|
|
|
<view class='bottom-view c-flex-row'>
|
|
<view class='small-button-view' @click.stop='goBack'>
|
|
<view class='small-button-item'>
|
|
<image :src='assetsUrl("ic_goods_store.png")' />
|
|
<text>商家</text>
|
|
</view>
|
|
|
|
<view class='small-button-item' @click.stop='goPath("/pages/mine/subs/order/index")'>
|
|
<image :src='assetsUrl("ic_goods_order.png")' />
|
|
<text>订单</text>
|
|
</view>
|
|
|
|
<view class='small-button-item'>
|
|
<view class='shoppingcart-count' @click.stop='goPath("/pages/mall/subs/shoppingcart/index")'>
|
|
<image :src='assetsUrl("ic_goods_shoppingcart.png")' />
|
|
<text v-if='totalCount>0'>{{ totalCount }}</text>
|
|
</view>
|
|
<text>购物车</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class='primary-button-view c-flex-row'>
|
|
<view class='add-shoppingcart-button' @click.stop='addShoppingCart'>加入购物车</view>
|
|
<view class='place-order-button' @click.stop='placeOrder'>立即下单</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<sku-dialog ref='skuDialogRef' :bean='goodsBean' />
|
|
</template>
|
|
|
|
<script lang='ts' setup>
|
|
import { assetsUrl, defaultImage } from '@/utils/assets';
|
|
import SkuDialog from '@/components/sku-dialog.vue';
|
|
import { goPath, showToast } from '@/utils';
|
|
import { getGoodsDetail, getGoodsList } from '@/api/goods';
|
|
import { GoodsBean } from '@/api/goods/types';
|
|
import useShoppingCartStore from '@/store/modules/shoppingcart';
|
|
import { useUserStore } from '@/store';
|
|
|
|
const shoppingCartStore = useShoppingCartStore();
|
|
const { totalCount } = storeToRefs(shoppingCartStore);
|
|
|
|
const userStore = useUserStore();
|
|
const { userInfo } = storeToRefs(userStore);
|
|
|
|
const goodsBean = ref<GoodsBean>();
|
|
const recommendList = ref<GoodsBean[]>();
|
|
|
|
const skuDialogRef = ref();
|
|
|
|
const bannerList = ref([]);
|
|
const swiperIndex = ref(0);
|
|
|
|
onLoad(async (e: any) => {
|
|
await uni.showLoading();
|
|
goodsBean.value = await getGoodsDetail(e.goodsId);
|
|
goodsBean.value.price = userStore.getRealGoodsPrice(goodsBean.value?.price, goodsBean.value?.priceExt);
|
|
const { rows } = await getGoodsList({
|
|
page: {
|
|
page: 1,
|
|
pageSize: 20,
|
|
bean: {
|
|
keyword: '',
|
|
typeIds: []
|
|
}
|
|
}
|
|
});
|
|
recommendList.value = rows;
|
|
recommendList.value?.forEach(e => {
|
|
e.price = userStore.getRealGoodsPrice(e.price, e.priceExt);
|
|
});
|
|
uni.hideLoading();
|
|
});
|
|
|
|
onShareAppMessage((e) => {
|
|
return {
|
|
title: goodsBean.value?.name || 'VIP顾客中心',
|
|
path: `/pages/common/groupbuy/detail?id=${goodsBean.value?.id}&companyId=${getApp().globalData?.companyId}&storeId=${getApp().globalData?.storeId}`
|
|
};
|
|
});
|
|
|
|
const getStockColorCount = computed(() => {
|
|
const list = Array.from(new Set(goodsBean.value?.stocks?.map(item => item.colorName)))
|
|
.map(colorName => goodsBean.value?.stocks?.find(item => item.colorName === colorName)!);
|
|
return list.length;
|
|
});
|
|
|
|
const swiperChange = (e: any) => {
|
|
swiperIndex.value = e.detail.current;
|
|
};
|
|
|
|
const goBack = () => {
|
|
uni.navigateBack();
|
|
};
|
|
|
|
const showSkuDialog = (fn: Function) => {
|
|
skuDialogRef.value.show(goodsBean.value?.id, fn);
|
|
};
|
|
|
|
const addShoppingCart = () => {
|
|
showSkuDialog((e: GoodsBean) => {
|
|
const index = shoppingCartStore.getSameGoodsIndex(goodsBean.value?.id || '', e.checkedStock?.colorId, e.checkedStock?.sizeId);
|
|
if(index >= 0) {
|
|
shoppingCartStore.updateCount(index, e.checkedStock?.count);
|
|
} else {
|
|
shoppingCartStore.save(e);
|
|
}
|
|
showToast('加入购物车成功');
|
|
});
|
|
};
|
|
|
|
const placeOrder = () => {
|
|
showSkuDialog((e: GoodsBean) => {
|
|
const orderBean = {
|
|
totalPrice: (e.consumePrice * e.checkedStock.count).toFixed(2),
|
|
orderGoods: [e]
|
|
};
|
|
goPath(`/pages/mall/subs/order/order-confirm?orderBean=${encodeURIComponent(JSON.stringify(orderBean))}`);
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
.content {
|
|
padding-bottom: 200rpx;
|
|
}
|
|
|
|
.swiper-container {
|
|
position: relative;
|
|
|
|
.swiper {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 750rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 750rpx;
|
|
}
|
|
}
|
|
|
|
.indicator {
|
|
background: rgba(1, 1, 1, 0.5);
|
|
border-radius: 45rpx;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
position: absolute;
|
|
right: 20rpx;
|
|
bottom: 20rpx;
|
|
padding: 5rpx 25rpx;
|
|
|
|
text:nth-of-type(1) {
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
text:nth-of-type(2) {
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.goods-info-view {
|
|
background: #FFFFFF;
|
|
padding: 20rpx 30rpx;
|
|
|
|
view:nth-of-type(1) {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
text:nth-of-type(1) {
|
|
display: flex;
|
|
font-size: 40rpx;
|
|
text-align: center;
|
|
align-items: flex-end;
|
|
flex: 1;
|
|
}
|
|
|
|
.goods-price:before {
|
|
//content: "¥";
|
|
//font-size: 30rpx;
|
|
//margin-bottom: 5rpx;
|
|
//margin-right: 5rpx;
|
|
}
|
|
|
|
text:nth-of-type(2) {
|
|
font-size: 26rpx;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
view:nth-of-type(2) {
|
|
text {
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.share-button {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
image {
|
|
width: 36rpx;
|
|
height: 32rpx;
|
|
}
|
|
|
|
.btn {
|
|
background: #00000000;
|
|
font-size: 24rpx;
|
|
color: #636566;
|
|
white-space: nowrap;
|
|
padding: 0;
|
|
border: none !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.goods-sku-view {
|
|
background: #FFFFFF;
|
|
padding: 20rpx 30rpx;
|
|
margin-top: 20rpx;
|
|
|
|
view:nth-of-type(n+1) {
|
|
position: relative;
|
|
align-items: center;
|
|
height: 85rpx;
|
|
|
|
text:nth-of-type(1) {
|
|
width: 100rpx;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
text:nth-of-type(2) {
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
flex: 1;
|
|
}
|
|
|
|
image {
|
|
width: 13rpx;
|
|
height: 24rpx;
|
|
}
|
|
|
|
text:nth-of-type(3) {
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
position: absolute;
|
|
top: 50rpx;
|
|
left: 100rpx;
|
|
}
|
|
}
|
|
|
|
view:nth-of-type(1) {
|
|
align-items: flex-start;
|
|
//padding-top: 20rpx;
|
|
}
|
|
}
|
|
|
|
.recommend-view {
|
|
background: #FFFFFF;
|
|
padding: 20rpx 30rpx;
|
|
margin-top: 20rpx;
|
|
|
|
text {
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
scroll-view {
|
|
width: 100%;
|
|
margin-top: 20rpx;
|
|
white-space: nowrap;
|
|
height: 300rpx;
|
|
}
|
|
|
|
.recommend-item {
|
|
margin-right: 20rpx;
|
|
|
|
image {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
text:nth-of-type(1) {
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
text:nth-of-type(2) {
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #F32B2B;
|
|
}
|
|
|
|
.goods-price:before {
|
|
content: "¥";
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom-view {
|
|
background: #FFFFFF;
|
|
padding: 20rpx 30rpx 78rpx 33rpx;
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
|
|
.small-button-view {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex: 1;
|
|
justify-content: space-between;
|
|
margin-right: 35rpx;
|
|
|
|
.small-button-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
image {
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
text {
|
|
font-weight: 400;
|
|
font-size: 20rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.shoppingcart-count {
|
|
display: flex;
|
|
position: relative;
|
|
|
|
text {
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
top: -15rpx;
|
|
right: -20rpx;
|
|
min-width: 35rpx;
|
|
min-height: 30rpx;
|
|
background: #F32B2B;
|
|
color: #FFFFFF;
|
|
padding: 2rpx;
|
|
border-radius: 50%;
|
|
border: 2rpx solid #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.primary-button-view {
|
|
font-weight: bold;
|
|
font-size: 30rpx;
|
|
|
|
.add-shoppingcart-button {
|
|
display: flex;
|
|
width: 224rpx;
|
|
height: 80rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #FFE2E2;
|
|
color: #F32B2B;
|
|
border-radius: 40rpx 0 0 40rpx;
|
|
}
|
|
|
|
.place-order-button {
|
|
display: flex;
|
|
width: 198rpx;
|
|
height: 80rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #F32B2B;
|
|
color: #FFFFFF;
|
|
border-radius: 0 40rpx 40rpx 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.goods-detail {
|
|
background: #FFFFFF;
|
|
margin-top: 20rpx;
|
|
|
|
text {
|
|
margin: 20rpx 30rpx;
|
|
font-weight: bold;
|
|
font-size: 30rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
image {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|