Feat:寻看点和抽奖

components/CheckboxIcon.vue

@@ -0,0 +1,55 @@
+<template>
+  <view class="components-checkbox-icon jc-center ai-center" :class="{'isSelected':isSelected}" @click="change">
+    <image class="icon-hook" :src="webUrl+'/20240109175325131970.png'" mode="scaleToFill" v-if="isSelected"/>
+  </view>
+</template>
+
+<script setup>
+import {VUE_APP_RESOURCES_URL} from '../config/index'
+
+export default {
+  name: 'CheckboxIcon',
+  props: {
+    defaultState: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      webUrl: VUE_APP_RESOURCES_URL
+    }
+  },
+  computed: {
+    isSelected: function() {
+      return this.defaultState
+    }
+  },
+  methods: {
+    change() {
+      this.$emit('change', !this.isSelected)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.components-checkbox-icon {
+  display: inline-flex;
+  width: 32rpx;
+  height: 32rpx;
+  box-sizing: border-box;
+  border: 2rpx solid #D5D7D8;
+  border-radius: 50%;
+}
+
+.icon-hook {
+  width: 24rpx;
+  height: 24rpx;
+}
+
+.isSelected {
+  border: 3px solid #FD5749;
+  background: #FD5749;
+}
+</style>