标签

src/components/tab-view/index.vue

@@ -52,7 +52,7 @@ onLoad(() => {
 
 <template>
   <view class="w-full h-full">
-    <view class="w-full h-full flex flex-col" v-if="props.tabs && props.tabs.length > 0">
+    <view class="w-full h-full flex flex-col bg-white" v-if="props.tabs && props.tabs.length > 0">
       <view class="text-left p-2">
         <view class="inline-block mx-2" v-for="(item, index) in props.tabs" :key="index"
               :class="{'font-bold': isCurrent(index)}"

src/pages/commodity/components/comments/tags.vue

@@ -1,10 +1,57 @@
 <script setup>
+import {reactive} from "vue"
 
+const ctx = reactive({
+  current: "-1",
+  tags: [
+    {
+      name: "全部",
+      value: "-1"
+    },
+    {
+      name: "有图评价",
+      value: "0"
+    },
+    {
+      name: "好评",
+      value: "1"
+    },
+    {
+      name: "中评",
+      value: "2"
+    },
+    {
+      name: "差评",
+      value: "3"
+    },
+    {
+      name: "味道赞",
+      value: "5"
+    },
+    {
+      name: "服务好",
+      value: "6"
+    }
+  ],
+
+})
+
+function isCurrent(item) {
+  return ctx.current === item.value
+}
+
+function changeCurrent(item) {
+  ctx.current = item.value
+}
 </script>
 
 <template>
-  <view class="bg-white w-full">
+  <view class="bg-white w-full text-left flex flex-wrap">
-
+    <view class="border  inline-block m-2 px-3 py-2" v-for="item in ctx.tags" :key="item.value"
+          @tap="changeCurrent(item)"
+          :class="{'text-orange-500 border-orange-500':isCurrent(item),  'border-gray-300 text-gray-400': !isCurrent(item)}">
+      {{ item.name }}
+    </view>
   </view>
 </template>