From 80763662ffaefa7e49cf541201c689f61f5a3caa Mon Sep 17 00:00:00 2001
From: 石广澎 <shiguangpeng@163.com>
Date: 星期日, 30 十一月 2025 19:28:49 +0800
Subject: [PATCH] feat(pay): 充值页面增加积分显示
---
pages/pay/wxpay.vue | 292 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 292 insertions(+), 0 deletions(-)
diff --git a/pages/pay/wxpay.vue b/pages/pay/wxpay.vue
new file mode 100644
index 0000000..62095c4
--- /dev/null
+++ b/pages/pay/wxpay.vue
@@ -0,0 +1,292 @@
+<template>
+ <view>
+ <view class="u-relative">
+ <view class="u-p-30 u-flex">
+ <image :src="info.logo_image||'/static/imgs/store-logo.png'" class="avg-img"></image>
+ <view class="u-font-32 font-bold color-333 u-m-l-20">{{ info.shop_name }}</view>
+ </view>
+ <view class="pay-box bg-fff">
+ <view class="u-font-24 color-666">閲戦</view>
+ <view class="u-p-v-20 u-flex u-border-bottom-f5 u-relative">
+ <view class="money-icon color-333">楼</view>
+ <view class="u-flex-1 u-flex u-m-l-10" style="height: 80rpx;">
+ <view v-if="money" class="u-font-40">{{money}}</view>
+ <view v-if="!money&&bordShow" class="cursor"></view>
+ <view v-if="!money" class="u-font-32 color-999">璇疯緭鍏ラ噾棰�</view>
+ <view v-if="money&&bordShow" class="cursor"></view>
+ </view>
+ <!-- <u-input placeholder="璇疯緭鍏ラ噾棰�" v-model="money" border="none" disabled disabledColor="#FFFFFF"
+ placeholderStyle="color: #c0c4cc" fontSize="40rpx" color="#333"></u-input> -->
+ <view class="mask" @click="showBord"></view>
+ </view>
+ <view class="u-font-24 color-666 u-p-v-20">閫夋嫨鏀粯鏂瑰紡</view>
+ <view>
+ <u-radio-group v-model="payType" placement="column">
+
+ <view v-if="platform == 0 || platform == 2"
+ class="u-border-bottom-f5 u-p-v-20 u-flex u-row-between">
+ <view class="flex-1 u-flex">
+ <image src="@/static/imgs/pay-wx.png" class="pay-icon"></image>
+ <view class="u-font-30 color-333 u-m-l-10">寰俊</view>
+ </view>
+ <u-radio :name="0" activeColor="#D41F28" :customStyle="{ marginLeft: '30rpx' }"></u-radio>
+ </view>
+ <view v-if="platform == 1 || platform == 2"
+ class="u-border-bottom-f5 u-p-v-20 u-flex u-row-between">
+ <view class="flex-1 u-flex">
+ <image src="@/static/imgs/pay-zfb.png" class="pay-icon"></image>
+ <view class="u-font-30 color-333 u-m-l-10">鏀粯瀹�</view>
+ </view>
+ <u-radio :name="1" activeColor="#D41F28" :customStyle="{ marginLeft: '30rpx' }"></u-radio>
+ </view>
+ <view class="u-border-bottom-f5 u-p-v-20 u-flex u-row-between">
+ <view class="flex-1 u-flex">
+ <image src="@/static/imgs/pay-jyk.png" class="pay-icon"></image>
+ <view class="u-m-l-10 flex-1 u-flex u-row-between">
+ <view>
+ <view class="u-font-30 color-333">閲戠嚂鍗�(8646)</view>
+ <view class="u-font-24 color-999">
+ 鍙敤
+ <text class="color-red">15</text>
+ 绉垎
+ <text class="color-red">婊�40-20</text>
+ 浼樻儬鍒�
+ </view>
+ </view>
+ <u-tag text="浜�8鎶樹紭鎯�" type="error" plain size="mini"></u-tag>
+ </view>
+ </view>
+ <u-radio :name="2" activeColor="#D41F28" :customStyle="{ marginLeft: '30rpx' }"></u-radio>
+ </view>
+ </u-radio-group>
+ </view>
+ <button class="pay-it" @click="pay">纭畾鏀粯</button>
+ </view>
+
+ </view>
+
+ <navigator class="reg-btn" :url="'/pages/pay/register?cid='+cid">
+ <image src="/static/register-btn.png" mode=""></image>
+ </navigator>
+ <u-popup :show="bordShow" :overlay="false" @close="close" @open="open">
+ <key-bord @changeMoney="changeMoney" :num.sync="money" @close="close" @pay="pay"></key-bord>
+ </u-popup>
+ </view>
+</template>
+
+<script>
+ import {
+ config
+ } from '@/common/config.js';
+ import {
+ queryShop,
+ getWechatInfo,
+ getWechatConfigInfo,
+ saveWxOrder
+ } from '@/common/api/index'
+ import wx from 'weixin-js-sdk'; // 浣跨敤js-sdk
+ export default {
+ data() {
+ return {
+ platform: this.$utils.getPlat(),
+ cid: '',
+ info: {
+ shop_name: '',
+ scan_flag: '',
+ use_score_flag: '',
+ user_coupon_flag: ''
+ },
+ hasNum: false, // 鏄惁杈撳叆閲戦
+ money: '', // 閲戦
+ transStyles: {
+ position: 'fixed',
+ bottom: 0,
+ left: 0,
+ width: '100%',
+ backgroundColor: '#FFFFFF',
+ zIndex: 1001
+ },
+ payType: this.$utils.getPlat(), // 鏀粯鏂瑰紡
+ bordShow: false // 鏄剧ず閿洏
+ };
+ },
+ onLoad(opt) {
+ this.cid = opt.cid
+ uni.showLoading()
+ queryShop({
+ params: opt
+ }).then(res => {
+ if (res.logo_image) {
+ try {
+ let arr = JSON.parse(res.logo_image)
+ res.logo_image = config.sftpURL + arr[0].path
+ } catch (e) {
+ //TODO handle the exception
+ res.logo_image = ''
+ }
+ }
+ this.info = res
+ this.registerSDK()
+ }).catch(() => {
+ uni.hideLoading()
+ })
+ },
+ methods: {
+ registerSDK() {
+ const uri = encodeURIComponent(window.location)
+ getWechatConfigInfo({
+ url: uri
+ }).then(res => {
+ uni.hideLoading()
+ wx.config({
+ debug: false, // 寮�鍚皟璇曟ā寮�,璋冪敤鐨勬墍鏈� api 鐨勮繑鍥炲�间細鍦ㄥ鎴风 alert 鍑烘潵锛岃嫢瑕佹煡鐪嬩紶鍏ョ殑鍙傛暟锛屽彲浠ュ湪 pc 绔墦寮�锛屽弬鏁颁俊鎭細閫氳繃 log 鎵撳嚭锛屼粎鍦� pc 绔椂鎵嶄細鎵撳嵃銆�
+ appId: res.appId, // 蹇呭～锛屽叕浼楀彿鐨勫敮涓�鏍囪瘑
+ timestamp: res.timestamp, // 蹇呭～锛岀敓鎴愮鍚嶇殑鏃堕棿鎴�
+ nonceStr: res.nonceStr, // 蹇呭～锛岀敓鎴愮鍚嶇殑闅忔満涓�
+ signature: res.signature, // 蹇呭～锛岀鍚�
+ jsApiList: ['chooseWXPay'] // 蹇呭～锛岄渶瑕佷娇鐢ㄧ殑 JS 鎺ュ彛鍒楄〃
+ });
+ }).catch(() => {
+ uni.hideLoading()
+ })
+ },
+ // 鏇存柊閲戦
+ changeMoney(str) {
+ this.money = str;
+ },
+ // 灞曠ず閿洏
+ showBord() {
+ this.bordShow = true;
+ },
+ // 鍏抽棴閿洏
+ close() {
+ this.bordShow = false;
+ },
+ pay() {
+ if (!this.money) {
+ uni.showToast({
+ icon: 'none',
+ title: '璇疯緭鍏ラ噾棰�'
+ });
+ return;
+ }
+ uni.showLoading()
+ saveWxOrder({
+ cusid: this.info.cusid,
+ c: this.info.c,
+ money: parseInt(this.money * 100)
+ }).then(res => {
+ uni.hideLoading()
+ setTimeout(() => {
+ wx.chooseWXPay({
+ timestamp: res.timeStamp, // 鏀粯绛惧悕鏃堕棿鎴�
+ nonceStr: res.nonceStr, // 鏀粯绛惧悕闅忔満涓诧紝涓嶉暱浜� 32 浣�
+ package: res.package, // 缁熶竴鏀粯鎺ュ彛杩斿洖鐨刾repay_id鍙傛暟鍊硷紝鎻愪氦鏍煎紡濡傦細prepay_id=\*\*\*锛�
+ signType: res.signType, // 寰俊鏀粯V3鐨勪紶鍏� RSA ,寰俊鏀粯V2鐨勪紶鍏ユ牸寮忎笌V2缁熶竴涓嬪崟鐨勭鍚嶆牸寮忎繚鎸佷竴鑷�
+ paySign: res.paySign, // 鏀粯绛惧悕
+ success: function(ret) {
+ // 鏀粯鎴愬姛鍚庣殑鍥炶皟鍑芥暟
+ uni.navigateTo({
+ url: '/pages/pay/paySuccess?youHuiInfo=' + JSON
+ .stringify(res.youHuiInfo)
+ })
+ }
+ });
+ }, 200)
+
+ }).catch(() => {
+ uni.hideLoading()
+ })
+ }
+ }
+ };
+</script>
+
+<style scoped lang="scss">
+ .avg-img {
+ width: 80rpx;
+ height: 80rpx;
+ }
+
+ .reg-btn {
+ display: block;
+ margin: 80rpx auto 0;
+ width: 686rpx;
+ height: 198rpx;
+
+ image {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ .pay-box {
+ padding: 40rpx 20rpx;
+ border-radius: 10rpx;
+ margin: 0 30rpx;
+ }
+
+ .money-icon {
+ font-size: 50rpx;
+ font-weight: bold;
+ margin-right: 20rpx;
+ }
+
+ .money-num {
+ font-size: 50rpx;
+ font-weight: bold;
+ }
+
+ .pay-icon {
+ width: 48rpx;
+ height: 48rpx;
+ }
+
+ .mask {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ bottom: 0;
+ z-index: 101;
+ background-color: rgba(0, 0, 0, 0);
+ }
+
+ .pay-it {
+ border-radius: 50rpx;
+ font-size: 34rpx;
+ color: #ffffff;
+ background-color: #de2d35;
+ width: 90%;
+ margin-top: 20rpx;
+ }
+
+ @keyframes cursor-blinks {
+ 0% {
+ opacity: 1;
+ display: block;
+ }
+
+ 50% {
+ opacity: 0;
+ display: none;
+ }
+
+ 100% {
+ opacity: 1;
+ display: block;
+ }
+ }
+
+ .cursor {
+ border-left: 1px solid #333;
+ margin-left: 2px;
+ height: 40rpx;
+ animation: cursor-blinks 1s infinite steps(1, start)
+ }
+
+ .cursor-act {
+ border-left-color: transparent;
+ animation: cursor-blinks 1s infinite steps(1, start);
+ }
+</style>
--
Gitblit v1.9.1