zenghuapei
/
cyywl_server
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

uniapp 购买记录

pull/2/head
Jruome 2023-05-18 18:03:06 +08:00
parent cf5c4179a6
commit 5b89459951
8 changed files with 784 additions and 397 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
yudao-ui-app/api/member.js
View File

@ -11,8 +11,8 @@ export function memberGradeInfo(){
/** /**
* 获取当前登录账号的充值记录 * 获取当前登录账号的充值记录
*/ */
export function memberHeadInfo(){ export function memberOrderInfo(){
return request.get('api/order/member/memberHeadInfo', {},{noAuth:true}) return request.get('api/order/member/memberOrderInfo', {},{noAuth:true})
} }
/** /**

8
yudao-ui-app/pages.json
View File

@ -573,11 +573,17 @@
"text": "分类" "text": "分类"
}, },
{ {
"pagePath": "pages/member_application/index", "pagePath": "pages/member_record/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": "会员申请"
}, },
// {
// "pagePath": "pages/member_application/index",
// "iconPath": "static/images/2-001.png",
// "selectedIconPath": "static/images/2-002.png",
// "text": "会员申请"
// },
{ {
"pagePath": "pages/order_addcart/order_addcart", "pagePath": "pages/order_addcart/order_addcart",
"iconPath": "static/images/3-001.png", "iconPath": "static/images/3-001.png",

245
yudao-ui-app/pages/member_application/index.vue
View File

@ -1,23 +1,16 @@
<template> <template>
<view class="box"> <view class="box">
<view class="box-phone">
<u--form :model="form" :rules="rules" ref="uForm" labelWidth="100">
<u-form-item label="手机号" prop="phone">
<u--input v-model="form.phone" maxlength="11" placeholder="请输入您的手机号"></u--input>
</u-form-item>
<u-form-item label="手机号" prop="phone">
<u--input v-model="form.phone" maxlength="11" placeholder="请再次确认您的手机号"></u--input>
</u-form-item>
</u--form>
</view>
<view class="box-member"> <view class="box-member">
<view class="member-item" v-for="(item,index) in 3" :key="index"> <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"> <view class="member-image">
<image src='../../static/images/f.png'></image> <image src='../../static/images/f.png'></image>
</view> </view>
<view class="member-text"> <view class="member-text">
<text class="text-title">办理240得<text style="color: red;">360元</text></text> <view class="text-title">
<text class="text-content">办理档次【240】元，可享连续12个月每个月返利30元</text> <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>
</view> </view>
@ -39,6 +32,7 @@
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';
export default { export default {
name: "member_application", name: "member_application",
components: { components: {
@ -46,18 +40,7 @@
}, },
data() { data() {
return { return {
total_fee: 1, // 支付金额，单位分 100 = 1元 memberData:[],
order_no: "", // 业务系统订单号（即你自己业务系统的订单表的订单号）
out_trade_no: "", // 插件支付单号
description: "测试订单", // 支付描述
type: "test", // 支付回调类型 如 recharge 代表余额充值 goods 代表商品订单（可自定义，任意英文单词都可以，只要你在 uni-pay-co/notify/目录下创建对应的 xxx.js文件进行编写对应的回调逻辑即可）
custom:{
a: "a",
b: 1
},
form: {
phone:''
},
payInfo:{ payInfo:{
userPhone: '', userPhone: '',
confirmPhone: '', confirmPhone: '',
@ -77,50 +60,44 @@
} }
], ],
pay_close: false, pay_close: false,
rules: { activeIndex:[],
phone: [ form: {
{ phone:''
required: true, },
message: '手机号不能为空',
// 触发器可以同时用blur和change
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']
},
]
}
};
},
mounted() {
};
}, },
async onLoad() { async onLoad() {
const res = await memberGradeInfo() const res = await memberGradeInfo()
this.memberData = res.data
}, },
methods: { methods: {
handleMember(value,index){
if(!!parseInt(value.isExist)) return
if(this.activeIndex.includes(index)){
this.activeIndex = this.activeIndex.filter(item => item !== index)
}else{
this.activeIndex.push(index)
}
},
/** /**
* 打开支付组件 * 打开支付组件
* *
*/ */
goPay() { goPay() {
this.$set(this, 'pay_close', true); if(this.activeIndex.length){
this.$set(this, 'pay_close', true);
const orderInfos = this.activeIndex.map((item) => {
return {
...this.memberData[item],
gearId:this.memberData[item].id
}
})
this.payInfo = { this.payInfo = {
userPhone: '15760696662', userPhone: store.state.app.userInfo.mobile,
confirmPhone: '15760696662', orderInfos
orderInfos: [{
gearId: '1',
name: '套餐1',
gearRemarks: '备注1',
gearAmount: 0.01
}]
} }
}
}, },
/** /**
* 事件回调 * 事件回调
@ -163,70 +140,34 @@
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);
}, },
submit() {
this.order_no = `test`+Date.now(); // 模拟生成订单号
this.out_trade_no = `${this.order_no}-1`; // 模拟生成插件支付单号
// 打开支付收银台
this.$refs.uniPay.open({
total_fee: this.total_fee, // 支付金额，单位分 100 = 1元
order_no: this.order_no, // 业务系统订单号（即你自己业务系统的订单表的订单号）
out_trade_no: this.out_trade_no, // 插件支付单号
description: this.description, // 支付描述
type: this.type, // 支付回调类型
custom: this.custom, // 自定义数据
});
// this.$refs.uForm.validate().then(res => {
// uni.$u.toast('校验通过')
// }).catch(errors => {
// uni.$u.toast('校验失败')
// })
}
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.box { .box {
// position: relative; padding: 0 40rpx;
padding: 0 24rpx;
.box-phone {
.u-form-item{
margin-bottom: 20rpx;
}
::v-deep .u-form-item__body {
height: 100rpx;
border-radius: 20rpx;
padding: 0 30rpx;
background: #fff;
margin-bottom: 10rpx;
}
}
.box-member { .box-member {
border-radius: 20rpx; border-radius: 20rpx;
width: 100%; width: 100%;
margin-top: 40%; margin-top: 207rpx;
padding: 100rpx 20rpx 30rpx 20rpx; padding: 83rpx 30rpx 30rpx 30rpx;
// position: absolute; background: linear-gradient(#FFD55D,#FD752F);
// top: 20%;
// left: 0;
background: rgb(255, 210, 91);
.member-item { .member-item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
background: #fff; background: #fff;
margin-bottom: 20rpx; margin-bottom: 20rpx;
padding: 30rpx; padding: 30rpx 20rpx 27rpx 20rpx;
border-radius: 20rpx; border-radius: 20rpx;
.member-image { .member-image {
width: 120rpx; width: 104rpx;
height: 120rpx; height: 104rpx;
border-radius: 34rpx; border-radius: 35rpx;
background: red; background: linear-gradient(#FFEBB2,#FDCB3B);
padding: 20rpx; padding: 20rpx;
image { image {
@ -242,26 +183,90 @@
flex: .9; flex: .9;
.text-title { .text-title {
margin-top: -16rpx; margin-top: -14rpx;
font-size: 40rpx; font-size: 32rpx;
font-weight: bolder; font-weight: bolder;
transform: skew(-6deg, 0); 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 { .text-content {
font-size: 24rpx; font-size: 24rpx;
color: #aaa; color: #747474;
}
}
}
.member-active{
transition: .3s;
background: linear-gradient(#FF995F,#DA0E00);
.member-image {
background: linear-gradient(#FF995F,#DA0E00);
}
.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;
} }
} }
} }
} }
.box-privilege { .box-privilege {
border-radius: 20rpx; border-radius: 36rpx;
width: 100%; width: 100%;
margin-top: 10%; margin-top: 44rpx;
padding: 100rpx 10rpx 30rpx 10rpx; padding: 84rpx 10rpx 40rpx 10rpx;
background: rgb(255, 210, 91); background: linear-gradient(#FFD55D,#FD7630);
display: flex; display: flex;
flex: 1; flex: 1;
@ -271,35 +276,37 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background: #fff; background: #fff;
padding: 30rpx 20rpx; padding: 16rpx 16rpx;
border-radius: 20rpx; border-radius: 20rpx;
margin: 10rpx; margin: 0 10rpx;
image { image {
width: 100rpx; width: 87rpx;
height: 100rpx; height: 87rpx;
border-radius: 50%; border-radius: 50%;
margin-bottom: 10rpx; margin-bottom: 15rpx;
} }
.privilege-text { .privilege-text {
color: #000000;
line-height: 36rpx; line-height: 36rpx;
text-align: center; text-align: center;
font-size: 24rpx; font-size: 26rpx;
} }
} }
} }
.box-submit { .box-submit {
margin-top: 10%; background: linear-gradient(#FFC82B,#FD7A32);
margin-bottom: 6%; margin-top: 127rpx;
margin-bottom: 75rpx;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 90rpx; height: 87rpx;
border-radius: 60rpx; border-radius: 44rpx;
background: royalblue;
color: #fff; color: #fff;
font-size: 32rpx;
} }
} }
</style> </style>

156
yudao-ui-app/pages/member_equity/index.vue
View File

@ -11,45 +11,44 @@
</view> </view>
<view class="member-right"> <view class="member-right">
<image src='../../static/images/f.png'></image> <image src='../../static/images/f.png'></image>
<text > <text >会员等级3级</text>
立即续费 <button>立即续费</button>
</text>
</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 class="equity-title">
<text>我的会员权益</text>
</view> </view>
<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>
</view> </view>
<view class="equity-money"> <view class="equity-money">
<view class="money-text"> <view class="money-box money-completed">
<text>已返回金额（元）</text> <text>已返回金额（元）</text>
<view> <view>
<text>80</text> <text class="money-text">80</text>
<text class="money-detailed">查看明细></text> <text class="money-detailed">查看明细></text>
</view> </view>
</view> </view>
<view class="money-text"> <view class="money-box money-treat">
<text>已返回金额（元）</text> <text>已返回金额（元）</text>
<text>80</text> <text class="money-text">80</text>
</view> </view>
<view class="money-text"> <view class="money-box money-term">
<text>已返回金额（元）</text> <text>已返回金额（元）</text>
<text>80</text> <text class="money-text">80</text>
</view> </view>
<view class="money-text"> <view class="money-box money-time">
<text>已返回金额（元）</text> <text>已返回金额（元）</text>
<text>80</text> <text class="money-text">80</text>
</view> </view>
</view> </view>
</view> --> </view>
</view> </view>
</view> </view>
</template> </template>
@ -102,20 +101,30 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.box { .box {
padding: 10rpx 24rpx; padding: 36rpx 40rpx;
background: #fff;
height: 100vh;
.box-member { .box-member {
border-radius: 20rpx; border-radius: 20rpx;
width: 100%; width: 100%;
padding: 20rpx 20rpx 30rpx 20rpx; // padding: 20rpx 20rpx 30rpx 20rpx;
background: rgb(255, 210, 91);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.member-left{ .member-left{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
flex: .7; width: 69%;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 400;
color: #000000;
.left-title{
font-size: 35rpx;
font-family: PingFang SC;
font-weight: 600;
color: #000000;
}
.left-info{ .left-info{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -126,13 +135,29 @@
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex: .2; width: 22%;
font-size: 22rpx;
font-family: PingFang SC;
font-weight: 400;
color: #000000;
image { image {
width: 100rpx; width: 100rpx;
height: 100rpx; height: 100rpx;
border-radius: 50%; border-radius: 50%;
margin-bottom: 10rpx; margin-bottom: 10rpx;
} }
button{
margin-top: 10rpx;
padding: 7rpx 16rpx;
background: #F22E60;
border-image: linear-gradient(0deg, #A8052E, #FFFFFF) 10 10;
border-radius: 18rpx;
font-size: 22rpx;
font-family: PingFang SC;
font-weight: 400;
color: #FFFFFF;
}
} }
} }
@ -147,27 +172,34 @@
.equity-text{ .equity-text{
display: flex; display: flex;
align-items: center; align-items: center;
position: relative;
.equity-title{ .equity-title{
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 240rpx; width: 200rpx;
height: 140rpx; height: 90rpx;
// background: #fff; background: #fff;
// border-radius: 8px;/* 设置圆角 */ 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{
z-index: 99;
} }
} }
.equity-item { .equity-item {
background: #eee; background: #fff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
border-radius: 20rpx; border-radius: 20rpx;
margin: 10rpx; margin: 15rpx;
padding: 30rpx 24rpx;
.equity-grade{ .equity-grade{
background: greenyellow; background: greenyellow;
border-radius: 10rpx 10rpx; border-radius: 10rpx 10rpx;
@ -176,12 +208,68 @@
justify-content: space-between; justify-content: space-between;
} }
.equity-money { .equity-money {
// background: #fff; display: flex;
// line-height: 36rpx; justify-content: space-between;
// text-align: center; flex-wrap: wrap;
// font-size: 24rpx; .money-box{
.equity-money{ padding: 24rpx 25rpx;
background: #fff; border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 400;
color: #000000;
margin-bottom: 18rpx;
.money-text{
font-size: 30rpx;
font-family: PingFang SC;
font-weight: 400;
}
}
.money-completed{
background: #FFF2F2;
border: 1px solid #F22E60;
.money-text{
color: #F91F57;
}
view{
margin-top:26rpx;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 400;
color: #000000;
}
}
.money-treat{
background: #FFFDF1;
border: 1px solid #FF962F;
.money-text{
margin-top: 26rpx;
color: #EBAF00;
}
}
.money-term{
background: #F8FFF8;
border: 1px solid #38A74F;
.money-text{
margin-top: 26rpx;
color: #2C9E2C;
}
}
.money-time{
background: #F0FDFC;
border: 1px solid #5CA4E8;
.money-text{
margin-top: 26rpx;
color: #2D7AC9;
}
} }
} }
} }

387
yudao-ui-app/pages/member_others/index.vue
View File

@ -2,47 +2,76 @@
<view class="box"> <view class="box">
<view class="box-phone"> <view class="box-phone">
<u--form :model="form" :rules="rules" ref="uForm" labelWidth="100"> <u--form :model="form" :rules="rules" ref="uForm" labelWidth="100">
<u-form-item label="手机号" prop="phone"> <u-form-item label="手机号" prop="userPhone">
<u--input v-model="form.phone" maxlength="11" placeholder="请输入您的手机号"></u--input> <u--input v-model="form.userPhone" maxlength="11" placeholder="请输入您的手机号"></u--input>
</u-form-item> </u-form-item>
<u-form-item label="手机号" prop="phone"> <u-form-item label="手机号" prop="confirmPhone">
<u--input v-model="form.phone" maxlength="11" placeholder="请再次确认您的手机号"></u--input> <u--input v-model="form.confirmPhone" maxlength="11" placeholder="请再次确认您的手机号"></u--input>
</u-form-item> </u-form-item>
</u--form> </u--form>
</view> </view>
<view class="box-member"> <view class="box-member">
<view class="member-item" v-for="(item,index) in 3" :key="index"> <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"> <view class="member-image">
<image src='../../static/images/f.png'></image> <image src='../../static/images/f.png'></image>
</view> </view>
<view class="member-text"> <view class="member-text">
<text class="text-title">办理240得<text style="color: red;">360元</text></text> <view class="text-title">
<text class="text-content">办理档次【240】元，可享连续12个月每个月返利30元</text> <text>{{item.name.split('得')[0]}}<text>得{{item.name.split('得')[1]}}</text></text>
</view> <view></view>
</view>
<text class="text-content">{{item.gearRemarks}}</text>
</view>
</view>
<view class="member-prompt">
* 办理三个项目即可升级会员2，会员2享XX权益。
</view> </view>
</view> </view>
<view class="box-privilege"> <paymentMember :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun' :payInfo="payInfo"></paymentMember>
<view class="privilege-item" v-for="(item,index) in 4" :key="index"> <button class="box-submit" @click="goPay">立即充值</button>
<image src='../../static/images/f.png'></image>
<text class="privilege-text">
开通立享大额话费返送。
</text>
</view>
</view>
<button class="box-submit" @click="submit">立即充值</button>
</view> </view>
</template> </template>
<script> <script>
import {
memberGradeInfo
} from '@/api/member.js';
import paymentMember from '@/components/paymentMember';
import store from '@/store/index';
export default { export default {
name: "member_application", name: "member_application",
components: {
paymentMember
},
data() { data() {
return { return {
memberData:[],
payInfo:{
userPhone: '',
confirmPhone: '',
orderInfos: []
},
payMode: [{
name: "微信支付",
icon: "icon-weixinzhifu",
value: 'WXPAY',
title: '微信快捷支付'
},
{
name: "支付宝",
icon: "icon-zhifubao",
value: 'ALIPAY',
title: '支付宝快捷支付'
}
],
pay_close: false,
activeIndex:[],
form: { form: {
phone:'' userPhone:'',
confirmPhone:''
}, },
rules: { rules: {
phone: [ userPhone: [
{ {
required: true, required: true,
message: '手机号不能为空', message: '手机号不能为空',
@ -58,143 +87,251 @@
message: '手机号不正确（190.193号段不可充值）', message: '手机号不正确（190.193号段不可充值）',
trigger: ['change', 'blur'] trigger: ['change', 'blur']
}, },
],
confirmPhone:[
{
required: true,
message: '手机号确认不能为空',
// 触发器可以同时用blur和change
trigger: ['change', 'blur']
},
{
validator: (rule, value, callback) => {
return this.form.userPhone == this.form.confirmPhone
},
message: '手机号不一致',
trigger: ['change','blur'],
}
] ]
} }
}; };
}, },
mounted() { async onLoad() {
const res = await memberGradeInfo()
}, this.memberData = res.data
onLoad() {
}, },
methods: { methods: {
submit() { handleMember(value,index){
if(!!parseInt(value.isExist)) return
this.$refs.uForm.validate().then(res => { if(this.activeIndex.includes(index)){
uni.$u.toast('校验通过') this.activeIndex = this.activeIndex.filter(item => item !== index)
}).catch(errors => { }else{
uni.$u.toast('校验失败') this.activeIndex.push(index)
}) }
} },
/**
* 打开支付组件
*
*/
goPay() {
this.$refs.uForm.validate().then(res => {
if(this.activeIndex.length){
this.$set(this, 'pay_close', true);
const orderInfos = this.activeIndex.map((item) => {
return {
...this.memberData[item],
gearId:this.memberData[item].id
}
})
this.payInfo = {
userPhone: this.form.userPhone,
confirmPhone: this.form.confirmPhone,
orderInfos
}
}
}).catch(errors => {
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) {
let opt = e;
let action = opt.action || null;
let value = opt.value != undefined ? opt.value : null;
(action && this[action]) && this[action](value);
},
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.box { .box {
// position: relative; padding: 63rpx 40rpx;
padding: 0 24rpx; .box-phone {
.box-phone {
.u-form-item{ .u-form-item{
margin-bottom: 20rpx; 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;
margin-bottom: 10rpx;
} }
} }
.box-member {
border-radius: 20rpx;
width: 100%;
margin-top: 60rpx;
padding: 83rpx 30rpx 30rpx 30rpx;
background: linear-gradient(#FFD55D,#FD752F);
.box-member { .member-item {
border-radius: 20rpx; display: flex;
width: 100%; justify-content: space-between;
margin-top: 40%; background: #fff;
padding: 100rpx 20rpx 30rpx 20rpx; margin-bottom: 20rpx;
// position: absolute; padding: 30rpx 20rpx 27rpx 20rpx;
// top: 20%; border-radius: 20rpx;
// left: 0;
background: rgb(255, 210, 91);
.member-item { .member-image {
display: flex; width: 104rpx;
justify-content: space-between; height: 104rpx;
background: #fff; border-radius: 35rpx;
margin-bottom: 20rpx; background: linear-gradient(#FFEBB2,#FDCB3B);
padding: 30rpx; padding: 20rpx;
border-radius: 20rpx;
.member-image { image {
width: 120rpx; width: 100%;
height: 120rpx; height: 100%;
border-radius: 34rpx; }
background: red; }
padding: 20rpx;
image { .member-text {
width: 100%; display: flex;
height: 100%; flex-direction: column;
} justify-content: space-between;
} flex: .9;
.member-text { .text-title {
display: flex; margin-top: -14rpx;
flex-direction: column; font-size: 32rpx;
justify-content: space-between; font-weight: bolder;
flex: .9; 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-title { .text-content {
margin-top: -16rpx; font-size: 24rpx;
font-size: 40rpx; color: #747474;
font-weight: bolder; }
transform: skew(-6deg, 0); }
} }
.member-active{
transition: .3s;
background: linear-gradient(#FF995F,#DA0E00);
.text-content { .member-image {
font-size: 24rpx; background: linear-gradient(#FF995F,#DA0E00);
color: #aaa; }
}
}
}
}
.box-privilege { .member-text {
border-radius: 20rpx; .text-title {
width: 100%; text{
margin-top: 10%; color: #fff;
padding: 100rpx 10rpx 30rpx 10rpx; text{
background: rgb(255, 210, 91); color: rgb(223,208,42);
display: flex; }
flex: 1; }
view{
background: #fff;
}
}
.text-content {
color: #fff;
}
}
}
.privilege-item { .member-disbled{
display: flex; transition: .3s;
flex-direction: column; background: linear-gradient(#EFEFEF,#BCBCBC);
align-items: center;
justify-content: space-between;
background: #fff;
padding: 30rpx 20rpx;
border-radius: 20rpx;
margin: 10rpx;
image { .member-image {
width: 100rpx; background: linear-gradient(#AAAAAA,#989898);
height: 100rpx; }
border-radius: 50%;
margin-bottom: 10rpx;
}
.privilege-text { .member-text {
line-height: 36rpx; .text-title {
text-align: center; text{
font-size: 24rpx; 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-submit { .box-submit {
margin-top: 10%; background: linear-gradient(#FFC82B,#FD7A32);
margin-bottom: 6%; margin-top: 127rpx;
display: flex; margin-bottom: 75rpx;
justify-content: center; display: flex;
align-items: center; justify-content: center;
height: 90rpx; align-items: center;
border-radius: 60rpx; height: 87rpx;
background: royalblue; border-radius: 44rpx;
color: #fff; color: #fff;
} font-size: 32rpx;
}
} }
</style> </style>

77
yudao-ui-app/pages/member_record/index.vue
View File

@ -1,30 +1,54 @@
<template> <template>
<view class="box"> <view class="box">
<u-search placeholder="请输入关键字" v-model="keyword" :show-action="false"></u-search> <u-search placeholder="按手机号搜索查询" v-model="keyword" border-color="#F94B78" height="70" margin="0 0 35rpx 0" placeholder-color="#9C9C9C" bg-color="#fff" :show-action="false"></u-search>
<view class="list-item" v-for="(item,index) in 5" :key="index"> <view class="list-item" v-for="(item,index) in memberData" :key="index">
<text class="item-phone">充值号码：13627451300</text> <view class="item-phone">
<view></view>
<text>充值号码：{{item.userPhone}}</text>
</view>
<view class="item-text"> <view class="item-text">
<text>充值档次：套餐1</text> <text>充值档次：{{item.grade}}</text>
<text>日期：2023-05-12</text> <text>日期：{{item.createTime}}</text>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import {
memberOrderInfo
} from '@/api/member.js';
import { Debounce } from '@/utils/validate.js'
export default { export default {
name: "member_application", name: "member_record",
data() { data() {
return { return {
keyword:'', keyword:'',
memberData:[]
}; };
}, },
mounted() { async onLoad() {
const res = await memberOrderInfo()
}, this.memberData = res.data
onLoad() {
}, },
watch:{
keyword :Debounce (function (){
this.memberData.sort((a,b) =>{
let aIndex = this.keyword.indexOf(a.userPhone)
let bIndex = this.keyword.indexOf(b.userPhone)
if(aIndex > bIndex) return -1
if(aIndex < bIndex) return 1
if(a.userPhone == b.userPhone){
return a.createTime - b.createTime
}else{
if(a.createTime<b.createTime) return -1
if(a.createTime>b.createTime) return 1
return 0
}
})
console.log(this.memberData)
},1000)
},
methods: { methods: {
} }
@ -33,30 +57,35 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.box { .box {
padding: 20rpx; padding: 45rpx 40rpx;
::v-deep .u-search__content{
background: #fff !important;
height: 70rpx;
.uni-input-form{
background: #fff !important;
}
}
.list-item{ .list-item{
padding: 20rpx; margin-bottom: 26rpx;
background: #fff; padding: 30rpx 16rpx 25rpx 16rpx;
background: #FDF0F1;
border-radius: 20rpx; border-radius: 20rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
margin: 20rpx;
.item-phone{ .item-phone{
font-size: 36rpx; display: flex;
font-weight: bolder; align-items: center;
font-size: 30rpx;
color: #E91D51;
view{
border-radius: 3rpx;
margin-right: 10rpx;
width: 5rpx;
height: 12rpx;
background: #E91D51;
}
} }
.item-text{ .item-text{
padding: 34rpx 12rpx;
background: #fff;
margin-top: 20rpx; margin-top: 20rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: 30rpx;
} }
} }
} }

302
yudao-ui-app/pages/member_renew/index.vue
View File

@ -2,47 +2,72 @@
<view class="box"> <view class="box">
<view class="box-phone"> <view class="box-phone">
<u--form :model="form" :rules="rules" ref="uForm" labelWidth="100"> <u--form :model="form" :rules="rules" ref="uForm" labelWidth="100">
<u-form-item label="手机号" prop="phone"> <u-form-item label="手机号" prop="phone" >
<u--input v-model="form.phone" maxlength="11" placeholder="请输入您的手机号"></u--input> <u--input v-model="form.userPhone" maxlength="11" disabled placeholder="请输入您的手机号"></u--input>
</u-form-item>
<u-form-item label="手机号" prop="phone">
<u--input v-model="form.phone" maxlength="11" placeholder="请再次确认您的手机号"></u--input>
</u-form-item> </u-form-item>
</u--form> </u--form>
</view> </view>
<view class="box-member"> <view class="box-member">
<view class="member-item" v-for="(item,index) in 3" :key="index"> <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"> <view class="member-image">
<image src='../../static/images/f.png'></image> <image src='../../static/images/f.png'></image>
</view> </view>
<view class="member-text"> <view class="member-text">
<text class="text-title">办理240得<text style="color: red;">360元</text></text> <view class="text-title">
<text class="text-content">办理档次【240】元，可享连续12个月每个月返利30元</text> <text>{{item.name.split('得')[0]}}<text>得{{item.name.split('得')[1]}}</text></text>
</view> <view></view>
</view>
<text class="text-content">{{item.gearRemarks}}</text>
</view>
</view>
<view class="member-prompt">
* 办理三个项目即可升级会员2，会员2享XX权益。
</view> </view>
</view> </view>
<view class="box-privilege"> <paymentMember :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun' :payInfo="payInfo"></paymentMember>
<view class="privilege-item" v-for="(item,index) in 4" :key="index"> <button class="box-submit" @click="goPay">立即充值</button>
<image src='../../static/images/f.png'></image>
<text class="privilege-text">
开通立享大额话费返送。
</text>
</view>
</view>
<button class="box-submit" @click="submit">立即充值</button>
</view> </view>
</template> </template>
<script> <script>
import {
memberGradeInfo
} from '@/api/member.js';
import paymentMember from '@/components/paymentMember';
import store from '@/store/index';
export default { export default {
name: "member_application", name: "member_application",
components: {
paymentMember
},
data() { data() {
return { return {
memberData:[],
payInfo:{
userPhone: '',
confirmPhone: '',
orderInfos: []
},
payMode: [{
name: "微信支付",
icon: "icon-weixinzhifu",
value: 'WXPAY',
title: '微信快捷支付'
},
{
name: "支付宝",
icon: "icon-zhifubao",
value: 'ALIPAY',
title: '支付宝快捷支付'
}
],
pay_close: false,
activeIndex:[],
form: { form: {
phone:'' userPhone:''
}, },
rules: { rules: {
phone: [ userPhone: [
{ {
required: true, required: true,
message: '手机号不能为空', message: '手机号不能为空',
@ -62,66 +87,121 @@
} }
}; };
}, },
mounted() { async onLoad() {
const res = await memberGradeInfo()
}, this.memberData = res.data
onLoad() { this.form.userPhone = store.state.app.userInfo.mobile
}, },
methods: { methods: {
submit() { handleMember(value,index){
if(!!parseInt(value.isExist)) return
this.$refs.uForm.validate().then(res => { if(this.activeIndex.includes(index)){
uni.$u.toast('校验通过') this.activeIndex = this.activeIndex.filter(item => item !== index)
}).catch(errors => { }else{
uni.$u.toast('校验失败') this.activeIndex.push(index)
}) }
},
/**
* 打开支付组件
*
*/
goPay() {
if(this.activeIndex.length){
this.$set(this, 'pay_close', true);
const orderInfos = this.activeIndex.map((item) => {
return {
...this.memberData[item],
gearId:this.memberData[item].id
}
})
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) {
let opt = e;
let action = opt.action || null;
let value = opt.value != undefined ? opt.value : null;
(action && this[action]) && this[action](value);
},
}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.box { .box {
// position: relative; padding: 63rpx 40rpx;
padding: 0 24rpx; .u-input{
background: #fff !important;
.box-phone { }
.box-phone {
.u-form-item{ .u-form-item{
margin-bottom: 20rpx; 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;
margin-bottom: 10rpx;
} }
} }
.box-member {
.box-member { border-radius: 20rpx;
border-radius: 20rpx; width: 100%;
width: 100%; margin-top: 60rpx;
margin-top: 40%; padding: 83rpx 30rpx 30rpx 30rpx;
padding: 100rpx 20rpx 30rpx 20rpx; background: linear-gradient(#FFD55D,#FD752F);
// position: absolute;
// top: 20%;
// left: 0;
background: rgb(255, 210, 91);
.member-item { .member-item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
background: #fff; background: #fff;
margin-bottom: 20rpx; margin-bottom: 20rpx;
padding: 30rpx; padding: 30rpx 20rpx 27rpx 20rpx;
border-radius: 20rpx; border-radius: 20rpx;
.member-image { .member-image {
width: 120rpx; width: 104rpx;
height: 120rpx; height: 104rpx;
border-radius: 34rpx; border-radius: 35rpx;
background: red; background: linear-gradient(#FFEBB2,#FDCB3B);
padding: 20rpx; padding: 20rpx;
image { image {
@ -137,64 +217,102 @@
flex: .9; flex: .9;
.text-title { .text-title {
margin-top: -16rpx; margin-top: -14rpx;
font-size: 40rpx; font-size: 32rpx;
font-weight: bolder; font-weight: bolder;
transform: skew(-6deg, 0); 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 { .text-content {
font-size: 24rpx; font-size: 24rpx;
color: #aaa; color: #747474;
} }
} }
} }
} .member-active{
transition: .3s;
background: linear-gradient(#FF995F,#DA0E00);
.box-privilege { .member-image {
border-radius: 20rpx; background: linear-gradient(#FF995F,#DA0E00);
width: 100%; }
margin-top: 10%;
padding: 100rpx 10rpx 30rpx 10rpx;
background: rgb(255, 210, 91);
display: flex;
flex: 1;
.privilege-item { .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; display: flex;
flex-direction: column; justify-content: center;
align-items: center; font-size: 24rpx;
justify-content: space-between; color: #fff;
background: #fff;
padding: 30rpx 20rpx;
border-radius: 20rpx;
margin: 10rpx;
image {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
margin-bottom: 10rpx;
}
.privilege-text {
line-height: 36rpx;
text-align: center;
font-size: 24rpx;
}
} }
} }
.box-submit { .box-submit {
margin-top: 10%; background: linear-gradient(#FFC82B,#FD7A32);
margin-bottom: 6%; margin-top: 127rpx;
margin-bottom: 75rpx;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 90rpx; height: 87rpx;
border-radius: 60rpx; border-radius: 44rpx;
background: royalblue;
color: #fff; color: #fff;
font-size: 32rpx;
} }
} }
</style> </style>

2
yudao-ui-app/pages/users/login/index.vue
View File

@ -129,6 +129,7 @@
let data = res.data; let data = res.data;
let newTime = Math.round(new Date() / 1000); let newTime = Math.round(new Date() / 1000);
this.$store.commit("LOGIN", { this.$store.commit("LOGIN", {
'userId':data.userId,
'token': res.data.accessToken, 'token': res.data.accessToken,
'refreshToken': res.data.refreshToken 'refreshToken': res.data.refreshToken
}); });
@ -231,6 +232,7 @@
data data
}) => { }) => {
this.$store.commit("LOGIN", { this.$store.commit("LOGIN", {
'userId':data.userId,
'token': data.accessToken, 'token': data.accessToken,
'refreshToken': data.refreshToken 'refreshToken': data.refreshToken
}); });