tijiao

src/views/components/commonBookTags/shopproduct.vue

@@ -61,7 +61,7 @@
       <!-- @selection-change="handleSelectionChange" -->
       <el-table
         ref="table"
-        height="100%"
+        :height="`${isShowPagination?'calc(100% - 50px)':'100%'}`"
         :data="associatedGoodsList"
         :row-key="getRowKeys"
         border
@@ -81,7 +81,7 @@
           </el-table-column> -->
         <!--  -->
 
-        <el-table-column
+        <el-table-column v-if="!disableOperate"
           header-align="center"
           align="center"
           label="操作"
@@ -89,7 +89,10 @@
         >
           <template slot-scope="scope">
             <slot name="operation" :row="scope.row"></slot>
-            <el-button type="text" v-if="urlList.editCourse" @click="editCourse(scope.row)"
+            <el-button
+              type="text"
+              v-if="urlList.editCourse"
+              @click="editCourse(scope.row)"
               >编辑</el-button
             >
             <el-button
@@ -102,8 +105,24 @@
           </template>
         </el-table-column>
       </el-table>
+      <el-pagination style="margin-top: 10px;"
+        v-if="isShowPagination"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="current"
+        :page-sizes="[50, 100, 200]"
+        :page-size="limit"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      >
+      </el-pagination>
     </div>
-    <el-dialog title="提示" :visible.sync="editVisible" width="40%" style="font-size:12px">
+    <el-dialog
+      title="提示"
+      :visible.sync="editVisible"
+      width="40%"
+      style="font-size:12px"
+    >
       <div style="width:100%">
         <div style="margin-bottom:15px">
           <span style="font-weight:bold"
@@ -116,7 +135,7 @@
               placeholder="请输入标签排序"
               style="width: 50%"
               v-model="editForm.sort"
-              :min="0"              
+              :min="0"
             >
             </el-input-number> </el-form-item
           ><el-form-item label="课程等级:">
@@ -156,8 +175,11 @@ export default {
     "currentType",
     "isNoSearch",
     "isNoPaging",
+    "disableOperate",
+    "isShowPagination",
     "axiosType",
-    "otherInfo"
+    "otherInfo",
+    "CustomEdit"
   ],
   data() {
     return {
@@ -173,6 +195,9 @@ export default {
       pageIndex: 1,
       pageSize: 10,
       totalPage: 0,
+      current: 1,
+      limit: 50,
+      total: 0,
       dataListLoading: false,
       dataListSelections: [],
       addOrUpdateVisible: false,
@@ -206,9 +231,19 @@ export default {
     // await this.getGoodsTypeList();
   },
   methods: {
-    editHandleClose(){
-      this.editForm = {}
-      this.editVisible = false
+    handleSizeChange(val) {
+      this.limit = val;
+      this.getAssociatedGoodsList({ ...this.dataForm });
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      this.current = val;
+      this.getAssociatedGoodsList({ ...this.dataForm });
+      console.log(`当前页: ${val}`);
+    },
+    editHandleClose() {
+      this.editForm = {};
+      this.editVisible = false;
     },
     submitEdit() {
       this.$http({
@@ -217,19 +252,23 @@ export default {
         data: this.$http.adornData(this.editForm)
       }).then(data => {
         this.$message.success("操作成功！");
-        this.editHandleClose()
-        this.getAssociatedGoodsList()
+        this.editHandleClose();
+        this.getAssociatedGoodsList();
       });
     },
     editCourse(row) {
       console.log("row", row);
+      if (this.CustomEdit) {
+        this.$emit("edit", row);
+        return;
+      }
       this.editVisible = true;
       this.editForm = {
         title: row.title,
         id: row.bindId,
-        sort:row.toSociologySort,
-        level:row.level,
-        selective:row.selective
+        sort: row.toSociologySort,
+        level: row.level,
+        selective: row.selective
       };
     },
     shopDelete(row) {
@@ -293,7 +332,6 @@ export default {
 
     // 获取数据列表
     async getDataList(bookMarketId) {
-      
       this.bookMarketId = bookMarketId;
       this.dataListLoading = true;
       this.getDataList = [];
@@ -338,8 +376,39 @@ export default {
       var form = { ...this.defaultForm, ...this.dataForm };
 
       this.dataListLoading = true;
+      if (this.otherInfo.httpType == "raw" && this.isShowPagination) {
+        this.$http
+          .request({
+            url: this.$http.adornUrl(`${this.urlList.hasBindProductList}`),
+            method: "POST",
+            data: { current: this.current, limit: this.limit, ...form },
+            header: {
+              //默认 无 说明：请求头
+              "Content-Type": "application/json"
+            }
+          })
+          .then(async ({ data }) => {
+            if (data && data.code === 0) {
+              console.log("data at line 359:", data);
+              if (this.otherInfo.resultValueName) {
+                this.associatedGoodsList = [
+                  ...data[this.otherInfo.resultValueName].records
+                ];
+                this.total = data.certificateList.total;
+                console.log("this.total at line 392:", this.total);
+                this.$forceUpdate();
+              } else {
+                this.associatedGoodsList = [...data.result.records];
+                this.total = data[result].total;
+              }
 
-      if (this.otherInfo.httpType == "raw" && this.otherInfo.isNoPaging) {
+              this.dataListLoading = false;
+            }
+          });
+      } else if (
+        this.otherInfo.httpType == "raw" &&
+        this.otherInfo.isNoPaging
+      ) {
         this.$http
           .request({
             url: this.$http.adornUrl(`${this.urlList.hasBindProductList}`),
@@ -352,7 +421,14 @@ export default {
           })
           .then(async ({ data }) => {
             if (data && data.code === 0) {
-              this.associatedGoodsList = [...data.result.records];
+              console.log("data at line 359:", data);
+              if (this.otherInfo.resultValueName) {
+                this.associatedGoodsList = [
+                  ...data[this.otherInfo.resultValueName].records
+                ];
+              } else {
+                this.associatedGoodsList = [...data.result.records];
+              }
 
               this.dataListLoading = false;
             }
@@ -371,7 +447,7 @@ export default {
             }
           })
           .then(async ({ data }) => {
-          	console.log('data at line 373:', data)
+            console.log("data at line 373:", data);
             if (data && data.code === 0) {
               this.associatedGoodsList = [
                 ...data[this.otherInfo.httpDataValueName]
@@ -501,7 +577,7 @@ li {
   height: calc(100% - 50px);
   overflow: auto;
   // margin-left: -10px;
-  padding-bottom: 20px;
+  // padding-bottom: 20px;
   // margin-top: 20px;
   .shop_box_item {
     width: 23.7%;

src/views/components/commonBookTags/shopproductTable.vue

@@ -63,6 +63,8 @@
           </el-table-column> -->
 
           <slot name="tableItem"></slot>
+          
+
           <el-table-column
             header-align="center"
             align="center"
@@ -70,11 +72,12 @@
             width="80"
           >
             <template slot-scope="scope">
-              <el-button
+             
+              <el-button 
                 type="text"
                 @click="handleCurrentChange(scope.row)"
                 size="mini"
-                >绑定</el-button
+                >{{CustomOperationText?CustomOperationText:'绑定'}}</el-button
               >
             </template>
           </el-table-column>
@@ -120,6 +123,7 @@ export default {
     "title",
     "isNoModal",
     "urlList",
+    "CustomOperationText",
   ],
   data() {
     return {

src/views/components/preview-image.vue

@@ -0,0 +1,397 @@
+<template>
+    <div>
+        <div class="imgbox">
+            <div
+                class="preview-img"
+                :class="boxClass"
+                v-if="
+                    Imageslist == 3 ||
+                    Imageslist == 5 ||
+                    Imageslist == 7 ||
+                    Imageslist == 8 ||
+                    Imageslist >= 9
+                "
+            >
+                <div
+                    class="img-box"
+                    v-for="(item, index) in imgArr"
+                    :key="index"
+                >
+                    <div v-for="(_item, _index) in item" :key="_index">
+                        <div class="box-image" v-if="_index <= 3">
+                            <el-image
+                                ref="preview"
+                                fit="cover"
+                                :preview-src-list="previewImages"
+                                :src="_item"
+                            />
+                            <div
+                                class="box-image-shade"
+                                @click="imglistclick()"
+                                v-if="item.length > 4 && _index == 3"
+                            >
+                                <div class="shade-more">
+                                    <i class="el-icon-d-arrow-right"></i>
+                                    <i
+                                        class="arrow"
+                                        custom-style="margin-left:-16px;"
+                                    ></i>
+                                </div>
+                                <div>{{ Imageslist }}张</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div :class="boxClass" class="preview-img" v-else>
+                <div
+                    v-if="
+                    Imageslist != 3 ||
+                    Imageslist != 5 ||
+                    Imageslist != 7 ||
+                    Imageslist != 8 ||
+                    Imageslist <= 9
+                "
+                    class="box-image"
+                    v-for="(item, index) in imgArr"
+                    :key="index"
+                >
+                    <el-image fit="contain" :src="item" /> 
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+ 
+<script>
+export default {
+    props: {
+        previewData: {
+            type: Array,
+            default: () => {
+                return [];
+            },
+            //     observer: function (newVal, oldVal) {
+            //         console.log("newVal, oldVal", newVal, oldVal);
+            //         const previewImages = [];
+            //         newVal.map((item) => {
+            //             previewImages.push(item);
+            //         });
+            //         this.setData({
+            //             previewImages,
+            //         });
+            //         this.formatImageList(newVal);
+            //     },
+        },
+    },
+    watch: {
+        previewData: function (newVal, oldVal) {
+            console.log("newVal, oldVal", newVal, oldVal);
+            const previewImages = [];
+            newVal.map((item) => {
+                previewImages.push(item);
+            });
+            this.previewImages = previewImages;
+ 
+            this.formatImageList(previewImages);
+            console.log("222222", newVal.length);
+            this.$nextTick(() => {
+                this.Imageslist = newVal.length;
+            });
+            // this.formatImageList(newVal);
+        },
+    },
+    data() {
+        return {
+            previewImages: [],
+            imgArr: [],
+            boxClass: "one",
+            Imageslist: 0,
+        };
+    },
+    mounted() {},
+    methods: {
+        imglistclick() {
+                 
+            console.log("图片", this.$refs.preview[8]);
+            this.$refs.preview[8].clickHandler();
+        },
+        formatImageList(imageArr) {
+            //     console.log("imageArr---", imageArr);
+            console.log("长度：", imageArr.length);
+ 
+            const arrLength = imageArr.length;
+            if (arrLength == 1) {
+                // this.setData({
+                //     imgArr: imageArr,
+                //     boxClass: "one",
+                // });
+                this.imgArr = imageArr;
+                this.boxClass = "one";
+            }
+ 
+            if (arrLength == 2) {
+                // this.setData({
+                //     imgArr: imageArr,
+                //     boxClass: "two",
+                // });
+                this.imgArr = imageArr;
+                this.boxClass = "two";
+            }
+ 
+            if (arrLength == 3) {
+                const firstArr = [...imageArr.splice(0, 1)];
+                const threeArr = [[...firstArr], [...imageArr]];
+                // this.setData({
+                //     imgArr: threeArr,
+                //     boxClass: "three",
+                // });
+                this.imgArr = threeArr;
+                this.boxClass = "three";
+            }
+ 
+            if (arrLength == 4) {
+                // this.setData({
+                //     imgArr: imageArr,
+                //     boxClass: "four",
+                // });
+                this.imgArr = imageArr;
+                this.boxClass = "four";
+            }
+ 
+            if (arrLength == 5) {
+                const firstArr = [...imageArr.splice(0, 1)];
+                const fiveArr = [[...firstArr], [...imageArr]];
+                // this.setData({
+                //     imgArr: fiveArr,
+                //     boxClass: "five",
+                // });
+                this.imgArr = fiveArr;
+                this.boxClass = "five";
+            }
+ 
+            if (arrLength == 6) {
+                // this.setData({
+                //     imgArr: imageArr,
+                //     boxClass: "six",
+                // });
+                this.imgArr = imageArr;
+                this.boxClass = "six";
+            }
+ 
+            if (arrLength == 7) {
+                const firstArr = [...imageArr.splice(0, 1)];
+                const secondArr = [...imageArr.splice(0, 4)];
+                const sevenArr = [[...firstArr], [...secondArr], [...imageArr]];
+                console.log("sevenArr", sevenArr);
+                // this.setData({
+                //     imgArr: sevenArr,
+                //     boxClass: "seven",
+                // });
+                this.imgArr = sevenArr;
+                this.boxClass = "seven";
+            }
+ 
+            if (arrLength == 8) {
+                const firstArr = [...imageArr.splice(0, 1)];
+                const secondArr = [...imageArr.splice(0, 4)];
+                const eightArr = [[...firstArr], [...secondArr], [...imageArr]];
+                console.log("eightArr", eightArr);
+                // this.setData({
+                //     imgArr: eightArr,
+                //     boxClass: "eight",
+                // });
+                this.imgArr = eightArr;
+                this.boxClass = "eight";
+            }
+ 
+            if (arrLength >= 9) {
+                const firstArr = [...imageArr.splice(0, 1)];
+                const secondArr = [...imageArr.splice(0, 4)];
+                const nineArr = [[...firstArr], [...secondArr], [...imageArr]];
+                console.log("nineArr", nineArr);
+                // this.setData({
+                //     imgArr: nineArr,
+                //     boxClass: "nine",
+                // });
+                this.imgArr = nineArr;
+                this.boxClass = "nine";
+            }
+        },
+    },
+};
+</script>
+ 
+<style lang="scss" scoped>
+.spanimg {
+     
+    
+}
+.imgbox {
+    width: 675px;
+ 
+    padding-bottom: 50px;
+    // background: red;
+}
+.preview-img {
+    padding: 16px 5px 0;
+    box-sizing: border-box;
+}
+ 
+.box-image {
+    margin-top: 10px;
+    width: 315px;
+    height: 315px;
+    border-radius: 6px;
+    overflow: hidden;
+}
+ 
+.box-image .el-image {
+    width: 100%;
+    height: 100%;
+    // width: 100px;
+    //     height: 100px;
+    display: block;
+}
+ 
+.two {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+ 
+.two .box-image + .box-image {
+    margin-left: 12px;
+}
+ 
+.three,
+.five,
+.seven,
+.eight,
+.nine {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+ 
+.three .img-box + .img-box {
+    margin-left: 12px;
+}
+ 
+.three .img-box + .img-box .box-image {
+    width: 154px;
+    height: 153px;
+}
+ 
+.four {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-start;
+}
+ 
+.four .box-image {
+    width: 205px;
+    height: 205px;
+    margin-right: 14px;
+    margin-top: 14px;
+}
+ 
+.five .img-box + .img-box {
+    margin-left: 12px;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+ 
+.five .img-box + .img-box .box-image {
+    width: 153px;
+    height: 153px;
+}
+ 
+.six {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+}
+ 
+.six .box-image {
+    width: 205px;
+    height: 205px;
+    margin-top: 14px;
+}
+ 
+.seven,
+.eight,
+.nine {
+    flex-wrap: wrap;
+}
+ 
+.seven .img-box:nth-child(2),
+.eight .img-box:nth-child(2),
+.nine .img-box:nth-child(2) {
+    margin-left: 12px;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    width: 315px;
+}
+ 
+.seven .img-box:nth-child(2) .box-image,
+.eight .img-box:nth-child(2) .box-image,
+.nine .img-box:nth-child(2) .box-image {
+    width: 153px;
+    height: 153px;
+}
+ 
+.seven .img-box:nth-child(3) {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+ 
+.seven .img-box:nth-child(3) .box-image + .box-image {
+    margin-left: 12px;
+    margin-top: 14px;
+    width: 315px;
+}
+ 
+.eight .img-box:nth-child(3),
+.nine .img-box:nth-child(3) {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+ 
+.eight .img-box:nth-child(3) .box-image {
+    width: 206px;
+    height: 206px;
+    margin-top: 14px;
+}
+ 
+.nine .img-box:nth-child(3) .box-image {
+    width: 152px;
+    height: 152px;
+    margin-top: 12px;
+    position: relative;
+}
+ 
+.box-image-shade {
+    width: 152px;
+    height: 152px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.55);
+    text-align: center;
+    font-size: 28px;
+    font-weight: 500;
+    color: #ffffff;
+    line-height: 42px;
+    padding-top: 36px;
+    box-sizing: border-box;
+}
+</style>