Skip to content

G
groupPurchase-miniapp
Commit 4014633c authored by 彭佳妮（贵阳日报）'s avatar 彭佳妮（贵阳日报）
Browse files
Options

优惠券

parent 242ce5c9
Hide whitespace changes
Inline Side-by-side
Showing with 311 additions and 300 deletions
src/api/ticket.js
View file @ 4014633c
...@@ -25,3 +25,12 @@ export function shopCouponList(data) { ...@@ -25,3 +25,12 @@ export function shopCouponList(data) {
method: 'GET', method: 'GET',
}); });
} }
// 商家商品优惠券
export function receiveCoupon(data) {
return request({
url: `/sgyrdd/coupon/receiveCoupon`,
method: 'POST',
data,
});
}
src/pages/ticket/components/TicketList/index.vue
View file @ 4014633c
<template> <template>
<!-- 优惠券列表 --> <!-- 优惠券列表 -->
<view class="ticket-list" v-if="couponData.length"> <view></view>
<view class="ticket-item">
<view class="ticket-box">
<view class="normal ticket-left">
<view class="ticket-box">
<view class="ticket-price">
<text class="price">￥</text>
<text class="num">20</text>
</view>
<view class="ticket-desc">
<text class="desc">满50元可用</text>
<text class="desc">数量：10</text>
</view>
</view>
</view>
<view class="ticket-right">
<view class="head">
<text class="title">超市优惠券</text>
<view class="headbox">
<text class="time">使用时间：2023.02.4-2023.02.10</text>
<view class="btn">使用</view>
</view>
</view>
<view class="foot">
<view class="line"></view>
<view class="footbox" @click="changeShowDetail()">
<text class="desc">详细信息</text>
<wd-icon
:name="showDetail ? 'chevron-down' : 'chevron-right'"
size="15px"
color="#9d9d9d"
></wd-icon>
</view>
</view>
</view>
</view>
<view class="detail" v-if="showDetail">
<view class="line"></view>
<view class="detail-box">
<view class="rowbox">
<text>使用时间</text>
<text class="desc">2023.02.04-2023.04.20</text>
</view>
<view class="rowbox">
<text>使用条件</text>
<text class="desc">满50元可用</text>
</view>
<view class="rowbox">
<text>使用说明</text>
<text class="desc">
活动期间，使用说明内容使用说明内容 使用说明内容使用说明内容使用说明内 容使用说明内容。
</text>
</view>
</view>
</view>
</view>
<view class="ticket-item">
<view class="ticket-box">
<view class="past ticket-left">
<view class="ticket-box">
<view class="ticket-price">
<text class="price">￥</text>
<text class="num">20</text>
</view>
<view class="ticket-desc">
<text class="desc">满50元可用</text>
<text class="desc">数量：10</text>
</view>
</view>
</view>
<view class="ticket-right">
<image src="@/static/ticket/past-icon.png" class="img"></image>
<view class="head">
<text class="title">超市优惠券</text>
<view class="headbox">
<text class="time">使用时间：2023.02.4-2023.02.10</text>
<!-- <view class="btn">使用</view> -->
</view>
</view>
<view class="foot">
<view class="line"></view>
<view class="footbox">
<text class="desc">详细信息</text>
<wd-icon name="chevron-right" size="15px" color="#9d9d9d"></wd-icon>
</view>
</view>
</view>
</view>
</view>
</view>
<wd-status-tip image="content" tip="暂无优惠券" v-else />
</template> </template>
<script setup> <script setup>
...@@ -105,200 +9,6 @@ const props = defineProps({ ...@@ -105,200 +9,6 @@ const props = defineProps({
type: Array, type: Array,
}, },
}); });
const showDetail = ref(false);
const changeShowDetail = () => {
console.log('showDetail', showDetail.value);
showDetail.value = !showDetail.value;
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped></style>
.ticket-list {
display: flex;
flex-direction: column;
gap: 36rpx;
.ticket-item {
width: 100%;
background-color: #fff;
border-radius: 16rpx;
display: flex;
flex-direction: column;
.ticket-box {
display: flex;
.normal {
background: url('../../static/ticket/ticket-normal.png') no-repeat;
background-size: 100% 100%;
}
.past {
background: url('../../static/ticket/ticket-past.png') no-repeat;
background-size: 100% 100%;
}
.ticket-left {
width: 200rpx;
height: 200rpx;
.ticket-box {
width: 94%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 30rpx;
.ticket-price {
display: flex;
align-items: last baseline;
text {
font-size: 24rpx;
line-height: 24rpx;
font-family: PingFang SC;
color: #fff;
}
.num {
font-size: 52rpx;
}
}
.ticket-desc {
display: flex;
flex-direction: column;
align-items: center;
gap: 24rpx;
.desc {
font-size: 24rpx;
line-height: 24rpx;
font-family: PingFang SC;
color: #fff;
}
}
}
}
.ticket-right {
display: flex;
flex-direction: column;
width: 504rpx;
position: relative;
.img {
width: 126rpx;
height: 94rpx;
position: absolute;
right: 28rpx;
top: 26rpx;
}
.head {
display: flex;
flex-direction: column;
padding: 30rpx 22rpx 26rpx 32rpx;
gap: 4rpx;
.title {
font-family: PingFang SC Heavy-Regular;
font-size: 32rpx;
color: #333333;
line-height: 32rpx;
}
.headbox {
display: flex;
justify-content: space-between;
align-items: end;
height: 50rpx;
.time {
font-family: PingFang SC Heavy-Regular;
font-size: 20rpx;
color: #999999;
line-height: 20rpx;
}
.btn {
padding: 20rpx 10rpx;
box-sizing: border-box;
border-radius: 26rpx;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(90deg, #ff7051 0%, #ff382e 100%);
color: #fff;
font-size: 24rpx;
line-height: 24rpx;
}
}
}
.foot {
display: flex;
flex-direction: column;
padding: 0 22rpx 14rpx 32rpx;
gap: 14rpx;
.line {
border-top: 2rpx solid #f2f2f2;
}
.footbox {
display: flex;
align-items: center;
justify-content: space-between;
.desc {
font-family: PingFang SC Heavy-Regular;
font-size: 20rpx;
color: #999999;
line-height: 20rpx;
}
}
}
}
}
.detail {
display: flex;
flex-direction: column;
padding: 24rpx 0rpx 56rpx 0rpx;
gap: 30rpx;
.line {
border-top: 2rpx solid #e7e7e7;
}
.detail-box {
display: flex;
flex-direction: column;
gap: 40rpx;
padding: 0 40rpx 0 22rpx;
.rowbox {
display: flex;
flex-direction: row;
gap: 48rpx;
text {
font-family: PingFang SC Regular;
font-size: 28rpx;
color: #666666;
line-height: 28rpx;
}
.desc {
width: 476rpx;
}
}
}
}
}
}
</style>
src/pages/ticket/detail.vue
View file @ 4014633c
...@@ -50,17 +50,82 @@ ...@@ -50,17 +50,82 @@
</view> </view>
<!-- 优惠券列表 --> <!-- 优惠券列表 -->
<TicketList :couponData="couponData"></TicketList> <view class="ticket-list" v-if="couponData.length">
<view class="ticket-item" v-for="(item, index) in couponData" :key="index">
<view class="ticket-box">
<view class="normal ticket-left">
<view class="ticket-box">
<view class="ticket-price">
<text class="price">￥</text>
<text class="num">{{ item.discountValue }}</text>
</view>
<view class="ticket-desc">
<text class="desc">满{{ item.thresholdAmount }}元可用</text>
<text class="desc">数量：{{ item.maxNum }}</text>
</view>
</view>
</view>
<view class="ticket-right">
<view class="head">
<text class="title">{{ item.activityName }}</text>
<view class="headbox">
<text class="time">
使用时间：{{ item.startTime.slice(0, 10) }}-{{ item.endTime.slice(0, 10) }}
</text>
<view class="btn" v-if="item.numState === 0" @click="getCoupon(item)">
立即领取
</view>
<view class="btn" v-else @tap="toShop">使用</view>
</view>
</view>
<view class="foot">
<view class="line"></view>
<view class="footbox" @click="handleChangeDetail(index)">
<text class="desc">详细信息</text>
<wd-icon
:name="item.showDetail ? 'chevron-down' : 'chevron-right'"
size="15px"
color="#9d9d9d"
></wd-icon>
</view>
</view>
</view>
</view>
<view class="detail" v-if="item.showDetail">
<view class="line"></view>
<view class="detail-box">
<view class="rowbox">
<text>使用时间</text>
<text class="desc">
{{ item.startTime.slice(0, 10) }}-{{ item.endTime.slice(0, 10) }}
</text>
</view>
<view class="rowbox">
<text>使用条件</text>
<text class="desc">满{{ item.thresholdAmount }}元可用</text>
</view>
<view class="rowbox">
<text>使用说明</text>
<text class="desc">
{{ item.activityNotes }}
</text>
</view>
</view>
</view>
</view>
</view>
<wd-status-tip image="content" tip="暂无优惠券" v-else />
</view> </view>
</view> </view>
</template> </template>
<script setup> <script setup>
import { shopCouponList } from '@/api/ticket'; import { shopCouponList, receiveCoupon } from '@/api/ticket';
import { getShopDetail } from '@/api/order'; import { getShopDetail } from '@/api/order';
import { getDistance } from '@/utils/common'; import { getDistance } from '@/utils/common';
import Header from '@/pages/order/components/Header/index.vue'; import Header from '@/pages/order/components/Header/index.vue';
import TicketList from '@/pages/ticket/components/TicketList/index.vue';
const fileDomain = import.meta.env.VITE_APP_IMG_URL; const fileDomain = import.meta.env.VITE_APP_IMG_URL;
...@@ -69,17 +134,56 @@ onShow(() => { ...@@ -69,17 +134,56 @@ onShow(() => {
getLocationFn(); getLocationFn();
}); });
onLoad(() => {}); const shopId = ref();
onLoad((options) => {
console.log(options);
shopId.value = options.shopId;
getShopMailDetail();
getList();
});
const shopId = ref('1626126617850544129'); /**
const couponData = ref(); * 获取优惠券列表
*/
const couponData = ref([]);
const getList = async () => { const getList = async () => {
const res = await shopCouponList(shopId.value); const res = await shopCouponList(shopId.value);
if (res.code === 0) { if (res.code === 0) {
res.data.forEach((item) => {
item.showDetail = false;
});
couponData.value = res.data; couponData.value = res.data;
} }
}; };
getList();
/**
* 修改优惠券详情显示状态
*/
const handleChangeDetail = (idx) => {
couponData.value[idx].showDetail = !couponData.value[idx].showDetail;
};
/**
* 领取优惠券
* @param {*} item
*/
const getCoupon = async (item) => {
const res = await receiveCoupon([item.couponYzfId]);
if (res.code === 0) {
item.numState = 1;
uni.showToast({
title: '领取成功',
icon: 'success',
duration: 2000,
});
return;
}
uni.showToast({
title: '领取失败',
icon: 'error',
duration: 2000,
});
};
/** /**
* 获取商铺信息 * 获取商铺信息
...@@ -93,7 +197,6 @@ const getShopMailDetail = async () => { ...@@ -93,7 +197,6 @@ const getShopMailDetail = async () => {
shopDetail.value = res.data.shop; shopDetail.value = res.data.shop;
} }
}; };
getShopMailDetail();
/** /**
* 拨打商家电话 * 拨打商家电话
...@@ -305,6 +408,195 @@ page { ...@@ -305,6 +408,195 @@ page {
} }
} }
} }
.ticket-list {
display: flex;
flex-direction: column;
gap: 36rpx;
.ticket-item {
width: 100%;
background-color: #fff;
border-radius: 16rpx;
display: flex;
flex-direction: column;
.ticket-box {
display: flex;
.normal {
background: url('../../static/ticket/ticket-normal.png') no-repeat;
background-size: 100% 100%;
}
.past {
background: url('../../static/ticket/ticket-past.png') no-repeat;
background-size: 100% 100%;
}
.ticket-left {
width: 200rpx;
height: 200rpx;
.ticket-box {
width: 94%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 30rpx;
.ticket-price {
display: flex;
align-items: last baseline;
text {
font-size: 24rpx;
line-height: 24rpx;
font-family: PingFang SC;
color: #fff;
}
.num {
font-size: 52rpx;
}
}
.ticket-desc {
display: flex;
flex-direction: column;
align-items: center;
gap: 24rpx;
.desc {
font-size: 24rpx;
line-height: 24rpx;
font-family: PingFang SC;
color: #fff;
}
}
}
}
.ticket-right {
display: flex;
flex-direction: column;
width: 504rpx;
position: relative;
.img {
width: 126rpx;
height: 94rpx;
position: absolute;
right: 28rpx;
top: 26rpx;
}
.head {
display: flex;
flex-direction: column;
padding: 30rpx 22rpx 26rpx 32rpx;
gap: 4rpx;
.title {
font-family: PingFang SC Heavy-Regular;
font-size: 32rpx;
color: #333333;
line-height: 32rpx;
}
.headbox {
display: flex;
justify-content: space-between;
align-items: end;
height: 50rpx;
.time {
font-family: PingFang SC Heavy-Regular;
font-size: 20rpx;
color: #999999;
line-height: 20rpx;
}
.btn {
width: 110rpx;
height: 50rpx;
box-sizing: border-box;
border-radius: 26rpx;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(90deg, #ff7051 0%, #ff382e 100%);
color: #fff;
font-size: 24rpx;
line-height: 24rpx;
}
}
}
.foot {
display: flex;
flex-direction: column;
padding: 0 22rpx 14rpx 32rpx;
gap: 14rpx;
.line {
border-top: 2rpx solid #f2f2f2;
}
.footbox {
display: flex;
align-items: center;
justify-content: space-between;
.desc {
font-family: PingFang SC Heavy-Regular;
font-size: 20rpx;
color: #999999;
line-height: 20rpx;
}
}
}
}
}
.detail {
display: flex;
flex-direction: column;
padding: 24rpx 0rpx 56rpx 0rpx;
gap: 30rpx;
.line {
border-top: 2rpx solid #e7e7e7;
}
.detail-box {
display: flex;
flex-direction: column;
gap: 40rpx;
padding: 0 40rpx 0 22rpx;
.rowbox {
display: flex;
flex-direction: row;
gap: 48rpx;
text {
font-family: PingFang SC Regular;
font-size: 28rpx;
color: #666666;
line-height: 28rpx;
}
.desc {
width: 476rpx;
}
}
}
}
}
}
} }
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment