<!-- 优惠券详情 --> <template> <s-layout title="优惠券详情"> <view class="bg-white"> <!-- 详情卡片 --> <view class="detail-wrap ss-p-20"> <view class="detail-box"> <view class="tag-box ss-flex ss-col-center ss-row-center"> <image class="tag-image" :src="sheep.$url.static('/static/images/coupon_icon.png')" mode="aspectFit" /> </view> <view class="top ss-flex-col ss-col-center"> <view class="title ss-m-t-50 ss-m-b-20 ss-m-x-20">{{ state.coupon.name }}</view> <view class="subtitle ss-m-b-50"> 满 {{ fen2yuan(state.coupon.usePrice) }} 元, {{ state.coupon.discountType === 1 ? '减 ' + fen2yuan(state.coupon.discountPrice) + ' 元' : '打 ' + state.coupon.discountPercent / 10.0 + ' 折' }} </view> <button class="ss-reset-button ss-m-b-30" :class="state.coupon.canTake || state.coupon.status === 1 ? 'use-btn' // 优惠劵模版(可领取)、优惠劵(可使用) : 'disable-btn' " :disabled="!state.coupon.canTake" @click="getCoupon" > <text v-if="state.id > 0">{{ state.coupon.canTake ? '立即领取' : '已领取' }}</text> <text v-else> {{ state.coupon.status === 1 ? '立即使用' : state.coupon.status === 2 ? '已使用' : '已过期' }} </text> </button> <view class="time ss-m-y-30" v-if="state.coupon.validityType === 2"> 有效期:领取后 {{ state.coupon.fixedEndTerm }} 天内可用 </view> <view class="time ss-m-y-30" v-else> 有效期: {{ sheep.$helper.timeFormat(state.coupon.validStartTime, 'yyyy-mm-dd') }} 至 {{ sheep.$helper.timeFormat(state.coupon.validEndTime, 'yyyy-mm-dd') }} </view> <view class="coupon-line ss-m-t-14"></view> </view> <view class="bottom"> <view class="type ss-flex ss-col-center ss-row-between ss-p-x-30"> <view>优惠券类型</view> <view>{{ state.coupon.discountType === 1 ? '满减券' : '折扣券' }}</view> </view> <!-- TODO 非繁人:可优化,增加优惠劵的描述 --> <uni-collapse> <uni-collapse-item title="优惠券说明" v-if="state.coupon.description"> <view class="content ss-p-b-20"> <text class="des ss-p-l-30">{{ state.coupon.description }}</text> </view> </uni-collapse-item> </uni-collapse> </view> </view> </view> <!-- 适用商品 --> <view class="all-user ss-flex ss-row-center ss-col-center" v-if="state.coupon.productScope === 1" > 全场通用 </view> <su-sticky v-else bgColor="#fff"> <view class="goods-title ss-p-20"> {{ state.coupon.productScope === 2 ? '指定商品可用' : '指定分类可用' }} </view> <su-tabs :scrollable="true" :list="state.tabMaps" @change="onTabsChange" :current="state.currentTab" v-if="state.coupon.productScope === 3" /> </su-sticky> <!-- 指定商品 --> <view v-if="state.coupon.productScope === 2"> <view v-for="(item, index) in state.pagination.list" :key="index"> <s-goods-column class="ss-m-20" size="lg" :data="item" @click="sheep.$router.go('/pages/goods/index', { id: item.id })" :goodsFields="{ title: { show: true }, subtitle: { show: true }, price: { show: true }, original_price: { show: true }, sales: { show: true }, stock: { show: false }, }" /> </view> </view> <!-- 指定分类 --> <view v-if="state.coupon.productScope === 3"> <view v-for="(item, index) in state.pagination.list" :key="index"> <s-goods-column class="ss-m-20" size="lg" :data="item" @click="sheep.$router.go('/pages/goods/index', { id: item.id })" :goodsFields="{ title: { show: true }, subtitle: { show: true }, price: { show: true }, original_price: { show: true }, sales: { show: true }, stock: { show: false }, }" ></s-goods-column> </view> </view> <uni-load-more v-if="state.pagination.total > 0 && state.coupon.productScope === 3" :status="state.loadStatus" :content-text="{ contentdown: '上拉加载更多', }" @tap="loadMore" /> <s-empty v-if="state.coupon.productScope === 3 && state.pagination.total === 0" paddingTop="0" icon="/static/soldout-empty.png" text="暂无商品" /> </view> </s-layout> </template> <script setup> import sheep from '@/sheep'; import { onLoad, onReachBottom } from '@dcloudio/uni-app'; import { reactive } from 'vue'; import _ from 'lodash'; import CouponApi from '@/sheep/api/promotion/coupon'; import { fen2yuan } from '@/sheep/hooks/useGoods'; import SpuApi from '@/sheep/api/product/spu'; import CategoryApi from '@/sheep/api/product/category'; import { resetPagination } from '@/sheep/util'; const state = reactive({ id: 0, // 优惠劵模版编号 templateId couponId: 0, // 用户优惠劵编号 couponId coupon: {}, // 优惠劵信息 pagination: { list: [], total: 0, pageNo: 1, pageSize: 1, }, categoryId: 0, // 选中的商品分类编号 tabMaps: [], // 指定分类时,每个分类构成一个 tab currentTab: 0, // 选中的 tabMaps 下标 loadStatus: '', }); function onTabsChange(e) { resetPagination(state.pagination); state.currentTab = e.index; state.categoryId = e.value; getGoodsListByCategory(); } async function getGoodsListByCategory() { state.loadStatus = 'loading'; const { code, data } = await SpuApi.getSpuPage({ categoryId: state.categoryId, pageNo: state.pagination.pageNo, pageSize: state.pagination.pageSize }); if (code !== 0) { return; } state.pagination.list = _.concat(state.pagination.list, data.list); state.pagination.total = data.total; state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore'; } // 获得商品列表,指定商品范围 async function getGoodsListById() { const { data, code } = await SpuApi.getSpuListByIds(state.coupon.productScopeValues.join(',')); if (code !== 0) { return; } state.pagination.list = data; } // 获得分类列表 async function getCategoryList() { const { data, code } = await CategoryApi.getCategoryListByIds(state.coupon.productScopeValues.join(',')); if (code !== 0) { return; } state.tabMaps = data.map((category) => ({ name: category.name, value: category.id })); // 加载第一个分类的商品列表 if (state.tabMaps.length > 0) { state.categoryId = state.tabMaps[0].value; await getGoodsListByCategory(); } } // 领取优惠劵 async function getCoupon() { const { code } = await CouponApi.takeCoupon(state.id); if (code !== 0) { return; } uni.showToast({ title: '领取成功', }); setTimeout(() => { getCouponContent(); }, 1000); } // 加载优惠劵信息 async function getCouponContent() { const { code, data } = state.id > 0 ? await CouponApi.getCouponTemplate(state.id) : await CouponApi.getCoupon(state.couponId); if (code !== 0) { return; } state.coupon = data; // 不同指定范围,加载不同数据 if (state.coupon.productScope === 2) { await getGoodsListById(); } else if (state.coupon.productScope === 3) { await getCategoryList(); } } // 加载更多 function loadMore() { if (state.loadStatus === 'noMore') { return; } state.pagination.pageNo++; getGoodsListByCategory(); } onLoad((options) => { state.id = options.id; state.couponId = options.couponId; getCouponContent(state.id, state.couponId); }); // 上拉加载更多 onReachBottom(() => { loadMore(); }); </script> <style lang="scss" scoped> .goods-title { font-size: 34rpx; font-weight: bold; color: #333333; } .detail-wrap { background: linear-gradient( 180deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient), var(--ui-BG-Main), #fff ); } .detail-box { // background-color: var(--ui-BG); border-radius: 6rpx; position: relative; margin-top: 100rpx; .tag-box { width: 140rpx; height: 140rpx; background: var(--ui-BG); border-radius: 50%; position: absolute; top: -70rpx; left: 50%; z-index: 6; transform: translateX(-50%); .tag-image { width: 104rpx; height: 104rpx; border-radius: 50%; } } .top { background-color: #fff; border-radius: 20rpx 20rpx 0 0; -webkit-mask: radial-gradient(circle at 16rpx 100%, #0000 16rpx, red 0) -16rpx; padding: 110rpx 0 0 0; position: relative; z-index: 5; .title { font-size: 40rpx; color: #333; font-weight: bold; } .subtitle { font-size: 28rpx; color: #333333; } .use-btn { width: 386rpx; height: 80rpx; line-height: 80rpx; background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient)); border-radius: 40rpx; color: $white; } .disable-btn { width: 386rpx; height: 80rpx; line-height: 80rpx; background: #e5e5e5; border-radius: 40rpx; color: $white; } .time { font-size: 26rpx; font-weight: 400; color: #999999; } .coupon-line { width: 95%; border-bottom: 2rpx solid #eeeeee; } } .bottom { background-color: #fff; border-radius: 0 0 20rpx 20rpx; -webkit-mask: radial-gradient(circle at 16rpx 0%, #0000 16rpx, red 0) -16rpx; padding: 40rpx 30rpx; .type { height: 96rpx; border-bottom: 2rpx solid #eeeeee; } } .des { font-size: 24rpx; font-weight: 400; color: #666666; } } .all-user { width: 100%; height: 300rpx; font-size: 34rpx; font-weight: bold; color: #333333; } </style>