uniapp-ZHSQ/packages/shop/submitOrder/index.vue

<template>
    <view class="container">
        <view class="address">
            <view class="border">
                <image src="http://192.168.0.172:5500/7.15/shop_border.png" mode="widthFix"></image>
            </view>
            <view class="address_Info" @click="choseAddress" v-if="defAddress">
                <view class="address_Info_left">
                    <view class="address_Info_left_tit">收货地址</view>
                    <view class="address_Info_left_name">{{ defAddress.name }} {{ defAddress.phone }}</view>
                    <view class="address_Info_left_addr">{{ defAddress.address }}{{ defAddress.house_number }}</view>
                </view>
            </view>

            <view class="address_Info" @click="addAddress" v-if="!defAddress">
                <view class="address_Info_left noneDef">
                    <view class="address_Info_btn">添加收货地址</view>
                </view>
            </view>

            <view class="border">
                <image src="http://192.168.0.172:5500/7.15/shop_border.png" mode="widthFix"></image>
            </view>
        </view>

        <view class="goodsCate" v-for="items, indexs in carList" :key="indexs">
            <view class="goodsItem">
                <view class="goodsItem_msg_img">
					<view class="tag tag-img" v-if="items.commodity_goods_info.is_same_day">当日达</view>
                    <image :src="picUrl + items.commodity_goods_info.commodity_pic">
                    </image>
                </view>
                <view class="goodsItem_msg_right">
                    <view class="goodsItem_msg_right_tit" style="display: flex"><view class="tag" style="margin-right: 10rpx" v-if="items.commodity_goods_info.is_same_day">当日达</view><view>{{ items.commodity_goods_info.goods_name }}</view></view>
                    <view class="goodsItem_msg_right_subTit">{{ items.commodity_goods_info.goods_intro }}</view>
                    <view class="goodsItem_msg_right_msg">
                        <view class="goodsItem_msg_right_msg_left">
                            <span>￥</span>{{ items.commodity_goods_info.sales_price }}
                            <span>/{{ items.commodity_goods_info.goods_unit }}</span>
                        </view>
                        <view class="goodsItem_msg_right_msg_right">
                            <u-number-box v-model="value">
                                <view slot="minus" class="minus" @click="minus(items, indexs)">
                                    <u-icon name="minus" size="32" bold></u-icon>
                                </view>
                                <text slot="input" style="width: 80rpx;text-align: center;" class="input">
                                    {{ items.count }}
                                </text>
                                <view slot="plus" class="plus" @click="add(items, indexs)">
                                    <u-icon name="plus" color="#FFFFFF" size="32" bold></u-icon>
                                </view>
                            </u-number-box>
                        </view>
                    </view>
                </view>
            </view>
            <view class="yf">
                <span>运费</span>￥9.9
            </view>
            <view class="line"></view>
        </view>


        <view class="footer">
            <view class="btn">立即支付￥{{ totalMony }}</view>
        </view>

    </view>
</template>

<script>
import {
    apiArr
} from '../../../api/shop';
import {
    picUrl,
    menuButtonInfo,
    request,
    NavgateTo
} from '../../../utils';
export default {
    data() {
        return {
            picUrl,
            top: "",
            localHeight: "",
            value: 3,
            type: "error",
            carList: [],
            totalMony: 0,
            defAddress: {},

            order_id: ""
        }
    },
    methods: {
        choseAddress() {
            NavgateTo('../address/index')
        },
        addAddress() {
            NavgateTo('../addAddress/index')
        },
        calcTotal() {
            let total = 0
            this.carList.forEach(item => {
                total += item.commodity_goods_info.sales_price * item.count
            })
            this.totalMony = total
        },

        minus(item, index) {
            let that = this
            if (item.count === 1) {
                request(apiArr.deleteCar, "POST", {
                    ids: [item.id]
                }).then(res => {
                    that.carList.splice(index, 1)
                    that.calcTotal()
                })
            }
            this.carList[index].count = this.carList[index].count - 1
            this.calcTotal()
        },
        add(item, index) {
            this.carList[index].count = this.carList[index].count + 1
            this.calcTotal()
        },
        //用户收货地址
        getUserAddress() {
            request(apiArr.getUserDefAddress, "POST", {}).then(res => {
                this.defAddress = res.default_address
            })
        },

        craeteOrder() {
            uni.showLoading({
                title: '加载中',
            })

            let goods_list = []
            this.carList.forEach(item => {
                goods_list.push({
                    goods_id: item.commodity_goods_info.id,
                    count: item.count,
                })
            })

            request(apiArr.createOrder, "POST", {
                goods_list,
                address_id: this.defAddress.id
            }).then(res => {
                uni.hideLoading()
                this.order_id = res.order_id
                this.payOrder()
            }).catch(err => {
                uni.hideLoading()
            })
        },
        payOrder() {
            request(apiArr.payOrder, "POST", {
                order_id: this.order_id
            }).then(res => {
                let that = this; // 保存组件实例的 this 引用
                let resCopy = JSON.parse(JSON.stringify(res))
                this.WxPay(resCopy)


            })
        },
        WxPay(resCopy) {
            let that = this
            uni.requestPayment({
                "provider": "wxpay",
                "orderInfo": {
                    "appid": "wx1addb25675dd8e70",  //
                    "noncestr": resCopy.nonceStr, // 随机字符串
                    "package": resCopy.package,        // 固定值
                    "prepayid":resCopy.prepayId,
                    "timestamp": resCopy.timeStamp,        // 时间戳（单位：秒）
                    "paysign": resCopy.paySign,
                    "partnerid":resCopy.partnerId
                },
            timeStamp: resCopy.timeStamp,
            nonceStr: resCopy.nonceStr,
            package: resCopy.package,
            signType: resCopy.signType,
            paySign: resCopy.paySign,
                success(res) {
                    console.log(res);
                },
                fail(e) {
                    console.log(e.errMsg);
                }
            })
            // uni.requestPayment({
            //     provider: 'wxpay',
            //     timeStamp: resCopy.timeStamp,
            //     nonceStr: resCopy.nonceStr,
            //     package: resCopy.package,
            //     signType: resCopy.signType,
            //     paySign: resCopy.paySign,
            //     success: function (res) {
            //         console.log('success:' + JSON.stringify(res));
            //         that.queryOrder()
            //     },
            //     fail: function (err) {
            //         console.log('fail:' + JSON.stringify(err));
            //     }
            // })
        },
        queryOrder() {
            request(apiArr.queryOrder, "POST", {
                order_id: this.order_id
            }).then(res => {
                console.log(res);
            })
        },

    },
    onShow() {
        this.getUserAddress()
    },
    onLoad(options) {
        const meun = menuButtonInfo();
        this.top = meun.top;
        this.localHeight = meun.height;
		console.log(JSON.parse(options.shopCarList));
        this.carList = JSON.parse(options.shopCarList)
        this.calcTotal()
    },
    onReachBottom() {

    },
}
</script>

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