jiuyiUniapp/jiuyi/pages/shop/refund/index.vue

<!-- 申请退货退款 -->
<template>
    <view class="jy-return-refund">
        <!-- 商品信息 -->
        <JyCommodityInformation :showType="1" class="mb20"></JyCommodityInformation>
        <uni-section>
            <template v-slot:decoration>
                <text class="decoration">申请类型</text>
            </template>
            <template v-slot:content>
                <text class="content">我要退款（无需退货）</text>
            </template>
            <template v-slot:right>
                <uni-icons type="right"></uni-icons>
            </template>
        </uni-section>
        <uni-section class="mb20" @click="reasonPopup.open()">
            <template v-slot:decoration>
                <text class="decoration">申请原因</text>
            </template>
            <template v-slot:content>
                <text :class="['content', !postData.reason && 'noContent']">{{ postData.reason ? postData.reason :
                    '点击选择申请原因' }}</text>
            </template>
            <template v-slot:right>
                <uni-icons type="right"></uni-icons>
            </template>
        </uni-section>
        <uni-section class="application_amount mb20">
            <template v-slot:content>
                <view class="jy-return-type">
                    <text class="decoration">申请金额</text>
                    <view class="df">
                        <text>￥</text>
                        <uni-easyinput v-if="!disabled" v-model="postData.priceNum" type="number"
                            :disabled="disabled"></uni-easyinput>
                        <text v-else>{{ postData.priceNum }}</text>
                    </view>
                </view>
            </template>
            <template v-slot:right>
                <uni-icons type="compose" @click="changeDisabled">{{ disabled ? '修改金额' : '确定修改' }}</uni-icons>
            </template>
        </uni-section>
        <uni-section class="mb20">
            <template v-slot:decoration>
                <view class="jy-return-type" style="width: 100%;">
                    <text class="decoration">申请说明</text>
                    <view>
                        <uni-easyinput type="textarea" autoHeight :inputBorder="false" v-model="value"
                            placeholder="必填，请您详细填写申请说明" maxlength="300"></uni-easyinput>
                        <uni-file-picker limit="9" class="uni-file-picker" :imageStyles="{
                            width: '150rpx',
                            height: '150rpx'
                        }">
                            <template v-slot:default>
                                <image class="wh150" :src="shopUploadImage" mode="aspectFill"></image>
                            </template>
                        </uni-file-picker>
                    </view>
                </view>
            </template>
        </uni-section>
        <uni-section>
            <template v-slot:decoration>
                <text class="decoration">联系电话</text>
            </template>
            <template v-slot:content>
                <text class="decoration">123123213</text>
            </template>
        </uni-section>
    </view>
    <uni-popup ref="reasonPopup" type="bottom">
        <view class="reason-popup f1 bfff pr">
            <view class="title">
                <text>请选择申请原因</text>
            </view>
            <view class="close-btn" @click="reasonPopup.close()">×</view>
            <view class="reason-list" v-for="item in reasonList" @click="selectReason(item)">
                <text class="label">{{ item.label }}</text>
            </view>
        </view>
    </uni-popup>
    <JyBottomBtn @click="postApi">提交申请</JyBottomBtn>
</template>

<script setup>
import { ref, reactive } from 'vue'
import JyCommodityInformation from '@/components/public/jy-commodity-information'
import shopUploadImage from '@/static/shop-upload-image.png'
import JyBottomBtn from '@/components/public/jy-bottom-button'
const value = ref(null)
const reasonPopup = ref(null)
const disabled = ref(true)
const postData = reactive({
    reason: '',
    priceNum: 5.99,
    content: ''
})
const postApi = () => {
    console.log('我是提交');
}
const selectReason = (val) => {
    postData.reason = val.label
    reasonPopup.value.close()
}
const reasonList = [
    { label: '缺货' },
    { label: '不想要了' },
    { label: '价格太贵' },
    { label: '其他' },
]
const changeDisabled = () => {
    disabled.value = !disabled.value
    if (postData.priceNum === null) {
        postData.priceNum = 5.99
    }
}
</script>
<style scoped lang="scss">
.jy-return-refund {
    padding-bottom: 200rpx;
}

.decoration {
    font-size: 30rpx;
    color: #1D2129;
    margin-right: 40rpx;
}

.content {
    color: #333333;
    font-size: 28rpx;
    font-weight: 600;
}

.noContent {
    color: #999999;
    font-size: 28rpx;
}

.jy-return-type {
    font-size: 48rpx;
    color: #333333;
}

.application_amount {
    ::v-deep .uni-section-header {
        align-items: flex-end;
    }
}

::v-deep .file-picker__box-content {
    border: none !important;
    margin: 0;
}

::v-deep .uni-file-picker {
    padding: none;
}

.uni-file-picker {
    background: #ffffff;
    padding: 24rpx 20rpx;
}

.reason-popup {
    width: 100%;
    height: 800rpx;
    // 上面两个圆角
    border-radius: 30rpx 30rpx 0 0;

    .reason-list {
        padding: 16rpx 24rpx;
    }

    .title {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20rpx 0;
        // 底部边框显示
        color: #3D3D3D;
        font-weight: 600;
        font-size: 32rpx;
    }

    .close-btn {
        position: absolute;
        top: 40rpx;
        right: 40rpx;
        height: 52rpx;
        line-height: 52rpx;
        width: 52rpx;
        color: #999999;
        font-size: 40rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: translate(50%, -50%);
    }
}
</style>