434 lines
15 KiB
Vue
434 lines
15 KiB
Vue
<template>
|
|
<view>
|
|
<!-- 权益数据 -->
|
|
<view class="cont">
|
|
<view class="contBack">
|
|
<image class="classBack" src="https://card.ysd-bs.com/storage/materials/2021/09/01/class_back_01.png" mode="scaleToFill"></image>
|
|
<view class="classCircle"></view>
|
|
<view class="rightsCont">
|
|
<view class="rightsCont-tips" v-if="infoData.two_title != null">
|
|
{{ infoData.two_title }}
|
|
</view>
|
|
<view class="nowrap rightsCont-title">
|
|
{{ infoData.three_title == null ? '' : infoData.three_title }}
|
|
</view>
|
|
<view class="nowrap rightsCont-btn">
|
|
{{ infoData.two_description }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 公告 -->
|
|
<view class="indexNews">
|
|
<image src="/static/icon/news_icon.png"></image>
|
|
<view class="marquee_container" style="--marqueeWidth--:-30em">
|
|
<view class="marquee_text" :class="{active : noticeData.length > 20}">{{ noticeData }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 卡券专区 -->
|
|
<view class="special">
|
|
<view class="special-title">卡券专区</view>
|
|
<view class="special-list">
|
|
<block v-if="infoItems.length > 0">
|
|
<view class="special-label" v-for="(item,index) in infoItems" :key="index" @click="rightNav(item.right_config_id, item.from)">
|
|
<view class="special-rebate" v-if="item.label != ''">{{ item.label }}</view>
|
|
<scroll-view scroll-x class="welfareCont-top" scroll-with-animation>
|
|
<block v-if="item.logos != ''">
|
|
<view class="welfareCont-list-img" v-for="(items,indexItem) in item.logos" :key="indexItem">
|
|
<image :src="items" mode="aspectFill"></image>
|
|
</view>
|
|
</block>
|
|
<block v-else>
|
|
<view class="welfareCont-list-img">
|
|
<image src="https://card.ysd-bs.com/storage/materials/2021/09/14/defaultImg.png" mode="aspectFill"></image>
|
|
</view>
|
|
</block>
|
|
</scroll-view>
|
|
<view class="special-text">
|
|
<view class="nowrap special-name">{{ item.title }}</view>
|
|
<view class="special-tips">{{ item.subtitle }}</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<block v-else>
|
|
<view class="legalTips">
|
|
<image src="/static/img/null_icon.png"></image>
|
|
<text>抱歉, 暂无内容</text>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 购买须知 -->
|
|
<view class="notice">
|
|
<view class="noticeTitle" @click="noticeTap">
|
|
<view class="noticeTitle-flex">
|
|
<image class="noticeTitle-img" src="/static/icon/notice_icon.png"></image>
|
|
购买前请仔细阅读内容介绍
|
|
</view>
|
|
<image class="noticeTitle-row" :class="{active : contentShow}" src="/static/icon/arrow_right_black.png"></image>
|
|
</view>
|
|
<view class="noticeText" :class="{active : contentShow}">
|
|
<view class="noticeText-cont">
|
|
<rich-text :nodes="content"></rich-text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { classify, washcarUrl } from '@/apis/interfaces/rights'
|
|
export default {
|
|
data() {
|
|
return {
|
|
noticeData : '', // 公告
|
|
infoData : '', // 权益数据
|
|
infoItems : '', // 卡券专区
|
|
content : '', // 内容简介
|
|
contentShow: false // 内容简介-显示状态
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.indexNav(options.id,options.areaname,options.latitude,options.userlng)
|
|
},
|
|
methods:{
|
|
// 卡权益分类
|
|
indexNav(id, areaname,latitude,userlng) {
|
|
classify(id, {
|
|
area_name: areaname,
|
|
user_lng : latitude,
|
|
user_lat : userlng
|
|
}).then(res=>{
|
|
this.noticeData = res.notice
|
|
this.infoData = res.info
|
|
this.infoItems = res.items
|
|
this.content = res.info.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
|
|
}).catch(err=>{
|
|
if(!err.login){
|
|
// 写入缓存
|
|
uni.setStorage({
|
|
key : 'token',
|
|
data : ''
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
// 须知展开收起状态
|
|
noticeTap() {
|
|
this.contentShow = !this.contentShow
|
|
},
|
|
|
|
// 活动中心权益跳转详情
|
|
rightNav(rightid,rightfrom) {
|
|
if(uni.getStorageSync("token")) {
|
|
if(rightfrom == 'washcar') {
|
|
// 先做成固定跳转
|
|
// uni.navigateTo({
|
|
// url: "/pages/car/index?welfare_id=" + "&right_id=" +rightid
|
|
// })
|
|
// return
|
|
washcarUrl({
|
|
welfare_id : '',
|
|
right_config_id : rightid
|
|
}).then(res=>{
|
|
const newUrl = res
|
|
let url= encodeURIComponent(newUrl)
|
|
uni.redirectTo({
|
|
// 跳转到webview页面
|
|
url: `/pages/washcar/washcar?url=${url}`
|
|
});
|
|
})
|
|
} else {
|
|
// 跳转分类页
|
|
uni.navigateTo({
|
|
url: '/pages/rights/index?id=' + rightid
|
|
})
|
|
}
|
|
return
|
|
}
|
|
uni.navigateTo({
|
|
url: "/pages/auth/login"
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// 权益数据
|
|
.cont {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
.contBack {
|
|
position: relative;
|
|
width: 200%;
|
|
height: 400rpx;
|
|
left: -50%;
|
|
text-align: center;
|
|
background: #000000;
|
|
border-radius: 0 0 100% 100%;
|
|
overflow: hidden;
|
|
&::after {
|
|
width: 100%;
|
|
height: 30rpx;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 2;
|
|
content: '';
|
|
background-image: linear-gradient(transparent, rgba(0,0,0,.25));
|
|
}
|
|
&::before {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
content: '';
|
|
z-index: 1;
|
|
background-color: rgba(255,255,255,.1);
|
|
}
|
|
.classBack {
|
|
position: absolute;
|
|
left: 30%;
|
|
right: 30%;
|
|
width: 40%;
|
|
top: 40rpx;
|
|
}
|
|
.classCircle {
|
|
position: relative;
|
|
&::after {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
content: '';
|
|
z-index: 1;
|
|
background-color: rgba(255,255,255,.1);
|
|
}
|
|
}
|
|
.rightsCont {
|
|
position: absolute;
|
|
z-index: 3;
|
|
left: calc(30% - 2rpx);
|
|
right: calc(30% - 2rpx);
|
|
width: calc(40% + 4rpx);
|
|
top: 58rpx;
|
|
.rightsCont-tips {
|
|
color: #fff;
|
|
}
|
|
.rightsCont-title {
|
|
color: #63320a;
|
|
font-size: 60rpx;
|
|
margin: 60rpx 0 20rpx;
|
|
padding: 0 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.rightsCont-btn {
|
|
background-color: #f4dfcc;
|
|
width: 100%;
|
|
line-height: 70rpx;
|
|
font-size: 38rpx;
|
|
color: #2d2d2d;
|
|
padding: 0 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 公告
|
|
.indexNews {
|
|
display: flex;
|
|
font-size: 28rpx;
|
|
line-height: 46rpx;
|
|
background: #c4c4c4;
|
|
border-radius: 10rpx;
|
|
padding: 25rpx 20rpx;
|
|
box-sizing: border-box;
|
|
margin: 30rpx 20rpx;
|
|
image {
|
|
width: 42rpx;
|
|
height: 42rpx;
|
|
margin: 4rpx 20rpx 0 0;
|
|
}
|
|
.marquee_container {
|
|
width: calc(100% - 40rpx);
|
|
overflow: hidden;
|
|
&:hover {
|
|
/* 不起作用 */
|
|
animation-play-state: paused;
|
|
}
|
|
.marquee_text {
|
|
font-size: 28rpx;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
&.active {
|
|
animation-name: around;
|
|
animation-duration: 20s;
|
|
/*过渡时间*/
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: linear;
|
|
}
|
|
/*首页跑马灯效果*/
|
|
@keyframes around {
|
|
from {
|
|
margin-left: 60rpx;
|
|
}
|
|
to {
|
|
/* var接受传入的变量 */
|
|
margin-left: var(--marqueeWidth--);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 卡券专区
|
|
.special {
|
|
border-radius: 10rpx;
|
|
padding: 25rpx 20rpx;
|
|
box-sizing: border-box;
|
|
background: #fff;
|
|
margin: 30rpx 20rpx;
|
|
.special-list {
|
|
margin: 20rpx -10rpx 0;
|
|
flex-wrap: wrap;
|
|
display: flex;
|
|
.special-label {
|
|
margin: 10rpx;
|
|
width: calc(50% - 20rpx);
|
|
height: 330rpx;
|
|
flex: 0 0 calc(50% - 20rpx);
|
|
border: 4rpx solid #fb9b00;
|
|
background-color: #ffe0b8;
|
|
border-radius: 10rpx;
|
|
text-align: center;
|
|
padding: 20rpx 0;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
.special-rebate {
|
|
position: absolute;
|
|
top: -30rpx;
|
|
right: 10rpx;
|
|
background: #fe0002;
|
|
color: #fff;
|
|
border-radius: 30rpx;
|
|
line-height: 52rpx;
|
|
height: 52rpx;
|
|
font-size: 26rpx;
|
|
padding: 0 20rpx;
|
|
font-weight: 600;
|
|
}
|
|
.welfareCont-top {
|
|
white-space: nowrap;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
width: 100%;
|
|
padding: 0 10rpx;
|
|
box-sizing: border-box;
|
|
margin: 10rpx 0;
|
|
.welfareCont-list-img {
|
|
border: 2rpx solid #eccc69;
|
|
border-radius: 50%;
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
display: inline-block;
|
|
margin: 0 10rpx;
|
|
overflow: hidden;
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
.special-text {
|
|
padding: 0 15rpx;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
font-size: 26rpx;
|
|
border-top: 4rpx dashed #fb9b00;
|
|
margin-top: 20rpx;
|
|
padding-top: 20rpx;
|
|
.special-name {
|
|
color: #6f4a2d;
|
|
font-weight: 600;
|
|
font-size: 28rpx;
|
|
}
|
|
.special-tips {
|
|
background-color: #242424;
|
|
color: #fff;
|
|
border-radius: 10rpx;
|
|
padding: 4rpx 20rpx;
|
|
line-height: 46rpx;
|
|
height: 46rpx;
|
|
margin-top: 20rpx;
|
|
font-size: 24rpx;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 内容介绍
|
|
.notice {
|
|
border-radius: 10rpx;
|
|
padding: 25rpx 20rpx;
|
|
box-sizing: border-box;
|
|
background: #c4c4c4;
|
|
margin: 30rpx 20rpx;
|
|
.noticeTitle {
|
|
color: #747d86;
|
|
display: flex;
|
|
line-height: 46rpx;
|
|
.noticeTitle-flex {
|
|
flex: 1;
|
|
display: flex;
|
|
font-size: 30rpx;
|
|
color: #000;
|
|
.noticeTitle-img {
|
|
width: 46rpx;
|
|
height: 46rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
.noticeTitle-row {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-top: 6rpx;
|
|
transform:rotate(-180deg);
|
|
&.active {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
}
|
|
.noticeText {
|
|
font-size: 26rpx;
|
|
height: 0;
|
|
overflow: hidden;
|
|
&.active {
|
|
height: auto;
|
|
}
|
|
.noticeText-cont {
|
|
line-height: 60rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 权益提示 */
|
|
.legalTips {
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
color: #999;
|
|
image {
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
</style>
|