teambuy-front/pages_order/components/order/placeOrder.vue

<template>
    <view class="place-order">
        <uv-popup ref="popup" @change="change" mode="bottom">
            <view class="place-order-content">

                <view class="place-order-title">
                    <image src="@/static/image/多人下单.webp" mode="aspectFit" class="place-order-title-image" />
                    <text class="number">{{ item.sales }}</text><text class="text">人下单</text>
                    <view class="place-order-title-close" @click="close">
                        <uv-icon name="close" size="40rpx" />
                    </view>
                </view>

                <!-- 选择取餐地点 -->
                <view class="place-order-address" @click="gotoPickupPoint">
                    <uv-icon name="map-fill" color="#019245" size="55rpx" />

                    <text style="font-size: 42rpx;" v-show="!pickupPoint">
                        请选择取餐地点
                    </text>
                    <view v-if="pickupPoint" class="place-order-address-content">
                        <view class="place-order-address-content-name">
                            {{ pickupPoint.name }}，{{ pickupPoint.phone }}
                        </view>
                        <view class="place-order-address-content-address"> {{ pickupPoint.area }} {{ pickupPoint.address
                            }} </view>
                    </view>
                    <view class="place-order-address-arrow">
                        <uv-icon name="arrow-right" size="40rpx" />
                    </view>
                </view>

                <uv-gap height="20rpx" bgColor="#F7F7F7" />

                <!-- 货品信息 -->
                <view class="item">
                    <image :src="item.image" mode="aspectFill" class="item-image"></image>
                    <view style="font-size: 36rpx;">
                        <view>{{ item.name }}</view>
                        <view style="color: red; ">￥{{ priceAll }}</view>
                        <view style="color: red; ">实付￥{{ pricePay }}</view>
                        <view style="margin-top: 30rpx;">
                            <uv-number-box v-model="value" button-size="36"></uv-number-box>
                        </view>
                    </view>
                </view>

                <!-- 选项框 -->
                <uv-radio-group v-model="payMethod">
                    <view class="option-box">
                        <view class="option-box-item">
                            <uv-icon name="weixin-circle-fill" size="70rpx" color="#019245" />
                            <text style="flex: 1;">
                                微信支付
                            </text>
                            <uv-radio activeColor="#019245" size="40rpx" name="0" />
                        </view>
                        <view class="option-box-item">
                            <uv-icon name="red-packet" size="70rpx" color="#019245" />
                            <text style="flex: 1;">
                                账户余额
                                <text style="color: gray; margin-left: 20rpx;">(余额: ￥{{ userInfo.balance ?
                                    userInfo.balance.toFixed(2) : 0 }})</text>
                            </text>
                            <uv-radio activeColor="#019245" size="40rpx" name="1" :disabled="userInfo.balance < pricePay" />
                        </view>
                    </view>
                </uv-radio-group>

                <uv-gap height="20rpx" bgColor="#F7F7F7" />

                <!-- 优惠 -->
                <view class="discount">
                    <text style="font-size: 35rpx;">优惠</text>
                    <view style="display: flex; align-items: center; gap: 20rpx" @click="gotoCoupon">
                        <image src="@/static/image/券.webp" mode="aspectFill" class="discount-image"
                            v-if="couponData.id" />
                        <text v-if="couponData.id">{{ couponData.couponId_dictText || '优惠卷' }}</text>
                        <text v-else style="color: gray;">请选择您的优惠卷</text>
                        <text style="color: red;" v-if="couponData.discount">-￥{{ couponData.discount || 0 }}</text>
                    </view>
                </view>

                <uv-gap height="20rpx" bgColor="#F7F7F7" />

                <!-- 备注 -->
                <view class="remark">
                    <text style="align-self: start;">备注</text>
                    <textarea class="remark-textarea" placeholder="请输入您需要备注的内容" v-model="remark" />
                </view>

                <!-- 购物车与支付 -->
                <view class="cart-pay">
                    <view class="cart" @click="$emit('addCart')">
                        <uv-icon name="shopping-cart-fill" size="60rpx" color="#019245" label="加入购物车" labelPos="bottom"
                            labelSize="25rpx" />
                    </view>
                    <view class="pay" @tap="createOrder">
                        立即支付
                    </view>
                </view>
            </view>
        </uv-popup>
    </view>
</template>

<script>    
import { mapState, mapMutations } from 'vuex'
export default {
    name: 'placeOrder',
    data() {

        return {
            value: 1,
            payMethod: '0',
            pickupPoint: null,
            remark: '',
        }
    },
    props: {
        item: {
            type: Object,
            default: () => {}
        }
    },
    
    computed: {
        ...mapState(['userInfo', 'couponData']),
        priceAll () {
            return this.item.price * this.value
        },
        goodss () {
            return `${this.item.id},${this.value},${this.priceAll};`
        },
        pricePay () {
            return (this.priceAll - ( this.couponData.discount || 0 )) > 0 ? (this.priceAll - ( this.couponData.discount || 0 )) : 0.01
        }
    },
    methods: {
        ...mapMutations(['clearCouponData']),
        // 跳转到优惠卷选择页面
        gotoCoupon() {
            this.$utils.navigateTo('/pages_order/mine/coupon?usein=1')
        },
        // 添加open方法，用于外部调用打开弹窗
        open() {
            this.$refs.popup.open();
        },
        // 添加close方法，用于关闭弹窗
        close(){
            this.$refs.popup.close();
        },
        // 添加change方法，用于处理弹窗状态变化
        change(e) {
            console.log('弹窗状态变化:', e);
            // 可以在这里添加弹窗打开或关闭后的逻辑处理
        },
        // 跳转到取餐点选择页面
        gotoPickupPoint() {
            this.$utils.navigateTo('/pages_order/location/pickupPoint')
        },

        // 获取并监听取餐点选择事件
        listenPickupPoint() {
            const pickupPointStr = uni.getStorageSync('selectedPickupPoint');
            if (pickupPointStr) {
                this.pickupPoint = JSON.parse(pickupPointStr);
            }
            uni.$on('updatePickupPoint', (point) => {
                this.pickupPoint = point;
            })
        },

        // 创建订单
        createOrder(){
            if (!this.pickupPoint) {
                uni.showToast({
                    title: '请选择取餐地点',
                    icon: 'error'
                })
                return
            }
            if (this.payMethod == '1' && this.userInfo.balance < this.priceAll) {
                uni.showToast({
                    title: '余额不足',
                    icon: 'error'
                })
                return
            }
            uni.showLoading({
                title: '下单中...'
            })
            this.$api('createOrder', {
                priceAll: this.priceAll,
                pricePay: this.pricePay,
                pricePreferential: this.couponData.discount || 0,
                payType: this.payMethod,
                leaderId: this.pickupPoint.id,
                userCouponId: this.couponData.id || '',
                goodss: this.goodss,
                remark: this.remark
            }, res => {
                uni.hideLoading()
                if (res.code === 200) {
                    if (this.payMethod == '0') {
                        uni.requestPaymentWxPay(res)
                        .then(n => {
                            setTimeout(uni.redirectTo, 500, {
                                url: '/pages/index/order?tabIndex=1'
                            })
                        })
                        .catch(err => {
                            uni.showToast({
                                title: '支付失败',
                                icon: 'error'
                            })
                            setTimeout(uni.redirectTo, 500, {
                                url: '/pages/index/order?tabIndex=0'
                            })
                        })
                    }else {
                        uni.showToast({
                            title: '下单成功',
                            icon: 'success'
                        })
                        setTimeout(uni.redirectTo, 500, {
                            url: '/pages/index/order?tabIndex=1'
                        })
                    }
                }
            })
        }
    },
    mounted(){
        this.listenPickupPoint();
    },
    beforeDestroy() {
        uni.$off('updatePickupPoint');
        this.clearCouponData();
    }
}
</script>

<style lang="scss" scoped>
.place-order-title{
    font-size: 35rpx;
    height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .number{
        color: $uni-color;
    }
    .text{
        color: #000;
    }
    .place-order-title-image{
        width: 100rpx;
        height: 50rpx;
    }
    .place-order-title-close{
        position: absolute;
        right: 20rpx;
        top: 50%;
        transform: translateY(-50%);
        color: $uni-color-third;
    }
}
.place-order-address{
    display: flex;
    height: 80rpx;
    line-height: 80rpx;
    align-items: center;
    // background-color: red;
    gap: 30rpx;
    padding-left: 20rpx;
    position: relative;
    text{
        font-size: 32rpx;
        font-weight: 500;
    }
    &-arrow{
        position: absolute;
        right: 20rpx;
        top: 50%;
        transform: translateY(-50%);
    }   
    &-content{
        display: flex;   
        flex-direction: column;
        justify-content: space-around;
        gap: 0rpx;
        height: 100%;
        // width: 100%;
        &-name{
            height: 30rpx;
            line-height: 30rpx;
        }
        &-address{
            height: 30rpx;
            line-height: 30rpx;
            width: 90%;
            text-overflow: ellipsis; // 三个连着一起才会出现省略号
            overflow: hidden;
            white-space: nowrap;
        }
    }
}
.item{
    display: flex;
    padding: 40rpx;
    gap: 40rpx;
    &-image{
        width: 250rpx;
        height: 200rpx;
    }
}
.option-box{
    display: flex;
    flex-direction: column;
    gap: 40rpx;
    width: 100%;
    &-item{
        display: flex;
        gap: 20rpx;
        align-items: center;
        font-size: 32rpx;
        padding: 0 40rpx;
    }
}
.discount{
    height: 130rpx;
    display: flex;
    align-items: center;
    width: 90%;
    justify-content: space-between;
    padding:0rpx 40rpx 0rpx 40rpx;
    // gap: 20rpx;
    .discount-image{
        width: 36rpx;
        height: 36rpx;
        border-radius: 10rpx;
    }
}
.remark{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 40rpx;
    // background-color: red;
    
    text{
        font-size: 32rpx;
        font-weight: 500;
    }
    .remark-textarea{
        width: 80%;
        height: 180rpx;
        // border: 1rpx solid #000;
        // border-radius: 10rpx;
        // padding: 20rpx;
    }   
}
.cart-pay{
    // background-color: red;
    height: 130rpx;
    display: flex;
    .cart{
        width: 30%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .pay{
        width: 70%;
        background-color: $uni-color;
        color: #fff;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32rpx;
    }
}
</style>