Client-Teapay/src/pages/to-pay-list/index.vue

<template>
    <view class="container">
        <!-- 收货地址 -->
        <view class="address" v-if="!Data.ojsType || Data.ojsType ==1">
            <block v-if="DefaultAddress != '' && DefaultAddress.name !='' && DefaultAddress.name != undefined">
                <view class="add_head flex_r flex_ac flex_jb">
                    <view class="user_info flex_r flex_ac">
                        <view class="user_name">{{DefaultAddress.name}}</view>
                        <view class="user_phone">{{DefaultAddress.mobile}}</view>
                    </view>
                    <view class="set_address flex_r flex_ac" @tap="chooseWXaddress">
                        <image class="set_img" src="/static/img/setAddress.png" mode=""></image>
                        <view class="set_text">修改</view>
                    </view>
                </view>
                <view class="add_name mar_t20">{{DefaultAddress.address}}</view>
            </block>
            <block v-else>
                <view class="add_address flex_c flex_ac flex_jc" @tap="chooseWXaddress('add')">
                    <image class="add_icon" src="/static/img/add.png" mode=""></image>
                    <view class="add_text">添加收货地址</view>
                </view>
            </block>
        </view>
        <!-- 收货地址-end -->
        <!-- 商品信息 -->
        <view class="goods_info mar_t20">
            <view class="info_type">{{modularName}}</view>
            <view class="goods flex_r">
                <image class="goods_img" :src="goodsInfo.original_img" mode=""></image>
                <view class="goods_con flex_c flex_jc flex_jb">
                    <view class="goods_name ellipsis2">{{goodsInfo.goods_name}}</view>
                    <view class="flex_r flex_ac flex_jb">
                        <view class="goods_msg">{{Data.type == 2 ? goodsInfo.trade_num + '消费积分' + '￥' + goodsInfo.trade_price : '￥' + goodsInfo.cost_price}}</view>
                        <view class="goods_num">x {{Data.num}}</view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 商品信息-end -->
        <!-- 订单信息 -->
        <view class="order mar_t20">
            <view class="order_list flex_r flex_ac flex_jb">
                <view class="list_name flex_r flex_jb"><text>数</text><text>量</text></view>
                <view class="list_con">{{Data.num}}</view>
            </view>
            <view class="order_list flex_r flex_ac flex_jb">
                <view class="flex_r flex_ac">
                    <view class="list_name flex_r flex_jb"><text>运</text><text>费</text></view>
                    <view class="list_con p_color">({{freight}}元/每套)</view>
                </view>
                <view class="list_con">￥{{freight}}</view>
            </view>
            <view class="order_list flex_r flex_ac flex_jb" v-if="Data.type == 2">
                <view class="flex_r flex_ac">
                    <view class="list_name flex_r flex_jb"><text>茶</text><text>宝</text></view>
                    <view class="list_con p_color">(可用{{userinfo.cha_bao}})</view>
                </view>
                <view class="list_con">{{basicsInfo.goodsTeaInt}}茶宝</view>
            </view>
            <view class="order_list flex_r flex_ac flex_jb" v-if="Data.type == 2">
                <view class="flex_r flex_ac">
                    <view class="list_name flex_r flex_jb"><text>批</text><text>发</text><text>积</text><text>分</text></view>
                    <view class="list_con p_color">(可用{{basicsInfo.integral}})</view>
                </view>
                <view class="list_con">{{basicsInfo.goodsPfInt}}批发积分</view>
            </view>
            <view class="order_list flex_r flex_ac flex_jb" v-if="Data.type != 5">
                <view class="list_name flex_r flex_jb"><text>商</text><text>品</text><text>金</text><text>额</text></view>
                <view class="list_con">￥{{Data.type == 2 ? goodsInfo.trade_price : goodsInfo.cost_price}}</view>
            </view>
            <view class="order_list flex_r flex_ac flex_jb" v-if="Data.type == 5">
                <view class="list_name flex_r flex_jb"><text>消</text><text>费</text><text>积</text><text>分</text></view>
                <view class="list_con">{{basicsInfo.stayPay}}消费积分</view>
            </view>
            <view class="order_list flex_r flex_ac flex_jb" v-if="Data.type == 5">
                <view class="list_name flex_r flex_jb"><text>可</text><text>用</text><text>积</text><text>分</text></view>
                <view class="list_con">{{userinfo.integral}}消费积分</view>
            </view>
            <view class="order_list flex_r flex_ac flex_jb">
                <view class="list_name flex_r flex_jb"><text>可</text><text>用</text><text>余</text><text>额</text></view>
                <view class="list_con p_color">￥{{userinfo.user_money}}</view>
            </view>
        </view>
        <!-- 订单信息-end -->
        <!-- 底部操作栏 -->
        <view class="bar flex_r flex_ac flex_jb">
            <view class="bar_info flex_r flex_ac">待支付<text>￥{{obligation}}</text></view>
            <view class="pay_btn flex_r flex_ac flex_jc" @tap="payment">立即支付</view>
        </view>
        <!-- 底部操作栏-end -->
        <!-- 收获地址弹窗 -->
        <userAddress ref="userAddress" @addressConfirm="loadDa" />
    </view>
</template>
<script>
let page = 1;
let app = getApp();
var appEv = app.$vm.$options;
import { get, post, u_post } from "@/request/api.js";
import { ToPayOpre } from "@/utils/reqTools.js";
let toPayOpre = new ToPayOpre();
import userAddress from "pages/xghc-addrress/userAddress"
export default {
    data() {
        return {
            Data: {},
            goodsInfo: '', // 商品信息
            modularName: '', // 商品类型
            DefaultAddress: '', // 用户默认地址
            basicsInfo: '', // 订单信息

            freight: 0, //运费
            userinfo: {},
            obligation: 0, //待支付
        };
    },
    components: {
        userAddress,
    },
    onLoad(e) {
        this.Data = e
        this.loadData(e);
        this.loadAddress();

        this.userinfo = uni.getStorageSync('userinfo');
        // 1零售 2批发 3精品 4今日值买
        this.modularName = e.type == 1 ? "零售专区" : e.type == 2 ? "批发专区" : e.type == 3 ? "精品专区" : "今日值买"
    },
    mounted() {
        // this.$refs.popup.open('top');
    },
    methods: {
        loadData(da) {
            post("goods/goodsDetail", da).then(res => {
                if (res.code === 0) {
                    this.goodsInfo = res.data.data
                    post("goods/freight", { type: da.type }).then(res => {
                        if (res.code === 0) {
                            this.freight = res.data.freight;
                        }
                        // 计算待支付
                        let a = (this.goodsInfo.cost_price * this.Data.num + parseFloat(this.freight)) * 100;
                        let b = (a - this.userinfo.user_money * 100) / 100;
                        this.obligation = b > 0 ? b : 0
                    })
                }
            })
        },
        // 获取用户地址
        loadAddress() {
            post("user/addressList").then(res => {
                if (res.code === 0) {
                    let da = res.data.data;
                    for (const i of da) {
                        if (i.status == 1) {
                            this.DefaultAddress = i;
                            break;
                        } else this.DefaultAddress = da[0]
                    }
                }
            })
        },
        chooseWXaddress(va) {
            let a = va != "add" ? this.DefaultAddress.id : 'add'
            this.$refs.userAddress.open(a);
            // this.goto("/pages/xghc-addrress/userAddress");
        },
        // 支付
        payment: function() {
            // #ifdef  H5
            let type = "H5";
            // #endif
            // #ifdef  APP
            let type = "app";
            // #endif
            // #ifdef  MP-WEIXIN
            let type = "jsapi";
            // #endif

            if (!this.DefaultAddress.id) {
                appEv.errTips('请选择地址')
                return
            }
            post('goods/submitOrder', {
                ...this.Data,
                address_id: this.DefaultAddress.id,
                trade_type: type
            }).then(res => {
                if (res.code === 0) {
                    toPayOpre.toPay(res.data, (rea) => {
                        if (!rea) {
                            // 支付成功
                            appEv.errTips('支付成功')
                            uni.switchTab({
                                url: "/pages/szw-order-list/index",
                            });

                        } else {
                            // 支付失败
                            appEv.errTips('支付已取消')
                        }
                    });
                }
            })
        },

        loadDa(da) {
            this.DefaultAddress = da;
        }
    }
}
</script>
<style lang="scss">
// 页面配置
page {
    background: #f5f5f5;
}

.container {
    padding: 20rpx;
    box-sizing: border-box;
}

// 页面配置-end

// 收货地址
.user_phone {
    font-size: 26rpx;
    color: #222;
}

.set_text {
    font-size: 24rpx;
    color: #868686;
}

.set_img {
    width: 24rpx;
    height: 24rpx;
    margin-right: 9rpx;
}

.add_address {
    width: 100%;
    overflow: hidden;
    height: 109rpx;
}

.add_icon {
    width: 60rpx;
    height: 60rpx;
    margin-bottom: 12rpx;
}

.user_name {
    font-size: 32rpx;
    color: #000;
    margin-right: 46rpx;
}

.add_name {
    width: 448rpx;
    overflow: hidden;
    font-size: 24rpx;
    color: #868686;
}

.add_text {
    font-size: 24rpx;
    color: #868686;
    font-family: "SourceHanSansCN-Normal";
}

.address {
    width: 100%;
    overflow: hidden;
    padding: 28rpx;
    box-sizing: border-box;
    background: #fff;
    border-radius: 12rpx;
}

// 收货地址-end

// 商品信息
.goods:nth-last-child(1) {
    margin-bottom: 0;
}

.goods_num {
    font-size: 26rpx;
    color: #989898;
}

.goods_con {
    width: calc(100% - 202rpx - 36rpx);
    overflow: hidden;
}

.goods {
    width: 100%;
    overflow: hidden;
    margin-bottom: 20rpx;
    align-items: initial;
}

.goods_img {
    width: 202rpx;
    height: 140rpx;
    margin-right: 36rpx;
    border-radius: 12rpx;
}

.goods_name {
    font-size: 34rpx;
    color: #1B1B1B;
    font-family: "SourceHanSansCN-Bold";
    font-weight: bold;
}

.goods_msg {
    overflow: hidden;
    font-size: 26rpx;
    color: #18BB88;
    font-family: 'SourceHanSansCN-Medium';
    font-weight: 500;
}

.info_type {
    font-size: 30rpx;
    color: #353535;
    font-family: "SourceHanSansCN-Bold";
    font-weight: bold;
    margin-bottom: 43rpx;
}

.goods_info {
    width: 100%;
    overflow: hidden;
    padding: 28rpx;
    background: #fff;
    border-radius: 12rpx;
    box-sizing: border-box;
}

// 商品信息-end

// 订单信息
.list_name {
    width: 102rpx;
}

.order_list:nth-last-child(1) {
    margin-bottom: 0;
}

.order_list {
    width: 100%;
    overflow: hidden;
    margin-bottom: 30rpx;
}

.list_con {
    font-size: 24rpx;
    color: #000;
    font-family: "SourceHanSansCN-Medium";
    font-weight: bold;
    line-height: 1;
}

.order {
    width: 100%;
    overflow: hidden;
    padding: 28rpx;
    box-sizing: border-box;
    background: #fff;
    border-radius: 12rpx;
}

.list_name text {
    font-size: 26rpx;
    color: rgba(0, 0, 0, .8);
    font-family: "SourceHanSansCN-Medium";
    font-weight: bold;
    line-height: 1;
}

.p_color {
    color: #FF6D44;
}

// 订单信息-end

// 底部操作栏
.bar_info {
    font-size: 24rpx;
    color: #000;
    font-family: "SourceHanSansCN-Medium";
    font-weight: bold;
}

.bar_info text {
    font-size: 30rpx;
    color: #FF6D44;
    font-family: "SourceHanSansCN-Medium";
    font-weight: bold;
}

.pay_btn {
    width: 187rpx;
    height: 72rpx;
    font-size: 30rpx;
    font-family: "SourceHanSansCN-Medium";
    font-weight: bold;
    background: #2DB48A;
    border-radius: 36rpx;
    color: #fff;
}

.bar {
    width: 100%;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, .15);
    padding: 14rpx 30rpx;
    box-sizing: border-box;
}

// 底部操作栏-end
</style>