评分

src/components/tab-view/index.vue

@@ -33,6 +33,10 @@ function changeCurrent(index){
   ctx.current = index
 }
 
+defineExpose({
+  changeCurrent
+})
+
 function isCurrent(index){
   return ctx.current === index
 }

src/pages/commodity/commodity.vue

@@ -13,7 +13,7 @@
 
 
     <view class="text-center flex flex-col flex-grow min-h-0">
-      <TabView :tabs="ctx.tabs" class="flex-grow min-h-0">
+      <TabView :tabs="ctx.tabs" class="flex-grow min-h-0" ref="tabRef">
         <template #default="{index}" class="h-full">
           <SidebarView :categories="ctx.categories" v-show="index === 0" class="h-full">
             <template #default="{data}">
@@ -40,18 +40,25 @@
 </template>
 
 <script setup>
-import {reactive} from "vue";
+import {reactive,ref} from "vue";
-import {onLoad} from "@dcloudio/uni-app";
+import {onLoad, onReady} from "@dcloudio/uni-app";
 import ShopTitle from "./components/shop-title";
 import TabView from "@/components/tab-view/index.vue";
 import SidebarView from "@/components/sidebar-view";
 import Item from "@/components/tab-view/components/item";
 import Comments from "./components/comments/index.vue";
 
-onLoad((query) => {
+let query = {}
+const tabRef = ref()
+onLoad((q) => {
+  query = q
   console.log(query)
 })
 
+onReady(()=>{
+  tabRef.value.changeCurrent(query?.index || 0)
+})
+
 const ctx = reactive({
   tabs: [
     {
@@ -77,6 +84,7 @@ const ctx = reactive({
       value: "catering"
     }]
 })
+
 </script>
 
 

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

@@ -1,10 +1,17 @@
 <script setup>
-
+import Rate from "./rate.vue";
+import Tags from "./tags.vue";
 </script>
 
 <template>
-  <view class="flex flex-col w-full h-full">
+  <view class="flex flex-col w-full h-full bg-[#F4F4F4]">
-    评论
+    <view class="my-1">
+      <Rate />
+    </view>
+
+    <view class="my-1">
+      <Tags />
+    </view>
   </view>
 </template>
 

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

@@ -0,0 +1,53 @@
+<script setup>
+
+</script>
+
+<template>
+  <view class="flex flex-col w-full h-full text-gray-400 text-sm bg-white">
+    <view class="flex text-center py-2">
+      <view class="w-1/4">
+        <view class="text-3xl text-orange-500">
+          4.7
+        </view>
+        <text>
+          商家评分
+        </text>
+      </view>
+
+      <view class="w-1/2 border-r border-r-gray-300 px-2">
+        <view class="flex flex-col justify-between h-full">
+          <view class="flex justify-between">
+            <view class="flex">
+              <text class="mr-5">口味</text>
+              <uni-rate :size="16" :value="4.7"/>
+            </view>
+
+            <text class="text-orange-500">4.7</text>
+          </view>
+
+          <view class="flex justify-between">
+            <view class="flex">
+              <text class="mr-5">包装</text>
+              <uni-rate :size="16" :value="3.6"/>
+            </view>
+
+            <text class="text-orange-500">3.6</text>
+          </view>
+        </view>
+      </view>
+
+      <view class="w-1/4">
+        <view class="text-2xl text-gray-500">
+          4.9
+        </view>
+        <text>
+          配送评分
+        </text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+  <view class="bg-white w-full">
+
+  </view>
+</template>
+
+<style scoped>
+
+</style>