|
|
@@ -1,12 +1,122 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
+ <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 {};
|
|
|
+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>
|
