shoot-miniprograms/src/components/RewardUs.vue

<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: 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(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;
  margin-right: 10rpx;
}
.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;
  margin-right: 10rpx;
}
</style>