支付页面

This commit is contained in:
魏啾
2024-07-19 09:36:27 +08:00
parent a011e72584
commit c79a74d43f
10 changed files with 1054 additions and 18 deletions

View File

@@ -30,10 +30,11 @@
</view>
</view>
</view>
<image style="margin:32rpx auto;" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/nomore.png"
v-if="is_end" mode="aspectFill"></image>
<u-loadmore :status="form.status" loadmore-text="下拉加载更多" @loadmore="loadmorelang" fontSize="28"
color="#999" iconSize="28" />
</view>
<image style="margin:32rpx auto;" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/nomore.png"
v-if="is_end" mode="aspectFill"></image>
<u-loadmore :status="form.status" fontSize="28" color="#999" iconSize="28" />
</scroll-view>
<!-- <image style="margin:32rpx auto;" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/nomore.png"
v-if="is_end" mode="aspectFill"></image>
@@ -206,6 +207,7 @@
}, 200)
},
methods: {
handleScroll(e) {
console.log(e.detail.scrollTop)
},
@@ -279,7 +281,7 @@
if (res.data.pageNum >= res.data.pages) {
this.form.status = 'nomore';
} else {
this.form.status = 'loading';
this.form.status = 'loadmore';
}
}, 500)
}
@@ -315,17 +317,19 @@
signType: res.data.signType, //固定值
paySign: res.data.paySign, //签名
success: (res) => {
this.showpopup = false
uni.showToast({
title: "支付成功"
})
setTimeout(res => {
this.showpopup = false
uni.hideLoading()
this.init_fn()
uni.navigateTo({
url: '/pages/chooseasong/record?shopId=' + this.shopId
})
// uni.switchTab({
// url: '/pages/order/order'
// });
}, 500)
}, 1000)
},
fail: (err) => {
uni.showToast({
@@ -424,7 +428,7 @@
}
.contentclass {
padding: 0rpx 28rpx 166rpx 28rpx;
padding: 0rpx 28rpx 215rpx 28rpx;
overflow: auto;
.contentclassbox {

View File

@@ -28,7 +28,7 @@
<view>{{item.title}}</view>
</view>
<view class="goods" v-for="(item2,index2) in item.list" :key="index2">
<image src="@/static/logo.png" mode=""></image>
<image src="@/static/1.gif" mode=""></image>
<view>
<view>{{index2+1}}个商品标题</view>
<view class="describe">{{index2+1}}个商品的描述内容</view>

View File

@@ -67,14 +67,20 @@
<view class="shop-item" v-for="(item1,index1) in item.products" :key="item1.id">
<view class="cover langcover" style="width:180rpx; height: 180rpx;"
@click.stop="clickspecifications(item1,index,index1)">
<c-image style="position: absolute;z-index:2;"
<!-- <c-image style="position: absolute;z-index:2;"
:src="`${item1.coverImg}?x-oss-process=image/resize,m_lfit,w_90,h_90`" width="180"
height="180"></c-image>
height="180"></c-image> -->
<image style="position: absolute;z-index:2;width: 180rpx; height: 180rpx;"
:src="`${item1.coverImg}?x-oss-process=image/resize,m_lfit,w_90,h_90`"
:lazy-load='true'></image>
</view>
<view class="info" style="display: flex;flex-direction: column;justify-content: center;">
<view class="name">
{{ item1.name }}
</view>
<view class="namess" v-if="item1.suit>1">
{{ item1.suit }}
</view>
<view class="price-wrap">
<view class="price">
<text class="i"></text>
@@ -104,7 +110,7 @@
</view>
</view>
</view>
<view class="cart-wrap" v-if="cartLists.data">
<view class="cart-wrap" v-if="cartListsdatashow">
<view class="cart-content">
<view class="left">
<image class="icon" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/icon_cart.png"
@@ -276,7 +282,8 @@
datasocket: {}, //储存传参数据
radiovalue: '1', //选择支付方式
amountVIP: null, //余额
barrageavatar: '' //弹幕头像
barrageavatar: '', //弹幕头像
cartListsdatashow: false //是否显示购物车
};
},
onPageScroll(e) {
@@ -330,7 +337,7 @@
if (res.code == 0) {
uni.cache.set('shopUser', res.data)
this.handlemessage() //监听websocket返回
this.productqueryProduct() //list 数据
// this.productqueryProduct() //list 数据
} else {
setTimeout(() => {
uni.pro.switchTab('index/index')
@@ -359,6 +366,7 @@
return false;
}
} else {
this.cartListsdatashow = msg.data.length == 0 ? false : true
switch (msg.type) {
case 'sku': // sku 数量 查询这个商品的价格和数量
this.$set(this, 'amountcartNumber', msg.amount)
@@ -885,6 +893,12 @@
font-weight: bold;
}
.namess {
margin-top: 16rpx;
font-size: 24upx;
font-weight: 300;
}
.select-sku-wrap {
.t {
color: #999;
@@ -893,7 +907,7 @@
}
.price-wrap {
padding-top: $paddingSize;
margin-top: 16rpx;
display: flex;
align-items: center;
justify-content: space-between;

View File

@@ -0,0 +1,227 @@
<template>
<view class="content">
<view v-if="isPwd == 0">
<view class="contenttext flex-center">
{{form.password.length == 6?'请再次确认支付密码':"请设置新密码,用于支付验证"}}
</view>
<view class="contentbox flex-between">
<view class="contentboxitem flex-colum">
{{consumeFee.slice(0,1)}}
</view>
<view class="contentboxitem flex-colum">
{{consumeFee.slice(1,2)}}
</view>
<view class="contentboxitem flex-colum">
{{consumeFee.slice(2,3)}}
</view>
<view class="contentboxitem flex-colum">
{{consumeFee.slice(3,4)}}
</view>
<view class="contentboxitem flex-colum">
{{consumeFee.slice(4,5)}}
</view>
<view class="contentboxitem flex-colum">
{{consumeFee.slice(5,6)}}
</view>
</view>
</view>
<view class="" v-else>
</view>
<cwx-keyboard ref="keyboard" v-if="isPwd == 0" @confirmEvent="confirmEvent"
:money.sync="consumeFee"></cwx-keyboard>
</view>
</template>
<script>
import cwxKeyboard from '@/components/cwx-keyboard/cwx-keyboard';
export default {
components: {
cwxKeyboard
},
data() {
return {
isPwd: uni.cache.get('userInfo').isPwd,
form: {
mobile: uni.cache.get('userInfo').telephone,
password: '', //密码
payPassword: '', //二次密码
checkCode: ''
},
passwords: false,
payPasswords: false,
// 注册定时器 初始值
second: 60,
showText: true,
Recapture: '发送验证码',
consumeFee: '', //第一遍
consumeFees: '', //第二遍
money: '',
showoverlay: true
};
},
onLoad() {
if (uni.cache.get('userInfo').isPwd != 0) {
uni.setNavigationBarTitle({
title: '忘记支付密码', // 标题文本,必须是字符串
});
}
},
watch: {
consumeFee(newVal, oldVal) {
if (this.form.password.length == 6) {
this.form.payPassword = newVal
if (this.form.payPassword.length == 6) {
this.userInfosavePayPassword()
}
} else {
this.form.password = newVal
if (this.form.password.length == 6) {
this.$refs.keyboard._handleClearKey() //清空
}
}
}
},
methods: {
confirmEvent(e) {
console.log(e)
},
async CodeRegister() {
const res = await this.api.phoneValidateCode({
// post 手机验证码
phone: this.form.mobile
});
if (res) {
uni.showToast({
title: '验证码获取成功',
icon: 'none'
});
// 定时器
this.showText = false;
this.Recapture = '重新获取';
var interval = setInterval(() => {
let times = --this.second;
this.second = times < 10 ? '0' + times : times; //小于10秒补 0
}, 1000);
setTimeout(() => {
clearInterval(interval);
this.second = 60;
this.showText = true;
}, 60000);
}
},
async loginwxuserInfo() {
let res = await this.api.loginwxuserInfo({
userId: uni.cache.get('userInfo').id
})
if (res.code == 0) {
uni.cache.set('userInfo', res.data);
}
},
async userInfosavePayPassword() {
if (this.form.mobile.length != 11 && this.isPwd == 0) {
uni.showToast({
title: '手机号必须是11位',
icon: 'none'
});
return false;
}
if (this.form.password == null || this.form.password == '') {
uni.showToast({
title: '请输入密码',
icon: 'none'
});
return false;
}
if (this.form.payPassword == null || this.form.payPassword == '') {
uni.showToast({
title: '请输入确认密码',
icon: 'none'
});
return false;
}
if (this.form.password.length != 6 || this.form.payPassword.length != 6) {
uni.showToast({
title: '密码必须是6位',
icon: 'none'
});
return false;
}
if (this.form.payPassword != this.form.password) {
this.$refs.keyboard._handleClearKey() //清空
this.form.payPassword = ''
this.form.password = ''
uni.showToast({
title: '密码和确认密码不一致',
icon: 'none'
});
return false;
}
if (this.form.checkCode == null || this.form.checkCode == '') {
uni.showToast({
title: '请输入验证码',
icon: 'none'
});
return false;
}
let res = await this.api.loginresetPwd({
pwd: this.form.password,
code: this.form.checkCode
})
if (res.code == 0) {
if (uni.cache.get('userInfo').isPwd != 0) {
uni.showToast({
title: '修改成功',
icon: 'none'
});
} else {
uni.showToast({
title: '设置成功',
icon: 'none'
});
}
// 获取用户信息
this.loginwxuserInfo()
setTimeout(() => {
uni.navigateBack();
}, 1000);
} else {
this.$refs.keyboard._handleClearKey() //清空
this.form.payPassword = ''
this.form.password = ''
}
}
}
};
</script>
<style lang="scss">
.content {
height: 100%;
background: #FFFFFF;
.contenttext {
padding: 48rpx 0;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 40rpx;
color: #333333;
}
.contentbox {
margin-top: 48rpx;
padding: 0 56rpx;
.contentboxitem {
width: 88rpx;
height: 88rpx;
background: #FFFFFF;
border-radius: 8rpx 8rpx 8rpx 8rpx;
border: 2rpx solid #999999;
}
}
}
</style>

View File

@@ -0,0 +1,223 @@
<template>
<view class="content">
<view v-if="isPwd == 0">
<view class="contenttext flex-center">
{{form.password.length == 6?'请再次确认支付密码':"请设置新密码,用于支付验证"}}
</view>
<view class="contentbox flex-between">
<view class="contentboxitem flex-colum">
{{consumeFee.slice(0,1)}}
</view>
<view class="contentboxitem flex-colum">
{{consumeFee.slice(1,2)}}
</view>
<view class="contentboxitem flex-colum">
{{consumeFee.slice(2,3)}}
</view>
<view class="contentboxitem flex-colum">
{{consumeFee.slice(3,4)}}
</view>
<view class="contentboxitem flex-colum">
{{consumeFee.slice(4,5)}}
</view>
<view class="contentboxitem flex-colum">
{{consumeFee.slice(5,6)}}
</view>
</view>
</view>
<view class="" v-else>
</view>
<cwx-keyboard ref="keyboard" v-if="isPwd == 0" @confirmEvent="confirmEvent"
:money.sync="consumeFee"></cwx-keyboard>
</view>
</template>
<script>
import cwxKeyboard from '@/components/cwx-keyboard/cwx-keyboard';
export default {
components: {
cwxKeyboard
},
data() {
return {
isPwd: uni.cache.get('userInfo').isPwd,
form: {
mobile: uni.cache.get('userInfo').telephone,
password: '', //密码
payPassword: '', //二次密码
checkCode: ''
},
passwords: false,
payPasswords: false,
// 注册定时器 初始值
second: 60,
showText: true,
Recapture: '发送验证码',
consumeFee: '', //第一遍
consumeFees: '', //第二遍
money: ''
};
},
onLoad() {
if (uni.cache.get('userInfo').isPwd != 0) {
uni.setNavigationBarTitle({
title: '忘记支付密码', // 标题文本,必须是字符串
});
}
},
watch: {
consumeFee(newVal, oldVal) {
if (this.form.password.length == 6) {
this.form.payPassword = newVal
if (this.form.payPassword.length == 6) {
this.userInfosavePayPassword()
}
} else {
this.form.password = newVal
if (this.form.password.length == 6) {
this.$refs.keyboard._handleClearKey() //清空
}
}
}
},
methods: {
confirmEvent(e) {
console.log(e)
},
async CodeRegister() {
const res = await this.api.phoneValidateCode({
// post 手机验证码
phone: this.form.mobile
});
if (res) {
uni.showToast({
title: '验证码获取成功',
icon: 'none'
});
// 定时器
this.showText = false;
this.Recapture = '重新获取';
var interval = setInterval(() => {
let times = --this.second;
this.second = times < 10 ? '0' + times : times; //小于10秒补 0
}, 1000);
setTimeout(() => {
clearInterval(interval);
this.second = 60;
this.showText = true;
}, 60000);
}
},
async loginwxuserInfo() {
let res = await this.api.loginwxuserInfo({
userId: uni.cache.get('userInfo').id
})
if (res.code == 0) {
uni.cache.set('userInfo', res.data);
}
},
async userInfosavePayPassword() {
if (this.form.mobile.length != 11 && this.isPwd == 0) {
uni.showToast({
title: '手机号必须是11位',
icon: 'none'
});
return false;
}
if (this.form.password == null || this.form.password == '') {
uni.showToast({
title: '请输入密码',
icon: 'none'
});
return false;
}
if (this.form.payPassword == null || this.form.payPassword == '') {
uni.showToast({
title: '请输入确认密码',
icon: 'none'
});
return false;
}
if (this.form.password.length != 6 || this.form.payPassword.length != 6) {
uni.showToast({
title: '密码必须是6位',
icon: 'none'
});
return false;
}
if (this.form.payPassword != this.form.password) {
this.$refs.keyboard._handleClearKey() //清空
this.form.payPassword = ''
this.form.password = ''
uni.showToast({
title: '密码和确认密码不一致',
icon: 'none'
});
return false;
}
if (this.form.checkCode == null || this.form.checkCode == '') {
uni.showToast({
title: '请输入验证码',
icon: 'none'
});
return false;
}
let res = await this.api.loginresetPwd({
pwd: this.form.password,
code: this.form.checkCode
})
if (res.code == 0) {
if (uni.cache.get('userInfo').isPwd != 0) {
uni.showToast({
title: '修改成功',
icon: 'none'
});
} else {
uni.showToast({
title: '设置成功',
icon: 'none'
});
}
// 获取用户信息
this.loginwxuserInfo()
setTimeout(() => {
uni.navigateBack();
}, 1000);
} else {
this.$refs.keyboard._handleClearKey() //清空
this.form.payPassword = ''
this.form.password = ''
}
}
}
};
</script>
<style lang="scss">
.content {
height: 100%;
background: #FFFFFF;
.contenttext {
padding: 48rpx 0;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 40rpx;
color: #333333;
}
.contentbox {
margin-top: 48rpx;
padding: 0 56rpx;
.contentboxitem {
width: 88rpx;
height: 88rpx;
background: #FFFFFF;
border-radius: 8rpx 8rpx 8rpx 8rpx;
border: 2rpx solid #999999;
}
}
}
</style>