shoot-miniprograms/src/components/RewardUs.vue

<script setup>
import { t } from "@/locales";

import { ref, reactive, watch, onMounted } from "vue";
import { getAppConfig, donateAPI } from "@/apis";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { config } = storeToRefs(store);
const { updateConfig } = store;

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  onClose: {
    type: Function,
    default: null,
  },
});
const amounts = ref([]);
const selected = ref(null);
const checked = ref(false);

const formData = reactive({
  name: "",
  account: "",
  organization: "",
  suggestion: "",
});

const onPay = async (index) => {
  selected.value = index;
  const result = await donateAPI(
    amounts.value[index],
    formData.name,
    formData.account,
    formData.organization,
    formData.suggestion
  );
  const params = result.order.jsApi.params;
  if (params) {
    wx.requestPayment({
      timeStamp: params.timeStamp,
      nonceStr: params.nonceStr,
      package: params.package,
      paySign: params.paySign,
      signType: "RSA",
      async success(res) {
        uni.showToast({
          title: t('thank_you_for_your_support'),
          icon: "none",
        });
        props.onClose();
      },
      fail(res) {
        console.log("pay error", res);
        uni.showToast({
          title: t('payment_canceled'),
          icon: "none",
        });
        props.onClose();
      },
    });
  }
};

watch(
  () => config.value.donateAmount,
  (value) => {
    amounts.value = value || [];
  },
  { immediate: true }
);

watch(
  () => props.show,
  () => {
    selected.value = null;
    formData.name = "";
    formData.account = "";
    formData.organization = "";
    formData.suggestion = "";
  }
);

onMounted(async () => {
  if (!config.value.donateAmount) {
    const config = await getAppConfig();
    updateConfig(config);
  }
});
</script>

<template>
  <view class="container">
    <image src="https://static.shelingxingqiu.com/shootmini/static/donate.png" mode="widthFix" />
    <text>{{ t('thank_you_for_supporting_our_community_project') }}</text>
    <view class="amounts">
      <button
        v-for="(item, index) in amounts"
        :key="index"
        hover-class="none"
        @click="onPay(index)"
        :style="{
          background: selected === index ? '#fed848' : 'white',
        }"
      >
        <text>￥</text>
        <text>{{ item }}</text>
      </button>
    </view>
    <view
      @click="checked = !checked"
      :style="{ marginBottom: !checked ? '20rpx' : '0' }"
    >
      <image v-if="checked" src="https://static.shelingxingqiu.com/shootmini/static/checked.png" mode="widthFix" />
      <view v-else></view>
      <text>{{ t('i_have_a_suggestion_optional') }}</text>
    </view>
    <view v-if="checked">
      <view>
        <text>{{ t('your_name') }}</text>
        <input v-model="formData.name" />
      </view>
      <view>
        <text>{{ t('phone_wechat_id') }}</text>
        <input v-model="formData.account" />
      </view>
      <view>
        <text>{{ t('organization') }}</text>
        <input v-model="formData.organization" />
      </view>
      <view>
        <text>{{ t('suggestion') }}</text>
        <textarea v-model="formData.suggestion" />
      </view>
    </view>
  </view>
</template>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease-in-out;
}
.container > image:first-child {
  width: 200rpx;
  position: absolute;
  top: -112rpx;
}
.container > text:nth-child(2) {
  font-weight: 500;
  font-size: 28rpx;
  color: #333333;
  margin: 40rpx 0;
}
.amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 20rpx;
  column-gap: 20rpx;
}
.amounts > button {
  width: 150rpx;
  height: 88rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  border: 1rpx solid #fed848;
  color: #333;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.amounts > button > text:first-child {
  font-size: 20rpx;
  margin-right: 3rpx;
}
.amounts > button > text:last-child {
  font-size: 34rpx;
}
.container > view:nth-child(4) {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 20rpx;
}
.container > view:nth-child(4) > view {
  width: 32rpx;
  height: 32rpx;
  margin: 0 10rpx;
  border: 1rpx solid #e3e3e3;
  border-radius: 50%;
}
.container > view:nth-child(4) > image {
  width: 32rpx;
  height: 32rpx;
  margin: 0 10rpx;
}
.container > view:nth-child(4) > text {
  font-size: 24rpx;
  color: #333333;
  margin: 20rpx 0;
}
.container > view:nth-child(5) {
  margin-bottom: 25rpx;
}
.container > view:nth-child(5) > view {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20rpx;
}
.container > view:nth-child(5) > view > text {
  font-size: 24rpx;
  color: #333333;
  width: 30%;
  text-align: right;
  padding-right: 20rpx;
  height: 60rpx;
  line-height: 60rpx;
}
.container > view:nth-child(5) > view > input {
  border-radius: 12rpx;
  border: 1rpx solid #fed848;
  height: 40rpx;
  line-height: 40rpx;
  padding: 10rpx 20rpx;
  font-size: 30rpx;
  margin-right: 10rpx;
  width: 55%;
}
.container > view:nth-child(5) > view > textarea {
  width: 55%;
  border-radius: 12rpx;
  border: 1rpx solid #fed848;
  height: 100rpx;
  line-height: 40rpx;
  padding: 10rpx 20rpx;
  font-size: 30rpx;
  margin-right: 10rpx;
}
</style>