crm-app-vue3/pages/orderDetailNew/components/orderDetailNewView.vue

<template>
    <view class="orderDetailNewView">

        <view class="page-item" v-show="activeIndex === 0">
            <pageOne @handleNextClick="handleNextClick" :orderDetail="detail" />
        </view>
        <view class="page-item" v-show="activeIndex === 1">
            <pageTwo @handleNextClick="handleNextClick" :orderDetail="detail" />
        </view>
        <view class="page-item" v-show="activeIndex === 2">
            <pageThree @handleNextClick="handleNextClick" :detailImages="allFroms.formTwo.detailImages || []"
                :orderDetail="detail" @handleNeedSave="handleNeedSave" />
        </view>
        <view class="page-item" v-show="activeIndex === 3">
            <pageFour @handleNextClick="handleNextClick" :orderDetail="detail" />
        </view>

        <ul class="page">
            <li v-for="(tab, index) in tabs" :key="index" :class="{ 'active': activeIndex === index }"
                @click="activeIndex = index">{{ tab }}</li>
        </ul>
    </view>
</template>

<script>
import pageOne from './pageOne.vue'
import pageTwo from './pageTwo.vue'
import pageThree from './pageThree.vue'
import pageFour from './pageFour.vue'
export default {
    props: {
        detail: {
            type: Object,
            default: () => { },
        }
    },
    components: {
        pageOne,
        pageTwo,
        pageThree,
        pageFour
    },
    data() {
        return {
            activeIndex: 0,
            tabs: ['一', '二', '三', '四'],
            allFroms: {
                formOne: {},
                formTwo: {},
                formThree: {},
                formFour: {},
            },
            pageThreeForm: {}
        }
    },
    name: 'OrderDetailNewView',
    methods: {
        handleNextClick({ nowPage, form }) {
            this.activeIndex++
            this.allFroms[nowPage] = form
            console.log("all page data:", this.allFroms[nowPage])
        },
        // 支付前保存数据
        async saveData() {
            await uni.$u.api.addReceiptForm({
                "searchValue": this.detail.searchValue,
                "createBy": this.detail.createBy,
                "createTime": this.detail.createTime,
                "updateBy": this.detail.updateBy,
                "updateTime": this.detail.updateTime,
                // "remark": ,    //发单备注，先不传
                "params": this.detail.params,     //看接口文档
                "id": this.detail.receiptId,
                // "sendFormId": "25", //接单中心的id
                "clueId": this.detail.clueId,
                "item": this.detail.item,
                "brand": this.detail.brand,
                // "needCheckCode": 1,   //先不传
                // "code": null,         //先不传
                // "paymentAmount": null, //支付总额page3 先不传
                "phone": this.detail.phone,
                "tableFee": this.pageThreeForm.paymentAmount,//page3支付总额
                // "benefitFee": 200,     //好处费page4加上
                // "freight": 30,         //运费page4加上
                // "checkCodeFee": null,  //查码费
                // "totalCost": "60230.00",   // 成本合计 =   运费 + 好处费 + 查码费 + 表款(支付总额) + 维修费。
                // "sellingPrice": 90002,   //实际价格（售价）顶上tab里面的第三栏
                // "performance": "29772.00",  //sellingPrice - totalCost
                // "receiptRemark":     //"收单之后还需再跟进", 先不传
                // "repairAmount": null, //维修总金额 ，先不传
                // "grossPerformance": "7443.00",   //毛利 performance*splitRatio
                // "expressOrderNo": null,   //快递单号+后续加上一个键加上图url
                // "fileIds": "",  //传第三部里面排序完成之后的id的数组，参考编辑收单里面的附件传的方法
                "model": this.detail.model,
                // "splitRatio": "25",   //分成比例，先不传
                "customerServiceName": "1", //默认传1，判断入库的类型，回收类入库，销售类入库，维保类入库，第四步传，增加选项下拉
                "deptId": this.detail.deptId,
                "category": this.detail.category,
                "delFlag": this.detail.delFlag,
                "idCard": this.pageThreeForm.idNumber,
                "paymentMethod": '小葫芦线上支付',     //支付方式，如果是app里面默认传‘小葫芦线上支付’
                "bankCardNumber": this.pageThreeForm.bankAccount,
                "bankName": this.pageThreeForm.bankName,
                "customName": this.pageThreeForm.customName,
            });
        },
        // 保存实物图数据
        saveDetailImagesData() {
            // 上传二进制文件
            this.allFroms.formOne.truePic.forEach(async (item) => {
                await uni.$u.api.uploadFile(item);
            })
        },// 保存聊天图数据
        saveChatPicData() {
            this.allFroms.formOne.truePic.forEach(async (item) => {
                await uni.$u.api.uploadFile(item);
            })
        },// 保存高清图数据
        saveHighDefinitionPicData() {
            this.allFroms.formOne.truePic.forEach(async (item) => {
                await uni.$u.api.uploadFile(item);
            })
        },
        handleNeedSave({ nowPage, form }) {
            console.log("nowPage:", nowPage)
            console.log("pageThreeForm:", form)
            this.pageThreeForm = form;

            //调用接口保存收单表单
            this.saveData();
            this.saveDetailImagesData();
        }

    }
}


</script>

<style scoped>
.orderDetailNewView {
    padding: 20rpx;
}

.page {
    position: fixed;
    right: 20rpx;
    top: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    list-style: none;
    color: #000;
    font-size: 20rpx;
    font-weight: 800;

    li {
        opacity: 0.7;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        border-radius: 50%;
        width: 70rpx;
        height: 70rpx;
        line-height: 80rpx;
        text-align: center;
        margin-bottom: 10rpx;
        transition: all 0.3s ease-in-out;
        font-weight: 800;
    }

    li.active {
        color: #fff;
        opacity: 1;
        background-color: rgb(37 99 235 / 1);
    }
}
</style>