TmOct5/BlockChainH5
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

[修改优惠券管理，添加我的优惠券，修改签到页面]

Browse Source
This commit is contained in:
zhangmanman
2021-11-24 10:03:47 +08:00
parent a5688f6ff8
commit 324193a919
15 changed files with 1106 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

324
pages/user/coupons.vue Normal file
View File

@@ -0,0 +1,324 @@
<template>
<view>
<!-- 优惠券分类 -->
<view class="header">
<view class="tabs">
<view class="item" :class="{'show': tabsType == ''}" @click="onTabs('')">全部 <block v-if="counts.all != 0">({{ counts.all}})</block></view>
<view class="item" :class="{'show': tabsType == '1'}" @click="onTabs('1')">服务券 <block v-if="counts.services != 0">({{ counts.services}})</block></view>
<view class="item" :class="{'show': tabsType == '2'}" @click="onTabs('2')">代金券 <block v-if="counts.reductions != 0">({{ counts.reductions}})</block></view>
<view class="item" :class="{'show': tabsType == '3'}" @click="onTabs('3')">提货券 <block v-if="counts.exchanges != 0">({{ counts.exchanges}})</block></view>
</view>
<scroll-view class="tabs-type" scroll-x="true" scroll-with-animation="true">
<view class="item" :class="{'show': tabsStatus == ''}" @click="onTabsType('')">全部 <block v-if="statusCount.all != 0">({{ statusCount.all}})</block></view>
<view class="item" :class="{'show': tabsStatus == '1'}" @click="onTabsType('1')">未使用 <block v-if="statusCount.unused != 0">({{ statusCount.unused}})</block></view>
<view class="item" :class="{'show': tabsStatus == '2'}" @click="onTabsType('2')">已使用 <block v-if="statusCount.used != 0">({{ statusCount.used}})</block></view>
<view class="item" :class="{'show': tabsTime == 'expire'}" @click="onTabsTime('expire')">即将到期 <block v-if="statusCount.expire != 0">({{ statusCount.expire}})</block></view>
<view class="item" :class="{'show': tabsTime == 'new'}" @click="onTabsTime('new')">新到 <block v-if="statusCount.new != 0">({{ statusCount.new}})</block></view>
<view class="item" :class="{'show': tabsStatus == '3'}" @click="onTabsType('3')">已过期 <block v-if="statusCount.over != 0">({{ statusCount.over}})</block></view>
</scroll-view>
</view>
<view class="couponsMargin" v-if="coupons.length > 0">
<view class="coupons" v-for="(item, index) in coupons" :key="index" @click="$Router.push({name: 'myCouponsDte', params: {couponId: item.coupon_grant_id}})">
<view class="coupons-flex" :class="{active : item.coupon_count > 1}">
<view class="item cover" v-if="item.type.value == 2">
<view class="cover-price" :class="{active : item.type.value == 2}">
{{ item.price }}
</view>
<view class="cover-text">
{{ item.type.text }}
</view>
</view>
<view class="item cover" v-else-if="item.type.value == 1">
<image class="cover-tips" src="http://localhost:8081/static/images/coupon-fu.png" mode=""></image>
</view>
<view class="item cover" v-else>
<image class="cover-tips" src="http://localhost:8081/static/images/coupon-ti.png" mode=""></image>
</view>
<view class="item mian">
<view class="title nowrap">{{ item.title }}</view>
<view class="time nowrap" v-if="item.type.value == 2">
{{ item.price_text }}
</view>
<view class="time nowrap">
{{ item.time.interval }}
</view>
</view>
<image v-if="item.status.status == 2" class="coupons-tips" src="/static/imgs/coupon_tips_00.png" mode="aspectFill"></image>
<image v-else-if="item.status.status == 3" class="coupons-tips" src="/static/imgs/coupon_tips_01.png" mode="aspectFill"></image>
</view>
<view class="couponMore" v-if="item.coupon_count > 1">
<view class="couponMore-text" @click.stop="$Router.push({name: 'myCouponsList', params: {couponId: item.coupon_id, status: tabsStatus}})">
<view class="couponMore-title">查看全部{{ item.coupon_count }}张优惠券</view>
<view class="couponMore-arrow">
<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
</view>
</view>
</view>
</view>
</view>
<block v-else>
<view class="list-null">
<no-list name='no-counpon' txt="没有任何相关优惠券~" />
</view>
</block>
</view>
</template>
<script>
import { userCoupon } from '@/apis/interfaces/user'
export default {
data() {
return {
coupons : [] ,// 列表
counts : '',
tabsType : '',
tabsStatus : '',
tabsTime : '',
statusCount : '',
// 分页
pages : {}
}
},
onShow() {
this.getCoupons()
},
methods:{
// 数据列表
getCoupons(){
userCoupon({
type : this.tabsType,
status : this.tabsStatus,
time : this.tabsTime
}).then(res => {
this.coupons = res.lists
this.counts = res.count.type
this.statusCount = res.count.status
this.pages = res.lists.page
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
},
// 选择类型
onTabs(value){
if(value == this.tabsType) return
this.tabsType = value
this.getCoupons()
},
// 状态筛选
onTabsType(val){
if(this.tabsStatus === val) return
this.tabsStatus = val
this.tabsTime = null
this.getCoupons()
},
// 新状态筛选
onTabsTime(val) {
if(this.tabsTime === val) return
this.tabsTime = val
this.tabsStatus = null
this.getCoupons()
}
}
}
</script>
<style lang="scss" scoped>
// tabs
.header{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
.tabs{
display: flex;
justify-content: space-around;
background: white;
padding: 15rpx 0;
font-size: $title-size-lg;
color: $text-gray;
.item{
height: 60rpx;
line-height: 60rpx;
&.show{
color: $mian-color;
border-bottom: solid 4rpx $mian-color;
}
}
}
// 类型
.tabs-type{
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
white-space: nowrap;
padding: 20rpx 30rpx;
background: white;
.item{
display: inline-block;
padding: 0 20rpx;
text-align: center;
font-size: $title-size-sm;
height: 46rpx;
line-height: 46rpx;
border-radius: 23rpx;
background: white;
margin-right: $margin/2;
color: $text-gray;
&.show{
background-color: rgba($color: $mian-color, $alpha: .1);
color: $mian-color;
}
}
}
}
// 列表
.couponsMargin {
padding: 200rpx 0 $padding;
}
.coupons {
padding: 0 $padding;
box-sizing: border-box;
margin-bottom: 30rpx;
@extend .ios-bottom;
.coupons-flex{
position: relative;
background: white;
box-shadow: 0 0 20rpx rgba(0, 0,0, .1);
border-radius: $radius;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: $padding 40rpx $padding 0;
&.active {
border-radius: $radius $radius 0 0;
}
.cover{
position: relative;
border-right: dashed 3rpx $border-color;
width: 160rpx;
text-align: center;
.cover-price {
font-size: 38rpx;
font-weight: 600;
color: #ee4c47;
&.active {
margin-top: 20rpx;
}
}
.cover-text {
font-size: 24rpx;
}
.cover-tips {
width: 60rpx;
height: 60rpx;
margin-top: 15rpx;
}
}
.mian{
justify-content: center;
width: calc(100% - 190rpx);
box-sizing: border-box;
@extend .vertical;
.title{
font-size: $title-size-lg;
line-height: 50rpx;
font-weight: bold;
}
.time, .tags{
color: $text-gray-m;
font-size: $title-size-m - 4;
line-height: 40rpx;
}
.tags{
margin-top: 10rpx;
text{
background: $border-color-lg;
color: $text-gray;
padding: 0 ($padding/2);
margin-right: ($margin/2);
&:last-child{
margin-right: 0;
}
}
}
}
.coupons-tips {
position: absolute;
top: 20rpx;
right: 20rpx;
width: 94rpx;
height: 94rpx;
z-index: 9;
}
}
.couponMore {
font-size: 28rpx;
color: #686868;
position: relative;
height: 120rpx;
&::after,
&::before {
position: absolute;
content: '';
height: 20rpx;
border-radius: 10rpx;
background: #fff;
box-shadow: 0 0 20rpx rgba(0, 0,0, .1);
z-index: 1;
height: 30rpx;
}
&::after {
width: calc(100% - 40rpx);
top: 70rpx;
left: 20rpx;
}
&::before {
width: calc(100% - 80rpx);
top: 90rpx;
left: 40rpx;
}
.couponMore-text {
display: flex;
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 1;
height: 80rpx;
border-radius: 0 0 10rpx 10rpx;
line-height: 80rpx;
padding: 0 30rpx;
box-sizing: border-box;
background: #fff;
box-shadow: 0 0 10rpx rgba(0, 0,0, .1);
}
.couponMore-title {
flex: 1;
}
.couponMore-arrow {
position: absolute;
right: $margin;
top: 0;
bottom: 0;
@extend .vertical
}
}
}
</style>

312
pages/user/couponsDte.vue Normal file
View File

@@ -0,0 +1,312 @@
<template>
<view class="content" v-if="!isLoding">
<view class="details">
<view class="header">
<view class="info-item">
<view class="info-item-title">优惠券标题</view>
<view class="info-item-text">{{details.title}}</view>
</view>
<view class="info-item">
<view class="info-item-title">优惠券类型</view>
<view class="info-item-text">{{details.type.text}}</view>
</view>
<view class="info-item">
<view class="info-item-title">优惠券状态</view>
<view class="info-item-text">{{details.status.text}}</view>
</view>
<view class="info-item">
<view class="info-item-title">使用渠道</view>
<view class="info-item-text">{{details.use_way.text}}</view>
</view>
<view class="info-item" v-if="details.type.value === 2">
<view class="info-item-title">满减</view>
<view class="info-item-text">满{{details.full}}减{{details.price}}</view>
</view>
<view class="info-item">
<view class="info-item-title">券有效期(起)</view>
<view class="info-item-text">{{details.time.start_at}}</view>
</view>
<view class="info-item">
<view class="info-item-title">券有效期(止)</view>
<view class="info-item-text">{{details.time.end_at}}</view>
</view>
</view>
<view class="mian">
<block v-if="details.goods.length > 0">
<view class="mian-title">关联商品</view>
<view class="mian-goods">
<view class="item" v-for="(item, index) in details.goods" :key="index">
<image class="item-img" :src="item.cover" mode=""></image>
<view class="item-cont">
<view class="item-title nowrap">{{item.name}}</view>
<view class="item-price nowrap">￥{{item.price}}</view>
</view>
<block v-if="details.use_way">
<view v-if="details.use_way.value == 1" class="item-apply" @click="$Router.push({name: 'goodsDetails', params: {id: item.goods_id}})">
去使用
</view>
</block>
</view>
</view>
</block>
<view class="mian-title">使用说明</view>
<view class="mian-text">
<text>{{details.description || '-'}}</text>
</view>
</view>
</view>
<view class="ios-bottom"></view>
<block v-if="details.use_way">
<view class="clickCodeBtn" v-if='details.use_way.value == 2' @click="clickCode(details.coupon_grant_id)">立即兑换</view>
</block>
<!-- 二维码弹窗 -->
<view class="showCode " v-if="showCode">
<view class="showCodeBg" @click="showCode = false"></view>
<view :class="['showCodeContent', showCode?'showCodeContentSelect':'showCodeContentSelectNo']">
<view class="showCodeTitle">优惠券兑换码</view>
<image :src="code" mode="widthFix"></image>
</view>
</view>
</view>
</template>
<script>
import { couponsInfo, getQrcodeByGrantId } from '@/apis/interfaces/user'
export default {
data() {
return {
isLoding : true,
details : {},
showCode : false,
};
},
onShow() {
couponsInfo(this.$Route.query.couponId).then(res => {
console.log(res)
this.details = res
this.isLoding = false
})
},
methods:{
// 点击二维码特效
clickCode(grantid) {
this.code = ''
if (grantid !== '') {
let data = {
coupon_grant_id: grantid
}
getQrcodeByGrantId(data).then(res => {
this.code = res.code
this.showCode = !this.showCode
}).catch(err => {
this.$refs.uToast.show({
title: err.message,
duration: 3000
})
})
}
},
}
}
</script>
<style lang="scss">
// content
.content{
padding-bottom: $padding + 90;
}
.details{
margin: $margin;
background: white;
border-radius: $radius;
// 优惠券信息
.header{
position: relative;
border-bottom: dashed 2rpx $border-color;
padding: $padding;
&::after,&::before{
position: absolute;
width: 30rpx;
height: 30rpx;
background: #f8f8f8;
content: " ";
bottom: -16rpx;
border-radius: 50%;
}
&::after{
left: -16rpx;
}
&::before{
right: -16rpx;
}
.info{
padding: $padding 0;
text-align: center;
.info-cover{
width: 128rpx;
height: 128rpx;
border-radius: 50%;
vertical-align: top;
}
.info-title{
padding-top: $padding;
text-align: center;
font-weight: bold;
font-size: $title-size;
}
}
.info-item{
position: relative;
padding-left: 200rpx;
min-height: 60rpx;
font-size: $title-size-lg;
padding-bottom: $padding/3;
&:last-child{
padding-bottom: 0;
}
.info-item-title{
position: absolute;
left: 0;
top: 0;
line-height: 50rpx;
color: $text-color;
}
.info-item-text{
line-height: 50rpx;
color: $text-gray;
text-align: right;
@extend .nowrap;
}
}
}
// 优惠券介绍
.mian{
padding: $padding;
.mian-title{
font-size: $title-size-lg;
font-weight: bold;
line-height: 50rpx;
color: $text-color;
}
.mian-text{
font-size: $title-size-m;
color: $text-gray;
padding-top: $padding/3;
}
.mian-goods{
padding: $padding - 10 0 $padding;
.item{
font-size: $title-size-m;
width: 100%;
position: relative;
margin-bottom: 20rpx;
.item-img {
width: 90rpx;
height: 90rpx;
border-radius: 10rpx;
}
.item-cont {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 90rpx;
padding: 0 140rpx 0 110rpx;
box-sizing: border-box;
font-weight: bold;
.item-title{
color: $text-gray;
margin-bottom: 10rpx;
}
.item-price{
color: $text-price;
}
}
.item-apply {
position: absolute;
right: 0;
top: 20rpx;
border-radius: $radius - 10;
text-align: center;
border: #8b64fd 2rpx solid;
color: #8b64fd;
height: 54rpx;
line-height: 50rpx;
width: 120rpx;
}
}
}
}
}
// 动画效果
.showCode {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
z-index: 199999999999999993;
.showCodeBg {
background-color: rgba($color:#000, $alpha: 0.3);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 199999999999999994;
}
.showCodeContentSelect {
animation: sk-foldCubeAngle .6s linear both;
}
.showCodeContentSelectNo {
animation: sk-foldCubeAngleNo .6s linear both;
}
.showCodeContent {
width: 600rpx;
height: 500rpx;
background-color: #fff;
border-radius: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 30rpx;
position: relative;
z-index: 199999999999999995;
image {
width: 60%;
}
.showCodeTitle {
font-weight: 600;
padding-bottom: 40rpx;
font-size: 36rpx;
}
}
}
.clickCodeBtn {
margin: $margin;
background: white;
border-radius: $radius - 10;
border: #8b64fd 2rpx solid;
color: #8b64fd;
line-height: 80rpx;
text-align: center;
font-size: 32rpx;
}
</style>

236
pages/user/couponsList.vue Normal file
View File

@@ -0,0 +1,236 @@
<template>
<view>
<view class="couponsMargin" v-if="coupons.length > 0">
<view class="coupons" v-for="(item, index) in coupons" :key="index" @click="$Router.push({name: 'myCouponsDte', params: {couponId: item.coupon_grant_id}})">
<view class="coupons-flex">
<view class="item cover" v-if="item.type.value == 2">
<view class="cover-price" :class="{active : item.type.value == 2}">
{{ item.price }}
</view>
<view class="cover-text">
{{ item.type.text }}
</view>
</view>
<view class="item cover" v-else-if="item.type.value == 1">
<image class="cover-tips" src="http://localhost:8081/static/images/coupon-fu.png" mode=""></image>
</view>
<view class="item cover" v-else>
<image class="cover-tips" src="http://localhost:8081/static/images/coupon-ti.png" mode=""></image>
</view>
<view class="item mian">
<view class="title nowrap">{{ item.title }}</view>
<view class="time nowrap" v-if="item.type.value == 2">
{{ item.price_text }}
</view>
<view class="time nowrap">
{{ item.time.interval }}
</view>
</view>
<image v-if="item.status.status == 2" class="coupons-tips" src="/static/imgs/coupon_tips_00.png" mode="aspectFill"></image>
<image v-else-if="item.status.status == 3" class="coupons-tips" src="/static/imgs/coupon_tips_01.png" mode="aspectFill"></image>
</view>
</view>
</view>
<block v-else>
<view class="list-null">
<no-list name='no-counpon' txt="没有任何相关优惠券~" />
</view>
</block>
</view>
</template>
<script>
import { userCouponList } from '@/apis/interfaces/user'
export default {
data() {
return {
coupons : [] ,// 列表
// 分页
pages : {}
}
},
onShow() {
this.getCoupons()
},
methods:{
// 数据列表
getCoupons(){
userCouponList(this.$Route.query.couponId, {
status : this.$Route.query.status
}).then(res => {
this.coupons = res.data
this.pages = res.page
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
},
// 选择类型
onTabs(value){
if(value == this.tabsType) return
this.tabsType = value
this.getCoupons()
},
// 状态筛选
onTabsType(val){
if(this.tabsStatus === val) return
this.tabsStatus = val
this.tabsTime = '-'
this.getCoupons()
},
// 新状态筛选
onTabsTime(val) {
if(this.tabsTime === val) return
this.tabsTime = val
this.tabsStatus = '-'
this.getCoupons()
}
}
}
</script>
<style lang="scss" scoped>
// 列表
.couponsMargin {
padding: 20rpx 0;
}
.coupons {
padding: 0 $padding;
box-sizing: border-box;
margin-bottom: 30rpx;
@extend .ios-bottom;
.coupons-flex{
position: relative;
background: white;
box-shadow: 0 0 20rpx rgba(0, 0,0, .1);
border-radius: $radius;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: $padding 40rpx $padding 0;
&.active {
border-radius: $radius $radius 0 0;
}
.cover{
position: relative;
border-right: dashed 3rpx $border-color;
width: 160rpx;
text-align: center;
.cover-price {
font-size: 38rpx;
font-weight: 600;
color: #ee4c47;
&.active {
margin-top: 20rpx;
}
}
.cover-text {
font-size: 24rpx;
}
.cover-tips {
width: 60rpx;
height: 60rpx;
margin-top: 15rpx;
}
}
.mian{
justify-content: center;
width: calc(100% - 190rpx);
box-sizing: border-box;
@extend .vertical;
.title{
font-size: $title-size-lg;
line-height: 50rpx;
font-weight: bold;
}
.time, .tags{
color: $text-gray-m;
font-size: $title-size-m - 4;
line-height: 40rpx;
}
.tags{
margin-top: 10rpx;
text{
background: $border-color-lg;
color: $text-gray;
padding: 0 ($padding/2);
margin-right: ($margin/2);
&:last-child{
margin-right: 0;
}
}
}
}
.coupons-tips {
position: absolute;
top: 20rpx;
right: 20rpx;
width: 94rpx;
height: 94rpx;
z-index: 9;
}
}
.couponMore {
font-size: 28rpx;
color: #686868;
position: relative;
height: 120rpx;
&::after,
&::before {
position: absolute;
content: '';
height: 20rpx;
border-radius: 10rpx;
background: #fff;
box-shadow: 0 0 20rpx rgba(0, 0,0, .1);
z-index: 1;
height: 30rpx;
}
&::after {
width: calc(100% - 40rpx);
top: 70rpx;
left: 20rpx;
}
&::before {
width: calc(100% - 80rpx);
top: 90rpx;
left: 40rpx;
}
.couponMore-text {
display: flex;
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 1;
height: 80rpx;
border-radius: 0 0 10rpx 10rpx;
line-height: 80rpx;
padding: 0 30rpx;
box-sizing: border-box;
background: #fff;
box-shadow: 0 0 10rpx rgba(0, 0,0, .1);
}
.couponMore-title {
flex: 1;
}
.couponMore-arrow {
position: absolute;
right: $margin;
top: 0;
bottom: 0;
@extend .vertical
}
}
}
</style>

4
pages/user/index.vue
View File

@@ -263,6 +263,10 @@
我的服务
</view>
<view class="tool-list">
<view class="tool-label" @click="$Router.push({name: 'myCoupons'})">
<image class="tool-label-img" src="/static/user/userServe-05.png" mode=""></image>
<view class="tool-label-name">我的优惠券</view>
</view>
<view class="tool-label" @click="custEject">
<image class="tool-label-img" src="/static/user/userServe-00.png" mode=""></image>
<view class="tool-label-name">专属客服</view>