gxd-uni-library-editx 1.0.0

package/src/components/XdTitleTab/XdTitleTab.vue

@@ -0,0 +1,227 @@
+<template>
+  <view class="xd-tab-title" :style="'background:' + background">
+    <view class="xd-tab-title__line" :style="getLineStyle"></view>
+    <view class="xd-tab-title__body" :style="getStyle">
+      <scroll-view
+        class="tab-scroll"
+        scroll-x
+        :scroll-into-view="toView"
+      >
+        <view class="tab-scroll__box">
+          <view
+            :id="`tab-scroll__index-${index}`"
+            v-for="(item, index) in tabList"
+            :key="index"
+            :style="{
+              color: activeIndex === index? activeColor: color,
+              marginRight: itemPaddingRight + 'rpx'
+            }"
+            class="tab-scroll__item"
+            :class="{active:activeIndex === index}"
+            @click="clickTab(item, index)"
+          >
+            <text>{{item.name}}</text>
+            <view v-if="activeIndex === index && tabList.length > 1" class="xd-tab-title__body-line" :style="{borderColor:$mainColor }"></view>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+    <view class="xd-tab-title__more" v-if="isMore">
+      <xd-button btn-type="primary" size="small" @click="handleMoreClick">更多></xd-button>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdButton from "@/components/XdButton/XdButton";
+
+  /**
+   * XdTabTitle 全局Ui
+   * @description 标题样式ui
+   * @tutorial
+   * @property {number|string} intoView   显示当前第几个
+   * @property {Boolean} isLeftLine       是否显示标题左侧竖线 （选填）
+   * @property {Number} margin            tab标签两端边距 （选填）
+   * @property {Number} itemPaddingRight  标签边边距 （选填）
+   * @property {String} activeColor       标签当前选中颜色值 （选填）默认：#333
+   * @property {String} color             标签文本颜色值 （选填）默认：#999
+   * @property {Boolean} isMore           右侧是否显示更多按钮   （选填）
+   * @property {Array} list               标签列表 （必填）
+   *   list[n]['id'] 标签ID，唯一值（必要字段）
+   *   list[n]['id'] 标签名称（必要字段）
+   *
+   * @property {String} background        背景样式值 默认：#fff
+   *
+   * @event {Function} onTab              点击标签事件
+   * @event {Function} onMore             点击更多事件
+   */
+
+  export default {
+    name: "XdTabTitle",
+    components: {XdButton},
+    props: {
+      value: Number|String,
+      intoView: {
+        type: Number | String,
+        default: 0,
+      },
+      isLeftLine:{
+        type: Boolean,
+        default: true
+      },
+      margin: {
+        type: Number,
+        default: 0
+      },
+      itemPaddingRight: {
+        type: Number,
+        default: 56
+      },
+      activeColor: {
+        type: String,
+        default: '#333'
+      },
+      color: {
+        type: String,
+        default: '#999'
+      },
+      isMore: {
+        type: Boolean,
+        default: true
+      },
+      list:{
+        type: Array,
+        required: true
+      },
+      background: {
+        type: String,
+        default: '#fff'
+      }
+    },
+    data(){
+      return {
+        activeIndex:0,
+        toView: 'tab-scroll__index-0',
+        tabList: [],
+      }
+    },
+    watch:{
+      list(val){
+        this.setTitleValue(val)
+      },
+    },
+
+    created(){
+      this.setTitleValue(this.list);
+    },
+
+    mounted(){
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.activeIndex = this.intoView;
+          this.toView = `tab-scroll__index-${this.intoView}`;
+          this.$emit('onInit', this.list[this.activeIndex], this.activeIndex);
+        }, 10);
+      });
+    },
+
+    computed:{
+      getLineStyle(){
+        if(this.isLeftLine) {
+          return `background: ${this.$mainColor}; height:31rpx; width: 8rpx; border-radius: 4rpx; margin: 0 19rpx 0 13rpx;`
+        }else{
+          return `width: 0;`
+        }
+      },
+      getStyle(){
+        let line = (this.isLeftLine? 40 : 0) * this.$rpxNum ;
+        let more = 110 * this.$rpxNum;
+        let margin = this.margin * this.$rpxNum * 2;
+        if(!this.isMore) more = 0;
+
+        let leftMargin = this.margin * this.$rpxNum;
+        let rightMargin = this.margin * this.$rpxNum ;
+        return `width: calc(100vw - ${line + more + leftMargin + rightMargin}px); padding-left: ${leftMargin}px; padding-right: ${rightMargin}px;`;
+      },
+    },
+
+    methods:{
+      setTitleValue(val){
+        if (this.value) {
+          this.activeIndex = this.value;
+          this.scrollIntoViewId = `tab-scroll__index-${this.activeIndex}`;
+        }else{
+          this.scrollIntoViewId = `tab-scroll__index-${this.activeIndex}`;
+        }
+        if(val.length > 0) {
+          this.tabList = val;
+          this.$emit('onTab', this.list[this.activeIndex], this.activeIndex, false);
+        }
+      },
+      clickTab(item, index) {
+        this.activeIndex = index;
+        this.$emit('onTab', item, index, true);
+      },
+      handleMoreClick(){
+        this.$emit('onMore', this.activeIndex);
+      },
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-tab-title {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    height: unit(100,rpx);
+
+    &__body {
+      height: unit(80,rpx);
+
+      .tab-scroll {
+        width: 100%;
+        height: 100%;
+
+        &__box {
+          display: flex;
+          align-items: center;
+          flex-wrap: nowrap;
+          height: unit(80, rpx);
+          box-sizing: border-box;
+        }
+
+        &__item {
+          flex-shrink: 0;
+          color: #333;
+          font-size: unit(30, rpx);
+          position: relative;
+        }
+
+        &__item:last-child{
+          padding-right: 0!important;
+        }
+      }
+      @lineW: 40;
+      &-line {
+        position: absolute;
+        width: unit(@lineW,rpx);
+        bottom: unit(-8,rpx);
+        left: 50%;
+        margin-left: unit(-(@lineW/2),rpx);
+        height: 0;
+        border-bottom-style: solid;
+        border-bottom-width: unit(6,rpx);
+        border-radius: unit(4,rpx);
+      }
+    }
+
+    &__more {
+      width: unit(120,rpx);
+      margin-left: unit(10,rpx);
+      /deep/ .xd-button {
+        padding: 0 unit(20,rpx);
+      }
+    }
+  }
+</style>

package/src/components/XdUnit/XdUnit.vue

@@ -0,0 +1,206 @@
+<template>
+  <view
+    class="xd-unit"
+    :style="{height: fontSize *1.5 + 'rpx'}"
+    :class="{'xd-unit__show': !(uiIcon && isShowIcon)}"
+  >
+    <view
+      class="xd-unit__price"
+      :style="{
+        lineHeight: fontSize + 'rpx',
+        fontSize: fontSize + 'rpx',
+        fontWeight: fontWeight,
+        textDecoration: deleteLine ? 'line-through': 'none',
+        color: uiColor
+      }"
+    >{{uiPrice}}</view>
+    <template v-if="uiIcon && isShowIcon">
+      <xd-image :is-gray="isGray" :src="uiIcon" :size="iconSize || iocnSize"></xd-image>
+    </template>
+    <template v-else>
+      <template v-if="unit !== null">
+        <view
+          class="xd-unit__unit"
+          :style=" {
+            lineHeight: fontSize + 'rpx',
+            fontSize: unitFontSize > 0 ? (unitFontSize + 'rpx') :(fontSize - 8) + 'rpx',
+            color: uiColor
+          }"
+          v-if="unit">{{unit}}</view>
+        <view v-else>
+          <xd-coins :size="iconSize || iocnSize"></xd-coins>
+        </view>
+      </template>
+    </template>
+  </view>
+</template>
+
+<script>
+  /**
+   * @name XdUnit
+   * @description 单位显示插件(自定义unitIcon单位图片大小100*100)
+   * @tutorial
+   * @property {Number} fontSize                    支付金额文字大小 （选填） 默认：32rpx
+   * @property {Number|String}  price               支付金额 （必选）
+   * @property {String}  color                      支付金额文本颜色 （选填） 默认：主色调
+   * @property {String}  unit                       支付金额单位 （选填） 默认：空，选上元宝样式
+   * @property {Boolean} isGray                     支付icon标是否显示为灰色 (选填) 默认：false
+   * @property {Number}  iocnSize                   支付元宝样式大小  （选填） 默认：0.35  备注：unit单位为空时候生效(不推荐使用)
+   * @property {Number}  iconSize                   支付元宝样式大小  （选填） 默认：null 备注：unit单位为空时候生效
+   */
+  import XdCoins from "@/components/XdCoins/XdCoins";
+  import XdImage from "@/components/XdImage/XdImage";
+  import {
+    getParentsStyle,
+  } from '@/utils/xd.base';
+
+  export default {
+    name: "XdUnit",
+    components: {
+      XdCoins,
+      XdImage
+    },
+    props: {
+      fontSize: {
+        type: Number,
+        default: 32
+      },
+
+      isGray: {
+        type: Boolean,
+        default: false,
+      },
+
+      isShowIcon: {
+        type: Boolean,
+        default: true,
+      },
+      price: {
+        type: String | Number,
+        required: true,
+      },
+      color: {
+        type: String,
+        default: ''
+      },
+      unit: {
+        type: String | null,
+        default: null
+      },
+
+      iocnSize: {
+        type: Number,
+        default: 0.35
+      },
+      iconSize: {
+        type: Number | null,
+        default: null
+      },
+
+      deleteLine: {
+        type: Boolean,
+        default: false,
+      },
+
+      fontWeight: {
+        type: String | Number,
+        default: 'bold' //normal，bold， 100-700
+      },
+
+      unitFontSize: {
+        type: Number,
+        default: 0
+      },
+      
+      isOld: {
+        type: Boolean,
+        default: false,
+      }
+
+    },
+    data() {
+      return {
+        uiColor: '', //金额显示颜色
+        uiIcon: null, //金额显示icon
+        uiPrice: null, //金额
+      }
+    },
+    watch:{
+      price(value) {
+        this.initPrice()
+      },
+    },
+    async created() {
+      this.uiColor = this.$mainColor;
+      
+      //设置显示数字
+      this.initPrice();
+
+      //使用配置文件里面的单位颜色
+      if(this.webSetting['unitTextColor']) {
+        this.uiColor = this.webSetting['unitTextColor'];
+      }
+
+      //自定义单位自定义颜色
+      if(this.webSetting['unitTextColor']) {
+        this.uiColor = this.webSetting['unitTextColor'];
+      }
+
+      //配置中获取
+      let optionsIcon = null;
+      if (this.webSetting['unitIcon']) {
+        optionsIcon = this.webSetting['unitIcon'];
+      }
+
+      //brand中获取
+      let brandIncon = null;
+      if (getApp().globalData.$xd && getApp().globalData.$xd.brandInfo['unit_icon']) {
+        brandIncon = getApp().globalData.$xd.brandInfo['unit_icon'];
+      }
+
+      //项目配置中获取
+      let projectIcon;
+      if (getApp().globalData.$xd && getApp().globalData.$xd.project['unit_icon']) {
+        brandIncon = getApp().globalData.$xd.project['unit_icon'];
+      }
+      
+      //风格文件中获取主色
+      let styleColor = await getParentsStyle(this.$parent, '$mainColor');
+      if(styleColor) this.uiColor = styleColor;
+      
+      this.uiIcon = projectIcon || brandIncon || optionsIcon;
+      if (this.color) this.uiColor = this.color;
+
+      if(this.unit === null) {
+        this.uiIcon = projectIcon || brandIncon || optionsIcon;
+      }
+    },
+    methods: {
+      initPrice(){
+        //设置显示数字
+        if (this.isOld) this.uiPrice = this.price;
+        else this.uiPrice = this.$xdUniHelper.divisionFloatNumber(this.price, 100);
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-unit {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    align-content: center;
+
+    &__show {
+      align-items: center;
+      align-content: center;
+    }
+
+    &__price {
+      margin-right: unit(8, rpx);
+      font-weight: normal;
+    }
+
+  }
+</style>

package/src/components/XdUpload/XdUpload.vue

@@ -0,0 +1,197 @@
+<template>
+  <view
+    class="up-upload"
+    :style="{
+      backgroundColor:backgroundColor,
+      borderWidth: borderWidth,
+      borderColor: borderColor,
+      borderStyle: borderStyle,
+      borderRadius: borderRadius
+    }"
+  >
+    <view
+      class="up-upload__image"
+      :style="{
+        width:width + 'rpx',
+        height:height + 'rpx'
+      }"
+      @click="upload"
+    >
+      <view v-if="!url" class="up-upload__image-icon">
+        <slot>
+          <xd-font-icon :icon="icon" :size="size" :color="color"></xd-font-icon>
+        </slot>
+      </view>
+      <view
+        v-else
+        class="up-upload__image-url"
+        :style="{
+          width:width + 'rpx',
+          height:height + 'rpx'
+        }"
+      >
+        <image :style="{borderRadius: borderRadius}" :src="url" mode="aspectFit"></image>
+      </view>
+    </view>
+    <view class="up-upload__title" v-if="title">{{title}}</view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+
+  export default {
+    name: "XdUpload",
+    components: {
+      XdFontIcon
+    },
+    props: {
+      keyword: {
+        type: String,
+        required: false
+      },
+
+      defaultValue: {
+        type: String | null,
+        default: null
+      },
+
+      title: {
+        type: String,
+        default: ''
+      },
+
+      width: {
+        type: String | Number,
+        default: '200'
+      },
+      height: {
+        type: String | Number,
+        default: '200'
+      },
+      borderWidth: {
+        type: String | Number,
+        default: ''
+      },
+      borderColor: {
+        type: String,
+        default: ''
+      },
+      borderStyle: {
+        type: String,
+        default: ''
+      },
+      borderRadius: {
+        type: String | Number,
+        default: ''
+      },
+      backgroundColor: {
+        type: String,
+        default: '#e5e5e5'
+      },
+
+      icon: {
+        type: String,
+        default: 'iconlovefont iconlovetupian'
+      },
+      color: {
+        type: String,
+        default: '#fff'
+      },
+      size: {
+        type: String | Number,
+        default: '80'
+      }
+    },
+
+    data() {
+      return {
+        url: null, //上传图片地址
+        id: '',//图片ID
+        titleHeight: 50,
+      }
+    },
+
+    watch: {
+      defaultValue(value) {
+        if (value !== null) {
+          this.url = value['url'];
+          this.id = value['id'];
+        }
+      }
+    },
+
+    created() {
+      if (this.defaultValue !== null) {
+        this.url = this.defaultValue['url'];
+        this.id = this.defaultValue['id'];
+      }
+    },
+
+    methods: {
+      select(files) {
+        //if(files['tempFilePaths']) this.url = files['tempFilePaths'];
+        this.$emit('select', {
+          files,
+          keyword: this.keyword,
+          /**
+           * @description
+           * @param image 图片地址
+           * @param id
+           */
+          resolve: ({image, id}) => {
+            this.url = image
+            this.id = id;
+          }
+        })
+      },
+      upload() {
+        uni.chooseImage({
+          count: 1,
+          success: (files) => {
+            console.log('chooseImage', files);
+            this.select(files);
+          },
+          fail: (error) => {
+            throw new Error('选中图片失败')
+          },
+        })
+      }
+    }
+
+  }
+</script>
+
+<style scoped lang="less">
+  .up-upload {
+    border-radius: unit(10, rpx);
+    padding: unit(10, rpx);
+
+    &__image {
+
+      &-icon {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      &-url {
+        width: 100%;
+
+        & > image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    &__title {
+      text-align: center;
+      padding-top: unit(10, rpx);
+      line-height: unit(40, rpx);
+    }
+  }
+</style>