feat: 图库功能

src/views/product/indexconfig/addgoods.vue

@@ -33,32 +33,26 @@
           </el-form-item>
         </el-col>
       </el-form-item>
-      <el-form-item label="商品图片" required prop="images">
-        <MultiImageUpload v-model="ruleForm.images" />
-      </el-form-item>
       <!-- <el-form-item label="商品图片" required prop="images">
+        <MultiImageUpload v-model="ruleForm.images" />
+      </el-form-item> -->
+      <el-form-item label="商品图片" required prop="images">
         <div style="display: flex; flex-wrap: wrap">
-          <div v-for="(item, index) in datas.imgList" :key="index" style="position: relative" class="showStyle">
-            <i class="el-icon-error buttonstyle" @click="deleteEvent(item)"></i>
-            <img style="width: 148px; height: 148px; margin-right: 6px" class="imgStyle" :key="item.id" :src="item.url"
-              alt="" />
+          <div v-for="(item, index) in ruleForm.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>
       <el-form-item>
         <div class="tips">注：第一张图为商品封面图，图片尺寸为750×750</div>
       </el-form-item>
       <!-- 选择图片 -->
       <AddImg ref="addImg" @successEvent="successEvent"></AddImg>
-      <!-- <el-form-item label="显示/隐藏" required prop="type">
-        <el-checkbox-group v-model="ruleForm.showType">
-          <el-checkbox label="table">堂食</el-checkbox>
-          <el-checkbox label="dine">自取</el-checkbox>
-          <el-checkbox label="delivery">配送</el-checkbox>
-          <el-checkbox label="express">快递</el-checkbox>
-        </el-checkbox-group>
-      </el-form-item> -->
+
       <el-form-item label="商品类型">
         <el-radio-group v-model="ruleForm.type" @change="changeTypeEnum(ruleForm.type)">
           <el-radio value="single">单规格商品</el-radio>
@@ -309,7 +303,6 @@ let datas = reactive<datasForm>({
   showSelectSku: false,
   selectSkuItem: {},
   addGroupIndex: -1,
-  imgList: [],
 
 })
 let shopListRef = ref(null)
@@ -328,7 +321,6 @@ interface datasForm {
   showSelectSku: boolean,
   selectSkuItem: any,
   addGroupIndex: any,
-  imgList: any[]
 }
 interface RuleForm {
   name: string,
@@ -343,7 +335,7 @@ interface RuleForm {
   skuList: string[],
   weight: any,
   isAllowTempModifyPrice: any,
-  days: string[],
+  days: any,
   useTime: string[],
   startTime: string,
   endTime: string,
@@ -529,13 +521,11 @@ function addgoods(index: number = -1) {
   (shopListRef.value as any)?.opens()
 }
 function deleteEvent(d: any) {
-  let index = datas.imgList.findIndex((ele) => ele.url == d.url);
-  datas.imgList.splice(index, 1);
+  let index = ruleForm.images.findIndex((ele) => ele == d);
+  ruleForm.images.splice(index, 1);
 }
 function successEvent(d: any) {
-  // this.form.images.push(d[0].url);
-  // this.imgList.push(d[0]);
-
+  ruleForm.images.push(d[0].url);
 }
 // 分组选择商品
 function selectShopRes(res: Array<any>) {
@@ -757,11 +747,17 @@ const submitForm = async (formEl: FormInstance | undefined) => {
         // console.log(ruleForm, '套餐')
       }
       if (ruleForm.id) {
+        setTimeout(() => {
+          ruleForm.days = ruleForm.days.split(',')
+        }, 600);
         let res = await UserAPI3.update(ruleForm)
         if (res.code == 200) {
           ElMessage.success("修改成功");
         }
       } else {
+        setTimeout(() => {
+          ruleForm.days = ruleForm.days.split(',')
+        }, 600);
         let res = await UserAPI3.addunit(ruleForm)
         if (res.code == 200) {
           ElMessage.success("添加成功");
@@ -869,6 +865,10 @@ const resetForm = (formEl: FormInstance | undefined) => {
   margin-bottom: 20px;
 }
 
+.showStyle:hover>.buttonstyle {
+  display: block;
+}
+
 .upImgStyle {
   cursor: pointer;
   width: 148px;
@@ -880,4 +880,16 @@ const resetForm = (formEl: FormInstance | undefined) => {
   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>