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-tabs keyName="brand" :list="receiptList" @click="clickReceipt"></u-tabs>


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



        <!-- 加一单选择模态窗 -->
        <u-modal :show="addOneModelShow" :title="'加一单'" showCancelButton @cancel="addOneModelShow = false"
            @confirm="handleAddOneConfirm">
            <!-- 品牌选择按钮 -->
            <u-button type="primary" plain @click="showBrandSelector = true;"
                :text="currentAddBrand.dictLabel || '点击请选择品牌'"></u-button>
            <!-- 物品选择按钮 -->
        </u-modal>

        <!-- 加一单品牌选择器 -->
        <u-picker :show="showBrandSelector" @confirm="handleBrandConfirm" :columns="brandColumns"
            @cancel='showBrandSelector = false' keyName="dictLabel"></u-picker>



        <!-- 修改当前品牌选择器 -->
        <u-picker :show="editBrandSelector" @confirm="handleEditBrandConfirm" :columns="brandColumns"
            @cancel='editBrandSelector = false' keyName="dictLabel"></u-picker>


        <!-- 修改当前型号、价格弹窗 -->
        <custom-modal :visible="modalVisible" :title="modalConfig.title" :value="modalConfig.value"
            :placeholder="modalConfig.placeholder" @cancel="handleModalCancel" @confirm="handleModalConfirm" />
    </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: '',
                model: '',
                price: ''
            },
            currentEditField: '',
            modalConfig: {
                title: '',
                value: '',
                placeholder: ''
            },
            item: '',
            orderId: '',
            type: '',
            clueId: '',
            // 订单详情
            receiptDetail: {},

            //接单单个订单的receiptList
            receiptList: [],
            //当前选中的收单订单
            currentReceipt: {},
            // 新加一件的信息
            addOneModelShow: false,
            showBrandSelector: false,
            checkModel: {
                brand: '',
            },
            brandColumns: [
                []
            ],
            //当前选择的品牌
            currentAddBrand: {},
            //修改当前品牌选择器
            editBrandSelector: false,
            modalVisible: false,
        }
    },
    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() {
            //修改当前选中订单的品牌brand
            //打开品牌选择器
            this.editBrandSelector = true

            //获取品牌列表
            this.$getDicts('crm_form_brand').then(res => {
                this.brandColumns = [res]
            })
        },
        handleModelClick() {
            //修改当前选中订单的型号model
            //打开型号修改弹窗
            this.modalConfig = {
                title: '修改型号',
                value: this.currentReceipt.model,
                placeholder: '请输入型号'
            }
            this.currentEditField = 'model'
            this.modalVisible = true

        },
        handlePriceClick() {
            //修改当前选中订单的价格sellingPrice
            //打开价格修改弹窗
            this.modalConfig = {
                title: '修改价格',
                value: this.currentReceipt.sellingPrice?.toString(),
                placeholder: '请输入价格'
            }
            this.currentEditField = 'price'
            this.modalVisible = true
        },

        async handleModalConfirm(value) {
            console.log('修改的当前的', this.currentEditField, '是', value)
            if (this.currentEditField === 'model') {
                //修改当前选中receiptDetail的型号
                const res = await uni.$u.api.updateReceiptForm({
                    model: value,
                    id: this.currentReceipt.id
                });
                if (res.code == 200) {
                    uni.$u.toast('修改成功')
                }
            } else if (this.currentEditField === 'price') {
                //修改当前选中receiptDetail的价格
                const res = await uni.$u.api.updateReceiptForm({
                    sellingPrice: value,
                    id: this.currentReceipt.id
                });
                if (res.code == 200) {
                    uni.$u.toast('修改成功')
                }
            }
            this.getReceiptList();
            this.modalVisible = false
        },
        handleModalCancel() {
            this.modalVisible = false
        },


        async handleAddClick() {

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

            this.$getDicts('crm_form_brand').then(res => {
                console.log('品牌', res)
                this.brandColumns = [res]
            })
        },
        async handleEditBrandConfirm(data) {
            console.log('修改的当前的品牌是', data.value[0])
            console.log('修改的当前的品牌的value是', data.value[0].dictValue)

            //修改当前选中receiptDetail的品牌
            const res = await uni.$u.api.updateReceiptForm({
                brand: data.value[0].dictValue,
                id: this.currentReceipt.id
            });
            if (res.code === 200) {
                uni.$u.toast('修改成功')
            }
            this.getReceiptList();
            this.editBrandSelector = false
        },
        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 || [];
            }

            // this.currentReceipt = this.receiptList[0] || {};
            this.clickReceipt(this.receiptList[0])
        },
        clickReceipt(item) {
            // console.log('点击了', item);
            this.currentReceipt = item;
            console.log(item)
            this.topInfo.brand = item.brand || '暂无';
            this.topInfo.model = item.model || '暂无';
            this.topInfo.price = item.sellingPrice || '暂无';
        },
        async handleAddOneConfirm() {
            console.log('确认添加', this.currentAddBrand)

            //调新加一单的接口
            await uni.$u.api.addReceiptForm({
                brand: this.currentAddBrand.dictValue,
                sendFormId: this.orderId,
                clueId: this.clueId
            })
            //刷新收单列表
            this.getReceiptList();
            //关闭模态窗
            this.addOneModelShow = false
        }
    }
}
</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>