pco/app/pages/business-order/surePay.vue

<template>
  <view>
    <view class="box">
      <view class="item">
        <view class="l">订单号：</view>
        <view class="r">
          {{ form.no }}
        </view>
      </view>
      <view class="item">
        <view class="l">业务费用：</view>
        <view class="r">
          {{ form.itemPrice }}元
        </view>
      </view>
      <view class="item">
        <view class="l">停车费用：</view>
        <view class="r">
          <text>{{ form.partMoney + form.chinaPartMoney }}元</text>
        </view>
      </view>
      <view class="item">
        <view class="l">合计费用：</view>
        <view class="r">
          {{ form.totalMoney }}元
        </view>
      </view>
      <view class="item">
        <u-radio-group v-model="form.payType" placement="column" @change="groupChange">
          <u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in payTypeList" :key="index"
                   :label="item.name" :name="item.value" @change="radioChange">
          </u-radio>
        </u-radio-group>
      </view>
      <!-- 	<view class="item">
        <view class="l">支付凭据：</view>
        <view class="r">
          <view class="img">
            <uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" limit="1"
              @select="select" @progress="progress" @success="success" @fail="fail"
              @delete="form.payTicket=''" :image-styles="imageStyles" />
          </view>
        </view>
      </view> -->
    </view>
    <u-button type="primary" @click="confirmFn">确认支付</u-button>
  </view>
</template>

<script>
import request from '../../utils/request.js'

export default {
  data() {
    return {
      id: '',
      imageValue: [],
      imageStyles: {
        width: 150,
        height: 100,
        border: {
          color: "#eee",
          width: 1,
          style: 'dashed',
          radius: '5px'
        }
      },
      payTypeList: [{
        name: '微信支付',
        value: 3
      }],
      form: {
        partMoney: 0,
        payType: 3
      },
      imgList: [],
      uploadImageUrl: request.server + '/upload/image',
    }
  },
  onLoad(options) {
    this.id = options.id;
  },
  onShow() {
    this.getBusinessById();
  },
  methods: {
    // 获取上传状态
    select(e) {
      let that = this;
      uni.uploadFile({
        url: that.uploadImageUrl,
        filePath: e.tempFilePaths[0],
        name: 'file',
        success: (resp => {
          that.form.payTicket = JSON.parse(resp.data).data;
        })
      })
    },
    deleteFn(v) {
      console.log(v)
    },
    // 获取上传进度
    progress(e) {
      console.log('上传进度：', e)
    },

    // 上传成功
    success(e) {
      console.log('上传成功')
    },

    // 上传失败
    fail(e) {
      console.log('上传失败：', e)
    },
    getBusinessById() {
      this.$api.getBusinessById({
        id: this.id
      }).then(resp => {
        this.form = resp.data;
        this.form.payType = 3
        if (this.form.payTicket) {
          this.imageValue = [{
            'name': 'payTicket.png',
            'extname': '.png',
            'url': this.form.payTicket
          }]
        }
      })
    },
    confirmFn() {
      this.$api.getPrePay({
        no: this.form.no
      }).then(resp => {
        if (resp.code != 200) {
          this.$common.toast('支付异常');
        }
        window.location.href = resp.data.payUrl;
      })
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #fff;
}

@import '@/common/common.scss'
</style>