添加捐款相关UI

src/components/RewardUs.vue

@@ -0,0 +1,154 @@
+<script setup>
+import { ref, reactive } from "vue";
+const props = defineProps({
+  src: {
+    type: String,
+    default: "",
+  },
+});
+const amounts = [5, 20, 50, 80, 100, 200];
+const selected = ref(null);
+
+const formData = reactive({
+  name: "",
+  account: "",
+  organization: "",
+  suggestion: "",
+});
+
+const onPay = (index) => {
+  selected.value = index;
+};
+</script>
+
+<template>
+  <view class="container">
+    <text>感谢您对我们公益项目的支持！</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>
+      <image src="../static/checked.png" mode="widthFix" />
+      <text>我想给建议(选填）</text>
+    </view>
+    <view>
+      <view>
+        <text>您的姓名</text>
+        <input v-model="formData.name" />
+      </view>
+      <view>
+        <text>手机/微信号</text>
+        <input v-model="formData.account" />
+      </view>
+      <view>
+        <text>所在机构</text>
+        <input v-model="formData.organization" />
+      </view>
+      <view>
+        <text>建议</text>
+        <textarea v-model="formData.suggestion" />
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.container > text:first-child {
+  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: 30rpx;
+}
+.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(3) {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.container > view:nth-child(3) > image {
+  width: 32rpx;
+  height: 32rpx;
+  margin-right: 10rpx;
+}
+.container > view:nth-child(3) > text {
+  font-size: 24rpx;
+  color: #333333;
+  margin: 20rpx 0;
+}
+.container > view:nth-child(4) {
+  margin-bottom: 25rpx;
+}
+.container > view:nth-child(4) > view {
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  margin-bottom: 20rpx;
+}
+.container > view:nth-child(4) > view > text {
+  font-size: 24rpx;
+  color: #333333;
+  width: 30%;
+  text-align: right;
+  padding-right: 20rpx;
+  height: 60rpx;
+  line-height: 60rpx;
+}
+.container > view:nth-child(4) > view > input {
+  border-radius: 12rpx;
+  border: 1rpx solid #fed848;
+  height: 40rpx;
+  line-height: 40rpx;
+  padding: 10rpx;
+  font-size: 30rpx;
+}
+.container > view:nth-child(4) > view > textarea {
+  width: 70%;
+  border-radius: 12rpx;
+  border: 1rpx solid #fed848;
+  height: 100rpx;
+  line-height: 40rpx;
+  padding: 10rpx;
+  font-size: 30rpx;
+}
+</style>

src/pages/point-book.vue

@@ -6,6 +6,8 @@ import PointRecord from "@/components/PointRecord.vue";
 import RingBarChart from "@/components/RingBarChart.vue";
 import SModal from "@/components/SModal.vue";
 import Signin from "@/components/Signin.vue";
+import ScreenHint2 from "@/components/ScreenHint2.vue";
+import RewardUs from "@/components/RewardUs.vue";
 
 import {
   getHomeData,
@@ -28,6 +30,7 @@ const isIOS = computed(() => {
 });
 
 const showModal = ref(false);
+const showTip = ref(false);
 const data = ref({
   yellowRate: 0,
   weeksCheckIn: [],
@@ -269,11 +272,11 @@ onShareTimeline(() => {
         />
         <canvas canvas-id="heatMapCanvas" style="width: 100%; height: 100%" />
       </view>
-      <!-- <view class="reward">
+      <view class="reward">
-        <button hover-class="none">
+        <button hover-class="none" @click="showTip = true">
           <image src="../static/reward-us.png" mode="widthFix" />
         </button>
-      </view> -->
+      </view>
       <RingBarChart :data="data.ringRate" />
       <view class="title">
         <image src="../static/point-book-title2.png" mode="widthFix" />
@@ -294,6 +297,9 @@ onShareTimeline(() => {
     <SModal :show="showModal" :onClose="() => (showModal = false)" :noBg="true">
       <Signin :onClose="() => (showModal = false)" :noBg="true" />
     </SModal>
+    <ScreenHint2 :show="showTip" :onClose="() => (showTip = false)">
+      <RewardUs />
+    </ScreenHint2>
   </Container>
 </template>
 
@@ -417,6 +423,8 @@ onShareTimeline(() => {
   display: flex;
   justify-content: flex-end;
   margin-top: -100rpx;
+  position: relative;
+  z-index: 10;
 }
 .reward > button {
   width: 100rpx;