代码提交

pages/goodsReply/goodsReply.vue

@@ -1,22 +1,39 @@
 <template>
   <layout class="replys">
     <uv-navbar
-      :fixed="false"
-      title="评价"
-      left-arrow
-      @leftClick="$onClickLeft"
+        :fixed="false"
+        title="评价"
+        left-arrow
+        @leftClick="goBack"
     />
-    <view v-if="replyListData">
-      <container>
-        <view class="reply-card">
-          <reply
-            v-for="(item, index) in replyListData"
-            :key="index"
-            :data="item"
-          />
-        </view>
-      </container>
+    <view class="tabs">
+      <view
+          class="item"
+          v-for="item in tabList"
+          :key="item.id"
+          :class="item.id === activeId && 'on'"
+          @tap="toggleTab(item.id)"
+      >
+        {{ item.text }}
+        <text v-if="item.id===0">({{ total }})</text>
+      </view>
     </view>
+    <view
+        class="reply-card"
+        v-if="replyListData.records && replyListData.records.length > 0"
+    >
+      <reply
+          v-for="(item, index) in replyListData.records"
+          :key="index"
+          :data="item"
+      />
+    </view>
+    <Empty
+        :iconSrc="emptyIcon"
+        v-else
+    >
+      暂无评论~
+    </Empty>
   </layout>
 </template>
 
@@ -24,30 +41,94 @@
 import { ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { replyList } from '@/api/goods'
-
+import Empty from '@/components/Empty/index.vue'
+import { useRouter } from "@/hooks/useRouter";
+import emptyIcon from '@/static/images/icon-dpj.png'
 
 const replyListData = ref([])
+const total = ref(0)
+const pid = ref(0)
+const activeId = ref(0)
+const tabList = ref([{
+  id: 0,
+  text: '全部'
+}, {
+  id: 1,
+  text: '好评'
+},
+  {
+    id: 2,
+    text: '中评'
+  }, {
+    id: 3,
+    text: '差评'
+  }, {
+    id: 4,
+    text: '有图'
+  }])
+const {getParams, goBack} = useRouter();
 
-const handleGetReplyList = async (id) => {
-  const data = await replyList({ id })
-  console.log("gxs --> % handleGetReplyList % data:\n", data)
-  replyListData.value = data
+const handleGetReplyList = async (type) => {
+  let params = {
+    id: pid.value
+  }
+  if (type) {
+    params.type = type
+  }
+  replyListData.value = await replyList(params)
+  replyListData.value.records.map(item => {
+    item.sku = item.sku.split(',').join('+')
+    return item
+  })
+  if (!type) {
+    total.value = replyListData.value.total
+  }
+}
+
+const toggleTab = (id) => {
+  activeId.value = id
+  handleGetReplyList(id)
 }
 
 onLoad((option) => {
-  handleGetReplyList(option.id)
+  const params = getParams(option)
+  pid.value = params.id
+  handleGetReplyList()
 })
 
 
-
 </script>
 
-<style lang="less">
+<style lang="scss">
 .reply-card {
-  margin-top: 20rpx;
 }
 
 .replys {
-  background: red;
+  background-color: #fff;
+
+  .tabs {
+    padding: 30rpx 34rpx;
+    display: flex;
+
+    .item {
+      height: 55rpx;
+      line-height: 55rpx;
+      border: 1rpx solid #333333;
+      margin-right: 20rpx;
+      padding: 0 16rpx;
+      font-size: 28rpx;
+      color: #333333;
+      cursor: pointer;
+
+      &:first-child {
+        padding: 0 15rpx;
+      }
+
+      &.on {
+        background: #333333;
+        color: #FFFFFF;
+      }
+    }
+  }
 }
 </style>