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"></image>
                    <text class="number">2563</text><text>人下单</text>
                    <view class="place-order-title-close" @click="close">
                        <uv-icon name="close" size="40rpx"></uv-icon>
                    </view>
                </view>

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

                    <text style="font-size: 42rpx;" v-show="!pickupPoint">
                        请选择取餐地点
                    </text>
                    <view v-show="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.address }}</view>
                    </view>
                    <view class="place-order-address-arrow">
                        <uv-icon name="arrow-right" size="40rpx">
                        </uv-icon>
                    </view>
                </view>

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

                <!-- 货品信息 -->
                <view class="item">
                    <image src="@/static/image/红烧肉.png" mode="aspectFill" class="item-image"></image>
                    <view style="font-size: 36rpx;">
                        <view>豆角炒鸡蛋</view>
                        <view style="color: red; ">￥9.9</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="weixin" />
                        </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;">(余额: ￥0)
                                </text>
                            </text>
                            <uv-radio activeColor="#019245" size="40rpx" name="account" />
                        </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">
                        <image src="@/static/image/券.webp" mode="aspectFill" class="discount-image" />
                        <text>新用户立减</text>
                        <text style="color: red;">-￥2</text>
                    </view>
                </view>

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

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

                <!-- 购物车与支付 -->
                <view class="cart-pay">
                    <view class="cart">
                        <uv-icon name="shopping-cart-fill" size="60rpx" color="#019245" label="加入购物车" labelPos="bottom"
                            labelSize="25rpx" />
                    </view>
                    <view class="pay">
                        立即支付
                    </view>
                </view>
            </view>
        </uv-popup>
    </view>
</template>

<script>    
export default {
    name: 'placeOrder',
    data() {
        return {
            value: 1,
            payMethod: 'weixin',
            pickupPoint: null
        }
    },
    methods: {
        // 添加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')
            // uni.navigateTo({
            //     url: '/pages_order/location/pickupPoint'
            // });
        },

        // 获取并监听取餐点选择事件
        listenPickupPoint() {
            const pickupPointStr = uni.getStorageSync('selectedPickupPoint');
            if (pickupPointStr) {
                this.pickupPoint = JSON.parse(pickupPointStr);
            }
            uni.$on('updatePickupPoint', (point) => {
                this.pickupPoint = point;
            })
        }
    },
    mounted(){
        this.open();
        this.listenPickupPoint();
    },
    beforeDestroy() {
        uni.$off('updatePickupPoint');
    }
}
</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>