475 lines
12 KiB
Vue
475 lines
12 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="content-border">
|
||
<view v-for="(item, idx) in adverts" :key="item.cover">
|
||
<image class="campusBanner" :src="item.cover" mode="widthFix"></image>
|
||
</view>
|
||
<view class="recommend"></view>
|
||
<!-- tab -->
|
||
<view class="indexTab">
|
||
<view class="indexTab-item" :class="{active : tabType == item.used}" @tap="orderTab" v-for="(item, index) in tabList" :key="index" :data-state="(item.used)">
|
||
<view class="indexTab-title">
|
||
{{ item.title }}
|
||
</view>
|
||
<view class="indexTab-number">
|
||
<block v-if="isUser">({{item.used == 0 ? '剩余' + numbers + '次' : count + '张'}})</block>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 可兑换 -->
|
||
<block v-if="tabType == 0">
|
||
<block v-if="giftPackArr.length > 0">
|
||
<navigator class="film" v-for="(item, index) in giftPackArr" :key="index" hover-class="none" :url="'/pages/giftPack/list?id=' + item.activity_month_category_id">
|
||
<view class="film-back" :style="{ backgroundImage: 'url(' + item.cover + ')' }">
|
||
<view class="film-title">{{item.title}}</view>
|
||
<view class="film-btn">去兑换</view>
|
||
</view>
|
||
</navigator>
|
||
</block>
|
||
<!-- 列表为空 -->
|
||
<view class="campusTips" v-else>
|
||
<view class="campusTips-cont">
|
||
<image src="/static/img/giftPack-null.png" mode="aspectFill"></image>
|
||
<view>暂无可兑换的卡券</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
|
||
<!-- 已兑换 -->
|
||
<block v-if="tabType == 1">
|
||
<view class="" v-if="isUser">
|
||
<block v-if="couponArr.length > 0">
|
||
<view class="coupon" v-for="(item, index) in couponArr" :key="index">
|
||
<view class="couponItem">
|
||
<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="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="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<navigator class="couponItem-btn" hover-class="none" :url="'/pages/giftPack/details?id=' + item.id">
|
||
立即使用
|
||
</navigator>
|
||
</view>
|
||
<view class="couponItem-cont-text" v-if="item.couponShow">
|
||
<rich-text :nodes="item.remark"></rich-text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<!-- 列表为空 -->
|
||
<view class="campusTips" v-else>
|
||
<view class="campusTips-cont">
|
||
<image src="/static/img/giftPack-null.png"></image>
|
||
<view>可使用的卡券暂时没有啦~</view>
|
||
<navigator hover-class="none" url="/pages/giftPack/myCoupon" class="campusTips-cont-go">我的优惠券</navigator>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="campusTips" v-else>
|
||
<view class="campusTips-cont">
|
||
<image src="/static/img/giftPack-null.png"></image>
|
||
<view>请您先登录，进行优惠券查看~</view>
|
||
<navigator hover-class="none" url="/pages/giftPack/signin" class="campusTips-cont-go">立即登录</navigator>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
|
||
<!-- 按钮 -->
|
||
<view class="campusBtn">
|
||
<navigator url="/pages/giftPack/index" hover-class="none" class="campusBtn-go active">
|
||
<image class="campusBtn-iocn" src="/static/img/giftPack-user00_active.png" mode="widthFix"></image>
|
||
<view class="campusBtn-name">
|
||
活动首页
|
||
</view>
|
||
</navigator>
|
||
<navigator url="/pages/giftPack/user" hover-class="none" class="campusBtn-go">
|
||
<image class="campusBtn-iocn" src="/static/img/giftPack-user01.png" mode="widthFix"></image>
|
||
<view class="campusBtn-name">
|
||
个人中心
|
||
</view>
|
||
</navigator>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { index, coupon } from '@/apis/interfaces/giftPack'
|
||
export default {
|
||
data() {
|
||
return {
|
||
isUser : false, // 用户是否登录
|
||
giftPackArr : [],
|
||
adverts : [],
|
||
couponArr : [],
|
||
numbers : '',
|
||
count : '',
|
||
|
||
//Tab列表
|
||
tabList : [
|
||
{ title : "可兑换", used: 0 },
|
||
{ title : "已兑换", used: 1 }
|
||
],
|
||
tabType : 0, //卡券状态
|
||
}
|
||
},
|
||
|
||
// 生命周期函数--监听页面加载
|
||
onLoad(options) {},
|
||
|
||
// 生命周期函数--监听页面显示
|
||
onShow() {
|
||
// 存储环境-月兑活动
|
||
getApp().globalData.envType = 'giftPEnv'
|
||
|
||
if(uni.getStorageSync("token")) {
|
||
this.isUser = true
|
||
}
|
||
|
||
// 获取首页数据
|
||
this.indexInfo()
|
||
|
||
},
|
||
methods: {
|
||
// 首页数据
|
||
indexInfo() {
|
||
if(this.tabType == 0) {
|
||
// 获取首页数据
|
||
index().then(res=>{
|
||
this.giftPackArr = res.categories
|
||
this.numbers = res.numbers
|
||
this.count = res.coupons_count
|
||
this.adverts = res.adverts
|
||
}).catch(err=>{})
|
||
} else {
|
||
if(uni.getStorageSync("token")) {
|
||
// 获取优惠券数据
|
||
coupon().then(res=>{
|
||
var listData = res.data
|
||
for(let val in listData){
|
||
listData[val].couponShow = false
|
||
}
|
||
this.couponArr = listData
|
||
}).catch(err=>{})
|
||
}
|
||
|
||
}
|
||
},
|
||
|
||
// 处理未登录时的转跳
|
||
userNav(url){
|
||
let pageUrl = url
|
||
if(uni.getStorageSync("token")) {
|
||
uni.navigateTo({
|
||
url: pageUrl
|
||
})
|
||
return
|
||
}
|
||
// 去登录
|
||
uni.navigateTo({
|
||
url: '/pages/giftPack/signin'
|
||
})
|
||
},
|
||
|
||
// tabs 选项卡
|
||
orderTab(e){
|
||
let state = e.currentTarget.dataset.state
|
||
this.tabType = state
|
||
|
||
// 获取首页数据
|
||
this.indexInfo();
|
||
},
|
||
|
||
// 可兑换信息展开
|
||
moreClick(index) {
|
||
this.giftPackArr[index].schemesShow = !this.giftPackArr[index].schemesShow
|
||
},
|
||
|
||
// 已兑换细信息展开
|
||
moreCoupon(index) {
|
||
this.couponArr[index].couponShow = !this.couponArr[index].couponShow
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
background: linear-gradient(to bottom, #fdf5cc, #cbaf7f);
|
||
padding-bottom: 40rpx;
|
||
height: 100vh;
|
||
overflow-y: scroll;
|
||
box-sizing: border-box
|
||
}
|
||
.content-border {
|
||
border-bottom: 130rpx transparent solid;
|
||
}
|
||
|
||
// banner
|
||
.campusBanner {
|
||
width: 100%;
|
||
}
|
||
|
||
// 推荐
|
||
.recommend {
|
||
overflow: hidden;
|
||
margin-top: -60rpx;
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
.recommend-label {
|
||
text-align: center;
|
||
width: calc(50% - 20rpx);
|
||
float: left;
|
||
margin: 0 10rpx 30rpx;
|
||
.recommend-label-img {
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
margin: 0 auto 10rpx;
|
||
background: linear-gradient(to bottom, #293350, #484e74);
|
||
box-shadow: 0px 8px 6px rgba(249,228,129,.5);
|
||
border-radius: 50%;
|
||
box-sizing: border-box;
|
||
image {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
margin: 35rpx;
|
||
}
|
||
}
|
||
.recommend-label-text {
|
||
text {
|
||
display: block;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 列表
|
||
.film {
|
||
width: 100%;
|
||
padding: 10rpx 30rpx 20rpx;
|
||
box-sizing: border-box;
|
||
.film-back {
|
||
position: relative;
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
background-size: 100% 100%;
|
||
background-position: left center;
|
||
height: 180rpx;
|
||
line-height: 180rpx;
|
||
.film-title {
|
||
position: absolute;
|
||
left: 30rpx;
|
||
top: 0;
|
||
color: #FFFFFF;
|
||
font-size: 38rpx;
|
||
font-weight: 600;
|
||
}
|
||
.film-btn {
|
||
position: absolute;
|
||
font-size: 28rpx;
|
||
right: 30rpx;
|
||
top: 60rpx;
|
||
color: #ecc993;
|
||
border: 2rpx solid #ecc993;
|
||
display: inline-block;
|
||
border-radius: 80rpx;
|
||
line-height: 56rpx;
|
||
padding: 0 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
// 已兑换
|
||
.coupon {
|
||
padding: 0 30rpx 10rpx;
|
||
box-sizing: border-box;
|
||
.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: 34rpx;
|
||
height: 34rpx;
|
||
vertical-align: -6rpx;
|
||
margin-left: 5rpx;
|
||
transition: .2s;
|
||
&.active {
|
||
transform:rotate(-180deg);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 按钮
|
||
.campusBtn {
|
||
text-align: center;
|
||
color: #FFFFFF;
|
||
background-color: #fff;
|
||
display: flex;
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 130rpx;
|
||
z-index: 999;
|
||
left: 0;
|
||
bottom: 0;
|
||
font-size: 28rpx;
|
||
.campusBtn-go {
|
||
flex: 2;
|
||
padding-top: 20rpx;
|
||
.campusBtn-iocn {
|
||
width: 44rpx;
|
||
}
|
||
.campusBtn-name {
|
||
color: #abaeb2;
|
||
}
|
||
&.active .campusBtn-name {
|
||
color: #2b3452;
|
||
}
|
||
}
|
||
}
|
||
|
||
// tab
|
||
.indexTab {
|
||
display: flex;
|
||
padding-bottom: 40rpx;
|
||
.indexTab-item {
|
||
text-align: center;
|
||
font-size: 34rpx;
|
||
flex: 2;
|
||
padding-bottom: 20rpx;
|
||
position: relative;
|
||
color: #8c919f;
|
||
&::after {
|
||
position: absolute;
|
||
content: '';
|
||
left: calc(50% - 20rpx);
|
||
bottom: 0;
|
||
width: 40rpx;
|
||
height: 8rpx;
|
||
background-color: transparent;
|
||
border-radius: 40rpx;
|
||
}
|
||
&.active::after {
|
||
background-color: #27314d;
|
||
}
|
||
&.active {
|
||
color: #27314d;
|
||
font-weight: 600;
|
||
}
|
||
.indexTab-title,
|
||
.indexTab-number {
|
||
display: inline-block;
|
||
}
|
||
}
|
||
}
|
||
|
||
.campusTips {
|
||
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>
|