jufubao-base 1.0.63-beta2 → 1.0.63-beta201

package/src/components/JfbBaseVideo/JfbBaseVideo.vue

@@ -0,0 +1,465 @@
+<template>
+  <view
+    class="jfb-base-poster"
+    @click="handleEditxSelect"
+    :class="{ editx : isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-poster__edit"
+      :class="{ editx : isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-base-poster__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view
+			class="jfb-base-poster__body"
+			v-if="noData"
+			:style="{
+				margin: margin
+			}
+		">
+			<!--一分屏-->
+			<template v-if="posterType === '1'">
+				<view
+					v-if="isCarousel === false"
+					class="jfb-base-poster__one notCarousel"
+					:style="{
+						width: width + 'rpx',
+						height: height + 'rpx',
+						borderRadius: (posterType === '1' ? radius: 0) + 'rpx',
+					}"
+				>
+					<view @click="handleClick(info[0])">
+						<image
+							:style="{
+								width: width + 'rpx',
+								height: height + 'rpx'
+							}"
+							:src="info[0].image_url"
+							mode="aspectFill"
+						></image>
+					</view>
+				</view>
+				<view
+					v-else
+					class="jfb-base-poster__one carousel"
+					:style="{
+						width: width + 'rpx',
+						height: height + 'rpx',
+						borderRadius: (posterType === '1' ? radius: 0) + 'rpx',
+					}"
+				>
+					<xd-swiper-dot
+						:current="current"
+						:info="info"
+						field="content_name"
+						:mode="mode"
+						:dots-styles="dotStyleData"
+					>
+						<xd-swiper
+							:indicator-dots="false"
+							:list="info"
+							:current="current"
+							:width=" width + 'rpx'"
+							:height="height + 'rpx'"
+							@onClickItem="handleClick"
+							@animationfinish="handleAnimationfinish"
+						>
+							<template slot-scope="{ item, index}">
+								<image :src="item['image_url']" mode="aspectFill"></image>
+							</template>
+						</xd-swiper>
+					</xd-swiper-dot>
+
+					<view v-if="isPreview" class="carousel-mask"></view>
+				</view>
+			</template>
+			<!--一分屏-->
+			<more-screen
+				v-if="posterType !== '1'"
+				:config="getConfig"
+				:content="info"
+			></more-screen>
+    </view>
+  </view>
+</template>
+
+<script>
+	const color = require('color');
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import { jfbRootExec } from "@/utils/xd.event";
+  import JfbBaseVideoMixin from "./JfbBaseVideoMixin";
+  import componentsMixins from "@/mixins/componentsMixins";
+  import extsMixins from "@/mixins/extsMixins"
+  import { getContainerPropsValue } from "@/utils/xd.base";
+  import getServiceUrl from '@/common/getServiceUrl'
+	import XdImage from "@/components/XdImage/XdImage";
+  import XdSwiper from "@/components/XdSwiper/XdSwiper";
+  import MoreScreen from "./MoreScreen";
+  import XdSwiperDot from "./XdSwiperDot";
+
+  export default {
+    name: "JfbBaseVideo",
+    components: {
+      XdFontIcon,
+      XdImage,
+      XdSwiper,
+      MoreScreen,
+      XdSwiperDot
+    },
+    mixins: [componentsMixins,extsMixins,JfbBaseVideoMixin],
+    data() {
+      return {
+        selfMask: true,
+        params: {},
+
+				//Swiper 配置
+        mode:'round', //default 、round 、nav 、dot, indexes
+        current: 0,
+				poster: null,
+        posterPosition: null,
+        posterType: '1',//分屏模式
+				showType: '', //广告显示方式
+				isCarousel: true, //是否轮播图
+        carouselTime: 5,//轮播图轮播周期
+				useNumber: null, //广告使用张数
+        height: 0, //广告高度
+        width: 0, //广告高度
+				padding: 0, //广告内容之间间距
+        rows: 1, //四分屏起作用
+        radius: 0,
+				timer: null,
+				info: [],
+        mS: {
+          top: 0,
+					bottom: 0,
+					left: 0,
+					right: 0
+				},
+				isPreview: false,
+				noData:false,
+
+				test: {
+          "content_id": "KpBbUKdj4aBejwe7Fh1ki",
+          "position_id": "QCk3PmoyQmOWRP1SxnYR3",
+          "partner_id": 0,
+          "site_id": "",
+          "content_name": "测试.",
+          "image_url": "//dummyimage.com/200x200",
+          "redirect_type": "EMP",
+          "redirect_type_name": "无链接",
+          "redirect_data": "",
+          "sort": "",
+          "status": "",
+          "start_time": "",
+          "end_time": "",
+          "op_user_id": "",
+          "created_time": 0,
+          "updated_time": 0
+        }
+      }
+    },
+		computed: {
+      getConfig(){
+        let cell = this.posterType === '2' ? 2: (this.posterType === '3' ? 3: 4);
+        let spacing = Math.floor((cell - 1) * this.padding * this.$rpxNum);
+        let viewWidth = uni.getSystemInfoSync().safeArea.width - ((this.mS.right || 0) + (this.mS.left || 0)) * this.$rpxNum - spacing;
+        if(this.$configProject.isPreview) viewWidth -= 2;
+        let width = Math.floor(viewWidth / cell);
+        let height = this.height * width / this.width;
+        return {
+          mode: this.getMode,
+          dotStyleData: this.dotStyleData,
+          poster: this.poster,
+          showType: this.showType,
+          isCarousel: this.isCarousel,
+          carouselTime: this.carouselTime,
+          radius: this.radius,
+          padding: this.padding,
+          rows: this.rows,
+          cell,
+          height,
+          width
+				}
+			},
+      margin(){
+        return `${this.mS.top||0}rpx ${this.mS.right||0}rpx ${this.mS.bottom||0}rpx ${this.mS.left||0}rpx`
+			},
+			getMode(){
+        let mode = this.mode;
+        if (this.posterType !== '1') {
+          if (this.mode === 'nav'
+            || this.mode === 'indexes') {
+            mode = 'dot'
+          }
+        }
+        return mode;
+			},
+      dotStyleData(){
+        let alpha = 1;
+        if(this.posterType === '1') alpha = 0.6;
+
+				let selectedColor = `rgba(${color(this.mainColor).alpha(alpha).array().join(',')})`;
+				console.log('selectedColor',selectedColor, this.mode, this.posterType);
+        let style = {
+          dot: {
+            backgroundColor: 'rgba(166,166,166,.5)',
+            border: '0px rgba(166,166,166,.5) solid',
+            color: '#fff',
+            selectedBackgroundColor: selectedColor,
+            selectedBorder: `0px this.mainColor solid`
+          },
+          default: {
+            width: 16,
+            backgroundColor: 'rgba(200,200,200,.45)',
+            border: '1px rgba(200,200,200,.45) solid',
+            color: '#fff',
+            selectedBackgroundColor: selectedColor,
+            selectedBorder: `1px this.mainColor solid`
+          },
+          round: {
+            backgroundColor: 'rgba(166,166,166,.5)',
+            border: '0px rgba(166,166,166,.5) solid',
+            color: '#fff',
+            selectedBackgroundColor: selectedColor,
+            selectedBorder: `0px this.mainColor solid`
+          },
+          nav: {
+            backgroundColor: 'rgba(0,0,0,.5)',
+            border: '1px rgba(0,0,0,.5) solid',
+            color: '#fff',
+            selectedBackgroundColor: 'rgba(255, 255, 255, 1)',
+            selectedBorder: '1px rgba(255, 255, 255 1) solid'
+          },
+          indexes: {
+            backgroundColor: 'rgba(0,0,0,.5)',
+            border: '0px rgba(0,0,0,.5) solid',
+            color: '#aaa',
+            selectedBackgroundColor: 'rgba(0,0,0,.8)',
+            selectedBorder: '0px rgba(0,0,0,.8) solid',
+            selectedColor: '#fff',
+          }
+        }
+        if(this.posterType !== '1') {
+          if(this.mode === 'nav'
+						|| this.mode === 'indexes') {
+            this.mode = 'dot'
+					}
+        }
+        return style[this.mode]
+			},
+		},
+    watch: {
+      container(value) {
+        this.init(value);
+        if(this.timer) clearTimeout(this.timer);
+        this.timer = setTimeout(()=>{
+          if (this.$configProject['isPreview']) this.onJfbLoad()
+				}, 400)
+      }
+    },
+    created() {
+      this.init(this.container);
+      this.isPreview = this.$configProject.isPreview;
+    },
+    methods: {
+      getTestData(){
+        let temp = [];
+        for (let i = 0; i< this.useNumber; i++) {
+          let item = this.$xdUniHelper.cloneDeep(this.test);
+          item.content_id = i;
+          item.content_name = item.content_name + i;
+          item.image_url = `//dummyimage.com/${this.width}x${this.height}`;
+          temp.push(item)
+				}
+        return temp
+			},
+      handleAnimationfinish(e) {
+        this.current = e.detail.current;
+      },
+      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
+
+        }
+      },
+      handleImage(list){
+      	return list.map(item => {
+          return {
+            ...item,
+            image_url: getServiceUrl(item.image_url)
+          }
+        })
+			},
+      handleOne(list){
+        this.info = this.handleImage(list);
+			},
+
+			getDefualtValue(key){
+        if (key === 'margin') {
+          return {top: 0, bottom: 0, left: 0, right: 0}
+        }
+			},
+
+      /**
+       * @description 监听事件变化
+       * @param container {object} 业务组件对象自己
+       */
+      init(container) {
+        this.poster = getContainerPropsValue(container, 'content.poster', {size:{width: 750, height: 160}, type: '1'});
+        if (this.poster.type) {
+          this.posterType = this.poster.type
+        }
+        if(this.poster.position) {
+          this.posterPosition = this.poster.position
+				}
+        this.radius = getContainerPropsValue(container, 'content.radius', 0);
+        this.padding = getContainerPropsValue(container, 'content.padding', 0);
+        this.rows = getContainerPropsValue(container, 'content.rows', 1);
+        this.mS = getContainerPropsValue(container, 'content.margin', this.getDefualtValue('margin'));
+
+        //content
+        this.mode = getContainerPropsValue(container, 'content.dot_type', 'dot');
+        this.isCarousel = getContainerPropsValue(container, 'content.isCarousel', 1) === 2;
+        this.carouselTime = Number(getContainerPropsValue(container, 'content.carouselTime', 5)) * 1000;
+        this.useNumber = getContainerPropsValue(container, 'content.number', 1);
+
+        if(this.poster.size) {
+          this.width = this.poster.size.width;
+          this.height = this.poster.size.height;
+				}
+      },
+
+      onJfbLoad(options) {
+        this.params = options;
+        jfbRootExec('getListPosterContent', {
+          vm: this,
+          data: {
+            page_id: this.pageAttr['page_id'], //页面ID
+            container_id: this.containerId, //组件ID
+            page_size: this.useNumber //可以不传
+          },
+        })
+          .then(res => {
+            if(res.list.length === 0 && this.isPreview) {
+              res.list = this.getTestData();
+						}
+
+            if (this.posterType === '1') this.handleOne(res.list);
+            if (this.posterType === '2') this.handleOne(res.list);
+            if (this.posterType === '3') this.handleOne(res.list);
+            if (this.posterType === '4') this.handleOne(res.list);
+            if(this.$configProject.isPreview) this.noData = true;
+            else  this.noData = res.list.length > 0;
+          })
+          .catch(error => {
+            console.error(error)
+          })
+      },
+
+      onJfbUpdate(data) {
+        this.onJfbLoad(this.params);
+      }
+
+
+    }
+  }
+
+</script>
+
+<style scoped lang="less">
+  @import "./JfbBasePosterLess.less";
+
+  .jfb-base-video {
+    &__body{
+			box-sizing: border-box;
+			overflow: hidden;
+			justify-content: center;
+			align-items: center;
+			display: flex;
+    }
+		&__one.notCarousel {
+			position: relative;
+			box-sizing: border-box;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			overflow: hidden;
+
+
+			& > view {
+				width: 100%;
+				height: 100%;
+				box-sizing: border-box;
+
+				& > image {
+
+				}
+			}
+		}
+
+		&__one.carousel {
+			position: relative;
+			box-sizing: border-box;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			overflow: hidden;
+
+			& .carousel-mask {
+				position: absolute;
+				left: 0;
+				right: 0;
+				top: 0;
+				bottom: 0;
+				background: rgba(0,0,0,0);
+			}
+		}
+
+  }
+</style>

package/src/components/JfbBaseVideo/JfbBaseVideoLess.less

@@ -0,0 +1,80 @@
+/**
+* @desc 获取绝对路径完整地址
+* @param @path
+**/
+//例如：https://image.jufubao.cn/20220501010108/image/bg/default_gonghui_bg.png
+@basePath: 'business/';
+@doMain: '//sandbox-img.jufubao.cn/';
+
+.getBusinessImageUrl(@path, @size: 'size8') {
+  @url: "@{doMain}@{basePath}@{path}?x-oss-process=style/@{size}";
+  background-image: url(@url);
+}
+
+//start
+.jfb-base-video {
+  border: 1px dashed rgba(0, 0, 0, 0);
+  box-sizing: border-box;
+  min-height: unit(100, rpx);
+
+  &__body{
+      position: relative;
+      overflow: hidden;
+      z-index: 2
+  }
+
+  &.editx {
+    position: relative;
+    border: 1px dashed blue;
+    box-sizing: border-box;
+    z-index: 3
+
+  }
+
+  &:hover {
+    border: 1px dashed blue;
+  }
+
+  &.noBorder {
+    border-color: rgba(0,0,0,0);
+    border-width: 0;
+  }
+
+
+  &__edit {
+    cursor: pointer;
+    position: absolute;
+    right: unit(0, rpx);
+    top: unit(-52, rpx);
+    height: unit(50, rpx);
+    line-height: unit(50, rpx);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 0, 0, .6);
+    border-radius: unit(10, rpx);
+    box-shadow: 0 0 10px rbga(0, 0, 0, 0.3);
+    color: #fff;
+    font-size: unit(22, rpx);
+
+    &-icon{
+      padding: 0 unit(20, rpx);
+    }
+
+    &.editx {
+      box-sizing: border-box;
+
+    }
+  }
+}
+//end
+
+
+/**notPreview**/
+.jfb-base-video {
+  &:before {
+    content: " ";
+    display: table;
+  }
+}
+/**endNotPreview**/

package/src/components/JfbBaseVideo/JfbBaseVideoMixin.js

@@ -0,0 +1,30 @@
+'use strict';
+
+
+//@AttrImport
+import Attr from "./Attr";
+//@EndAttrImport
+
+
+export default {
+  data() {
+    return {
+      //#ifdef H5
+      
+      //@AttrData
+      Attr:{}, //对外开发编辑属性
+      //@EndAttrData
+      
+      // #endif
+      cssRoot: 'jfb-base-video'
+    }
+  },
+  created() {
+    
+    //@AttrDataCreated
+    this.Attr = this.$xdUniHelper.customClone(Attr);
+    //@EndAttrDataCreated
+    
+
+  },
+}

package/src/components/JfbBaseVideo/Mock.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = {
+  aaaa: {}
+}