feat: 积分模块完成

src/views/mytemplate/indexconfig/Content.vue

@@ -10,20 +10,44 @@
     <!-- 新增/编辑 -->
     <myDialog ref="myDialogRef" :title="datas.title" @confirm="confirm" width="30%">
       <el-form ref="ruleFormRef" :rules="datas.rules" :model="datas.DialogForm" label-width="80px">
-        <el-form-item label="供应商" prop="name">
-          <el-input v-model="datas.DialogForm.name" placeholder="请输入供应商名称" />
+        <el-form-item label="商品图片" required prop="images">
+          <div style="display: flex; flex-wrap: wrap">
+            <div v-for="(item, index) in datas.DialogForm.images" :key="index" style="position: relative"
+              class="showStyle">
+              <el-icon class="buttonstyle" @click="deleteEvent(item)">
+                <DeleteFilled />
+              </el-icon>
+              <img style="width: 148px; height: 148px; margin-right: 6px" class="imgStyle" :src="item" alt="" />
+            </div>
+            <div class="upImgStyle" @click="addimgEvent">+</div>
+          </div>
+        </el-form-item>
+        <el-form-item label="适用群体">
+          <el-radio-group v-model="datas.DialogForm.deductionGroup">
+            <el-radio label="全部" value="all" />
+            <el-radio label="仅会员" value="vip" />
+          </el-radio-group>
         </el-form-item>
         <el-form-item label="联系电话">
           <el-input v-model="datas.DialogForm.telephone" placeholder="请输入联系电话" />
         </el-form-item>
-        <el-form-item label="地址">
-          <el-input v-model="datas.DialogForm.address" placeholder="请输入地址" type="textarea" />
+        <el-form-item label="开启下单积分抵扣">
+          <el-switch v-model="datas.DialogForm.enableDeduction" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+        <el-form-item label="额外价格">
+          <el-col :span="3">
+            <el-input v-model="datas.DialogForm.minPaymentAmount" type="number" placeholder="">
+              <template #append>元</template>
+            </el-input>
+          </el-col>
         </el-form-item>
         <el-form-item label="备注">
           <el-input v-model="datas.DialogForm.remark" placeholder="请输入备注" type="textarea" />
         </el-form-item>
       </el-form>
     </myDialog>
+    <!-- 选择图片 -->
+    <AddImg ref="addImg" @successEvent="successEvent"></AddImg>
   </div>
 </template>
 <script setup>
@@ -46,7 +70,8 @@ const datas = reactive({
     name: "",
     telephone: "",
     address: "",
-    remark: ""
+    remark: "",
+    images: []
   },
   rules: {
     name: [
@@ -71,7 +96,9 @@ async function getList(data = {}) {
   datas.pagingConfig.pageNumber = res.pageNumber
 }
 function add() {
-  rest()
+  if (datas.DialogForm.id) {
+    rest()
+  }
   datas.title = '新增数据'
   myDialogRef.value.open()
 }
@@ -79,6 +106,8 @@ async function handleEdit(row) {
   datas.title = '编辑数据'
   const res = await API.getinfo(row.id)
   datas.DialogForm = res
+  // 有图片
+  // datas.DialogForm.goodsImageUrl = res.goodsImageUrl.split(',')
   myDialogRef.value.open()
 }
 async function confirm() {
@@ -86,8 +115,11 @@ async function confirm() {
     if (valid) {
       let res = null
       if (datas.title == '新增数据') {
+        // 图片处理
+        // datas.DialogForm.goodsImageUrl = datas.DialogForm.goodsImageUrl.join(',')
         res = await API.add(datas.DialogForm)
       } else {
+        // datas.DialogForm.goodsImageUrl = datas.DialogForm.goodsImageUrl.join(',')
         res = await API.update(datas.DialogForm)
       }
       if (res.code == 200) {
@@ -104,7 +136,7 @@ async function confirm() {
 }
 // 重置
 function rest() {
-  datas.DialogForm = { sort: "1" }
+  datas.DialogForm = { sort: 1, images: [] }
 }
 async function handleDelete(id) {
   ElMessageBox.confirm("是否删除数据项?", "提示", {
@@ -124,6 +156,19 @@ async function handleDelete(id) {
     }
   );
 }
+
+// 图片
+const addImg = ref(null)
+function addimgEvent() {
+  (addImg.value)?.show()
+}
+function successEvent(d) {
+  datas.DialogForm['images'].push(d[0].url);
+}
+function deleteEvent(d) {
+  let index = datas.DialogForm.images.findIndex((ele) => ele == d);
+  datas.DialogForm.images.splice(index, 1);
+}
 // 分页
 function sizeChange(val) {
   datas.pagingConfig.pageSize = val
@@ -143,4 +188,29 @@ function currentChange(val) {
   margin-top: 20px;
   border-radius: 4px;
 }
+
+// 图片库样式
+.upImgStyle {
+  cursor: pointer;
+  width: 148px;
+  height: 148px;
+  line-height: 148px;
+  text-align: center;
+  border: 1px dashed #ccc;
+  border-radius: 1%;
+  font-size: 30px;
+  color: #ccc;
+}
+
+.buttonstyle {
+  border-radius: 50%;
+  color: #db1616;
+  background-color: #fff;
+  font-size: 20px;
+  display: none;
+  position: absolute;
+  right: 0px;
+  top: -10px;
+  z-index: 10;
+}
 </style>

src/views/mytemplate/indexconfig/Search.vue

@@ -12,7 +12,7 @@
       </el-form-item>
       <el-form-item label="日期">
         <el-date-picker v-model="formInline.value1" type="daterange" range-separator="-" start-placeholder="开始日期"
-          end-placeholder="结束日期" />
+          value-format="YYYY-MM-DD" @change="dateChange" end-placeholder="结束日期" />
       </el-form-item>
       <el-form-item label="排列方式">
         <el-select v-model="formInline.region" placeholder="请选择排列方式" clearable>
@@ -40,12 +40,15 @@ const onSubmit = () => {
   eventBus.emit('search', formInline)
 }
 const reset = () => {
-  formInline.user = ''
-  formInline.region = ''
-  formInline.date = ''
-  formInline.value1 = ''
+  for (let key in formInline) {
+    formInline[key] = ''
+  }
   eventBus.emit('search', formInline)
 }
+function dateChange(d) {
+  formInline.endDate = d[1]
+  formInline.beginDate = d[0]
+}
 </script>
 
 <style scoped lang="scss">

src/views/mytemplate/indexconfig/component/Table.vue

@@ -1,8 +1,21 @@
 <template>
   <div style="margin-top: 10px;">
     <el-table :data="props.list" border style="width: 100%">
-      <el-table-column prop="date" align="center" label="Date" width="180" />
-      <el-table-column prop="name" align="center" label="Name" width="180" />
+      <el-table-column prop="date" align="center" label="Date" />
+      <el-table-column prop="name" align="center" label="Name">
+        <template v-slot="scope">
+          <div style="display: flex;align-items: center;">
+            <el-image style="width: 40px; height: 40px" :src="scope.row.headImg" fit="contain" />
+            {{ scope.row.nickName }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" align="center" prop="status">
+        <template #default="scope">
+          <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">{{ scope.row.status === 1 ? '上架' : '下架'
+          }}</el-tag>
+        </template>
+      </el-table-column>
       <el-table-column prop="address" align="center" label="Address" />
       <el-table-column label="操作" align="center">
         <template #default="scope">