Skip to content

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

优惠券

parent 2d364fc1
Hide whitespace changes
Inline Side-by-side
Showing with 3 additions and 273 deletions
src/pages/packageDetails/packageDetails.vue
View file @ 6fb5710c
......@@ -3,77 +3,13 @@
<wd-popup
v-model="showpopup"
position="bottom"
custom-style="height: 50%;border-radius: 16rpx 16rpx 0 0 ;box-sizing:border-box;padding:20rpx;"
custom-style="height: 50%;border-radius: 16rpx 16rpx 0 0 ;"
@close="handleClose"
:safe-area-inset-bottom="true"
custom-class="popup"
>
<view class="title-box">
<text class="title">团购优惠券</text>
<wd-icon 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">20</text>
</view>
<view class="ticket-desc">
<text class="desc">满50元可用</text>
<text class="desc">数量：{{item.sumNum}}</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>
<text class="more">展开</text>
<wd-icon
:name="showDetail ? 'arrow-up' : 'arrow-down'"
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>
</wd-popup>
<view class="popup-content"></view>
</wd-popup>
<!-- 轮播 -->
<view class="swiper">
<wd-swiper
......@@ -244,7 +180,6 @@ const shopInfo = ref({});
const show = ref(false);
const currentLatitudeAndLongitude = ref({});
const shopId = ref('');
const showDetail = ref(false);
const showpopup = ref(false);
// 商品优惠券
const productCoupons = ref([]);
......@@ -272,9 +207,6 @@ function alert() {
function handleClose() {
showpopup.value = false;
}
const changeShowDetail = () => {
showDetail.value = !showDetail.value;
};
/**
* 获取套餐详情
* @param {String} prodId
......@@ -390,208 +322,6 @@ page {
position: relative;
padding-bottom: 110 * 2rpx;
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%;
box-sizing: border-box;
display: flex;
align-items: center;
.ticket-item {
width: 100%;
background-color: #fff;
border-radius: 16rpx;
display: flex;
flex-direction: column;
margin-top: 20rpx;
.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 {
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;
box-sizing: border-box;
padding: 20rpx;
}
}
}
.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 {
width: 750rpx;
margin: 0 auto;
......
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