新建盐城德森项目

skyouc

2024-12-21 c9c263dc43ad90f95f24a036cee9e6b47afb596c

 uni_modules/uni-fav/components/uni-fav/uni-fav.vue

@@ -1,156 +1,156 @@
<template>
   <view :class="[circle === true || circle === 'true' ? 'uni-fav--circle' : '']" :style="[{ backgroundColor: checked ? bgColorChecked : bgColor }]"
    @click="onClick" class="uni-fav">
      <!-- #ifdef MP-ALIPAY -->
      <view class="uni-fav-star" v-if="!checked && (star === true || star === 'true')">
         <uni-icons :color="fgColor" :style="{color: checked ? fgColorChecked : fgColor}" size="14" type="star-filled" />
      </view>
      <!-- #endif -->
      <!-- #ifndef MP-ALIPAY -->
      <uni-icons :color="fgColor" :style="{color: checked ? fgColorChecked : fgColor}" class="uni-fav-star" size="14" type="star-filled"
       v-if="!checked && (star === true || star === 'true')" />
      <!-- #endif -->
      <text :style="{color: checked ? fgColorChecked : fgColor}" class="uni-fav-text">{{ checked ? contentFav : contentDefault }}</text>
   </view>
</template>

<script>

   /**
    * Fav 收藏按钮
    * @description 用于收藏功能，可点击切换选中、不选中的状态
    * @tutorial https://ext.dcloud.net.cn/plugin?id=864
    * @property {Boolean} star = [true|false] 按钮是否带星星
    * @property {String} bgColor 未收藏时的背景色
    * @property {String} bgColorChecked 已收藏时的背景色
    * @property {String} fgColor 未收藏时的文字颜色
    * @property {String} fgColorChecked 已收藏时的文字颜色
    * @property {Boolean} circle = [true|false] 是否为圆角
    * @property {Boolean} checked = [true|false] 是否为已收藏
    * @property {Object} contentText = [true|false] 收藏按钮文字
    * @event {Function} click 点击 fav按钮触发事件
    * @example <uni-fav :checked="true"/>
    */

   import {
      initVueI18n
   } from '@dcloudio/uni-i18n'
   import messages from './i18n/index.js'
   const {   t   } = initVueI18n(messages)

   export default {
      name: "UniFav",
      // TODO 兼容 vue3，需要注册事件
      emits: ['click'],
      props: {
         star: {
            type: [Boolean, String],
            default: true
         },
         bgColor: {
            type: String,
            default: "#eeeeee"
         },
         fgColor: {
            type: String,
            default: "#666666"
         },
         bgColorChecked: {
            type: String,
            default: "#007aff"
         },
         fgColorChecked: {
            type: String,
            default: "#FFFFFF"
         },
         circle: {
            type: [Boolean, String],
            default: false
         },
         checked: {
            type: Boolean,
            default: false
         },
         contentText: {
            type: Object,
            default () {
               return {
                  contentDefault: "",
                  contentFav: ""
               };
            }
         }
      },
      computed: {
         contentDefault() {
            return this.contentText.contentDefault || t("uni-fav.collect")
         },
         contentFav() {
            return this.contentText.contentFav || t("uni-fav.collected")
         },
      },
      watch: {
         checked() {
            if (uni.report) {
               if (this.checked) {
                  uni.report("收藏", "收藏");
               } else {
                  uni.report("取消收藏", "取消收藏");
               }
            }
         }
      },
      methods: {
         onClick() {
            this.$emit("click");
         }
      }
   };
</script>

<style lang="scss" scoped>
   $fav-height: 25px;

   .uni-fav {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: $fav-height;
      line-height: $fav-height;
      text-align: center;
      border-radius: 3px;
      /* #ifdef H5 */
      cursor: pointer;
      /* #endif */
   }

   .uni-fav--circle {
      border-radius: 30px;
   }

   .uni-fav-star {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      height: $fav-height;
      line-height: 24px;
      margin-right: 3px;
      align-items: center;
      justify-content: center;
   }

   .uni-fav-text {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      height: $fav-height;
      line-height: $fav-height;
      align-items: center;
      justify-content: center;
      font-size: 12px;
   }
</style>
<template>

   <view :class="[circle === true || circle === 'true' ? 'uni-fav--circle' : '']" :style="[{ backgroundColor: checked ? bgColorChecked : bgColor }]"

    @click="onClick" class="uni-fav">

      <!-- #ifdef MP-ALIPAY -->

      <view class="uni-fav-star" v-if="!checked && (star === true || star === 'true')">

         <uni-icons :color="fgColor" :style="{color: checked ? fgColorChecked : fgColor}" size="14" type="star-filled" />

      </view>

      <!-- #endif -->

      <!-- #ifndef MP-ALIPAY -->

      <uni-icons :color="fgColor" :style="{color: checked ? fgColorChecked : fgColor}" class="uni-fav-star" size="14" type="star-filled"

       v-if="!checked && (star === true || star === 'true')" />

      <!-- #endif -->

      <text :style="{color: checked ? fgColorChecked : fgColor}" class="uni-fav-text">{{ checked ? contentFav : contentDefault }}</text>

   </view>

</template>



<script>



   /**

    * Fav 收藏按钮

    * @description 用于收藏功能，可点击切换选中、不选中的状态

    * @tutorial https://ext.dcloud.net.cn/plugin?id=864

    * @property {Boolean} star = [true|false] 按钮是否带星星

    * @property {String} bgColor 未收藏时的背景色

    * @property {String} bgColorChecked 已收藏时的背景色

    * @property {String} fgColor 未收藏时的文字颜色

    * @property {String} fgColorChecked 已收藏时的文字颜色

    * @property {Boolean} circle = [true|false] 是否为圆角

    * @property {Boolean} checked = [true|false] 是否为已收藏

    * @property {Object} contentText = [true|false] 收藏按钮文字

    * @event {Function} click 点击 fav按钮触发事件

    * @example <uni-fav :checked="true"/>

    */



   import {

      initVueI18n

   } from '@dcloudio/uni-i18n'

   import messages from './i18n/index.js'

   const {   t   } = initVueI18n(messages)



   export default {

      name: "UniFav",

      // TODO 兼容 vue3，需要注册事件

      emits: ['click'],

      props: {

         star: {

            type: [Boolean, String],

            default: true

         },

         bgColor: {

            type: String,

            default: "#eeeeee"

         },

         fgColor: {

            type: String,

            default: "#666666"

         },

         bgColorChecked: {

            type: String,

            default: "#007aff"

         },

         fgColorChecked: {

            type: String,

            default: "#FFFFFF"

         },

         circle: {

            type: [Boolean, String],

            default: false

         },

         checked: {

            type: Boolean,

            default: false

         },

         contentText: {

            type: Object,

            default () {

               return {

                  contentDefault: "",

                  contentFav: ""

               };

            }

         }

      },

      computed: {

         contentDefault() {

            return this.contentText.contentDefault || t("uni-fav.collect")

         },

         contentFav() {

            return this.contentText.contentFav || t("uni-fav.collected")

         },

      },

      watch: {

         checked() {

            if (uni.report) {

               if (this.checked) {

                  uni.report("收藏", "收藏");

               } else {

                  uni.report("取消收藏", "取消收藏");

               }

            }

         }

      },

      methods: {

         onClick() {

            this.$emit("click");

         }

      }

   };

</script>



<style lang="scss" scoped>

   $fav-height: 25px;



   .uni-fav {

      /* #ifndef APP-NVUE */

      display: flex;

      /* #endif */

      flex-direction: row;

      align-items: center;

      justify-content: center;

      width: 60px;

      height: $fav-height;

      line-height: $fav-height;

      text-align: center;

      border-radius: 3px;

      /* #ifdef H5 */

      cursor: pointer;

      /* #endif */

   }



   .uni-fav--circle {

      border-radius: 30px;

   }



   .uni-fav-star {

      /* #ifndef APP-NVUE */

      display: flex;

      /* #endif */

      height: $fav-height;

      line-height: 24px;

      margin-right: 3px;

      align-items: center;

      justify-content: center;

   }



   .uni-fav-text {

      /* #ifndef APP-NVUE */

      display: flex;

      /* #endif */

      height: $fav-height;

      line-height: $fav-height;

      align-items: center;

      justify-content: center;

      font-size: 12px;

   }

</style>