Skip to content

G
gxpt_wechat
Commit 11667d02 by zhangzhen
Options

内容完善

parent b0408b22
Showing with 813 additions and 68 deletions
components/toolBox/toolBox.vue
<template>
<view class="tool-box">
<view class="gitf" @tap="onNavToVip">
<image :src="assetsPath+'/gitf.png'" mode="widthFix"></image>
</view>
<view v-for="(item, index) in toolList" :key="index" class="tool-item" :class="{active:!show}"
:style="{transitionDuration: dNum+'s' }" @tap.stop="onHandle(item)">
......@@ -31,6 +34,7 @@
return {
show: true,
dNum: 0.4,
assetsPath:config.assetsPath,
toolList: [{
name: "验券",
url: config.assetsPath + '/tool_3_v1.png',
......@@ -87,6 +91,11 @@
},
methods: {
onNavToVip(){
uni.switchTab({
url:"/pages/vipCreate/vipCreate"
})
},
onGetSysConfig() {
let sysConfigList = uni.getStorageSync('sysConfig')
let s = sysConfigList.find(item=>item.configKey === 'wechat.service.url')
......@@ -176,8 +185,14 @@
position: fixed;
bottom: 10vh;
right: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
z-index: 99;
.gitf{
width: 144upx;
max-height: 150upx;
}
.tool-item {
display: flex;
flex-direction: column;
......
config/index.config.js
......@@ -3,7 +3,7 @@ const CONFIG = {
development: {
// assetsPath: 'https://www.coujio.com/wechat_static', // 静态资源路径
// assetsPath: 'https://coujiao.pseer.com/wechat_static', // 静态资源路径
assetsPath: 'http://10.24.5.167:8211/static', // 静态资源路径
assetsPath: 'http://10.24.5.63:8211/static', // 静态资源路径
// baseUrl: 'https://www.coujio.com/front-api', // 后台接口请求地址
// baseUrl: 'https://coujiao.pseer.com/front-api', // 后台接口请求地址
baseUrl: 'http://129.211.46.84:8883/front-api',
......
pages.json
......@@ -183,6 +183,13 @@
"navigationBarTitleText": "充值记录",
"enablePullDownRefresh" : false
}
},
{
"path" : "rule/rule",
"style": {
"navigationBarTitleText": "活动规则",
"enablePullDownRefresh" : false
}
}
]
}
......
pages/my/myInfo.vue
<template>
<view class="myInfo">
<view class="header" :style="{height: statusBarHeight+180+'px',paddingTop: statusBarHeight+'px'}">
<view class="header" :style="{paddingTop: statusBarHeight+'px'}">
<view class="header-content-box">
<view class="login-content">
<view class="flex-1 flex-row" @tap="onNavToSetUserInfo">
......@@ -11,12 +11,25 @@
mode="scaleToFill" @tap.stop="onProview"></image>
</view>
</view>
<view class="flex-col margin-left">
<view class="flex-col margin-left user-info-box">
<text class="text-title text-lg text-bold text-xxl">{{userInfo.nickName||"凑角用户"}}</text>
<!-- <view class="flex-row" style="margin-top: 10rpx;">
<text class="cuIcon-hotfill text-white"></text>
<text class="text-white text-lg">会员用户</text>
</view> -->
<view class="flex-row" style="margin-top: 10rpx;">
<view v-if="!userInfo.memberConfig || (userInfo.memberConfig&&userInfo.memberConfig.memberType ==1)" class="relative" :class="!userInfo.memberConfig?'grayscale':''">
<image class="img-icon" :src="assetsPath+'/tag_icon_1.png'" mode="widthFix"></image>
<view class="absolute">
<text class="text-1">充值会员</text>
</view>
</view>
<view v-if="!userInfo.memberConfig || (userInfo.memberConfig&&userInfo.memberConfig.memberType ==2)" class="relative" :class="!userInfo.memberConfig?'grayscale':''">
<image class="img-icon" :src="assetsPath+'/tag_icon_2.png'" mode="widthFix"></image>
<view class="absolute">
<text class="text-1">权益会员</text>
</view>
</view>
</view>
<view v-if="userInfo.memberConfig && userInfo.memberConfig.memberType ==1" class="tip-date">
<text>{{userInfo.consumerMember.expirationDate}}到期</text>
</view>
</view>
<view class="nav-right" @tap.stop="onNavToSetUserInfo">
<image class="img" :src="assetsPath+'/setting.png'" mode="scaleToFill"></image>
......@@ -24,6 +37,75 @@
</view>
</view>
<view class="remeber-info-box">
<view class="relative flex-7">
<image v-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===2" class="level-bg" :src="assetsPath+'/user/tongj_bg_1.png'" mode="scaleToFill"></image>
<image v-else-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===3" class="level-bg" :src="assetsPath+'/user/yj_bg_1.png'" mode="scaleToFill"></image>
<image v-else-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===4" class="level-bg" :src="assetsPath+'/user/jj_bg_1.png'" mode="scaleToFill"></image>
<image v-else class="level-bg" :src="assetsPath+'/user/tj_bg_1.png'" mode="scaleToFill"></image>
<view class="absolute level-content">
<view class="part-left">
<view v-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===4" class="level level-4">
<text class="text-1">LV {{userInfo.memberConfig.levelName}}</text>
<!-- <text class="text-2">还差 {{userInfo.memberConfig.nextLimitRequirements - userInfo.consumerWallet.remainingIntegral}} 积分可升级为{{userInfo.memberConfig.nextMembershipName}}</text> -->
<view class="flex-row">
<text class="text-3">当前积分</text>
<text class="text-4">{{userInfo.consumerWallet.remainingIntegral}}</text>
</view>
</view>
<view v-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===3" class="level level-3">
<text class="text-1">LV {{userInfo.memberConfig.levelName}}</text>
<text class="text-2">还差 {{userInfo.memberConfig.nextLimitRequirements - Number(userInfo.consumerWallet.remainingIntegral)}} 积分可升级为{{userInfo.memberConfig.nextMembershipName}}</text>
<view class="flex-row">
<text class="text-3">当前积分</text>
<text class="text-4">{{userInfo.consumerWallet.remainingIntegral}}</text>
</view>
</view>
<view v-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===2" class="level level-2">
<text class="text-1">LV {{userInfo.memberConfig.levelName}}</text>
<text class="text-2">还差 {{userInfo.memberConfig.nextLimitRequirements - Number(userInfo.consumerWallet.remainingIntegral)}} 积分可升级为{{userInfo.memberConfig.nextMembershipName}}</text>
<view class="flex-row">
<text class="text-3">当前积分</text>
<text class="text-4">{{userInfo.consumerWallet.remainingIntegral}}</text>
</view>
</view>
<view v-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===1" class="level level-1">
<text class="text-1">LV {{userInfo.memberConfig.levelName}}</text>
<text class="text-2">还差 {{userInfo.memberConfig.nextLimitRequirements - Number(userInfo.consumerWallet.remainingIntegral)}} 积分可升级为{{userInfo.memberConfig.nextMembershipName}}</text>
<view class="flex-row">
<text class="text-3">当前积分</text>
<text class="text-4">{{userInfo.consumerWallet.remainingIntegral}}</text>
</view>
</view>
<view v-else class="level level-1">
<text class="text-1">LV 0</text>
<text class="text-2">您还不是会员哦，快来加入吧！</text>
</view>
</view>
<view class="part-right">
<image v-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===4" class="tag-icon" :src="assetsPath+'/user/tag_icon_4.png'" mode="widthFix"></image>
<image v-else-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===3" class="tag-icon" :src="assetsPath+'/user/tag_icon_3.png'" mode="widthFix"></image>
<image v-else-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===2" class="tag-icon" :src="assetsPath+'/user/tag_icon_2.png'" mode="widthFix"></image>
<image v-else class="tag-icon" :src="assetsPath+'/user/tag_icon_1.png'" mode="widthFix"></image>
</view>
</view>
</view>
<view v-if="false" class="flex-3">
<text class="text-1">次卡</text>
<text class="text-2">权益会员专享</text>
<view class="flex-row">
<text class="text-3">还剩</text>
<text class="text-4">3</text>
<text class="text-3">张</text>
</view>
</view>
</view>
</view>
</view>
</view>
......@@ -169,7 +251,7 @@
<text class="text-gray">联系我们</text>
</view>
</view>
<view class="item-box" @tap="onNavByPath('cleanManage')">
<view v-if="userInfo.isCleaner" class="item-box" @tap="onNavByPath('cleanManage')">
<view class="icon-img">
<image :src="assetsPath+'/user/tool_3.png'" mode="scaleToFill"></image>
</view>
......@@ -177,7 +259,7 @@
<text class="text-gray">保洁管理</text>
</view>
</view>
<view class="item-box" @tap="onNavByPath('cleanRecord')">
<view v-if="userInfo.isAdmin && !userInfo.isCleaner" class="item-box" @tap="onNavByPath('cleanRecord')">
<view class="icon-img">
<image :src="assetsPath+'/user/tool_3.png'" mode="scaleToFill"></image>
</view>
......@@ -185,7 +267,7 @@
<text class="text-gray">保洁记录</text>
</view>
</view>
<view class="item-box" @tap="onNavByPath('deviceManage')">
<view v-if="userInfo.isAdmin" class="item-box" @tap="onNavByPath('deviceManage')">
<view class="icon-img">
<image :src="assetsPath+'/user/tool_3.png'" mode="scaleToFill"></image>
</view>
......@@ -482,13 +564,11 @@
.header-content-box {
display: flex;
flex: 1;
padding-top: 40px;
.login-content {
display: flex;
flex-direction: column;
width: 100%;
margin-top: 30upx;
>.flex-row {
position: relative;
align-items: center;
......@@ -519,8 +599,7 @@
align-items: center;
position: absolute;
right: 5vw;
// margin-top: 20upx;
margin-bottom: 60upx;
.img {
width: 14px;
height: 16px;
......@@ -610,7 +689,6 @@
flex-direction: column;
align-items: center;
width: 100%;
margin-top: -28upx;
}
.main {
width: 100%;
......@@ -749,4 +827,238 @@
flex-wrap: wrap;
}
}
.user-info-box{
.relative{
margin-right: 4upx;
.img-icon{
display: block;
width: 142upx;
max-height: 40upx;
}
}
.absolute{
display: flex;
justify-content: center;
align-items: center;
text{
font-weight: normal;
font-size: 20rpx;
margin: 0 0 2upx 30upx;
}
.text-1{
color: #8C1E41;
}
.text-2{
color: #472F1E;
}
}
.grayscale{
filter: grayscale(100%);
}
.tip-date{
font-weight: normal;
font-size: 20rpx;
color: #A3A3A3;
margin-top: 10upx;
}
}
.remeber-info-box{
display: flex;
flex-direction: row;
width: 90%;
margin: 20upx auto 10upx;
.flex-7{
display: flex;
flex: 1;
height: 100%;
.level-bg{
display: block;
width: 100%;
height: 136rpx;
}
.level-content{
display: flex;
justify-content: space-between;
.part-left{
height: 100%;
.level{
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 24upx;
height: 100%;
.text-1{
font-weight: 900;
font-size: 32upx;
color: #A3A3A3;
font-style: italic;
}
.text-2{
font-weight: normal;
font-size: 20upx;
margin-top: 4upx;
}
.flex-row{
display: flex;
align-items: center;
justify-content: center;
width: 160rpx;
height: 32upx;
border-radius: 4upx;
margin-top: 8upx;
.text-3{
font-weight: normal;
font-size: 18upx;
}
.text-4{
font-weight: normal;
font-size: 26rpx;
font-style: italic;
margin-left: 10upx;
}
}
}
.level-4{
.text-1{
background: linear-gradient(104deg, #FFB875 0%, #FFEDC4 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-2{
color: #F3E3C6;
}
.flex-row{
background: #615D73;
border: 1px solid #F9ECEC;
.text-3{
color: #F3E3C6;
}
.text-4{
color: #FFB875;
}
}
}
.level-3{
.text-1{
background: linear-gradient(-90deg, #222A5E 0%, #4C559E 46.9482421875%, #222A5E 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-2{
color: #5A63A5;
}
.flex-row{
background: #BAC6D2;
border: 1px solid #464F8E;
.text-3{
color: #5A63A5;
}
.text-4{
color: #464F8E;
}
}
}
.level-2{
.text-1{
background: linear-gradient(47deg, #FD7C01 0%, #FCAB00 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-2{
color: #985E39;
}
.flex-row{
background: #FFEED9;
border: 1px solid #DE966F;
.text-3{
color: #985E39;
}
.text-4{
color: #701700;
}
}
}
.level-1{
.text-1{
background: linear-gradient(47deg, #E9EEEE 0%, #FBFFFC 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-2{
color: #F1F6F4;
}
.flex-row{
background: #E3E6E8;
border: 1px solid #E3E6E8;
.text-3{
color: #9D9D9D;
}
.text-4{
color: #9D9D9D;
}
}
}
}
.part-right{
display: flex;
align-items: center;
height: 100%;
padding-right: 20upx;
.tag-icon{
display: block;
width: 120upx;
}
}
}
}
.flex-3{
display: flex;
flex-direction: column;
justify-content: center;
width: 184rpx;
height: 136rpx;
background: linear-gradient(71deg, #FFFFFF 0%, #FBF5DD 0%, #FCDFC5 0%, #FFCD9C 98%);
border-radius: 14rpx;
border: 1px solid #FDD8B8;
margin-left: 20upx;
padding-left: 20upx;
.text-1{
font-weight: bolder;
font-size: 32rpx;
font-style: italic;
color: #A3A3A3;
background: linear-gradient(47deg, #FD7C01 0%, #FCAB00 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-2{
font-size: 20rpx;
color: #985E39;
margin-top: 4upx;
}
.flex-row{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 102rpx;
height: 32rpx;
background: #FFEED9;
border-radius: 4rpx;
border: 1px solid #E6A37F;
margin-top: 8upx;
.text-3{
font-size: 18rpx;
color: #985E39;
}
.text-4{
font-size: 26rpx;
color: #701700;
margin: 2upx 4upx 0;
}
}
}
}
</style>
\ No newline at end of file
pages/vipCreate/vipCreate.vue
......@@ -38,7 +38,8 @@
</view>
<view v-if="tabIndex ==1" class="list-box">
<view v-for="(item,k) in rechargeConfList" :key="k" class="flex-col item" @tap="onRechargeChange(k)">
<view v-for="(item,k) in rechargeConfList" :key="k" class="flex-col item"
@tap="onRechargeChange(k)">
<image class="amount-bg" :src="assetsPath+'/vip/amount_bg.png'" mode="widthFix"></image>
<view class="flex-col item-content" :class="rechargeIndex === k?'active':''">
<view v-if="item.giveType.includes('1')" class="preferential">
......@@ -88,16 +89,19 @@
<text class="text-3">00</text>
</view>
<view class="cu-btn-box" @tap="onSubmit">
<button class="cu-btn" :class="consumerMemberStatus?'bg-gray':'bg-pink'">立即开通</button>
<button class="cu-btn"
:class="consumerMemberStatus?'bg-gray':'bg-pink'">立即开通</button>
</view>
</view>
</view>
</view>
<view class="rule-tip">
<checkbox-group @change="onRuleTipChange">
<checkbox class='round yellow' :class="checked?'checked':''" :checked="checked" value="checked" style="transform: scale(0.6);"></checkbox>
<checkbox class='round yellow' :class="checked?'checked':''" :checked="checked"
value="checked" style="transform: scale(0.6);"></checkbox>
</checkbox-group>
<text>我已阅读</text><text class="text-pink">用户充值协议</text><text>, 并同意协议内容</text>
<text>我已阅读</text><text class="text-pink" @tap="onNavToRule2">用户充值协议</text><text>,
并同意协议内容</text>
</view>
</view>
</view>
......@@ -109,11 +113,57 @@
</button>
<view class="rule-tip">
<checkbox-group @change="onRuleTipChange">
<checkbox class='round yellow' :class="checked?'checked':''" :checked="checked" value="checked" style="transform: scale(0.6);"></checkbox>
<checkbox class='round yellow' :class="checked?'checked':''" :checked="checked" value="checked"
style="transform: scale(0.6);"></checkbox>
</checkbox-group>
<text>我已阅读</text><text class="text-pink">用户充值协议</text><text>, 并同意协议内容</text>
<text>我已阅读</text><text class="text-pink" @tap="onNavToRule2">用户充值协议</text><text>, 并同意协议内容</text>
</view>
</view>
<view v-if="tabIndex ==2" class="bg-box-1 margin-top">
<view class="bg-box-2">
<view class="flex-row-center title-content">
<view class="xx">
<image :src="assetsPath+'/xx.png'" mode="widthFix"></image>
</view>
<view class="title-text">
<view class="text">
<text>权益会员专属活动</text>
</view>
<view class="line">
</view>
</view>
<view class="xx">
<image :src="assetsPath+'/xx.png'" mode="widthFix"></image>
</view>
</view>
<view class="prefer-box-list">
<view v-for="(item,k) in preferList" :key="k" class="list-item">
<image class="img" :src="item.iconUrl" mode="widthFix"></image>
<text class="text-title">{{item.title}}</text>
<text class="text-slogan">{{item.slogan}}</text>
</view>
</view>
<view class="look-prefer-nav">
<text class="text-title">点击可查看权益详情</text>
<image class="img" :src="assetsPath+'/vip/icon_right.png'" mode="widthFix"></image>
</view>
</view>
<view class="adorn-1">
<image class="img" :src="assetsPath+'/vip/adorn_1.png'" mode="widthFix"></image>
</view>
<view class="adorn-2">
<image class="img" :src="assetsPath+'/vip/adorn_2.png'" mode="widthFix"></image>
</view>
</view>
</view>
<view class="rule-btn" @tap="onNavToRule">
<text>规则</text>
</view>
<f-tabbar></f-tabbar>
</view>
......@@ -147,9 +197,60 @@
list: [],
rechargeConfList: [],
tabIndex: 1,
rechargeIndex:0,
rechargeIndex: 0,
index: 0,
consumerMemberStatus:false
consumerMemberStatus: false,
preferList: [{
iconUrl: config.assetsPath + "/vip/p_1.png",
title: "会员价",
slogan: "最低享98折"
},
{
iconUrl: config.assetsPath + "/vip/p_2.png",
title: "专属礼物",
slogan: "好礼享不停"
},
{
iconUrl: config.assetsPath + "/vip/p_3.png",
title: "会员日",
slogan: "半价活动"
},
{
iconUrl: config.assetsPath + "/vip/p_4.png",
title: "特定活动",
slogan: "免报名费"
},
{
iconUrl: config.assetsPath + "/vip/p_5.png",
title: "邀请有礼",
slogan: "推荐返利"
},
{
iconUrl: config.assetsPath + "/vip/p_6.png",
title: "专属储物柜",
slogan: "一年使用期限"
},
{
iconUrl: config.assetsPath + "/vip/p_7.png",
title: "专属客服",
slogan: "一对一服务"
},
{
iconUrl: config.assetsPath + "/vip/p_8.png",
title: "联营开店",
slogan: "共享资源"
},
{
iconUrl: config.assetsPath + "/vip/p_9.png",
title: "商城",
slogan: "会员折扣"
},
{
iconUrl: config.assetsPath + "/vip/p_10.png",
title: "次卡",
slogan: "特惠购"
}
]
};
},
onLoad() {
......@@ -161,11 +262,11 @@
onGetUserInfo() {
getUserInfo().then(res => {
if (res.data.code == 200) {
if(res.data.data.consumerMember && res.data.data.consumerMember.memberType ==2){
if (res.data.data.consumerMember && res.data.data.consumerMember.memberType == 2) {
let expirationDate = moment(res.data.data.consumerMember.expirationDate).valueOf();
let nowDate = moment().valueOf()
if(nowDate <= expirationDate){
if (nowDate <= expirationDate) {
this.consumerMemberStatus = true;
}
}
......@@ -174,11 +275,11 @@
})
},
onRechargeChange(k){
onRechargeChange(k) {
this.rechargeIndex = k;
},
onRuleTipChange(e){
console.log(e,99999)
onRuleTipChange(e) {
console.log(e, 99999)
this.checked = e.detail.value.includes("checked")
},
onLoading() {
......@@ -209,15 +310,16 @@
this.checked = false;
},
onSubmit() {
if(!this.checked){
if (!this.checked) {
uni.showToast({
icon:"none",
title:"请先阅读充值协议并同意"
icon: "none",
title: "请先阅读充值协议并同意"
})
return;
}
let that = this;
uni.showLoading({
title:"提交中..."
title: "提交中..."
})
createEquityMembers({
payType: 1,
......@@ -237,7 +339,9 @@
icon: "success",
title: "下单成功",
success: () => {
setTimeout(() => {
that.onGetUserInfo();
}, 1000)
}
})
},
......@@ -255,16 +359,26 @@
})
},
onNavToRule() {
uni.navigateTo({
url: "/setting/rule/rule?keyData=vip_user_rule"
})
},
onNavToRule2() {
uni.navigateTo({
url: "/setting/rule/rule?keyData=user_pay_protocol"
})
},
onNavToRecharge() {
if(!this.checked){
if (!this.checked) {
uni.showToast({
icon:"none",
title:"请先阅读充值协议并同意"
icon: "none",
title: "请先阅读充值协议并同意"
})
return;
}
uni.showLoading({
title:"提交中..."
title: "提交中..."
})
createRecharge({
payType: 1,
......@@ -333,6 +447,7 @@
padding-bottom: 60upx;
.bg-box-1 {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
......@@ -392,6 +507,24 @@
}
}
}
.adorn-1{
position: absolute;
top: -24upx;
right: 20upx;
.img{
width: 74upx;
max-height: 78upx;
}
}
.adorn-2{
position: absolute;
bottom: -40upx;
left: 24upx;
.img{
width: 78upx;
max-height: 90upx;
}
}
}
.action-box-list {
......@@ -456,6 +589,7 @@
flex-direction: column;
align-items: center;
}
.line {
width: 80%;
height: 1rpx;
......@@ -500,11 +634,13 @@
align-items: flex-end;
justify-content: center;
color: #FE3F00;
.symbol {
font-weight: 400;
font-size: 29upx;
margin-bottom: 10upx;
}
.num {
font-weight: 400;
font-size: 64upx;
......@@ -521,20 +657,24 @@
background: linear-gradient(-90deg, #FCD25B, #FA541D);
border-radius: 0 0 23upx 23upx;
z-index: 2;
text {
font-size: 19upx;
color: #ffffff;
}
}
.active{
.active {
background: linear-gradient(-90deg, #FCD25B, #FA541D);
box-shadow: 0 4upx 12upx #FA541D;
border-radius: 12upx;
.amount{
.amount {
color: #ffffff;
}
.preferential{
text{
.preferential {
text {
color: #ffffff;
background: #ffffff;
-webkit-background-clip: text;
......@@ -542,8 +682,9 @@
}
}
.part-bottom{
.tip-text{
.part-bottom {
.tip-text {
background: linear-gradient(-45deg, #FCD25B, #FA541D);
}
}
......@@ -551,15 +692,17 @@
}
}
.list-box-2{
.list-box-2 {
width: 100%;
align-items: center;
.part-1{
.part-1 {
display: flex;
align-items: center;
width: 90%;
margin-top: 24upx;
.text-bg-1{
.text-bg-1 {
display: flex;
justify-content: center;
align-items: center;
......@@ -568,14 +711,16 @@
background: linear-gradient(90deg, #FCD25B 0%, #FA541D 100%);
border-radius: 14rpx;
margin-right: 10upx;
text{
text {
font-weight: normal;
font-size: 20rpx;
color: #FFFFFF;
font-style: italic;
}
}
.text-2{
.text-2 {
font-weight: normal;
font-size: 32rpx;
color: #FA561E;
......@@ -584,80 +729,96 @@
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-3{
.text-3 {
font-weight: 400;
font-size: 20rpx;
color: #999999;
font-style: italic;
}
}
.part-2{
.part-2 {
position: relative;
width: 90%;
margin-top: 24upx;
.img-bg{
.img-bg {
display: block;
width: 100%;
max-height: 160upx;
}
.absolute{
.absolute {
display: flex;
flex-direction: row;
.flex-5{
.flex-5 {
display: flex;
flex-direction: column;
justify-content: center;
width: 67%;
height: 100%;
padding-left: 24upx;
.flex-row{
.flex-row {
align-items: flex-end;
font-weight: bold;
.text-1{
.text-1 {
color: #FE2E2E;
font-size: 42upx;
}
.text-2{
.text-2 {
color: #333333;
font-size: 34upx;
margin-bottom: 2upx;
}
}
.text-3{
.text-3 {
font-weight: 400;
font-size: 24rpx;
color: #A59079;
margin-top: 12upx;
}
}
.flex-3{
.flex-3 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1;
height: 100%;
.flex-row{
.flex-row {
align-items: flex-end;
.text-1{
.text-1 {
color: #D27E1F;
font-size: 32upx;
margin-bottom: 6upx;
}
.text-2{
.text-2 {
color: #D27E1F;
font-size: 56upx;
font-weight: bold;
}
.text-3{
.text-3 {
color: #D27E1F;
font-size: 32upx;
margin-bottom: 6upx;
}
}
.cu-btn-box{
.cu-btn-box {
margin-top: 10upx;
.cu-btn{
.cu-btn {
padding: 0 20upx;
height: 40upx;
......@@ -665,14 +826,16 @@
font-size: 24upx;
color: #ffffff;
}
.bg-pink{
.bg-pink {
background: #FA561E;
}
}
}
}
}
.rule-tip{
.rule-tip {
margin: 24upx 0 20upx;
}
}
......@@ -698,11 +861,13 @@
flex-direction: row;
align-items: center;
margin-top: 34upx;
text {
font-weight: normal;
font-size: 24rpx;
color: #777777;
}
.text-pink {
margin: 0 6upx;
font-size: 24rpx;
......@@ -726,4 +891,83 @@
width: 100%;
padding: 30upx;
}
.prefer-box-list {
display: flex;
flex-wrap: wrap;
width: 98%;
margin: 24upx auto 0;
.list-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 20%;
padding: 20upx 0;
.img {
display: block;
width: 72upx;
max-height: 80upx;
}
.text-title {
margin-top: 8upx;
font-size: 22upx;
color: #000000;
background: linear-gradient(-90deg, #FF7800 0%, #FF0000 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-slogan {
margin-top: 8upx;
font-weight: 400;
font-size: 18upx;
color: #999999;
}
}
}
.look-prefer-nav {
display: flex;
flex-direction: row;
align-items: center;
margin-top: 24upx;
.text-title {
font-weight: normal;
font-size: 24upx;
color: #A59079;
}
.img {
display: block;
width: 16upx;
margin-left: 10upx;
}
}
.rule-btn {
position: fixed;
right: 0;
top: 14vh;
display: flex;
justify-content: center;
align-items: center;
width: 42upx;
height: 91upx;
background: rgba(0, 0, 0, 0.23);
border-radius: 13upx;
z-index: 90;
text {
font-weight: 400;
font-size: 24upx;
color: #FFFDFD;
writing-mode: horizontal-tb;
text-align: center;
}
}
</style>
\ No newline at end of file
setting/rule/rule.vue 0 → 100644
<template>
<view class="article">
<view class="bg-box-1">
<view class="bg-box-2">
<view class="flex-row-center title-content">
<view class="xx">
<image :src="assetsPath+'/xx.png'" mode="widthFix"></image>
</view>
<view class="title-text">
<view class="text">
<text>{{article.protocolTitle || '规则'}}</text>
</view>
<view class="line">
</view>
</view>
<view class="xx">
<image :src="assetsPath+'/xx.png'" mode="widthFix"></image>
</view>
</view>
<scroll-view class="scroll-view" scroll-y="true">
<view class="scroll-view-content">
<view class="" v-html="article.content">
</view>
</view>
</scroll-view>
</view>
</view>
</view>
</template>
<script>
import config from "@/config/index.config";
import {
getProtocol
} from "@/api/index.js";
export default {
data() {
return {
assetsPath: config.assetsPath,
article: {
protocolTitle: '',
content: '',
},
keyData: ""
};
},
onLoad(option) {
if (option && option.keyData) {
this.keyData = option.keyData
}
this.onLoading()
},
methods: {
onLoading() {
getProtocol(this.keyData).then(res => {
console.log(res)
if (res.data.code) {
uni.setNavigationBarTitle({
title: res.data.data.protocolTitle
})
this.article = res.data.data
}
})
}
}
}
</script>
<style>
page {
width: 100%;
height: 100%;
background-color: rgb(255, 234, 191);
}
</style>
<style lang="scss">
.article {
display: flex;
flex-direction: column;
align-items: center;
width: 100vw;
height: 100%;
}
.bg-box-1 {
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
align-items: center;
width: 690upx;
background: #FFCA7E;
border-radius: 32upx;
padding: 6px 0;
margin: 30upx 0 40upx;
.bg-box-2 {
display: flex;
height: 98%;
width: 650upx;
flex-direction: column;
align-items: center;
background: linear-gradient(-42deg, #FFF5CB, #FFFFFF);
border-radius: 32upx;
.title-content {
margin: 24upx 0;
.title-text {
display: flex;
justify-content: center;
position: relative;
margin: 0 20upx;
.text {
position: relative;
font-weight: normal;
font-size: 48rpx;
color: #000000;
background: linear-gradient(-90deg, #FF7800 0%, #FF0000 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
z-index: 2;
}
.line {
position: absolute;
bottom: 0;
width: 110%;
height: 15upx;
background: #FFEABF;
border-radius: 8upx;
}
}
.xx {
width: 30upx;
image {
width: 100%;
max-height: 34upx;
}
}
}
.scroll-view {
display: flex;
flex: 1;
position: relative;
width: 100%;
overflow: hidden;
.scroll-view-content {
position: absolute;
left: 0;
width: 100%;
padding: 24upx;
}
}
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment