hospital-accompaniment-wechat/pages/order/applicationDrawback.vue

<template>
  <view class="container">
    <u-navbar title="申请退款" leftIconColor="#ffffff" titleStyle="color:#fff" :autoBack="true" placeholder></u-navbar>
    <view class="topBox">
      <view class="item">
        <view class="item_t">
          <image :src="details.businessImage" mode="" />
          <view>{{details.businessName}}</view>
        </view>
        <view class="item_c">
          <view class="item_c_l">
            <image :src="details.businessProductImage||details.businessImage" mode="" />
          </view>
          <view class="item_c_r">
            <view class="item_c_r_title">{{details.businessProductName}}</view>
            <view class="item_c_r_text">{{details.productDataJosn.costIncluded}}</view>
            <view class="item_c_r_price">
              <view class="item_c_r_price_r"></view>
              <view class="item_c_r_price_l">￥ <text>{{details.sellingPrice.split('.')[0]}}</text>.{{details.sellingPrice.split('.')[1]}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="topBox">
      <view class="formBox">
        <u--form labelWidth="100" :model="form" :rules="rules" ref="uForm">
          <u-form-item label="退款原因" prop="refundReason" required>
            <view class="formBox_item placeholderClass" @click="open()">
              <view v-if="form.refundReason">{{form.refundReason}}</view>
              <view v-else class="placeholderClass">请选择一项</view>
              <text class="iconfont icon-jiantou"></text>
            </view>
          </u-form-item>
          <u-form-item label="退款数量" prop="name">
            <view class="formBox_item placeholderClass">{{details.refundQuantity}}</view>
          </u-form-item>
          <u-form-item label="退款金额" prop="name">
            <view class="formBox_item placeholderClass">￥{{details.refundAmount}}</view>
          </u-form-item>
          <u-form-item label="退款方式" prop="name">
            <view class="formBox_item placeholderClass">原路退回</view>
          </u-form-item>
          <u-form-item label="退款说明" labelPosition="top" prop="name">
            <u-textarea v-model="form.refundNotes" placeholder="请输入" count maxlength="500" placeholderStyle="color:#cccccc;font-size:28rpx"></u-textarea>
          </u-form-item>
        </u--form>
      </view>
    </view>
    <view class="btnBox">
      <view class="btnBox_l">
        <view class="btnBox_l_lab">退款金额：</view>
        <view class="btnBox_l_val">￥ <text>{{details.refundAmount.split('.')[0]}}</text>.{{details.refundAmount.split('.')[1]}} </view>
      </view>
      <view class="btnBox_r" @click="submit()">
        提交
      </view>
    </view>
    <reasonPop ref="reasonPopRef" @submit="affirm" />
  </view>
</template>

<script>
import { refundBuild, dictData, orderRefund } from "@/api/home.js"
import reasonPop from "@/components/reasonPop/index.vue"
export default {
  components: {
    reasonPop
  },
  data () {
    return {
      details: {},
      form: {
        refundReason: '',
        refundNotes: ""
      },
      rules: {
        refundReason: [
          {
            required: true,
            message: '请选择退款原因',
            trigger: ['blur', 'change']
          }
        ]
      },
    }
  },
  onLoad (options) {
    if (options.orderNumber) {
      this.getOrderInfo(options.orderNumber)
    }
  },
  methods: {
    getOrderInfo (orderNo) {
      refundBuild({ orderNumber: orderNo }).then(res => {
        res.data.productDataJosn = JSON.parse(res.data.productData);
        this.details = res.data;
      })
    },
    open () {
      this.$refs.reasonPopRef.open()
    },
    affirm (e) {
      this.form.refundReason = e;
    },
    // 提交退换货申请
    submit () {
      this.$refs.uForm.validate().then(res => {
        this.form.orderNumber = this.details.orderNumber;
        uni.showLoading({
          title: '加载中'
        });
        orderRefund(this.form).then(res => {
          uni.hideLoading();
          uni.showToast({
            title: '提交成功'
          });
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/tabBar/order'
            });
          }, 1500);

        })
      })
    }
  }
}
</script>

<style lang='scss' scoped>
::v-deep .u-navbar__content,
::v-deep .u-status-bar {
  background-color: #c90700 !important;
}
.container {
  padding: 30rpx 30rpx 160rpx;
  background: #f8f8f8;
  .topBox {
    background: #ffffff;
    border-radius: 30rpx;
    margin-bottom: 30rpx;
    .item {
      background: #ffffff;
      margin-bottom: 32rpx;
      border-radius: 30px;
      position: relative;
      .item_t {
        padding: 36rpx 24rpx 29rpx;
        border-bottom: 1rpx solid #cccccc;
        display: flex;
        align-items: center;
        image {
          width: 68rpx;
          height: 68rpx;
          border-radius: 20rpx;
          margin-right: 15rpx;
        }
        view {
          font-size: 28rpx;
          color: #1a1a1a;
          font-family: FZCuYuan-M03;
        }
      }
      .item_c {
        display: flex;
        padding: 30rpx 0;
        margin: 0 24rpx;
        .item_c_l {
          margin-right: 20rpx;
          image {
            width: 172rpx;
            height: 172rpx;
            border-radius: 12rpx;
          }
        }
        .item_c_r {
          flex-grow: 1;
          overflow: hidden;
          .item_c_r_title {
            font-size: 26rpx;
            color: #242424;
            font-family: FZCuYuan-M03;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .item_c_r_text {
            font-size: 24rpx;
            color: #1a1a1a;
            margin: 15rpx 0 22rpx;
            height: 56rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .item_c_r_price {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .item_c_r_price_l {
              font-size: 22rpx;
              color: #ff0000;
              font-family: FZCuYuan-M03;
              text {
                font-size: 34rpx;
                font-family: FZCuYuan-M03;
              }
            }
            .item_c_r_price_r {
              font-size: 26rpx;
              color: #666666;
              text {
                vertical-align: text-bottom;
              }
            }
          }
        }
      }
    }

    .formBox {
      background: #ffffff;
      border-radius: 30rpx;
      padding: 25rpx 20rpx;
      ::v-deep .u-form-item__body__left__content__required {
        font-size: 26rpx;
        position: relative;
        top: 0;
        left: 0;
      }
      ::v-deep .u-form-item__body__left__content__label {
        font-size: 26rpx;
        color: #060606;
      }
      ::v-deep .u-form-item__body {
        padding: 0 0 15rpx;
      }
      ::v-deep .u-textarea {
        background: #f7f7f7;
        margin-top: 20rpx;
        font-size: 28rpx;
      }
      ::v-deep .u-border {
        border-color: #e6e6e6 !important;
      }
      ::v-deep .u-textarea__count {
        background: #f7f7f7 !important;
      }
    }
  }
}
.formBox_item {
  text-align: right;
  height: 48rpx;
  line-height: 48rpx;
  > view {
    display: inline-block;
    font-size: 26rpx;
  }
  .icon-jiantou {
    transform: rotateZ(90deg);
  }
}
::v-deep .placeholderClass {
  font-family: FZZhunYuan-M02S;
  font-size: 28rpx;
  color: #808080;
}
.btnBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 35rpx 30rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
  box-sizing: border-box;
  border-top: 1rpx solid #e7e7e7;
  .btnBox_l {
    display: flex;
    align-items: baseline;
    .btnBox_l_lab {
      font-size: 28rpx;
      color: #1a1a1a;
    }
    .btnBox_l_val {
      display: flex;
      align-items: baseline;
      font-size: 22rpx;
      color: #ff0000;
      font-family: FZCuYuan-M03;
      text {
        font-size: 42rpx;
        font-family: FZCuYuan-M03;
      }
    }
  }
  .btnBox_r {
    width: 259rpx;
    height: 80rpx;
    background: #fb0b03;
    border-radius: 40rpx;
    font-size: 32rpx;
    color: #ffffff;
    text-align: center;
    line-height: 80rpx;
  }
}
</style>