Skip to content

G
gxpt_wechat
Commit c43fb4b1 by zhangzhen
Options

细节优化

parent c8097a85
Showing with 610 additions and 350 deletions
components/login/login.vue
...@@ -80,11 +80,16 @@ ...@@ -80,11 +80,16 @@
uni.showLoading({ uni.showLoading({
title: "授权中" title: "授权中"
}) })
register({ let registData = {
loginCode:res.code, loginCode:res.code,
phoneCode: this.phoneCode, phoneCode: this.phoneCode,
type: "routine", type: "routine"
}).then(res => { }
if(uni.getStorageSync("shareUserId")){
registData.uid = uni.getStorageSync("shareUserId");
registData.activityType = 0;
}
register(registData).then(res => {
uni.hideLoading(); uni.hideLoading();
if (res.data.code == 200) { if (res.data.code == 200) {
uni.setStorageSync('tokenHeaders', "Authori-zation") uni.setStorageSync('tokenHeaders', "Authori-zation")
......
components/noLogin/noLogin.vue
...@@ -51,11 +51,16 @@ ...@@ -51,11 +51,16 @@
uni.showLoading({ uni.showLoading({
title: "授权中" title: "授权中"
}) })
register({ let registData = {
loginCode:res.code, loginCode:res.code,
phoneCode: this.phoneCode, phoneCode: this.phoneCode,
type: "routine", type: "routine"
}).then(res => { }
if(uni.getStorageSync("shareUserId")){
registData.uid = uni.getStorageSync("shareUserId");
registData.activityType = 0;
}
register(registData).then(res => {
uni.hideLoading(); uni.hideLoading();
if (res.data.code == 200) { if (res.data.code == 200) {
uni.setStorageSync('tokenHeaders', "Authori-zation") uni.setStorageSync('tokenHeaders', "Authori-zation")
......
pages.json
...@@ -150,6 +150,13 @@ ...@@ -150,6 +150,13 @@
"style": { "style": {
"navigationBarTitleText": "设备控制" "navigationBarTitleText": "设备控制"
} }
},
{
"path" : "pages/userShare/userShare",
"style" :
{
"navigationBarTitleText" : "分享"
}
} }
], ],
"subPackages": [ "subPackages": [
......
pages/my/myInfo.vue
...@@ -46,6 +46,10 @@ ...@@ -46,6 +46,10 @@
<image class="img" :src="assetsPath+'/setting.png'" mode="scaleToFill"></image> <image class="img" :src="assetsPath+'/setting.png'" mode="scaleToFill"></image>
<text class="text-gray">修改资料</text> <text class="text-gray">修改资料</text>
</view> </view>
<view v-if="loginStatus" class="nav-right nav-right-2" @tap.stop="onNavToShare">
<text class="text-gray">邀请有礼</text>
</view>
</view> </view>
<view class="remeber-info-box"> <view class="remeber-info-box">
...@@ -279,6 +283,14 @@ ...@@ -279,6 +283,14 @@
<text class="text-gray">联系我们</text> <text class="text-gray">联系我们</text>
</view> </view>
</view> </view>
<view v-if="loginStatus" class="item-box" @tap="onShareByQrcode">
<view class="icon-img">
<image :src="assetsPath+'/user/tool_7.png'" mode="scaleToFill"></image>
</view>
<view class="text-box">
<text class="text-gray">二维码分享</text>
</view>
</view>
</view> </view>
</view> </view>
...@@ -396,11 +408,50 @@ ...@@ -396,11 +408,50 @@
</view> </view>
</view> </view>
</uni-popup> </uni-popup>
<uni-popup ref="popupShare" type="center">
<view class="popup-box-content popup-box-share">
<view class="popup-box popup-box-2">
<view class="close-box" @tap="onClose">
<text class="cuIcon-close text-xl text-icon"></text>
</view>
<view class="title-header">
<text class="text-title text-black text-lg text-bold">分享邀请</text>
</view>
<view class="flex-col popup-content">
<view class="share-qrcode">
<view class="qrcode-box">
<tki-qrcode ref="qrcode" :cid="cid" :val="text" :size="size" unit="upx"
icon="../../static/logo_icon.png" :iconSize="iconSize" :onval="true" :loadMake="loadMake"
:showLoading="true" @result="qrR" />
</view>
<view class="part-bottom">
<button class="btn cu-btn bg-white" @tap="onSaveImg">
<image src="../../static/icon_album.png" mode="widthFix"></image>
<text>保存到相册</text>
</button>
<button open-type="share" class="btn cu-btn bg-blue">
<image src="../../static/share_icon_2.png" mode="widthFix"></image>
<text>分享邀请</text>
</button>
</view>
</view>
</view>
</view>
</view>
</uni-popup>
<LoginPop ref="loginPop" /> <LoginPop ref="loginPop" />
</view> </view>
</template> </template>
<script> <script>
import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
import LoginPop from "@/components/login/login" import LoginPop from "@/components/login/login"
import fTabbar from '@/components/module/f-tabbar/f-tabbar'; import fTabbar from '@/components/module/f-tabbar/f-tabbar';
import { import {
...@@ -424,10 +475,19 @@ ...@@ -424,10 +475,19 @@
export default { export default {
components: { components: {
LoginPop, LoginPop,
fTabbar fTabbar,
tkiQrcode
}, },
data() { data() {
return { return {
cid: "qrCode",
qrPath: '',
text: '生成中',
size: 520,
iconSize: 52,
colorDark: '#000000',
loadMake: false,
qrPath: '',
statusBarHeight: this.statusBarHeight, statusBarHeight: this.statusBarHeight,
assetsPath: config.assetsPath, assetsPath: config.assetsPath,
hostUrl: config.hostUrl, hostUrl: config.hostUrl,
...@@ -490,12 +550,36 @@ ...@@ -490,12 +550,36 @@
this.onGetSysConfig(); this.onGetSysConfig();
this.onGetUserInfo(); this.onGetUserInfo();
}, },
onLoad() { onLoad(query) {
console.log(query,"页面传递过来的参数")
if (query.q) {
const q = decodeURIComponent(query.q)
let d = q.split('?')
let c = d[1].split('&')
let obj = {};
c.forEach(item => {
let l = item.split('=');
obj[l[0]] = l[1];
})
console.log(obj,"参数对象")
if (obj.uid) {
uni.setStorageSync("shareUserId", obj.uid)
}
}
if (query.uid) {
uni.setStorageSync("shareUserId", query.uid)
}
uni.hideTabBar(); uni.hideTabBar();
if(!this.loginStatus){ if(!this.loginStatus){
this.$refs.loginPop.open(); this.$refs.loginPop.open();
} }
}, },
onShareAppMessage() {
return {
title: "邀请扫码注册",
path: `/pages/my/myInfo?uid=${this.userInfo.id}`
}
},
methods: { methods: {
onNavToLogin(){ onNavToLogin(){
if(!this.loginStatus){ if(!this.loginStatus){
...@@ -743,6 +827,7 @@ ...@@ -743,6 +827,7 @@
onClose() { onClose() {
this.$refs.popup.close() this.$refs.popup.close()
this.$refs.popupPay.close() this.$refs.popupPay.close()
this.$refs.popupShare.close()
}, },
onNavToRecords(t){ onNavToRecords(t){
if(this.loginStatus){ if(this.loginStatus){
...@@ -772,7 +857,35 @@ ...@@ -772,7 +857,35 @@
} else { } else {
this.$refs.loginPop.open(); this.$refs.loginPop.open();
} }
} },
onNavToShare(){
uni.navigateTo({
url:"/pages/userShare/userShare"
})
},
qrR(r) {
console.log(r, "二维码路径")
this.qrPath = r;
},
onShareByQrcode(){
this.text = `https://www.coujio.com/myShare?uid=${this.userInfo.id}&act=0`;
this.loadMake = true;
this.$refs.popupShare.open()
},
onSaveImg() {
uni.saveImageToPhotosAlbum({
filePath: this.qrPath,
success: () => {
uni.showToast({
icon: 'none',
title: '保存成功'
})
},
fail: (err) => {
console.log(err, 999)
}
})
},
} }
} }
</script> </script>
...@@ -846,6 +959,15 @@ ...@@ -846,6 +959,15 @@
font-size: 30upx; font-size: 30upx;
} }
} }
.nav-right-2{
top: 82upx;
background-color: #E2177C;
padding: 10upx 12upx;
border-radius: 10upx;
text{
color: #ffffff;
}
}
} }
...@@ -1395,129 +1517,181 @@ ...@@ -1395,129 +1517,181 @@
width: 72vw; width: 72vw;
border-radius: 36upx; border-radius: 36upx;
overflow: hidden; overflow: hidden;
} .popup-box-2{
.popup-box-2{ position: relative;
position: relative; width: 100%;
width: 100%; background: linear-gradient(0deg, rgba(255,255,255,0.65), rgba(255,214,241,0.43));
background: linear-gradient(0deg, rgba(255,255,255,0.65), rgba(255,214,241,0.43)); .close-box{
.close-box{ position: absolute;
position: absolute; top: 16upx;
top: 16upx; right: 20upx;
right: 20upx; display: flex;
display: flex; justify-content: center;
justify-content: center; align-items: center;
align-items: center; width: 24px;
width: 24px; height: 24px;
height: 24px;
font-size: 36upx;
}
.title-header{
display: flex;
justify-content: center;
align-items: center;
padding: 30upx 24upx 8upx;
border-bottom: none;
.text-title{
font-size: 36upx; font-size: 36upx;
color: #333333;
} }
} .title-header{
.popup-content{
padding: 0 24upx;
min-height: 240upx;
.recharge-content{
display: flex; display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; padding: 30upx 24upx 8upx;
.text-1{ border-bottom: none;
font-weight: 400; .text-title{
font-size: 24upx; font-size: 36upx;
color: #666666; color: #333333;
} }
.payfee-text{ }
.popup-content{
padding: 0 24upx;
min-height: 240upx;
.recharge-content{
display: flex; display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; width: 100%;
padding: 10upx 0 16upx; .text-1{
margin-bottom: 16upx; font-weight: 400;
border-bottom: 1px dashed #C9CACA; font-size: 24upx;
text{ color: #666666;
font-size: 52rpx;
color: #E40583;
} }
} .payfee-text{
.flex-row{ display: flex;
.flex-col{ justify-content: center;
.text-12{ align-items: center;
width: 77upx; width: 100%;
color: #000000; padding: 10upx 0 16upx;
font-size: 28upx; margin-bottom: 16upx;
font-weight: bold; border-bottom: 1px dashed #C9CACA;
text-align: justify-all; text{
} font-size: 52rpx;
.text-13{ color: #E40583;
color: #999999;
font-size: 26upx;
margin-left: 4upx;
}
.text-14{
color: #000000;
} }
} }
} .flex-row{
.content-tip{ .flex-col{
display: flex; .text-12{
flex-direction: column; width: 77upx;
margin: 20upx 0 12upx; color: #000000;
.text-3{ font-size: 28upx;
font-size: 28upx; font-weight: bold;
color: #333333; text-align: justify-all;
margin-bottom: 20upx; }
.text-13{
color: #999999;
font-size: 26upx;
margin-left: 4upx;
}
.text-14{
color: #000000;
}
}
} }
.flex-col{ .content-tip{
align-items: flex-start; display: flex;
.flex-row-center{ flex-direction: column;
margin: 8upx 0; margin: 20upx 0 12upx;
.gift-box{ .text-3{
display: flex; font-size: 28upx;
justify-content: center; color: #333333;
align-items: center; margin-bottom: 20upx;
width: 22px; }
height: 22px; .flex-col{
background: #FCE8F2; align-items: flex-start;
border-radius: 6px; .flex-row-center{
.gift-icon{ margin: 8upx 0;
display: block; .gift-box{
width: 70%; display: flex;
max-height: 40upx; justify-content: center;
align-items: center;
width: 22px;
height: 22px;
background: #FCE8F2;
border-radius: 6px;
.gift-icon{
display: block;
width: 70%;
max-height: 40upx;
}
} }
} }
} }
} }
} }
} }
.btn-list-box{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
border-top: none;
.btn-box{
display: flex;
flex: none;
width: 87%;
.cu-btn{
padding: 0;
width: 100%;
height: 88upx;
background: #E40583;
border-radius: 44upx;
font-size: 37upx;
color: #FFFFFF;
}
}
}
} }
.btn-list-box{ }
.popup-box-share{
width: 90vw;
border-radius: 12upx;
overflow: hidden;
.popup-box-2{
background: #f1f1f1;
}
}
.share-qrcode {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
.qrcode-box {
background-color: #ffffff;
border-radius: 12upx;
box-shadow: 0 0 12upx #ff00ff;
padding: 20upx;
margin-top: 24upx;
}
.part-bottom {
display: flex; display: flex;
flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; margin: 36upx 0;
width: 100%; width: 100%;
border-top: none;
.btn-box{ .btn {
display: flex; display: flex;
flex: none; flex-direction: row;
width: 87%; align-items: center;
.cu-btn{ justify-content: center;
padding: 0; flex: 1;
width: 100%; height: 88upx;
height: 88upx; border-radius: 20upx;
background: #E40583; margin: 0 20upx;
border-radius: 44upx;
font-size: 37upx; image {
color: #FFFFFF; display: block;
width: 32upx;
height: auto;
margin-right: 6upx;
}
text {
font-size: 24upx;
} }
} }
} }
......
pages/vipCreate/vipCreate.vue
<template> <template>
<view class="vip-create"> <view class="vip-create">
<view class="bg-header"> <view class="bg-header">
<image :src="assetsPath+'/vip/bg_header.png'" mode="widthFix"></image> <image :src="assetsPath+'/vip/bg_header_v1.png'" mode="widthFix"></image>
</view> </view>
<view class="content"> <view class="content-box">
<view class="bg-box-1"> <view class="img-box">
<view class="bg-box-2"> <image :src="assetsPath+'/vip/bg_header_02_v1.png'" mode="scaleToFill"></image>
<view class="flex-row-center title-content"> </view>
<view class="xx">
<image :src="assetsPath+'/xx.png'" mode="widthFix"></image> <view class="content">
</view> <view class="bg-box-1">
<view class="title-text"> <view class="bg-box-2">
<view class="text"> <view class="flex-row-center title-content">
<text>会员超值购</text> <view class="xx">
<image :src="assetsPath+'/xx.png'" mode="widthFix"></image>
</view> </view>
<view class="line"> <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> </view>
<view class="xx">
<image :src="assetsPath+'/xx.png'" mode="widthFix"></image> <view class="flex-between action-box-list">
</view> <view class="part part-left" @tap="onTabChange(1)">
</view> <image v-if="tabIndex ==1" :src="assetsPath+'/vip/btn_2_a_v1.png'" class="active"
mode="widthFix"></image>
<view class="flex-between action-box-list"> <image v-else :src="assetsPath+'/vip/btn_2_v1.png'" class="unactive" mode="widthFix">
<view class="part part-left" @tap="onTabChange(1)"> </image>
<image v-if="tabIndex ==1" :src="assetsPath+'/vip/btn_2_a.png'" class="active"
mode="widthFix"></image>
<image v-else :src="assetsPath+'/vip/btn_2.png'" class="unactive" mode="widthFix"></image>
</view>
<view class="part part-right" @tap="onTabChange(2)">
<image v-if="tabIndex ==2" :src="assetsPath+'/vip/btn_1_a.png'" class="active"
mode="widthFix"></image>
<image v-else :src="assetsPath+'/vip/btn_1.png'" class="unactive" mode="widthFix"></image>
</view>
</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)">
<image class="amount-bg" :src="assetsPath+'/vip/amount_bg.png'" mode="widthFix"></image>
<view class="absolute absolute-1">
<text>特惠充值</text>
</view> </view>
<view class="flex-col item-content" :class="rechargeIndex === k?'active':''">
<view v-if="item.giveType.includes('1')" class="preferential"> <view class="part part-right" @tap="onTabChange(2)">
<text>送 ￥{{item.giveAmount}}</text> <image v-if="tabIndex ==2" :src="assetsPath+'/vip/btn_1_a_v1.png'" class="active"
mode="widthFix"></image>
<image v-else :src="assetsPath+'/vip/btn_1_v1.png'" class="unactive" mode="widthFix">
</image>
</view>
</view>
<view v-if="tabIndex ==1" class="list-box">
<view v-for="(item,k) in rechargeConfList" :key="k" class="flex-col item"
:class="rechargeIndex === k?'active':''" @tap="onRechargeChange(k)">
<image v-if="rechargeIndex === k" class="amount-bg" :src="assetsPath+'/vip/cz_bg_a.png'"
mode="widthFix"></image>
<image v-else class="amount-bg" :src="assetsPath+'/vip/cz_bg.png'" mode="widthFix"></image>
<view class="absolute absolute-1">
<!-- <text>特惠充值</text> -->
<view v-if="item.giveType.includes('1')" class="preferential">
<text>送￥{{item.giveAmount}}</text>
</view>
<view v-else-if="item.giveType.includes('2')" class="preferential">
<text>送{{item.giveDuration}}小时</text>
</view>
</view> </view>
<view v-else-if="item.giveType.includes('2')" class="preferential">
<text>送{{item.giveDuration}}小时</text> <view class="absolute absolute-2">
<image :src="assetsPath+'/vip/pre_icon.png'" mode="widthFix"></image>
</view> </view>
<view class="line"></view> <view class="flex-col item-content">
<view class="flex-col part-bottom"> <view class="flex-col part-bottom">
<view class="part-amount">
<view class="flex-row amount"> <view class="flex-row amount">
<text class="symbol">￥</text> <text class="symbol">￥</text>
<text class="num">{{item.rechargeAmount}}</text> <text class="num">{{item.rechargeAmount}}</text>
</view> </view>
</view> <view class="tip-text">
<view class="tip-text"> <text>{{item.remark || '充值送时长,多充多送'}}</text>
<text>{{item.remark || '充值送时长,多充多送'}}</text> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view>
<view v-if="tabIndex ==2" class="flex-col list-box-2">
<view v-if="tabIndex ==2" class="flex-col list-box-2">
<view v-if="consumerMemberStatus" class="flex-row part-1">
<view v-if="consumerMemberStatus" class="flex-row part-1"> <view class="text-bg-1">
<view class="text-bg-1"> <text>专属</text>
<text>专属</text> </view>
</view> <text class="text-2">超值回馈!</text>
<text class="text-2">超值回馈!</text> <text class="text-3">（权益会员独享）</text>
<text class="text-3">（权益会员独享）</text>
</view>
<view v-else class="flex-row part-1">
<view class="text-bg-1">
<text>特惠</text>
</view> </view>
<text class="text-2">独享专属福利!</text>
<text class="text-3">（更多充值方案,供您选择）</text> <view v-else class="flex-row part-1">
</view> <view class="text-bg-1">
<view class="part-2"> <text>特惠</text>
<image class="img-bg" :src="assetsPath+'/vip/qy_bg_1.png'" mode="widthFix"></image>
<!-- <view v-if="consumerMemberStatus" class="absolute">
<view class="flex-5">
<view class="flex-row">
<text class="text-1">次卡</text>
<text class="text-2">充值 畅玩无忧</text>
</view>
<text class="text-3">有效期：领取后1年内有效</text>
</view> </view>
<view class="flex-3"> <text class="text-2">独享专属福利!</text>
<view class="flex-col"> <text class="text-3">（更多充值方案,供您选择）</text>
<text class="text-2">暂未上线</text> </view>
<text class="text-2">敬请期待</text> <view class="part-2">
<image class="img-bg" :src="assetsPath+'/vip/qy_bg_1.png'" mode="widthFix"></image>
<!-- <view v-if="consumerMemberStatus" class="absolute">
<view class="flex-5">
<view class="flex-row">
<text class="text-1">次卡</text>
<text class="text-2">充值 畅玩无忧</text>
</view>
<text class="text-3">有效期：领取后1年内有效</text>
</view> </view>
</view> <view class="flex-3">
</view> --> <view class="flex-col">
<text class="text-2">暂未上线</text>
<view class="absolute"> <text class="text-2">敬请期待</text>
<view class="flex-5"> </view>
<view class="flex-row">
<text class="text-1">权益</text>
<text class="text-2">会员 优惠享不停</text>
</view> </view>
<text class="text-3">有效期：领取后1年内有效</text> </view> -->
</view>
<view class="flex-3"> <view class="absolute">
<!-- <view class="flex-row"> <view class="flex-5">
<text class="text-1">￥</text> <view class="flex-row">
<text <text class="text-1">权益</text>
class="text-2">{{equityAmountList.length? equityAmountList[0]:'99'}}.</text> <text class="text-2">会员 优惠享不停</text>
<text </view>
class="text-3">{{equityAmountList.length? equityAmountList[1]:'00'}}</text> <text class="text-3">有效期：领取后1年内有效</text>
</view> </view>
<view class="cu-btn-box" @tap="onSubmit"> <view class="flex-3">
<button class="cu-btn bg-pink"> {{consumerMemberStatus? '权益续期':'立即开通'}}</button> <!-- <view class="flex-row">
</view> --> <text class="text-1">￥</text>
<text
<view class="flex-col"> class="text-2">{{equityAmountList.length? equityAmountList[0]:'99'}}.</text>
<text class="text-2">暂未上线</text> <text
<text class="text-2">敬请期待</text> class="text-3">{{equityAmountList.length? equityAmountList[1]:'00'}}</text>
</view>
<view class="cu-btn-box" @tap="onSubmit">
<button class="cu-btn bg-pink"> {{consumerMemberStatus? '权益续期':'立即开通'}}</button>
</view> -->
<view class="flex-col">
<text class="text-2">暂未上线</text>
<text class="text-2">敬请期待</text>
</view>
</view> </view>
</view> </view>
</view> </view>
</view> <view class="rule-tip">
<view class="rule-tip"> <checkbox-group @change="onRuleTipChange">
<checkbox-group @change="onRuleTipChange"> <checkbox class='round yellow' :class="checked?'checked':''" :checked="checked"
<checkbox class='round yellow' :class="checked?'checked':''" :checked="checked" value="checked" style="transform: scale(0.6);"></checkbox>
value="checked" style="transform: scale(0.6);"></checkbox> </checkbox-group>
</checkbox-group> <text>我已阅读</text><text class="text-pink"
<text>我已阅读</text><text class="text-pink" @tap="onNavToRule2">用户充值协议</text><text>,并同意协议内容</text>
@tap="onNavToRule2">用户充值协议</text><text>,并同意协议内容</text> </view>
</view> </view>
</view> </view>
</view> </view>
</view> <!-- <view class="active-bg">
<image :src="assetsPath+'/vip/active_bg.png'" mode="widthFix"></image>
<view v-if="tabIndex ==1" class="flex-col"> </view>
<button class="cu-btn confirm-btn" @tap="onNavToRecharge">
<text>立即充值</text> <view class="active-bg-2">
</button> <image :src="assetsPath+'/vip/banner2.png'" mode="widthFix"></image>
<view class="rule-tip"> </view> -->
<checkbox-group @change="onRuleTipChange">
<checkbox class='round yellow' :class="checked?'checked':''" :checked="checked" value="checked" <view v-if="tabIndex ==1" class="flex-col">
style="transform: scale(0.6);"></checkbox> <button class="cu-btn confirm-btn" @tap="onNavToRecharge">
</checkbox-group> <text>立即充值</text>
<text>我已阅读</text><text class="text-pink" @tap="onNavToRule2">用户充值协议</text><text>, 并同意协议内容</text> </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-group>
<text>我已阅读</text><text class="text-pink" @tap="onNavToRule2">用户充值协议</text><text>, 并同意协议内容</text>
</view>
</view> </view>
</view>
<view class="active-bg">
<view v-if="tabIndex ==2" class="bg-box-1 margin-top"> <image :src="assetsPath+'/vip/active_bg.png'" mode="widthFix"></image>
<view class="bg-box-2"> </view>
<view class="flex-row-center title-content">
<view class="xx"> <view class="active-bg-2">
<image :src="assetsPath+'/xx.png'" mode="widthFix"></image> <image :src="assetsPath+'/vip/banner2.png'" mode="widthFix"></image>
</view> </view>
<view class="title-text">
<view class="text"> <view v-if="tabIndex ==2" class="bg-box-1 margin-top">
<text>权益会员专属活动</text> <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>
<view class="line"> <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> </view>
<view class="xx">
<image :src="assetsPath+'/xx.png'" mode="widthFix"></image> <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>
</view>
<view class="look-prefer-nav" @tap="onNavToRule3">
<view class="prefer-box-list"> <text class="text-title">点击可查看权益详情</text>
<view v-for="(item,k) in preferList" :key="k" class="list-item"> <image class="img" :src="assetsPath+'/vip/icon_right.png'" mode="widthFix"></image>
<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> </view>
<view class="look-prefer-nav" @tap="onNavToRule3"> <view class="adorn-1">
<text class="text-title">点击可查看权益详情</text> <image class="img" :src="assetsPath+'/vip/adorn_1.png'" mode="widthFix"></image>
<image class="img" :src="assetsPath+'/vip/icon_right.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="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>
</view> </view>
<view class="rule-btn" @tap="onNavToRule"> <view class="rule-btn" @tap="onNavToRule">
<text>规则</text> <text>规则</text>
</view> </view>
...@@ -301,7 +329,7 @@ ...@@ -301,7 +329,7 @@
<image class="gift-icon" :src="assetsPath+'/gift_icon.png'" mode="widthFix"> <image class="gift-icon" :src="assetsPath+'/gift_icon.png'" mode="widthFix">
</image> </image>
</view> </view>
<text class="text-13">房间预定，下单即可享会员积分赠送</text> <text class="text-13">房间预定，下单即可享会员积分赠送</text>
</view> </view>
<view class="flex-row-center"> <view class="flex-row-center">
<text class="text-13">更多权益请查看多动规则</text> <text class="text-13">更多权益请查看多动规则</text>
...@@ -484,10 +512,11 @@ ...@@ -484,10 +512,11 @@
}, },
onLoading() { onLoading() {
equityMembersList().then(res => { equityMembersList().then(res => {
if (res.data.code == 200 && res.data.rows) { if (res.data.code == 200 && res.data.rows) {
this.list = res.data.rows this.list = res.data.rows
this.equityAmountList = Number(this.list[0].requiredAmount).toFixed(2).toString().split('.'); this.equityAmountList = Number(this.list[0].requiredAmount).toFixed(2).toString().split(
'.');
} }
this.onGetUserInfo(); this.onGetUserInfo();
}) })
...@@ -662,28 +691,45 @@ ...@@ -662,28 +691,45 @@
.vip-create { .vip-create {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100vw;
min-height: 100vh; height: 100vh;
justify-content: center;
.bg-header { .bg-header {
display: block; display: block;
width: 100%; width: 100vw;
image { image {
display: block; display: block;
width: 100%; width: 100%;
min-height: 600upx; min-height: 400upx;
}
}
.content-box{
position: relative;
display: flex;
flex: 1;
width: 100vw;
.img-box{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
image {
width: 100%;
height: 100%;
}
} }
} }
.content { .content {
position: relative;
display: flex; display: flex;
flex: 1;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
background-color: #FFEABF; // background-color: #FFEABF;
align-items: center; align-items: center;
padding: 12upx 0 60upx; padding: 0 0 60upx;
z-index: 8;
.bg-box-1 { .bg-box-1 {
position: relative; position: relative;
display: flex; display: flex;
...@@ -691,7 +737,7 @@ ...@@ -691,7 +737,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 690upx; width: 690upx;
min-height: 596upx; min-height: 496upx;
background: #FFCA7E; background: #FFCA7E;
border-radius: 32upx; border-radius: 32upx;
padding: 6px 0; padding: 6px 0;
...@@ -806,24 +852,8 @@ ...@@ -806,24 +852,8 @@
padding: 0 1%; padding: 0 1%;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
// margin: 42upx 0; // margin: 42upx 0;
.absolute-1 {
display: flex;
justify-content: center;
align-items: center;
top: -14upx;
left: -8upx;
width: 96rpx;
height: 28rpx;
background: linear-gradient(90deg, #FF7800, #FF0000);
border-radius: 6rpx;
z-index: 8;
text {
font-size: 18rpx;
color: #FFFFFF;
}
}
.item { .item {
position: relative; position: relative;
...@@ -837,7 +867,38 @@ ...@@ -837,7 +867,38 @@
.amount-bg { .amount-bg {
display: block; display: block;
width: 100%; width: 100%;
max-height: 240upx; height: 140upx;
}
.absolute-1 {
display: flex;
justify-content: center;
align-items: center;
top: -14upx;
left: -8upx;
width: auto;
min-width: 80upx;
height: 32upx;
padding: 0 12upx;
background: linear-gradient(90deg, #FF7800, #FF0000);
border-radius: 6upx;
z-index: 8;
text {
font-size: 18upx;
color: #FFFFFF;
}
}
.absolute-2{
top: -16upx;
left: auto;
right: -16upx;
width: 64upx;
z-index: 8;
image{
width: 100%;
}
} }
.item-content { .item-content {
...@@ -862,16 +923,12 @@ ...@@ -862,16 +923,12 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 33%; height: 100%;
text { text {
margin-top: 8upx;
font-weight: normal; font-weight: normal;
font-size: 28upx; font-size: 18upx;
color: #000000; color: #FFFFFF;
background: linear-gradient(-90deg, #FF7800 0%, #FF0000 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
} }
...@@ -882,74 +939,69 @@ ...@@ -882,74 +939,69 @@
width: 100%; width: 100%;
} }
.part-amount {
display: flex;
flex: 1;
width: 100%;
align-items: center;
justify-content: center;
}
.amount { .amount {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-end;
justify-content: center; justify-content: center;
align-items: center;
color: #FE3F00; color: #FE3F00;
height: 61%;
.symbol { .symbol {
font-weight: 400; font-weight: 400;
font-size: 29upx; font-size: 29upx;
margin-bottom: 10upx; margin-top: 20upx;
} }
.num { .num {
font-weight: 400; margin-top: 12upx;
font-size: 64upx; font-weight: bold;
font-size: 42upx;
color: #000000;
font-style: italic;
background: linear-gradient(-90deg, #FF7800 0%, #FF0000 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
} }
.tip-text { .tip-text {
position: relative;
display: flex; display: flex;
flex: 1;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 64upx;
background: linear-gradient(-90deg, #FCD25B, #FA541D);
border-radius: 0 0 23upx 23upx;
z-index: 2;
text { text {
font-size: 26upx; font-weight: bolder;
color: #ffffff; font-size: 28upx;
color: #FF1C00;
} }
} }
.active { }
background: linear-gradient(-90deg, #FCD25B, #FA541D);
box-shadow: 0 4upx 12upx #FA541D;
border-radius: 12upx;
.amount { .active {
color: #ffffff; .absolute-1 {
} background: #FFFDF4;
border: 1px solid #FF4D05;
.preferential {
text {
margin-top: 8upx;
color: #ffffff;
background: #ffffff;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
text {
color: #FA5A20;
} }
}
.part-bottom { .amount{
.tip-text { .symbol{
background: linear-gradient(-45deg, #FCD25B, #FA541D); color: #FFFFFF;
} }
.num{
color: #FFFFFF;
background: #FFFFFF;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.tip-text{
text{
color: #FFFFFF;
} }
} }
} }
...@@ -1078,13 +1130,14 @@ ...@@ -1078,13 +1130,14 @@
} }
} }
.flex-col{ .flex-col {
.text-2 { .text-2 {
color: #D27E1F; color: #D27E1F;
font-size: 32upx; font-size: 32upx;
font-weight: bold; font-weight: bold;
} }
} }
.cu-btn-box { .cu-btn-box {
margin-top: 10upx; margin-top: 10upx;
...@@ -1366,7 +1419,6 @@ ...@@ -1366,7 +1419,6 @@
.flex-row { .flex-row {
.flex-col { .flex-col {
.text-12 { .text-12 {
width: 77upx;
color: #000000; color: #000000;
font-size: 28upx; font-size: 28upx;
font-weight: bold; font-weight: bold;
...@@ -1445,4 +1497,20 @@ ...@@ -1445,4 +1497,20 @@
} }
} }
} }
.active-bg{
width: 692upx;
margin: 20upx auto 0;
image{
width: 100%;
max-height: 142upx;
}
}
.active-bg-2{
width: 692upx;
margin: 20upx auto 0;
image{
width: 100%;
max-height: 218upx;
}
}
</style> </style>
\ No newline at end of file
setting/levelDetail/index.vue
...@@ -93,9 +93,9 @@ ...@@ -93,9 +93,9 @@
}, },
methods:{ methods:{
onTypeChange(i){ onTypeChange(i){
if(this.index === i) return; // if(this.index === i) return;
this.index = i; // this.index = i;
this.onLoading(); // this.onLoading();
}, },
onLoading(){ onLoading(){
memberConfigList({ memberConfigList({
......
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