chelvc-custom/src/PageMine/applyRefund/index.vue

<template>
  <view class="apply-refund">
    <page-navbar bgColor="#fff" title="申请退款" />
    <base-card padding="24rpx" marginBottom="24rpx">
      <view class="apply-title">订单明细</view>
      <view class="fl-flex u-m-b-10" v-for="(item, index) in 2" :key="index">
        <base-img
          src="/static/img.jpg"
          width="150rpx"
          height="150rpx"
          borderRadius="16rpx"
        ></base-img>
        <view class="u-m-l-16" style="flex: 1">
          <view class="f-s-28 text-333 u-m-b-16"> 理想汽车（银泰城店） </view>
          <view class="fl-flex-item u-m-b-30">
            <view class="fl-text-999">未消费时随时退</view>
            <view class="fl-text-999">X2</view>
          </view>
          <view class="f-s-32 text-333">￥97</view>
        </view>
      </view>
    </base-card>
    <base-card padding="24rpx" marginBottom="24rpx">
      <view class="fl-flex-item">
        <view>订单编号</view>
        <view class="fl-flex fl-align-center">
          <view>40197b27100D000937709085</view>
          <view class="u-m-t-4">
            <base-img
              src="/static/pageMine/copy-select.png"
              width="32rpx"
              height="32rpx"
            ></base-img>
          </view>
        </view>
      </view>
    </base-card>
    <base-card padding="24rpx" marginBottom="24rpx">
      <view class="apply-title">申请退款明细</view>
      <view class="u-m-b-24">
        <view class="fl-flex-item">
          <view class="f-s-28 text-333">退款件数</view>
          <u-number-box v-model="value" disabled />
        </view>
        <view class="fl-text-999">(最多可退2件)</view>
      </view>
      <view class="u-m-b-24">
        <view class="fl-flex-item u-m-8">
          <view class="f-s-28 text-333">退款金额</view>
          <view class="f-s-28 text-primary">￥97</view>
        </view>
        <view class="fl-text-999">(仅退运您实际支付的金颜:具体金颜以退款结果为准)</view>
      </view>
      <view class="fl-flex-item">
        <view class="f-s-28 text-333">退款件数</view>
        <view class="f-s-24 text-333">退款预计2个工作日内到账</view>
      </view>
    </base-card>
    <base-card padding="24rpx" marginBottom="24rpx">
      <view class="apply-title">退款原因</view>
      <u-radio-group v-model="value" iconPlacement="right">
        <view style="width: 100%">
          <u-radio
            :label="item.name"
            v-for="(item, index) in list"
            :key="index"
            size="15"
          ></u-radio>
        </view>
      </u-radio-group>
    </base-card>

    <view class="u-m-b-80 u-m-t-50">
      <base-button text="申请退款"></base-button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'apply-refund',
  data() {
    return {
      value: 3,
      list: [
        { name: '商品买错了，重新购买' },
        { name: '发现其他门店价格更低' },
        { name: '不需要该服务了' },
        { name: '门店引导退款，线下交易' },
        { name: '线下支付价格更低' },
        { name: '门店无法核销' },
        { name: '其他' },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.apply-refund {
  padding: 20rpx 32rpx;
  .apply-title {
    font-size: 28rpx;
    color: #333;
    padding-bottom: 24rpx;
    border-bottom: 1rpx solid #d8d8d8;
    margin-bottom: 24rpx;
  }
  // u-radio data-v-643b3322 u-radio-label--right false
  ::v-deep .u-radio {
    margin-bottom: 32rpx;
    color: #333;
    font-size: 28rpx;
  }
  ::v-deep .u-radio:nth-child(7) {
    margin-bottom: 10rpx;
  }
  ::v-deep .u-radio:nth-child(1) {
    margin-top: 15rpx;
  }
}
</style>