Skip to content

G
groupPurchase-miniapp
Commit 010f56da authored by 石建新（贵阳日报）'s avatar 石建新（贵阳日报）
Browse files
Options

优惠券

parent ca947b37
Show whitespace changes
Inline Side-by-side
Showing with 283 additions and 10 deletions
src/pages/packageDetails/packageDetails.vue
View file @ 010f56da
...@@ -3,12 +3,67 @@ ...@@ -3,12 +3,67 @@
<wd-popup <wd-popup
v-model="showpopup" v-model="showpopup"
position="bottom" position="bottom"
custom-style="height: 50%;border-radius: 16rpx 16rpx 0 0 ;" custom-style="height: 50%;border-radius: 16rpx 16rpx 0 0 ;box-sizing:border-box;padding:20rpx;"
@close="handleClose" @close="handleClose"
:safe-area-inset-bottom="true" :safe-area-inset-bottom="true"
custom-class="popup" custom-class="popup"
> >
<view class="popup-content"></view> <view class="title-box">
<text class="title">团购优惠券</text>
<wd-icon
@click="showpopup = false"
color="#D8D8D8"
name="close-bold"
size="30rpx"
></wd-icon>
</view>
<view class="popup-content">
<view class="ticket-item" v-for="(item, index) in productCoupons" :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.endTime }}过期</text>
<view class="btn" @click="getCoupon(item)">立即领取</view>
</view>
</view>
<view class="foot">
<view class="line"></view>
<view class="footbox" @click="showDetailFn(item)">
<text class="desc">优惠券规则</text>
<text class="more">展开</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" style="font-size: 16rpx">
{{ item.activityNotes }}
</view>
</view>
</view>
</view>
</wd-popup> </wd-popup>
<!-- 轮播 --> <!-- 轮播 -->
<view class="swiper"> <view class="swiper">
...@@ -48,7 +103,9 @@ ...@@ -48,7 +103,9 @@
<text class="yh-name">优惠：</text> <text class="yh-name">优惠：</text>
<view class="bt-icon"> <view class="bt-icon">
<image src="@/static/shop/bt-icon.png"></image> <image src="@/static/shop/bt-icon.png"></image>
<text class="yh-name lj">{{ productCoupons[0].activityName }}</text> <text class="yh-name lj">
满{{ productCoupons[0].thresholdAmount }}减{{ productCoupons[0].discountValue }}
</text>
</view> </view>
<view class="ylq-icon" @click="showpopup = true"> <view class="ylq-icon" @click="showpopup = true">
{{ productCoupons[0].numState === 0 ? '未领取' : '已领取' }} {{ productCoupons[0].numState === 0 ? '未领取' : '已领取' }}
...@@ -73,7 +130,7 @@ ...@@ -73,7 +130,7 @@
</view> </view>
<view class="xz"> <view class="xz">
<text class="yh-name">限制：</text> <text class="yh-name">限制：</text>
多多补贴每人限购1张 {{ productCoupons[0].activityNotes }}
</view> </view>
</view> </view>
</view> </view>
...@@ -120,17 +177,17 @@ ...@@ -120,17 +177,17 @@
<wd-icon color="#ABAAAA" name="caret-right-small" size="22px"></wd-icon> <wd-icon color="#ABAAAA" name="caret-right-small" size="22px"></wd-icon>
<view class="step"> <view class="step">
<image class="icon" src="@/static/shop/shop.png"></image> <image class="icon" src="@/static/shop/shop.png"></image>
线上购买 线下门店
</view> </view>
<wd-icon color="#ABAAAA" name="caret-right-small" size="22px"></wd-icon> <wd-icon color="#ABAAAA" name="caret-right-small" size="22px"></wd-icon>
<view class="step"> <view class="step">
<image class="icon" src="@/static/shop/xcx.png"></image> <image class="icon" src="@/static/shop/xcx.png"></image>
线上购买 打开小程序
</view> </view>
<wd-icon color="#ABAAAA" name="caret-right-small" size="22px"></wd-icon> <wd-icon color="#ABAAAA" name="caret-right-small" size="22px"></wd-icon>
<view class="step"> <view class="step">
<image class="icon" src="@/static/shop/scan-code.png"></image> <image class="icon" src="@/static/shop/scan-code.png"></image>
线上购买 核销劵码
</view> </view>
</view> </view>
</view> </view>
...@@ -169,7 +226,6 @@ ...@@ -169,7 +226,6 @@
import { getProdDetail, getCollect, getCouponShopList } from '@/api/packageDetail'; import { getProdDetail, getCollect, getCouponShopList } from '@/api/packageDetail';
import { getStoreInformation } from '@/api/shop'; import { getStoreInformation } from '@/api/shop';
import { useMessage } from '../../../node_modules/wot-design-uni'; import { useMessage } from '../../../node_modules/wot-design-uni';
const message = useMessage();
const prodInfo = ref({}); const prodInfo = ref({});
const prodRlue = ref({}); const prodRlue = ref({});
const myProdId = ref(''); const myProdId = ref('');
...@@ -181,6 +237,7 @@ const show = ref(false); ...@@ -181,6 +237,7 @@ const show = ref(false);
const currentLatitudeAndLongitude = ref({}); const currentLatitudeAndLongitude = ref({});
const shopId = ref(''); const shopId = ref('');
const showpopup = ref(false); const showpopup = ref(false);
const showDetail = ref(false);
// 商品优惠券 // 商品优惠券
const productCoupons = ref([]); const productCoupons = ref([]);
onLoad((options) => { onLoad((options) => {
...@@ -241,10 +298,17 @@ function getProdDetailFn(prodId) { ...@@ -241,10 +298,17 @@ function getProdDetailFn(prodId) {
function getCouponShopListFn(prodId, shopId) { function getCouponShopListFn(prodId, shopId) {
getCouponShopList(prodId, shopId).then((res) => { getCouponShopList(prodId, shopId).then((res) => {
if (res.code === 0) { if (res.code === 0) {
res.data = res.data.map((item) => {
item.showDetail = false;
return item;
});
productCoupons.value = res.data; productCoupons.value = res.data;
} }
}); });
} }
function showDetailFn(item) {
item.showDetail = !item.showDetail;
}
/** /**
* 获取收藏 * 获取收藏
*/ */
...@@ -258,13 +322,17 @@ function getCollectFn(shopId) { ...@@ -258,13 +322,17 @@ function getCollectFn(shopId) {
shopInfo.value.privateIntFcount--; shopInfo.value.privateIntFcount--;
shopInfo.value.isCollect = 0; shopInfo.value.isCollect = 0;
} }
shopInfo.value.console.log('111');
} }
}); });
} }
function collectionFn() { function collectionFn() {
getCollectFn(shopId.value); getCollectFn(shopId.value);
} }
/**
* 领取优惠券
* @param {*} item
*/
function getCoupon(item) {}
function getLocationFn() { function getLocationFn() {
xma.getLocation({ xma.getLocation({
type: 'wgs84', type: 'wgs84',
...@@ -322,6 +390,210 @@ page { ...@@ -322,6 +390,210 @@ page {
position: relative; position: relative;
padding-bottom: 110 * 2rpx; padding-bottom: 110 * 2rpx;
margin: 0 auto; margin: 0 auto;
.title-box {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
.title {
font-size: 15 * 2rpx;
font-weight: bold;
color: #3d3d3d;
}
}
.popup-content {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20rpx;
.ticket-item {
width: 100%;
background-color: #fff;
border-radius: 16rpx;
display: flex;
flex-direction: column;
margin-top: 12rpx;
.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;
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;
.more {
margin-left: auto;
font-size: 8 * 2rpx;
color: #abaaaa;
}
.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;
}
}
}
}
}
}
.swiper { .swiper {
width: 750rpx; width: 750rpx;
margin: 0 auto; margin: 0 auto;
...@@ -501,6 +773,7 @@ page { ...@@ -501,6 +773,7 @@ page {
img { img {
width: 100%; width: 100%;
height: auto; height: auto;
margin-top: 20rpx;
} }
p { p {
font-size: 22rpx; font-size: 22rpx;
......
src/pages/ticket/components/TicketList/index.vue
View file @ 010f56da
...@@ -225,7 +225,7 @@ const changeShowDetail = () => { ...@@ -225,7 +225,7 @@ const changeShowDetail = () => {
} }
.btn { .btn {
padding: 20rpx; padding: 20rpx 10rpx;
box-sizing: border-box; box-sizing: border-box;
border-radius: 26rpx; border-radius: 26rpx;
display: flex; display: flex;
......
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