321 lines
10 KiB
Vue
321 lines
10 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="header" :style="{ paddingTop: top + 'px', height: localHeight + 'px' }">
|
|
<u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<div class="swiper_boxshadow"></div>
|
|
|
|
<div class="Tit">
|
|
向 <span>{{ info.merchant_name }}</span> 付款
|
|
</div>
|
|
|
|
<div class="Msg">
|
|
<div class="payMony">
|
|
￥<input type="text" v-model="Money" placeholder="付款金额" placeholder-style="font-size: 50rpx;">
|
|
</div>
|
|
<div class="payRemark">
|
|
<input type="text" v-model="remarks" placeholder="付款备注">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="Msg2">
|
|
<div class="Msg2_tit">
|
|
<div class="Msg2_tit_left">获得物业公积金</div>
|
|
<div class="Msg2_tit_right" @click="choseComminty">
|
|
绑定房源
|
|
<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="Msg2_con">
|
|
<div class="Msg2_con_left">
|
|
￥ <span>
|
|
{{ homeMoney }}
|
|
</span>
|
|
</div>
|
|
<div class="Msg2_con_right">
|
|
{{ room_name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="Msg3">
|
|
<div class="Msg3_tit">获得积分</div>
|
|
<div class="Msg3_con">
|
|
{{ integral }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="btn" @click="pay">确认支付</div>
|
|
|
|
<div class="btnList">
|
|
<div class="btnItem" @click="payList">付款记录</div>
|
|
<div class="line"></div>
|
|
<div class="btnItem" @click="homeMoneList">物业费公积金</div>
|
|
<div class="line"></div>
|
|
<div class="btnItem" @click="home">首页</div>
|
|
<div class="btnItem2" @click="changeBoxshadow">
|
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_qrcode.png" mode="aspectFill"></image>
|
|
本页二维码
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<u-picker :show="show" :columns="[commintyList]" keyName="label" @confirm='confirm' @close='onClose'
|
|
@cancel='onClose' closeOnClickOverlay></u-picker>
|
|
|
|
<div class="boxshadow" @click="changeBoxshadow2" v-if="boxShow">
|
|
<div class="boxshadow_con">
|
|
<image :src="myCode" mode="aspectFill"></image>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</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: {
|
|
|
|
createQrcode() {
|
|
uni.showLoading({
|
|
title: '加载中',
|
|
mask: true
|
|
});
|
|
uni.request({
|
|
url: 'https://api.weixin.qq.com/cgi-bin/token',
|
|
data: {
|
|
grant_type: 'client_credential',
|
|
appid: "wxb4018c78fa143450",
|
|
secret: "82a3471a28fcbfe27d8eb4397b60069b"
|
|
},
|
|
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) * 100), //金额
|
|
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(apiPay.pay, "POST", {
|
|
total_amount: that.OrderMsg.order_amount,
|
|
subject: '快捷支付订单',
|
|
goods_id: that.payId,
|
|
address: "",
|
|
out_trade_no: that.OrderMsg.order_no,
|
|
remark: that.OrderMsg.remark,
|
|
quantity: '1',
|
|
user: uni.getStorageSync('userId'),
|
|
user_id: uni.getStorageSync('openId')
|
|
}).then(res => {
|
|
console.log(res, 'res');
|
|
|
|
const { resp_data, msg } = res
|
|
|
|
wx.requestPayment({
|
|
timeStamp: String(resp_data.acc_resp_fields.time_stamp),
|
|
nonceStr: String(resp_data.acc_resp_fields.nonce_str),
|
|
package: String(resp_data.acc_resp_fields.package),
|
|
signType: String(resp_data.acc_resp_fields.sign_type),
|
|
paySign: String(resp_data.acc_resp_fields.pay_sign),
|
|
success(res) {
|
|
that.queryPay(resp_data)
|
|
},
|
|
fail(fal) {
|
|
if (fal.errMsg == 'requestPayment:fail cancel') {
|
|
// that.payFail(2)
|
|
} else {
|
|
// that.payFail(1)
|
|
}
|
|
}
|
|
})
|
|
})
|
|
},
|
|
|
|
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>
|