uniapp 会员申请ui

pull/2/head
Jruome 2023-05-19 11:34:07 +08:00
parent 21a020f430
commit 91b21f344d
14 changed files with 1072 additions and 638 deletions

View File

@ -15,7 +15,9 @@
import {
mapActions
} from 'vuex'
import {
memberGradeInfo
} from '@/api/member.js';
export default {
globalData: {
spid: 0,
@ -27,6 +29,16 @@
id: 0
},
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;
// #ifdef H5
uni.getSystemInfo({

View File

@ -573,7 +573,7 @@
"text": "分类"
},
{
"pagePath": "pages/member_record/index",
"pagePath": "pages/member_application/index",
"iconPath": "static/images/2-001.png",
"selectedIconPath": "static/images/2-002.png",
"text": "会员申请"

View File

@ -1,7 +1,14 @@
<template>
<view class="box">
<image class="phone-money" src='../../static/images/phoneMoney.png'></image>
<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">
<image src='../../static/images/memberTitle.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>
@ -14,15 +21,22 @@
</view>
</view>
</view>
</view>
<view class="box-privilege">
<view class="box-title">
<image src='../../static/images/memberTitle.png'></image>
</view>
<view class="privilege-list">
<view class="privilege-item" v-for="(item,index) in 4" :key="index">
<image src='../../static/images/f.png'></image>
<image src='../../static/images/vip1.png'></image>
<text class="privilege-text">
开通立享大额话费返送
</text>
</view>
</view>
<paymentMember :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun' :payInfo="payInfo"></paymentMember>
</view>
<paymentMember :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun' :payInfo="payInfo">
</paymentMember>
<button class="box-submit" @click="goPay"></button>
</view>
</template>
@ -68,6 +82,14 @@ import store from '@/store/index';
};
},
async onLoad() {
// uni.setTabBarItem({
// index: 2,
// text: 'text',
// pagePath: '/pages/member_equity/index'
// })
// uni.switchTab({
// url:'/pages/member_equity/index'
// })
const res = await memberGradeInfo()
this.memberData = res.data
},
@ -146,21 +168,72 @@ import store from '@/store/index';
<style lang="scss" scoped>
.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 {
border-radius: 20rpx;
box-shadow: 0px 0px 15px -5px #000;
width: 100%;
margin-top: 207rpx;
padding: 83rpx 30rpx 30rpx 30rpx;
background: linear-gradient(#FFD55D,#FD752F);
border-radius: 20px;
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;
.box-title {
position: absolute;
top: -5.5%;
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);
}
}
}
.member-list {
margin: 83rpx 30rpx 30rpx 30rpx;
position: relative;
.member-item {
padding: 30rpx 20rpx 27rpx 20rpx;
display: flex;
justify-content: space-between;
background: #fff;
margin-bottom: 20rpx;
padding: 30rpx 20rpx 27rpx 20rpx;
border-radius: 20rpx;
.member-image {
@ -189,11 +262,13 @@ import store from '@/store/index';
transform: skew(-6deg, 0);
display: flex;
justify-content: space-between;
text {
text {
color: #C80D00;
}
}
view {
width: 18rpx;
height: 6rpx;
@ -208,26 +283,30 @@ import store from '@/store/index';
}
}
}
.member-active {
transition: .3s;
background: linear-gradient(#FF995F, #DA0E00);
.member-image {
background: linear-gradient(#FF995F,#DA0E00);
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;
}
@ -246,29 +325,73 @@ import store from '@/store/index';
.text-title {
text {
color: #868585;
text {
color: #868585;
}
}
view {
background: #fff;
}
}
.text-content {
color: #5C5C5C;
}
}
}
}
}
.box-privilege {
box-shadow: 0px 0px 15px -5px #000;
border-radius: 36rpx;
width: 100%;
margin-top: 44rpx;
padding: 84rpx 10rpx 40rpx 10rpx;
background: linear-gradient(#FFD55D,#FD7630);
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;
@ -281,8 +404,8 @@ import store from '@/store/index';
margin: 0 10rpx;
image {
width: 87rpx;
height: 87rpx;
width: 96rpx;
height: 96rpx;
border-radius: 50%;
margin-bottom: 15rpx;
}
@ -294,6 +417,8 @@ import store from '@/store/index';
font-size: 26rpx;
}
}
}
}
.box-submit {

View File

@ -10,15 +10,13 @@
<text>再升1级即可获得XX等6项权益</text>
</view>
<view class="member-right">
<image src='../../static/images/f.png'></image>
<image src='../../static/images/vipStar.png'></image>
<text >会员等级3级</text>
<button>立即续费</button>
</view>
</view>
<view class="box-equity">
<view class="equity-text">
<view class="equity-title">
</view>
<text class="equity-member">我的会员权益</text>
<text class="equity-look">查看权益></text>
</view>
@ -101,10 +99,14 @@
<style lang="scss" scoped>
.box {
padding: 36rpx 40rpx;
background: #fff;
height: 100vh;
background: url(../../static/images/memberBg.png);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
.box-member {
padding: 36rpx 40rpx;
border-radius: 20rpx;
width: 100%;
// padding: 20rpx 20rpx 30rpx 20rpx;
@ -162,34 +164,34 @@
}
.box-equity {
border-radius: 20rpx;
// border-radius: 20rpx;
width: 100%;
margin-top: 10%;
padding: 40rpx 10rpx 40rpx 10rpx;
// background: #fff;
padding: 0 40rpx;
background: url(../../static/images/memberEquity.png);
background-size: 100%;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
.equity-text{
display: flex;
align-items: center;
position: relative;
.equity-title{
.equity-text{
margin:5% 0;
display: flex;
justify-content: center;
align-items: center;
width: 200rpx;
height: 90rpx;
background: #fff;
border-radius: 8px;/* 设置圆角 */
transform: perspective(8px)scale(1.1, 1.3) rotateX(5deg);
/* 镜头距离元素表面的位置为8pxx轴为1.1倍y轴为1.3倍绕x轴旋转5度 */
transform-origin: bottom left;
margin-right: 20rpx;
}
height: 10%;
.equity-member{
position: absolute;
margin: 0 10%;
font-size: 30rpx;
font-family: PingFang SC;
font-weight: 400;
color: #FFFFFF;
}
.equity-look{
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 400;
color: #FF4922;
}
}
.equity-item {
@ -198,10 +200,9 @@
flex-direction: column;
justify-content: space-between;
border-radius: 20rpx;
margin: 15rpx;
padding: 30rpx 24rpx;
margin: 0 20rpx 20rpx 20rpx;
// padding: 30rpx 24rpx;
.equity-grade{
background: greenyellow;
border-radius: 10rpx 10rpx;
padding: 20rpx;
display: flex;
@ -209,9 +210,10 @@
}
.equity-money {
display: flex;
justify-content: space-between;
justify-content: space-around;
flex-wrap: wrap;
.money-box{
width: 46%;
padding: 24rpx 25rpx;
border-radius: 10px;
display: flex;

View File

@ -11,7 +11,13 @@
</u--form>
</view>
<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">
<image src='../../static/images/memberTitle.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>
@ -27,7 +33,9 @@
* 办理三个项目即可升级会员2会员2享XX权益
</view>
</view>
<paymentMember :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun' :payInfo="payInfo"></paymentMember>
</view>
<paymentMember :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun' :payInfo="payInfo">
</paymentMember>
<button class="box-submit" @click="goPay"></button>
</view>
</template>
@ -71,8 +79,7 @@ import store from '@/store/index';
confirmPhone: ''
},
rules: {
userPhone: [
{
userPhone: [{
required: true,
message: '手机号不能为空',
// blurchange
@ -88,8 +95,7 @@ import store from '@/store/index';
trigger: ['change', 'blur']
},
],
confirmPhone:[
{
confirmPhone: [{
required: true,
message: '手机号确认不能为空',
// blurchange
@ -190,11 +196,19 @@ import store from '@/store/index';
<style lang="scss" scoped>
.box {
padding: 63rpx 40rpx;
position: relative;
padding: 8% 40rpx 0 40rpx;
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;
}
::v-deep .u-form-item__body {
height: 100rpx;
border-radius: 20rpx;
@ -202,19 +216,66 @@ import store from '@/store/index';
background: #fff;
}
}
.phone-money {
width: 604rpx;
height: 140rpx;
position: absolute;
top: 2%;
left: 15%;
}
.box-member {
border-radius: 20rpx;
margin-top: 10%;
box-shadow: 0px 0px 15px -5px #000;
width: 100%;
margin-top: 60rpx;
padding: 83rpx 30rpx 30rpx 30rpx;
background: linear-gradient(#FFD55D,#FD752F);
border-radius: 20px;
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;
.box-title {
position: absolute;
top: -5.5%;
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);
}
}
}
.member-list {
margin: 83rpx 30rpx 30rpx 30rpx;
position: relative;
.member-item {
padding: 30rpx 20rpx 27rpx 20rpx;
display: flex;
justify-content: space-between;
background: #fff;
margin-bottom: 20rpx;
padding: 30rpx 20rpx 27rpx 20rpx;
border-radius: 20rpx;
.member-image {
@ -243,11 +304,13 @@ import store from '@/store/index';
transform: skew(-6deg, 0);
display: flex;
justify-content: space-between;
text {
text {
color: #C80D00;
}
}
view {
width: 18rpx;
height: 6rpx;
@ -262,26 +325,30 @@ import store from '@/store/index';
}
}
}
.member-active {
transition: .3s;
background: linear-gradient(#FF995F, #DA0E00);
.member-image {
background: linear-gradient(#FF995F,#DA0E00);
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;
}
@ -300,19 +367,23 @@ import store from '@/store/index';
.text-title {
text {
color: #868585;
text {
color: #868585;
}
}
view {
background: #fff;
}
}
.text-content {
color: #5C5C5C;
}
}
}
.member-prompt {
display: flex;
justify-content: center;
@ -320,6 +391,84 @@ import store from '@/store/index';
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);

View File

@ -8,7 +8,7 @@
</view>
<view class="item-text">
<text>充值档次{{item.grade}}</text>
<text>日期{{item.createTime}}</text>
<text>日期{{item.stringCreateTime}}</text>
</view>
</view>
</view>
@ -36,17 +36,17 @@
this.memberData.sort((a,b) =>{
let aIndex = this.keyword.indexOf(a.userPhone)
let bIndex = this.keyword.indexOf(b.userPhone)
console.log(aIndex,bIndex)
if(aIndex > bIndex) return -1
if(aIndex < bIndex) return 1
if(a.userPhone == b.userPhone){
return a.createTime - b.createTime
return a.stringCreateTime - b.stringCreateTime
}else{
if(a.createTime<b.createTime) return -1
if(a.createTime>b.createTime) return 1
if(a.stringCreateTime<b.stringCreateTime) return -1
if(a.stringCreateTime>b.stringCreateTime) return 1
return 0
}
})
console.log(this.memberData)
},1000)
},
methods: {

View File

@ -8,7 +8,13 @@
</u--form>
</view>
<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">
<image src='../../static/images/memberTitle.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>
@ -24,6 +30,7 @@
* 办理三个项目即可升级会员2会员2享XX权益
</view>
</view>
</view>
<paymentMember :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun' :payInfo="payInfo"></paymentMember>
<button class="box-submit" @click="goPay"></button>
</view>
@ -167,34 +174,86 @@ import store from '@/store/index';
<style lang="scss" scoped>
.box {
padding: 63rpx 40rpx;
.u-input{
background: #fff !important;
}
position: relative;
padding: 8% 40rpx 0 40rpx;
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;
}
::v-deep .u-form-item__body {
::v-deep .u-form-item__body,.u-input {
height: 100rpx;
border-radius: 20rpx;
padding: 0 30rpx;
background: #fff;
background: #fff !important;
}
}
.phone-money {
width: 604rpx;
height: 140rpx;
position: absolute;
top: 2%;
left: 15%;
}
.box-member {
border-radius: 20rpx;
margin-top: 10%;
box-shadow: 0px 0px 15px -5px #000;
width: 100%;
margin-top: 60rpx;
padding: 83rpx 30rpx 30rpx 30rpx;
background: linear-gradient(#FFD55D,#FD752F);
border-radius: 20px;
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;
.box-title {
position: absolute;
top: -5.5%;
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);
}
}
}
.member-list {
margin: 83rpx 30rpx 30rpx 30rpx;
position: relative;
.member-item {
padding: 30rpx 20rpx 27rpx 20rpx;
display: flex;
justify-content: space-between;
background: #fff;
margin-bottom: 20rpx;
padding: 30rpx 20rpx 27rpx 20rpx;
border-radius: 20rpx;
.member-image {
@ -223,11 +282,13 @@ import store from '@/store/index';
transform: skew(-6deg, 0);
display: flex;
justify-content: space-between;
text {
text {
color: #C80D00;
}
}
view {
width: 18rpx;
height: 6rpx;
@ -242,26 +303,30 @@ import store from '@/store/index';
}
}
}
.member-active {
transition: .3s;
background: linear-gradient(#FF995F, #DA0E00);
.member-image {
background: linear-gradient(#FF995F,#DA0E00);
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;
}
@ -280,19 +345,23 @@ import store from '@/store/index';
.text-title {
text {
color: #868585;
text {
color: #868585;
}
}
view {
background: #fff;
}
}
.text-content {
color: #5C5C5C;
}
}
}
.member-prompt {
display: flex;
justify-content: center;
@ -300,7 +369,84 @@ import store from '@/store/index';
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);

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