uniapp-ZHSQ/packages/localLife/pay/index.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="http://192.168.0.172:5500/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="changeBoxshadow" v-if="boxShow">
            <div class="boxshadow_con">

            </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:""
        }
    },
    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: {

        changeBoxshadow() {
            this.boxShow = !this.boxShow
        },

        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: 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(apiPay.pay, "POST", {
                total_amount: that.OrderMsg.order_amount,
                subject: '快捷支付订单',
                goods_id: that.payId,
                address: "",
                out_trade_no: that.OrderMsg.term_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.data

                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()
                    },
                    fail(fal) {
                        if (fal.errMsg == 'requestPayment:fail cancel') {
                            that.payFail(2)
                        } else {
                            that.payFail(1)
                        }
                    }
                })
            })
        },

    },


}
</script>

<style>
@import url("./index.css");
</style>