YXGJ/cloud/winningNews/detail.vue

<template>
    <view>
        <view class="item">
            <view class="text">
                <view class="title u-line-2">{{ detail.awardname || '--' }}</view>
                <view class="count u-line-1">
                    <text style="margin-right: 118px">类型：{{ detail.type || '--' }}</text>
                    <text>金额：{{ CNY(detail.price, '', false) || '--' }}元</text>
                </view>
                <view class="count u-line-1">来源：{{ detail.awardheadname || '--' }}</view>
            </view>
        </view>
        <view class="head">
            收货信息
        </view>

        <view class="row">
            <view class="label">
                姓名
            </view>
            <view class="value">
                {{ detail.name || '--' }}
            </view>
        </view>

        <view class="row">
            <view class="label">
                手机号
            </view>
            <view class="value">
                {{ detail.phonenumber || '--' }}
            </view>
        </view>

        <view class="row">
            <view class="label">
                地址
            </view>
            <view class="value">
                {{ getCity(detail) || '--' }}
            </view>
        </view>

        <view style="height: 70px;" />
        <view class="footer">
            <view class="add" hover-class="navigator-hover" @click="toEdit">
                编辑收货信息
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            detail: {},
        }
    },
    onLoad(options) {
        this.detail = JSON.parse(options.data);
        console.log("options", this.detail)
    },
    onUnload() {
        delete this.$Http.changeItem;
    },
    methods: {
        toEdit() {
            let that = this;
            uni.navigateTo({
                url: '/store/deliveryAddress/index?tips=奖项根据收货信息发放，请选择并提交收货地址'
            })
            that.$Http.selectAddress = (item) => {
                uni.showModal({
                    title: '提示',
                    content: `是否确定选择“${item.address}”作为收货地址?`,
                    success: (success) => {
                        if (success.confirm) that.$Http.basic({
                            id: "2024052910464202",
                            content: {
                                sa_awardmxid: that.detail.sa_awardmxid,
                                name: item.name,
                                phonenumber: item.phonenumber,
                                province: item.province,
                                city: item.city,
                                county: item.county,
                                address: item.address,
                            }
                        }).then(s => {
                            if (that.cutoff(s.msg, '设置成功', true, '1000')) return;
                            that.detail.name = item.name;
                            that.detail.phonenumber = item.phonenumber;
                            that.detail.province = item.province;
                            that.detail.city = item.city;
                            that.detail.county = item.county;
                            that.detail.address = item.address;
                            that.$Http.changeItem && that.$Http.changeItem(that.detail)
                        })
                    },
                })
            }
        }
    },
}
</script>

<style lang="scss" scoped>
.item {
    display: flex;
    width: 355px;
    border-radius: 5px;
    overflow: hidden;
    background: #FFFFFF;
    padding: 10px;
    box-sizing: border-box;
    margin: 10px;

    .text {
        flex: 1;
        font-family: Source Han Sans SC, Source Han Sans SC;

        .title {
            font-weight: bold;
            font-size: 14px;
            color: #333333;
            line-height: 24px;
        }

        .count {
            font-size: 12px;
            color: #999999;
            line-height: 17px;
            margin-top: 8px;
        }
    }

}

.head {
    width: 375px;
    height: 45px;
    line-height: 45px;
    padding-left: 10px;
    box-sizing: border-box;
    background: #FFFFFF;
    font-family: PingFang SC, PingFang SC;
    font-size: 16px;
    font-weight: bold;
    color: #333333;
}

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

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

    .value {
        width: 355px;
        line-height: 20px;
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-size: 14px;
        color: #000000;
        margin-top: 10px;
    }
}

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

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

    .forbidden {
        opacity: .6;
    }
}
</style>