337 lines
11 KiB
Vue
337 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<view v-if="!detail.skuInfoVo" class="gg">
|
|||
|
|
<u-empty mode="data"></u-empty>
|
|||
|
|
</view>
|
|||
|
|
<view v-else class="gg">
|
|||
|
|
<u-navbar :border-bottom="false" :is-back="true" class="navbar"></u-navbar>
|
|||
|
|
|
|||
|
|
<scroll-view class="gg-sv" scroll-y>
|
|||
|
|
<view class="gg-content">
|
|||
|
|
<!-- 商品轮播图 -->
|
|||
|
|
<block v-if="swiperList.length > 0">
|
|||
|
|
<u-swiper :height="500" :list="swiperList" indicator-pos="bottomRight" mode="number"></u-swiper>
|
|||
|
|
</block>
|
|||
|
|
|
|||
|
|
<!-- 商品缩略图及属性还有价格购买数量的显示 -->
|
|||
|
|
<view class="u-flex u-type-info-light u-p-20 gg-content-price">
|
|||
|
|
<view class="u-p-r-20">
|
|||
|
|
<ListImgItem
|
|||
|
|
:showBottom="detail.skuInfoVo.skuType === 0 && detail.skuInfoVo.isNewPerson === 1"
|
|||
|
|
:showLeft="detail.skuInfoVo.skuType === 1"
|
|||
|
|
:showRight="false"
|
|||
|
|
:src="detail.skuInfoVo.imgUrl"
|
|||
|
|
height="120rpx"
|
|||
|
|
width="120rpx"
|
|||
|
|
></ListImgItem>
|
|||
|
|
</view>
|
|||
|
|
<!-- 区别秒杀商品与一般商品的价格体系 -->
|
|||
|
|
<!-- 秒杀商品显示 -->
|
|||
|
|
<block v-if="detail.skuInfoVo.skuType === 1">
|
|||
|
|
<view>
|
|||
|
|
<view class="gg-content-price-current u-flex">
|
|||
|
|
<view>秒杀价格：￥{{ detail.seckillSkuVo.seckillSale }}</view>
|
|||
|
|
<view class="u-p-l-20">市场价格：￥{{ detail.skuInfoVo.marketPrice }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="gg-content-price-limit">
|
|||
|
|
<view>
|
|||
|
|
限购：{{ detail.seckillSkuVo.seckillLimit }}件 销售：{{ detail.seckillSkuVo.seckillSale }}件
|
|||
|
|
库存：{{ detail.seckillSkuVo.seckillStock }}件
|
|||
|
|
</view>
|
|||
|
|
<view>
|
|||
|
|
秒杀场次：{{ detail.seckillSkuVo.timeName }} 倒计时：
|
|||
|
|
<u-count-down ref="seckillCountDown" :timestamp="seckillSeconds" @end="seckillEnd"></u-count-down>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</block>
|
|||
|
|
<!-- 普通商品显示 -->
|
|||
|
|
<block v-else>
|
|||
|
|
<view>
|
|||
|
|
<view class="gg-content-price-current u-flex">
|
|||
|
|
<view>当前价格：￥{{ detail.skuInfoVo.price }}</view>
|
|||
|
|
<view class="u-p-l-20">市场价格：￥{{ detail.skuInfoVo.marketPrice }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="gg-content-price-limit">
|
|||
|
|
<view>限购数量：{{ detail.skuInfoVo.perLimit }}件</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</block>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 商品名称 -->
|
|||
|
|
<view class="u-m-20 u-p-20 gg-content-container">
|
|||
|
|
<view class="u-flex">{{ detail.skuInfoVo.skuName }}</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 属性列表 -->
|
|||
|
|
<view v-if="detail.skuInfoVo.skuAttrValueList.length > 0" class="u-m-20 u-p-20 gg-content-container">
|
|||
|
|
<view v-for="skuAttrValueItem in detail.skuInfoVo.skuAttrValueList" :key="skuAttrValueItem.id"
|
|||
|
|
class="u-p-t-5">
|
|||
|
|
{{ skuAttrValueItem.attrName }}：{{ skuAttrValueItem.attrValue }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 活动规则 -->
|
|||
|
|
<view v-if="detail.activityRuleList.length > 0" class="u-m-20 u-p-20 gg-content-container">
|
|||
|
|
<view v-for="activityRuleItem in detail.activityRuleList" :key="activityRuleItem.id" class="u-p-t-5">
|
|||
|
|
{{ activityRuleItem.ruleDesc }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 售后与提货地址 -->
|
|||
|
|
<view class="u-m-20 u-p-20 gg-content-container">
|
|||
|
|
<view class="u-flex">
|
|||
|
|
<view class="u-font-sm u-m-r-20 u-type-info">售后无忧</view>
|
|||
|
|
<view class="u-font-sm u-m-r-20 u-flex-1">
|
|||
|
|
支持保价
|
|||
|
|
<text class="u-type-error">・</text>
|
|||
|
|
极速退款
|
|||
|
|
<text class="u-type-error">・</text>
|
|||
|
|
7天无理由退货
|
|||
|
|
</view>
|
|||
|
|
<u-icon class="u-m-r-20 u-type-info" name="arrow-right" size="24"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="u-flex u-m-t-20">
|
|||
|
|
<view class="u-font-sm u-m-r-20 u-type-info">提货信息</view>
|
|||
|
|
<view class="u-font-sm u-m-r-20 u-flex-1">
|
|||
|
|
<view>
|
|||
|
|
现在下单，
|
|||
|
|
<text class="u-type-error">明天16:00可提货</text>
|
|||
|
|
</view>
|
|||
|
|
<view>提货点：{{ leaderAddressVo.takeName ? leaderAddressVo.takeName : '请设置提货点' }}</view>
|
|||
|
|
</view>
|
|||
|
|
<u-icon class="u-m-r-20 u-type-info" name="arrow-right" size="24"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 商品详情图片清单 -->
|
|||
|
|
<view v-if="skuPosterList.length > 0" class="u-m-20 u-p-20 gg-content-container">
|
|||
|
|
<image v-for="skuPoster in skuPosterList" :key="skuPoster.id" :src="skuPoster.image"></image>
|
|||
|
|
</view>
|
|||
|
|
<u-gap height="30"></u-gap>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
|
|||
|
|
<view class="gg-navigation">
|
|||
|
|
<view class="navigation">
|
|||
|
|
<view class="left">
|
|||
|
|
<view class="item" @click="gotoHome">
|
|||
|
|
<u-icon :color="$u.color['contentColor']" :size="40" name="home-fill"></u-icon>
|
|||
|
|
<view class="text u-line-1">首页</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="item car">
|
|||
|
|
<u-badge v-if="skuId !== 0" :count="getProductSkuNum(skuId)" :offset="[-3, -6]" class="car-num"
|
|||
|
|
type="error"></u-badge>
|
|||
|
|
<u-icon :color="$u.color['contentColor']" :size="40" name="shopping-cart-fill"></u-icon>
|
|||
|
|
<view class="text u-line-1">购物车</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view v-if="detail.couponInfoList.length > 0" class="item car" @click="showCouponInfoList = true">
|
|||
|
|
<u-badge :count="detail.couponInfoList.length" :offset="[-3, -6]" class="car-num" type="error"></u-badge>
|
|||
|
|
<u-icon :color="$u.color['contentColor']" :size="40" name="gift-fill"></u-icon>
|
|||
|
|
<view class="text u-line-1">优惠券</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 即将秒杀与加入购物车的显示 -->
|
|||
|
|
<view v-if="!seckillEnded" class="right u-p-r-10 u-flex">
|
|||
|
|
<!-- 即将开抢 -->
|
|||
|
|
<block v-if="getDetail.seckillSkuVo.timeStaus === 3">
|
|||
|
|
<view class="u-m-r-20 u-line-1 u-flex-1 u-text-center">场次:{{ getDetail.seckillSkuVo.timeName }}</view>
|
|||
|
|
<view class="buy-disabled btn u-line-1">即将开抢</view>
|
|||
|
|
</block>
|
|||
|
|
<!-- 加入购物车 -->
|
|||
|
|
<block v-else>
|
|||
|
|
<view class="u-m-r-20 u-line-1 u-flex-1">
|
|||
|
|
<AddToCart v-if="detail.skuInfoVo.id" :shopDetail="getDetail" :skuId="detail.skuInfoVo.id"></AddToCart>
|
|||
|
|
</view>
|
|||
|
|
<view class="buy btn u-line-1">立即购买</view>
|
|||
|
|
</block>
|
|||
|
|
</view>
|
|||
|
|
<!-- 秒杀结束显示 -->
|
|||
|
|
<view v-else class="right u-p-r-10 u-flex">
|
|||
|
|
<view class="u-m-r-20 u-line-1 u-flex-1"></view>
|
|||
|
|
<view class="buy-disabled btn u-line-1">秒杀结束</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<CouponInfoList :couponInfoList="detail.couponInfoList" :showCouponInfoList.sync="showCouponInfoList"
|
|||
|
|
@getCouponInfo="getCouponInfo"></CouponInfoList>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {mapState, mapGetters} from 'vuex';
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
detail: {},
|
|||
|
|
skuId: 0,
|
|||
|
|
seckillSeconds: 0,
|
|||
|
|
seckillEnded: false,
|
|||
|
|
showCouponInfoList: false
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
...mapState('pickUpLocationModule', ['leaderAddressVo']),
|
|||
|
|
...mapGetters('cartModule', ['getProductSkuNum']),
|
|||
|
|
// 轮播图的获取
|
|||
|
|
swiperList() {
|
|||
|
|
let lst = [];
|
|||
|
|
this.detail &&
|
|||
|
|
this.detail.skuInfoVo &&
|
|||
|
|
this.detail.skuInfoVo.skuImagesList.length > 0 &&
|
|||
|
|
this.detail.skuInfoVo.skuImagesList.forEach(item => {
|
|||
|
|
lst.push({
|
|||
|
|
image: item.imgUrl,
|
|||
|
|
title: item.imgName
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
return lst;
|
|||
|
|
},
|
|||
|
|
// 商品详情海报图片列表
|
|||
|
|
skuPosterList() {
|
|||
|
|
let lst = [];
|
|||
|
|
this.detail &&
|
|||
|
|
this.detail.skuInfoVo &&
|
|||
|
|
this.detail.skuInfoVo.skuPosterList.length > 0 &&
|
|||
|
|
this.detail.skuInfoVo.skuPosterList.forEach(item => {
|
|||
|
|
lst.push({
|
|||
|
|
image: item.imgUrl,
|
|||
|
|
title: item.imgName
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
return lst;
|
|||
|
|
},
|
|||
|
|
getDetail() {
|
|||
|
|
return {...this.detail.skuInfoVo, seckillSkuVo: this.detail.seckillSkuVo};
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
async getHomeItemData(skuId) {
|
|||
|
|
let result = await this.$u.api.getHomeItem({skuId});
|
|||
|
|
this.detail = result;
|
|||
|
|
// skuInfoVo 商品信息
|
|||
|
|
// couponInfoList 优惠券信息
|
|||
|
|
// activityRuleList 活动信息
|
|||
|
|
|
|||
|
|
// 如果是秒杀商品，需要计算倒计时秒数
|
|||
|
|
if (this.detail.skuInfoVo.skuType === 1) {
|
|||
|
|
const now = this.$dayjs();
|
|||
|
|
const endTime = this.$dayjs(this.$dayjs().format('YYYY-MM-DD') + ' ' + this.detail.seckillSkuVo.endTime);
|
|||
|
|
const seconds = endTime.diff(now, 'second');
|
|||
|
|
this.seckillSeconds = seconds;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 切换首页
|
|||
|
|
gotoHome() {
|
|||
|
|
uni.switchTab({
|
|||
|
|
url: '/pages/index/index'
|
|||
|
|
});
|
|||
|
|
return false;
|
|||
|
|
},
|
|||
|
|
// 秒杀倒计时结束
|
|||
|
|
seckillEnd() {
|
|||
|
|
this.seckillEnded = true;
|
|||
|
|
},
|
|||
|
|
// 领取优惠券
|
|||
|
|
async getCouponInfo(id) {
|
|||
|
|
try {
|
|||
|
|
const result = await this.$u.api.getCouponInfo({id});
|
|||
|
|
const pos = this.detail.couponInfoList.findIndex(item => item.id === id);
|
|||
|
|
this.$set(this.detail.couponInfoList[pos], 'couponStatus', 1);
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error(e);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(options) {
|
|||
|
|
let skuId = +options.skuId;
|
|||
|
|
this.skuId = skuId;
|
|||
|
|
this.getHomeItemData(skuId);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.gg {
|
|||
|
|
height: 100%;
|
|||
|
|
|
|||
|
|
&-sv {
|
|||
|
|
height: calc(100vh - 116rpx - 102rpx);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-content {
|
|||
|
|
background-color: $u-bg-color;
|
|||
|
|
|
|||
|
|
&-price {
|
|||
|
|
background: linear-gradient(to right, rgb(255, 180, 61), rgb(255, 101, 0));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-container {
|
|||
|
|
z-index: 9999;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 25rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-navigation {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
.navigation {
|
|||
|
|
display: flex;
|
|||
|
|
border: solid 2rpx #f2f2f2;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
padding: 16rpx 0;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
|
|||
|
|
.left {
|
|||
|
|
display: flex;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
margin: 0 30rpx;
|
|||
|
|
|
|||
|
|
&.car {
|
|||
|
|
text-align: center;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.car-num {
|
|||
|
|
position: absolute;
|
|||
|
|
top: -10rpx;
|
|||
|
|
right: -10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right {
|
|||
|
|
width: 375rpx;
|
|||
|
|
display: flex;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
line-height: 50rpx;
|
|||
|
|
padding: 0 30rpx;
|
|||
|
|
border-radius: 36rpx;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.buy {
|
|||
|
|
background-color: #ff7900;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.buy-disabled {
|
|||
|
|
background-color: $u-type-info;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|