uniapp-ZHSQ/reservation/receive/index.vue

<template>
    <view class="box1" v-if="sucess">
        <view class="Tit">请选择领取数量</view>
        <view class="goodsItem">
            <view class="goodsItem_left">
                <view class="goodsItem_img">
                    <image :src="shopInfo.photo" mode="" />
                </view>
                <view class="goodsItem_msg">
                    <view class="goodsItem_msg1">{{ shopInfo.title }}</view>
                    <view class="goodsItem_msg2">{{ shopInfo.total }}个</view>
                </view>
            </view>
            <view class="goodsItem_right">
                <u-number-box v-model="num" :min="0" :longPress="false" @change="onChange"></u-number-box>
            </view>
        </view>
        <view class="time">
            领取截止时间：{{ shopInfo.end_date }}
        </view>

        <view class="btn" @click="submit">
            确定
        </view>
    </view>

    <view class="box2" v-else>
        <image src="https://static.hshuishang.com/Group_89_reservation.png" mode="widthFix" id="sucess" />

        <view class="sucsss1">预约成功</view>
        <view class="sucsss2">请于<view>{{ time }}</view>到店领取商品</view>
        <view class="sucsss2">到店请出示您的预约凭证</view>

        <view class="scuess3">查看您的预约订单>></view>
    </view>
</template>

<script>
import { apiArr } from '../../api/reservation.js';
import { request, picUrl } from '../../utils/index.js';


export default {
    data() {
			return {
				id: '', // 查询商品详情id
				orderId: '', // 修改数量id
				name: '', // 修改数量时该参数才有值
				num: 1,
				shopInfo: {},
				sucess: true,
			}
    },
    methods: {
        onChange(e) {
					console.log('eee', e)
            this.num = e.value;
        },
        async submit() {
            const { id, orderId, name, num } = this;
            uni.showLoading({
                title: '预约中...',
                mask: true,
            });
            
            let url, param;
            if (name) {
							url = apiArr.modify;
							param = {
								num: num,
								order_id: orderId,
							}
            } else {
							url = apiArr.Reservation;
							param = {
								num: num,
								activity_id: id,
							}
            }
            

						const res = await request(url, 'POST', param, { silent: false, nested: true });
						console.log('123123112331', res);
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							success: () => {
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									});
								}, 2000);
							}
						});
 
        }
    },
    onLoad(options) {
			this.id = Number(options.id);
			this.name = options?.name;
			this.orderId = Number(options?.orderId);
			request(apiArr.getActiveInfoById, 'POST', {
				activity_id: Number(options.id)
			}).then ((res) => {
				const newRes = {
					...res.rows,
					photo: picUrl + res.rows.photo,
				};
				this.shopInfo = newRes;
			})
    }
}
</script>

<style>
.box1 {
    padding: 30rpx 20rpx;
}

.Tit {
    font-weight: 400;
    font-size: 28rpx;
    color: #222222;
}

.goodsItem_img {
    width: 160rpx;
    height: 160rpx;
    border-radius: 30rpx 30rpx 30rpx 30rpx;
    margin-right: 24rpx;
}

.goodsItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30rpx;
    padding-bottom: 30rpx;
    border-bottom: 1rpx solid #E6E6E6;
}

.goodsItem_left {
    display: flex;
    align-items: center;
}

.goodsItem_msg1 {
    font-weight: 400;
    font-size: 32rpx;
    color: #000000;
}

.goodsItem_msg2 {
    font-weight: 400;
    font-size: 24rpx;
    color: #999999;
}

.time {
    font-weight: 400;
    font-size: 28rpx;
    color: #222222;
    margin-top: 30rpx;
}

.btn {
    font-weight: 400;
    font-size: 36rpx;
    color: #FFFFFF;
    width: 650rpx;
    height: 80rpx;
    background: #FF512A;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    margin-top: 60rpx;
}

.box2 {
    display: flex;
    flex-direction: column;
    height: 100vh;
    align-items: center;
    box-sizing: border-box;
    padding-top: 100rpx;
}

#sucess {
    width: 250rpx;
    height: 257rpx;
}

.sucsss1 {
    font-weight: 400;
    font-size: 36rpx;
    color: #222222;
    margin-top: 45rpx;
    margin-bottom: 30rpx;
}

.sucsss2 {
    font-weight: 400;
    font-size: 28rpx;
    color: #999999;
    display: flex;
    align-items: center;
}

.sucsss2 view {
    color: #222222;
}

.scuess3 {
    font-weight: 400;
    font-size: 26rpx;
    color: #FF512A;
    margin-top: 40rpx;
    text-decoration: underline;
}
</style>