对Lab4的代码继续完善，正在思考支付模块代码冗余了的问题

components.d.ts

@@ -8,13 +8,33 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     CommentItem: typeof import('./src/components/CommentItem.vue')['default']
+    ElAside: typeof import('element-plus/es')['ElAside']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
+    ElCarousel: typeof import('element-plus/es')['ElCarousel']
+    ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
+    ElCol: typeof import('element-plus/es')['ElCol']
     ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
+    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElHeader: typeof import('element-plus/es')['ElHeader']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMain: typeof import('element-plus/es')['ElMain']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElRate: typeof import('element-plus/es')['ElRate']
+    ElRow: typeof import('element-plus/es')['ElRow']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElTag: typeof import('element-plus/es')['ElTag']
     Header: typeof import('./src/components/Header.vue')['default']
     OrderItem: typeof import('./src/components/OrderItem.vue')['default']
+    PayComponent: typeof import('./src/components/PayComponent.vue')['default']
+    PayItem: typeof import('./src/components/PayItem.vue')['default']
     ProductItem: typeof import('./src/components/ProductItem.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/components/Header.vue

@@ -56,6 +56,14 @@ function logout() {
         </router-link>
       </el-col>
 
+<!--      Lab4新增 -->
+<!--      或许你可以在这里新增一个按钮，然后新增一个全部优惠券的界面-->
+<!--      <el-col :span="1" class="header-icon">-->
+<!--        <router-link to="/allCoupon" v-slot="{navigate}">-->
+<!--          <el-icon @click="navigate" :size="35" color="white" ><Discount /></el-icon>-->
+<!--        </router-link>-->
+<!--      </el-col>-->
+
       <el-col :span="1" class="header-icon">
         <a @click="logout">
           <el-icon :size="35" color="white" ><SwitchButton /></el-icon>

src/components/OrderItem.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import {ref, computed} from "vue"
-import {deliverOrder, getOrder, getOrderById, payOrder, commentOrder} from "../api/order"
-import {parseOrderType, parseTime} from "../utils";
-
+import {deliverOrder, getOrder, getOrderById, commentOrder, payOrder} from "../api/order"
+import {parseOrderType, parseRating, parseTime} from "../utils";
 const props = defineProps({
   orderId: {
     type: Number,
@@ -30,12 +29,12 @@ const finishTime = ref('')
 const storeId = ref(0)
 
 const totalPrice = ref(0)
-const discountPrice = ref(0)
 
 getOrderDetail()
 
 function getOrderDetail() {
   getOrderById(props.orderId).then(res => {
+    //console.log(res)
     userId.value = res.data.result.userId
     productId.value = res.data.result.productId
     productName.value = res.data.result.productName
@@ -44,14 +43,13 @@ function getOrderDetail() {
     paid.value = res.data.result.paid
     type.value = res.data.result.type
     content.value = res.data.result.content
-    rating.value = res.data.result.rating
+    rating.value = parseRating(res.data.result.rating)
     status.value = res.data.result.status
     createTime.value = res.data.result.createTime
     finishTime.value = res.data.result.finishTime
     storeId.value = res.data.result.storeId
 
     totalPrice.value = amount.value * price.value
-    discountPrice.value = totalPrice.value
   })
 }
 
@@ -68,6 +66,7 @@ function handleConfirmOrder() {
         center: true,
       })
       getOrderDetail()
+      orderDialogVisible.value = false
     } else if (res.data.code === '400') {
       ElMessage({
         message: res.data.msg,
@@ -78,10 +77,6 @@ function handleConfirmOrder() {
   })
 }
 
-function handlePayDialogClose() {
-  orderDialogVisible.value = false
-}
-
 function handleDeliver() {
   deliverOrder(props.orderId).then(res => {
     if (res.data.code === '000') {
@@ -125,7 +120,6 @@ function handleComment() {
 }
 
 function handleSendComment() {
-
   const payload = {
     orderId: props.orderId,
     comment: content.value,
@@ -151,14 +145,6 @@ function handleSendComment() {
   })
 }
 
-function parsePaid() {
-  if (paid.value === null) {
-    return "暂未支付"
-  } else {
-    return paid.value + " 元"
-  }
-}
-
 // 对于变化的内容使用计算属性返回响应式结果
 const statusText = computed(() => {
   switch (status.value) {
@@ -189,6 +175,7 @@ const statusText = computed(() => {
           <el-tag style="margin-left: 8px" v-if="status!=='DONE'" type="info"> {{ statusText }}</el-tag>
           <el-tag style="margin-left: 8px" v-if="status==='DONE'" type="success"> {{ statusText }}</el-tag>
         </div>
+
         <el-button @click="handlePay" v-if="status==='UNPAID' && role==='CUSTOMER'"
                    class="status-change-button" size="small" type="primary">
           支付
@@ -217,12 +204,9 @@ const statusText = computed(() => {
       <el-descriptions-item style="font-size: 15px" label="数量">
         {{ amount }} 件
       </el-descriptions-item>
-      <el-descriptions-item style="font-size: 15px" label="订单原价">
+      <el-descriptions-item style="font-size: 15px" label="总价">
         {{ totalPrice }} 元
       </el-descriptions-item>
-      <el-descriptions-item style="font-size: 15px" label="实付金额">
-        {{ parsePaid() }}
-      </el-descriptions-item>
       <el-descriptions-item style="font-size: 15px" label="取货类型">
         <el-tag> {{ parseOrderType(type) }}</el-tag>
       </el-descriptions-item>
@@ -248,7 +232,7 @@ const statusText = computed(() => {
     </el-descriptions>
   </el-card>
 
-  <el-dialog v-model="orderDialogVisible" :before-close="handlePayDialogClose">
+  <el-dialog v-model="orderDialogVisible">
     <el-row>
       <span class="pay-dialog-title">订单支付</span>
     </el-row>
@@ -259,17 +243,13 @@ const statusText = computed(() => {
           <label>购买数量：</label>
           {{ amount }} 件
         </el-form-item>
-        <el-form-item>
-          <label>折扣前总价：</label>
-          {{ totalPrice }} 元
-        </el-form-item>
         <el-form-item>
           <label>提货方式：</label>
           {{ parseOrderType(type) }}
         </el-form-item>
         <el-form-item>
-          <label>折扣后金额：</label>
-          {{ discountPrice }} 元
+          <label>总价：</label>
+          {{ totalPrice }} 元
         </el-form-item>
       </el-form>
       <el-button @click="handleConfirmOrder" type="primary" plain>
@@ -299,7 +279,7 @@ const statusText = computed(() => {
       </el-form-item>
 
       <el-form-item>
-        <el-button type="primary" @click="handleSendComment">评价</el-button>
+        <el-button type="primary" @click="handleSendComment">确定评价</el-button>
         <el-button @click="commentDialogVisible = false">取消</el-button>
       </el-form-item>
     </el-form>

src/components/ProductItem.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import {ref} from "vue"
 import {getProductById} from "../api/product.ts"
-import {parseCategory} from "../utils"
+import {parseCategory, parseRating} from "../utils"
 
 // 使用props接收父界面传来的数据
 const props = defineProps({
@@ -14,6 +14,9 @@ const props = defineProps({
 const storeId = ref(0)
 const name = ref('')
 const photoUrlList = ref([])
+const rating = ref(0)
+const number = ref(0)
+const salesAmount = ref(0)
 const stock = ref(0)
 const category = ref()
 const price = ref()
@@ -23,6 +26,9 @@ getProductById(props.productId).then(res => {
   storeId.value = res.data.result.storeId
   name.value = res.data.result.name
   photoUrlList.value = res.data.result.photoUrlList
+  rating.value = parseRating(res.data.result.rating)
+  number.value = res.data.result.number
+  salesAmount.value = res.data.result.salesAmount
   stock.value = res.data.result.stock
   category.value = res.data.result.category
   price.value = res.data.result.price
@@ -46,6 +52,23 @@ getProductById(props.productId).then(res => {
         <el-descriptions-item style="font-size: 10px" label="价格">
           {{ price }} 元
         </el-descriptions-item>
+
+        <!--Lab3新增，商品评分&销量-->
+        <el-descriptions-item style="font-size: 10px" label="评分">
+          <el-rate
+              v-model="rating"
+              disabled
+              show-score
+              text-color="#ff9900"
+              score-template="{value} 分"
+              size="small"
+          />
+          （共 {{ number }} 人打分）
+        </el-descriptions-item>
+        <el-descriptions-item style="font-size: 10px" label="销量">
+          {{ salesAmount }} 件
+        </el-descriptions-item>
+
         <el-descriptions-item style="font-size: 10px" label="库存">
           {{ stock }} 件
         </el-descriptions-item>

src/components/StoreItem.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import {ref} from "vue"
 import {getStoreById} from "../api/store.ts"
+import {parseRating} from "../utils";
 
 // 使用props接收父界面传来的数据
 const props = defineProps({
@@ -12,11 +13,15 @@ const props = defineProps({
 
 const name = ref('')
 const logoUrl = ref('')
+const rating = ref(0)
+const number = ref(0)
 const location = ref('')
 
 getStoreById(props.storeId).then(res => {
   name.value = res.data.result.name
   logoUrl.value = res.data.result.logoUrl
+  rating.value = parseRating(res.data.result.rating)
+  number.value = res.data.result.number
   location.value = res.data.result.location
 })
 </script>
@@ -29,6 +34,20 @@ getStoreById(props.storeId).then(res => {
     <div style="padding: 14px">
       <h1> {{ name }} </h1>
       <el-descriptions :column="1">
+
+        <!--Lab3新增的，商店评分-->
+        <el-descriptions-item style="font-size: 10px" label="评分">
+          <el-rate
+              v-model="rating"
+              disabled
+              show-score
+              text-color="#ff9900"
+              score-template="{value} 分"
+              size="small"
+          />
+          （共 {{ number }} 人打分）
+        </el-descriptions-item>
+
         <el-descriptions-item style="font-size: 10px" label="地址">
           {{ location }}
         </el-descriptions-item>

src/router/index.ts

@@ -69,6 +69,8 @@ const router = createRouter({
                 }
             },
 
+        //  如果优惠券模块有新增界面，记得添加在这里
+
         ]
     }, {
         path: '/404',

src/utils/index.ts

@@ -13,6 +13,9 @@ export function parseRole(role: string | null) {
 
 //将时间转化为日常方式
 export function parseTime(time: string) {
+    if (time === null) {
+        return "尚未完成"
+    }
     let times = time.split(/T|\./)
     return times[0] + " " + times[1]
 }
@@ -45,3 +48,11 @@ export function parseOrderType(type: string) {
     }
 }
 
+//控制评分的长度，保留一位小数
+export function parseRating(rating: number|null) {
+    if (rating === null) {
+        return 0
+    } else {
+        return Number(rating.toFixed(1))
+    }
+}

src/views/product/ProductDetail.vue

@@ -6,7 +6,7 @@ import {addStock, getProductById} from "../../api/product.ts"
 import {createOrder, payOrder} from "../../api/order.ts"
 import {getCommentsById} from "../../api/product.ts"
 import CommentItem from "../../components/CommentItem.vue"
-import {parseCategory, parseOrderType} from "../../utils"
+import {parseCategory, parseOrderType, parseRating} from "../../utils"
 
 const role = sessionStorage.getItem("role")
 
@@ -18,13 +18,12 @@ const photoUrlList = ref([])
 const rating = ref(0)
 const number = ref(0)
 const salesAmount = ref(0)
-const stock = ref(0)
+const stock = ref(10)
 const category = ref('')
 const price = ref(0)
 
 const amount = ref(1)
 const totalPrice = ref(price.value)
-const discountPrice = ref(0)
 
 const handleChange = () => {
   totalPrice.value = amount.value * price.value
@@ -59,7 +58,7 @@ function getProductDetail() {
     storeId.value = productVO.value.storeId
     name.value = productVO.value.name
     photoUrlList.value = productVO.value.photoUrlList
-    rating.value = productVO.value.rating
+    rating.value = parseRating(productVO.value.rating)
     number.value = productVO.value.number
     salesAmount.value = productVO.value.salesAmount
     stock.value = productVO.value.stock
@@ -107,7 +106,6 @@ function handleCreateOrder() {
       })
       orderId.value = res.data.result.id
       orderDialogVisible.value = true
-      discountPrice.value = totalPrice.value
     } else if (res.data.code === '400') {
       ElMessage({
         message: res.data.msg,
@@ -118,7 +116,6 @@ function handleCreateOrder() {
   })
 }
 
-// 确定订单按钮
 function handleConfirmOrder() {
   payOrder(orderId.value).then(res => {
     if (res.data.code === '000') {
@@ -127,6 +124,7 @@ function handleConfirmOrder() {
         type: 'success',
         center: true,
       })
+      orderDialogVisible.value = false
     } else if (res.data.code === '400') {
       ElMessage({
         message: res.data.msg,
@@ -137,10 +135,6 @@ function handleConfirmOrder() {
   })
 }
 
-function handlePayDialogClose() {
-  orderDialogVisible.value = false
-}
-
 function toBackPage() {
   router.push("/storeDetail/" + storeId.value)
 }
@@ -206,7 +200,7 @@ function toBackPage() {
         <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-input-number v-model="amount" :min="1" :max="stock" @change="handleChange"/>
           </el-form-item>
           <el-form-item>
             <label for="type">提货方式：</label>
@@ -218,8 +212,9 @@ function toBackPage() {
               <el-option value="DELIVERY" label="快递到家"/>
             </el-select>
           </el-form-item>
+
           <el-form-item>
-            <label for="discountPrice">折扣前总价：</label>
+            <label for="totalPrice">总价：</label>
             {{ totalPrice }} 元
           </el-form-item>
         </el-form>
@@ -254,7 +249,7 @@ function toBackPage() {
       </div>
     </el-main>
 
-    <el-dialog v-model="orderDialogVisible" :before-close="handlePayDialogClose">
+    <el-dialog v-model="orderDialogVisible">
       <el-row>
         <span class="pay-dialog-title">订单支付</span>
       </el-row>
@@ -262,25 +257,21 @@ function toBackPage() {
       <div>
         <el-form>
           <el-form-item>
-            <label for="amount">购买数量：</label>
+            <label>购买数量：</label>
             {{ amount }} 件
           </el-form-item>
           <el-form-item>
-            <label for="type">提货方式：</label>
+            <label>提货方式：</label>
             {{ parseOrderType(type) }}
           </el-form-item>
           <el-form-item>
-            <label for="discountPrice">折扣前总价：</label>
+            <label>总价：</label>
             {{ totalPrice }} 元
           </el-form-item>
-
-          <el-form-item>
-            <label>折扣后金额：</label>
-            {{ discountPrice }} 元
-          </el-form-item>
         </el-form>
-
-        <el-button @click="handleConfirmOrder" type="primary" plain>确认支付</el-button>
+        <el-button @click="handleConfirmOrder" type="primary" plain>
+          确认支付
+        </el-button>
       </div>
     </el-dialog>
   </el-container>

src/views/store/StoreDetail.vue

@@ -5,6 +5,7 @@ import {getStoreById} from "../../api/store.ts"
 import {getProductsByStoreId} from "../../api/product.ts"
 import {Back} from "@element-plus/icons-vue"
 import ProductItem from "../../components/ProductItem.vue"
+import {parseRating} from "../../utils";
 
 const role = sessionStorage.getItem("role")
 // 从当前router地址中获得storeId参数值
@@ -13,6 +14,8 @@ const actualStoreId = sessionStorage.getItem("storeId")
 const storeVO = ref()
 const name = ref('')
 const logoUrl = ref('')
+const rating = ref(0)
+const number = ref(0)
 const location = ref('')
 const productList = ref()
 
@@ -23,6 +26,8 @@ getStoreById(Number(storeId)).then(res => {
   storeVO.value = res.data.result
   name.value = storeVO.value.name
   logoUrl.value = storeVO.value.logoUrl
+  rating.value = parseRating(storeVO.value.rating)
+  number.value = storeVO.value.number
   location.value = storeVO.value.location
 })
 
@@ -60,6 +65,20 @@ function toBackPage() {
         <span class="store-title">{{ name }}</span>
 
         <el-descriptions :column="1">
+
+          <!--Lab3新增，商店评分-->
+          <el-descriptions-item style="font-size: 10px" label="评分">
+            <el-rate
+                v-model="rating"
+                disabled
+                show-score
+                text-color="#ff9900"
+                score-template="{value} 分"
+                size="small"
+            />
+            （共 {{ number }} 人打分）
+          </el-descriptions-item>
+
           <el-descriptions-item style="font-size: 10px" label="地址">
             {{ location }}
           </el-descriptions-item>