|
|
|
|
@ -7,13 +7,14 @@
|
|
|
|
|
>
|
|
|
|
|
<a-card
|
|
|
|
|
hoverable
|
|
|
|
|
style="width: 70%; margin-top: 10px"
|
|
|
|
|
style="width: 600px; margin-top: 10px"
|
|
|
|
|
v-for="item in cardList"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
>
|
|
|
|
|
<span class="card-close" @click="del(item.id)">×</span>
|
|
|
|
|
<a-row>
|
|
|
|
|
<a-col :span="9">
|
|
|
|
|
<a-col :span="19">
|
|
|
|
|
appSku编码：{{ item.appSkuId }}
|
|
|
|
|
<div style="color: #00000073; padding-bottom: 10px">
|
|
|
|
|
上传图片尺寸: 750*300
|
|
|
|
|
</div>
|
|
|
|
|
@ -25,19 +26,6 @@
|
|
|
|
|
/>
|
|
|
|
|
<span v-else>暂无图片</span>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="11">
|
|
|
|
|
<a-descriptions layout="vertical" :column="1">
|
|
|
|
|
<a-descriptions-item label="链接设置">
|
|
|
|
|
{{ item.customizeUrl }}
|
|
|
|
|
</a-descriptions-item>
|
|
|
|
|
<a-descriptions-item label="是否显示在用户端">
|
|
|
|
|
{{ item.isShow ? "是" : "否" }}
|
|
|
|
|
</a-descriptions-item>
|
|
|
|
|
<a-descriptions-item label="显示权重">
|
|
|
|
|
{{ item.showWeights }}
|
|
|
|
|
</a-descriptions-item>
|
|
|
|
|
</a-descriptions>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="4">
|
|
|
|
|
<a-button class="add-btn" @click="edit(item)">修改设置</a-button>
|
|
|
|
|
</a-col>
|
|
|
|
|
@ -49,10 +37,9 @@
|
|
|
|
|
:visible="add.show"
|
|
|
|
|
@ok="saveSetting"
|
|
|
|
|
@cancel="newSwiperClose"
|
|
|
|
|
width="900px"
|
|
|
|
|
width="600px"
|
|
|
|
|
>
|
|
|
|
|
<a-row>
|
|
|
|
|
<a-col :span="9">
|
|
|
|
|
<div style="color: #00000073; padding-bottom: 10px">
|
|
|
|
|
上传图片尺寸: 750*300
|
|
|
|
|
</div>
|
|
|
|
|
@ -60,67 +47,22 @@
|
|
|
|
|
:fileList="fileList"
|
|
|
|
|
@handleChange="handleChange"
|
|
|
|
|
></commonUpload>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="15">
|
|
|
|
|
<a-descriptions layout="vertical" :column="1">
|
|
|
|
|
<a-descriptions-item label="链接设置">
|
|
|
|
|
<a-input-group compact>
|
|
|
|
|
<a-select
|
|
|
|
|
style="width: 120px"
|
|
|
|
|
v-model="form.type"
|
|
|
|
|
placeholder="请选择类型"
|
|
|
|
|
@change="changeType"
|
|
|
|
|
>
|
|
|
|
|
<a-select-option :value="1"> 自定义链接 </a-select-option>
|
|
|
|
|
<a-select-option :value="2"> 商城 </a-select-option>
|
|
|
|
|
<a-select-option :value="3"> 资讯 </a-select-option>
|
|
|
|
|
<a-select-option :value="4"> 公告 </a-select-option>
|
|
|
|
|
<a-select-option :value="5"> 活动 </a-select-option>
|
|
|
|
|
</a-select>
|
|
|
|
|
<a-input
|
|
|
|
|
v-if="form.type === 1"
|
|
|
|
|
style="width: 200px; background: #0000000f"
|
|
|
|
|
placeholder="请输入链接"
|
|
|
|
|
v-model="form.customizeUrl"
|
|
|
|
|
></a-input>
|
|
|
|
|
<div class="new-swiper">
|
|
|
|
|
<a-button
|
|
|
|
|
v-else-if="form.type !== 1 && form.customizeUrl === ''"
|
|
|
|
|
style="width: 100px; background: #0000000f"
|
|
|
|
|
style="width: 100px; margin-bottom: 10px"
|
|
|
|
|
@click="table.show = true"
|
|
|
|
|
>请选择链接
|
|
|
|
|
</a-button>
|
|
|
|
|
<a-button
|
|
|
|
|
style="width: 70%; background: #0000000f; overflow: hidden"
|
|
|
|
|
@click="table.show = true"
|
|
|
|
|
v-else
|
|
|
|
|
>{{ form.customizeUrl }}</a-button
|
|
|
|
|
>选择商品</a-button
|
|
|
|
|
>
|
|
|
|
|
</a-input-group>
|
|
|
|
|
</a-descriptions-item>
|
|
|
|
|
<a-descriptions-item label="是否显示在用户端">
|
|
|
|
|
<a-switch
|
|
|
|
|
checked-children="开"
|
|
|
|
|
un-checked-children="关"
|
|
|
|
|
v-model="form.isShow"
|
|
|
|
|
></a-switch>
|
|
|
|
|
</a-descriptions-item>
|
|
|
|
|
<a-descriptions-item label="显示权重">
|
|
|
|
|
<a-input
|
|
|
|
|
type="number"
|
|
|
|
|
v-model.number="form.showWeights"
|
|
|
|
|
appSku编码<a-input
|
|
|
|
|
disabled
|
|
|
|
|
placeholder="请选择商品"
|
|
|
|
|
v-model="form.appSkuId"
|
|
|
|
|
style="width: 90%"
|
|
|
|
|
></a-input>
|
|
|
|
|
</a-descriptions-item>
|
|
|
|
|
</a-descriptions>
|
|
|
|
|
</a-col>
|
|
|
|
|
</div>
|
|
|
|
|
</a-row>
|
|
|
|
|
</a-modal>
|
|
|
|
|
|
|
|
|
|
<chooseTable
|
|
|
|
|
:show="table.show"
|
|
|
|
|
:type="form.type"
|
|
|
|
|
@submit="submit"
|
|
|
|
|
@close="close"
|
|
|
|
|
/>
|
|
|
|
|
<chooseTable :show="table.show" @submit="submit" @close="close" />
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
@ -131,7 +73,7 @@ import {
|
|
|
|
|
swiperInsert,
|
|
|
|
|
swiperDel,
|
|
|
|
|
swiperUpdate,
|
|
|
|
|
} from "@/api/operation/swiper";
|
|
|
|
|
} from "@/api/shop/swiper";
|
|
|
|
|
import chooseTable from "./depend/table.vue";
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
@ -144,6 +86,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
fileList: [],
|
|
|
|
|
cardList: [],
|
|
|
|
|
Listeners:[],
|
|
|
|
|
add: {
|
|
|
|
|
show: false,
|
|
|
|
|
title: "添加轮播图",
|
|
|
|
|
@ -157,7 +100,7 @@ export default {
|
|
|
|
|
methods: {
|
|
|
|
|
async getData() {
|
|
|
|
|
let res = await swiperList();
|
|
|
|
|
this.cardList = res.data;
|
|
|
|
|
this.Listeners = res.data
|
|
|
|
|
},
|
|
|
|
|
// 新增
|
|
|
|
|
newSwiper() {
|
|
|
|
|
@ -172,13 +115,8 @@ export default {
|
|
|
|
|
show: true,
|
|
|
|
|
title: "修改轮播图",
|
|
|
|
|
};
|
|
|
|
|
console.log(data);
|
|
|
|
|
this.form.id = data.id;
|
|
|
|
|
this.form.isShow = data.isShow;
|
|
|
|
|
this.form.showWeights = data.showWeights;
|
|
|
|
|
this.form.type = data.type;
|
|
|
|
|
this.form.customizeUrl = data.customizeUrl;
|
|
|
|
|
this.form.associationId = data.associationId;
|
|
|
|
|
this.form = data;
|
|
|
|
|
this.form.imgUrls = [];
|
|
|
|
|
if (data.imgList.length > 0) {
|
|
|
|
|
// 如果已经有图片
|
|
|
|
|
this.form.imgUrls.push(data.imgList[0].url);
|
|
|
|
|
@ -194,6 +132,7 @@ export default {
|
|
|
|
|
file.push(obj);
|
|
|
|
|
}
|
|
|
|
|
this.fileList = file;
|
|
|
|
|
// console.log(this.fileList);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
newSwiperClose() {
|
|
|
|
|
@ -202,21 +141,17 @@ export default {
|
|
|
|
|
title: "添加轮播图",
|
|
|
|
|
};
|
|
|
|
|
this.fileList = [];
|
|
|
|
|
this.form.imgUrls = [];
|
|
|
|
|
this.form = {
|
|
|
|
|
id: undefined,
|
|
|
|
|
type: undefined,
|
|
|
|
|
showWeights: 0,
|
|
|
|
|
customizeUrl: "",
|
|
|
|
|
isShow: false,
|
|
|
|
|
associationId: undefined,
|
|
|
|
|
appSkuId: "",
|
|
|
|
|
imgUrls: [],
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
// 选择链接确定
|
|
|
|
|
submit(data, customizeUrl) {
|
|
|
|
|
this.form.customizeUrl = customizeUrl;
|
|
|
|
|
this.form.associationId = data[0];
|
|
|
|
|
submit(id, sku) {
|
|
|
|
|
// console.log(id);
|
|
|
|
|
// console.log(sku);
|
|
|
|
|
this.form.appSkuId = sku;
|
|
|
|
|
this.close();
|
|
|
|
|
},
|
|
|
|
|
// 保存
|
|
|
|
|
@ -245,16 +180,13 @@ export default {
|
|
|
|
|
close() {
|
|
|
|
|
this.table.show = false;
|
|
|
|
|
},
|
|
|
|
|
changeType() {
|
|
|
|
|
this.form.customizeUrl = "";
|
|
|
|
|
},
|
|
|
|
|
// 删除轮播图
|
|
|
|
|
async del(id) {
|
|
|
|
|
this.$confirm({
|
|
|
|
|
title: "是否删除",
|
|
|
|
|
icon: "delete",
|
|
|
|
|
onOk: async () => {
|
|
|
|
|
swiperDel({ homepageCarouselId: id }).then((res) => {
|
|
|
|
|
swiperDel({ rotationId: id }).then((res) => {
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
this.$message.success(res.msg);
|
|
|
|
|
this.getData();
|
|
|
|
|
@ -267,7 +199,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
// 上传图片
|
|
|
|
|
handleChange(data) {
|
|
|
|
|
console.log(data);
|
|
|
|
|
// console.log(data);
|
|
|
|
|
this.fileList = data;
|
|
|
|
|
// 删除照片
|
|
|
|
|
if (this.fileList.length === 0) {
|
|
|
|
|
@ -277,6 +209,15 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
watch:{
|
|
|
|
|
Listeners:{
|
|
|
|
|
handler(val){
|
|
|
|
|
console.log(val);
|
|
|
|
|
this.cardList = val
|
|
|
|
|
},
|
|
|
|
|
deep: true
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
@ -304,4 +245,9 @@ export default {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
}
|
|
|
|
|
.new-swiper {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
bibi