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

<template>
  <view class="applyContainer">
    <view class="main">
      <view class="tags"> 理赔申请 </view>
      <view class="content">
        优惠券在使用微信支付后，若出现未满减的问题，为了避免顾客长时间的等待，可通过此通道按要求上传图片，审核通过后，会给您返现相应的金额红包请注意微信的<span
          class="green"
          >【服务通知】</span
        >
      </view>
      <view class="flex-center">
        <view class="btn" @click="toUpload"> 上传凭证 </view>
      </view>
      <view class="guide" @click="toGraph"
        >支付账单详情和优惠券的获取指引></view
      >
    </view>
    <image
      src="https://qiuyu-daodian.oss-cn-beijing.aliyuncs.com/images/dp.png"
      mode="scaleToFill"
      class="dun"
    />
  </view>
</template>

<script setup lang="ts">
const toGraph = () => {
  uni.navigateTo({
    url: "/pagesOne/claim/graph",
  });
};

const toUpload = () => {
  //用户订阅消息模板消息
  wx.requestSubscribeMessage({
    tmplIds: ["FWGvRFSZ65JVrMsTqeBoT9hJYyeN9Z_aFAacMxoPlhY"],
    success(response: any) {
      if (
        response["FWGvRFSZ65JVrMsTqeBoT9hJYyeN9Z_aFAacMxoPlhY"] === "accept"
      ) {
        // uni.showToast({ title: "操作成功！", icon: "none" });
      }
      uni.navigateTo({
        url: "/pagesOne/claim/uploadRecept",
      });
    },
    fail(err) {
      // uni.showToast({ title: "订阅失败", icon: "error" });
      uni.navigateTo({
        url: "/pagesOne/claim/uploadRecept",
      });
    },
  });
};
</script>

<style lang="scss" scoped>
.applyContainer {
  background: $bg-green;
  width: 100%;
  height: 100vh;
  font-family: PingFang SC;
  overflow: hidden;
  .main {
    margin: 32rpx;
    border-radius: 16rpx;
    background: #fff;
    padding: 32rpx;
    box-sizing: border-box;
    .tags {
      width: 134rpx;
      text-align: center;
      line-height: 48rpx;
      color: #fff;
      font-size: 24rpx;
      text-align: center;
      background: $bg-green2;
      border-radius: 8rpx;
    }
    .content {
      font-size: 32rpx;
      margin: 24rpx 0 80rpx;
      .green {
        color: #224f36;
      }
    }
    .btn {
      @include btnStyle(560rpx, 104rpx);
    }
    .guide {
      color: #2a6443;
      font-size: 28rpx;
      text-align: center;
      margin-top: 20rpx;
      text-decoration: underline;
    }
  }
  .dun {
    width: 212rpx;
    height: 216rpx;
    float: right;
  }
}
</style>