brand-arrival-wechat/src/pagesOne/claim/uploadRecept.vue

<template>
  <view class="uploadReceptBox">
    <custom-upload title="购物小票图片" @success="handleRecept"></custom-upload>
    <custom-upload
      title="微信支付账单详情图片"
      @success="handleBill"
    ></custom-upload>
    <view class="remark">
      <view class="tBox"><text class="xing">*</text><text>申请理由</text></view>
      <view class="inputBox">
        <!-- <input type="text" /> -->
        <wd-textarea
          v-model="queryParams.applyReason"
          placeholder="请填写申请理由"
        />
      </view>
    </view>
  </view>
  <wd-gap bg-color="#fff" height="256rpx"></wd-gap>
  <view class="btn" @click="onSubmit">立即上传</view>
</template>

<script lang="ts" setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
import CustomUpload from "@/components/customUpload.vue";
import type { Claim } from "../../services/interface";
import { quickclaimSubmit } from "@/services/claim";
import { getOpenId } from "@/services/ams";

const aData = JSON.parse(uni.getStorageSync("activityData"));

const queryParams: Claim = reactive({
  brandId: uni.getStorageSync("brandId") || aData?.brandId,
  mobile: uni.getStorageSync("phone") || "",
  openid: uni.getStorageSync("openid"),
  paymentBillImage: "",
  receiptImage: "",
  applyReason: "",
});
const handleRecept = (val: Array<string>) => {
  console.log(val);
  queryParams.receiptImage = val.join(",");
};
const handleBill = (val: Array<string>) => {
  queryParams.paymentBillImage = val.join(",");
};

const onSubmit = async () => {
  if (!queryParams.paymentBillImage) {
    uni.showToast({
      title: "请上传微信支付账单详情图片",
      icon: "none",
    });
    return;
  }
  if (!queryParams.receiptImage) {
    uni.showToast({
      title: "请上传购物小票图片",
      icon: "none",
    });
    return;
  }
  if (!queryParams.applyReason) {
    uni.showToast({
      title: "请填写申请理由",
      icon: "none",
    });
    return;
  }
  if (!queryParams.openid) {
    uni.login({
      //获取code，
      success: async (res) => {
        const params = {
          code: res.code,
          appid: uni.getAccountInfoSync().miniProgram.appId,
        };
        getOpenId(params).then((response: any) => {
          if (response.code === 200) {
            queryParams.openid = response.data.openid;
            onUpload(queryParams);
            uni.setStorageSync("openid", response.data.openid);
          } else {
            uni.showToast({
              title: "获取openid失败",
              icon: "none",
            });
          }
        });
      },
    });
  } else {
    onUpload(queryParams);
  }
};

const onUpload = async (params: Claim) => {
  const res: any = await quickclaimSubmit(params);
  try {
    uni.showToast({
      title: res.msg,
      icon: res.code === 200 ? "success" : "none",
    });
    if (res.code === 200) {
      setTimeout(() => {
        uni.navigateBack();
      }, 500);
    }
  } catch (err) {
    uni.showToast({
      title: res.msg || "上传失败",
      icon: "none",
    });
  }
};

onLoad(() => {
  // console.log("--------------------------", Models.Claim);
});
</script>

<style lang="scss" scoped>
.uploadReceptBox {
  min-height: 100vh;
  .remark {
    padding: 0 32rpx;
    .tBox {
      color: #333333;
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 32rpx;
      .xing {
        color: #e90308;
      }
    }

    .inputBox {
      border: rgba(191, 200, 219, 0.5) 2rpx solid;
    }
  }
}
.btn {
  width: 560rpx;
  background: linear-gradient(90deg, #225036 0%, #3b8e5e 45.92%, #296141 100%);
  color: #fff;
  font-size: 32rpx;
  border-radius: 80rpx;

  margin: 204rpx auto 0;
  text-align: center;
  line-height: 100rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 103rpx;
  z-index: 99;
}
</style>