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">
                    惠生活42#2单元2层202号
                </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="columns" keyName="text" @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';


export default {
    data() {
        return {
            picUrl,
            top: "",
            localHeight: "",
            info: "",
            integral: 0,
            homeMoney: 0,
            commintyList: [],
            Money: "",
            show: false,
            remarks:"",
            room_id:"",
            boxShow:false
        }
    },
    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
        },
        //选择房源
        choseComminty() {

        },
        back() {
            NavgateTo("1")
        },
        getUserCommunityList() {
            request(apiArr.getUserCommunityList, "POST", {
                page_num: 1,
                page_size: 30,
            }).then(res => {
                this.commintyList = res.rows
            })
        },
        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=>{
                console.log(res);
            })
        },

        payList(){
            NavgateTo("../payInfo/index")
        },
        homeMoneList(){
            NavgateTo("../houseProvident/index")
        },
        home(){
            NavgateTo("/pages/index/index")
        }

    },


}
</script>

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