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

[本时生活小程序-线上备份]

Browse Source
This commit is contained in:
张慢慢
2021-05-21 15:02:18 +08:00
commit f0302de899
206 changed files with 12884 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
pages/classify/classify.js Normal file
View 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
View File

@@ -0,0 +1,6 @@
{
"usingComponents": {},
"navigationBarBackgroundColor": "#000000",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "卡券权益"
}

70
pages/classify/classify.wxml Normal file
View 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
View 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: 10s;
/*过渡时间*/
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;
}