yovinchen/xlcs
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

修正项目

Browse Source
This commit is contained in:
yovinchen
2024-01-07 01:10:08 +08:00
parent 2f29241806
commit b22014e976
943 changed files with 27699 additions and 28227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

336
xlcs-user/pages/homeItem/homeItem.vue Normal file
View File

@@ -0,0 +1,336 @@
<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>