|
|
@@ -29,6 +29,9 @@
|
|
|
autosize
|
|
|
>
|
|
|
</el-input>
|
|
|
+ <el-button type="primary" icon="document" @click="searchTupian"
|
|
|
+ >查询
|
|
|
+ </el-button>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
<span>商品分类：</span>
|
|
|
@@ -245,12 +248,28 @@
|
|
|
style="display: flex;align-items: center;margin: 2% 0;flex-flow: wrap;"
|
|
|
>
|
|
|
<span style="display: inline-block;text-align: right;"
|
|
|
- >商品轮播图：</span
|
|
|
+ >商品轮播图：<br>(轮播图最多上传4张) </span
|
|
|
>
|
|
|
- <div>
|
|
|
+ <div v-for="(item, index) of potost">
|
|
|
+ <div style="position: relative;margin: 5px;">
|
|
|
+ <img
|
|
|
+ :src="item"
|
|
|
+ class="avatar"
|
|
|
+ style="width:148px;height: 148px;"
|
|
|
+ />
|
|
|
+ <div @click="handleRemove(index)" class="divhove">
|
|
|
+ <i
|
|
|
+ class="el-icon-delete"
|
|
|
+ style="margin: 0;font-size: 18px;color: #fff;"
|
|
|
+ ></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="imgs">
|
|
|
<el-upload
|
|
|
:action="Tupiantou"
|
|
|
list-type="picture-card"
|
|
|
+ :show-file-list="false"
|
|
|
:on-success="handleUploadSuccess"
|
|
|
:on-change="handleChange"
|
|
|
:on-remove="handleRemove"
|
|
|
@@ -696,6 +715,102 @@
|
|
|
</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <el-dialog
|
|
|
+ custom-class="export"
|
|
|
+ :visible.sync="tupianVisible"
|
|
|
+ center
|
|
|
+ title="选择图片"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :before-close="searchCancle"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <div class="title">
|
|
|
+ <span>封面图：</span
|
|
|
+ ><span
|
|
|
+ >共有<span>{{ cover.length }}</span
|
|
|
+ >条结果供选择</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="tupian" id="cover" @scroll="searchTupianScroll1">
|
|
|
+ <div
|
|
|
+ v-for="item in cover"
|
|
|
+ :key="item.id"
|
|
|
+ class="img-item"
|
|
|
+ :class="isChecked1(item) ? 'checked' : ''"
|
|
|
+ @click="toggle(item, 1)"
|
|
|
+ >
|
|
|
+ <el-image
|
|
|
+ class="el-image"
|
|
|
+ :src="item.goodsCover"
|
|
|
+ name="el-image"
|
|
|
+ fit="cover"
|
|
|
+ ></el-image>
|
|
|
+ <i v-if="isChecked1(item)" class="checked-icon el-icon-check"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="title">
|
|
|
+ <span>轮播图：</span
|
|
|
+ ><span
|
|
|
+ >共有<span>{{ carousel.length }}</span
|
|
|
+ >条结果供选择</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="tupian" id="carousel" @scroll="searchTupianScroll2">
|
|
|
+ <div
|
|
|
+ v-for="item in carousel"
|
|
|
+ :key="item.id"
|
|
|
+ class="img-item"
|
|
|
+ :class="isChecked2(item) ? 'checked' : ''"
|
|
|
+ @click="toggle(item, 2)"
|
|
|
+ >
|
|
|
+ <el-image
|
|
|
+ class="el-image"
|
|
|
+ :src="item.goodsPicture"
|
|
|
+ name="el-image"
|
|
|
+ fit="cover"
|
|
|
+ ></el-image>
|
|
|
+ <i v-if="isChecked2(item)" class="checked-icon el-icon-check"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="title">
|
|
|
+ <span>详情图：</span
|
|
|
+ ><span
|
|
|
+ >共有<span>{{ detail.length }}</span
|
|
|
+ >条结果供选择</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="tupian" id="detail" @scroll="searchTupianScroll3">
|
|
|
+ <div
|
|
|
+ v-for="item in detail"
|
|
|
+ :key="item.id"
|
|
|
+ class="img-item"
|
|
|
+ :class="isChecked3(item) ? 'checked' : ''"
|
|
|
+ @click="toggle(item, 3)"
|
|
|
+ >
|
|
|
+ <el-image
|
|
|
+ class="el-image"
|
|
|
+ :src="item.goodsParticularsPicture"
|
|
|
+ name="el-image"
|
|
|
+ fit="cover"
|
|
|
+ ></el-image>
|
|
|
+ <i v-if="isChecked3(item)" class="checked-icon el-icon-check"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="btn">
|
|
|
+ <el-button type="primary" @click="searchCancle">取消</el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ style="margin-right: 20px;"
|
|
|
+ @click="searchAffirm"
|
|
|
+ >确定</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -827,7 +942,35 @@ export default {
|
|
|
goodsParticularsPicture: [], //商品详情图
|
|
|
percentage1: 0, //进度条
|
|
|
dialogImageUrl: [],
|
|
|
- dialogVisible: false
|
|
|
+ dialogVisible: false,
|
|
|
+
|
|
|
+ tupianVisible: false,
|
|
|
+ // 封面图
|
|
|
+ cover: [],
|
|
|
+ cover1: [],
|
|
|
+ coverPage: 1,
|
|
|
+ coverLimit: 18,
|
|
|
+ coverTotalCount: 10,
|
|
|
+ coverTotalPage: 1,
|
|
|
+ coverBusy: false,
|
|
|
+
|
|
|
+ // 轮播图
|
|
|
+ carousel: [],
|
|
|
+ carousel1: [],
|
|
|
+ carouselPage: 1,
|
|
|
+ carouselLimit: 18,
|
|
|
+ carouselTotalCount: 10,
|
|
|
+ carouselTotalPage: 1,
|
|
|
+ carouselBusy: false,
|
|
|
+
|
|
|
+ // 详情图
|
|
|
+ detail: [],
|
|
|
+ detail1: [],
|
|
|
+ detailPage: 1,
|
|
|
+ detailLimit: 18,
|
|
|
+ detailTotalCount: 10,
|
|
|
+ detailTotalPage: 1,
|
|
|
+ detailBusy: false
|
|
|
};
|
|
|
},
|
|
|
|
|
|
@@ -925,7 +1068,11 @@ export default {
|
|
|
//上传成功
|
|
|
handleUploadSuccess(file, fileList) {
|
|
|
// this.goodsPicture += file.data + ','
|
|
|
- this.potost.push(file.data);
|
|
|
+ // this.potost.push(file.data);
|
|
|
+ if(this.potost.length>=4){
|
|
|
+ this.potost.shift()
|
|
|
+ }
|
|
|
+ this.potost.unshift(file.data);
|
|
|
},
|
|
|
// 返回上一级
|
|
|
prev() {
|
|
|
@@ -1399,7 +1546,7 @@ export default {
|
|
|
ruleId: this.attr[0].ruleId
|
|
|
})
|
|
|
}).then(({ data }) => {
|
|
|
- console.log(data,'ppp');
|
|
|
+ console.log(data, "ppp");
|
|
|
|
|
|
let returnData = data.data;
|
|
|
this.headerData = returnData.header;
|
|
|
@@ -1416,11 +1563,271 @@ export default {
|
|
|
},
|
|
|
//上传成功
|
|
|
handleUploadSuccessXq(file, fileList) {
|
|
|
- this.goodsParticularsPicture.push(file.data);
|
|
|
+ // this.goodsParticularsPicture.push(file.data);
|
|
|
+ if(this.goodsParticularsPicture.length>=4){
|
|
|
+ this.goodsParticularsPicture.shift()
|
|
|
+ }
|
|
|
+ this.goodsParticularsPicture.unshift(file.data);
|
|
|
},
|
|
|
onprogress1(event, file, fileList) {
|
|
|
console.log("详情图上传进度", parseInt(event.percent));
|
|
|
this.percentage1 = parseInt(event.percent);
|
|
|
+ },
|
|
|
+ // 封面图
|
|
|
+ searchTupianList1(scroll) {
|
|
|
+ console.log(this.coverBusy);
|
|
|
+
|
|
|
+ if (this.coverBusy) return; // 二次保护
|
|
|
+ this.coverBusy = true;
|
|
|
+
|
|
|
+ try {
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl(`admin/goods/goodsCoverList`),
|
|
|
+ method: "get",
|
|
|
+ params: this.$http.adornParams({
|
|
|
+ page: this.coverPage,
|
|
|
+ limit: this.coverLimit,
|
|
|
+ name: this.goodsName
|
|
|
+ })
|
|
|
+ }).then(({ data }) => {
|
|
|
+ console.log(data, "封面图片列表");
|
|
|
+ if (scroll == "pageAdd") {
|
|
|
+ this.cover = [...this.cover, ...data.data.list];
|
|
|
+ } else {
|
|
|
+ this.cover = data.data.list;
|
|
|
+ }
|
|
|
+ console.log(this.cover.length, "封面图数量");
|
|
|
+
|
|
|
+ this.coverTotalCount = data.data.totalCount;
|
|
|
+ this.coverTotalPage = data.data.totalPage;
|
|
|
+ });
|
|
|
+ } finally {
|
|
|
+ this.coverBusy = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ searchTupianScroll1(e) {
|
|
|
+ const el = e.target;
|
|
|
+ let nearBottom = el.scrollTop + el.clientHeight >= el.scrollHeight; // 再多留一点余量
|
|
|
+ if (
|
|
|
+ nearBottom &&
|
|
|
+ !this.coverBusy &&
|
|
|
+ this.coverPage < this.coverTotalPage
|
|
|
+ ) {
|
|
|
+ this.coverPage++;
|
|
|
+ this.searchTupianList1("pageAdd");
|
|
|
+ console.log("滚动到底", this.coverPage, this.coverTotalPage);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 轮播图
|
|
|
+ searchTupianList2(scroll) {
|
|
|
+ if (this.carouselBusy) return; // 二次保护
|
|
|
+ this.carouselBusy = true;
|
|
|
+ try {
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl(`admin/goods/goodsPictureList`),
|
|
|
+ method: "get",
|
|
|
+ params: this.$http.adornParams({
|
|
|
+ page: this.carouselPage,
|
|
|
+ limit: this.carouselLimit,
|
|
|
+ name: this.goodsName
|
|
|
+ })
|
|
|
+ }).then(({ data }) => {
|
|
|
+ console.log(data, "轮播图片列表");
|
|
|
+ if (scroll == "pageAdd") {
|
|
|
+ this.carousel = [...this.carousel, ...data.data.list];
|
|
|
+ } else {
|
|
|
+ this.carousel = data.data.list;
|
|
|
+ }
|
|
|
+ this.carouselTotalCount = data.data.totalCount;
|
|
|
+ this.carouselTotalPage = data.data.totalPage;
|
|
|
+ });
|
|
|
+ } finally {
|
|
|
+ this.carouselBusy = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ searchTupianScroll2(e) {
|
|
|
+ const el = e.target;
|
|
|
+ let nearBottom = el.scrollTop + el.clientHeight >= el.scrollHeight; // 再多留一点余量
|
|
|
+ if (
|
|
|
+ nearBottom &&
|
|
|
+ !this.carouselBusy &&
|
|
|
+ this.carouselPage < this.carouselTotalPage
|
|
|
+ ) {
|
|
|
+ this.carouselPage++;
|
|
|
+ this.searchTupianList2("pageAdd");
|
|
|
+ console.log("滚动到底", this.carouselPage, this.carouselTotalPage);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 详情图
|
|
|
+ searchTupianList3(scroll) {
|
|
|
+ if (this.detailBusy) return; // 二次保护
|
|
|
+ this.detailBusy = true;
|
|
|
+ try {
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl(`admin/goods/goodsParticularsPictureList`),
|
|
|
+ method: "get",
|
|
|
+ params: this.$http.adornParams({
|
|
|
+ page: this.detailPage,
|
|
|
+ limit: this.detailLimit,
|
|
|
+ name: this.goodsName
|
|
|
+ })
|
|
|
+ }).then(({ data }) => {
|
|
|
+ console.log(data, "详情图片列表");
|
|
|
+ if (scroll == "pageAdd") {
|
|
|
+ this.detail = [...this.detail, ...data.data.list];
|
|
|
+ } else {
|
|
|
+ this.detail = data.data.list;
|
|
|
+ }
|
|
|
+ this.detailTotalCount = data.data.totalCount;
|
|
|
+ this.detailTotalPage = data.data.totalPage;
|
|
|
+ });
|
|
|
+ } finally {
|
|
|
+ this.detailBusy = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ searchTupianScroll3(e) {
|
|
|
+ const el = e.target;
|
|
|
+ let nearBottom = el.scrollTop + el.clientHeight >= el.scrollHeight; // 再多留一点余量
|
|
|
+ if (
|
|
|
+ nearBottom &&
|
|
|
+ !this.detailBusy &&
|
|
|
+ this.detailPage < this.detailTotalPage
|
|
|
+ ) {
|
|
|
+ this.detailPage++;
|
|
|
+ this.searchTupianList3("pageAdd");
|
|
|
+ console.log("滚动到底", this.detailPage, this.detailTotalPage);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 通过商品名称获取数据弹出
|
|
|
+ searchTupian() {
|
|
|
+ if (!this.goodsName) {
|
|
|
+ this.$notify({
|
|
|
+ title: "提示",
|
|
|
+ duration: 1800,
|
|
|
+ message: "请输入商品标题进行搜索",
|
|
|
+ type: "warning"
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.cover = [];
|
|
|
+ this.cover1 = [];
|
|
|
+ this.carousel = [];
|
|
|
+ this.carousel1 = [];
|
|
|
+ this.detail = [];
|
|
|
+ this.detail1 = [];
|
|
|
+ this.coverPage = 1;
|
|
|
+ this.carouselPage = 1;
|
|
|
+ this.detailPage = 1;
|
|
|
+ this.tupianVisible = true;
|
|
|
+ this.searchTupianList1();
|
|
|
+ this.searchTupianList2();
|
|
|
+ this.searchTupianList3();
|
|
|
+ },
|
|
|
+ // 确定图片
|
|
|
+ searchAffirm() {
|
|
|
+ this.cover1.forEach(i => {
|
|
|
+ this.goodsCover = i.goodsCover;
|
|
|
+ });
|
|
|
+ this.potost = [];
|
|
|
+ for (var a = 0; a < this.carousel.length; a++) {
|
|
|
+ this.carousel1.forEach(i => {
|
|
|
+ if (i.id == this.carousel[a].id) {
|
|
|
+ this.potost.push(this.carousel[a].goodsPicture);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.goodsParticularsPicture = [];
|
|
|
+ for (var b = 0; b < this.detail.length; b++) {
|
|
|
+ this.detail1.forEach(i => {
|
|
|
+ if (i.id == this.detail[b].id) {
|
|
|
+ this.goodsParticularsPicture.push(
|
|
|
+ this.detail[b].goodsParticularsPicture
|
|
|
+ );
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.tupianVisible = false;
|
|
|
+ console.log(this.potost, "iii");
|
|
|
+ },
|
|
|
+ // 取消弹出
|
|
|
+ searchCancle() {
|
|
|
+ this.tupianVisible = false;
|
|
|
+ this.cover = [];
|
|
|
+ this.cover1 = [];
|
|
|
+ this.carousel = [];
|
|
|
+ this.carousel1 = [];
|
|
|
+ this.detail = [];
|
|
|
+ this.detail1 = [];
|
|
|
+ this.coverPage = 1;
|
|
|
+ this.carouselPage = 1;
|
|
|
+ this.detailPage = 1;
|
|
|
+ },
|
|
|
+ // 判断是否勾选封面图
|
|
|
+ isChecked1(item) {
|
|
|
+ return this.cover1.some(a => a.id == item.id);
|
|
|
+ },
|
|
|
+ // 判断是否勾选轮播图
|
|
|
+ isChecked2(item) {
|
|
|
+ return this.carousel1.some(a => a.id == item.id);
|
|
|
+ },
|
|
|
+ // 判断是否勾选详情图
|
|
|
+ isChecked3(item) {
|
|
|
+ return this.detail1.some(a => a.id == item.id);
|
|
|
+ },
|
|
|
+ // 勾选判断
|
|
|
+ toggle(item, flag) {
|
|
|
+ if (flag == 1) {
|
|
|
+ // 1) 已经在某个数组中，就把这个数组移除
|
|
|
+ if (this.cover1.some(a => a.id == item.id)) {
|
|
|
+ this.cover1 = this.cover1.filter(v => v.id != item.id);
|
|
|
+ console.log(this.cover1);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.cover1.shift();
|
|
|
+ this.cover1.push({
|
|
|
+ id: item.id,
|
|
|
+ goodsCover: item.goodsCover
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (flag == 2) {
|
|
|
+ if (this.carousel1.some(a => a.id == item.id)) {
|
|
|
+ this.carousel1 = this.carousel1.filter(v => v.id != item.id);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.carousel1.length >= 4) {
|
|
|
+ this.carousel1.shift();
|
|
|
+ }
|
|
|
+ this.carousel1.push({
|
|
|
+ id: item.id,
|
|
|
+ goodsCover: item.goodsCover
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (flag == 3) {
|
|
|
+ if (this.detail1.some(a => a.id == item.id)) {
|
|
|
+ this.detail1 = this.detail1.filter(v => v.id != item.id);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.detail1.length >= 4) {
|
|
|
+ this.detail1.shift();
|
|
|
+ }
|
|
|
+ this.detail1.push({
|
|
|
+ id: item.id,
|
|
|
+ goodsCover: item.goodsCover
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // // 2) 尚未选中，需要放进“最少”的数组里
|
|
|
+ // if (this.cover.length >= 1) {
|
|
|
+ // this.cover.shift();
|
|
|
+ // this.cover.push(id);
|
|
|
+ // }
|
|
|
+ // else if (this.carousel.length < 7) this.carousel.push(id);
|
|
|
+ // else if (this.detail.length < 4) this.detail.push(id);
|
|
|
+ // else {
|
|
|
+ // // 全部满了，放轮播，并踢掉第一张
|
|
|
+ // this.carousel.shift();
|
|
|
+ // this.carousel.push(id);
|
|
|
+ // }
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -1596,4 +2003,55 @@ export default {
|
|
|
.divhove:hover {
|
|
|
opacity: 0.8;
|
|
|
}
|
|
|
+
|
|
|
+/* 导出限制 */
|
|
|
+.main-cont >>> .export {
|
|
|
+ width: 800px;
|
|
|
+}
|
|
|
+.export .tupian {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ overflow: auto;
|
|
|
+ height: 230px;
|
|
|
+}
|
|
|
+.export .btn {
|
|
|
+ margin-top: 15px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row-reverse;
|
|
|
+}
|
|
|
+.export .img-pool {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+.export .img-item {
|
|
|
+ width: 104px;
|
|
|
+ height: 104px;
|
|
|
+ position: relative;
|
|
|
+ margin: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ border: 2px solid transparent;
|
|
|
+}
|
|
|
+.export .img-item .el-image {
|
|
|
+ display: inline-block;
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+}
|
|
|
+.export .img-item .el-image >>> img {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+}
|
|
|
+.export .img-item.checked {
|
|
|
+ border-color: #409eff;
|
|
|
+}
|
|
|
+.export .checked-icon {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 2px;
|
|
|
+ right: 2px;
|
|
|
+ color: #409eff;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 50%;
|
|
|
+ padding: 2px;
|
|
|
+}
|
|
|
</style>
|
hzj18279462576@163.com