jufubao-base 1.0.63-beta2 → 1.0.63-beta201

package/src/components/JfbBaseVideo/MoreScreen.vue

@@ -0,0 +1,281 @@
+<template>
+	<view class="sreen">
+		<view
+			class="sreen__box notCarousel"
+			v-if="config.isCarousel === false"
+		>
+			<view
+				v-for="(item,index) in list"
+				:key="item['content_id']"
+				:style="{
+					borderRadius: config.radius  + 'rpx',
+					marginTop: index < config.cell ? 0 : config.padding + 'rpx',
+					width: config.width + 'px',
+					height: config.height + 'px',
+					marginRight: (index+1) % config.cell === 0 ? 0: config.padding + 'rpx'
+				}"
+				@click="handleClick(item)"
+			>
+				<image
+					:style="{
+						width: width + 'px',
+						height: height + 'px'
+					}"
+					:src="item.image_url"
+					mode="widthFix"
+				></image>
+			</view>
+		</view>
+		<view class="sreen__box carousel" v-if="config.isCarousel === true">
+			<xd-swiper-dot
+				:current="current"
+				:info="list"
+				field="content_name"
+				:mode="config.mode"
+				:dots-styles="config.dotStyleData"
+				:style="{height:(getHeight + 46 * $rpxNum) + 'px'}"
+			>
+				<xd-swiper
+					:indicator-dots="false"
+					:interval="config.carouselTime"
+					:list="list"
+					:current="current"
+					width="100%"
+					:height="getHeight + 'px'"
+					@onClickItem="handleClick"
+					@animationfinish="handleAnimationfinish"
+				>
+					<template slot-scope="{ item, index}">
+						<view
+							class="sreen__box-list"
+							:style="{
+								height: getHeight + 'px'
+							}"
+						>
+							<view
+								v-for="(it, indext) in item"
+								:key="it['content_id']"
+								:style="{
+								borderRadius: config.radius  + 'rpx',
+								width: config.width + 'px',
+					      height: config.height + 'px',
+								marginRight: (indext+1) % config.cell === 0 ? 0: config.padding + 'rpx',
+								marginTop: indext < config.cell ? 0 : config.padding + 'rpx',
+							}"
+								@click="handleClick(it)"
+							>
+								<image :style="{ width: width + 'px', height: height + 'px'}" :src="it.image_url" mode="widthFix"></image>
+							</view>
+						</view>
+					</template>
+				</xd-swiper>
+			</xd-swiper-dot>
+		</view>
+		<view v-if="isPreview" class="carousel-mask"></view>
+	</view>
+</template>
+
+<script>
+  import XdSwiperDot from "./XdSwiperDot";
+  import XdSwiper from "@/components/XdSwiper/XdSwiper";
+  
+  export default {
+    components:{
+      XdSwiperDot,
+      XdSwiper
+		},
+    name: "MoreScreen",
+    props: {
+      config: {
+        type: Object,
+        required: true
+      },
+      content: {
+        type: Array,
+        required: true
+      }
+    },
+    data() {
+      return {
+        timer: null,
+        width: 0,
+        height: 0,
+        padding: 0,
+        status: false,
+				list: [],
+        isPreview: false,
+        current: 0,
+      }
+    },
+		computed:{
+      getHeight() {
+        let height = this.height * this.config.rows;
+        let padding = 0;
+        if (this.config.rows === 2) padding = Number(this.config.padding) * this.$rpxNum;
+        return height + padding;
+      },
+		},
+    watch: {
+      config() {
+        this.init()
+      },
+      content() {
+        this.init();
+      },
+			
+    },
+    created() {
+      this.isPreview = this.$configProject.isPreview;
+      this.init();
+    },
+    methods: {
+      handleAnimationfinish(e) {
+        this.current = e.detail.current;
+      },
+      init() {
+        if (this.timer) clearTimeout(this.timer);
+        this.timer = setTimeout(() => {
+          this.width = Number(this.config.width);
+          this.height = Number(this.config.height);
+          this.padding = Number(this.config.padding);
+          
+          //静态图显示
+          if(this.config.isCarousel === false) {
+            this.list = this.content
+					}
+          //轮播图显示
+          else {
+            let num = 4 * this.config.rows;
+            let maxPage = Math.ceil(this.content.length / num);
+            let arr = [];
+            for(let i =1 ; i <= maxPage; i++) {
+              arr.push(this.$xdUniHelper.getLocalPaginationData(this.content, i, num))
+						}
+            this.list = arr;
+					}
+        
+        
+        }, 100)
+      },
+      handleClick(item) {
+        //内部链接跳转地址
+        if (item.redirect_type === 'INN') {
+          try {
+            let url = JSON.parse(item.redirect_data);
+            let params = '';
+            if (item['redirect_params']) params = `?${item['redirect_params']}`;
+            this.$xdUniHelper.navigateTo({
+              url: url.page + params
+            })
+          } catch (e) {
+            console.error(e)
+          }
+        }
+
+        //外部链接
+        if (item.redirect_type === 'URL') {
+          let reg = /^(http:\/\/|https:\/\/|\/\/)+.+$/;
+          //#ifdef MP-WEIXIN
+          try {
+            let url = JSON.parse(item.redirect_data);
+            if (reg.test(url.url) && this.$configProject.extras.webview) {
+              console.warn(`广告跳转外站: ${url.url}`)
+              this.$xdUniHelper.navigateTo({
+                url: `${this.$configProject.extras.webview}?seatUrl=${Base64.encodeURI(url.url)}`
+              });
+            } else {
+              throw Error('地址错误')
+            }
+          } catch (e) {
+            console.error(e)
+          }
+          //#endif
+          //#ifdef H5
+          try {
+            let url = JSON.parse(item.redirect_data);
+            if (reg.test(url.url)) {
+              console.warn(`广告跳转外站: ${url.url}`);
+              window.location.href = url.url;
+            } else {
+              throw Error('地址错误')
+            }
+          } catch (e) {
+            console.error(e)
+          }
+          //#endif
+
+        }
+      },
+    }
+  }
+</script>
+
+<style scoped lang="less">
+	.sreen {
+		width: calc(100% + 4px); /**防止宽度不够问**/
+		position: relative;
+		
+		& .carousel-mask {
+			position: absolute;
+			left: 0;
+			right: 0;
+			top: 0;
+			bottom: 0;
+			background: rgba(0, 0, 0, 0);
+		}
+		
+		&__box.notCarousel {
+			display: flex;
+			justify-content: flex-start;
+			align-items: flex-start;
+			flex-wrap: wrap;
+			overflow: hidden;
+			width: calc(100% + 20px); /**防止宽度不够问**/
+			
+			& > view {
+				display: flex;
+				justify-content: center;
+				align-items: flex-start;
+				flex-shrink: 0;
+				box-sizing: border-box;
+				overflow: hidden;
+			}
+		}
+		
+		&__box.carousel {
+			display: flex;
+			justify-content: flex-start;
+			align-items: flex-start;
+			flex-wrap: wrap;
+			overflow: hidden;
+		}
+		
+		& .sreen__box-list {
+			width: calc(100% + 20px); /**防止宽度不够问**/
+			display: flex;
+			justify-content: flex-start;
+			align-items: flex-start;
+			flex-wrap: wrap;
+			overflow: hidden;
+			
+			& view {
+				display: flex;
+				justify-content: center;
+				align-items: flex-start;
+				flex-shrink: 0;
+				box-sizing: border-box;
+				overflow: hidden;
+				
+				&:nth-child(4n) {
+					margin-right: 0 !important;
+				}
+				
+				& > image {
+				
+				}
+			}
+		}
+	}
+	
+	
+</style>

package/src/components/JfbBaseVideo/XdSwiperDot.vue

@@ -0,0 +1,234 @@
+<template>
+	<view class="uni-swiper__warp">
+		<slot />
+		<view v-if="mode === 'default'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='default'>
+			<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
+        'width': (index === current? dots.width*1.7: dots.width ) + 'px','height':dots.width*(2/5) +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border-radius':'0px'}"
+			 :key="index" class="uni-swiper__dots-item uni-swiper__dots-bar" />
+		</view>
+		<view v-if="mode === 'dot'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='dot'>
+			<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
+        'width': dots.width + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
+			 :key="index" class="uni-swiper__dots-item" />
+		</view>
+		<view v-if="mode === 'round'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='round'>
+			<view v-for="(item,index) in info" @click="clickItem(index)" :class="[index === current&&'uni-swiper__dots-long']" :style="{
+		    'width':(index === current? dots.width*3:dots.width ) + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
+			 :key="index" class="uni-swiper__dots-item " />
+		</view>
+		<view v-if="mode === 'nav'" key='nav' :style="{'background-color':dotsStyles.backgroundColor,'bottom':'0'}" class="uni-swiper__dots-box uni-swiper__dots-nav">
+			<text :style="{'color':dotsStyles.color}" class="uni-swiper__dots-nav-item">{{ (current+1)+"/"+info.length }}</text>
+		</view>
+		<view v-if="mode === 'indexes'" key='indexes' :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box">
+			<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
+        'width':dots.width + 'rpx','height':dots.height +'rpx' ,'color':index === current?dots.selectedColor:dots.color,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
+			 :key="index" class="uni-swiper__dots-item uni-swiper__dots-indexes"><text class="uni-swiper__dots-indexes-text">{{ index+1 }}</text></view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+	/**
+	 * XdSwiperDot 轮播图指示点
+	 * @description 自定义轮播图指示点
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=284
+	 * @property {Number} current 当前指示点索引，必须是通过 `swiper` 的 `change` 事件获取到的 `e.detail.current`
+	 * @property {String} mode = [default|round|nav|indexes] 指示点的类型
+	 * 	@value defualt 默认指示点
+	 * 	@value round 圆形指示点
+	 * 	@value nav 条形指示点
+	 * 	@value indexes 索引指示点
+	 * @property {String} field mode 为 nav 时，显示的内容字段（mode = nav 时必填）
+	 * @property {String} info 轮播图的数据，通过数组长度决定指示点个数
+	 * @property {Object} dotsStyles 指示点样式
+	 * @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex}
+	 */
+
+	export default {
+		name: 'XdSwiperDot',
+		emits:['clickItem'],
+		props: {
+			info: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			current: {
+				type: Number,
+				default: 0
+			},
+			dotsStyles: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 类型 ：default(默认) indexes long nav
+			mode: {
+				type: String,
+				default: 'default'
+			},
+			// 只在 nav 模式下生效，变量名称
+			field: {
+				type: String,
+				default: ''
+			}
+		},
+		data() {
+			return {
+        dotsSource: {
+          width: 8,
+          height: 8,
+          bottom: 7,
+          color: '#fff',
+          backgroundColor: 'rgba(0, 0, 0, .3)',
+          border: '1px rgba(0, 0, 0, .3) solid',
+          selectedBackgroundColor: '#333',
+          selectedBorder: '1px rgba(0, 0, 0, .9) solid'
+				},
+				dots: {	}
+			}
+		},
+		watch: {
+			dotsStyles(newVal) {
+			  this.init(newVal)
+			},
+			mode() {
+        this.init(this.dotsStyles)
+			}
+
+		},
+		created() {
+      this.init(this.dotsStyles)
+		},
+		methods: {
+			clickItem(index) {
+				this.$emit('clickItem', index)
+			},
+			
+			init(value){
+        let dot = {};
+        if (this.mode === 'indexes') {
+          dot = {
+            width: 34,
+            height: 34,
+          }
+        }
+        this.dots = Object.assign(
+          JSON.parse(JSON.stringify(this.dotsSource)),
+          JSON.parse(JSON.stringify(value)),
+          dot
+        )
+			}
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.uni-swiper__warp {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: column;
+		position: relative;
+		overflow: hidden;
+	}
+
+	.uni-swiper__dots-box {
+		position: absolute;
+		bottom: 10px;
+		left: 0;
+		right: 0;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.uni-swiper__dots-item {
+		width: 8px;
+		border-radius: 100px;
+		margin-left: 6px;
+		background-color: $uni-bg-color-mask;
+		/* #ifndef APP-NVUE */
+		cursor: pointer;
+		/* #endif */
+		/* #ifdef H5 */
+		// border-width: 5px 0;
+		// border-style: solid;
+		// border-color: transparent;
+		// background-clip: padding-box;
+		/* #endif */
+		// transition: width 0.2s linear;  不要取消注释，不然会不能变色
+	}
+
+	.uni-swiper__dots-item:first-child {
+		margin: 0;
+	}
+
+	.uni-swiper__dots-default {
+		border-radius: 100px;
+	}
+
+	.uni-swiper__dots-long {
+		border-radius: 50px;
+	}
+
+	.uni-swiper__dots-bar {
+		border-radius: 50px;
+	}
+
+	.uni-swiper__dots-nav {
+		bottom: 20rpx!important;
+		height: 38rpx;
+		line-height: 38rpx;
+		position: absolute;
+		right: 0;
+		left: initial;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		justify-content: flex-start;
+		align-items: center;
+		background-color: rgba(0, 0, 0, 0.5);
+		border-radius: 6rpx 0 0 6rpx;
+		
+		& > text {
+			font-size: 20rpx;
+			padding: 0 10px!important;
+			margin: 0;
+			text-align: center;
+		}
+	}
+
+	.uni-swiper__dots-nav-item {
+		/* overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap; */
+		font-size: $uni-font-size-base;
+		color: #fff;
+		margin: 0 15px;
+	}
+
+	.uni-swiper__dots-indexes {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		// flex: 1;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.uni-swiper__dots-indexes-text {
+		font-size: $uni-font-size-sm;
+	}
+</style>