一、微信扫描小程序码进入到【配偶授权】页

1、大体逻辑

1. 项目中有个页面获取到小程序码，可以发送给配偶，让配偶扫码
2. 配偶扫码直接进入到过渡页（start-up.vue），和后端约定好
3. 在过渡页的onLoad钩子中可以获取到小程序码中的参数，判断是不是扫码进来的，如果是就跳转至【配偶授权】页

二、【配偶授权】页录制视频及视频上传

1. 点击录制视频按钮，使用uni.chooseVideo方法拍摄或选取一个视频，返回的对象中有tempFilePath，可以用来作为uni.uploadFile的入参
2. uni.uploadFile将视频上传到文件服务器中
3. 文件服务器返回的url地址再保存到接口中
4. 最后重新获取当前页的详情接口，更新视频

完整代码：

<template>
  <view class="spouse-auth">
    <template v-if="!apouseVideoUrl">
      <view class="text">
        尊敬的客户您好，您的配偶
        {{ name }}
        正在申请中牟农商银行的贷款，由于业务流程需要您上传一段视频作为配偶知悉材料，您可按照如下提示文案内容进行录制视频。
      </view>
      <view class="text">
        录制视频过程中需宣读如下文案：我叫{{ apouseName }}，是{{
          name
        }}的配偶，我知悉并同意{{
          name
        }}在中牟农商银行申请贷款，用于我们家庭日常生活消费。
      </view>
    </template>
    <template v-else>
      <view class="text">
        尊敬的客户您好，您已录制配偶授权内容，点击即可播放录制的视频！
      </view>
      <view class="text">
        录制视频过程中需宣读如下文案：我叫{{ apouseName }}，是{{
          name
        }}的配偶，我知悉并同意{{
          name
        }}在中牟农商银行申请贷款，用于我们家庭日常生活消费。若视频不满足要求可点击下方【重新录制】后重新上传视频内容。
      </view>
    </template>
    <video
      v-if="apouseVideoUrl"
      :src="configUtils.baseUrl + apouseVideoUrl + '&token=' + token"
      controls
      style="margin-bottom: 50rpx"
    />
    <u-button style="width: 100%" type="primary" @click="handleVideo">
      {{ apouseVideoUrl ? "重新录制" : "开始录制" }}
    </u-button>
  </view>
</template>
<script>
import config from "@/utils/config.js";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      applyId: "",
      erCodeUr: "", // 二维码
      configUtils: config,
      apouseName: "", // 配偶姓名
      name: "", // 申请人姓名
      apouseVideoUrl: "", // 视频链接
    };
  },
  computed: {
    ...mapGetters(["userInfo", "token"]),
    action() {
      return config.baseUrl + config.middleUir + "/common/uploadFile";
    },
    upHeader() {
      return { token: this.token };
    },
  },
  onLoad(query) {
    this.applyId = query.applyId;
    this.getQrCodeInfo();
  },
  methods: {
    // 获取二维码申请信息
    async getQrCodeInfo() {
      const params = { applyId: this.applyId };
      const res = await this.$api.business.getQrCodeInfo(params);
      console.log("获取二维码申请信息", res);
      if (res.flag) {
        this.apouseName = res.data.apouseName;
        this.name = res.data.name;
        this.apouseVideoUrl = res.data.apouseVideoUrl;
      }
    },
    // 录制视频
    handleVideo() {
      console.log("handleVideo");
      uni.chooseVideo({
        count: 1,
        sourceType: ["camera", "album"],
        maxDuration: 30,
        mediaType: ["video"],
        success: (res) => {
          console.log(res);
          if (res.size / 1024 / 1024 > 50) {
            return uni.showToast({
              icon: "none",
              title: "拍摄视频过大，请重新拍摄！",
            });
          }
          this.upload(res);
        },
      });
    },
    // 视频录制成功，上传至文件服务器
    upload(res) {
      uni.showLoading({ title: "努力加载中", mask: true });
      uni.uploadFile({
        url: this.action, //仅为示例，非真实的接口地址
        filePath: res.tempFilePath, //改为files可实现一次上传多个文件，仅App、H5（ 2.6.15+）支持
        name: "attachMentFile",
        header: this.upHeader,
        success: (uploadFileRes) => {
          uni.hideLoading();
          const data = JSON.parse(uploadFileRes.data);
          console.log("上传结果", data);
          if (data.flag) {
            this.updateSpouseVideo(data.data.url);
          } else {
            uni.showToast({
              icon: "none",
              title: data.errMsg || "上传失败",
              duration: 2000,
            });
          }
        },
        fail: () => {
          uni.hideLoading();
        },
      });
    },
    // 更新配偶视频
    async updateSpouseVideo(apouseVideoUrl) {
      uni.showLoading({ title: "努力加载中", mask: true });
      const params = { applyId: this.applyId, apouseVideoUrl };
      console.log("更新配偶视频-请求参数", params);
      const res = await this.$api.business.updateDbVideoApply(params);
      uni.hideLoading();
      console.log("更新配偶视频-返回结果", res);
      if (res.flag) {
        this.getQrCodeInfo();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.spouse-auth {
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  .text {
    margin-top: 50rpx;
    line-height: 46rpx;
    &:last-of-type {
      margin-bottom: 50rpx;
    }
  }
}
</style>