jsm-mall-h5-front/src/packageMaterial/pages/apply/pay.vue

<template>
  <view>
    <Loading :type="3" :loadStatus="loadStatus" :showText="errorText" />
    <zj-page-layout :hasFooter="true" v-if="detail">
      <view style="padding: 1rpx 30rpx">
        <view class="materials-container card mt30">
          <view class="title">
            <view class="t1">支付金额</view>
            <view class="t2"
              >¥<text>{{ detail.totalAmount | priceFilter }}</text></view
            >
          </view>
          <view class="id"><text>费用单号：</text>{{ detail.salesId }}</view>
          <view class="product">
            <view class="it" v-for="(item, index) in detail.items" :key="index">
              <view class="name"
                >{{ item.goodsName }}<text>×{{ item.salesQty }}{{ item.goodsSalesUnit }}</text></view
              >
              <view class="price">¥{{ item.saleAmount | priceFilter }}</view>
            </view>
            <view class="total">
              <view class="text">合计：</view>
              <view class="price">¥{{ detail.totalAmount | priceFilter }}</view>
            </view>
          </view>
          <view class="row"><text>备注：</text>{{ detail.remark }}</view>
          <!-- <view class="row"><text>操作人：</text>模式一</view> -->
        </view>

        <!-- <view class="pay-container card mt30">
          <view class="top">请选择客户支付方式</view>
          <view class="item">
            <view class="left">
              <text class="iconfont icon-weixinzhifu"></text>
              <text class="text">微信支付</text>
            </view>
            <view class="right">
              <text class="iconfont icon-danxuan2 active"></text>
            </view>
          </view>
        </view> -->

        <view class="pay-container card mt30">
          <view class="top">支付信息</view>
          <view class="item" v-for="(item, index) in payNoList" :key="index" @click="payNo = item.id">
            <view class="left">
              <text
                :class="{
                  iconfont: true,
                  'icon-danxuan2': true,
                  active: payNo === item.id
                }"
              ></text>
            </view>
            <view class="right">
              <text class="text">{{ item.name }}</text>
            </view>
          </view>
        </view>
      </view>

      <template slot="footer">
        <view class="footer-btn-group">
          <u-button text="取消订单" @click="cancelOrder"></u-button>
          <u-button text="确认支付" type="primary" @click="submitData"></u-button>
        </view>
      </template>
    </zj-page-layout>
  </view>
</template>

<script>
import { weixinPay, mini_env } from '@/common/utils/util.js'
export default {
  data() {
    return {
      orderId: null,
      refresherTriggered: false,
      loadStatus: 0,
      errorText: '',
      detail: null,
      canScanCode: 0,
      payNoList: [],
      payNo: '',
      websitId: '',
      goodsType: ''
    }
  },

  onLoad({ orderId, websitId, goodsType }) {
    this.orderId = orderId
    this.websitId = websitId
    this.goodsType = goodsType
    this.getDetail()
    this.$api
      .post('/material/salses/get/pay/config', {
        goodsType: this.goodsType,
        websitId: this.websitId
      })
      .then(res => {
        this.payNoList = res.data
      })
  },

  methods: {
    getDetail() {
      this.$api
        .post('/material/salses/detail', {
          salesId: this.orderId
        })
        .then(res => {
          this.detail = res.data
          this.loadStatus = 0
        })
        .catch(res => {
          this.errorText = res.message
          this.loadStatus = 2
        })
        .finally(res => {
          this.refresherTriggered = false
        })
    },

    // 取消订单
    cancelOrder() {
      this.$modal({
        content: '确认取消订单吗？'
      })
        .then(() => {
          this.$api
            .post('/material/salses/cancel', {
              salesId: this.orderId
            })
            .then(res => {
              this.$successToast()
              this.$navToPage(
                {
                  delta: 1
                },
                'navigateBack'
              )
            })
        })
        .catch(() => {})
    },

    // 下单
    submitData() {
      if (this.payNo) {
        mini_env(bool => {
          if (bool) {
            this.$api
              .postJson('/material/salses/save/pay/order', {
                salesId: this.orderId,
                payConfigId: this.payNo,
                miniPay: true,
                openId: this.$store.state.user.miniOpenId
              })
              .then(res => {
                uniWebview.navigateTo({
                  url: `/pages/pay/otherPay?${Object.entries({
                    appOrderId: res.data.appOrderId,
                    appid: res.data.appid
                  })
                    .map(item => item.join('='))
                    .join('&')}`
                })
              })
          } else {
            // 公众号支付
            // weixinPay(res.data, function (res) {
            //   that.paySuccess()
            // })
          }
        })
      } else {
        this.$toast(`请选择支付商户`)
      }
      // if (this.canScanCode > 0) return this.$toast(`请等待${this.canScanCode}秒后重试`)
      // mini_env(bool => {
      // /material/salses/get/pay/config
      // this.$api
      //   .post('/material/salses/pay', {
      //     salesId: this.orderId,
      //     ...(() => {
      //       if (bool) {
      //         return {
      //           miniPay: true,
      //           openId: this.$store.state.user.miniOpenId
      //         }
      //       }
      //       return {}
      //     })()
      //   })
      //   .then(res => {
      //     if (!res.data.isPay) {
      //       this.paySuccess()
      //     } else {
      //       if (bool) {
      //         uniWebview.navigateTo({
      //           url: `/pages/pay/pay?${Object.entries({
      //             ...res.data,
      //             payPackage: res.data.payPackage.split('=')[0] || '',
      //             payPackageVal: res.data.payPackage.split('=')[1] || ''
      //           })
      //             .map(item => item.join('='))
      //             .join('&')}`
      //         })
      //       } else {
      //         weixinPay(res.data, function (res) {
      //           that.paySuccess()
      //         })
      //       }
      //     }
      //   })
      //   .catch(res => {
      //     this.$tips(res.message)
      //   })
      //   .finally(() => {
      //     this.canScanCode = 15
      //     let time = setInterval(() => {
      //       if (this.canScanCode > 0) {
      //         this.canScanCode = this.canScanCode - 1
      //       } else {
      //         clearInterval(time)
      //       }
      //     }, 1000)
      //   })
      // })
    },

    paySuccess() {
      this.$modal({
        content: '支付成功',
        cancelText: '回到首页',
        confirmText: '查看记录'
      })
        .then(() => {
          this.$navToPage(
            {
              url: `/packageMaterial/pages/stock/buyRecord`
            },
            'reLaunch'
          )
        })
        .catch(() => {
          this.$navToPage(
            {
              url: `/pages/index/index`
            },
            'switchTab'
          )
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  @include zj-card;
}

.materials-container {
  padding: 30rpx;

  .title {
    text-align: center;
    margin-top: 30rpx;

    .t1 {
      font-size: 32rpx;
      font-weight: 500;
    }

    .t2 {
      font-size: 40rpx;
      color: $minor-color;
      margin-top: 20rpx;

      text {
        font-size: 56rpx;
        font-weight: 500;
      }
    }
  }

  .id {
    margin-top: 50rpx;

    text {
      color: $sec-font;
    }
  }

  .product {
    background: #f5f5f5;
    border-radius: 12rpx;
    padding: 20rpx;
    margin-top: 20rpx;

    .it {
      display: flex;
      align-items: flex-end;
      margin-bottom: 20rpx;

      .name {
        flex: 1;
        font-size: 28rpx;
        font-weight: 500;

        text {
          color: $sec-font;
          margin-left: 12rpx;
          font-weight: normal;
        }
      }

      .price {
        margin-left: 30rpx;
        font-size: 28rpx;
        font-weight: 500;
      }
    }

    .total {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 30rpx;

      .text {
        font-size: 28rpx;
        color: $sec-font;
      }

      .price {
        font-size: 28rpx;
        color: $minor-color;
        font-weight: 500;
      }
    }
  }

  .row {
    margin-top: 20rpx;
    line-height: 40rpx;
    display: flex;
    font-size: 28rpx;

    text {
      color: $sec-font;
      flex-shrink: 0;
      line-height: 40rpx;
    }
  }
}

.pay-container {
  padding: 30rpx;

  .top {
    margin-bottom: 50rpx;
  }

  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20rpx 0;

    .left {
      .iconfont {
        font-size: 40rpx;
        color: $sec-font;
      }
      .text {
        margin-left: 18rpx;
        font-size: 32rpx;
      }
      .active {
        color: $theme-color;
      }
    }

    .right {
      .text {
        margin-left: 18rpx;
        font-size: 32rpx;
      }
    }
  }
}
</style>