wxapp/pages/settlement/index.vue

<template>
  <view class="container p-bottom">
    <!-- 清单列表 -->
    <view class="m-top20">
      <view v-for="(item, index) in storeRule" :key="index" class="checkout_list">
        <view class="flow-shopList dis-flex">
          <view class="flow-list-right flex-box">
            <text class="goods-name twolist-hidden">预存￥{{ item.store }} 到账 ￥{{ item.upStore }}</text>
            <view class="flow-list-cont dis-flex flex-x-between flex-y-center">
              <text class="small">X{{ item.num }} </text>
              <text class="flow-cont">￥{{ item.amount.toFixed(2) }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="flow-num-box b-f">
        <text>共{{ totalNum }}张，合计：</text>
        <text class="flow-money col-m">￥{{ totalAmount.toFixed(2) }}</text>
      </view>
    </view>

    <!-- 支付方式 -->
    <view class="pay-method flow-all-money b-f m-top20">
      <view class="flow-all-list dis-flex">
        <text class="flex-five">支付方式</text>
      </view>
      <!-- 微信支付 -->
      <view class="pay-item dis-flex flex-x-between" @click="handleSelectPayType(PayTypeEnum.WECHAT.value)">
        <view class="item-left dis-flex flex-y-center">
          <view class="item-left_icon wechat">
            <text class="iconfont icon-weixinzhifu"></text>
          </view>
          <view class="item-left_text">
            <text>{{ PayTypeEnum.WECHAT.name }}</text>
          </view>
        </view>
        <view class="item-right col-m" v-if="curPayType == PayTypeEnum.WECHAT.value">
          <text class="iconfont icon-duihao"></text>
        </view>
      </view>
    </view>

    <!-- 买家留言 -->
    <view class="flow-all-money b-f m-top20">
      <view class="ipt-wrapper">
        <textarea v-model="remark" rows="3" maxlength=100 placeholder="买家留言 (选填,100字以内)" type="text"></textarea>
      </view>
    </view>

    <!-- 提交订单 -->
    <view class="flow-fixed-footer b-f m-top10">
      <view class="dis-flex chackout-box">
        <view class="chackout-left pl-12">
          <view class="col-amount-do">应付金额：￥{{ totalAmount.toFixed(2) }}</view>
          <view class="col-amount-view">实得金额：￥{{ getTotalAmount.toFixed(2) }}</view>
        </view>
        <view class="chackout-right" @click="onSubmitOrder()">
          <view class="flow-btn f-32" :class="{ disabled }">提交订单</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import * as Verify from '@/utils/verify'
  import * as CouponApi from '@/api/coupon'
  import * as SettlementApi from '@/api/settlement'
  import PayTypeEnum from '@/common/enum/order/PayType'
  import { wxPayment } from '@/utils/app'

  export default {
    data() {
      return {
        // 枚举类
        PayTypeEnum,
        // 当前页面参数
        options: {},
        // 当前选中的支付方式
        curPayType: PayTypeEnum.WECHAT.value,
        // 买家留言
        remark: '',
        // 禁用submit按钮
        disabled: false,
        // 按钮禁用
        disabled: false,
        couponId: 0,
        selectNum: "",
        storeRule: [],
        totalAmount: 0,
        getTotalAmount: 0,
        totalNum: 0
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      this.options = options
      this.couponId = options.couponId
      this.selectNum = options.selectNum
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
      // 获取当前订单信息
      this.getCouponDetail()
    },

    methods: {

      // 获取卡券信息
      getCouponDetail() {
        const app = this
        return new Promise((resolve, reject) => {
          CouponApi.detail(app.couponId)
            .then(result => {
              app.initData()
              app.couponInfo = result.data
                let ruleItem = app.couponInfo.inRule.split(",")
              let selected = app.selectNum.split(",")
                ruleItem.forEach(function(item, index) {
                    let rule = item.split("_")
                    let num = selected[index]
                    let amount = parseFloat(rule[0]) * num
                    app.totalAmount += parseFloat(amount)
                    app.getTotalAmount += parseFloat(rule[1] * num)
                    app.totalNum += parseInt(num) 
                    if (num > 0) {
                       app.storeRule.push({"store": parseFloat(rule[0]), "num": parseInt(num), "amount": parseFloat(amount), "upStore": parseFloat(rule[1])})
                    }
                })
              resolve(result)
            })
            .catch(err => reject(err))
        })
      },
      
      initData() {
        this.storeRule = [],
        this.totalAmount = 0,
        this.getTotalAmount = 0,
        this.totalNum = 0
      },
      
      // 选择支付方式
      handleSelectPayType(value) {
        this.curPayType = value
      },

      // 订单提交
      onSubmitOrder() {
        const app = this
        if (app.disabled) {
          return false
        }
        // 表单验证
        if (!app.onVerifyFrom()) {
          return false
        }
        // 按钮禁用
        app.disabled = true
        // 请求api
        SettlementApi.submit(app.couponId, app.selectNum, "prestore", app.remark, 0, 0, 0, "", 0, 0, 0, "", "JSAPI")
          .then(result => app.onSubmitCallback(result))
          .catch(err => {
            if (err.result) {
              const errData = err.result.data
              if (errData.isCreated) {
                  app.navToMyOrder(errData.orderInfo.id)
                  return false
              }
            }
            app.disabled = false
          })
      },

      // 订单提交成功后回调
      onSubmitCallback(result) {
        const app = this
        // 发起微信支付
        if (result.data.payType == PayTypeEnum.WECHAT.value) {
          wxPayment(result.data.payment)
            .then(() => app.$success('支付成功'))
            .catch(err => app.$error('支付失败'))
            .finally(() => {
              app.disabled = false
              app.navToMyOrder(result.data.orderInfo.id)
            })
        }
        
        // 余额支付
        if (result.data.payType == PayTypeEnum.BALANCE.value) {
          app.$success('支付成功')
          app.disabled = false
          app.navToMyOrder(result.data.orderInfo.id)
        }
      },

      // 跳转到我的订单(等待1秒)
      navToMyOrder(orderId) {
        setTimeout(() => {
          this.$navTo('pages/order/detail?orderId='+orderId)
        }, 1000)
      },

      // 表单验证
      onVerifyFrom() {
        const app = this
        if (app.hasError) {
          app.$toast(app.errorMsg)
          return false
        }
        return true
      },

    }
  }
</script>

<style lang="scss" scoped>
  @import "./style.scss";
</style>