whitechiina
/
chshPay
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 基本样式完成

This commit is contained in:
whitechiina 2025-11-25 11:57:07 +08:00
parent db4a95e35d
commit f70caf06e2
1 changed files with 162 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

280
pages/index/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<view> <view>
<!-- 店铺扫码支付页 --> <!-- 店铺扫码支付页 -->
<view class="content"> <view class="content">
<view class="main"> <view class="main">
@ -35,19 +35,19 @@
<text class="payment-amount">¥{{actualPayment}}</text> <text class="payment-amount">¥{{actualPayment}}</text>
</view> </view>
</view> </view>
</view>
<view class="pay-btn" @click="keyConfirm">
去支付
</view> </view>
<!-- <monokeyboard <view class="pay-btn" @click="keyConfirm">
ref="mono" 去支付
:value="money" </view>
:show="keyshow"
@confirm="keyConfirm" <!-- <monokeyboard
ref="mono"
:value="money"
:show="keyshow"
@confirm="keyConfirm"
@change="keyChange" @change="keyChange"
:isPay="a"> :isPay="a">
</monokeyboard> --> </monokeyboard> -->
<!-- <view class="shadow" v-if="loading"></view> --> <!-- <view class="shadow" v-if="loading"></view> -->
@ -61,7 +61,7 @@
} from '@/config/app'; } from '@/config/app';
import monokeyboard from '@/components/mono-keyboard/mono-keyboard.vue'; import monokeyboard from '@/components/mono-keyboard/mono-keyboard.vue';
import OnlineShop from '@/components/OnlineShop.vue'; import OnlineShop from '@/components/OnlineShop.vue';
import UrlUtils from '@/utils/urlUtils.js'; import UrlUtils from '@/utils/urlUtils.js';
import getUrlParam from '@/utils/utils.js'; import getUrlParam from '@/utils/utils.js';
import { import {
@ -86,7 +86,7 @@
bindPhone: '', bindPhone: '',
keyshow: true, keyshow: true,
token: '', token: '',
qrcode: '', qrcode: '',
merchant_id: '', //下单店铺id merchant_id: '', //下单店铺id
ID: '', ID: '',
@ -105,9 +105,9 @@
dikou: 0, dikou: 0,
order_id: '', // 查询订单号 order_id: '', // 查询订单号
dat: '', // 直接支付的参数 dat: '', // 直接支付的参数
tabIndex: '', // 支付结束的tab选项 tabIndex: '', // 支付结束的tab选项
orderData: {} // 显示的价格 { price: '100' } orderData: {} // 显示的价格 { price: '100' }
} }
}, },
@ -122,13 +122,15 @@
}, },
onLoad() { onLoad() {
const url = window.location.href; const url = window.location.href;
const cleanUrl = this.cleanUrl(url); const cleanUrl = this.cleanUrl(url);
const token = getUrlParam('token') || this.$store.state.app.token; const token = getUrlParam('token') || this.$store.state.app.token;
if (token) { if (token) {
this.$store.commit('UPDATE_LOGIN', token); this.$store.commit('UPDATE_LOGIN', token);
this.money = getUrlParam('price') || 0;
// 扫码店铺支付 // 扫码店铺支付
if (getUrlParam('merchant_id') && !getUrlParam('from_type')) { if (getUrlParam('merchant_id') && !getUrlParam('from_type')) {
this.getData(getUrlParam('merchant_id')); this.getData(getUrlParam('merchant_id'));
@ -161,10 +163,10 @@
}, },
// ID获取店铺 // ID获取店铺
getData(id) { getData(id) {
getMerchantInfo({ getMerchantInfo({
id: id id: id
}).then(res => { }).then(res => {
this.form = res.data; this.form = res.data;
this.merchant_id = res.data.merchant_id this.merchant_id = res.data.merchant_id
this.a = true; this.a = true;
@ -182,17 +184,17 @@
// CODE获取商户信息 // CODE获取商户信息
getQrData(qrcode) { getQrData(qrcode) {
let that = this; let that = this;
this.qrcode = qrcode; this.qrcode = qrcode;
getMerchantInfoByCode({ getMerchantInfoByCode({
code: qrcode code: qrcode
}).then(res => { }).then(res => {
this.form = res.data.merchantInfo; this.form = res.data.merchantInfo;
this.merchant_id = res.data.merchantInfo.merchant_id; this.merchant_id = res.data.merchantInfo.merchant_id;
this.a = true; this.a = true;
this.loading = false; this.loading = false;
// 获取商户信息后，初始化抵用券信息 // 获取商户信息后，初始化抵用券信息
this.calculatePayment(); this.calculatePayment();
}).catch(error => { }).catch(error => {
// 返回的文字判断，优先显示未绑定码牌 // 返回的文字判断，优先显示未绑定码牌
@ -298,7 +300,14 @@
mask: true mask: true
}); });
if (!this.merchant_id) return; if (!this.merchant_id) {
uni.hideLoading()
uni.showToast({
title: '缺少支付信息',
icon: 'none'
});
return
};
try { try {
// 准备支付参数 // 准备支付参数
@ -306,7 +315,7 @@
pay_price: Number(this.money), pay_price: Number(this.money),
use_coin: this.couponUsed ? 1 : 0, use_coin: this.couponUsed ? 1 : 0,
use_broker: this.commissionUsed ? 1 : 0, use_broker: this.commissionUsed ? 1 : 0,
merchant_id: this.merchant_id, merchant_id: this.merchant_id,
code: this.qrcode, code: this.qrcode,
is_middle_pay: 1 is_middle_pay: 1
}; };
@ -385,7 +394,7 @@
} else { } else {
onBridgeReady.call(this); onBridgeReady.call(this);
} }
} catch (err) { } catch (err) {
uni.hideLoading(); uni.hideLoading();
uni.showToast({ uni.showToast({
title: err.msg || err.message || err.data.message || '支付处理失败', title: err.msg || err.message || err.data.message || '支付处理失败',
@ -449,158 +458,193 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.content { .content {
margin: 0 auto; min-height: 100vh;
margin-top: 20rpx; background: linear-gradient(180deg, #f5f5f5 0%, #ffffff 100%);
height: 100vh; padding: 40rpx 30rpx;
overflow: hidden; box-sizing: border-box;
.main { .main {
margin: 20rpx; background-color: #ffffff;
background-color: #fff; border-radius: 24rpx;
border-radius: 30rpx; padding: 0;
padding: 30rpx; box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
overflow: hidden;
.title { .title {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; padding: 50rpx 30rpx 40rpx;
font-size: 36rpx; border-bottom: 1rpx solid #f0f0f0;
font-weight: 600;
margin-top: 30rpx;
.shop-images { .shop-images {
width: 50rpx; width: 60rpx;
height: 50rpx; height: 60rpx;
margin-right: 20rpx; margin-right: 16rpx;
border-radius: 8rpx;
} }
.name { .name {
font-size: 34rpx;
font-weight: 500;
color: #333333;
display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 500rpx;
} }
} }
.money { .money {
text-align: left; padding: 50rpx 40rpx;
padding: 30rpx 40rpx; border-bottom: 1rpx solid #f0f0f0;
font-size: 42rpx;
font-weight: 600;
margin-top: 40rpx;
background-color: #f8f8f8;
border-radius: 20rpx;
.input { .input {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
font-size: 38rpx;
.txt { .txt {
width: 300rpx; font-size: 28rpx;
color: #999999;
font-weight: 400;
white-space: nowrap; white-space: nowrap;
overflow: hidden; margin-right: 20rpx;
text-overflow: ellipsis;
font-weight: 600;
margin-right: 30rpx;
} }
.num { .num {
flex: 1;
font-weight: 600; font-weight: 600;
text-align: right; text-align: right;
font-size: 38rpx; font-size: 56rpx;
color: #333333;
letter-spacing: 2rpx;
} }
// /deep/ .u-input--radius {
// background-color: transparent !important;
// border: none !important;
// }
.wrap { .wrap {
flex: 1;
position: relative; position: relative;
display: flex;
justify-content: flex-end;
align-items: center;
.line { .line {
position: absolute; position: absolute;
top: 10rpx; right: 0;
right: 14rpx;
animation: blink 1s infinite; animation: blink 1s infinite;
color: #556dea; color: #07c160;
font-size: 56rpx;
font-weight: 600;
line-height: 1;
} }
} }
} }
} }
.container {
.list-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 36rpx 40rpx;
border-bottom: 1rpx solid #f0f0f0;
transition: background-color 0.2s;
&:active {
background-color: #fff;
}
.titles {
font-size: 32rpx;
color: #333333;
font-weight: 400;
}
.right-section {
display: flex;
align-items: center;
gap: 16rpx;
text {
font-size: 32rpx;
color: #333333;
font-weight: 500;
}
image {
width: 40rpx;
height: 40rpx;
margin-top: 0;
}
}
}
.payment-section {
display: flex;
justify-content: space-between;
align-items: center;
padding: 50rpx 40rpx;
.titles {
font-size: 32rpx;
color: #666666;
font-weight: 400;
}
.payment-amount {
color: #07c160;
font-size: 48rpx;
font-weight: 600;
letter-spacing: 1rpx;
}
}
}
}
.pay-btn {
background: linear-gradient(135deg, #07c160 0%, #06ad56 100%);
width: 100%;
max-width: 690rpx;
margin: 60rpx auto 0;
text-align: center;
padding: 28rpx 0;
color: #ffffff;
border-radius: 12rpx;
font-size: 36rpx;
font-weight: 500;
box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.3);
transition: all 0.3s;
letter-spacing: 2rpx;
&:active {
transform: scale(0.98);
box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.25);
}
} }
} }
/* 光标闪烁动画 */ /* 光标闪烁动画 */
@keyframes blink { @keyframes blink {
0%, 100% {
0%,
100% {
opacity: 1; opacity: 1;
} }
50% { 50% {
opacity: 0; opacity: 0;
} }
} }
.list-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx 20rpx;
border-bottom: 1rpx solid #eee;
.titles {
font-size: 32rpx;
}
}
.right-section {
display: flex;
align-items: center;
gap: 20rpx;
}
.payment-section {
display: flex;
justify-content: space-between;
padding: 40rpx 20rpx;
font-weight: bold;
font-size: 38rpx;
.titles {}
}
.payment-amount {
color: #ff2d55;
font-size: 38rpx;
}
.shadow { .shadow {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: #000; background-color: rgba(0, 0, 0, 0.5);
opacity: .5;
width: 100%; width: 100%;
height: 100vh; height: 100vh;
z-index: 999999; z-index: 999999;
}
.pay-btn {
background-color: #07c160;
width: 200rpx;
margin: 0 auto;
text-align: center;
padding: 20rpx 10rpx;
color: #fff;
border-radius: 20rpx;
font-size: 38rpx;
font-weight: 600;
margin-top: 80rpx;
} }
</style> </style>