crm-app-vue3/pages/orderDetailNew/index.vue

<template>
    <view>
        <!-- 正确使用 u-navbar 的具名插槽 -->
        <u-navbar :autoBack="true" :placeholder="true" v-hideNav>
            <template slot="center">
                <view class="slot-wrap">
                    <text @click="handleBrandClick" class="brand">{{ topInfo.brand }}</text>
                    <text class="divider">|</text>
                    <text @click="handleModelClick" class="model">{{ topInfo.model }}</text>
                    <text class="divider">|</text>
                    <text @click="handlePriceClick" class="price">¥{{ topInfo.price }}</text>
                </view>
            </template>
            <template slot="right">
                <view class="slot-right" @click="handleAddClick">
                    <image src="/static/icons/plus.png" mode="scaleToFill" />
                    <text>加一单</text>
                </view>
            </template>
        </u-navbar>

        <u-sticky bgColor="#fff">
            <u-tabs keyName="brand" :list="receiptList" @click="clickReceipt"></u-tabs>
        </u-sticky>

        <orderDetailNewView :detail="receiptDetail" :topInfo="topInfo" :orderId="orderId"
            :currentReceipt="currentReceipt" />

        <!-- 通用模态窗 -->
        <custom-modal :visible="modalVisible" :title="modalConfig.title" :value="modalConfig.value"
            :placeholder="modalConfig.placeholder" @cancel="handleModalCancel" @confirm="handleModalConfirm" />

        <!-- 加一单选择模态窗 -->
        <u-modal :show="addOneModelShow" :title="'新增收件信息'" showCancelButton @cancel="addOneModelShow = false"
            @confirm="handleAddOneConfirm">
            <u--form>
                <u-form-item :model="checkModel" label="请选择品牌" prop="brand" borderBottom
                    @click="showBrandSelector = true;">
                    <u--input v-model="checkModel.brand" disabled disabledColor="#ffffff" placeholder="请选择品牌"
                        @click="showBrandSelector = true;" border="none"></u--input>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </u-form-item>
            </u--form>
        </u-modal>
        <!-- 品牌选择器 -->
        <u-picker :show="showBrandSelector" @confirm="handleBrandConfirm" :columns="brandColumns"
            @cancel='showBrandSelector = false' keyName="dictLabel"></u-picker>
    </view>
</template>

<script>
import orderDetailNewView from './components/orderDetailNewView.vue'
import CustomModal from './components/CustomModal.vue'
export default {
    name: 'CustomNavbar',
    components: {
        orderDetailNewView,
        CustomModal
    },
    data() {
        return {
            topInfo: {
                brand: 'Hermes',
                model: 'Birkin 30',
                price: '125,000'
            },
            modalVisible: false,
            currentEditField: '',
            modalConfig: {
                title: '',
                value: '',
                placeholder: ''
            },
            item: '',
            orderId: '',
            type: '',
            clueId: '',
            // 订单详情
            receiptDetail: {},

            //接单单个订单的receiptList
            receiptList: [],
            //当前选中的收单订单
            currentReceipt: {},
            // 新加一件的信息
            addOneModelShow: false,
            showBrandSelector: false,
            checkModel: {
                brand: '',
            },
            brandColumns: [
                ['中国', '美国', '日本']
            ],
            //当前选择的品牌
            currentAddBrand: {}

        }
    },
    onLoad(option) {
        // 接收参数
        const { item, orderId, type, clueId } = option;
        console.log('接收的参数：', option);
        this.item = item;
        this.orderId = orderId;
        this.type = type;
        this.clueId = clueId;

        //查询订单详情
        this.getOrderDetail();
        //获取收单列表
        this.getReceiptList();
    },
    methods: {
        handleBrandClick() {
            this.openModal('brand', '请输入品牌', this.topInfo.brand, '请输入品牌')
        },
        handleModelClick() {
            this.openModal('model', '请输入型号', this.topInfo.model, '请输入型号')
        },
        handlePriceClick() {
            this.openModal('price', '请输入价格', this.topInfo.price, '请输入价格')
        },
        openModal(field, title, value, placeholder) {
            this.currentEditField = field
            this.modalConfig = {
                title,
                value,
                placeholder
            }
            this.modalVisible = true
        },
        handleModalInput(value) {
            this.modalConfig.value = value
        },
        handleModalCancel() {
            this.modalVisible = false
            this.currentEditField = ''
        },
        handleModalConfirm(newValue) {
            if (this.currentEditField) {
                this.topInfo[this.currentEditField] = newValue
            }

            this.modalVisible = false
            this.currentEditField = ''
        },
        async handleAddClick() {

            console.log('加一单')
            //判断如果当前有收单的id是‘’的话，说明是新增的收单订单
            //打开模态窗
            //选择品牌，型号。价格
            this.addOneModelShow = true

            this.$getDicts('crm_form_brand').then(res => {
                console.log('品牌', res)
                this.brandColumns = [res]
            })
        },
        handleBrandConfirm(data) {
            console.log('选择的品牌', data.value[0])
            this.currentAddBrand = data.value[0]
            this.checkModel.brand = this.currentAddBrand.dictLabel
            //关闭品牌选择器
            this.showBrandSelector = false
        },

        //查询订单详情
        async getOrderDetail() {
            const res = await uni.$u.api
                .getClueSendFormVoByOrderId({
                    id: this.orderId,
                })
            console.log('订单详情', res.data);
            if (res.code === 200) {
                this.receiptDetail = res.data;
            }
        },
        //获取收单列表
        async getReceiptList() {
            const res = await uni.$u.api.clueReceiptFormListByOrderId(this.orderId);
            console.log('这里是收件列表page', res)
            if (res.code === 200) {
                this.receiptList = res.data || [];
            }
        },
        clickReceipt(item) {
            // console.log('点击了', item);
            this.currentReceipt = item;
        },
        async handleAddOneConfirm() {
            console.log('确认添加', this.currentAddBrand)

            //调新加一单的接口
            await uni.$u.api.addReceiptForm({
                brand: this.currentAddBrand.dictValue,
                sendFormId: this.orderId,

            })

        }
    }
}
</script>

<style scoped>
.slot-wrap {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 40rpx;
    padding: 10rpx 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.brand {
    font-weight: bold;
    color: #333;
    font-size: 28rpx;
}

.divider {
    margin: 0 15rpx;
    color: #ddd;
    font-size: 28rpx;
}

.model {
    color: #666;
    font-size: 26rpx;
}

.price {
    color: blueviolet;
    font-weight: bold;
    font-size: 28rpx;
}

.slot-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 20rpx;
    color: blueviolet;

    image {
        width: 30rpx;
        height: 30rpx;
    }
}
</style>