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

[本时生活h5端]

Browse Source
This commit is contained in:
张慢慢
2023-06-21 17:19:58 +08:00
commit ebb9575bd0
284 changed files with 39689 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

433
pages/classify/classify.vue Normal file
View File

@@ -0,0 +1,433 @@
<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>