[更新]
This commit is contained in:
张慢慢
84
pages/classify/classify.js
Normal file
84
pages/classify/classify.js
Normal file
@@ -0,0 +1,84 @@
|
||||
/*
|
||||
* 本时生活
|
||||
*/
|
||||
|
||||
const app = getApp()
|
||||
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
noticeData : '', //公告
|
||||
infoData : '', //权益数据
|
||||
content : '', //内容简介
|
||||
noticeShow : '', //公告开关
|
||||
infoItems : [], //卡券专区
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad (options) {
|
||||
this.indexNav(options.id)
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 卡权益分类
|
||||
*/
|
||||
indexNav(id) {
|
||||
wx.$api.index.classify(id).then(res=>{
|
||||
this.setData({
|
||||
noticeData : res.data.notice,
|
||||
infoData : res.data.info,
|
||||
infoItems : res.data.items,
|
||||
content : res.data.info.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"'),
|
||||
})
|
||||
}).catch(err=>{
|
||||
if(!err.login){
|
||||
// 写入缓存
|
||||
wx.setStorage({
|
||||
key : 'token',
|
||||
data : ''
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 须知展开收起状态
|
||||
*/
|
||||
noticeTap() {
|
||||
this.setData({
|
||||
noticeShow : !this.data.noticeShow
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 处理未登录时的转跳
|
||||
*/
|
||||
userNav(e){
|
||||
let id = e.currentTarget.dataset.id
|
||||
wx.getStorage({
|
||||
key : 'token',
|
||||
success:res=>{
|
||||
wx.navigateTo({
|
||||
url: '/pages/rights/rights?rightsId=' + id
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
wx.navigateTo({
|
||||
url: "/pages/login/login"
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
6
pages/classify/classify.json
Normal file
6
pages/classify/classify.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarBackgroundColor": "#000000",
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationBarTitleText": "卡券权益"
|
||||
}
|
||||
70
pages/classify/classify.wxml
Normal file
70
pages/classify/classify.wxml
Normal file
@@ -0,0 +1,70 @@
|
||||
<view class="cont">
|
||||
<view class="contBack">
|
||||
<image class="classBack" src="/static/img/class_back_01.png" mode="scaleToFill"></image>
|
||||
<view class="classCircle"></view>
|
||||
<view class="rightsCont">
|
||||
<view class="rightsCont-tips" wx: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 indexColor">
|
||||
<image src="/static/icon/news_icon.png"></image>
|
||||
<view class="marquee_container" style="--marqueeWidth--:-30em">
|
||||
<view class="marquee_text {{ noticeData.length > 20 ? 'active' : ''}}">{{noticeData}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 卡券专区 -->
|
||||
<view class="special">
|
||||
<view class="special-title">卡券专区</view>
|
||||
<view class="special-list">
|
||||
<block wx:if="{{infoItems.length > 0}}">
|
||||
<view bindtap="userNav" class="special-label" wx:for="{{infoItems}}" wx:key="infoItems"
|
||||
data-id="{{item.right_config_id}}">
|
||||
<view class="special-rebate" wx:if="{{item.label != ''}}">{{item.label}}</view>
|
||||
<scroll-view scroll-x class="welfareCont-top" scroll-with-animation>
|
||||
<view class="welfareCont-list-img" wx:for="{{item.logos}}" wx:key="logos" wx:for-item="items">
|
||||
<image src="{{items}}" mode="aspectFill"></image>
|
||||
</view>
|
||||
</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 wx:else>
|
||||
<view class="legalTips">
|
||||
<image src="/static/img/null_icon.png"></image>
|
||||
<text>抱歉, 暂无内容</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 购买须知 -->
|
||||
<view class="notice indexColor">
|
||||
<view class="noticeTitle" bindtap="noticeTap">
|
||||
<view class="noticeTitle-flex">
|
||||
<image class="noticeTitle-img" src="/static/icon/notice_icon.png"></image>
|
||||
购买前请仔细阅读内容介绍
|
||||
</view>
|
||||
<image class="noticeTitle-row {{noticeShow ? 'active' : ''}}" src="/static/icon/arrow_right_black.png"></image>
|
||||
</view>
|
||||
<view class="noticeText {{noticeShow ? 'active' : ''}}">
|
||||
<!-- <view class="noticeText-top">内容介绍</view> -->
|
||||
<view class="noticeText-cont">
|
||||
<rich-text nodes="{{content}}"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
319
pages/classify/classify.wxss
Normal file
319
pages/classify/classify.wxss
Normal file
@@ -0,0 +1,319 @@
|
||||
/* 卡券权益 */
|
||||
.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;
|
||||
}
|
||||
|
||||
.contBack::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));
|
||||
}
|
||||
|
||||
.classBack {
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
right: 30%;
|
||||
width: 40%;
|
||||
top: 40rpx;
|
||||
}
|
||||
|
||||
.classCircle {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.classCircle::after,
|
||||
.contBack::before {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
z-index: 1;
|
||||
background-color: rgba(255,255,255,.1);
|
||||
}
|
||||
|
||||
.classCircle::after {
|
||||
left: 20%;
|
||||
top: -20rpx;
|
||||
width: 260rpx;
|
||||
height: 260rpx;
|
||||
}
|
||||
|
||||
.contBack::before {
|
||||
right: 20%;
|
||||
top: 55%;
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
}
|
||||
|
||||
.rightsCont {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: calc(30% - 2rpx);
|
||||
right: calc(30% - 2rpx);
|
||||
width: calc(40% + 4rpx);
|
||||
top: 58rpx;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.rightsCont-tips {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 须知 */
|
||||
.notice,
|
||||
.indexNews,
|
||||
.special {
|
||||
border-radius: 10rpx;
|
||||
padding: 25rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
margin: 30rpx 20rpx;
|
||||
}
|
||||
|
||||
.indexColor {
|
||||
background: #c4c4c4;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.noticeText {
|
||||
font-size: 26rpx;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.noticeText.active {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.noticeText-top {
|
||||
margin: 30rpx 0 10rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.noticeText-cont {
|
||||
line-height: 60rpx;
|
||||
}
|
||||
|
||||
.noticeTitle-row {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-top: 6rpx;
|
||||
transform:rotate(-180deg);
|
||||
}
|
||||
|
||||
.noticeTitle-row.active {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
|
||||
/* 公告 */
|
||||
.indexNews {
|
||||
display: flex;
|
||||
font-size: 28rpx;
|
||||
line-height: 46rpx;
|
||||
}
|
||||
|
||||
.indexNews image {
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
margin: 4rpx 20rpx 0 0;
|
||||
}
|
||||
|
||||
/* 卡券专区 */
|
||||
.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-label:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.welfareCont-list-img 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;
|
||||
}
|
||||
|
||||
/* 滚动 */
|
||||
/*首页跑马灯效果*/
|
||||
@keyframes around {
|
||||
from {
|
||||
margin-left: 60rpx;
|
||||
}
|
||||
|
||||
to {
|
||||
/* var接受传入的变量 */
|
||||
margin-left: var(--marqueeWidth--);
|
||||
}
|
||||
}
|
||||
|
||||
.marquee_container {
|
||||
width: calc(100% - 40rpx);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.marquee_container:hover {
|
||||
/* 不起作用 */
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.marquee_text {
|
||||
font-size: 28rpx;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.marquee_text.active {
|
||||
animation-name: around;
|
||||
animation-duration: 20s;
|
||||
/*过渡时间*/
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
|
||||
/* 权益提示 */
|
||||
.legalTips {
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.legalTips image {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
Reference in New Issue
Block a user