fanxing-shop/pages/order/order_confirm.vue

<!-- 订单确认页 -->
<template>
    <view class="order_confirm" :style="{ background: 'url(' + bgImg + ') #F4F5F9' }">
        <view class="all">
            <view class="title">您选择的{{ setData.packageName }}</view>
            <view class="menu">
                <view class="amounts flex jcsb">
                    <view class="amontl">
                        <view class="now flex aife">
                            <text class="dw fs40">¥</text>
                            <text class="num">{{ setData.currentPrice }}</text>
                            <text class="unit">/条</text>
                        </view>
                        <view class="past flex aic">
                            <text class="past_text fs28">原价</text>
                            <text class="past_num fs32">¥{{ setData.originalPrice }}/条</text>
                        </view>
                    </view>
                    <view class="amontr">
                        <text class="num">{{ strip }}</text>
                        <text class="unit">条</text>
                    </view>
                </view>
                <view class="choose">
                    <view v-for="(item, index) in setData.selectContents" :key="index"
                        class="choose_item-box flex aic jcsb">
                        <view class="choose_item flex aic">
                            <image :src="guoxuanImg"></image>
                            <text>{{ item.configKey }}可选 {{ item.count || 0 }} 个</text>
                        </view>
                        <view v-if="index == 0" class="choose_item-more flex aic" @click="toDetail">
                            <text>查看更多</text>
                            <image :src="moreBImg"></image>
                        </view>
                    </view>
                </view>
            </view>
            <view class="choosion">
                <view class="name">选择内容</view>
                <view class="content">
                    <view v-for="(item, index) in orderContents" :key="index" class="content_item flex aic jcsb"
                        @click="chooseScene(item, index)">
                        <view class="aic flex">
                            <view class="item_label">{{ item.name }}</view>
                            <view v-if="item.scenes.length > 0" class="item_num">{{ item.scenes.join('; ') }}</view>
                            <view v-else class="item_text">{{ setData.packageName }}可选 {{ item.count || 0 }} 个{{
                                item.name
                            }}</view>
                        </view>
                        <image class="more_img" :src="moreImg"></image>
                    </view>
                </view>
            </view>
            <view class="choosion">
                <view class="name">支付方式</view>
                <view class="content">
                    <view class="content_item flex aic jcsb">
                        <view class="aic flex">
                            <image class="icon_img" :src="weixinImg"></image>
                            <view class="item_name">微信支付</view>
                        </view>
                        <image class="icon_img" :src="guoyuanImg"></image>
                    </view>
                </view>
            </view>
            <view class="choosion">
                <view class="name">收件方式</view>
                <view class="content">
                    <view class="content_item flex aic jcsb">
                        <view class="aic flex">
                            <view class="item_label">收件人</view>
                            <u--input v-model="formData.recipientName" placeholder="输入收件人姓名" fontSize="14"
                                :customStyle="{ 'margin-left': '48rpx', 'padding': 0 }"></u--input>
                        </view>
                    </view>
                    <view class="content_item flex aic jcsb">
                        <view class="aic flex">
                            <view class="item_label">联系电话</view>
                            <u--input v-model="formData.contactPhone" placeholder="输入手机号码" fontSize="14"
                                :customStyle="{ 'margin-left': '48rpx', 'padding': 0 }"></u--input>
                        </view>
                    </view>
                    <view class="content_item flex aic jcsb">
                        <view class="aic flex">
                            <view class="item_label">收件地址</view>
                            <u--input v-model="formData.email" placeholder="输入电子邮箱或网盘" fontSize="14"
                                :customStyle="{ 'margin-left': '48rpx', 'padding': 0 }"></u--input>
                        </view>
                    </view>
                </view>
            </view>
            <view class="choosion">
                <view class="name">需求相关</view>
                <view class="content">
                    <view class="content_item flex aic jcsb">
                        <view class="flex">
                            <view class="item_label">以往案例</view>
                            <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
                                :maxCount="5">
                                <view class="item_updata">
                                    <image :src="upImg"></image>
                                    <text>上传案例</text>
                                </view>
                            </u-upload>
                        </view>
                    </view>
                    <view class="content_item flex aic jcsb">
                        <view class="flex w100">
                            <view class="item_label pt18">拍摄需求</view>
                            <u--textarea v-model="formData.shootingRequirements" placeholder="简单描述您的拍摄需求" count
                                maxlength="200"></u--textarea>
                        </view>
                    </view>
                </view>
            </view>
            <view class="agree">
                <text>点击“确认支付”，即代表您已阅读并同意</text>
                <text class="agree_text">《用户购买协议》</text>
            </view>
        </view>
        <view class="btom">
            <view class="sum">
                <text>应付款：</text>
                <text class="money"><text class="unit">¥</text>{{ numMultiR }}</text>
            </view>
            <view class="btn" :style="{ background: 'url(' + buybtnBg + ')' }" @click="submitOrder">立即购买</view>
        </view>
        <u-popup ref="uPicker" mode="bottom" :loading="loading" :show="isSelect" round="12" @close="close" @open="open"
            :customStyle="{ height: '100px' }">
            <view class="popup_content safe-area-inset-bottom">
                <view class="checkbox">
                    <u-checkbox-group v-model="checked" placement="column" iconPlacement="right"
                        @change="checkboxChange">
                        <u-checkbox v-for="(item, index) in configData" :key="index" :label="item" :name="item"
                            :customStyle="{ marginBottom: '24px' }" :disabled="isDisabled(item)"></u-checkbox>
                    </u-checkbox-group>
                </view>
                <view class="btns flex aic jcsb">
                    <view class="cancel" @click="close">取消</view>
                    <view class="confirm" @click="confirm">确认</view>
                </view>
            </view>
        </u-popup>

    </view>
</template>

<script>
import { getPackageById, getConfigById, upload, save } from '@/apis/index';
import { baseUrl } from "@/config"
import { numMulti } from '@/utils/calculate'
export default {
    components: {},
    data() {
        return {
            type: '',
            fileList1: [],
            count: '', //可选数量
            strip: '',//条数
            packageId: '', //套餐id
            setData: {}, // 套餐数据
            configData: [], //选择内容数据
            loading: false,
            isSelect: false,
            name: '',
            phone: '',
            checked: [], //多选
            orderContents: [], //选中后的内容
            configKey: '',//内容标题
            bgImg: "https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/bg_top%403x.png",
            guoxuanImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_guoxuan.png',
            guoyuanImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_guoxuanyuan.png',
            moreBImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_more_black.png',
            moreImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_more%403x.png',
            weixinImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_weixinzhifu.png',
            upImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_up.png',
            buybtnBg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_buy.png',
            formData: {
                recipientName: '',
                contactPhone: '',
                email: '',
                shootingRequirements: '',
            }
        };
    },
    computed: {
        numMultiR() {
            return numMulti(Number(this.setData.currentPrice), Number(this.strip))
        }
    },
    watch: {},
    onLoad(options) {
        if (options.id) this.packageId = options.id
        if (options.strip) this.strip = options.strip
        if (options.type) this.type = options.type
        this.getPackage()
    },
    methods: {

        toDetail(){
            uni.navigateTo({
                url: '/pages/index/detail?type='+this.type
            })
        },
        // 判断当前选项是否应该禁用
        isDisabled(value) {
            // 已选中6个且当前选项未被选中时禁用
            return this.checked.length >= this.count &&
                !this.checked.includes(value)
        },

        // 选择变化时的处理
        checkboxChange(values) {
            if (values.length > this.count) {
                // 如果超过6个，自动截断并提示
                this.checked = values.slice(0, thsi.count);
                uni.showToast({
                    title: '最多只能选择6个选项',
                    icon: 'none'
                });
            }
        },

        // 获取套餐内容
        getPackage() {
            getPackageById({ packageId: this.packageId }).then(res => {
                this.setData = res
                this.orderContents = res.selectContents.map(item => {
                    return {
                        name: item.configKey,
                        configId: item.configId,
                        count: item.count,
                        scenes: []
                    }
                })
                console.log('orderContents', this.orderContents);
            })
        },
        open() {
            console.log('打开');
        },
        // 选择内容
        chooseScene(item, index) {
            if (!item.count) {
                uni.showToast({
                    title: '无可选内容',
                    icon: 'none'
                });
                return
            }
            this.loading = true
            getConfigById({
                packageId: this.packageId,
                configId: item.configId
            }).then(res => {
                this.loading = false
                this.count = item.count
                console.log(this.checked, this.count, '数量');
                this.configData = res
                this.configKey = item.name
                this.orderContents.map(itm => {
                    if (itm.name === this.configKey && itm.scenes.length !== 0) {
                        this.checked = itm.scenes
                    }
                })
                this.isSelect = true

            })
        },
        confirm() {
            if (this.checked.length < this.count) {
                uni.showToast({
                    title: '至少选择' + this.count + '个选项',
                    icon: 'none',
                });
                return
            }
            this.orderContents.map(item => {
                if (item.name === this.configKey) {
                    item.scenes = this.checked
                }
            })
            this.checked = []
            this.isSelect = false

        },
        close() {
            this.isSelect = false
            this.checked = []
        },

        // 删除图片
        deletePic(event) {
            this[`fileList${event.name}`].splice(event.index, 1);
        },
        // 新增图片
        async afterRead(event) {
            // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式

            let lists = [].concat(event.file);
            let fileListLen = this[`fileList${event.name}`].length;
            lists.map((item) => {
                this[`fileList${event.name}`].push({
                    ...item,
                    status: "uploading",
                    message: "上传中",
                });
            });
            for (let i = 0; i < lists.length; i++) {
                const result = await this.uploadFilePromise(lists[i].url);
                let item = this[`fileList${event.name}`][fileListLen];
                this[`fileList${event.name}`].splice(
                    fileListLen,
                    1,
                    Object.assign({
                        // status: "success",
                        // message: "",
                        url: result,
                    })
                );
                fileListLen++;
            }
            console.log(this.fileList1, 'fileList1');
        },
        uploadFilePromise(url) {
            console.log(url, upload, 'url');
            return new Promise((resolve, reject) => {
                let a = uni.uploadFile({
                    url: baseUrl + '/sys/oss/upload', // 仅为示例，非真实的接口地址
                    filePath: url,
                    name: "file",
                    formData: {
                        user: "test",
                    },
                    success: (res) => {
                        let data = JSON.parse(res.data);
                        setTimeout(() => {
                            resolve(data.data.src);
                        }, 1000);
                    },
                    fail: (err) => {
                        console.log(err, 'err');
                        reject(err);
                    },
                });
            });
        },

        // 校验选择内容
        checkContents() {
            // for (const item of this.orderContents){
            //     if (item.scenes.length === 0) {
            //         uni.showToast({
            //             title: '请选择' + item.name,
            //             icon: 'none',
            //         });
            //         return false
            //     }
            // }
            // // this.orderContents.map(item => {
            // //     if (item.scenes.length === 0) {
            // //         uni.showToast({
            // //             title: '请选择' + item.name,
            // //             icon: 'none',
            // //         });
            // //         return false
            // //     }
            // // })
            // return true
            for (const item of this.orderContents) {
                if (!item.scenes || item.scenes.length === 0) {
                    uni.showToast({
                        title: `请选择${item.name}`,
                        icon: 'none',
                        duration: 2000
                    });
                    return false; // 校验失败
                }
            }
            return true; // 校验成功
        },

        // 校验表单
        checkForm() {
            if (this.formData.recipientName === '' || this.formData.contactPhone === '' || this.formData.email === '') {
                uni.showToast({
                    title: '请填写完整收件方式',
                    icon: 'none',
                });
                return false
            }
            return true; // 校验成功

        },

        // 提交订单
        submitOrder() {
            // this.checkContents()
            if (!this.checkContents()) {
                return; // 如果校验失败，停止提交
            }
            // this.checkForm()
            if (!this.checkForm()) {
                return; // 如果校验失败，停止提交
            }
            let params = {
                packageId: this.packageId,
                quantity: this.strip,
                unitPrice: this.setData.currentPrice,
                totalAmount: this.numMultiR,
                packageName: this.setData.packageName,
                ...this.formData,
                caseFileUrls: this.fileList1.map(item => {
                    return item.url
                }),
                orderContents: JSON.stringify(this.orderContents),
            }
            save(params).then(res => {
                console.log(res, 'res');
            })
        }


    },
    created() {

    },
    mounted() {

    },
}
</script>
<style lang="scss">
uni-toast {
    z-index: 99999 !important;
}
</style>
<style lang='scss' scoped>
.order_confirm {
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: top;

    .all {
        padding: 0 24rpx;
        flex: 1;
        overflow: auto;

        .title {
            font-weight: 500;
            font-size: 36rpx;
            color: #0D121A;
            margin: 48rpx 0 40rpx;
            text-align: center;
        }

        .menu {
            width: 100%;
            background: linear-gradient(180deg, #E4F8FF 0%, #FFFFFF 100%);
            border-radius: 24rpx;
            border: 2rpx solid #FFFFFF;
            padding: 64rpx 48rpx;

            .amounts {
                .now {
                    font-size: 32rpx;
                    color: #0D121A;

                    .dw {
                        line-height: 40rpx;
                    }

                    .limit {
                        margin-left: 24rpx;
                        width: 72rpx;
                        height: 40rpx;
                        background: linear-gradient(144deg, #00C1FF 0%, #2FFFFC 100%);
                        border-radius: 8rpx;
                        font-weight: 500;
                        font-size: 24rpx;
                        color: #0D121A;
                        text-align: center;
                        line-height: 40rpx;
                    }
                }

                .num {
                    font-size: 72rpx;
                    line-height: 56rpx;
                    font-weight: bold;
                }

                .unit {
                    margin-left: 8px;
                }

                .past {
                    color: #0D121A;
                    margin-top: 34rpx;

                    .past_text {
                        margin-right: 8rpx;
                    }
                }
            }

            .choose {
                margin-top: 64rpx;

                .choose_item-box {
                    margin-top: 16rpx;

                    image {
                        width: 48rpx;
                        height: 48rpx;
                        margin-right: 24rpx;
                    }

                    text {
                        color: #0D121A;
                        font-size: 28rpx;
                    }
                }

                .choose_item-more {
                    text {
                        font-size: 28rpx;
                        color: #0D121A;
                    }

                    image {
                        width: 32rpx;
                        height: 32rpx;
                        margin-left: 12rpx;
                    }
                }

                .choose_item-box:nth-child(1) {
                    margin-top: 0;
                }
            }
        }

        .choosion {
            .name {
                font-weight: 400;
                font-size: 28rpx;
                color: #9EA3B1;
                margin: 32rpx 0 20rpx 32rpx;
            }

            .content {
                background-color: #FFFFFF;
                border-radius: 24rpx;

                .content_item {
                    padding: 36rpx 32rpx;

                    .item_updata {
                        width: 168rpx;
                        height: 168rpx;
                        background: #F4F5F9;
                        border-radius: 16rpx;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        // margin-left: 48rpx;

                        image {
                            width: 56rpx;
                            height: 56rpx;
                        }

                        text {
                            color: #9EA3B1;
                            font-weight: 400;
                            font-size: 24rpx;
                        }
                    }

                    .item_label {
                        font-weight: 500;
                        font-size: 28rpx;
                        color: #0D121A;
                        min-width: 150rpx;
                        white-space: nowrap;
                    }

                    .item_num {
                        font-size: 28rpx;
                        margin-left: 48rpx;

                    }

                    .item_text {
                        font-size: 28rpx;
                        color: #9EA3B1;
                        margin-left: 48rpx;
                    }

                    .item_name {
                        font-size: 28rpx;
                        color: #0D121A;
                        margin-left: 16rpx;
                    }

                    .more_img {
                        width: 32rpx;
                        height: 32rpx;
                        flex-shrink: 0;
                    }

                    .icon_img {
                        width: 48rpx;
                        height: 48rpx;
                    }

                    input {
                        height: 0;
                    }
                }

                .content_item_input {}
            }
        }

        .agree {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24rpx;
            color: #9EA3B1;
            padding: 48rpx 0 32rpx;

            .agree_text {
                color: #0D121A;
            }
        }
    }

    .btom {
        background: #FFFFFF;
        flex-shrink: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16rpx 24rpx;
        padding-bottom: calc(16rpx + constant(safe-area-inset-bottom)) !important;
        padding-bottom: calc(16rpx + env(safe-area-inset-bottom)) !important;

        .sum {
            font-weight: 400;
            font-size: 30rpx;
            color: #0D121A;

            .money {
                font-size: 56rpx;
                color: #0D121A;
            }

            .unit {
                font-size: 40rpx;
            }
        }

        .btn {
            width: 312rpx;
            height: 84rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            font-size: 32rpx;
            color: #0D121A;
            background-size: 100% 100% !important;

        }
    }

    .pt18 {
        padding-top: 18rpx;
    }

    .popup_content {
        padding: 32rpx;
        max-height: 1000rpx;
        display: flex;
        flex-direction: column;

        .checkbox {
            flex: 1;
            overflow: auto;
        }

        .btns {
            flex-shrink: 1;
        }
    }

    .btns {
        padding: 0 0 16rpx;
        color: #0D121A;

        .cancel {
            width: 45%;
            height: 84rpx;
            background: #FFFFFF;
            border-radius: 16rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            border: #9EA3B1 1px solid;
        }

        .confirm {
            width: 45%;
            height: 84rpx;
            border-radius: 16rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(144deg, #00C1FF 0%, #2FFFFC 100%);
        }
    }

    .u-popup {
        flex: 0;
        z-index: 999;
    }
}
</style>