YXGJ/store/orderForm/detail.vue

<template>
    <view>
        <navigator :url="detail.status == '待付款' ? '/store/deliveryAddress/index?title=选择地址' : '#'" @click="toSelect"
            class="address-box" :hover-class="detail.status == '待付款' ? 'navigator-hover' : ''">
            <view class="empty" v-if="address.rec_contactsid == 0">
                请选择收货地址
            </view>
            <view class="contacts" v-else>
                <view class="label">
                    <text class="iconfont icon-dizhi-hui" />
                    <text style="margin-right: 10px;">
                        {{ address.delivery_name }}
                    </text>
                    <text>
                        {{ address.delivery_phonenumber }}
                    </text>
                </view>
                <view class="address">
                    {{ getCity(address) }}
                </view>
            </view>
            <view v-if="detail.status == '待付款'" class="iconfont icon-a-wodetiaozhuan" />
        </navigator>

        <view class="product">
            <u--image :src="detail.productCover" width="86" height="80" radius="8">
                <template v-slot:loading>
                    <u-loading-icon color="red"></u-loading-icon>
                </template>
            </u--image>
            <view class="content">
                <view class="title u-line-1">{{ detail.itemname }}</view>
                <view class="price-box">
                    总计
                    <text style="color: #E3041F;margin-left: 4px;">
                        ￥
                    </text>
                    <text class="price">
                        {{ CNY(detail.amount, '') }}
                    </text>
                    <text style="color: #E3041F;margin-left: 4px;">
                        元
                    </text>
                </view>
            </view>
        </view>

        <view class="store-info">
            <view class="title">
                门店
            </view>
            <view class="content">
                <u--image width="60" height="62" radius="8" :src="detail.storeCover" lazy-load>
                    <template v-slot:loading>
                        <u-loading-icon color="red"></u-loading-icon>
                    </template>
                </u--image>
                <view class="text-box" hover-class="navigator-hover" @click="goAtOnce(detail)">
                    <view class="storename u-line-1" :style="{ width: detail.leader_phonenumber ? '230px' : '100%' }">
                        {{ detail.storename }}
                    </view>
                    <view class="address u-line-1" :style="{ width: detail.leader_phonenumber ? '230px' : '100%' }">
                        <text class="iconfont icon-dizhi-hui" />{{ detail.store_address }}
                    </view>
                    <view v-if="detail.leader_phonenumber" @click.stop="callPhone(detail.leader_phonenumber)"
                        class="iconfont icon-dianhua" hover-class="navigator-hover" />
                </view>
            </view>
        </view>

        <view class="particulars">
            <view class="row">
                <view class="label">
                    订单编号
                </view>
                <view class="value">
                    {{ detail.sonum }} |
                    <text class="copy" @click="copy(detail.sonum, '订单编号')">
                        复制
                    </text>
                </view>
            </view>

            <view class="row">
                <view class="label">
                    创建时间
                </view>
                <view class="value">
                    {{ detail.createdate }}
                </view>
            </view>
        </view>

        <view class="footer">
            <view class="content">
                <view class="price-box">
                    总计:
                    <view class="price">
                        {{ CNY(detail.amount) }}
                    </view>
                </view>
                <view class="submit" :class="address.contactsid == 0 || loading ? 'forbidden' : ''"
                    hover-class="navigator-hover" @click="address.contactsid == 0 || loading ? '' : submit()">
                    <u-loading-icon v-if="loading" />
                    <block v-else>
                        支付
                    </block>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            sa_custorderid: 0,
            detail: {},
            address: {
                delivery_name: "",
                delivery_phonenumber: "",
                rec_contactsid: "",
                province: "",
                city: "",
                county: "",
                address: "",
            }
        }
    },
    onLoad(options) {
        this.sa_custorderid = options.id;
        this.getDetail()
        uni.setNavigationBarTitle({
            title: '订单详情'
        });
    },
    methods: {
        getDetail() {
            this.$Http.basic({
                "id": 20240429152602,
                "content": {
                    "sa_custorderid": this.sa_custorderid
                },
            }).then(res => {
                console.log("订单详情", res)
                res.data.storeCover = res.data.attinfos_store.length ? this.getSpecifiedImage(res.data.attinfos_store[0]) : uni.getStorageSync('site').logo || ''
                for (const key in this.address) {
                    this.address[key] = res.data[key]
                }
                res.data.productCover = res.data.attinfos.length ? this.getSpecifiedImage(res.data.attinfos.find(s => s.usetype == "sa_fad") || v.attinfos[0]) : uni.getStorageSync("site").logo || ''
                this.detail = res.data;
            })
        },
        toSelect() {
            this.$Http.selectAddress = function (address) {
                address.delivery_name = address.name;
                address.delivery_phonenumber = address.phonenumber;
                address.rec_contactsid = address.contactsid;
                this.address = address;
                uni.navigateBack();
                delete this.$Http.selectAddress
                this.loading = true;
                this.$Http.basic({
                    "id": 20240429152502,
                    "content": {
                        "sa_custorderid": this.detail.sa_custorderid,
                        "items": [
                            {
                                "sa_fadid": this.detail.sa_fadid,
                                "qty": this.detail.qty
                            }
                        ],
                        "rec_contactsid": address.contactsid,
                        "sys_enterpriseid": this.detail.sys_enterpriseid,
                        "sa_storeid": this.detail.sa_storeid,
                        "remarks": this.detail.remarks
                    },
                }).then(res => {
                    console.log("编辑", res)
                })

            }.bind(this)
        },
        copy(data, title) {
            uni.setClipboardData({
                data,
                success: (result) => {
                    uni.showToast({
                        title: "已复制" + title,
                        icon: "none",
                        duration: 1500,
                    })
                }
            });
        },
        goAtOnce(item) {
            uni.openLocation({
                latitude: item.latitude - 0,
                longitude: item.longitude - 0,
                address: item.address,
                name: item.storename,
                success: function () {
                    console.log('success');
                },
                fail: (fail) => {
                    console.log('fail', fail)
                },
            });
        },
    },
}
</script>

<style lang="scss" scoped>
.address-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    width: 100vw;
    height: 64px;
    background: #FFFFFF;
    padding: 0 10px;
    box-sizing: border-box;

    .empty {
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-size: 14px;
        color: #333333;
    }

    .price {
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-size: 16px;
        color: #E3041F;
    }

    .contacts {
        .label {
            line-height: 20px;
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-weight: bold;
            font-size: 14px;
            color: #000000;

            .iconfont {
                font-size: 12px;
                color: #333333;
                margin-right: 5px;
            }
        }

        .address {
            line-height: 17px;
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-size: 12px;
            color: #666666;
            margin-top: 7px;
        }
    }

}

.product {
    display: flex;
    width: 100vw;
    background: #fff;
    padding: 10px;
    box-sizing: border-box;
    margin-top: 10px;

    .content {
        margin-left: 20px;
        flex: 1;
        height: 100%;

        .title {
            line-height: 24px;
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-weight: bold;
            font-size: 16px;
            color: #333333;
            margin-top: 10px;
        }

        .price-box {
            margin-top: 10px;
            font-size: 12px;
            color: #333333;

            .price {
                color: #E3041F;
                font-size: 18px;
                font-weight: bold;
            }
        }
    }
}

.store-info {
    background: #fff;
    padding: 10px;
    padding-top: 12px;
    margin-top: 10px;

    .title {
        line-height: 22px;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 16px;
        color: #333333;
    }

    .content {
        display: flex;
        margin-top: 11px;

        .text-box {
            position: relative;
            flex: 1;
            height: 62px;
            background: #F5F5F5;
            border-radius: 5px;
            margin-left: 10px;
            box-sizing: border-box;
            padding: 10px;

            .storename {
                line-height: 20px;
                font-family: PingFang SC, PingFang SC;
                font-size: 14px;
                color: #333333;
            }

            .address {
                .iconfont {
                    font-size: 12px;
                    margin-right: 4px;
                }

                line-height: 17px;
                font-family: PingFang SC,
                PingFang SC;
                font-size: 12px;
                color: #888888;
                margin-top: 5px;
            }

            .icon-dianhua {
                position: absolute;
                right: 20px;
                top: 20px;
                font-size: 20px;
                color: #C30D23;
            }
        }
    }
}

.particulars {
    width: 100vw;
    background: #fff;
    margin-top: 10px;
    padding: 10px;
    box-sizing: border-box;

    .row {
        display: flex;
        align-items: center;
        margin-top: 14px;

        .label {
            line-height: 20px;
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-size: 14px;
            color: #333333;
            width: 100px;
        }

        .value {
            flex: 1;
            text-align: right;
            line-height: 24px;
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-size: 16px;
            color: #333333;

            .copy {
                margin-left: 5px;
                color: #999999;
            }
        }

    }

    .row:first-child {
        margin-top: 0;
    }
}

.footer {
    position: fixed;
    width: 100vw;
    height: 65px;
    background: #FFFFFF;
    box-shadow: 0px -2px 6px 1px rgba(0, 0, 0, 0.16);
    bottom: 0;
    left: 0;
    padding: 10px;
    padding-top: 5px;
    box-sizing: border-box;

    .content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 45px;
        width: 100%;

        .price-box {
            display: flex;
            font-size: 14px;
            color: #333333;

            .price {
                color: #E3041F;
                font-size: 16px;
                font-weight: bold;
            }
        }

        .submit {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            height: 45px;
            background: #C30D23;
            border-radius: 5px;
            font-family: PingFang SC, PingFang SC;
            font-size: 14px;
            color: #FFFFFF;
        }
    }

}
</style>