542 lines
14 KiB
Vue
542 lines
14 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="user">
|
|
<image src="/static/img/giftPackCoupon_user.png" mode=""></image> 尊敬的<text>{{ userTel }}</text>, 欢迎参加此活动
|
|
</view>
|
|
<!-- 我的卡券 -->
|
|
<view class="campusCont">
|
|
<!-- 卡券tab -->
|
|
<view class="couponTab">
|
|
<view class="couponTab-label" :class="{active : stateType == item.used}" @tap="orderTab" v-for="(item, index) in couponLabel" :key="index" :data-index="(index)" :data-state="(item.used)">
|
|
{{ item.title }}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 卡券列表 -->
|
|
<view class="coupon" v-if="coupons.length > 0" :class="{active : coupons.length < 1}">
|
|
<view class="couponItem" v-for="(item, index) in coupons" :key="index" :class="{active: item.status != 0}">
|
|
<view class="couponItem-cont">
|
|
<view class="couponItem-top">
|
|
<view class="couponItem-cont-number">
|
|
￥<text>{{item.price}}</text>
|
|
</view>
|
|
<view class="couponItem-cont-name">
|
|
<view class="nowrap couponItem-cont-title">
|
|
{{item.name}}
|
|
</view>
|
|
<view class="couponItem-cont-show" @click="moreCoupon(index)">
|
|
详细信息<image src="/static/icon/giftPack-icon.png" class="couponItem-cont-icon" :class="{active: item.couponShow }" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<navigator v-if="item.status == 0" class="couponItem-btn" hover-class="none" :url="'/pages/giftPack/details?id=' + item.id">
|
|
立即使用
|
|
</navigator>
|
|
<view v-else-if="item.status == 1" class="couponItem-btn">
|
|
已使用
|
|
</view>
|
|
<view v-else class="couponItem-btn">
|
|
已过期
|
|
</view>
|
|
</view>
|
|
|
|
<view class="couponItem-cont-text" v-if="item.couponShow">
|
|
<rich-text :nodes="item.remark"></rich-text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 列表为空 -->
|
|
<view class="campusTips" v-else>
|
|
<view class="campusTips-cont">
|
|
<image src="/static/img/giftPack-null.png" mode="aspectFill"></image>
|
|
<view>暂无优惠券</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<!-- 漂浮窗 -->
|
|
<!-- <view class="indexFloat" @click="followBtn">
|
|
<image src="/static/img/subscribe.jpg" mode="aspectFill" class="indexFloat-animation"></image>
|
|
<view class="indexFloat-text">
|
|
<text>关注小程序</text>
|
|
</view>
|
|
</view> -->
|
|
|
|
<!-- 关注公众号弹出 -->
|
|
<view class="followBack" :class="{active : followState}"></view>
|
|
<view class="followPop" :class="{active : followState}">
|
|
<image class="followPop-img" src="/static/img/subscribe.jpg" mode="widthFix"></image>
|
|
<view class="followPop-text">
|
|
<text>长按识别图中二维码</text>
|
|
<image src="/static/img/follow_tips.png" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="followPop-tips">
|
|
超级红包活动
|
|
</view>
|
|
</view>
|
|
<image class="followPop-clos" :class="{active : followState}" src="/static/icon/add.png" mode="aspectFill" @click="followBtn"></image>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { index } from '@/apis/interfaces/user'
|
|
import { coupon } from '@/apis/interfaces/giftPack'
|
|
export default {
|
|
data() {
|
|
return {
|
|
userTel : '', //用户者手机号
|
|
coupons : [], //优惠券列表
|
|
//优惠券Tab列表
|
|
couponLabel : [
|
|
{ title : "未使用", used: 0 },
|
|
{ title : "已使用", used: 1 },
|
|
{ title : "已过期", used: 2 }
|
|
],
|
|
stateType : '0', //卡券状态
|
|
type : '', //卡券来源
|
|
followState : false //二维码弹出状态
|
|
}
|
|
},
|
|
|
|
// 生命周期函数--监听页面加载
|
|
onLoad(options) {
|
|
// 获取用户信息
|
|
index().then(res => {
|
|
this.userTel = res.info.username
|
|
}).catch(err => {
|
|
if (!err.login) {
|
|
uni.showModal({
|
|
title: '用户登录已过期',
|
|
content: '请重新登录',
|
|
showCancel: false,
|
|
success: res => {
|
|
if (res.confirm) {
|
|
uni.redirectTo({
|
|
url: '/pages/giftPack/signin'
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
|
|
// 生命周期函数--监听页面显示
|
|
onShow() {
|
|
// 存储环境-本时大礼包新活动
|
|
getApp().globalData.envType = 'giftPEnv'
|
|
|
|
// 获取列表
|
|
this.couponInfo();
|
|
},
|
|
methods: {
|
|
// 卡券列表
|
|
couponInfo() {
|
|
coupon({
|
|
status: this.stateType
|
|
}).then(res=>{
|
|
var listData = res.data
|
|
for(let val in listData){
|
|
listData[val].couponShow = false
|
|
}
|
|
this.coupons = listData
|
|
|
|
}).catch(err => {
|
|
if (!err.login) {
|
|
uni.showModal({
|
|
title: '用户登录已过期',
|
|
content: '请重新登录',
|
|
showCancel: false,
|
|
success: res => {
|
|
if (res.confirm) {
|
|
wx.redirectTo({
|
|
url: '/pages/giftPack/signin'
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
})
|
|
},
|
|
|
|
// tabs 选项卡
|
|
orderTab(e){
|
|
this.stateType = e.currentTarget.dataset.state
|
|
|
|
// 获取卡权益
|
|
this.couponInfo()
|
|
},
|
|
|
|
// 已兑换细信息展开
|
|
moreCoupon(index) {
|
|
this.coupons[index].couponShow = !this.coupons[index].couponShow
|
|
},
|
|
|
|
// 优惠券跳转详情
|
|
couponUrl(e) {
|
|
let newId = e.currentTarget.dataset.id
|
|
uni.navigateTo({
|
|
url: '/pages/giftPack/details?id=' + newId
|
|
})
|
|
},
|
|
|
|
// 公众号展示
|
|
followBtn() {
|
|
this.followState = !this.followState
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/* 用户信息 */
|
|
.user {
|
|
width: 100%;
|
|
background: #fff;
|
|
font-size: 28rpx;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
color: #a85920;
|
|
display: flex;
|
|
line-height: 48rpx;
|
|
}
|
|
|
|
.user text {
|
|
font-weight: 600;
|
|
padding: 0 10rpx;
|
|
}
|
|
|
|
.user image {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.campusCont {
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.campusCont.active {
|
|
border-bottom: 140rpx solid transparent;
|
|
}
|
|
|
|
.couponTab{
|
|
display: flex;
|
|
}
|
|
|
|
.couponTab-label {
|
|
flex: 3;
|
|
text-align: center;
|
|
font-size: 30rpx;
|
|
position: relative;
|
|
padding-bottom: 20rpx;
|
|
&::after {
|
|
position: absolute;
|
|
content: '';
|
|
left: calc(50% - 20rpx);
|
|
bottom: 0;
|
|
width: 40rpx;
|
|
height: 8rpx;
|
|
background-color: transparent;
|
|
border-radius: 40rpx;
|
|
}
|
|
&.active {
|
|
color: #a85920;
|
|
font-weight: 600;
|
|
}
|
|
&.active::after {
|
|
background-color: #a85920;
|
|
}
|
|
}
|
|
|
|
.couponTab-label view {
|
|
font-size: 24rpx;
|
|
margin-top: 6rpx;
|
|
}
|
|
|
|
.coupon {
|
|
padding-bottom: 10rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* 漂浮弹出层 */
|
|
.indexFloat {
|
|
position: fixed;
|
|
right: 20rpx;
|
|
bottom: 180rpx;
|
|
z-index: 99;
|
|
}
|
|
|
|
.indexFloat-text {
|
|
height: 40rpx;
|
|
overflow: hidden;
|
|
color: #000000;
|
|
}
|
|
|
|
.indexFloat-text text {
|
|
line-height: 40rpx;
|
|
display: block;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.indexFloat-animation {
|
|
width: 130rpx;
|
|
height: 130rpx;
|
|
animation: shake 3s linear infinite;
|
|
}
|
|
|
|
@keyframes shake {
|
|
70%, 80% {
|
|
transform: rotate(7deg);
|
|
}
|
|
75% {
|
|
transform: rotate(-7deg);
|
|
}
|
|
|
|
65%,
|
|
85% {
|
|
transform: rotate(0);
|
|
}
|
|
}
|
|
|
|
/* 关注公众号弹出 */
|
|
.followBack {
|
|
position: fixed;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: rgba(0,0,0,.7);
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 1000;
|
|
display: none;
|
|
}
|
|
|
|
.followBack.active {
|
|
display: block;
|
|
}
|
|
|
|
.followPop {
|
|
position: fixed;
|
|
z-index: 1001;
|
|
height: 760rpx;
|
|
left: 15%;
|
|
right: 15%;
|
|
top: 300rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 20rpx;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
display: none;
|
|
}
|
|
|
|
.followPop.active {
|
|
display: block;
|
|
}
|
|
|
|
.followPop-img {
|
|
width: 70%;
|
|
margin: 60rpx 0 50rpx;
|
|
}
|
|
|
|
.followPop-text {
|
|
color: #7d7d7d;
|
|
font-size: 32rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.followPop-text::after,
|
|
.followPop-text::before {
|
|
position: absolute;
|
|
content: '';
|
|
top: 25rpx;
|
|
width: 60rpx;
|
|
height: 2rpx;
|
|
background-color: #cfcfcf;
|
|
}
|
|
|
|
.followPop-text::after {
|
|
left: 30rpx;
|
|
}
|
|
|
|
.followPop-text::before {
|
|
right: 30rpx;
|
|
}
|
|
|
|
.followPop-text image {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
margin: 10rpx auto 20rpx;
|
|
display: block;
|
|
}
|
|
|
|
.followPop-tips {
|
|
background-color: #e1e5ec;
|
|
line-height: 90rpx;
|
|
color: #7f8487;
|
|
}
|
|
|
|
.followPop-clos {
|
|
position: fixed;
|
|
top: 1100rpx;
|
|
left: calc(50% - 25rpx);
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
z-index: 1001;
|
|
display: none;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.followPop-clos.active {
|
|
display: block;
|
|
}
|
|
|
|
// 优惠券
|
|
.coupon {
|
|
margin-top: 40rpx;
|
|
.couponItem {
|
|
margin-bottom: 30rpx;
|
|
.couponItem-cont {
|
|
background-color: #caa668;
|
|
border-radius: 10rpx;
|
|
position: relative;
|
|
height: 140rpx;
|
|
overflow: hidden;
|
|
.couponItem-top {
|
|
padding: 30rpx 20rpx;
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
background-image: linear-gradient(to right, #fffbf5, #f2e2cc);
|
|
width: calc(100% - 160rpx);
|
|
display: flex;
|
|
border-radius: 0 15rpx 15rpx 0;
|
|
.couponItem-cont-number {
|
|
width: 100rpx;
|
|
line-height: 84rpx;
|
|
color: #a85920;
|
|
text {
|
|
font-size: 54rpx;
|
|
}
|
|
}
|
|
.couponItem-cont-name {
|
|
color: #72411f;
|
|
padding-left: 40rpx;
|
|
box-sizing: border-box;
|
|
width: calc(100% - 100rpx);
|
|
position: relative;
|
|
&::after {
|
|
position: absolute;
|
|
content: '';
|
|
left: 13rpx;
|
|
top: 10%;
|
|
background-color: #ecd5c1;
|
|
width: 2rpx;
|
|
height: 80%;
|
|
}
|
|
.couponItem-cont-title {
|
|
font-size: 30rpx;
|
|
}
|
|
.couponItem-cont-show {
|
|
display: flex;
|
|
font-size: 26rpx;
|
|
padding-top: 13rpx;
|
|
.couponItem-cont-icon {
|
|
width: 32rpx;
|
|
margin-left: 5rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.couponItem-btn {
|
|
line-height: 140rpx;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 160rpx;
|
|
height: 100%;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
.couponItem-cont-text {
|
|
background-image: linear-gradient(-20deg, #fffbf5, #fbefdf);
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
color: #bc8863;
|
|
line-height: 48rpx;
|
|
font-size: 24rpx;
|
|
margin-top: -4rpx;
|
|
text-align: justify;
|
|
border-radius: 0 0 15rpx 15rpx;
|
|
}
|
|
.couponItem-cont-show {
|
|
display: flex;
|
|
font-size: 26rpx;
|
|
padding-top: 13rpx;
|
|
.couponItem-cont-icon {
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
vertical-align: -6rpx;
|
|
margin-left: 5rpx;
|
|
transition: .2s;
|
|
&.active {
|
|
transform:rotate(-180deg);
|
|
}
|
|
}
|
|
}
|
|
&.active .couponItem-cont {
|
|
background: #c1c1c1;
|
|
}
|
|
&.active .couponItem-top {
|
|
background-image: linear-gradient(to right, #d9d9d9, #d9d9d9);
|
|
}
|
|
&.active .couponItem-cont-number,
|
|
&.active .couponItem-cont-title,
|
|
&.active .couponItem-cont-show {
|
|
color: #7e7e7e !important;
|
|
}
|
|
&.active .couponItem-cont-icon {
|
|
filter: grayscale(100%);
|
|
}
|
|
&.active .couponItem-cont-text{
|
|
background-image: linear-gradient(to right, #eaeaea, #eaeaea);
|
|
color: #7e7e7e !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.campusTips {
|
|
margin-top: 40rpx;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
.campusTips-cont {
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
text-align: center;
|
|
padding: 80rpx;
|
|
box-sizing: border-box;
|
|
color: #9c7557;
|
|
image {
|
|
width: 340rpx;
|
|
height: 280rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
.campusTips-cont-go {
|
|
display: inline-block;
|
|
border: #9c7557 2rpx solid;
|
|
line-height: 66rpx;
|
|
padding: 0 40rpx;
|
|
margin-top: 30rpx;
|
|
font-size: 28rpx;
|
|
border-radius: 90rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|