750 lines
20 KiB
Vue
750 lines
20 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">
|
||
<view v-if="isUser">
|
||
<block v-if="giftPackArr.length > 0">
|
||
<view class="film" v-for="(item, index) in giftPackArr" :key="index">
|
||
<view class="filMargin">
|
||
<view class="filmTitle">
|
||
{{item.title}}
|
||
</view>
|
||
<view class="filmList">
|
||
<view class="filmList-top">
|
||
<view class="filmList-top-name">
|
||
{{ item.two_title || '-' }}<text>{{ item.description || '-'}}</text>
|
||
</view>
|
||
<view class="filmList-top-price" @click="judgeGeneral(item.activity_month_category_id, item.is_choose)">
|
||
<text>立即</text>
|
||
<text>兑换</text>
|
||
</view>
|
||
</view>
|
||
<view class="filmList-text">
|
||
<text>{{ item.name }}</text>
|
||
</view>
|
||
<view class="filmList-tips">兑换前请仔细阅读详细信息。</view>
|
||
<view class="filmList-more" @click="moreClick(index)">详细信息<image src="/static/icon/giftPack-icon-yellow.png" class="filmList-more-icon" :class="{active: item.schemesShow }" mode="aspectFill"></image></view>
|
||
|
||
<view class="filmList-show" v-if="item.schemesShow">
|
||
<rich-text :nodes="item.content"></rich-text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<!-- 列表为空 -->
|
||
<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="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>
|
||
|
||
<!-- 已兑换 -->
|
||
<block v-if="tabType == 1">
|
||
<view 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="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="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 class="tipsBack" v-if="generalShow"></view>
|
||
<view class="tipsCont" v-if="generalShow">
|
||
<view class="tipsWhite">
|
||
<image class="tipsCont-img" src="/static/img/dhImg.png" mode="widthFix"></image>
|
||
<view class="tipsWhite-top">
|
||
<view class="tipsWhite-name">
|
||
兑换权益提示
|
||
</view>
|
||
<view class="tipsWhite-text">
|
||
<text>兑换权益前请仔细阅读，本权益项下的</text>
|
||
<text>【详细信息】。确认兑换后，您本月将不能</text>
|
||
<text>换取其他权益。如确定请点击【立即兑换】</text>
|
||
</view>
|
||
</view>
|
||
<view class="tipsWhite-btn">
|
||
<view class="tipsWhite-btn-go" @click="generalShow = false">
|
||
暂不兑换
|
||
</view>
|
||
<view class="tipsWhite-btn-go" @click="payment">
|
||
立即兑换
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { index, coupon, monthsChoose } 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, //卡券状态
|
||
generalId : '', //卡券id
|
||
generalShow : false //卡券兑换提示
|
||
}
|
||
},
|
||
|
||
// 生命周期函数--监听页面加载
|
||
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=>{
|
||
var listData = res.categories
|
||
for(let val in listData){
|
||
listData[val].schemesShow = false
|
||
}
|
||
|
||
console.log(listData)
|
||
this.giftPackArr = listData
|
||
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
|
||
},
|
||
|
||
// 兑换按钮
|
||
judgeGeneral(id, can) {
|
||
this.generalId = id
|
||
if(!can) {
|
||
this.generalShow = !this.generalShow
|
||
return
|
||
}
|
||
uni.navigateTo({
|
||
url: '/pages/giftPack/list?id=' + id
|
||
})
|
||
},
|
||
|
||
// 兑换跳转
|
||
payment(){
|
||
monthsChoose(this.generalId).then(res=>{
|
||
this.generalShow = false
|
||
uni.navigateTo({
|
||
url: '/pages/giftPack/list?id=' + this.generalId
|
||
})
|
||
}).catch(err=>{})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
background: linear-gradient(to bottom, #fff9f9, #fff9f9);
|
||
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: 0 30rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.filMargin {
|
||
padding: 0 0 30rpx;
|
||
}
|
||
.filmTitle {
|
||
background: linear-gradient(to right, #fce1d6, #fce1d6);
|
||
line-height: 80rpx;
|
||
box-shadow: -4px 0 10px rgba(134,97,33,.2);
|
||
text-align: center;
|
||
border-radius: 10rpx 10rpx 0 0;
|
||
color: #ea7e4d;
|
||
margin: 0 20rpx;
|
||
}
|
||
.filmList {
|
||
position: relative;
|
||
background: linear-gradient(to right, #f1824a, #fdbe71);
|
||
box-shadow: 0px 6px 10px rgba(134,97,33,.1);
|
||
border-radius: 10rpx;
|
||
padding: 50rpx 30rpx 30rpx;
|
||
box-sizing: border-box;
|
||
margin-bottom: 20rpx;
|
||
overflow: hidden;
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
.filmList-tag {
|
||
transform: rotate(45deg);
|
||
position: absolute;
|
||
padding: 10px 0;
|
||
right: -33px;
|
||
top: -10px;
|
||
width: 150px;
|
||
background: red;
|
||
.filmList-tag-text {
|
||
position: absolute;
|
||
color: #FFFFFF;
|
||
right: 20px;
|
||
text-align: center;
|
||
top: 2px;
|
||
font-size: 12px;;
|
||
transform:rotate(-360deg);
|
||
}
|
||
}
|
||
.filmList-more {
|
||
font-size: 26rpx;
|
||
text-align: left;
|
||
color: #ffedc8;
|
||
margin-top: 15rpx;
|
||
line-height: 40rpx;
|
||
.filmList-more-icon {
|
||
width: 34rpx;
|
||
height: 34rpx;
|
||
vertical-align: -6rpx;
|
||
margin-left: 5rpx;
|
||
transition: .2s;
|
||
&.active {
|
||
transform:rotate(-180deg);
|
||
}
|
||
}
|
||
}
|
||
.filmList-show {
|
||
font-size: 24rpx;
|
||
border-radius: 10rpx;
|
||
background-color: rgba(255,255,255,.1);
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
margin-top: 20rpx;
|
||
opacity: .9;
|
||
color: #ffedc8;
|
||
text-align: justify;
|
||
line-height: 42rpx;
|
||
text {
|
||
display: block;
|
||
}
|
||
}
|
||
.filmList-top {
|
||
display: flex;
|
||
margin-bottom: 10rpx;
|
||
.filmList-top-name {
|
||
width: calc(100% - 140rpx);
|
||
margin-right: 20rpx;
|
||
color: #fff6f6;
|
||
font-size: 32rpx;
|
||
margin-top: 10rpx;
|
||
text {
|
||
display: block;
|
||
font-size: 25rpx;
|
||
margin-top: 15rpx;
|
||
}
|
||
}
|
||
.filmList-top-price {
|
||
position: relative;
|
||
background: linear-gradient(to right, #fff9f9, #fff9f9);
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 50%;
|
||
color: #fa803f;
|
||
text-align: center;
|
||
padding-top: 20rpx;
|
||
font-size: 30rpx;
|
||
box-sizing: border-box;
|
||
&.active {
|
||
background: linear-gradient(to right, #a1a1a1, #a1a1a1);
|
||
}
|
||
text {
|
||
display: block;
|
||
}
|
||
.filmList-tag{
|
||
position: absolute;
|
||
background: #ff0000;
|
||
color: white;
|
||
font-size: 20rpx;
|
||
top: -10%;
|
||
left: 20%;
|
||
width: 120rpx;
|
||
padding: 0 10rpx;
|
||
line-height: 40rpx;
|
||
border-radius: 15rpx;
|
||
transform: scale(0.58)
|
||
}
|
||
}
|
||
}
|
||
.filmList-text {
|
||
font-size: 20rpx;
|
||
color: #c1c1c1;
|
||
// margin-left: -70rpx;
|
||
text {
|
||
display: block;
|
||
// transform: scale(0.8)
|
||
}
|
||
}
|
||
.filmList-tips {
|
||
font-size: 24rpx;
|
||
color: #ffedc8;
|
||
margin-top: 30rpx;
|
||
}
|
||
}
|
||
|
||
// 已兑换
|
||
.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: #f55249;
|
||
}
|
||
}
|
||
}
|
||
|
||
// tab
|
||
.indexTab {
|
||
display: flex;
|
||
margin-bottom: 30rpx;
|
||
.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: #f55249;
|
||
}
|
||
&.active {
|
||
color: #f55249;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 是否兑换弹出
|
||
.tipsBack {
|
||
position: fixed;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 9;
|
||
background-color: rgba(0, 0, 0, .8);
|
||
}
|
||
.tipsCont {
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-box-pack: center;
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
z-index: 10;
|
||
padding: 0 10%;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
}
|
||
|
||
.tipsWhite {
|
||
background-color: #ffffff;
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.tipsWhite-top {
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
}
|
||
|
||
.tipsCont-img {
|
||
width: 40%;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.tipsWhite-name {
|
||
text-align: center;
|
||
color: #f55249;
|
||
font-size: 34rpx;
|
||
font-weight: 600;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
|
||
.tipsWhite-text {
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
line-height: 48rpx;
|
||
text {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.tipsWhite-btn {
|
||
display: flex;
|
||
padding: 20rpx 10rpx 30rpx;
|
||
box-sizing: border-box;
|
||
.tipsWhite-btn-go {
|
||
flex: 2;
|
||
color: #fff;
|
||
margin: 0 15rpx;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
border: 2rpx solid #F6F6F6;
|
||
background-color: #f55249;
|
||
border-radius: 10rpx;
|
||
&:first-child {
|
||
color: #333333;
|
||
background-color: #ffffff;
|
||
border: 2rpx solid #cccccc;
|
||
}
|
||
}
|
||
}
|
||
</style>
|