brand-arrival-wechat/src/pagesOne/winner/components/uploadReceptPopop.vue

<template>
  <view v-if="props.show" class="uploadReceptPopup">
    <wd-popup
      v-model="props.show"
      position="bottom"
      :safe-area-inset-bottom="true"
      custom-style="max-height: 922rpx;border-radius: 40rpx 40rpx 0 0;"
      @close="handleClose"
    >
      <view class="topTitle">
        <text>上传小票</text>
        <text class="tips">（*先选择优惠力度再上传）</text>
      </view>
      <radio-group class="receptBox" @change="radioChange">
        <label
          v-for="item in receptList"
          :key="item.id"
          class="radioItem"
          :class="item.checked ? 'active' : 'static'"
        >
          <view class="left">
            <image class="icon" :src="imgObj.icon1" mode="scaleToFill" />
            <text class="label"
              >满{{ item.thresholdAmount }}返{{ item.cashbackAmount }}</text
            >
          </view>
          <radio
            class="radio"
            color="#225036"
            :value="item.id"
            style="transform: scale(0.9)"
            :checked="item.checked"
            :disabled="item.disabled"
          />
        </label>
      </radio-group>

      <view class="btnBox">
        <view class="play" @click="toUploadImage">去上传图片</view>
        <!-- <view class="phone" @click="toUploadImage('album')"
          >从手机相册选择</view
        > -->
        <wd-gap height="16rpx" bg-color="#F7F8F9"></wd-gap>
        <view @click="handleClose">取消</view>
      </view>
    </wd-popup>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from "vue";
import { imgObj } from "../utils/source";
import { useDraw } from "@/hooks/useDraw";
import type { Receipt } from "@/services/interface";
import { validate } from "@/services/ams";
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  id: {
    type: String,
    defalut: "",
  },
  list: Array<Receipt>,
});
const openid = uni.getStorageSync("openid");

const emit = defineEmits(["update:show"]);
const value = ref("1");

let receptList: any = ref([]);

watch(
  () => props.list,
  (newVal) => {
    receptList.value = newVal;
  },
  { deep: true, immediate: true }
);

watch(
  () => props.show,
  (newVal) => {
    if (newVal) {
      discountId.value = "";
    }
  }
);

const toUploadImage = (type: string) => {
  if (!discountId.value) {
    uni.showToast({
      title: "请先选择优惠力度",
      icon: "error",
    });
    return;
  }
  const params = {
    openid,
    marketingActivityId: props.id,
    discountId: discountId.value,
  };
  validate(params)
    .then((res: any) => {
      if (res.valid) {
        uni.navigateTo({
          url: `/pagesOne/winner/uploadImage?discountId=${discountId.value}&discountLevel=${discountLevel.value}`,
        });
        return;
      } else {
        uni.showModal({
          title: "提示",
          content: res.message || "",
          showCancel: false, // 如果只需要确定按钮，可以隐藏取消按钮
        });

        for (let i of receptList.value) {
          if (i.id === discountId.value) {
            i.disabled = true;
          }
        }
      }
    })
    .catch((err) => {
      uni.showModal({
        title: "提示",
        content: err.message || "网络异常，请稍后再试",
        showCancel: false,
      });
    });

  emit("update:show", false);
};

const discountId = ref<string>("");
const discountLevel = ref<string>("");

const radioChange = (e: any) => {
  discountId.value = e.detail.value;
  const obj = receptList.value.filter(
    (item: any) => item.id === e.detail.value
  )[0];
  discountLevel.value = `满${obj.thresholdAmount}返${obj.cashbackAmount}`;
};

const { handleClose } = useDraw(props, emit);
</script>

<style lang="scss">
.uploadReceptPopup {
  .topTitle {
    font-size: 36rpx;
    color: #1f1f39;
    height: 80rpx;
    text-align: center;
    margin-top: 26rpx;
    .tips {
      font-size: 20rpx;
      color: #bfc8db;
    }
  }
  .receptBox {
    max-height: 350rpx;
    overflow-y: scroll;
  }
  .radioItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 60rpx;
    height: 80rpx;
    box-sizing: border-box;
    color: #333;
    font-size: 32rpx;
    .left {
      display: flex;
      align-items: center;
    }
    .icon {
      width: 36rpx;
      height: 36rpx;
      margin-right: 20rpx;
    }
    &.active {
      background-color: #f7f8f9;
    }
    &.static {
      background-color: #fff;
    }
  }
  .radioItem:focus {
    background-color: pink;
  }
  .btnBox {
    font-size: 36rpx;
    color: #555d6c;
    margin-top: 48rpx;
    > view {
      text-align: center;
      width: 100%;
      line-height: 108rpx;
    }
    .play {
      background: #f7f8f9;
    }
  }
}
</style>