book-hi/pages-mine/pages/apply.vue

<template>
    <view class="apply-page">
        <view class="common-card flex-a flex-j-b mb-20" @click="handleAddress" v-if="defaultAddr.id">
            <image src="../../pages-mine/static/adderss.png" style="width:40rpx;height: 40rpx;"></image>
            <view class="flex-d flex-1 ml-24" style="margin-right: 90rpx;">
                <view class="flex-a flex-j-b  mb-10">
                    <view :style="titleStyle">{{ defaultAddr.name }}</view>
                    <view :style="titleStyle">{{ defaultAddr.mobile }}</view>
                </view>
                <view :style="titleStyle">地址：{{ defaultAddr.fullAddress }}</view>
            </view>
            <u-icon name="arrow-right" :size="28" color="#666" top="4"></u-icon>
        </view>
        <!-- 退回地址 -->
        <view v-else class="common-card flex-a flex-j-b mb-20" @click="handleAddress">
            <view class="flex-a">
                <u-icon name="plus-circle-fill" size="50" color="#38C148"></u-icon>
                <text class="required">退回地址</text>
            </view>
            <view class="flex-a">
                <view class="flex-d mr-10 flex-a-e">
                    <text class="common-text-2 font-28">请添加</text>
                    <text class="common-text font-24">提交后无法修改</text>
                </view>
                <u-icon name="arrow-right" size="32" color="#666666"></u-icon>
            </view>
        </view>

        <view class="common-card flex-a flex-j-b mb-20" style="padding: 30rpx;" @click="selectBooks">
            <text class="required">选择退回书籍</text>
            <view class="flex-a">
                <text class="common-text-2 font-26">请选择</text>
                <u-icon name="arrow-right" size="32" color="#666666"></u-icon>
            </view>
        </view>

        <!-- 退回书籍 -->
        <view class="common-card mb-20">
            <view class="common-title mb-20"> <text>订单编号: {{ orderId }}</text></view>

            <!-- 书籍列表 -->
            <detail-book-item :book="item" v-for="(item, index) in bookItems" isReturn :key="index" />
        </view>

        <view class="common-card" style="padding: 30rpx;" @click="selectBooks">
            <view class="flex-a flex-j-b mb-20">
                <text class="common-text-2 font-30">退回邮费：</text>
                <text class="common-title" style="color: #FF0000;">首次免费退回/￥33.00</text>
            </view>
            <view class="common-card flex-a flex-j-b" style="background: #fafafa;">
                <text class="common-text-2">书籍数量</text>
                <text class="common-text-2">3</text>
            </view>
        </view>

        <view class="bottom-fixed-con">
            <u-button type="primary">确认退回</u-button>
        </view>
    </view>
</template>

<script>
import OrderItem from '../components/order-item.vue'
import detailBookItem from '../components/detail-book-item.vue';

export default {
    components: {
        OrderItem,
        detailBookItem
    },

    data() {
        return {
            defaultAddr: {},
            orderId: '54631435441',
            bookItems: [
                {
                    cover: 'https://img3.doubanio.com/lpic/s1076932.jpg',
                    bookName: '这里是书本名称bu换行',
                    recycleMoney: '32.20',
                    num: 2,
                    suit: 1,
                    auditList: [
                        { status: '良好', price: '32.20', auditReason: '原因:笔记杂乱/习题做完' },
                        { status: '不通过', price: '32.20', auditReason: '原因:笔记杂乱/习题做完' },
                        { status: '良好', price: '32.20', auditReason: '原因:笔记杂乱/习题做完' },
                    ]
                },
                {
                    cover: 'https://img3.doubanio.com/lpic/s1076932.jpg',
                    bookName: '这里是书本名称bu换行',
                    recycleMoney: '32.20',
                    num: 2,
                    suit: 1,
                    auditList: [
                        { status: '良好', price: '32.20', auditReason: '原因:笔记杂乱/习题做完' },
                        { status: '不通过', price: '32.20', auditReason: '原因:笔记杂乱/习题做完' },
                        { status: '良好', price: '32.20', auditReason: '原因:笔记杂乱/习题做完' },
                    ]
                },
                {
                    cover: 'https://img3.doubanio.com/lpic/s1076932.jpg',
                    bookName: '这里是书本名称bu换行',
                    recycleMoney: '32.20',
                    num: 2,
                    suit: 1,
                    auditList: [
                        { status: '良好', price: '32.20', auditReason: '原因:笔记杂乱/习题做完' },
                        { status: '不通过', price: '32.20', auditReason: '原因:笔记杂乱/习题做完' },
                        { status: '良好', price: '32.20', auditReason: '原因:笔记杂乱/习题做完' },
                    ]
                },
            ]
        }
    },

    methods: {
        addAddress() {
            // 添加地址逻辑
        },

        selectBooks() {
            // 选择书籍逻辑
        },

        //添加或者选择地址
        handleAddress() {
            uni.navigateTo({
                url: `/pages-mine/pages/address/list?id=${this.defaultAddr.id}&isSelect=1`
            })
        },

    },
    mounted() {
        uni.$on('selectAddr', (item) => {
            if (item.id) {
                this.defaultAddr = item
            }
        })
    }
}
</script>

<style lang="scss" scoped>
.apply-page {
    min-height: 100vh;
    background: #f5f7fa;
    padding: 20rpx;
    padding-bottom: calc(env(safe-area-inset-bottom) + 130rpx);

    .required {
        font-size: 32rpx;
        color: #333;
        font-weight: 400;
        position: relative;
        margin-left: 10rpx;

        &::after {
            content: '*';
            color: #fa3534;
            margin-left: 4rpx;
        }
    }
}
</style>