初步完善所有输入栏（无错误提示、无规则）

components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    CommentItem: typeof import('./src/components/CommentItem.vue')['default']
     ElAlert: typeof import('element-plus/es')['ElAlert']
     ElAside: typeof import('element-plus/es')['ElAside']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
@@ -34,6 +35,7 @@ declare module 'vue' {
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']
+    ElUpload: typeof import('element-plus/es')['ElUpload']
     Footer: typeof import('./src/components/Footer.vue')['default']
     Header: typeof import('./src/components/Header.vue')['default']
     OrderItem: typeof import('./src/components/OrderItem.vue')['default']

src/api/_prefix.ts

@@ -10,4 +10,5 @@ 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

@@ -0,0 +1,9 @@
+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/components/CommentItem.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>

src/components/OrderItem.vue

@@ -92,6 +92,14 @@ function parseType() {
   }
 }
 
+function parseNull(value) {
+  if (value === null) {
+    return "/"
+  } else {
+    return value
+  }
+}
+
 function handlePay() {
   orderDialogVisible.value = true
   getAvailableCouponList()
@@ -374,8 +382,16 @@ function parseOrderType(type) {
                 {{ parseCouponType(scope.row.type) }}
               </template>
             </el-table-column>
-            <el-table-column prop="satisfaction" label="满（元）" width="180"/>
-            <el-table-column prop="minus" label="减（元）" width="180"/>
+            <el-table-column prop="satisfaction" label="满（元）" width="180">
+              <template #default="scope">
+                {{ parseNull(scope.row.satisfaction) }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="minus" label="减（元）" width="180">
+              <template #default="scope">
+                {{ parseNull(scope.row.minus) }}
+              </template>
+            </el-table-column>
           </el-table>
         </el-form-item>
         <el-form-item>

src/views/coupon/AllCoupon.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {ref} from "vue";
+import {computed, ref} from "vue";
 import {createCoupons, getCouponGroups, getCoupons, receiveCouponGroup} from "../../api/coupon.ts";
 import {userInfo} from "../../api/user.ts";
 
@@ -7,21 +7,44 @@ const role = sessionStorage.getItem("role")
 const myCouponList = ref()
 const receiveCouponList = ref()
 const type = ref()
-const satisfaction = ref()
-const minus = ref()
-const rest = ref()
+const satisfaction = ref('')
+const minus = ref('')
+const rest = ref('')
 const storeName = ref()
 
 userInfo().then(res => {
   storeName.value = res.result.storeName
 })
 
-let couponDialogVisible = ref(false)
+const hasTypeInput = computed(() => type.value != null)
+const hasSatisfactionInput = computed(() => satisfaction.value != '')
+const hasMinusInput = computed(() => minus.value != '')
+const hasRestInput = computed(() => rest.value != '')
+
+const createCouponDisabled = computed(() => {
+  if (type.value === 'FULL_REDUCTION') {
+    return !(hasTypeInput.value && hasSatisfactionInput.value && hasMinusInput.value && hasRestInput.value);
+  } else if (type.value === 'SPECIAL') {
+    return !(hasTypeInput.value && hasRestInput.value);
+  } else {
+    return true;
+  }
+})
+
+const couponDialogVisible = ref(false)
 
 function toCreateCoupon() {
   couponDialogVisible.value = true
 }
 
+function handleCloseCouponDialog() {
+  type.value = null
+  satisfaction.value = ''
+  minus.value = ''
+  rest.value = ''
+  couponDialogVisible.value = false
+}
+
 function handleCreateCoupon() {
   const payload = {
     type: type.value,
@@ -56,12 +79,11 @@ getCoupons().then(res => {
   myCouponList.value = res.result
 })
 
-
 getCouponGroups().then(res => {
   receiveCouponList.value = res.result
 })
 
-function handleType(type) {
+function parseType(type) {
   if (type === "FULL_REDUCTION") {
     return "满减"
   } else if (type === "SPECIAL") {
@@ -69,6 +91,14 @@ function handleType(type) {
   }
 }
 
+function parseNull(value) {
+  if (value === null) {
+    return "/"
+  } else {
+    return value
+  }
+}
+
 function receiveCoupon(couponGroupId) {
   receiveCouponGroup(couponGroupId).then(res => {
     if (res.code === '000') {
@@ -97,7 +127,7 @@ function receiveCoupon(couponGroupId) {
       新增优惠券
     </el-button>
 
-    <el-dialog v-model="couponDialogVisible" title="创建优惠券">
+    <el-dialog v-model="couponDialogVisible" title="创建优惠券" :before-close="handleCloseCouponDialog">
       <el-form label-width="100px" class="create-coupon-form">
         <el-form-item label="应用范围：">
           <span v-if="role === 'MANAGER'">全平台</span>
@@ -144,7 +174,7 @@ function receiveCoupon(couponGroupId) {
           </el-input>
         </el-form-item>
 
-        <el-button @click.prevent="handleCreateCoupon()"
+        <el-button @click.prevent="handleCreateCoupon()" :disabled="createCouponDisabled"
                    type="primary" plain>
           创建
         </el-button>
@@ -160,11 +190,19 @@ function receiveCoupon(couponGroupId) {
           <el-table-column prop="storeName" label="所属商店" width="180"/>
           <el-table-column prop="type" label="类型" width="180">
             <template #default="scope">
-              {{ handleType(scope.row.type) }}
+              {{ parseType(scope.row.type) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="satisfaction" label="满（元）" width="180">
+            <template #default="scope">
+              {{ parseNull(scope.row.satisfaction) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="minus" label="减（元）" width="180">
+            <template #default="scope">
+              {{ parseNull(scope.row.minus) }}
             </template>
           </el-table-column>
-          <el-table-column prop="satisfaction" label="满（元）" width="180"/>
-          <el-table-column prop="minus" label="减（元）" width="180"/>
           <el-table-column prop="used" label="状态" width="180">
             <template #default="scope">
               <el-tag v-if="scope.row.used === false" type="success">待使用</el-tag>
@@ -183,11 +221,19 @@ function receiveCoupon(couponGroupId) {
           <el-table-column prop="storeName" label="所属商店" width="180"/>
           <el-table-column prop="type" label="类型" width="180">
             <template #default="scope">
-              {{ handleType(scope.row.type) }}
+              {{ parseType(scope.row.type) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="satisfaction" label="满（元）" width="180">
+            <template #default="scope">
+              {{ parseNull(scope.row.satisfaction) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="minus" label="减（元）" width="180">
+            <template #default="scope">
+              {{ parseNull(scope.row.minus) }}
             </template>
           </el-table-column>
-          <el-table-column prop="satisfaction" label="满（元）" width="180"/>
-          <el-table-column prop="minus" label="减（元）" width="180"/>
           <el-table-column prop="rest" label="剩余数量（张）" width="180"/>
           <el-table-column label="操作" v-if="role === 'CUSTOMER'">
             <template #default="scope">

src/views/product/CreateProduct.vue

@@ -8,21 +8,19 @@ import {Back, UploadFilled} from "@element-plus/icons-vue";
 const router = useRouter();
 const storeId = router.currentRoute.value.params.storeId;
 const name = ref('')
-const category = ref('')
+const category = ref()
 const price = ref()
 const photoUrlList = ref([])
 
+const imageFileList = ref([])
+
 const hasNameInput = computed(() => name.value != '')
-const hasCategoryInput = computed(() => category.value != '')
+const hasCategoryInput = computed(() => category.value != null)
 const hasPriceInput = computed(() => price.value != '')
-const nameLegal = hasNameInput
-const categoryLegal = hasCategoryInput
-const priceLegal = hasPriceInput
-
-const imageFileList = ref([])
+const hasImageFile =  computed(() => imageFileList.value.length != 0)
 
-const createDisabled = computed(() => {
-  return !(nameLegal.value && categoryLegal.value && priceLegal.value && photoUrlList.value);
+const createProductDisabled = computed(() => {
+  return !(hasNameInput.value && hasCategoryInput.value && hasPriceInput.value && hasImageFile.value);
 })
 
 function handleCreateProduct() {
@@ -128,8 +126,7 @@ function uploadHttpRequest() {
         </el-form-item>
 
         <el-form-item>
-          <el-button @click.prevent="handleCreateProduct()"
-                     :disabled="createDisabled"
+          <el-button @click.prevent="handleCreateProduct()" :disabled="createProductDisabled"
                      type="primary" plain>
             创建商品
           </el-button>

src/views/product/ProductDetail.vue

@@ -6,6 +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";
 
 const router = useRouter();
 const role = sessionStorage.getItem("role")
@@ -31,33 +33,50 @@ const handleChange = () => {
   totalPrice.value = amount.value * price.value
 }
 const type = ref()
-let orderDialogVisible = ref(false)
+const orderDialogVisible = ref(false)
 const orderId = ref()
 const couponId = ref(0)
+const addStockNumber = ref('')
 
-const hasTypeInput = computed(() => type.value != '')
-const typeLegal = hasTypeInput
+const hasTypeInput = computed(() => type.value != null)
+const hasAddStockInput = computed(() => addStockNumber.value != '')
 
-const createDisabled = computed(() => {
-  return !(nameLegal.value && locationLegal.value && imageFileList.value);
+const amountLegal = computed(() => amount.value <= stock.value)
+
+const createOrderDisabled = computed(() => {
+  return !(amountLegal.value && hasTypeInput.value);
+})
+
+const addStockDisabled = computed(() => {
+  return !(hasAddStockInput.value);
 })
 
-getProductById(productId).then(res => {
-  productVO.value = res.result
-  storeId.value = productVO.value.storeId
-  name.value = productVO.value.name
-  photoUrlList.value = productVO.value.photoUrlList
-  rating.value = productVO.value.rating
-  number.value = productVO.value.number
-  salesAmount.value = productVO.value.salesAmount
-  stock.value = productVO.value.stock
-  category.value = productVO.value.category
-  price.value = productVO.value.price
-
-  photoUrl.value = photoUrlList.value[0]
-  totalPrice.value = price.value
+const commentList = ref([])
+
+getCommentsById(productId).then(res => {
+  commentList.value = res.result
 })
 
+getProductDetail()
+
+function getProductDetail () {
+  getProductById(productId).then(res => {
+    productVO.value = res.result
+    storeId.value = productVO.value.storeId
+    name.value = productVO.value.name
+    photoUrlList.value = productVO.value.photoUrlList
+    rating.value = productVO.value.rating
+    number.value = productVO.value.number
+    salesAmount.value = productVO.value.salesAmount
+    stock.value = productVO.value.stock
+    category.value = productVO.value.category
+    price.value = productVO.value.price
+
+    photoUrl.value = photoUrlList.value[0]
+    totalPrice.value = price.value
+  })
+}
+
 function parseCategory(category) {
   if (category === 'FOOD') {
     return "食品"
@@ -76,17 +95,7 @@ function parseCategory(category) {
   }
 }
 
-const addStockNumber = ref(null)
-
 function AddStock() {
-  if (addStockNumber.value === null) {
-    ElMessage({
-      message: "请输入添加库存数！",
-      type: 'error',
-      center: true,
-    })
-    return
-  }
   addStock(productId, addStockNumber.value).then(res => {
     if (res.code === '000') {
       ElMessage({
@@ -184,7 +193,7 @@ function parseOrderType(type) {
   }
 }
 
-function handleCouponType(type) {
+function parseCouponType(type) {
   if (type === "FULL_REDUCTION") {
     return "满减"
   } else if (type === "SPECIAL") {
@@ -192,6 +201,14 @@ function handleCouponType(type) {
   }
 }
 
+function parseNull(value) {
+  if (value === null) {
+    return "/"
+  } else {
+    return value
+  }
+}
+
 // 处理优惠券
 interface Coupon {
   id: number
@@ -230,7 +247,6 @@ const handleCurrentChange = (val: Coupon | undefined) => {
 function toBackPage() {
   router.push("/storeDetail/" + storeId.value)
 }
-
 </script>
 
 <template>
@@ -304,7 +320,7 @@ function toBackPage() {
           {{ totalPrice }} 元
         </el-form-item>
       </el-form>
-      <el-button @click="handleCreateOrder" :disabled="createDisabled"
+      <el-button @click="handleCreateOrder" :disabled="createOrderDisabled"
                  class="buy-button" type="primary" plain>创建订单
       </el-button>
     </el-main>
@@ -319,13 +335,18 @@ function toBackPage() {
           <template #append>件</template>
         </el-input>
         <br>
-        <el-button @click="AddStock"
+        <el-button @click="AddStock" :disabled="addStockDisabled"
                    class="add-stock-button" type="primary" plain>
           新增库存
         </el-button>
       </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>
@@ -365,11 +386,19 @@ function toBackPage() {
               <el-table-column type="index" width="50"/>
               <el-table-column prop="type" label="类型" width="180">
                 <template #default="scope">
-                  {{ handleCouponType(scope.row.type) }}
+                  {{ parseCouponType(scope.row.type) }}
+                </template>
+              </el-table-column>
+              <el-table-column prop="satisfaction" label="满（元）" width="180">
+                <template #default="scope">
+                  {{ parseNull(scope.row.satisfaction) }}
+                </template>
+              </el-table-column>
+              <el-table-column prop="minus" label="减（元）" width="180">
+                <template #default="scope">
+                  {{ parseNull(scope.row.minus) }}
                 </template>
               </el-table-column>
-              <el-table-column prop="satisfaction" label="满（元）" width="180"/>
-              <el-table-column prop="minus" label="减（元）" width="180"/>
             </el-table>
           </el-form-item>
 

src/views/store/CreateStore.vue

@@ -8,19 +8,16 @@ import {Back, UploadFilled} from "@element-plus/icons-vue";
 // 输入框值
 const name = ref('')
 const location = ref('')
-let logoUrl = ref('')
+const imageFileList = ref([])
+const logoUrl = ref('')
 
 // 用于前端阻拦不合法输入
 const hasNameInput = computed(() => name.value != '')
 const hasLocationInput = computed(() => location.value != '')
-
-const nameLegal = hasNameInput
-const locationLegal = hasLocationInput
-
-const imageFileList = ref([])
+const hasImageFile = computed(() => logoUrl.value != '')
 
 const createDisabled = computed(() => {
-  return !(nameLegal.value && locationLegal.value && imageFileList.value);
+  return !(hasNameInput.value && hasLocationInput.value && hasImageFile.value);
 })
 
 function handleCreateStore() {

src/views/user/Register.vue

@@ -18,11 +18,9 @@ const hasConfirmPasswordInput = computed(() => confirmPassword.value != '');
 const hasAddressInput = computed(() => address.value != '');
 const hasIdentityChosen = computed(() => identity.value != '')
 
-
 const telLegal = computed(() => chinaMobileRegex.test(tel.value));
 const isPasswordIdentical = computed(() => password.value == confirmPassword.value);
 
-
 const registerDisabled = computed(() => {
   return !(telLegal.value && hasPasswordInput.value && isPasswordIdentical.value && hasAddressInput.value && hasIdentityChosen.value)
 });