CommunityApp/pagesM/pages/after_sale_apply.vue

<template>
  <!-- 申请售后 -->
  <view class="dt-page">
    <view class="comp-list-item" @tap="showSaleType">
      <view class="left-item">
        <text>售后类型</text>
      </view>
      <view class="right-item">
        <input :value="saleTypeLabel" type="text" placeholder="请选择售后类型" disabled/>
        <image src="http://139.9.103.171:1888/img/image/arrow.png"></image>
      </view>
    </view>
    
    <view class="comp-list-item">
      <view class="left-item">
        <text>订单编号</text>
      </view>
      <view class="right-item">{{ loadOptions.orderSn|defaultValue('无') }}</view>
    </view>
    <view class="item-margin"></view>

    <view class="comp-list-item form-block">
      <view class="left-item">
        <text>售后原因</text>
      </view>
      <view class="right-item">
        <textarea v-model="formData.reason" class="reason" maxlength="-1" placeholder="请输入您售后的原因"></textarea>
      </view>
    </view>

    <FootToolbar bgColor="#fff">
      <view slot="main" class="btn-voucher-wrap">
        <button @tap="tapSubmit" class="dt-btn-submit btn-voucher" hover-class="button-hover-scale">提交售后申请</button>
      </view>
    </FootToolbar>

    <FootSaleType ref="footSaleType"
      :dataList.sync="saleTypeList"
      @choose="onChoose" />
  </view>
</template>
<script>
import FootSaleType from '../comps/foot_sale_type.vue'
import FootToolbar from '../comps/foot_toolbar.vue'
export default {
  components:{
    FootSaleType,
    FootToolbar
  },
  data(){
    return {
      saleTypeList:[
        { label:'申请换货',value:2, checked:false },
        { label:'申请退货',value:3, checked:false }
      ],
      saleTypeLabel:'',
      formData:{
        saleType:'',      // 售后类型
        reason:'',        // 售后原因
      },
      formRules:{
        saleType:[{
          required:true,
          message:'请选择售后类型'
        }],
        reason:[{
          required:true,
          message:'请输入退货原因'
        }],
      },
      
    }
  },
  methods:{
    showSaleType(){
      this.$refs.footSaleType.show(this.formData.saleType)
    },
    onChoose(curCheck){
      this.formData.saleType = curCheck.value
      this.saleTypeLabel = curCheck.label
    },
    tapSubmit(){
      if(!this.validate(this.formRules,this.formData)){
        return
      }
      let params = Object.assign({}, this.loadOptions, this.formData)
      uni.navigateTo({
        url:'/pagesM/pages/after_sale_submit?'+this.$util.serialize(params)
      })
      console.log('提交')
    },
    onLoadPage(){
	  wx.hideShareMenu();
      if(this.isLoad){
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.dt-page{
  min-height:100vh;
  background-color:#f2f2f2;
  .comp-list-item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 30upx;
    color: #353535;
    justify-content: space-between;
    margin-top: 0;
    min-height: 90upx;
    border-bottom: 2upx solid #f2f2f2;
    background: #fff;

    .left-item {
      display: flex;
      align-items: center;
      text {
        max-height: 100%;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        text-overflow: ellipsis;
      }
    }
    .right-item {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width:50vw;
      min-height:90upx;
      
      text {
        color: #999999;
      }
      image {
        margin-left: 20upx;
        width: 13upx;
        height: 24upx;
      }
      .reason{
        width:100%;
        min-height:200upx;
        padding-bottom:30upx;
        box-sizing:border-box;
      }
    }
  }
  .form-block{
      flex-wrap:wrap;
      .left-item{
        width:100%;
        line-height:1;
        padding:30upx 0;
      }
      .right-item{
        flex-wrap:wrap;
        width:100%;
        .choose-item{
          padding-left:16upx;
          width:100%;
          display:flex;
          align-items: center;
          line-height:60upx;
          .lable{
            padding-left:10upx;
          }
        }
        .choose-item:last-child{
          padding-bottom:20upx;
        }
      }
    }
  .item-margin{
    width:100%;
    height:20upx;
  }
  
  .hidden{
    opacity:0;
  }
  input{
    text-align: right;
  }

  .btn-voucher-wrap{
    display:flex;
    justify-content: center;
    align-items: center;
    width:100vw;
    height:110upx;
    background-color:#fff;
    .btn-voucher{
      width:690upx;
      height:80upx;
      line-height:80upx;
      color:#fff;
      background-color:$dt-color-primary; 
      font-size: 30upx;
    }
  }
}
</style>