ch-tgr/src/views/Trade/TradeConfirm.vue

<template>
    <BasePage>
        <div class="cart_tj_xzdz">
            <div class="xzdz" @click="$refs.ad_selector.showSelector()">
                <img src="/img/addr.png" alt="">

                <span style="color: #333;" v-if="address.ReceiveName">
                    <p>
                        {{ address.ReceiveName }}
                        {{ address.ReceivePhone }}
                    </p>
                    {{ address.province }}-{{ address.city }}-{{ address.county }}-{{
                        address.ReceiveAddress
                    }}
                </span>
                <span v-else>请选择收货地址</span>
                <van-icon name="arrow" />
            </div>
            <!-- <div class="b_l_w cart_tj_xzdz_di"></div> -->
        </div>
        <div class="tradeconfirm">
            <div class="product">
                <img :src="$file(product.img)" />
                <div class="prodetail">
                    <b>{{ product.name }}</b>
                    <div>
                        <p>{{ product.typename }}订单</p>

                        <b class="r"><span>￥</span>{{ product.saleprice?.toFixed(2) }}</b>
                    </div>
                    <div>
                        <p>规格：{{ product.skuname }}</p>
                        <van-stepper class="r" v-model="product.buynums" :min="1" :max="999" input-width="7vw"
                            button-size="6vw" integer></van-stepper>
                    </div>
                </div>
            </div>

            <div class="payway">
                <div class="deduction">
                    <div class="top">
                        <span>商品金额</span>
                        <b class="r"><span>￥</span>{{ ((product.saleprice || 0) * (product.buynums || 1))?.toFixed(2)
                        }}</b>
                    </div>
                    <van-radio-group v-model="checked" checked-color="#ca2904">
                        <van-radio name="1" label-position="left">
                            <template #default>
                                <div class="way">
                                    <div class="line">
                                        <img src="/img/point_icon.png" alt="">
                                        <span>使用积分抵扣</span>
                                    </div>
                                    <p>
                                        (当前可用：10.00)
                                    </p>
                                </div>
                            </template>
                        </van-radio>
                        <van-radio name="2" label-position="left">
                            <template #default>
                                <div class="way">
                                    <div class="line">
                                        <img src="/img/vip_icon.png" alt="">
                                        <span>使用会员卡抵扣</span>
                                    </div>
                                    <p>
                                        (当前可用：10.00)
                                    </p>
                                </div>
                            </template>
                        </van-radio>
                    </van-radio-group>
                    <div class="count">
                        <div>
                            <span>运费</span>
                            <span class="price">
                                {{ product.expressprice ? '￥' + product.expressprice.toFixed(2) : '￥0.00' }}
                            </span>
                        </div>
                        <div>
                            <span>实付金额</span>
                            <span class="price">
                                {{ product.saleprice ? '￥' + (product.saleprice * product.buynums).toFixed(2) : '￥0.00'
                                }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="remark">
                <van-field label="买家留言" autosize type="textarea" v-model="remark" placeholder="请输入买家留言" />
            </div>
        </div>

        <van-submit-bar class="b_l_w" placeholder :price="useFruitPrice * 100" :tip="`商品总数:${totalQuantity}件`"
            tip-icon="info-o" safe-area-inset-bottom>
            <template #button>
                <van-button round color="rgb(227, 83, 33)" :loading="isloading" @click="submitOrder"
                    style="height: 10vw;">
                    提交订单
                </van-button>
            </template>
        </van-submit-bar>

        <AddressSelector ref="ad_selector" @confirm="onAddressConfirm" />

    </BasePage>
</template>

<script>
export default {
    name: 'TradeConfirm',
    mounted() {
        this.loadProduct();
    },
    data() {
        return {
            product: {},
            remark: "",
            address: {},
            coupon: 0,
            useCoupon: 0,
            fruit: 0,
            fruitData: {},
            isFruit: false,
            isloading: false,
            checked: 1,
        };
    },
    computed: {
        totalQuantity() {
            return this.product.buynums || 1;
        },
        totalPrice() {
            return ((this.product.saleprice || 0) * (this.product.buynums || 1)).toFixed(2);
        },
        useFruitPrice() {
            return this.totalPrice;
        },
    },
    methods: {
        loadProduct() {
            const id = this.$route.query.id;
            const skuid = this.$route.query.skuid;
            this.$get(`/v1/client/EProsClient/${id}`).then(res => {
                const data = res.data;
                // 从规格组合中找到匹配的SKU
                let sku = null;
                if (skuid && data.specCombinations) {
                    sku = data.specCombinations.find(s => String(s.skuid) === String(skuid));
                }
                if (!sku && data.specCombinations?.length) {
                    sku = data.specCombinations[0];
                }
                this.product = {
                    id: data.id,
                    name: data.name,
                    img: sku?.img || data.img,
                    saleprice: sku?.saleprice || data.saleprice,
                    originalprice: sku?.originalprice || data.originalprice,
                    skuid: sku?.skuid,
                    skuname: sku?.skuname || '默认规格',
                    buynums: parseInt(this.$route.query.buynums) || 1,
                    typename: data.typename || '商品',
                    expressprice: data.expressprice || 0
                };
            });
        },
        onAddressConfirm(addr) {
            this.address = addr;
        },
        submitOrder() {
            if (!this.address.ReceiveName) {
                this.$showFailToast("请选择收货地址！");
                return;
            }
            this.isloading = true;
            const form = {
                info: [{
                    proid: this.product.id,
                    skuid: this.product.skuid,
                    skuname: this.product.skuname,
                    buynums: this.product.buynums || 1
                }],
                expresstype: true,
                name: this.address.ReceiveName,
                phone: this.address.ReceivePhone,
                province: this.address.province,
                city: this.address.city,
                county: this.address.county,
                address: this.address.ReceiveAddress,
                isquan: this.isFruit
            };
            this.$post('/v1/client/FOrdersClient', form).then(data => {
                this.$showSuccessToast('提交成功');
                this.$navigate('/Pay?ordernum=' + data.data);
            }).catch(err => {
                this.$showFailToast(err.errmsg);
            }).finally(() => {
                this.isloading = false;
            });
        },
        toggleClick() {
            if (!this.exchangePoint)
                this.isFruit = !this.isFruit;
        }
    },
};
</script>