jufubao-base 1.0.290-beta3 → 1.0.291-beta4

package/src/components/CusSwiperDot/CusSwiperDot.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: 10rpx!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>

package/src/components/CusTab/CusTab.vue

@@ -0,0 +1,411 @@
+<template>
+	<view
+		class="xd-tab"
+		:class="{noBorder: noBorder}"
+		:style="{background:bgColor}"
+	>
+		<scroll-view
+      class="tab-scroll"
+      scroll-x
+      :scroll-with-animation="scrollWithAnimation"
+      :scroll-into-view="toView"
+      :style="{
+        width: 'calc(100% - '+ getSettingWidth + 'px)',
+        height: height + 'rpx'
+      }"
+
+    >
+			<view class="tab-scroll__box">
+				<view
+          :id="`tab-scroll__index-${index}`"
+          v-for="(item, index) in list"
+          :key="index"
+          :style="{color: activeIndex === index? (actColor||styleMainColor): color, height: height + 'rpx'}"
+          class="tab-scroll__item"
+          :class="{active:activeIndex === index}"
+				  @click="clickTab(item, index)"
+        >
+          <view
+						:style="[{
+							fontWeight: activeIndex === index? actFontWeight: fontWeight,
+							fontSize: (activeIndex === index ? actFontSize : fontSize) + 'rpx',
+							height:(xAbsolute === 'none' && item.subName)?(height/2 + 'rpx'):(height + 'rpx'),
+							lineHeight:(xAbsolute === 'none' && item.subName)?(height/2 + 'rpx'):(height + 'rpx')
+						}]">{{item.name}}</view>
+          <view
+            class="xAbsolute"
+						v-if="xAbsolute === 'absolute'"
+						:style="[
+              footerStyleComp,
+						  {backgroundColor: activeIndex === index? (actColor||styleMainColor): ''},
+						 ]"
+          >
+            <view
+              v-if="activeIndex === index && styleSolid === 'N'"
+              :style="[footerStyleSolidComp]"
+              class="styleSolid"
+            ></view>
+          </view>
+          <view
+            v-if="xAbsolute === 'none' && item.subName"
+            class="none"
+            :style="[activeIndex === index?subActNameComp:subNameComp]"
+          >{{item.subName}}</view>
+        </view>
+			</view>
+		</scroll-view>
+		<view
+      class="tab-icons"
+      @click="handleClickSetting"
+      :style="{width: settingWidth + 'rpx'}"
+      v-if="showSetting"
+    >
+      <xd-font-icon
+        icon="iconshezhi1"
+        color="#666"
+        size="40"
+        width="50"
+        height="50"
+      ></xd-font-icon>
+		</view>
+	</view>
+</template>
+
+<script>
+
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import {
+    getParentsStyle, //获取页面风格单个键值值
+  } from '@/utils/xd.base';
+
+	export default {
+    name: 'CusTab',
+    components: {
+      XdFontIcon
+    },
+    props: {
+      subNameStyle:{
+        type: Object,
+        default(){
+          return {}
+        },
+      },
+      settingWidth: {
+        type: Number,
+        default: 70
+      },
+      showSetting: {
+        type: Boolean,
+        default: false,
+      },
+      list: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      tabIndex: {
+        type: Number,
+        default: 0
+      },
+      footerStyle:{
+        type: String,
+        default: 'line-4-8-s'
+      },
+      showFooterLine: {
+        type: Boolean,
+        default: false
+      },
+      scrollWithAnimation:{
+        type: Boolean,
+        default: true
+			},
+      noBorder: {
+        type: Boolean,
+        default: true
+			},
+      color: {
+        type: String,
+        default: '#333'
+      },
+      bgColor: {
+        type: String,
+        default: '#fff'
+			},
+      fontSize: {
+        type: Number | String, //rpx
+        default: 30
+      },
+      actFontSize:{
+        type: Number | String, //rpx
+        default: 38
+      },
+      fontWeight: {
+        type: Number | String, //rpx
+        default: 100
+      },
+      actFontWeight: {
+        type: Number | String, //rpx
+        default: 500
+      },
+      height: {
+        type: Number | String, //rpx
+        default: 90
+      },
+			lineBottom: {
+        type: Number | String, //rpx
+        default: 10
+			},
+      actColor: {
+        type: String,
+        default: ''
+      }
+    },
+    data() {
+      return {
+        activeIndex: 0,
+        toView: null,
+        styleMainColor: '', //插件主题风格样式
+        styleType: 'line',
+        styleHeight: 0,
+        styleWidth: 0,
+        styleRadius:'0',
+        styleLong: '0',//长短
+
+        xAbsolute: 'absolute',//绝对定位｜无
+        styleSolid: 'Y',
+      };
+    },
+
+    computed: {
+      getSettingWidth() {
+        if (this.showSetting) {
+          return 100 * this.$rpxNum;
+        }
+        return 0;
+      },
+      footerStyleComp(){
+        //circle/line/none/trigon/desc
+        let temp = {};
+        temp['bottom'] = this.lineBottom + 'rpx';
+        if(this.styleType === 'line') {
+          temp['height'] = this.styleHeight + 'rpx';
+          temp['left'] = this.styleLong;
+          temp['right'] = this.styleLong;
+          temp['borderRadius'] = this.styleRadius;
+        }
+        if(this.styleType === 'circle'){
+          temp['height'] = this.styleHeight + 'rpx';
+          temp['width'] = this.styleHeight + 'rpx';
+          temp['left'] = '50%';
+          temp['marginLeft'] = -this.styleHeight/2 + 'rpx'
+          temp['borderRadius'] = this.styleRadius;
+        }
+
+        return temp
+      },
+      footerStyleSolidComp(){
+        let temp = {};
+        temp['height'] = (this.styleHeight - 4) + 'rpx';
+        temp['width'] = (this.styleHeight - 4) + 'rpx';
+        temp['backgroundColor'] = '#fff';
+        if(this.styleType === 'circle'){
+          temp['borderRadius'] = '50%';
+
+        }
+        return temp
+      },
+      subNameComp(){
+        let temp = {
+          fontSize: '22rpx',
+          color:'#333',
+        };
+        if(this.subNameStyle['bgColor']) temp['backgroundColor'] = this.subNameStyle['bgColor'];
+        if(this.subNameStyle['color']) temp['color'] = this.subNameStyle['color'];
+        if(this.subNameStyle['fontSize']) temp['fontSize'] = this.subNameStyle['fontSize'];
+        if(this.subNameStyle['fontWeight']) temp['fontWeight'] = this.subNameStyle['fontWeight'];
+        return temp
+      },
+      subActNameComp(){
+        let temp = {
+          backgroundColor: this.actColor,
+          fontSize: '22rpx',
+          color:'#fff',
+        };
+        if(this.subNameStyle['actBgColor']) temp['backgroundColor'] = this.subNameStyle['actBgColor'];
+        if(this.subNameStyle['actColor']) temp['color'] = this.subNameStyle['actColor'];
+        if(this.subNameStyle['actFontSize']) temp['fontSize'] = this.subNameStyle['actFontSize'];
+        if(this.subNameStyle['actFontWeight']) temp['fontWeight'] = this.subNameStyle['actFontWeight'];
+        return temp
+      }
+    },
+    watch: {
+      tabIndex(newVal, oldVal) {
+        if(newVal !== oldVal) {
+          this.activeIndex = newVal;
+          this.toView = `tab-scroll__index-${newVal}`;
+        }
+      },
+      footerStyle(){
+        this.initStyle();
+      },
+    },
+    async created() {
+      this.initStyle();
+      this.styleMainColor = await getParentsStyle(this.$parent, '$mainColor');
+		},
+
+    mounted(){
+	    this.$nextTick(()=>{
+        this.toView = 'tab-scroll__index-0'
+        if(this.scrollWithAnimation) {
+          setTimeout(() => {
+            this.activeIndex = this.tabIndex;
+            this.toView = `tab-scroll__index-${this.tabIndex}`;
+            this.$emit('onInit', this.list[this.activeIndex], this.activeIndex);
+          }, 50);
+				}
+        else{
+          this.activeIndex = this.tabIndex;
+          this.toView = `tab-scroll__index-${this.tabIndex}`;
+          this.$emit('onInit', this.list[this.activeIndex], this.activeIndex);
+				}
+      });
+    },
+
+		methods: {
+      initStyle(){
+        let arr = this.footerStyle.split('-');
+        this.styleType = arr[0];
+        this.xAbsolute = 'absolute';
+        if(this.styleType === 'desc') {
+          this.xAbsolute = 'none';
+        }
+
+        //圆与三角
+        if(arr.length === 3) {
+          this.styleHeight = this.styleWidth =  Number(arr[1])
+          this.styleSolid = arr[2] === 'k'?'N':'Y'
+          if(this.styleType === 'circle') {
+            this.styleRadius = '50%'
+          }
+        }
+
+        //线
+        if(arr.length === 4) {
+          this.styleHeight = arr[2];
+          this.styleRadius = arr[1] + 'rpx';
+          if(arr[3] === 'l') this.styleLong = '20rpx'
+          else this.styleLong = '35%'
+        }
+
+      },
+
+			clickTab(item, index) {
+				this.activeIndex = index;
+        this.toView = `tab-scroll__index-${this.activeIndex}`;
+				this.$emit('onTab', item, index);
+			},
+      handleClickSetting(){
+			  this.$emit('onSetting');
+      },
+		}
+	}
+</script>
+
+<style lang="less">
+	.xd-tab {
+		display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    overflow: hidden;
+    padding: 0;
+    height: unit(100, rpx);
+		&.noBorder {
+			border-bottom: 1px #f5f5f5 solid;
+		}
+
+		.tab-scroll {
+			.tab-scroll__box {
+				display: flex;
+				align-items: center;
+				flex-wrap: nowrap;
+				box-sizing: border-box;
+
+				.tab-scroll__item {
+					flex-shrink: 0;
+					padding: 0 unit(20, rpx);
+					color: #333;
+					font-size: unit(30, rpx);
+					height: unit(100, rpx);
+          position: relative;
+					display: flex;
+					align-items: center;
+					align-content: center;
+          flex-flow: column;
+
+
+					&.active {
+						color: @xd-base-color;
+					}
+
+
+          & > view.xAbsolute {
+            position: absolute;
+            bottom: unit(10,rpx);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+
+          & > view.none {
+            padding: 0 10rpx;
+            color:#000;
+            border-radius:20rpx;
+            font-size: 20rpx;
+            line-height: 1.2rem;
+            margin-top: 4rpx;
+          }
+				}
+			}
+		}
+
+		.tab-icons {
+			position: relative;
+			justify-content: flex-end;
+      display: flex;
+			align-items: center;
+      height: unit(100, rpx);
+
+      /deep/ span {
+        font-size: unit(40, rpx) !important;
+      }
+
+      .tab-icons-box {
+        width: unit(60, rpx);
+        height: unit(60, rpx);
+        line-height: unit(60, rpx);
+        text-align: center;
+        vertical-align: middle;
+        display: block;
+      }
+
+			&::after {
+				content: '';
+				position: absolute;
+				top: unit(30, rpx);
+				bottom: unit(30, rpx);
+				left: 0;
+				width: 1px;
+				background-color: #ddd;
+			}
+		}
+    .styleSolid {
+      flex-shrink: 0;
+    }
+	}
+
+
+</style>