chore(comment): 区分 taro/vue

src/packages/__VUE/comment/components/CmtBottom.taro.vue

@@ -0,0 +1,82 @@
+<template>
+  <view class="nut-comment-bottom">
+    <view @click="handleClick" class="nut-comment-bottom__lable">
+      <span v-if="type != 'complex'">{{ info.size }}</span></view
+    >
+
+    <view class="nut-comment-bottom__cpx">
+      <template v-for="(name, i) in mergeOp" :key="i">
+        <view :class="['nut-comment-bottom__cpx-item', `nut-comment-bottom__cpx-item--${name}`]" @click="operate(name)">
+          <template v-if="name != 'more'">
+            <span>{{ info[name] }}</span>
+            <Fabulous v-if="name == 'like'"></Fabulous>
+            <Comment v-else></Comment>
+          </template>
+          <template v-if="name == 'more'">
+            <MoreX></MoreX>
+            <view class="nut-comment-bottom__cpx-item-popover" v-if="showPopver" @click="operate('popover')">{{
+              translate('complaintsText')
+            }}</view>
+          </template>
+        </view>
+      </template>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+import { ref, watch, onMounted, PropType } from 'vue';
+import { createComponent } from '@/packages/utils/create';
+const { componentName, create, translate } = createComponent('comment-bottom');
+import { Fabulous, Comment, MoreX } from '@nutui/icons-vue-taro';
+
+export default create({
+  props: {
+    type: {
+      type: String,
+      default: 'base' // simple，base，complex
+    },
+    info: {
+      type: Object,
+      default: () => ({})
+    },
+
+    operation: {
+      type: Array as PropType<string[]>,
+      default: ['replay', 'like', 'more']
+    }
+  },
+  components: { Fabulous, Comment, MoreX },
+  emits: ['clickOperate', 'handleClick'],
+  setup(props, { emit }) {
+    const showPopver = ref(false);
+
+    const mergeOp = ref([]);
+
+    onMounted(() => {
+      const deOp = ['replay', 'like', 'more'];
+
+      if (props.operation) {
+        props.operation.forEach((name: string) => {
+          if (deOp.includes(name)) {
+            (mergeOp.value as any).push(name);
+          }
+        });
+      }
+    });
+
+    const operate = (type: string) => {
+      if (type == 'more') {
+        showPopver.value = !showPopver.value;
+      }
+
+      emit('clickOperate', type);
+    };
+
+    const handleClick = () => {
+      emit('handleClick');
+    };
+
+    return { showPopver, operate, mergeOp, handleClick, translate };
+  }
+});
+</script>

src/packages/__VUE/comment/components/CmtBottom.vue

@@ -37,7 +37,7 @@ export default create({
     },
     info: {
       type: Object,
-      default: () => {}
+      default: () => ({})
     },
 
     operation: {

src/packages/__VUE/comment/components/CmtHeader.taro.vue

@@ -0,0 +1,63 @@
+<template>
+  <view>
+    <view class="nut-comment-header" @click="handleClick" v-if="info">
+      <view class="nut-comment-header__user">
+        <view class="nut-comment-header__user-avter">
+          <img v-if="info.avatar" :src="info.avatar" />
+        </view>
+
+        <view :class="[`nut-comment-header__user-${type}`]" v-if="type == 'default'">
+          <view :class="[`nut-comment-header__user-${type}-name`]">
+            <span>{{ info.nickName }}</span>
+            <slot name="labels"></slot>
+          </view>
+
+          <view class="nut-comment-header__user-score">
+            <nut-rate v-model="info.score" icon-size="10" spacing="5" readonly :disabled="true" @change="handleClick" />
+          </view>
+        </view>
+
+        <view :class="[`nut-comment-header__user-${type}`]" v-else>
+          <span :class="[`nut-comment-header__user-${type}-name`]">{{ info.nickName }}</span>
+          <slot name="labels"></slot>
+        </view>
+      </view>
+      <view class="nut-comment-header__time" v-if="info.time">{{ info.time }}</view>
+    </view>
+    <view :class="[`nut-comment-header__${type}-score`]" v-if="type == 'complex'">
+      <nut-rate v-model="info.score" icon-size="12" spacing="3" readonly :disabled="true" />
+      <i :class="[`nut-comment-header__${type}-score-i`]"></i>
+      <view :class="[`nut-comment-header__${type}-score-size`]">{{ info.size }}</view>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+import { createComponent } from '@/packages/utils/create';
+const { componentName, create } = createComponent('comment-header');
+import Rate from '../../rate/index.taro.vue';
+
+export default create({
+  components: {
+    [Rate.name]: Rate
+  },
+  props: {
+    type: {
+      type: String,
+      default: 'default' // default，complex
+    },
+    info: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ['handleClick'],
+
+  setup(props, { emit }) {
+    const handleClick = () => {
+      emit('handleClick');
+    };
+
+    return { handleClick };
+  }
+});
+</script>

src/packages/__VUE/comment/components/CmtHeader.vue

@@ -32,12 +32,14 @@
   </view>
 </template>
 <script lang="ts">
-import { ref, watch, onMounted } from 'vue';
-
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('comment-header');
+import Rate from '../../rate/index.vue';
 
 export default create({
+  components: {
+    [Rate.name]: Rate
+  },
   props: {
     type: {
       type: String,
@@ -45,7 +47,7 @@ export default create({
     },
     info: {
       type: Object,
-      default: () => {}
+      default: () => ({})
     }
   },
   emits: ['handleClick'],

src/packages/__VUE/comment/components/CmtImages.taro.vue

@@ -0,0 +1,109 @@
+<template>
+  <view :class="`nut-comment-images nut-comment-images--${type}`">
+    <!-- videos -->
+    <view
+      class="nut-comment-images__item nut-comment-images__item--video"
+      v-for="(itV, index) in videos"
+      :key="itV.id"
+      @click="showImages('video', index)"
+    >
+      <img :src="itV.mainUrl" />
+      <view class="nut-comment-images__play"></view>
+    </view>
+    <!-- images -->
+    <template v-for="(itI, index) in images" :key="itI.id">
+      <view
+        class="nut-comment-images__item nut-comment-images__item--imgbox"
+        v-if="(type == 'multi' && videos.length + index < 9) || type != 'multi'"
+        @click="showImages('img', index + videos.length)"
+      >
+        <img :src="itI.smallImgUrl ? itI.smallImgUrl : itI.imgUrl" />
+
+        <view
+          class="nut-comment-images__mask"
+          v-if="type == 'multi' && totalImages.length > 9 && videos.length + index > 7"
+        >
+          <span>共 {{ totalImages.length }} 张</span>
+          <Right style="width: 12px"></Right>
+        </view>
+      </view>
+    </template>
+  </view>
+</template>
+<script lang="ts">
+import { ref, watch, onMounted, PropType } from 'vue';
+
+import { createComponent } from '@/packages/utils/create';
+const { componentName, create } = createComponent('comment-images');
+import { Right } from '@nutui/icons-vue-taro';
+
+interface VideosType {
+  id: number | string;
+  mainUrl: string;
+  videoUrl: string;
+}
+interface ImagesType {
+  smallImgUrl: string;
+  bigImgUrl: string;
+  imgUrl: string;
+}
+export default create({
+  props: {
+    type: {
+      type: String,
+      default: 'one' // one multi
+    },
+    videos: {
+      type: Array as PropType<VideosType[]>,
+      default: () => []
+    },
+    images: {
+      type: Array as PropType<ImagesType[]>,
+      default: () => []
+    }
+  },
+  components: { Right },
+  emits: ['click', 'clickImages'],
+
+  setup(props, { emit }) {
+    const isShowImage = ref(false);
+    const initIndex = ref(1);
+    const totalImages = ref<(VideosType | ImagesType)[]>([]);
+
+    watch(
+      () => [props.videos, props.images],
+      (value) => {
+        if (value[0].length > 0) {
+          value[0].forEach((el: any) => {
+            el.type = 'video';
+          });
+        }
+        totalImages.value = (value[0] as any).concat(value[1]);
+      },
+      { deep: true }
+    );
+
+    onMounted(() => {
+      if (props.videos.length > 0) {
+        props.videos.forEach((el: any) => {
+          el.type = 'video';
+        });
+      }
+      totalImages.value = (props.videos as any).concat(props.images);
+    });
+
+    const showImages = (type: string, index: string | number) => {
+      const { videos, images } = props;
+
+      const i = type == 'img' ? (index as number) - videos.length : index;
+      emit('clickImages', {
+        type,
+        index: i,
+        value: type == 'img' ? images[i as number] : videos[i as number]
+      });
+    };
+
+    return { isShowImage, initIndex, showImages, totalImages };
+  }
+});
+</script>

src/packages/__VUE/comment/index.taro.vue

@@ -42,11 +42,9 @@ import { ref, onMounted, computed, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('comment');
 import { Right } from '@nutui/icons-vue-taro';
-
 import CommentHeader from './components/CmtHeader.vue';
 import CommentImages from './components/CmtImages.vue';
 import CommentBottom from './components/CmtBottom.vue';
-import Rate from '../rate/index.taro.vue';
 
 interface VideosType {
   id: number | string;
@@ -87,12 +85,12 @@ export default create({
 
     info: {
       type: Object,
-      default: () => {}
+      default: () => ({})
     },
 
     follow: {
       type: Object,
-      default: () => {}
+      default: () => ({})
     },
 
     labels: {
@@ -106,7 +104,6 @@ export default create({
     }
   },
   components: {
-    [Rate.name]: Rate,
     CommentHeader,
     CommentImages,
     CommentBottom,

src/packages/__VUE/comment/index.vue

@@ -41,9 +41,7 @@
 import { ref, onMounted, computed, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create, translate } = createComponent('comment');
-import { JoySmile, Right } from '@nutui/icons-vue';
-import Rate from '../rate/index.vue';
-
+import { Right } from '@nutui/icons-vue';
 import CommentHeader from './components/CmtHeader.vue';
 import CommentImages from './components/CmtImages.vue';
 import CommentBottom from './components/CmtBottom.vue';
@@ -87,12 +85,12 @@ export default create({
 
     info: {
       type: Object,
-      default: () => {}
+      default: () => ({})
     },
 
     follow: {
       type: Object,
-      default: () => {}
+      default: () => ({})
     },
 
     labels: {
@@ -106,12 +104,10 @@ export default create({
     }
   },
   components: {
-    [Rate.name]: Rate,
     CommentHeader,
     CommentImages,
     CommentBottom,
-    Right,
-    JoySmile
+    Right
   },
   emits: ['click', 'clickImages', 'clickOperate'],