jzmall_wx/pages/ucenter/applyRefund/applyRefund.wxml

<view class="container">
  <!-- 商品信息 -->
  <view class="product-block">
   <view class="refund-title">退款商品</view>
    <view class="product-detail">
      <view class="profuct-info">
        <image mode="aspectFit" class="product-img" src="{{orderInfo.picUrl}}"></image>
        <view class="info-right">
          <view class="info-main">
          <view class="product-name">{{orderInfo.goodsName}}</view>
          <view class="price">¥<text style="font-size: 24rpx;">{{orderInfo.actualPrice}}</text></view>
        </view>
          <view class="other-info">服务{{orderInfo.serviceTimes}}次</view>
        </view>
      </view>
    </view>
    <view class="real-price">
      实际付款：<text>¥{{orderInfo.actualPrice}}</text>
    </view>

  </view>
<!-- 
  <view class="card">
    <view class="module-title">订单明细</view>
    <view class="tt-cell">
      <view>商品总价</view>
      <view>￥{{orderInfo.goodsPrice}}元</view>
    </view>
    <view class="tt-cell">
      <view>优 惠</view>
      <view>-￥{{orderInfo.couponPrice}}元</view>
    </view>
    <view class="tt-cell">
      <view>订单实付</view>
      <view>-￥{{orderInfo.actualPrice}}元</view>
    </view>
  </view>
 -->


  <view class="card">
    <view class="refund-title">退款信息</view>
    <view class="tt-cell">
      <view>退款金额</view>
      <view class="refund-price">￥{{aftersale.amount}}</view>
    </view>
    <!-- <view class="comment-tips">不可更改，即订单实付</view> -->

    <!-- <picker value="{{index}}" range="{{columns}}" bindchange="bindPickerChange"> -->
      <view class="tt-cell" bindtap="showReason">
        <view style="width:150rpx;"><text class="need">*</text>退款原因</view>
        <view class="cell-right default" wx:if="{{reasonActive.id==''}}">请选择 </view>
        <view class="cell-right" wx:else>{{reasonActive.name}}</view>
        <view class="arrow-wrapper">
          <image src="https://mall.zhaijieshi.cc/file/wx-dy/arrow-grey.png" mode="aspectFit" class="arrow-img"></image>
        </view>
      </view>

    <!-- </picker> -->

    <view class="tt-cell">
      <view style="width:150rpx;"><text class="need">*</text>补充描述</view>
      <input value="{{ aftersale.reason}}" placeholder="补充描述，有助于更好的处理售后问题。" placeholder-style="font-size:24rpx;color:#ACADB1;"
        bindinput="onReasonChange">
      </input>
    </view>

    <view class="upload-text">上传凭证</view>
    <view class="comment-tips">最多上传3张</view>
    <!-- 图片上传 -->
    <view class="upload-wrapper">

      <view class="img-item" wx:for="{{imgList}}" wx:key="index">
        <image mode="aspectFill" src="{{item}}" class="user-upload" bindtap="previewImg" data-img="{{item}}"></image>
        <image class="close-img" mode="aspectFill" src="/static/images/icon-close.png" bindtap="delImg"
          data-index="{{index}}">
        </image>
      </view>
      <view class="upload" bindtap="uploadImg">
        <image mode="aspectFill" src="/static/images/icon-add.png"></image>
        <view>上传照片</view>
      </view>

    </view>
  </view>

  <view class="submit-btn" bindtap="submit">申请退款</view>
 


   <!-- 备注退款原因 -->
   <view class="appoint-overlay-wrapper remark-overlay" wx:if="{{ reasonPopupShow }}" bindtap="onReasonPopupClose">
  
    <view class="remark-select" catchtap="onReasonClick" >
      <view class="title">
        选择退款原因
      </view>
     <view class="remark-list">
      <view class="remark-item" wx:for="{{reasonList}}" wx:key="index" data-reason="{{item}}" catchtap="reasonItemSelect">
        <view class="remark-value">{{item.name}}</view>
        <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-select-popup.png" class="radio-img" wx:if="{{reasonActive.id==item.id}}"></image>
        <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-unselect-popup.png" class="radio-img" wx:else></image>
      </view>
     </view>
     <view class="remark-conf-btn" catchtap="reasonItemConfirm">确定</view>
    </view>
  </view>
</view>