uniapp 会员申请ui
parent
21a020f430
commit
91b21f344d
|
|
@ -15,7 +15,9 @@
|
||||||
import {
|
import {
|
||||||
mapActions
|
mapActions
|
||||||
} from 'vuex'
|
} from 'vuex'
|
||||||
|
import {
|
||||||
|
memberGradeInfo
|
||||||
|
} from '@/api/member.js';
|
||||||
export default {
|
export default {
|
||||||
globalData: {
|
globalData: {
|
||||||
spid: 0,
|
spid: 0,
|
||||||
|
|
@ -27,6 +29,16 @@
|
||||||
id: 0
|
id: 0
|
||||||
},
|
},
|
||||||
onLaunch: function(option) {
|
onLaunch: function(option) {
|
||||||
|
const res = memberGradeInfo().then((res) =>{
|
||||||
|
if(res.data.some((item) => !!!parseInt(item.isExist))){
|
||||||
|
uni.setTabBarItem({
|
||||||
|
index: 2,
|
||||||
|
text: 'text',
|
||||||
|
pagePath: '/pages/member_equity/index'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
let that = this;
|
let that = this;
|
||||||
// #ifdef H5
|
// #ifdef H5
|
||||||
uni.getSystemInfo({
|
uni.getSystemInfo({
|
||||||
|
|
|
||||||
|
|
@ -573,7 +573,7 @@
|
||||||
"text": "分类"
|
"text": "分类"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"pagePath": "pages/member_record/index",
|
"pagePath": "pages/member_application/index",
|
||||||
"iconPath": "static/images/2-001.png",
|
"iconPath": "static/images/2-001.png",
|
||||||
"selectedIconPath": "static/images/2-002.png",
|
"selectedIconPath": "static/images/2-002.png",
|
||||||
"text": "会员申请"
|
"text": "会员申请"
|
||||||
|
|
|
||||||
|
|
@ -1,144 +1,166 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="box">
|
<view class="box">
|
||||||
|
<image class="phone-money" src='../../static/images/phoneMoney.png'></image>
|
||||||
<view class="box-member">
|
<view class="box-member">
|
||||||
<view :class="[activeIndex.includes(index) && 'member-active',!!parseInt(item.isExist) && 'member-disbled', 'member-item']" v-for="(item,index) in memberData" :key="index" @click="handleMember(item,index)">
|
<view class="box-title">
|
||||||
<view class="member-image">
|
<image src='../../static/images/memberTitle.png'></image>
|
||||||
<image src='../../static/images/f.png'></image>
|
</view>
|
||||||
</view>
|
<view class="member-list">
|
||||||
<view class="member-text">
|
<view
|
||||||
<view class="text-title">
|
:class="[activeIndex.includes(index) && 'member-active',!!parseInt(item.isExist) && 'member-disbled', 'member-item']"
|
||||||
<text>{{item.name.split('得')[0]}}<text>得{{item.name.split('得')[1]}}</text></text>
|
v-for="(item,index) in memberData" :key="index" @click="handleMember(item,index)">
|
||||||
<view></view>
|
<view class="member-image">
|
||||||
|
<image src='../../static/images/f.png'></image>
|
||||||
|
</view>
|
||||||
|
<view class="member-text">
|
||||||
|
<view class="text-title">
|
||||||
|
<text>{{item.name.split('得')[0]}}<text>得{{item.name.split('得')[1]}}</text></text>
|
||||||
|
<view></view>
|
||||||
|
</view>
|
||||||
|
<text class="text-content">{{item.gearRemarks}}</text>
|
||||||
</view>
|
</view>
|
||||||
<text class="text-content">{{item.gearRemarks}}</text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="box-privilege">
|
<view class="box-privilege">
|
||||||
<view class="privilege-item" v-for="(item,index) in 4" :key="index">
|
<view class="box-title">
|
||||||
<image src='../../static/images/f.png'></image>
|
<image src='../../static/images/memberTitle.png'></image>
|
||||||
<text class="privilege-text">
|
</view>
|
||||||
开通立享大额话费返送。
|
<view class="privilege-list">
|
||||||
</text>
|
<view class="privilege-item" v-for="(item,index) in 4" :key="index">
|
||||||
|
<image src='../../static/images/vip1.png'></image>
|
||||||
|
<text class="privilege-text">
|
||||||
|
开通立享大额话费返送。
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<paymentMember :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun' :payInfo="payInfo"></paymentMember>
|
<paymentMember :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun' :payInfo="payInfo">
|
||||||
|
</paymentMember>
|
||||||
<button class="box-submit" @click="goPay">立即充值</button>
|
<button class="box-submit" @click="goPay">立即充值</button>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {
|
import {
|
||||||
memberGradeInfo
|
memberGradeInfo
|
||||||
} from '@/api/member.js';
|
} from '@/api/member.js';
|
||||||
import paymentMember from '@/components/paymentMember';
|
import paymentMember from '@/components/paymentMember';
|
||||||
import store from '@/store/index';
|
import store from '@/store/index';
|
||||||
export default {
|
export default {
|
||||||
name: "member_application",
|
name: "member_application",
|
||||||
components: {
|
components: {
|
||||||
paymentMember
|
paymentMember
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
memberData:[],
|
memberData: [],
|
||||||
payInfo:{
|
payInfo: {
|
||||||
userPhone: '',
|
userPhone: '',
|
||||||
confirmPhone: '',
|
confirmPhone: '',
|
||||||
orderInfos: []
|
orderInfos: []
|
||||||
},
|
},
|
||||||
payMode: [{
|
payMode: [{
|
||||||
name: "微信支付",
|
name: "微信支付",
|
||||||
icon: "icon-weixinzhifu",
|
icon: "icon-weixinzhifu",
|
||||||
value: 'WXPAY',
|
value: 'WXPAY',
|
||||||
title: '微信快捷支付'
|
title: '微信快捷支付'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "支付宝",
|
name: "支付宝",
|
||||||
icon: "icon-zhifubao",
|
icon: "icon-zhifubao",
|
||||||
value: 'ALIPAY',
|
value: 'ALIPAY',
|
||||||
title: '支付宝快捷支付'
|
title: '支付宝快捷支付'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
pay_close: false,
|
pay_close: false,
|
||||||
activeIndex:[],
|
activeIndex: [],
|
||||||
form: {
|
form: {
|
||||||
phone:''
|
phone: ''
|
||||||
},
|
},
|
||||||
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
async onLoad() {
|
async onLoad() {
|
||||||
const res = await memberGradeInfo()
|
// uni.setTabBarItem({
|
||||||
this.memberData = res.data
|
// index: 2,
|
||||||
|
// text: 'text',
|
||||||
|
// pagePath: '/pages/member_equity/index'
|
||||||
|
// })
|
||||||
|
// uni.switchTab({
|
||||||
|
// url:'/pages/member_equity/index'
|
||||||
|
// })
|
||||||
|
const res = await memberGradeInfo()
|
||||||
|
this.memberData = res.data
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleMember(value,index){
|
handleMember(value, index) {
|
||||||
if(!!parseInt(value.isExist)) return
|
if (!!parseInt(value.isExist)) return
|
||||||
if(this.activeIndex.includes(index)){
|
if (this.activeIndex.includes(index)) {
|
||||||
this.activeIndex = this.activeIndex.filter(item => item !== index)
|
this.activeIndex = this.activeIndex.filter(item => item !== index)
|
||||||
}else{
|
} else {
|
||||||
this.activeIndex.push(index)
|
this.activeIndex.push(index)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 打开支付组件
|
* 打开支付组件
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
goPay() {
|
goPay() {
|
||||||
if(this.activeIndex.length){
|
if (this.activeIndex.length) {
|
||||||
this.$set(this, 'pay_close', true);
|
this.$set(this, 'pay_close', true);
|
||||||
const orderInfos = this.activeIndex.map((item) => {
|
const orderInfos = this.activeIndex.map((item) => {
|
||||||
return {
|
return {
|
||||||
...this.memberData[item],
|
...this.memberData[item],
|
||||||
gearId:this.memberData[item].id
|
gearId: this.memberData[item].id
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.payInfo = {
|
||||||
|
userPhone: store.state.app.userInfo.mobile,
|
||||||
|
orderInfos
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
},
|
||||||
this.payInfo = {
|
/**
|
||||||
userPhone: store.state.app.userInfo.mobile,
|
* 事件回调
|
||||||
orderInfos
|
*
|
||||||
}
|
*/
|
||||||
}
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 事件回调
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
onChangeFun: function(e) {
|
|
||||||
let opt = e;
|
|
||||||
let action = opt.action || null;
|
|
||||||
let value = opt.value != undefined ? opt.value : null;
|
|
||||||
(action && this[action]) && this[action](value);
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 关闭支付组件
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
payClose: function() {
|
|
||||||
this.pay_close = false;
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 支付成功回调
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
pay_complete: function() {
|
|
||||||
this.status = false;
|
|
||||||
this.page = 1;
|
|
||||||
this.$set(this, 'bargain', []);
|
|
||||||
this.$set(this, 'pay_close', false);
|
|
||||||
this.getBargainUserList();
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 支付失败回调
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
pay_fail: function() {
|
|
||||||
this.pay_close = false;
|
|
||||||
},
|
|
||||||
onChangeFun: function(e) {
|
onChangeFun: function(e) {
|
||||||
let opt = e;
|
let opt = e;
|
||||||
let action = opt.action || null;
|
let action = opt.action || null;
|
||||||
let value = opt.value != undefined ? opt.value : null;
|
let value = opt.value != undefined ? opt.value : null;
|
||||||
(action && this[action]) && this[action](value);
|
(action && this[action]) && this[action](value);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 关闭支付组件
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
payClose: function() {
|
||||||
|
this.pay_close = false;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 支付成功回调
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
pay_complete: function() {
|
||||||
|
this.status = false;
|
||||||
|
this.page = 1;
|
||||||
|
this.$set(this, 'bargain', []);
|
||||||
|
this.$set(this, 'pay_close', false);
|
||||||
|
this.getBargainUserList();
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 支付失败回调
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
pay_fail: function() {
|
||||||
|
this.pay_close = false;
|
||||||
|
},
|
||||||
|
onChangeFun: function(e) {
|
||||||
|
let opt = e;
|
||||||
|
let action = opt.action || null;
|
||||||
|
let value = opt.value != undefined ? opt.value : null;
|
||||||
|
(action && this[action]) && this[action](value);
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
@ -146,158 +168,261 @@ import store from '@/store/index';
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.box {
|
.box {
|
||||||
padding: 0 40rpx;
|
position: relative;
|
||||||
|
padding: 207rpx 40rpx 0 40rpx;
|
||||||
|
height: 100vh;
|
||||||
|
background: url(../../static/images/bg.png);
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-attachment: fixed;
|
||||||
|
|
||||||
|
.phone-money {
|
||||||
|
width: 604rpx;
|
||||||
|
height: 140rpx;
|
||||||
|
position: absolute;
|
||||||
|
top: 2%;
|
||||||
|
left: 15%;
|
||||||
|
}
|
||||||
|
|
||||||
.box-member {
|
.box-member {
|
||||||
border-radius: 20rpx;
|
box-shadow: 0px 0px 15px -5px #000;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 207rpx;
|
border-radius: 20px;
|
||||||
padding: 83rpx 30rpx 30rpx 30rpx;
|
box-sizing: border-box;
|
||||||
background: linear-gradient(#FFD55D,#FD752F);
|
border: 1px solid transparent;
|
||||||
|
background-image: linear-gradient(#FFD55D, #FD752F),
|
||||||
|
linear-gradient(to bottom, #FFD55D, #FDCB3B);
|
||||||
|
background-origin: border-box;
|
||||||
|
background-clip: content-box, border-box;
|
||||||
|
border-radius: 20px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
.member-item {
|
.box-title {
|
||||||
display: flex;
|
position: absolute;
|
||||||
justify-content: space-between;
|
top: -5.5%;
|
||||||
background: #fff;
|
left: -203rpx;
|
||||||
margin-bottom: 20rpx;
|
margin-left: 50%;
|
||||||
padding: 30rpx 20rpx 27rpx 20rpx;
|
|
||||||
border-radius: 20rpx;
|
|
||||||
|
|
||||||
.member-image {
|
image {
|
||||||
width: 104rpx;
|
width: 406rpx;
|
||||||
height: 104rpx;
|
height: 87rpx;
|
||||||
border-radius: 35rpx;
|
position: relative;
|
||||||
background: linear-gradient(#FFEBB2,#FDCB3B);
|
display: flex;
|
||||||
padding: 20rpx;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
image {
|
|
||||||
width: 100%;
|
&::before {
|
||||||
height: 100%;
|
content: '会员详情介绍';
|
||||||
}
|
position: absolute;
|
||||||
}
|
font-size: 34rpx;
|
||||||
|
font-family: Adobe Heiti Std;
|
||||||
.member-text {
|
font-weight: normal;
|
||||||
|
color: #FF4B47;
|
||||||
|
text-shadow: 1px 5px 5px rgba(255, 195, 30, 0.78);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-list {
|
||||||
|
margin: 83rpx 30rpx 30rpx 30rpx;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.member-item {
|
||||||
|
padding: 30rpx 20rpx 27rpx 20rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
flex: .9;
|
background: #fff;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
|
||||||
.text-title {
|
.member-image {
|
||||||
margin-top: -14rpx;
|
width: 104rpx;
|
||||||
font-size: 32rpx;
|
height: 104rpx;
|
||||||
font-weight: bolder;
|
border-radius: 35rpx;
|
||||||
transform: skew(-6deg, 0);
|
background: linear-gradient(#FFEBB2, #FDCB3B);
|
||||||
|
padding: 20rpx;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-text {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
text{
|
flex: .9;
|
||||||
text{
|
|
||||||
color: #C80D00;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
view{
|
|
||||||
width: 18rpx;
|
|
||||||
height: 6rpx;
|
|
||||||
background: #FEAC49;
|
|
||||||
border-radius: 3rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-content {
|
.text-title {
|
||||||
font-size: 24rpx;
|
margin-top: -14rpx;
|
||||||
color: #747474;
|
font-size: 32rpx;
|
||||||
}
|
font-weight: bolder;
|
||||||
}
|
transform: skew(-6deg, 0);
|
||||||
}
|
display: flex;
|
||||||
.member-active{
|
justify-content: space-between;
|
||||||
transition: .3s;
|
|
||||||
background: linear-gradient(#FF995F,#DA0E00);
|
|
||||||
|
|
||||||
.member-image {
|
text {
|
||||||
background: linear-gradient(#FF995F,#DA0E00);
|
text {
|
||||||
}
|
color: #C80D00;
|
||||||
|
|
||||||
.member-text {
|
|
||||||
.text-title {
|
|
||||||
text{
|
|
||||||
color: #fff;
|
|
||||||
text{
|
|
||||||
color: rgb(223,208,42);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
view{
|
|
||||||
background: #fff;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.text-content {
|
view {
|
||||||
color: #fff;
|
width: 18rpx;
|
||||||
|
height: 6rpx;
|
||||||
|
background: #FEAC49;
|
||||||
|
border-radius: 3rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-content {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #747474;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.member-disbled{
|
.member-active {
|
||||||
transition: .3s;
|
transition: .3s;
|
||||||
background: linear-gradient(#EFEFEF,#BCBCBC);
|
background: linear-gradient(#FF995F, #DA0E00);
|
||||||
|
|
||||||
.member-image {
|
.member-image {
|
||||||
background: linear-gradient(#AAAAAA,#989898);
|
background: linear-gradient(#FF995F, #FDCB3B);
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-text {
|
||||||
|
.text-title {
|
||||||
|
text {
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: rgb(223, 208, 42);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
view {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-content {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.member-text {
|
.member-disbled {
|
||||||
.text-title {
|
transition: .3s;
|
||||||
text{
|
background: linear-gradient(#EFEFEF, #BCBCBC);
|
||||||
color: #868585;
|
|
||||||
text{
|
.member-image {
|
||||||
|
background: linear-gradient(#AAAAAA, #989898);
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-text {
|
||||||
|
.text-title {
|
||||||
|
text {
|
||||||
|
color: #868585;
|
||||||
|
|
||||||
|
text {
|
||||||
color: #868585;
|
color: #868585;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
view{
|
|
||||||
background: #fff;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.text-content {
|
view {
|
||||||
color: #5C5C5C;
|
background: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-content {
|
||||||
|
color: #5C5C5C;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.box-privilege {
|
.box-privilege {
|
||||||
|
box-shadow: 0px 0px 15px -5px #000;
|
||||||
border-radius: 36rpx;
|
border-radius: 36rpx;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 44rpx;
|
margin-top: 12%;
|
||||||
padding: 84rpx 10rpx 40rpx 10rpx;
|
border-radius: 20px;
|
||||||
background: linear-gradient(#FFD55D,#FD7630);
|
box-sizing: border-box;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
background-image: linear-gradient(#FFD55D, #FD752F),
|
||||||
|
linear-gradient(to bottom, #FFEBB2, #FDCB3B);
|
||||||
|
background-origin: border-box;
|
||||||
|
background-clip: content-box, border-box;
|
||||||
|
border-radius: 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
.privilege-item {
|
.box-title {
|
||||||
display: flex;
|
position: absolute;
|
||||||
flex-direction: column;
|
top: -9%;
|
||||||
align-items: center;
|
left: -203rpx;
|
||||||
justify-content: space-between;
|
margin-left: 50%;
|
||||||
background: #fff;
|
|
||||||
padding: 16rpx 16rpx;
|
|
||||||
border-radius: 20rpx;
|
|
||||||
margin: 0 10rpx;
|
|
||||||
|
|
||||||
image {
|
image {
|
||||||
width: 87rpx;
|
width: 406rpx;
|
||||||
height: 87rpx;
|
height: 87rpx;
|
||||||
border-radius: 50%;
|
position: relative;
|
||||||
margin-bottom: 15rpx;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '特权详情';
|
||||||
|
position: absolute;
|
||||||
|
font-size: 34rpx;
|
||||||
|
font-family: Adobe Heiti Std;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #FF4B47;
|
||||||
|
text-shadow: 1px 5px 5px rgba(255, 195, 30, 0.78);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.privilege-text {
|
}
|
||||||
color: #000000;
|
|
||||||
line-height: 36rpx;
|
.privilege-list {
|
||||||
text-align: center;
|
margin: 84rpx 10rpx 40rpx 10rpx;
|
||||||
font-size: 26rpx;
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.privilege-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
background: #fff;
|
||||||
|
padding: 16rpx 16rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
margin: 0 10rpx;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 96rpx;
|
||||||
|
height: 96rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.privilege-text {
|
||||||
|
color: #000000;
|
||||||
|
line-height: 36rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.box-submit {
|
.box-submit {
|
||||||
background: linear-gradient(#FFC82B,#FD7A32);
|
background: linear-gradient(#FFC82B, #FD7A32);
|
||||||
margin-top: 127rpx;
|
margin-top: 127rpx;
|
||||||
margin-bottom: 75rpx;
|
margin-bottom: 75rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -10,19 +10,17 @@
|
||||||
<text>再升1级即可获得【XX】等6项权益</text>
|
<text>再升1级即可获得【XX】等6项权益</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="member-right">
|
<view class="member-right">
|
||||||
<image src='../../static/images/f.png'></image>
|
<image src='../../static/images/vipStar.png'></image>
|
||||||
<text >会员等级3级</text>
|
<text >会员等级3级</text>
|
||||||
<button>立即续费</button>
|
<button>立即续费</button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="box-equity">
|
<view class="box-equity">
|
||||||
<view class="equity-text">
|
<view class="equity-text">
|
||||||
<view class="equity-title">
|
|
||||||
</view>
|
|
||||||
<text class="equity-member">我的会员权益</text>
|
<text class="equity-member">我的会员权益</text>
|
||||||
<text class="equity-look">查看权益></text>
|
<text class="equity-look">查看权益></text>
|
||||||
</view>
|
</view>
|
||||||
<view class="equity-item" v-for="(item,index) in 2" :key="index">
|
<view class="equity-item" v-for="(item,index) in 2" :key="index">
|
||||||
<view class="equity-grade">
|
<view class="equity-grade">
|
||||||
<text>办理档次【640元】档</text>
|
<text>办理档次【640元】档</text>
|
||||||
<text>办理日期：2021.12.30</text>
|
<text>办理日期：2021.12.30</text>
|
||||||
|
|
@ -101,10 +99,14 @@
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.box {
|
.box {
|
||||||
padding: 36rpx 40rpx;
|
|
||||||
background: #fff;
|
background: #fff;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
background: url(../../static/images/memberBg.png);
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-attachment: fixed;
|
||||||
.box-member {
|
.box-member {
|
||||||
|
padding: 36rpx 40rpx;
|
||||||
border-radius: 20rpx;
|
border-radius: 20rpx;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
// padding: 20rpx 20rpx 30rpx 20rpx;
|
// padding: 20rpx 20rpx 30rpx 20rpx;
|
||||||
|
|
@ -162,34 +164,34 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.box-equity {
|
.box-equity {
|
||||||
border-radius: 20rpx;
|
// border-radius: 20rpx;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 10%;
|
padding: 0 40rpx;
|
||||||
padding: 40rpx 10rpx 40rpx 10rpx;
|
background: url(../../static/images/memberEquity.png);
|
||||||
// background: #fff;
|
background-size: 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
.equity-text{
|
.equity-text{
|
||||||
display: flex;
|
margin:5% 0;
|
||||||
align-items: center;
|
display: flex;
|
||||||
position: relative;
|
align-items: center;
|
||||||
.equity-title{
|
height: 10%;
|
||||||
display: flex;
|
.equity-member{
|
||||||
justify-content: center;
|
margin: 0 10%;
|
||||||
align-items: center;
|
font-size: 30rpx;
|
||||||
width: 200rpx;
|
font-family: PingFang SC;
|
||||||
height: 90rpx;
|
font-weight: 400;
|
||||||
background: #fff;
|
color: #FFFFFF;
|
||||||
border-radius: 8px;/* 设置圆角 */
|
|
||||||
transform: perspective(8px)scale(1.1, 1.3) rotateX(5deg);
|
|
||||||
/* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴旋转5度 */
|
|
||||||
transform-origin: bottom left;
|
|
||||||
margin-right: 20rpx;
|
|
||||||
}
|
|
||||||
.equity-member{
|
|
||||||
position: absolute;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.equity-look{
|
.equity-look{
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-family: PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #FF4922;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.equity-item {
|
.equity-item {
|
||||||
|
|
@ -198,10 +200,9 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
border-radius: 20rpx;
|
border-radius: 20rpx;
|
||||||
margin: 15rpx;
|
margin: 0 20rpx 20rpx 20rpx;
|
||||||
padding: 30rpx 24rpx;
|
// padding: 30rpx 24rpx;
|
||||||
.equity-grade{
|
.equity-grade{
|
||||||
background: greenyellow;
|
|
||||||
border-radius: 10rpx 10rpx;
|
border-radius: 10rpx 10rpx;
|
||||||
padding: 20rpx;
|
padding: 20rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -209,9 +210,10 @@
|
||||||
}
|
}
|
||||||
.equity-money {
|
.equity-money {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-around;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
.money-box{
|
.money-box{
|
||||||
|
width: 46%;
|
||||||
padding: 24rpx 25rpx;
|
padding: 24rpx 25rpx;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -11,178 +11,184 @@
|
||||||
</u--form>
|
</u--form>
|
||||||
</view>
|
</view>
|
||||||
<view class="box-member">
|
<view class="box-member">
|
||||||
<view :class="[activeIndex.includes(index) && 'member-active',!!parseInt(item.isExist) && 'member-disbled', 'member-item']" v-for="(item,index) in memberData" :key="index" @click="handleMember(item,index)">
|
<view class="box-title">
|
||||||
<view class="member-image">
|
<image src='../../static/images/memberTitle.png'></image>
|
||||||
<image src='../../static/images/f.png'></image>
|
|
||||||
</view>
|
|
||||||
<view class="member-text">
|
|
||||||
<view class="text-title">
|
|
||||||
<text>{{item.name.split('得')[0]}}<text>得{{item.name.split('得')[1]}}</text></text>
|
|
||||||
<view></view>
|
|
||||||
</view>
|
|
||||||
<text class="text-content">{{item.gearRemarks}}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="member-prompt">
|
<view class="member-list">
|
||||||
* 办理三个项目即可升级会员2，会员2享XX权益。
|
<view
|
||||||
|
:class="[activeIndex.includes(index) && 'member-active',!!parseInt(item.isExist) && 'member-disbled', 'member-item']"
|
||||||
|
v-for="(item,index) in memberData" :key="index" @click="handleMember(item,index)">
|
||||||
|
<view class="member-image">
|
||||||
|
<image src='../../static/images/f.png'></image>
|
||||||
|
</view>
|
||||||
|
<view class="member-text">
|
||||||
|
<view class="text-title">
|
||||||
|
<text>{{item.name.split('得')[0]}}<text>得{{item.name.split('得')[1]}}</text></text>
|
||||||
|
<view></view>
|
||||||
|
</view>
|
||||||
|
<text class="text-content">{{item.gearRemarks}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="member-prompt">
|
||||||
|
* 办理三个项目即可升级会员2，会员2享XX权益。
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<paymentMember :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun' :payInfo="payInfo"></paymentMember>
|
<paymentMember :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun' :payInfo="payInfo">
|
||||||
|
</paymentMember>
|
||||||
<button class="box-submit" @click="goPay">立即充值</button>
|
<button class="box-submit" @click="goPay">立即充值</button>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {
|
import {
|
||||||
memberGradeInfo
|
memberGradeInfo
|
||||||
} from '@/api/member.js';
|
} from '@/api/member.js';
|
||||||
import paymentMember from '@/components/paymentMember';
|
import paymentMember from '@/components/paymentMember';
|
||||||
import store from '@/store/index';
|
import store from '@/store/index';
|
||||||
export default {
|
export default {
|
||||||
name: "member_application",
|
name: "member_application",
|
||||||
components: {
|
components: {
|
||||||
paymentMember
|
paymentMember
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
memberData:[],
|
memberData: [],
|
||||||
payInfo:{
|
payInfo: {
|
||||||
userPhone: '',
|
userPhone: '',
|
||||||
confirmPhone: '',
|
confirmPhone: '',
|
||||||
orderInfos: []
|
orderInfos: []
|
||||||
},
|
},
|
||||||
payMode: [{
|
payMode: [{
|
||||||
name: "微信支付",
|
name: "微信支付",
|
||||||
icon: "icon-weixinzhifu",
|
icon: "icon-weixinzhifu",
|
||||||
value: 'WXPAY',
|
value: 'WXPAY',
|
||||||
title: '微信快捷支付'
|
title: '微信快捷支付'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "支付宝",
|
name: "支付宝",
|
||||||
icon: "icon-zhifubao",
|
icon: "icon-zhifubao",
|
||||||
value: 'ALIPAY',
|
value: 'ALIPAY',
|
||||||
title: '支付宝快捷支付'
|
title: '支付宝快捷支付'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
pay_close: false,
|
pay_close: false,
|
||||||
activeIndex:[],
|
activeIndex: [],
|
||||||
form: {
|
form: {
|
||||||
userPhone:'',
|
userPhone: '',
|
||||||
confirmPhone:''
|
confirmPhone: ''
|
||||||
},
|
},
|
||||||
rules: {
|
rules: {
|
||||||
userPhone: [
|
userPhone: [{
|
||||||
{
|
|
||||||
required: true,
|
required: true,
|
||||||
message: '手机号不能为空',
|
message: '手机号不能为空',
|
||||||
// 触发器可以同时用blur和change
|
// 触发器可以同时用blur和change
|
||||||
trigger: ['change', 'blur']
|
trigger: ['change', 'blur']
|
||||||
},
|
},
|
||||||
{
|
|
||||||
pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[1-25-9])\d{8}$/g,
|
|
||||||
// 正则检验前先将值转为字符串
|
|
||||||
transform(value) {
|
|
||||||
return String(value);
|
|
||||||
},
|
|
||||||
message: '手机号不正确（190.193号段不可充值）',
|
|
||||||
trigger: ['change', 'blur']
|
|
||||||
},
|
|
||||||
],
|
|
||||||
confirmPhone:[
|
|
||||||
{
|
{
|
||||||
|
pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[1-25-9])\d{8}$/g,
|
||||||
|
// 正则检验前先将值转为字符串
|
||||||
|
transform(value) {
|
||||||
|
return String(value);
|
||||||
|
},
|
||||||
|
message: '手机号不正确（190.193号段不可充值）',
|
||||||
|
trigger: ['change', 'blur']
|
||||||
|
},
|
||||||
|
],
|
||||||
|
confirmPhone: [{
|
||||||
required: true,
|
required: true,
|
||||||
message: '手机号确认不能为空',
|
message: '手机号确认不能为空',
|
||||||
// 触发器可以同时用blur和change
|
// 触发器可以同时用blur和change
|
||||||
trigger: ['change', 'blur']
|
trigger: ['change', 'blur']
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
validator: (rule, value, callback) => {
|
validator: (rule, value, callback) => {
|
||||||
return this.form.userPhone == this.form.confirmPhone
|
return this.form.userPhone == this.form.confirmPhone
|
||||||
},
|
},
|
||||||
message: '手机号不一致',
|
message: '手机号不一致',
|
||||||
trigger: ['change','blur'],
|
trigger: ['change', 'blur'],
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
async onLoad() {
|
async onLoad() {
|
||||||
const res = await memberGradeInfo()
|
const res = await memberGradeInfo()
|
||||||
this.memberData = res.data
|
this.memberData = res.data
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleMember(value,index){
|
handleMember(value, index) {
|
||||||
if(!!parseInt(value.isExist)) return
|
if (!!parseInt(value.isExist)) return
|
||||||
if(this.activeIndex.includes(index)){
|
if (this.activeIndex.includes(index)) {
|
||||||
this.activeIndex = this.activeIndex.filter(item => item !== index)
|
this.activeIndex = this.activeIndex.filter(item => item !== index)
|
||||||
}else{
|
} else {
|
||||||
this.activeIndex.push(index)
|
this.activeIndex.push(index)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 打开支付组件
|
* 打开支付组件
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
goPay() {
|
goPay() {
|
||||||
this.$refs.uForm.validate().then(res => {
|
this.$refs.uForm.validate().then(res => {
|
||||||
if(this.activeIndex.length){
|
if (this.activeIndex.length) {
|
||||||
this.$set(this, 'pay_close', true);
|
this.$set(this, 'pay_close', true);
|
||||||
const orderInfos = this.activeIndex.map((item) => {
|
const orderInfos = this.activeIndex.map((item) => {
|
||||||
return {
|
return {
|
||||||
...this.memberData[item],
|
...this.memberData[item],
|
||||||
gearId:this.memberData[item].id
|
gearId: this.memberData[item].id
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
this.payInfo = {
|
this.payInfo = {
|
||||||
userPhone: this.form.userPhone,
|
userPhone: this.form.userPhone,
|
||||||
confirmPhone: this.form.confirmPhone,
|
confirmPhone: this.form.confirmPhone,
|
||||||
orderInfos
|
orderInfos
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}).catch(errors => {
|
}).catch(errors => {
|
||||||
uni.$u.toast('校验失败')
|
uni.$u.toast('校验失败')
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 事件回调
|
* 事件回调
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
onChangeFun: function(e) {
|
|
||||||
let opt = e;
|
|
||||||
let action = opt.action || null;
|
|
||||||
let value = opt.value != undefined ? opt.value : null;
|
|
||||||
(action && this[action]) && this[action](value);
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 关闭支付组件
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
payClose: function() {
|
|
||||||
this.pay_close = false;
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 支付成功回调
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
pay_complete: function() {
|
|
||||||
this.status = false;
|
|
||||||
this.page = 1;
|
|
||||||
this.$set(this, 'bargain', []);
|
|
||||||
this.$set(this, 'pay_close', false);
|
|
||||||
this.getBargainUserList();
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 支付失败回调
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
pay_fail: function() {
|
|
||||||
this.pay_close = false;
|
|
||||||
},
|
|
||||||
onChangeFun: function(e) {
|
onChangeFun: function(e) {
|
||||||
let opt = e;
|
let opt = e;
|
||||||
let action = opt.action || null;
|
let action = opt.action || null;
|
||||||
let value = opt.value != undefined ? opt.value : null;
|
let value = opt.value != undefined ? opt.value : null;
|
||||||
(action && this[action]) && this[action](value);
|
(action && this[action]) && this[action](value);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 关闭支付组件
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
payClose: function() {
|
||||||
|
this.pay_close = false;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 支付成功回调
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
pay_complete: function() {
|
||||||
|
this.status = false;
|
||||||
|
this.page = 1;
|
||||||
|
this.$set(this, 'bargain', []);
|
||||||
|
this.$set(this, 'pay_close', false);
|
||||||
|
this.getBargainUserList();
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 支付失败回调
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
pay_fail: function() {
|
||||||
|
this.pay_close = false;
|
||||||
|
},
|
||||||
|
onChangeFun: function(e) {
|
||||||
|
let opt = e;
|
||||||
|
let action = opt.action || null;
|
||||||
|
let value = opt.value != undefined ? opt.value : null;
|
||||||
|
(action && this[action]) && this[action](value);
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
@ -190,148 +196,291 @@ import store from '@/store/index';
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.box {
|
.box {
|
||||||
padding: 63rpx 40rpx;
|
position: relative;
|
||||||
.box-phone {
|
padding: 8% 40rpx 0 40rpx;
|
||||||
.u-form-item{
|
height: 100vh;
|
||||||
|
background: url(../../static/images/bg.png);
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-attachment: fixed;
|
||||||
|
|
||||||
|
.box-phone {
|
||||||
|
.u-form-item {
|
||||||
margin-bottom: 32rpx;
|
margin-bottom: 32rpx;
|
||||||
}
|
}
|
||||||
::v-deep .u-form-item__body {
|
|
||||||
|
::v-deep .u-form-item__body {
|
||||||
height: 100rpx;
|
height: 100rpx;
|
||||||
border-radius: 20rpx;
|
border-radius: 20rpx;
|
||||||
padding: 0 30rpx;
|
padding: 0 30rpx;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.box-member {
|
|
||||||
border-radius: 20rpx;
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 60rpx;
|
|
||||||
padding: 83rpx 30rpx 30rpx 30rpx;
|
|
||||||
background: linear-gradient(#FFD55D,#FD752F);
|
|
||||||
|
|
||||||
.member-item {
|
.phone-money {
|
||||||
display: flex;
|
width: 604rpx;
|
||||||
justify-content: space-between;
|
height: 140rpx;
|
||||||
background: #fff;
|
position: absolute;
|
||||||
margin-bottom: 20rpx;
|
top: 2%;
|
||||||
padding: 30rpx 20rpx 27rpx 20rpx;
|
left: 15%;
|
||||||
border-radius: 20rpx;
|
}
|
||||||
|
|
||||||
.member-image {
|
.box-member {
|
||||||
width: 104rpx;
|
margin-top: 10%;
|
||||||
height: 104rpx;
|
box-shadow: 0px 0px 15px -5px #000;
|
||||||
border-radius: 35rpx;
|
width: 100%;
|
||||||
background: linear-gradient(#FFEBB2,#FDCB3B);
|
border-radius: 20px;
|
||||||
padding: 20rpx;
|
box-sizing: border-box;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
background-image: linear-gradient(#FFD55D, #FD752F),
|
||||||
|
linear-gradient(to bottom, #FFD55D, #FDCB3B);
|
||||||
|
background-origin: border-box;
|
||||||
|
background-clip: content-box, border-box;
|
||||||
|
border-radius: 20px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
image {
|
.box-title {
|
||||||
width: 100%;
|
position: absolute;
|
||||||
height: 100%;
|
top: -5.5%;
|
||||||
}
|
left: -203rpx;
|
||||||
}
|
margin-left: 50%;
|
||||||
|
|
||||||
.member-text {
|
image {
|
||||||
display: flex;
|
width: 406rpx;
|
||||||
flex-direction: column;
|
height: 87rpx;
|
||||||
justify-content: space-between;
|
position: relative;
|
||||||
flex: .9;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
.text-title {
|
&::before {
|
||||||
margin-top: -14rpx;
|
content: '会员详情介绍';
|
||||||
font-size: 32rpx;
|
position: absolute;
|
||||||
font-weight: bolder;
|
font-size: 34rpx;
|
||||||
transform: skew(-6deg, 0);
|
font-family: Adobe Heiti Std;
|
||||||
display: flex;
|
font-weight: normal;
|
||||||
justify-content: space-between;
|
color: #FF4B47;
|
||||||
text{
|
text-shadow: 1px 5px 5px rgba(255, 195, 30, 0.78);
|
||||||
text{
|
}
|
||||||
color: #C80D00;
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
view{
|
|
||||||
width: 18rpx;
|
|
||||||
height: 6rpx;
|
|
||||||
background: #FEAC49;
|
|
||||||
border-radius: 3rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-content {
|
}
|
||||||
font-size: 24rpx;
|
|
||||||
color: #747474;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.member-active{
|
|
||||||
transition: .3s;
|
|
||||||
background: linear-gradient(#FF995F,#DA0E00);
|
|
||||||
|
|
||||||
.member-image {
|
.member-list {
|
||||||
background: linear-gradient(#FF995F,#DA0E00);
|
margin: 83rpx 30rpx 30rpx 30rpx;
|
||||||
}
|
position: relative;
|
||||||
|
|
||||||
.member-text {
|
.member-item {
|
||||||
.text-title {
|
padding: 30rpx 20rpx 27rpx 20rpx;
|
||||||
text{
|
display: flex;
|
||||||
color: #fff;
|
justify-content: space-between;
|
||||||
text{
|
background: #fff;
|
||||||
color: rgb(223,208,42);
|
margin-bottom: 20rpx;
|
||||||
}
|
border-radius: 20rpx;
|
||||||
}
|
|
||||||
view{
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.text-content {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.member-disbled{
|
.member-image {
|
||||||
transition: .3s;
|
width: 104rpx;
|
||||||
background: linear-gradient(#EFEFEF,#BCBCBC);
|
height: 104rpx;
|
||||||
|
border-radius: 35rpx;
|
||||||
|
background: linear-gradient(#FFEBB2, #FDCB3B);
|
||||||
|
padding: 20rpx;
|
||||||
|
|
||||||
.member-image {
|
image {
|
||||||
background: linear-gradient(#AAAAAA,#989898);
|
width: 100%;
|
||||||
}
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.member-text {
|
.member-text {
|
||||||
.text-title {
|
display: flex;
|
||||||
text{
|
flex-direction: column;
|
||||||
color: #868585;
|
justify-content: space-between;
|
||||||
text{
|
flex: .9;
|
||||||
color: #868585;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
view{
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.text-content {
|
|
||||||
color: #5C5C5C;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.member-prompt{
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.box-submit {
|
.text-title {
|
||||||
background: linear-gradient(#FFC82B,#FD7A32);
|
margin-top: -14rpx;
|
||||||
margin-top: 127rpx;
|
font-size: 32rpx;
|
||||||
margin-bottom: 75rpx;
|
font-weight: bolder;
|
||||||
display: flex;
|
transform: skew(-6deg, 0);
|
||||||
justify-content: center;
|
display: flex;
|
||||||
align-items: center;
|
justify-content: space-between;
|
||||||
height: 87rpx;
|
|
||||||
border-radius: 44rpx;
|
text {
|
||||||
color: #fff;
|
text {
|
||||||
font-size: 32rpx;
|
color: #C80D00;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
view {
|
||||||
|
width: 18rpx;
|
||||||
|
height: 6rpx;
|
||||||
|
background: #FEAC49;
|
||||||
|
border-radius: 3rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-content {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #747474;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-active {
|
||||||
|
transition: .3s;
|
||||||
|
background: linear-gradient(#FF995F, #DA0E00);
|
||||||
|
|
||||||
|
.member-image {
|
||||||
|
background: linear-gradient(#FF995F, #FDCB3B);
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-text {
|
||||||
|
.text-title {
|
||||||
|
text {
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: rgb(223, 208, 42);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
view {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-content {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-disbled {
|
||||||
|
transition: .3s;
|
||||||
|
background: linear-gradient(#EFEFEF, #BCBCBC);
|
||||||
|
|
||||||
|
.member-image {
|
||||||
|
background: linear-gradient(#AAAAAA, #989898);
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-text {
|
||||||
|
.text-title {
|
||||||
|
text {
|
||||||
|
color: #868585;
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: #868585;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
view {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-content {
|
||||||
|
color: #5C5C5C;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-prompt {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-privilege {
|
||||||
|
box-shadow: 0px 0px 15px -5px #000;
|
||||||
|
border-radius: 36rpx;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 12%;
|
||||||
|
border-radius: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
background-image: linear-gradient(#FFD55D, #FD752F),
|
||||||
|
linear-gradient(to bottom, #FFEBB2, #FDCB3B);
|
||||||
|
background-origin: border-box;
|
||||||
|
background-clip: content-box, border-box;
|
||||||
|
border-radius: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.box-title {
|
||||||
|
position: absolute;
|
||||||
|
top: -9%;
|
||||||
|
left: -203rpx;
|
||||||
|
margin-left: 50%;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 406rpx;
|
||||||
|
height: 87rpx;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '特权详情';
|
||||||
|
position: absolute;
|
||||||
|
font-size: 34rpx;
|
||||||
|
font-family: Adobe Heiti Std;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #FF4B47;
|
||||||
|
text-shadow: 1px 5px 5px rgba(255, 195, 30, 0.78);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.privilege-list {
|
||||||
|
margin: 84rpx 10rpx 40rpx 10rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.privilege-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
background: #fff;
|
||||||
|
padding: 16rpx 16rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
margin: 0 10rpx;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 96rpx;
|
||||||
|
height: 96rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.privilege-text {
|
||||||
|
color: #000000;
|
||||||
|
line-height: 36rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-submit {
|
||||||
|
background: linear-gradient(#FFC82B, #FD7A32);
|
||||||
|
margin-top: 127rpx;
|
||||||
|
margin-bottom: 75rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 87rpx;
|
||||||
|
border-radius: 44rpx;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
</view>
|
</view>
|
||||||
<view class="item-text">
|
<view class="item-text">
|
||||||
<text>充值档次：{{item.grade}}</text>
|
<text>充值档次：{{item.grade}}</text>
|
||||||
<text>日期：{{item.createTime}}</text>
|
<text>日期：{{item.stringCreateTime}}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -36,17 +36,17 @@
|
||||||
this.memberData.sort((a,b) =>{
|
this.memberData.sort((a,b) =>{
|
||||||
let aIndex = this.keyword.indexOf(a.userPhone)
|
let aIndex = this.keyword.indexOf(a.userPhone)
|
||||||
let bIndex = this.keyword.indexOf(b.userPhone)
|
let bIndex = this.keyword.indexOf(b.userPhone)
|
||||||
|
console.log(aIndex,bIndex)
|
||||||
if(aIndex > bIndex) return -1
|
if(aIndex > bIndex) return -1
|
||||||
if(aIndex < bIndex) return 1
|
if(aIndex < bIndex) return 1
|
||||||
if(a.userPhone == b.userPhone){
|
if(a.userPhone == b.userPhone){
|
||||||
return a.createTime - b.createTime
|
return a.stringCreateTime - b.stringCreateTime
|
||||||
}else{
|
}else{
|
||||||
if(a.createTime<b.createTime) return -1
|
if(a.stringCreateTime<b.stringCreateTime) return -1
|
||||||
if(a.createTime>b.createTime) return 1
|
if(a.stringCreateTime>b.stringCreateTime) return 1
|
||||||
return 0
|
return 0
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
console.log(this.memberData)
|
|
||||||
},1000)
|
},1000)
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
|
||||||
|
|
@ -7,23 +7,30 @@
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
</u--form>
|
</u--form>
|
||||||
</view>
|
</view>
|
||||||
<view class="box-member">
|
<view class="box-member">
|
||||||
<view :class="[activeIndex.includes(index) && 'member-active',!!parseInt(item.isExist) && 'member-disbled', 'member-item']" v-for="(item,index) in memberData" :key="index" @click="handleMember(item,index)">
|
<view class="box-title">
|
||||||
<view class="member-image">
|
<image src='../../static/images/memberTitle.png'></image>
|
||||||
<image src='../../static/images/f.png'></image>
|
</view>
|
||||||
|
<view class="member-list">
|
||||||
|
<view
|
||||||
|
:class="[activeIndex.includes(index) && 'member-active',!!parseInt(item.isExist) && 'member-disbled', 'member-item']"
|
||||||
|
v-for="(item,index) in memberData" :key="index" @click="handleMember(item,index)">
|
||||||
|
<view class="member-image">
|
||||||
|
<image src='../../static/images/f.png'></image>
|
||||||
|
</view>
|
||||||
|
<view class="member-text">
|
||||||
|
<view class="text-title">
|
||||||
|
<text>{{item.name.split('得')[0]}}<text>得{{item.name.split('得')[1]}}</text></text>
|
||||||
|
<view></view>
|
||||||
|
</view>
|
||||||
|
<text class="text-content">{{item.gearRemarks}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="member-prompt">
|
||||||
|
* 办理三个项目即可升级会员2，会员2享XX权益。
|
||||||
</view>
|
</view>
|
||||||
<view class="member-text">
|
|
||||||
<view class="text-title">
|
|
||||||
<text>{{item.name.split('得')[0]}}<text>得{{item.name.split('得')[1]}}</text></text>
|
|
||||||
<view></view>
|
|
||||||
</view>
|
|
||||||
<text class="text-content">{{item.gearRemarks}}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="member-prompt">
|
|
||||||
* 办理三个项目即可升级会员2，会员2享XX权益。
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
|
||||||
<paymentMember :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun' :payInfo="payInfo"></paymentMember>
|
<paymentMember :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun' :payInfo="payInfo"></paymentMember>
|
||||||
<button class="box-submit" @click="goPay">立即充值</button>
|
<button class="box-submit" @click="goPay">立即充值</button>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -166,153 +173,292 @@ import store from '@/store/index';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.box {
|
.box {
|
||||||
padding: 63rpx 40rpx;
|
position: relative;
|
||||||
.u-input{
|
padding: 8% 40rpx 0 40rpx;
|
||||||
background: #fff !important;
|
height: 100vh;
|
||||||
}
|
background: url(../../static/images/bg.png);
|
||||||
.box-phone {
|
background-size: cover;
|
||||||
.u-form-item{
|
background-repeat: no-repeat;
|
||||||
margin-bottom: 32rpx;
|
background-attachment: fixed;
|
||||||
}
|
|
||||||
::v-deep .u-form-item__body {
|
.box-phone {
|
||||||
height: 100rpx;
|
.u-form-item {
|
||||||
border-radius: 20rpx;
|
margin-bottom: 32rpx;
|
||||||
padding: 0 30rpx;
|
}
|
||||||
background: #fff;
|
|
||||||
}
|
::v-deep .u-form-item__body,.u-input {
|
||||||
}
|
height: 100rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
background: #fff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-money {
|
||||||
|
width: 604rpx;
|
||||||
|
height: 140rpx;
|
||||||
|
position: absolute;
|
||||||
|
top: 2%;
|
||||||
|
left: 15%;
|
||||||
|
}
|
||||||
|
|
||||||
.box-member {
|
.box-member {
|
||||||
border-radius: 20rpx;
|
margin-top: 10%;
|
||||||
|
box-shadow: 0px 0px 15px -5px #000;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 60rpx;
|
border-radius: 20px;
|
||||||
padding: 83rpx 30rpx 30rpx 30rpx;
|
box-sizing: border-box;
|
||||||
background: linear-gradient(#FFD55D,#FD752F);
|
border: 1px solid transparent;
|
||||||
|
background-image: linear-gradient(#FFD55D, #FD752F),
|
||||||
|
linear-gradient(to bottom, #FFD55D, #FDCB3B);
|
||||||
|
background-origin: border-box;
|
||||||
|
background-clip: content-box, border-box;
|
||||||
|
border-radius: 20px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
.member-item {
|
.box-title {
|
||||||
display: flex;
|
position: absolute;
|
||||||
justify-content: space-between;
|
top: -5.5%;
|
||||||
background: #fff;
|
left: -203rpx;
|
||||||
margin-bottom: 20rpx;
|
margin-left: 50%;
|
||||||
padding: 30rpx 20rpx 27rpx 20rpx;
|
|
||||||
border-radius: 20rpx;
|
|
||||||
|
|
||||||
.member-image {
|
image {
|
||||||
width: 104rpx;
|
width: 406rpx;
|
||||||
height: 104rpx;
|
height: 87rpx;
|
||||||
border-radius: 35rpx;
|
position: relative;
|
||||||
background: linear-gradient(#FFEBB2,#FDCB3B);
|
display: flex;
|
||||||
padding: 20rpx;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
image {
|
&::before {
|
||||||
width: 100%;
|
content: '会员详情介绍';
|
||||||
height: 100%;
|
position: absolute;
|
||||||
}
|
font-size: 34rpx;
|
||||||
}
|
font-family: Adobe Heiti Std;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #FF4B47;
|
||||||
|
text-shadow: 1px 5px 5px rgba(255, 195, 30, 0.78);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.member-text {
|
}
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
flex: .9;
|
|
||||||
|
|
||||||
.text-title {
|
.member-list {
|
||||||
margin-top: -14rpx;
|
margin: 83rpx 30rpx 30rpx 30rpx;
|
||||||
font-size: 32rpx;
|
position: relative;
|
||||||
font-weight: bolder;
|
|
||||||
transform: skew(-6deg, 0);
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
text{
|
|
||||||
text{
|
|
||||||
color: #C80D00;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
view{
|
|
||||||
width: 18rpx;
|
|
||||||
height: 6rpx;
|
|
||||||
background: #FEAC49;
|
|
||||||
border-radius: 3rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-content {
|
.member-item {
|
||||||
font-size: 24rpx;
|
padding: 30rpx 20rpx 27rpx 20rpx;
|
||||||
color: #747474;
|
display: flex;
|
||||||
}
|
justify-content: space-between;
|
||||||
}
|
background: #fff;
|
||||||
}
|
margin-bottom: 20rpx;
|
||||||
.member-active{
|
border-radius: 20rpx;
|
||||||
transition: .3s;
|
|
||||||
background: linear-gradient(#FF995F,#DA0E00);
|
|
||||||
|
|
||||||
.member-image {
|
.member-image {
|
||||||
background: linear-gradient(#FF995F,#DA0E00);
|
width: 104rpx;
|
||||||
}
|
height: 104rpx;
|
||||||
|
border-radius: 35rpx;
|
||||||
|
background: linear-gradient(#FFEBB2, #FDCB3B);
|
||||||
|
padding: 20rpx;
|
||||||
|
|
||||||
.member-text {
|
image {
|
||||||
.text-title {
|
width: 100%;
|
||||||
text{
|
height: 100%;
|
||||||
color: #fff;
|
}
|
||||||
text{
|
}
|
||||||
color: rgb(223,208,42);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
view{
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.text-content {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.member-disbled{
|
.member-text {
|
||||||
transition: .3s;
|
display: flex;
|
||||||
background: linear-gradient(#EFEFEF,#BCBCBC);
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex: .9;
|
||||||
|
|
||||||
.member-image {
|
.text-title {
|
||||||
background: linear-gradient(#AAAAAA,#989898);
|
margin-top: -14rpx;
|
||||||
}
|
font-size: 32rpx;
|
||||||
|
font-weight: bolder;
|
||||||
|
transform: skew(-6deg, 0);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
.member-text {
|
text {
|
||||||
.text-title {
|
text {
|
||||||
text{
|
color: #C80D00;
|
||||||
color: #868585;
|
}
|
||||||
text{
|
}
|
||||||
color: #868585;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
view{
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.text-content {
|
|
||||||
color: #5C5C5C;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.member-prompt{
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
view {
|
||||||
|
width: 18rpx;
|
||||||
|
height: 6rpx;
|
||||||
|
background: #FEAC49;
|
||||||
|
border-radius: 3rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.box-submit {
|
.text-content {
|
||||||
background: linear-gradient(#FFC82B,#FD7A32);
|
font-size: 24rpx;
|
||||||
margin-top: 127rpx;
|
color: #747474;
|
||||||
margin-bottom: 75rpx;
|
}
|
||||||
display: flex;
|
}
|
||||||
justify-content: center;
|
}
|
||||||
align-items: center;
|
|
||||||
height: 87rpx;
|
.member-active {
|
||||||
border-radius: 44rpx;
|
transition: .3s;
|
||||||
color: #fff;
|
background: linear-gradient(#FF995F, #DA0E00);
|
||||||
font-size: 32rpx;
|
|
||||||
}
|
.member-image {
|
||||||
}
|
background: linear-gradient(#FF995F, #FDCB3B);
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-text {
|
||||||
|
.text-title {
|
||||||
|
text {
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: rgb(223, 208, 42);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
view {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-content {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-disbled {
|
||||||
|
transition: .3s;
|
||||||
|
background: linear-gradient(#EFEFEF, #BCBCBC);
|
||||||
|
|
||||||
|
.member-image {
|
||||||
|
background: linear-gradient(#AAAAAA, #989898);
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-text {
|
||||||
|
.text-title {
|
||||||
|
text {
|
||||||
|
color: #868585;
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: #868585;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
view {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-content {
|
||||||
|
color: #5C5C5C;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-prompt {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-privilege {
|
||||||
|
box-shadow: 0px 0px 15px -5px #000;
|
||||||
|
border-radius: 36rpx;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 12%;
|
||||||
|
border-radius: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
background-image: linear-gradient(#FFD55D, #FD752F),
|
||||||
|
linear-gradient(to bottom, #FFEBB2, #FDCB3B);
|
||||||
|
background-origin: border-box;
|
||||||
|
background-clip: content-box, border-box;
|
||||||
|
border-radius: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.box-title {
|
||||||
|
position: absolute;
|
||||||
|
top: -9%;
|
||||||
|
left: -203rpx;
|
||||||
|
margin-left: 50%;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 406rpx;
|
||||||
|
height: 87rpx;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '特权详情';
|
||||||
|
position: absolute;
|
||||||
|
font-size: 34rpx;
|
||||||
|
font-family: Adobe Heiti Std;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #FF4B47;
|
||||||
|
text-shadow: 1px 5px 5px rgba(255, 195, 30, 0.78);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.privilege-list {
|
||||||
|
margin: 84rpx 10rpx 40rpx 10rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.privilege-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
background: #fff;
|
||||||
|
padding: 16rpx 16rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
margin: 0 10rpx;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 96rpx;
|
||||||
|
height: 96rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.privilege-text {
|
||||||
|
color: #000000;
|
||||||
|
line-height: 36rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-submit {
|
||||||
|
background: linear-gradient(#FFC82B, #FD7A32);
|
||||||
|
margin-top: 127rpx;
|
||||||
|
margin-bottom: 75rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 87rpx;
|
||||||
|
border-radius: 44rpx;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 253 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Loading…
Reference in New Issue