添加商品评论区

src/api/_prefix.ts

@@ -10,5 +10,3 @@ export const PRODUCT_MODULE= `${API_MODULE}/products`
 export const ORDER_MODULE= `${API_MODULE}/orders`
 //优惠券模块
 export const COUPON_MODULE= `${API_MODULE}/coupons`
-//评论模块
-export const COMMENT_MODULE= `${API_MODULE}/comments`

src/api/comment.ts

@@ -1,9 +0,0 @@
-import {axios} from '../utils/request'
-import {COMMENT_MODULE} from './_prefix'
-
-export const getCommentsById = productId => {
-    return axios.post(`${COMMENT_MODULE}/?id=${productId}`)
-        .then(res => {
-            return res;
-        })
-}

src/api/product.ts

@@ -33,3 +33,11 @@ export const addStock = (id, number) => {
             return res;
         })
 }
+
+//获取商品评论
+export const getCommentsById = productId => {
+    return axios.get(`${PRODUCT_MODULE}/comment/?productId=${productId}`)
+        .then(res => {
+            return res;
+        })
+}

src/components/CommentItem.vue

@@ -1,11 +1,58 @@
 <script setup lang="ts">
+import {ref} from "vue"
 
+const props = defineProps({
+  commentVO: {
+    type: Object,
+    required: true
+  }
+})
+
+const userName = ref('')
+const time = ref('')
+const rating = ref(0)
+const comment = ref('')
+
+userName.value = props.commentVO.userName
+time.value = parseTime(props.commentVO.time)
+rating.value = props.commentVO.rating
+comment.value = props.commentVO.comment
+
+function parseTime(time: string) {
+  let times = time.split(/T|\./)
+  return times[0] + " " + times[1]
+}
 </script>
 
 <template>
+  <el-card class="comment-item-card" :body-style="{ padding: '0px' }" shadow="hover">
+    <div class="comment-item-main">
+      <el-row>
+        用户“{{ userName }}”于 {{ time }} 为商品打分：
+        <el-rate
+            v-model="rating"
+            disabled
+            show-score
+            text-color="#ff9900"
+            score-template="{value} 分"
+            size="small"
+        />
+      </el-row>
+      并发布评论：{{ comment }}
+    </div>
+  </el-card>
 
 </template>
 
 <style scoped>
+.comment-item-card {
+  margin: 20px;
+  border-radius: 8px;
+  width: 60%;
+}
 
+.comment-item-main {
+  margin: 20px;
+  line-height: 30px;
+}
 </style>

src/components/Header.vue

@@ -23,13 +23,24 @@ function logout() {
   })
 }
 
-
 function search() {
   //todo: search
 
 }
 
-const currentIdentity = sessionStorage.getItem('role')
+const role = sessionStorage.getItem('role')
+
+function parseRole() {
+  if (role === 'MANAGER') {
+    return "管理员"
+  } else if (role === 'CUSTOMER') {
+    return "顾客"
+  } else if (role === 'STAFF') {
+    return "商家"
+  } else if (role === 'CEO') {
+    return "CEO"
+  }
+}
 
 </script>
 
@@ -39,14 +50,17 @@ const currentIdentity = sessionStorage.getItem('role')
 
     <el-row :gutter="10" :justify="'space-around'">
 
-      <el-col :span="4" class="header-icon">
+      <el-col :span="3" class="header-icon">
         <router-link to="/allStore" v-slot="{navigate}" class="no-link">
           <h1 @click="navigate" class="header-text"> 蓝鲸在线购物</h1>
         </router-link>
       </el-col>
 
-      <el-col :span="10">
+      <el-col :span="2">
+        <el-tag class="role-tag" size="large">{{ parseRole() }}版</el-tag>
+      </el-col>
 
+      <el-col :span="8">
       </el-col>
 
       <el-col :span="1" class="header-icon">
@@ -96,6 +110,11 @@ const currentIdentity = sessionStorage.getItem('role')
   text-decoration: none;
 }
 
+.role-tag {
+  margin-top: 20px;
+  font-size: 20px;
+}
+
 .header-text {
   color:white;
   font-size: x-large;

src/views/product/ProductDetail.vue

@@ -6,8 +6,8 @@ import {Back, RefreshRight} from "@element-plus/icons-vue";
 import {ElTable} from "element-plus";
 import {calculateOrder, createOrder, payOrder} from "../../api/order.ts";
 import {getAvailableCouponsByStoreId} from "../../api/coupon.ts";
-import {getCommentsById} from "../../api/comment.ts";
-import OrderItem from "../../components/OrderItem.vue";
+import {getCommentsById} from "../../api/product.ts";
+import CommentItem from "../../components/CommentItem.vue";
 
 const router = useRouter();
 const role = sessionStorage.getItem("role")
@@ -55,11 +55,12 @@ const commentList = ref([])
 
 getCommentsById(productId).then(res => {
   commentList.value = res.result
+  console.log(res)
 })
 
 getProductDetail()
 
-function getProductDetail () {
+function getProductDetail() {
   getProductById(productId).then(res => {
     productVO.value = res.result
     storeId.value = productVO.value.storeId
@@ -296,57 +297,62 @@ function toBackPage() {
       </div>
     </el-aside>
 
-    <el-main v-if="role === 'CUSTOMER'">
-      <div>
-        <span class="main-title">购买商品</span>
+    <el-main>
+      <div v-if="role === 'CUSTOMER'">
+        <div>
+          <span class="main-title">购买商品</span>
+        </div>
+        <el-form class="buy-form">
+          <el-form-item>
+            <label for="amount">购买数量：</label>
+            <el-input-number v-model="amount" :min="1" :max="stock + 10" @change="handleChange"/>
+          </el-form-item>
+          <el-form-item>
+            <label for="type">提货方式：</label>
+            <el-select id="type"
+                       v-model="type"
+                       placeholder="请选择"
+            >
+              <el-option value="PICKUP" label="到店自提"/>
+              <el-option value="DELIVERY" label="快递到家"/>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <label for="discountPrice">折扣前总价：</label>
+            {{ totalPrice }} 元
+          </el-form-item>
+        </el-form>
+        <el-button @click="handleCreateOrder" :disabled="createOrderDisabled"
+                   class="buy-button" type="primary" plain>创建订单
+        </el-button>
       </div>
-      <el-form class="buy-form">
-        <el-form-item>
-          <label for="amount">购买数量：</label>
-          <el-input-number v-model="amount" :min="1" :max="stock + 10" @change="handleChange"/>
-        </el-form-item>
-        <el-form-item>
-          <label for="type">提货方式：</label>
-          <el-select id="type"
-                     v-model="type"
-                     placeholder="请选择"
-          >
-            <el-option value="PICKUP" label="到店自提"/>
-            <el-option value="DELIVERY" label="快递到家"/>
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <label for="discountPrice">折扣前总价：</label>
-          {{ totalPrice }} 元
-        </el-form-item>
-      </el-form>
-      <el-button @click="handleCreateOrder" :disabled="createOrderDisabled"
-                 class="buy-button" type="primary" plain>创建订单
-      </el-button>
-    </el-main>
 
-    <el-main v-if="role === 'STAFF'">
-      <div>
-        <span class="main-title">添加库存</span>
+      <div v-if="role === 'STAFF'">
+        <div>
+          <span class="main-title">添加库存</span>
+        </div>
+        <div class="add-stock-main">
+          <el-input class="add-stock-number-input"
+                    v-model="addStockNumber" placeholder="请输入添加库存数">
+            <template #append>件</template>
+          </el-input>
+          <br>
+          <el-button @click="AddStock" :disabled="addStockDisabled"
+                     class="add-stock-button" type="primary" plain>
+            新增库存
+          </el-button>
+        </div>
       </div>
-      <div class="add-stock-main">
-        <el-input class="add-stock-number-input"
-                  v-model="addStockNumber" placeholder="请输入添加库存数">
-          <template #append>件</template>
-        </el-input>
-        <br>
-        <el-button @click="AddStock" :disabled="addStockDisabled"
-                   class="add-stock-button" type="primary" plain>
-          新增库存
-        </el-button>
+
+      <div>
+        <div>
+          <span class="main-title">评论区</span>
+        </div>
+        <commentItem v-for="commentVO in commentList" :commentVO="commentVO">
+        </commentItem>
       </div>
     </el-main>
 
-<!--    <div class="comment-item-list">-->
-<!--      <CommentItem-->
-<!--          v-for="commentVO in commentList"/>-->
-<!--    </div>-->
-
     <el-dialog v-model="orderDialogVisible" :before-close="handlePayDialogClose">
       <el-row>
         <span class="pay-dialog-title">订单支付</span>
@@ -469,6 +475,7 @@ function toBackPage() {
 
 .buy-button {
   margin-left: 30px;
+  margin-bottom: 40px;
 }
 
 .pay-dialog-title {