uniapp-ZHSQ/packages/jfShop/myOrder/index.vue

<template>
    <view class="order-detail-container">
        <!-- 商品信息 -->
        <view class="section">
            <h2 class="section-title">兑换商品</h2>
            <view class="goods-item" @click="viewGoodsDetail">
                <img :src="orderInfo.commodity_order_item_list[0].commodity_pic" alt="商品图片" class="goods-image">
                <view class="goods-info">
                    <h3 class="goods-name">{{ orderInfo.commodity_order_item_list[0].goods_name }}</h3>
                    <p class="goods-quantity">共{{ orderInfo.commodity_order_item_list[0].count }}件</p>
                </view>
                <uni-icons type="arrowright" size="24rpx" color="#999999"></uni-icons>
            </view>
        </view>

        <!-- 价格信息 -->
        <view class="section">
            <view class="price-item">
                <span class="price-label">商品总价</span>
                <span class="price-value">{{ orderInfo.total_amount }}积分</span>
            </view>
            <view class="price-item">
                <span class="price-label">运费</span>
                <span class="price-value">{{ orderInfo.freight }}积分</span>
            </view>
            <view class="price-item total-price">
                <span class="price-label">商品实付</span>
                <span class="price-value">{{ orderInfo.total_amount + orderInfo.freight }}积分</span>
            </view>
        </view>

        <!-- 收货地址 -->
        <view class="section">
            <h2 class="section-title">收货地址</h2>
            <view class="address-info">
                <p class="consignee">{{ orderInfo.receiving_name }}，{{ orderInfo.receiving_phone }}</p>
                <p class="address-detail">{{ orderInfo.receiving_address }}</p>
            </view>
        </view>

        <!-- 订单信息 -->
        <view class="section">
            <view class="order-info-item">
                <span class="info-label">订单编号</span>
                <view class="info-value">
                    <span>{{ orderInfo.order_no }}</span>
                    <view class="copy-btn" @click="copyOrderNo">复制</view>
                </view>
            </view>
            <view class="order-info-item">
                <span class="info-label">提交时间</span>
                <span class="info-value">{{ orderInfo.order_time }}</span>
            </view>
            <view class="order-info-item">
                <span class="info-label">成交时间</span>
                <span class="info-value">{{ orderInfo.order_time }}</span>
            </view>
        </view>

        <!-- 门店信息 -->
        <view class="section">
            <view class="store-card">
                <view class="store-info">
                    <h2 class="store-name">{{ orderInfo.merchant_info.merchant_name }}</h2>
                    <p class="store-address">{{ orderInfo.merchant_info.address }}</p>
                </view>
                <view class="nav-btn" @click="navigateToStore">
                    <image class="nav-image" src="https://static.hshuishang.com/jfNav.png" mode="" />
                    <span>导航</span>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { request, NavgateTo, picUrl } from "../../../utils";
import { apiArr } from "../../../api/pointShop";

export default {
    data() {
        return {
            orderInfo: {}
        };
    },
    onLoad(options) {
        if (options.order_id) {
            this.order_id = options.order_id;
            const params = {
                order_id: this.order_id
            }
            request(apiArr.pointOrderInfo, "POST", params).then(res => {
                // 处理商品图片路径
                if (res.commodity_order_item_list && res.commodity_order_item_list.length > 0) {
                    res.commodity_order_item_list.forEach(item => {
                        if (item.commodity_pic) {
                            item.commodity_pic = picUrl + item.commodity_pic;
                        }
                    });
                }
                this.orderInfo = res;
            });
        }
    },
    methods: {
        // 查看商品详情
        viewGoodsDetail() {
            const product = {
                id: this.orderInfo.commodity_order_item_list[0].commodity_id,
            }
            NavgateTo(`/packages/jfShop/detail/index?product=${JSON.stringify(product)}`);
        },

        // 复制订单编号
        copyOrderNo() {
            uni.setClipboardData({
                data: this.orderInfo.order_no,
                success: function () {
                    uni.showToast({
                        title: '复制成功',
                        icon: 'success'
                    });
                }
            });
        },

        // 导航到门店
        navigateToStore() {
            const store = this.orderInfo.merchant_info;
            if (store && store.latitude && store.longitude) {
                uni.openLocation({
                    latitude: parseFloat(store.latitude),
                    longitude: parseFloat(store.longitude),
                    name: store.merchant_name,
                    address: store.address,
                    success: function () {
                        console.log('打开地图成功');
                    },
                    fail: function (err) {
                        console.log('打开地图失败', err);
                        uni.showToast({
                            title: '打开地图失败',
                            icon: 'none'
                        });
                    }
                });
            } else {
                uni.showToast({
                    title: '门店位置信息不完整',
                    icon: 'none'
                });
            }
        }
    }
};
</script>

<style>
@import url('./index.css');
</style>