recycle-mobile/src/pages/mine/myBuy/return.vue

<template>
  <zj-page-layout
  	:hasFooter="true"
  	:isScroll="true"
  	:refresherTriggered="refresherTriggered"
  	@refresherrefresh="refresherrefresh">

    <view class="goods-container">
      <view class="title">商品信息</view>
      <view class="goods">
        <image src="@/static/user/other_book.png"></image>
        <view class="main">
          <view class="name">商品名称</view>
          <view class="des">商品描述</view>
          <view class="price"><text>¥18.00</text>x2</view>
        </view>
      </view>
      <view class="total">订单总金额<text>¥1200.00</text></view>
    </view>

    <view class="form-container">
      <view class="title">退货信息填写</view>
      <view class="radio">
        <view class="label">选择类型</view>
        <u-radio-group
            v-model="type"
            placement="row">
        	<u-radio label="仅退款" activeColor="#01C30B" :name="1"></u-radio>
        </u-radio-group>
      </view>
      <view class="content">
        <view class="label">退货原因</view>
        <u--textarea v-model="content" placeholder="请输入内容" ></u--textarea>
      </view>
    </view>

    <view class="form-container">
      <view class="title">处理结果</view>
      <view class="row">
        <view class="label">处理状态</view>
        <view class="value">已处理</view>
      </view>
      <view class="row">
        <view class="label">处理结果</view>
        <view class="value">同意退款</view>
      </view>
      <view class="row">
        <view class="label">退款金额</view>
        <view class="value">¥1200.00</view>
      </view>
      <view class="row">
        <view class="label">备注信息</view>
        <view class="value">备注信息备注信息备注信息备注信息备注信息备注信息备注信息备注信息备注信息</view>
      </view>
    </view>

    <template slot="footer">
      <view class="bottom-container">
        <u-button text="提交申请" type="primary" shape="circle"></u-button>
      </view>
    </template>

  </zj-page-layout>
</template>

<script>
  export default {
    data() {
      return {
        type: 1,
        content: ''
      }
    }
  }
</script>

<style lang="scss" scoped>
.goods-container {
  background: #ffffff;
  margin-top: 30rpx;
  padding: 30rpx 30rpx 0;
  .title {
    font-weight: 500;
  }
  .goods {
    display: flex;
    padding: 30rpx 0;
    image {
      width: 120rpx;
      height: 120rpx;
    }
    .main {
      flex: 1;
      margin-left: 20rpx;
      .name {
        font-size: 32rpx;
      }
      .des {
        margin-top: 12rpx;
        font-size: 28rpx;
        color: $reg-font;
      }
      .price {
        margin-top: 12rpx;
      	text {
      		color: $assist-color;
      		font-weight: 500;
      		font-size: 32rpx;
          margin-right: 12rpx;
      	}
      }
    }
  }
  .total {
    border-top: 1px solid #eaeaea;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: end;
    font-size: 28rpx;
    text {
      margin-left: 12rpx;
      color: $assist-color;
    }
  }
}

.form-container {
  background: #ffffff;
  margin-top: 30rpx;
  padding: 30rpx;
  .title {
    font-weight: 500;
  }
  .label {
  	color: $sec-font;
  	flex-shrink: 0;
  	margin-right: 30rpx;
  }
  .radio {
    display: flex;
    align-items: center;
    margin-top: 30rpx;
  }
  .content {
    display: flex;
    margin-top: 30rpx;
  }
  .row {
    display: flex;
    margin-top: 30rpx;
  }
}

.bottom-container {
  padding: 20rpx 30rpx;
}

</style>