shuhi-app/pages/index/detail/components/OrderInfo.vue

<template>
    <view class="order-info bg-white">
        <view class="info-item flex">
            <text class="label">订单编号</text>
            <text style="color:#22ac38" class="flex-1 text-center content" @click="copyToClipboard(detail.orderId)">{{
                detail.orderId }}</text>
        </view>
        <view class="info-item">
            <text class="label">预估金额</text>
            <text class="content">{{ detail.expectMoney }}</text>
            <text class="label border-left">审核金额</text>
            <text class="content">{{ detail.finalMoney }}</text>
        </view>
        <view class="info-item">
            <text class="label">用户备注</text>
            <text class="content">{{ detail.userRemark}}</text>
        </view>
        <view class="info-item" @click="handleRemark">
            <text class="label">内部备注</text>
            <text class="content">{{ detail.manageRemark ? detail.manageRemark.length > 0 ?
                detail.manageRemark[0]?.remark: ' ' : ' ' }}</text>
        </view>
        <view class="info-item">
            <text class="label">订单状态</text>
            <text class="content" style="color: #c5493e;">[{{ statusText }}]</text>
        </view>
        <view class="info-item">
            <text class="label">快递</text>
            <text class="content">{{ finalExpressText }}(单号：{{ detail.waybillCode }})</text>
        </view>
        <view class="info-item">
            <text class="label">发件人<text style="color: #e99d42;">(所有单)</text></text>

            <view class="content flex flex-a-c flex-j-c">
                <text class="content-text" @click="copyToClipboard(detail.sendMobile)">复制</text>
                <text class="content-text ml-10 mr-10">{{ maskedSendMobile }}</text>
                <u-icon v-if="detail.orderFrom == 1" name="weixin-circle-fill" size="18" color="#22ac38"></u-icon>
                <u-icon v-if="detail.orderFrom == 2" name="zhifubao-circle-fill" size="18" color="#999"></u-icon>
            </view>
        </view>
        <view class="info-item">
            <text class="label">发货地址</text>
            <text class="content">{{ detail.sendAddress }}</text>
        </view>
        <view class="info-item">
            <text class="label">收货仓库</text>
            <text class="content">{{ detail.recipientAddress }}-{{ detail.recipientGodown }}-{{ detail.recipientName
                }}</text>
        </view>
    </view>
    <u-modal v-model:show="showModal" title="编辑内部备注" :showCancelButton="true" @confirm="confirmRemark">
        <view class="modal-content w100">
            <u-textarea v-model="internalRemark" placeholder="编辑内部备注" autoHeight
                style="min-height: 100px;"></u-textarea>

            <view class="mt-20 common-title">快速填入</view>
            <view class="quick-fill mt-16">
                <u-tag class="mr-10 mb-10" @click="fillRemark('少书给客服')" text="少书给客服"></u-tag>
                <u-tag class="mr-10 mb-10" @click="fillRemark('多书给客服')" text="多书给客服"></u-tag>
                <u-tag class="mr-10 mb-10" @click="fillRemark('子母件')" text="子母件"></u-tag>
                <u-tag class="mr-10 mb-10" @click="fillRemark('书单不符给客服')" text="书单不符给客服"></u-tag>
                <u-tag class="mr-10 mb-10" @click="fillRemark('需理赔给客服')" text="需理赔给客服"></u-tag>
            </view>
        </view>
    </u-modal>
</template>

<script setup>
import { defineProps, computed, ref, watch } from 'vue';

const props = defineProps({
    orderId: String,
    estimatedAmount: Number,
    userNote: String,
    detail: Object,
    // Add more props as needed
});

let finalExpressList = { '1': '顺丰快递', '2': '京东快递', '3': '德邦快递' }
let finalExpressText = computed(() => {
    return props.detail.finalExpress ? finalExpressList[props.detail.finalExpress] : ''
});

const statusEnum = {
    0: '创建',
    1: '用户删除',
    2: '下单(待初审)',
    3: '初审(待取书)',
    4: '初审未通过',
    5: '快递取书(待签收)',
    6: '快递签收(待收货)',
    7: '物流签收(路由异常)',
    8: '仓库收货(待审核)',
    9: '审核中(审核未提交)',
    10: '已审核(待付款)',
    11: '已完成'
};

let statusText = computed(() => {
    return statusEnum[props.detail.status] || '未知状态';
});

const maskedSendMobile = computed(() => {
    if (props.detail.sendMobile && props.detail.sendMobile.length === 11) {
        return props.detail.sendMobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
    }
    return props.detail.sendMobile;
});

function copyToClipboard(text) {
    uni.setClipboardData({
        data: text,
        success: function () {
            uni.showToast({
                title: '复制成功',
                icon: 'success'
            });
        },
        fail: function (err) {
            console.error('Could not copy text: ', err);
        }
    });
}

const showModal = ref(false);
const internalRemark = ref('');

function fillRemark(text) {
    internalRemark.value = text;
}

const remarkInfo = ref({});
function handleRemark() {
    showModal.value = true;
    remarkInfo.value = props.detail.manageRemark?.[0] || {};
    internalRemark.value = remarkInfo.value.remark || '';
}

function confirmRemark() {
    // Logic to save the remark
    uni.$u.http.post('/app/orderinfo/setManageRemark', {
        orderId: props.detail.orderId,
        remark: internalRemark.value,
        id: remarkInfo.value.id
    }).then(res => {
        if (res.code == 200) {
            uni.$u.toast('保存成功')
            uni.$u.ttsModule.speak('保存成功')
            showModal.value = false;
            getOrderDetail()
        } else {
            uni.$u.toast(res.msg)
        }
    })
}
</script>

<style lang="scss" scoped>
.order-info {
    .info-item {
        display: flex;
        align-items: center;
        line-height: 42rpx;
        border-bottom: 1rpx solid #e5e5e5;
        font-size: 28rpx;
    }

    .label {
        width: 120px;
        text-align: center;
        padding: 20rpx 0;
        height: 100%;
    }

    .content {
        text-align: center;
        padding: 20rpx 20rpx;
        flex: 1;
        border-left: 1rpx solid #e5e5e5;
        min-height: 42px;
        box-sizing: border-box;
    }

    .border-left {
        border-left: 1rpx solid #e5e5e5;
    }

    .quick-fill {
        display: flex;
        flex-wrap: wrap;
        gap: 20rpx;

        .u-tag {
            margin: 0 10rpx 10rpx 0;
        }
    }
}
</style>