gxd-uni-library-editx 1.0.0

package/src/components/XdTimeLine/XdTimeLine.vue

@@ -0,0 +1,121 @@
+<template>
+  <view class="xd-time-line">
+    <view class="xd-time-line__title">
+      <view v-if="icon">
+        <xd-font-icon :icon="icon" :size="iconSize"></xd-font-icon>
+      </view>
+      <view :style="{fontSize: size + 'rpx'}">{{title}}</view>
+    </view>
+    <view class="xd-time-line__body">
+      <view class="xd-time-line__body-time">
+        <view
+          class="xd-time-line__body-time-icon"
+          :style="{
+            background: uiDotColor,
+          }"
+        ></view>
+        <view
+          class="xd-time-line__body-time-line"
+          :style="{background: lineColor}"
+        ></view>
+      </view>
+      <view class="xd-time-line__body-solt">
+        <slot>
+        </slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "./../XdFontIcon/XdFontIcon";
+  export default {
+    name: "XdTimeLine",
+    components: {XdFontIcon},
+    props: {
+      title: {
+        type: String,
+        default: '个人信息',
+      },
+      icon: {
+        type:String,
+        default: '',
+      },
+      iconSize: {
+        type: String|Number,
+        default: 40,
+      },
+      size: {
+        type: String | Number,
+        default: 32,
+      },
+      dotColor: {
+        type: String,
+        default: '',
+      },
+      lineColor: {
+        type: String,
+        default: '#666',
+      }
+    },
+    data(){
+      return {
+        uiDotColor: '',
+      }
+    },
+    created() {
+      this.uiDotColor = this.$mainColor;
+      if(this.dotColor) this.uiDotColor = this.dotColor;
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-time-line {
+    &__title {
+      padding-bottom: unit(20, rpx);
+      line-height: unit(40,rpx);
+    }
+
+    &__body {
+      display: flex;
+      justify-content: space-between;
+      align-items: stretch;
+      flex-direction: row;
+      flex-wrap: wrap;
+
+      &-time {
+        width: unit(40,rpx);
+        flex-shrink: 0;
+        margin-left: unit(10,rpx);
+        position: relative;
+
+        &-icon {
+          position: absolute;
+          width: unit(19,rpx);
+          height: unit(19,rpx);
+          border-radius: unit(10,rpx);
+          left: 0;
+          top:0;
+          z-index: 2;
+        }
+
+        &-line {
+          position: absolute;
+          border-radius: unit(10, rpx);
+          left: unit(8,rpx);
+          top: unit(18,rpx);
+          width: unit(4,rpx);
+          bottom: 0;
+          z-index: 1;
+        }
+      }
+
+      &-solt {
+        flex: 1;
+        width: 0;
+      }
+    }
+  }
+
+</style>

package/src/components/XdTips/XdTips.vue

@@ -0,0 +1,212 @@
+<template>
+  <view class="xd-tips" @touchmove.stop.prevent :style="{zIndex:tips.zIndex}" v-if="show">
+    <view class="xd-tips__mask"></view>
+    <view
+      class="xd-tips__body"
+      :style="{
+        borderRadius: tips.radius,
+        background: tips.background,
+        color: tips.contentColor,
+        width: tips.width
+      }"
+    >
+      <view class="xd-tips__body-close" @click="close" v-if="tips.isClose">
+        <xd-font-icon icon="iconguanbi" width="30" height="30" size="25" :color="tips.contentColor"></xd-font-icon>
+      </view>
+      <view class="xd-tips__body-icon" v-if="tips.iconShow">
+        <xd-font-icon :icon="tips.icon" :size="tips.iconSize" :color="tips.iconColor"></xd-font-icon>
+      </view>
+      <view class="xd-tips__body-content" v-if="tips.isHtml">
+        <xd-content-xss :html="tips.content"></xd-content-xss>
+      </view>
+      <view v-else class="xd-tips__body-content">
+        {{tips.content}}
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import {mapState,  mapMutations} from 'vuex';
+import XdContentXss from "@/components/XdContentXss/XdContentXss";
+
+export default {
+  name: "XdTips",
+  components: {
+    XdContentXss,
+    XdFontIcon
+  },
+  computed: {
+    ...mapState([
+      'xdTips'
+    ])
+  },
+  data(){
+    return {
+      show: false,
+
+      /**
+       * @description 提示框
+       * @type {Object}
+       * @property tips.zIndex {number} 样式层级关系 默认：1000
+       * @property tips.content {string|Element} html 只支持原生元素（请不要使用小程序相关元素组件，有兼容问题）,例如：<div style="color: green">html test</div>
+       * @property tips.contentColor {string} 文本颜色  默认：#eee
+       * @property tips.background {string} 提示框背景  默认：#333
+       * @property tips.isHtml {boolean} 是否支持html 默认：false
+       * @property tips.radius {string} 边框圆角  默认：确认10rpx
+       * @property tips.width {string} 宽度  默认：确认：50%
+       * @property tips.time {number} 关闭时间 默认: 1500ms
+       * @property tips.icon {string} icon标 支持iconfont 标准 默认：iconinfo
+       * @property tips.iconSize {string} icon大小 标准 默认：55
+       * @property tips.iconColor {string} icon标样式 标准 默认：#eee
+       * @property tips.iconShow {boolean} 是否显示icon 默认：true
+       * @property tips.close {function} 按钮回调事件
+       */
+      tips: {},
+
+      defaultTips: {
+        width: '300rpx',
+        isClose: true,
+        zIndex: 1700,
+        content: '',
+        contentColor: '#eee',
+        background: '#333',
+        isHtml: false,
+        time: 1500,
+        icon: 'iconduigou-xian',
+        iconSize: '80',
+        iconColor: '#eee',
+        iconShow: true,
+        radius: '30rpx',
+        close: null,
+        type: 'success'
+      }
+    }
+  },
+  watch:{
+    xdTips(value){
+      this.init(value);
+    }
+  },
+  created(){
+    this.init(this.xdTips);
+  },
+  methods: {
+    ...mapMutations(['setTips']),
+
+    init(value){
+      //只有当前访问页面触发逻辑
+      if(this.$root.$isShow === false) {
+        return;
+      }
+      if(value === null) {
+        this.show = false;
+        this.tips = {};
+      }
+      else{
+        this.show = true;
+
+        let tips = Object.assign({},
+          this.$xdUniHelper.cloneDeep(this.defaultTips),
+          value
+        );
+
+        if (tips.type === 'error') {
+          tips['icon'] = 'icondanchuangguanbi_xian';
+          tips['iconSize'] = '60';
+        }
+
+        this.tips = tips;
+
+        /**
+         * @description 自动关闭
+         */
+        if (this.tips.time > 0) {
+          setTimeout(() => {
+            this.close();
+          }, this.tips.time < this.defaultTips.time ?
+            this.defaultTips.time :
+            this.tips.time)
+        }
+
+      }
+    },
+
+    handleConfirm(status){
+      if(typeof this.confirm.success === 'function') {
+        let params = {};
+        params[status] = true;
+        this.confirm.success(params);
+        this.close();
+      }else {
+        this.close();
+      }
+    },
+
+    close(){
+      if(typeof this.tips.close === 'function') {
+        this.tips.close();
+      }
+      this.setTips(null);
+    },
+  }
+}
+</script>
+
+<style scoped lang="less">
+.xd-tips {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  &__mask {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0,0,0,.3);
+  }
+
+  &__body {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: unit(300, rpx);
+    box-shadow: 0 0 unit(20,rpx) rgba(0,0,0,0.3);
+    box-sizing: border-box;
+    padding: unit(60,rpx) unit(30, rpx);
+
+    &-close {
+      position: absolute;
+      top: unit(10,rpx);
+      right: unit(10,rpx);
+      width: unit(40,rpx);
+      height: unit(40,rpx);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    &-icon {
+      padding-bottom: unit(30, rpx) ;
+      width: 100%;
+      height: unit(80, rpx);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+
+    &-content {
+      text-align: center;
+      font-size: unit(40, rpx)
+    }
+
+  }
+}
+</style>

package/src/components/XdTipsBlock/XdTipsBlock.vue

@@ -0,0 +1,141 @@
+<template>
+  <view
+    class="xd-tips-block"
+    :style="{
+      margin: margin,
+    }"
+  >
+    <view
+      class="xd-tips-block__title"
+      :style="{
+        color:titleColor,
+        padding: padding,
+      }">
+      <view>
+        <xd-font-icon
+          v-if="icon"
+          :icon="icon"
+          :size="iconFont"
+          :color="$mainColor"
+        ></xd-font-icon>
+      </view>
+      <view :style="{fontSize: titleFont}">{{title}}</view>
+    </view>
+    <view
+      class="xd-tips-block__body"
+      :style="{
+        padding: padding,
+        background:background,
+        borderRadius: borderRadius,
+        color:descColor,
+        fontSize: descFont
+      }"
+      >
+      <slot>{{desc}}</slot>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon"
+
+  /**
+   * XdTipsBlock 温馨提示模块
+   * @description 温馨提示模块
+   * @tutorial
+   * @property margin {String} margin的原始值  默认：0 34px
+   * @property padding {String} padding的原始值 默认：0 20rpx
+   * @property background {String} background的原始值  默认： #fff
+   * @property borderRadius {String} 是否圆角 默认值：15rpx
+   * @property title {String} 标题 默认值：温馨提示
+   * @property titleColor {String} 标题颜色 默认值：''
+   * @property titleFont {String} 标题文字大小 默认值：'28rpx'
+   * @property icon {String} 标题前是否显示icon 默认值：iconinfo
+   * @property desc {String} 提示文案 默认值：''
+   * @property descColor {String} 正文颜色 默认值：''
+   * @property descFont {String} 正文文字大小 默认值：'26rpx'
+   */
+
+  export default {
+    name: "XdTipsBlock",
+    components:{
+      XdFontIcon
+    },
+    props: {
+      margin: {
+        type: String,
+        default: '0 34rpx'
+      },
+      padding: {
+        type: String,
+        default: '20rpx'
+      },
+      background: {
+        type: String,
+        default: '#fff'
+      },
+      borderRadius: {
+        type: String,
+        default: '15rpx'
+      },
+
+      title: {
+        type: String,
+        default: '温馨提示'
+      },
+      titleColor: {
+        type: String,
+        default: '#666'
+      },
+      titleFont: {
+        type: String,
+        default: '28rpx'
+      },
+
+      icon: {
+        type: String,
+        default: 'iconinfo'
+      },
+
+      iconFont: {
+        type: Number,
+        default: 36
+      },
+
+      desc: {
+        type: String,
+        default: ''
+      },
+      descColor: {
+        type: String,
+        default: '#999'
+      },
+      descFont: {
+        type: String,
+        default: '26rpx'
+      },
+
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-tips-block {
+    font-size: @xd-font-size-base;
+    &__body {
+
+    }
+    &__title {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      font-weight: bold;
+      padding-bottom: unit(20,rpx);
+
+      /deep/ .xd-iconfont {
+        margin-right: unit(10,rpx);
+      }
+    }
+
+  }
+</style>

package/src/components/XdTitleSection/XdTitleSection.vue

@@ -0,0 +1,152 @@
+<template>
+	<view
+    class="uni-section"
+    :style="{
+      background: bg,
+      height: height + 'rpx'
+    }
+    ">
+		<view v-if="type" class="uni-section__head">
+      <view :class="type" class="uni-section__head-tag" :style="{backgroundColor:$mainColor}"></view>
+		</view>
+		<view class="uni-section__content">
+			<text :class="{'distraction':!subTitle}" class="uni-section__content-title">{{ title }}</text>
+			<text v-if="subTitle" class="uni-section__content-sub">{{ subTitle }}</text>
+		</view>
+		<slot />
+	</view>
+</template>
+
+<script>
+
+	/**
+	 * Section 标题栏
+	 * @description 标题栏
+	 * @property {String} type = [line|circle] 标题装饰类型
+	 * 	@value line 竖线
+	 * 	@value circle 圆形
+	 * @property {String} title 主标题
+	 * @property {String} subTitle 副标题
+	 */
+
+	export default {
+		name: 'XdTitleSection',
+		props: {
+			type: {
+				type: String,
+				default: 'line'
+			},
+			title: {
+				type: String,
+				default: ''
+			},
+			subTitle: {
+				type: String,
+				default: ''
+			},
+      bg:{
+        type: String,
+        default: '#f8f8f8'
+      },
+
+      height: {
+        type: Number,
+        default: 80 //rpx
+      }
+		},
+		data() {
+			return {}
+		},
+		watch: {
+			title(newVal) {
+				if (uni.report && newVal !== '') {
+					uni.report('title', newVal)
+				}
+			}
+		},
+		methods: {
+			onClick() {
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+<style lang="less" scoped>
+	.uni-section {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		margin-top: unit(20, rpx);
+		flex-direction: row;
+		align-items: center;
+		padding: 0 unit(20, rpx);
+		height: unit(80,rpx);
+		background-color: @xd-bg-color-grey;
+		/* #ifdef APP-NVUE */
+		border-bottom-color: @xd-border-color;
+		border-bottom-style: solid;
+		border-bottom-width: 0.5px;
+		/* #endif */
+		font-weight: normal;
+	}
+	/* #ifndef APP-NVUE */
+	.uni-section:after {
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		left: 0;
+		height: 1px;
+		content: '';
+		-webkit-transform: scaleY(.5);
+		transform: scaleY(.5);
+		background-color: @xd-border-color;
+	}
+	/* #endif */
+
+	.uni-section__head {
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		margin-right: 10px;
+	}
+
+	.line {
+		height: 15px;
+		background-color: @xd-text-color-disable;
+		border-radius: 5px;
+		width: 3px;
+	}
+
+	.circle {
+		width: 8px;
+		height: 8px;
+		border-top-right-radius: 50px;
+		border-top-left-radius: 50px;
+		border-bottom-left-radius: 50px;
+		border-bottom-right-radius: 50px;
+		background-color: @xd-text-color-disable;
+	}
+
+	.uni-section__content {
+		flex-direction: column;
+		flex: 1;
+		color: @xd-text-color;
+	}
+
+	.uni-section__content-title {
+		font-size: @xd-font-size-base+2;
+		color: @xd-text-color;
+	}
+
+	.distraction {
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.uni-section__content-sub {
+		font-size: @xd-font-size-sm;
+		color: @xd-text-color + 100;
+    margin-left: unit(10,rpx);
+	}
+</style>