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

<template>
    <view>
        <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
                    }}<text style="color: #409eef" @click="copyToClipboard(detail.waybillCode)">(单号：{{
                        detail.waybillCode }})</text></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"
                        @click="handleWeixin"></u-icon>
                    <u-icon v-if="detail.orderFrom == 2" name="zhifubao-circle-fill" size="18" color="#999"
                        @click="handleWeixin"></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 :show="showModal" title="编辑内部备注" :showCancelButton="true" @confirm="confirmRemark"
            @cancel="handleCancel">
            <view class="modal-content w100" @click="playGlobalSound">
                <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>

        <u-action-sheet :show="showActionSheet" :show-cancel="true" :actions="actionSheetActions" title="发送短信"
            @close="closeActionSheet" @select="selectAction">
        </u-action-sheet>

        <!-- 短信推送弹窗 -->
        <SmsModal ref="smsModalRef" v-model="showSmsModal" @success="handleSmsSuccess" />
    </view>
</template>

<script setup>
import { defineProps, computed, ref, watch } from "vue";
import SmsModal from "./SmsModal.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]
        : "";
});

function playGlobalSound() {
    uni.$u.playClickSound();
}

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 handleCancel() {
    showModal.value = false;
    playGlobalSound();
}

const emit = defineEmits(["refresh"]);
function confirmRemark() {
    playGlobalSound();
    // 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;
                emit("refresh");
            } else {
                uni.$u.toast(res.msg);
            }
        });
}

// ActionSheet相关变量和方法
const showActionSheet = ref(false);
const actionSheetActions = ref([
    {
        name: "发送短信（手机发送）",
        value: "sms",
    },
    {
        name: "一键发送短信（服务器发送）",
        value: "server_sms",
    },
    {
        name: "QQ",
        value: "qq",
    },
    {
        name: "微信",
        value: "wechat",
    },
    {
        name: "取消",
        value: "cancel",
    },
]);

// 处理微信图标点击
function handleWeixin() {
    playGlobalSound();
    showActionSheet.value = true;
}

// 关闭ActionSheet
function closeActionSheet() {
    showActionSheet.value = false;
}

// 选择ActionSheet选项
function selectAction(item) {
    playGlobalSound();
    showActionSheet.value = false;

    if (item.value === "server_sms") {
        // 发送短信功能
        handleSendSMS();
    } else if (item.value == "cancel") {
        closeActionSheet()
    } else {
        // 其他功能暂无开放
        uni.showToast({
            title: "此功能暂无开放",
            icon: "none",
        });
    }
}

// 短信弹窗相关
const showSmsModal = ref(false);
const smsModalRef = ref();

// 发送短信功能
function handleSendSMS() {
    playGlobalSound();

    // 打开短信弹窗
    if (smsModalRef.value && props.detail.orderId) {
        smsModalRef.value.handleOpen(props.detail.orderId);
    } else {
        uni.showToast({
            title: "订单信息异常",
            icon: "none",
        });
    }
}

// 短信发送成功回调
function handleSmsSuccess() {
    uni.showToast({
        title: "短信发送成功",
        icon: "success",
    });
    uni.$u.ttsModule.speak("短信发送成功");
}
</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>