限购

src/views/merchant/ProductList.vue

@@ -173,6 +173,18 @@
             />
           </a-form-item>
 
+          <a-form-item label="限购次数" name="purchase_limit">
+            <a-input-number
+              v-model:value="formState.purchase_limit"
+              :min="0"
+              style="width: 100%"
+              placeholder="0表示不限购"
+            >
+              <template #addonAfter>次</template>
+            </a-input-number>
+            <div class="form-item-help">0 次表示不限购</div>
+          </a-form-item>
+
           <a-form-item label="标签" name="tags">
             <a-input v-model:value="formState.tags" placeholder="多个标签用逗号分隔" />
           </a-form-item>
@@ -260,6 +272,18 @@
             />
           </a-form-item>
 
+          <a-form-item label="限购次数" name="purchase_limit">
+            <a-input-number
+              v-model:value="editFormState.purchase_limit"
+              :min="0"
+              style="width: 100%"
+              placeholder="0表示不限购"
+            >
+              <template #addonAfter>次</template>
+            </a-input-number>
+            <div class="form-item-help">0 次表示不限购</div>
+          </a-form-item>
+
           <a-form-item label="标签" name="tags">
             <a-input v-model:value="editFormState.tags" placeholder="多个标签用逗号分隔" />
           </a-form-item>
@@ -270,7 +294,7 @@
 </template>
 
 <script>
-import { defineComponent, ref, onMounted } from 'vue'
+import { defineComponent, ref, onMounted, h } from 'vue'
 import { message, Upload, InputNumber, Tag } from 'ant-design-vue'
 import { UploadOutlined } from '@ant-design/icons-vue'
 import PageContainer from '@/components/PageContainer.vue'
@@ -351,6 +375,22 @@ export default defineComponent({
         width: 100,
         align: 'right'
       },
+      {
+        title: '限购',
+        dataIndex: 'purchase_limit',
+        key: 'purchase_limit',
+        width: 100,
+        align: 'center',
+        customRender: ({ text }) => {
+          return h(
+            'span',
+            {
+              class: `purchase-limit-tag ${text === 0 ? 'default' : 'highlight'}`
+            },
+            text === 0 ? '不限购' : `${text}次`
+          )
+        }
+      },
       {
         title: '标签',
         dataIndex: 'tags',
@@ -450,6 +490,7 @@ export default defineComponent({
       product_price: null,
       sale_price: null,
       settlement_amount: null,
+      purchase_limit: 0,
       tags: ''
     })
 
@@ -462,6 +503,7 @@ export default defineComponent({
         product_price: record.product_price,
         sale_price: record.sale_price,
         settlement_amount: record.settlement_amount,
+        purchase_limit: record.purchase_limit,
         tags: record.tags
       }
       editModalVisible.value = true
@@ -529,6 +571,7 @@ export default defineComponent({
         product_price: null,
         sale_price: null,
         settlement_amount: null,
+        purchase_limit: 0,
         tags: ''
       }
       editModalVisible.value = false
@@ -546,6 +589,7 @@ export default defineComponent({
       product_price: null,
       sale_price: null,
       settlement_amount: null,
+      purchase_limit: 0,
       tags: ''
     })
 
@@ -626,6 +670,7 @@ export default defineComponent({
         product_price: null,
         sale_price: null,
         settlement_amount: null,
+        purchase_limit: 0,
         tags: ''
       }
       addModalVisible.value = false
@@ -798,22 +843,6 @@ export default defineComponent({
   gap: 8px !important;
 }
 
-:deep(.ant-table-cell) {
-  white-space: nowrap;
-}
-
-:deep(.ant-table-cell-ellipsis) {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.product-list {
-  background: #fff;
-  padding: 24px;
-  min-height: 100%;
-}
-
 .table-container {
   overflow-x: auto;
   background: #fff;
@@ -840,4 +869,39 @@ export default defineComponent({
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+
+:deep(.ant-input-number-group-addon) {
+  padding: 0 8px;
+  color: rgba(0, 0, 0, 0.45);
+  background-color: #fafafa;
+  border: 1px solid #d9d9d9;
+  border-radius: 0 2px 2px 0;
+}
+
+.form-item-help {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.45);
+  line-height: 1.5;
+  margin-top: 4px;
+}
+
+.purchase-limit-tag {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 2px;
+  font-size: 12px;
+}
+
+.purchase-limit-tag.default {
+  background-color: #f5f5f5;
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.purchase-limit-tag.highlight {
+  background-color: #ff4d4f;
+  color: #fff;
+  font-weight: 500;
+  padding: 3px 12px;
+  border-radius: 12px;
+}
 </style>