提交 c92753c9 编写于 作者: glod-money-money's avatar glod-money-money

update:更新

上级 8a7c9c5e
<template>
<div class="app-rawitem-carousel">
<Carousel class="carsouel-container" :autoplay="swipeConfig.isAuto" :autoplay-speed="swipeConfig.timeSpan" radius-dot>
<Carousel class="carsouel-container" :autoplay="swipeConfig.isAuto" :autoplay-speed="swipeConfig.timeSpan"
radius-dot>
<CarouselItem v-for="(item, index) in swipeData" :key="index">
<div class="carousel-img-item">
<a v-if="item.linkPath" :href="item.linkPath">
......@@ -16,6 +17,8 @@
</template>
<script lang='ts'>
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import { ImgurlBase64 } from '@/utils';
import { Environment } from "@/environments/environment";
@Component({})
export default class AppCarousel extends Vue {
/**
......@@ -24,7 +27,7 @@ export default class AppCarousel extends Vue {
* @type {*}
* @memberof AppPresetCarousel
*/
@Prop() public data?: any;
@Prop() public data?: any;
/**
* @description 轮播图数据
......@@ -39,13 +42,13 @@ export default class AppCarousel extends Vue {
* @memberof AppCarousel
*/
@Prop() public cssStyle?: any;
/**
* @description 样式表
* @param {*}
* @memberof AppCarousel
*/
@Prop() public cssClass?: any;
/**
* @description 样式表
* @param {*}
* @memberof AppCarousel
*/
@Prop() public cssClass?: any;
/**
* 名称
......@@ -53,7 +56,7 @@ export default class AppCarousel extends Vue {
* @type {string}
* @memberof AppCarousel
*/
@Prop() public name!: string;
@Prop() public name!: string;
/**
* 类型
......@@ -83,10 +86,10 @@ export default class AppCarousel extends Vue {
* @param {*} oldVal
* @memberof AppCarousel
*/
@Watch('data', { immediate: true, deep: true })
@Watch('value', { immediate: true, deep: true })
public onDataChange(newVal: any, oldVal: any) {
if (newVal) {
this.handleSwipData(newVal);
// this.handleSwipData(newVal);
}
}
......@@ -95,13 +98,22 @@ export default class AppCarousel extends Vue {
* @memberof AppCarousel
*/
created() {
this.handleSwipData(this.value);
//处理轮播图-动态数据
if (this.type === "FIELD_CAROUSEL") {
if (this.value && typeof this.value === 'string') {
const swipeData = JSON.parse(this.value);
this.handleSwipData(swipeData);
}
} else if (this.type === "STATIC_CAROUSEL") {
//处理轮播图-静态数据
this.handleSwipData(this.value);
}
}
/**
* @description 处理轮播图数据
* @memberof AppCarousel
*/
/**
* @description 处理轮播图数据
* @memberof AppCarousel
*/
private handleSwipData(data: any) {
if (data && data.length > 0) {
const configItem = data.findIndex((item: any) =>
......@@ -116,6 +128,9 @@ export default class AppCarousel extends Vue {
this.swipeConfig = this.setSwipeConfig(data);
}
}
this.swipeData = this.swipeData.map((item: any) => {
return this.addressProcessing(item);
});
}
/**
......@@ -142,6 +157,51 @@ export default class AppCarousel extends Vue {
};
}
/**
* 处理轮播图地址
*
* @memberof AppPresetRawitem
*/
private async addressProcessing(item: any) {
let _item: any = {};
if (this.type === "FIELD_CAROUSEL") {
let url = `${Environment.BaseUrl}${Environment.ExportFile}/${item.id}`;
let res = await ImgurlBase64.getInstance().getImgURLOfBase64(url);
_item.linkPath = item.linkPath;
_item.imgPath = res;
_item.iconClass = item.iconclass;
} else if (this.type === "STATIC_CAROUSEL") {
_item.linkPath = item.linkPath;
_item.imgPath = this.getImagePath(item);
_item.iconClass = this.getImageClass(item) || '';
}
return _item;
}
//TODO
/**
* 获取图片路径
*
* @memberof AppPresetRawitem
*/
public getImagePath(item: any) {
if (item && item.getPSSysImage && item.getPSSysImage.imagePath) {
return item.getPSSysImage.imagePath;
}
}
/**
* @description 获取imageClass
* @param {*}
* @memberof AppRawItem
*/
public getImageClass(item: any) {
if (item && item.getPSSysImage && item.getPSSysImage.cssClass) {
return item.getPSSysImage.cssClass;
}
}
/**
* 处理图标大小
* @memberof AppMobCarousel
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册