395 lines
13 KiB
Vue
395 lines
13 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="header" :style="{ paddingTop: top + 'px', height: localHeight + 'px' }">
|
||
<u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
|
||
</view>
|
||
|
||
<swiper class="swiper" autoplay>
|
||
<swiper-item v-for="(item, pageIndex) in info.bigImg" :key="pageIndex">
|
||
<image class="pic" :src="picUrl + item" mode="aspectFill" />
|
||
</swiper-item>
|
||
</swiper>
|
||
|
||
<view class="swiper_boxshadow"></view>
|
||
|
||
<view class="Tit">
|
||
向 <span>{{ info.merchant_name }}</span> 付款
|
||
</view>
|
||
|
||
<view class="Msg">
|
||
<view class="payMony">
|
||
￥<input type="number" v-model="Money" placeholder="付款金额" placeholder-style="font-size: 50rpx;"
|
||
@blur="handleMoneyInput" @focus="showKeyboard" step="0.01" min="0.01">
|
||
<cu-keyboard ref="cukeyboard" @change="change" @confirm="keyboardConfirm" @hide="hide"></cu-keyboard>
|
||
</view>
|
||
<view class="payRemark">
|
||
<input type="text" v-model="remarks" placeholder="付款备注">
|
||
</view>
|
||
</view>
|
||
|
||
<view class="Msg2">
|
||
<view class="Msg2_tit">
|
||
<view class="Msg2_tit_left">获得物业公积金</view>
|
||
<!-- <view class="Msg2_tit_right" @click="choseComminty">
|
||
绑定房源
|
||
<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
|
||
</view> -->
|
||
</view>
|
||
|
||
<view class="Msg2_con">
|
||
<view class="Msg2_con_left">
|
||
￥ <span>
|
||
{{ homeMoney }}
|
||
</span>
|
||
</view>
|
||
<!-- <view class="Msg2_con_right">
|
||
{{ room_name }}
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
|
||
<view class="Msg3">
|
||
<view class="Msg3_tit">获得积分</view>
|
||
<view class="Msg3_con">
|
||
{{ integral }}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="btn" @click="pay">确认支付</view>
|
||
|
||
<view class="btnList">
|
||
<view class="btnItem" @click="payList">付款记录</view>
|
||
<view class="line"></view>
|
||
<view class="btnItem" @click="homeMoneList">物业费公积金</view>
|
||
<view class="line"></view>
|
||
<view class="btnItem" @click="home">首页</view>
|
||
<view class="btnItem2" @click="changeBoxshadow">
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_qrcode.png"
|
||
mode="aspectFill"></image>
|
||
本页二维码
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<u-picker :show="show" :columns="[commintyList]" keyName="label" @confirm='confirm' @close='onClose'
|
||
@cancel='onClose' closeOnClickOverlay></u-picker>
|
||
|
||
<view class="boxshadow" @click="changeBoxshadow2" v-if="boxShow">
|
||
<view class="boxshadow_con">
|
||
<image :src="myCode" mode="aspectFill"></image>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
request,
|
||
picUrl,
|
||
uniqueByField,
|
||
menuButtonInfo,
|
||
NavgateTo
|
||
} from '../../../utils';
|
||
|
||
import {
|
||
apiArr
|
||
} from '../../../api/v2local';
|
||
|
||
import { apiPay } from '../../../api/pay'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
picUrl,
|
||
top: "",
|
||
localHeight: "",
|
||
info: "",
|
||
integral: 0,
|
||
homeMoney: 0,
|
||
Money: "",
|
||
show: false,
|
||
remarks: "",
|
||
room_id: "",
|
||
room_name: "",
|
||
boxShow: false,
|
||
commintyList: [],
|
||
OrderMsg: "",
|
||
payId: "",
|
||
myCode: ""
|
||
}
|
||
},
|
||
watch: {
|
||
Money(newVal) {
|
||
this.homeMoney = Math.round(newVal * (this.info.refund_property_fee_ratio || 0));
|
||
this.integral = Math.round(newVal * (this.info.refund_user_points_ratio || 0));
|
||
},
|
||
|
||
},
|
||
|
||
onLoad(options) {
|
||
const meun = menuButtonInfo();
|
||
this.top = meun.top;
|
||
this.localHeight = meun.height;
|
||
this.info = uni.getStorageSync("merchantInfo")
|
||
this.getUserCommunityList()
|
||
},
|
||
|
||
|
||
methods: {
|
||
showKeyboard() {
|
||
this.$refs.cukeyboard.open();
|
||
},
|
||
// 键盘输入内容变化时触发
|
||
change(value) {
|
||
// 先进行基本的输入格式化
|
||
let formattedValue = value.toString().replace(/[^\d.]/g, '');
|
||
|
||
// 如果第一个数字是0且后面还有其他数字，则删除这个0
|
||
if (formattedValue.length >= 2 && formattedValue[0] === '0' && formattedValue[1] !== '.') {
|
||
formattedValue = formattedValue.substring(1);
|
||
}
|
||
|
||
// 限制只能有一个小数点
|
||
formattedValue = formattedValue.replace(/\.{2,}/g, '.');
|
||
|
||
// 确保小数点后最多两位
|
||
const parts = formattedValue.split('.');
|
||
if (parts.length > 1) {
|
||
formattedValue = parts[0] + '.' + parts[1].substring(0, 2);
|
||
}
|
||
|
||
// 处理开头是小数点的情况
|
||
if (formattedValue.startsWith('.')) {
|
||
formattedValue = '0' + formattedValue;
|
||
}
|
||
|
||
this.Money = formattedValue;
|
||
},
|
||
// 点击键盘确认按钮时触发
|
||
keyboardConfirm(value) {
|
||
// 如果最后一位是小数点，则删除小数点
|
||
if (value && value.endsWith('.')) {
|
||
value = value.slice(0, -1);
|
||
}
|
||
this.Money = value;
|
||
this.$refs.cukeyboard.close();
|
||
},
|
||
// 键盘隐藏时触发
|
||
hide() {
|
||
// 可以在这里添加键盘隐藏后的处理逻辑
|
||
},
|
||
handleMoneyInput() {
|
||
// 清除非数字和非小数点的字符
|
||
let value = this.Money.toString().replace(/[^\d.]/g, '');
|
||
|
||
// 限制只能有一个小数点
|
||
value = value.replace(/\.{2,}/g, '.');
|
||
|
||
// 确保小数点后最多两位
|
||
value = value.replace(/^(\d+)\.(\d{2}).*$/, '$1.$2');
|
||
|
||
// 处理开头是小数点的情况
|
||
if (value.startsWith('.')) {
|
||
value = '0' + value;
|
||
}
|
||
|
||
// 处理大于0的验证
|
||
const num = parseFloat(value);
|
||
if (isNaN(num) || num <= 0) {
|
||
value = '';
|
||
}
|
||
|
||
this.Money = value;
|
||
},
|
||
|
||
createQrcode() {
|
||
uni.showLoading({
|
||
title: '加载中',
|
||
mask: true
|
||
});
|
||
uni.request({
|
||
url: 'https://api.weixin.qq.com/cgi-bin/token',
|
||
data: {
|
||
grant_type: 'client_credential',
|
||
appid: "wx1addb25675dd8e70",
|
||
secret: "1c153a91d0558b4c3834a4399ebc7496"
|
||
},
|
||
header: {
|
||
// 'custom-header': 'hello' //自定义请求头信息
|
||
},
|
||
success: (res) => {
|
||
this.createQrcode2(res.data.access_token)
|
||
}
|
||
});
|
||
},
|
||
createQrcode2(e) {
|
||
let that = this
|
||
uni.request({
|
||
url: `https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=${e}`,
|
||
method: 'post',
|
||
data: {
|
||
path: '/packages/localLife/pay/index'
|
||
},
|
||
header: {
|
||
// 'custom-header': 'hello' //自定义请求头信息
|
||
'content-type': 'application/json'
|
||
},
|
||
responseType: 'arraybuffer',
|
||
success: (res) => {
|
||
uni.hideLoading();
|
||
// this.text = 'request success';
|
||
let data = uni.arrayBufferToBase64(res.data)
|
||
console.log(data);
|
||
that.myCode = 'data:image/png;base64,' + data
|
||
this.boxShow = !this.boxShow
|
||
},
|
||
fail: (res) => {
|
||
uni.hideLoading();
|
||
}
|
||
});
|
||
},
|
||
changeBoxshadow2() {
|
||
this.boxShow = !this.boxShow
|
||
},
|
||
changeBoxshadow() {
|
||
this.createQrcode()
|
||
},
|
||
|
||
confirm(e) {
|
||
console.log(e);
|
||
this.room_id = e.value[0].room_id
|
||
this.room_name = e.value[0].label
|
||
this.show = false
|
||
},
|
||
onClose() {
|
||
this.show = false
|
||
},
|
||
//选择房源
|
||
choseComminty() {
|
||
this.show = true
|
||
},
|
||
back() {
|
||
NavgateTo("1")
|
||
},
|
||
getUserCommunityList() {
|
||
request(apiArr.getUserCommunityList, "POST", {
|
||
page_num: 1,
|
||
page_size: 30,
|
||
}).then(res => {
|
||
res.rows.forEach(item => {
|
||
item.label = item.name
|
||
})
|
||
this.commintyList = res.rows
|
||
if (res.rows.length) {
|
||
this.room_id = res.rows[0].room_id
|
||
this.room_name = res.rows[0].name
|
||
}
|
||
})
|
||
},
|
||
pay() {
|
||
let that = this
|
||
if (!that.Money) {
|
||
return uni.showToast({
|
||
title: "请输入金额",
|
||
icon: "none"
|
||
})
|
||
}
|
||
request(apiArr.createPay, "POST", {
|
||
merchant_id: that.info.id,
|
||
order_amount: Number((that.Money)), //金额
|
||
refund_property_fee: that.homeMoney, //物业费
|
||
refund_member_points: that.integral, //积分
|
||
remark: that.remarks,
|
||
room_id: that.room_id
|
||
}).then(res => {
|
||
that.payId = res.id
|
||
that.getPayInfo(res.id)
|
||
})
|
||
},
|
||
|
||
payList() {
|
||
NavgateTo("../payInfo/index")
|
||
},
|
||
homeMoneList() {
|
||
NavgateTo("../houseProvident/index")
|
||
},
|
||
home() {
|
||
NavgateTo("/pages/index/index")
|
||
},
|
||
|
||
async getPayInfo(e) {
|
||
let that = this
|
||
await request(apiArr.getPayInfo, "POST", {
|
||
id: e
|
||
}).then(res => {
|
||
console.log(res);
|
||
this.OrderMsg = res
|
||
that.LakaLaPrePay()
|
||
})
|
||
},
|
||
|
||
async LakaLaPrePay() {
|
||
let that = this
|
||
request(apiArr.getPreOrderInfo, "POST", {
|
||
id: that.payId,
|
||
}).then(res => {
|
||
if (res && res.timeStamp && res.nonceStr && res.package && res.signType && res.paySign) {
|
||
// 调用微信支付
|
||
uni.requestPayment({
|
||
timeStamp: res.timeStamp,
|
||
nonceStr: res.nonceStr,
|
||
package: res.package,
|
||
signType: res.signType,
|
||
paySign: res.paySign,
|
||
success: (payRes) => {
|
||
const params = {
|
||
id: this.OrderMsg.id,
|
||
}
|
||
request(apiArr.tradeQuery, "POST", params).then(res => {
|
||
})
|
||
},
|
||
fail: (payErr) => {
|
||
uni.showToast({
|
||
title: payErr.errMsg == 'requestPayment:fail cancel' ? '已取消支付' : '支付失败',
|
||
icon: 'none'
|
||
})
|
||
const params = {
|
||
order_ids: orderId,
|
||
}
|
||
},
|
||
complete: () => {
|
||
// 支付完成后的回调，无论成功失败都会执行
|
||
}
|
||
})
|
||
} else {
|
||
console.error("获取支付参数失败，缺少必要参数")
|
||
uni.showToast({
|
||
title: '获取支付信息失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
async queryPay(e) {
|
||
await request(apiPay.queryPay, "POST", {
|
||
merchant_no: e.merchant_no,
|
||
term_no: e.trade_no,
|
||
out_trade_no: e.out_trade_no
|
||
}).then(res => {
|
||
console.log(res);
|
||
})
|
||
},
|
||
|
||
},
|
||
|
||
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import url("./index.css");
|
||
</style>
|