zhangjing/ysdH5
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[本时生活h5端]

Browse Source
This commit is contained in:
张慢慢
2023-06-21 17:19:58 +08:00
commit ebb9575bd0
284 changed files with 39689 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

653
pages/campus/myCoupon.vue Normal file
View File

@@ -0,0 +1,653 @@
<template>
<view>
<image class="campusCoupon" src="/static/img/campusCoupon_img.png" mode="widthFix"></image>
<view class="user">
<image src="/static/img/campusCoupon_user.png" mode=""></image> 尊敬的<text>{{ userTel }}</text>, 欢迎参加校园迎新活动
</view>
<!-- 我的卡券 -->
<view class="borderContent">
<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 v-if="item.used == 0">({{count.init}}张)</view>
<view v-else-if="item.used == 1">({{count.used}}张)</view>
<view v-else>({{ count.pass }}张)</view>
</view>
</view>
<!-- 卡券列表 -->
<view class="coupon" v-if="coupons.length > 0" :class="{active : coupons.length < 1}">
<view class="couponCont" :class="{active : item.status != 0}" v-for="(item, index) in coupons" :key="index">
<view hover-class="none" class="couponList" @tap="couponUrl" :data-id="(item.coupon_id)">
<view class="couponList-left">
<image class="couponList-img" src="/static/img/coupon_coupon_img.png"></image>
<!-- 优惠券 -->
<view class="couponList-icon" v-if="item.type == 'physical'">
<image src="/static/img/coupon_icon_01.png"></image>
</view>
<!-- 实物 -->
<view class="couponList-icon" v-else>
<image src="/static/img/coupon_icon_00.png"></image>
</view>
</view>
<view class="couponList-center" :class="{active : item.used_at != '' || item.status == 0}">
<view class="nowrap couponList-title">{{ item.name }}</view>
<view class="nowrap couponList-used" v-if="item.status == 0">活动来源： {{item.activity_name}}</view>
<view class="couponList-time">{{ item.startTime }} 至 {{ item.endTime }}</view>
<view class="couponList-used" v-if="item.used_at != ''">使用时间：{{item.used_at}}</view>
</view>
<block v-if="item.status == 0">
<view class="couponList-right">
去使用
</view>
</block>
<image v-if="item.status == 1" src="/static/img/coupon_tips_00.png" class="coupoTips"></image>
<image v-if="item.status == 2" src="/static/img/coupon_tips_01.png" class="coupoTips"></image>
</view>
<view class="couponMore" v-if="item.count > 1" >
<view class="couponMore-text" @tap="couponTap" :data-id="(item.activityId)" :data-status="(item.status)">
<view class="couponMore-title">查看全部{{ item.count }}张卡券</view>
<image class="couponMore-arrow" src="/static/icon/arrow_left.png"></image>
</view>
</view>
</view>
</view>
<!-- 优惠券为空 -->
<view class="campus_tips" v-else>
<image src="/static/img/coupon_tips.png"></image>
<view>暂无优惠券</view>
</view>
</view>
</view>
<!-- 底部快捷导航 -->
<view class="navFooter">
<navigator hover-class="none" url="/pages/campus/index" class="navFooter-label">
<image src="/static/icon/navFooter_icon_00.png" mode=""></image>
活动中心
</navigator>
<view class="navFooter-label active">
<image src="/static/icon/navFooter_icon_01_active.png" mode=""></image>
我的优惠券
</view>
</view>
<!-- 漂浮窗 -->
<view class="indexFloat" @click="followBtn">
<image src="/static/img/subscribe.png" mode="aspectFill" class="indexFloat-animation"></image>
<view class="indexFloat-text">
<!-- <text>可查看大图</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.png" 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/campus'
export default {
data() {
return {
userTel : '', //用户者手机号
coupons : [], //优惠券列表
count : '', //优惠券-张数
//优惠券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/campus/signin'
});
}
}
});
}
});
},
// 生命周期函数--监听页面显示
onShow() {
// 存储环境-校园迎新活动
getApp().globalData.envType = 'campusEnv'
// 获取列表
this.couponInfo();
},
methods: {
// 卡券列表
couponInfo() {
coupon({
status: this.stateType,
type: 'school'
}).then(res=>{
this.count = res.count
this.coupons = res.list
}).catch(err => {
if (!err.login) {
uni.showModal({
title: '用户登录已过期',
content: '请重新登录',
showCancel: false,
success: res => {
if (res.confirm) {
wx.redirectTo({
url: '/pages/campus/signin'
});
}
}
});
}
})
},
// tabs 选项卡
orderTab(e){
if(this.stateType != e.currentTarget.dataset.state){
this.stateType = e.currentTarget.dataset.state
// 获取卡权益
this.couponInfo()
}
},
// 查看优惠券分组
couponTap(e) {
let id = e.currentTarget.dataset.id,
status = e.currentTarget.dataset.status
uni.navigateTo({
url: '/pages/campus/myList?id=' + id + '&status=' + status
})
},
// 优惠券跳转详情
couponUrl(e) {
let newId = e.currentTarget.dataset.id
uni.navigateTo({
url: '/pages/campus/details?id=' + newId
})
},
// 公众号展示
followBtn() {
this.followState = !this.followState
}
}
}
</script>
<style>
.campusCoupon {
width: 100vw;
}
page {
background-color: #c32631;
}
/* 用户信息 */
.user {
width: 100%;
background: linear-gradient(to right, #f9ecb7, #eed276);
font-size: 28rpx;
padding: 20rpx;
box-sizing: border-box;
color: #da2025;
display: flex;
line-height: 48rpx;
}
.user text {
font-weight: 600;
padding: 0 10rpx;
}
.user image {
width: 48rpx;
height: 48rpx;
margin-right: 10rpx;
}
/* 优惠券 */
.borderContent {
border-bottom: 140rpx solid transparent;
}
.campusCont {
background-color: #e83241;
margin: 30rpx 20rpx;
border-radius: 20rpx;
padding: 20rpx;
box-sizing: border-box;
}
.campusCont.active {
border-bottom: 140rpx solid transparent;
}
.couponTab{
background-color: #d32838;
color: #ffffff;
display: flex;
padding: 20rpx 40rpx 0;
box-sizing: border-box;
border-radius: 20rpx 20rpx 0 0;
}
.couponTab-label {
flex: 3;
text-align: center;
position: relative;
padding: 10rpx 20rpx;
box-sizing: border-box;
font-size: 30rpx;
border-radius: 20rpx 20rpx 0 0;
}
.couponTab-label.active {
background-color: #fdf4ed;
color: #b9505f;
}
.couponTab-label view {
font-size: 24rpx;
margin-top: 6rpx;
}
.coupon {
padding-bottom: 10rpx;
box-sizing: border-box;
}
.couponCont {
margin: 0 0 30rpx;
width: 100%;
border-radius: 10rpx;
overflow: hidden;
}
.couponCont:last-child {
margin-bottom: 0;
}
.couponList {
background: #fdf4ed;
width: 100%;
height: 160rpx;
position: relative;
}
.couponList-left {
position: relative;
left: 0;
top: 0;
width: 160rpx;
height: 160rpx;
}
.couponList-img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.couponList-icon {
position: absolute;
left: calc(50% - 56rpx);
top: calc(50% - 50rpx);
z-index: 2;
width: 100rpx;
height: 100rpx;
background: #fff;
border-radius: 50%;
padding: 20rpx;
box-sizing: border-box;
}
.couponList-icon image {
width: 100%;
height: 100%;
}
.couponList-center {
position: absolute;
left: 180rpx;
top: 35rpx;
width: calc(100% - 330rpx);
}
.couponList-center.active {
top: 15rpx;
}
.couponList-title {
margin-bottom: 10rpx;
font-size: 28rpx;
font-weight: 600;
color: #743e3e;
}
.couponList-time,
.couponList-used {
font-size: 24rpx;
color: grey;
}
.couponList-used {
margin-bottom: 14rpx;
color: #855757;
}
.couponList-right {
background: transparent;
border: 2rpx solid #fc9f36;
color: #f39124;
border-radius: 30rpx;
width: 110rpx;
text-align: center;
height: 50rpx;
line-height: 50rpx;
position: absolute;
right: 20rpx;
top: 55rpx;
font-size: 24rpx;
}
.couponList-right.active {
background: #dddddd;
}
.couponMore {
font-size: 28rpx;
color: #686868;
position: relative;
height: 120rpx;
}
.couponMore::after,
.couponMore::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;
}
.couponMore::after {
width: calc(100% - 40rpx);
top: 70rpx;
left: 20rpx;
}
.couponMore::before {
width: calc(100% - 80rpx);
top: 90rpx;
left: 40rpx;
}
.couponMore-text {
display: flex;
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 99;
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 {
width: 28rpx;
height: 28rpx;
margin-top: 26rpx;
}
.couponCont.active .couponList-img,
.couponCont.active .couponList-icon {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
.coupoTips {
position: absolute;
top: 22rpx;
right: 20rpx;
z-index: 99;
width: 120rpx;
height: 120rpx;
}
.campus_tips {
text-align: center;
width: 100%;
background-color: #ffffff;
border-radius: 0 0 20rpx 20rpx;
padding: 80rpx 0;
font-size: 28rpx;
}
.campus_tips image {
width: 160rpx;
height: 160rpx;
margin-bottom: 20rpx;
}
/* 底部快捷导航 */
.navFooter {
position: fixed;
width: 100%;
height: 110rpx;
background-color: #FFFFFF;
z-index: 1000;
left: 0;
bottom: 0;
font-size: 26rpx;
display: flex;
}
.navFooter-label {
flex: 2;
text-align: center;
width: 50%;
color: #a2a2a2;
}
.navFooter-label.active {
color: #c32631;
}
.navFooter-label image {
width: 54rpx;
height: 54rpx;
display: block;
margin: 8rpx auto 0;
}
/* 漂浮弹出层 */
.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;
}
</style>