Augcl
/
massage-front
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

feat: 优惠券页面;

pull/1/head
fox 4 months ago
parent
b10d23c56f
commit
90babcbf11
7 changed files with 120 additions and 196 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +57
    -171
      components/couponList/couponList.vue
  2. +9
    -9
      pages.json
  3. +1
    -3
      pages/index/center.vue
  4. +53
    -13
      pages_order/mine/coupon.vue
  5. BIN
      pages_order/static/coupon/coupon-bg-overtime.png
  6. BIN
      pages_order/static/coupon/coupon-bg-used.png
  7. BIN
      pages_order/static/coupon/coupon-bg-useful.png

+ 57
- 171
components/couponList/couponList.vue View File

@ -2,45 +2,23 @@
<scroll-view scroll-y="true" :style="{height: height}" @scrolltolower="moreCoupon()">
<!-- 优惠券列表 -->
<view class="list">
<view class="item" v-for="item in couponList" @click="select(item)" :key="item.id"
:class="['status-' + item.state]">
<image src="@/pages_order/static/coupon/coupon-bg.png" mode="widthFix" class="coupon-bg"></image>
<view class="item-con">
<view class="price-time">
<view class="price">
<view class="num">
<view class="icon">
￥
</view>
{{ item.money }}
</view>
</view>
<view class="date-tiao">
<view class="time">
限{{ formatDate(item.stateTime) }} - {{ formatDate(item.endTime) }}
</view>
<view class="tiao">
满{{ item.useMoney }}可用
</view>
</view>
</view>
<view class="status">
<view class="order-status">
<image src="@/pages_order/static/coupon/status.png" mode="widthFix" class="status-img">
</image>
<view class="text">
{{ status[item.state] }}
</view>
</view>
<!-- <view class="surplus">
剩余28天过期
</view> -->
</view>
</view>
<view class="list-item" v-for="item in couponList" @click="select(item)" :key="item.id">
<!-- 已领取 -->
<template v-if="item.state === 0">
<image class="list-item-bg" src="@/pages_order/static/coupon/coupon-bg-useful.png" ></image>
</template>
<!-- 已使用 -->
<template v-else-if="item.state === 1">
<image class="list-item-bg" src="@/pages_order/static/coupon/coupon-bg-used.png" ></image>
</template>
<!-- 已过期 -->
<template v-else-if="item.state === 2">
<image class="list-item-bg" src="@/pages_order/static/coupon/coupon-bg-overtime.png" ></image>
</template>
<text class="list-item-count">{{ item.money }}</text>
<text class="list-item-deadline">{{ `有效期至${item.endTime}` }}</text>
</view>
</view>
@ -69,6 +47,26 @@
//获取优惠券列表
getCouponList() {
// todo: delte test data
this.couponList = [
{
state: 0,
money: 40,
endTime: '2025-06-12',
},
{
state: 1,
money: 40,
endTime: '2025-06-12',
},
{
state: 2,
money: 40,
endTime: '2025-06-12',
},
]
return
let requestData = {
...this.queryParams,
state: this.state ? this.state : 0
@ -120,147 +118,35 @@
<style lang="scss" scoped>
.list {
padding: 32rpx 50rpx;
.item {
color: #FDDFCD;
&-item {
width: 100%;
height: 211rpx;
position: relative;
width: calc(100% - 40rpx);
height: 220rpx;
background-size: 100% 100%;
margin: 20rpx;
box-sizing: border-box;
padding: 30rpx;
.coupon-bg {
&-bg {
width: 100%;
position: absolute;
left: 0rpx;
top: 0rpx;
height: 100%;
}
.item-con {
display: flex;
align-items: center;
flex-wrap: wrap;
&-count {
position: absolute;
top: 50%;
left: 0rpx;
transform: translateY(-50%);
z-index: 99;
width: 100%;
.price-time {
display: flex;
width: 65%;
.price {
display: flex;
align-items: center;
.num {
color: #FFF8E9;
font-weight: 900;
font-size: 70rpx;
display: flex;
align-items: flex-end;
.icon {
color: #FFF8E9;
width: 30rpx;
height: 30rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 20rpx;
border-radius: 14rpx;
margin-bottom: 14rpx;
margin-right: 10rpx;
}
}
}
.date-tiao {
display: flex;
flex-direction: column;
align-items: center;
font-size: 24rpx;
box-sizing: border-box;
padding-left: 20rpx;
.time {}
.tiao {
display: flex;
justify-content: center;
background: #FDE5BA;
border-radius: 40rpx;
color: #FF2E34;
padding: 5rpx 20rpx;
margin-top: 15rpx;
}
}
}
.status {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 35%;
color: #FD4231;
padding-top: 30rpx;
.order-status {
position: relative;
width: 180rpx;
.status-img {
position: absolute;
left: 0;
width: 100%;
}
.text {
height: 90rpx;
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 100;
font-size: 34rpx;
font-weight: bold;
}
}
.surplus {
font-size: 22rpx;
text-align: center;
margin-top: 10rpx;
}
}
top: 40rpx;
left: 48rpx;
color: $uni-color-light;
font-size: 78rpx;
font-weight: 900;
line-height: 110rpx;
}
}
.status-0 {
opacity: 1;
}
.status-1 {
opacity: .9;
}
.status-2 {
opacity: .6;
}
.del {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ffffff99;
z-index: 99;
&-deadline {
position: absolute;
bottom: 58rpx;
left: 156rpx;
color: $uni-color-light;
font-size: 22rpx;
}
}
}
</style>

+ 9
- 9
pages.json View File

@ -73,6 +73,15 @@
{
"path": "mine/withdraw"
},
{
"path": "mine/runningWater"
},
{
"path": "mine/promotion"
},
{
"path": "mine/coupon"
},
{
"path": "mine/verifyRecord"
},
@ -82,9 +91,6 @@
{
"path": "mine/purse"
},
{
"path": "mine/runningWater"
},
{
"path": "mine/address"
},
@ -118,9 +124,6 @@
{
"path": "mine/recharge"
},
{
"path": "mine/promotion"
},
{
"path": "home/notice"
},
@ -136,9 +139,6 @@
{
"path": "mine/moreCommodity"
},
{
"path": "mine/coupon"
},
{
"path": "mine/updateUser"
},


+ 1
- 3
pages/index/center.vue View File

@ -98,13 +98,11 @@
<image class="fun-common-icon" src="@/static/image/center/icon-team.png" mode="widthFix"></image>
<text class="fun-common-label">我的团队</text>
</view>
<!-- todo: navigateTo -->
<view class="flex flex-column" @click="$utils.navigateTo('/pages_order/mine/promotion')">
<image class="fun-common-icon" src="@/static/image/center/icon-invite.png" mode="widthFix"></image>
<text class="fun-common-label">邀请好友</text>
</view>
<!-- todo: navigateTo -->
<view class="flex flex-column" @click="$utils.navigateTo('/pages_order/mine/memberCenter')">
<view class="flex flex-column" @click="$utils.navigateTo('/pages_order/mine/coupon')">
<image class="fun-common-icon" src="@/static/image/center/icon-coupon.png" mode="widthFix"></image>
<text class="fun-common-label">优惠券</text>
</view>


+ 53
- 13
pages_order/mine/coupon.vue View File

@ -1,12 +1,35 @@
<template>
<view class="coupon">
<view class="page">
<!-- 导航栏 -->
<navbar title="优惠券" leftClick @leftClick="$utils.navigateBack" bgColor="#E3441A" color="#fff" />
<navbar title="优惠券" leftClick @leftClick="$utils.navigateBack" color="#fff" />
<!-- 优惠券筛选 -->
<view class="tabs">
<uv-tabs :list="filtrationMenu" @click="hadleFiltrationMenuEvent" lineColor="#E3441A"
:activeStyle="{ color : '#E3441A' }"></uv-tabs>
<uv-tabs
:list="filtrationMenu"
@click="hadleFiltrationMenuEvent"
:customStyle="{
backgroundColor: '#FFFFFF',
}"
:activeStyle="{
color: '#84A73F',
fontSize: '28rpx',
whiteSpace: 'nowrap',
paddingTop: '29rpx',
paddingBottom: '21rpx',
}"
:inactiveStyle="{
color: '#000000',
fontSize: '28rpx',
whiteSpace: 'nowrap',
paddingTop: '29rpx',
paddingBottom: '21rpx',
}"
lineHeight="5rpx"
lineWidth="92rpx"
lineColor="linear-gradient(to right, #84A73F, #D8FF8F)"
:scrollable="false"
></uv-tabs>
</view>
<couponList ref="couponList" :list="list" :state="state"></couponList>
@ -99,16 +122,33 @@
</script>
<style scoped lang="scss">
// 优惠券筛选
.tabs {
&::v-deep .uv-tabs__wrapper__nav {
background: white;
.uv-tabs__wrapper__nav__item {
width: 33.33%;
text-align: center;
box-sizing: border-box;
}
.page {
background-color: $uni-bg-color;
min-height: 100vh;
/deep/ .nav-bar__view {
background-image: linear-gradient(#84A73F, #D8FF8F);
}
}
.tabs {
/deep/ .uv-tabs__wrapper__nav__line {
bottom: 0;
}
}
// // 优惠券筛选
// .tabs {
// &::v-deep .uv-tabs__wrapper__nav {
// background: white;
// .uv-tabs__wrapper__nav__item {
// width: 33.33%;
// text-align: center;
// box-sizing: border-box;
// }
// }
// }
</style>

BIN
pages_order/static/coupon/coupon-bg-overtime.png View File

Before After
Width: 647  |  Height: 211  |  Size: 22 KiB

BIN
pages_order/static/coupon/coupon-bg-used.png View File

Before After
Width: 647  |  Height: 211  |  Size: 22 KiB

BIN
pages_order/static/coupon/coupon-bg-useful.png View File

Before After
Width: 647  |  Height: 211  |  Size: 23 KiB

Write Preview
Loading…
Cancel
Save