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>
|