gxd-uni-library-editx 1.0.0

package/src/components/XdFormSelect/XdFormSelect.vue

@@ -0,0 +1,119 @@
+<template>
+  <xd-select
+    v-model="select"
+    :placeholder="placeholder"
+    :justify-content="justifyContent"
+    :width="width"
+    :textColor="textColor"
+    :justifyContent="justifyContent"
+    :font-size="fontSize"
+    :padding="padding"
+    :border-width="borderWidth"
+    :height="height"
+    :default-value="defaultValue"
+    :list="list"
+    :disabled="disabled"
+    :content-prefix="contentPrefix"
+    :mode="mode"
+    :radius="radius"
+    :border-color="borderColor"
+    @change="handleChange"
+  ></xd-select>
+</template>
+
+<script>
+  import XdSelect from "@/components/XdSelect/XdSelect";
+  export default {
+    name: "XdFormSelect",
+    components: {
+      XdSelect
+    },
+    props: {
+      textColor: {
+        type: String,
+        default: '#333'
+      },
+      width: {
+        type: String,
+        default: 'auto'
+      },
+      justifyContent: {
+        type: String,
+        default: 'space-between' //space-between flex-start flex-end center
+      },
+      fontSize: {
+        type: String | Number,
+        default: 28
+      },
+      padding: {
+        type: String,
+        default: '0 20rpx'
+      },
+      height: {
+        type: String | Number,
+        default: 72
+      },
+      defaultValue: {
+        type: String | Number | null | Array,
+        default: null
+      },
+      list: {
+        type: Array | null,
+        default: null
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      contentPrefix: {
+        type: String,
+        default: '-'
+      },
+      mode: {
+        type: String,
+        default: 'selector', //multiSelector selector
+      },
+      placeholder: {
+        type: String,
+        default: '--请选择--'
+      },
+      radius: {
+        type: String,
+        default: '10rpx'
+      },
+      borderWidth: {
+        type: String | Number,
+        default: 2
+      },
+      borderColor: {
+        type: String,
+        default: '#e5e5e5'
+      },
+
+    },
+    data(){
+      return {
+        select: '',
+        selectSource: null
+      }
+    },
+    methods: {
+      handleChange(select){
+        this.selectSource = select;
+        let item = select.item;
+        if(this.mode === 'selector') item = [select.item];
+        let value = this.$xdUniHelper.getListKeyForValue(item, 'value');
+
+        this.$emit('change', select);
+        this.$emit('input', value.length === 1 ? value[0]: JSON.stringify(value));
+        console.log('handleChange', select, this.$xdUniHelper.getListKeyForValue(item, 'value'));
+      },
+
+      getData(){
+        return this.this.selectSource;
+      }
+
+    }
+  }
+</script>
+

package/src/components/XdImage/XdImage.vue

@@ -0,0 +1,113 @@
+<template>
+  <view class="xd-image-icon" v-if="loaded" @click="handleClick" :style="getStyle">
+    <image
+      class="xd-image-icon__bg"
+      :class="{gray: isGray}"
+      :src="src"
+      mode="aspectFit"
+    ></image>
+  </view>
+</template>
+
+<script>
+
+  /**
+   * XdImageIcon 全局Ui
+   * @description 图片作为icon插件
+   * @tutorial
+   * @property {Number} size        元宝被放大倍数，值为0.1 - 2 之间， 默认值为0.5
+   * @property {String} src         图片地址(本地图片或者base64)
+   * @event {Function} click|tap    点击元宝事件
+   */
+
+  export default {
+    name: "XdImage",
+    props:{
+      /**
+       * @description 放大倍数 0.005 - 2 直接
+       * @type number
+       */
+      size: {
+        type: Number|String,
+        default: 0.5,
+      },
+
+      src: {
+        type: String,
+        required: true
+      },
+
+      isGray: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data(){
+      return {
+        height: 0,
+        width: 0,
+        loaded: false
+      }
+    },
+    computed:{
+      getStyle(){
+        let size = this.size;
+        if (this.$xdUniHelper.checkVarType(size) === 'string') {
+          try {
+            size = Number(size);
+          }catch (e) {
+            size = 1;
+          }
+        }
+        if (size < 0.005) size = 0.005;
+        if (size > 2) size = 2;
+        return `height:${this.height * size}rpx; width: ${this.width * size}rpx;`;
+      }
+    },
+    created(){
+      uni.getImageInfo({
+        src: this.src,
+        success: (image) => {
+          this.height = image.height;
+          this.width = image.width;
+          this.loaded = true;
+        },
+        fail: () => {
+          this.loaded = true;
+          console.error('图片地址无效')
+        }
+      });
+
+    },
+    methods:{
+      handleClick(e){
+        this.$emit('click',e);
+        this.$emit('tap', e);
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-image-icon {
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+  }
+  .xd-image-icon__bg {
+    width: 100%;
+    height: 100%;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: left top;
+  }
+
+  .gray {
+    -webkit-filter: grayscale(100%);
+    -moz-filter: grayscale(100%);
+    -ms-filter: grayscale(100%);
+    -o-filter: grayscale(100%);
+    filter: grayscale(100%);
+    filter: gray;
+  }
+</style>

package/src/components/XdItemCardUser/XdItemCardUser.vue

@@ -0,0 +1,232 @@
+<template>
+  <view class="xd-item" @click="handleToDetail">
+    <view class="xd-item__header">
+      <view class="xd-item__header-image">
+        <image @click="handleClickImage(uiItem.image)" :src="uiItem.image" mode="heightFix"></image>
+      </view>
+      <view class="xd-item__header-text">
+        <view>
+          <xd-red-name :is-vip="uiItem.is_vip">{{uiItem.name}}</xd-red-name>
+          <view><xd-tag :radius="tagRadius" type="primary" inverted size="small" >魅力值:{{uiItem.attractive}}</xd-tag></view>
+        </view>
+        <view>
+          <view v-for="(iconItem, iconIndex) in uiItem.icons" :key="iconIndex" @click.stop="handleToAuth(iconItem)">
+            <xd-font-icon
+              :size="iconItem.size"
+              :icon="iconItem.icon"
+              :color="iconItem.auth === 'Y' ? $mainColor: '#c3c3c3'"
+            ></xd-font-icon>
+          </view>
+        </view>
+        <view>
+          <view v-for="(item,index) in uiItem.otherTags" :key="index">
+            <xd-tag :radius="tagRadius" type="primary" inverted size="small" >{{item}}</xd-tag>
+          </view>
+        </view>
+
+      </view>
+    </view>
+    <view class="xd-item__desc">{{uiItem.desc}}</view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "./../XdFontIcon/XdFontIcon";
+  import XdTag from "./../XdTag/XdTag";
+  import XdRedName from "./../XdRedName/XdRedName";
+
+  export default {
+    name: "XdItemCardUser",
+    components:{
+      XdFontIcon,
+      XdTag,
+      XdRedName
+    },
+    props: {
+      item: {
+        type: Object | null,
+        default: null
+      },
+      imageWidth: {
+        type: Number | String,
+        default: 704
+      },
+      imageHeight: {
+        type: Number | String,
+        default: 346
+      },
+      tagRadius: {
+        type: String,
+        default: '25rpx'
+      }
+    },
+    data(){
+      return {
+        itemTestData: {
+          image: 'https://sandbox-image.jufubao.cn/20210719171512575.png',
+          desc: '保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。',
+          is_vip: false,
+          otherTags:['女','26岁','勿拿不起啊嘎嘎','国有控股企业'],
+          name: '高世勇',
+          icons: [
+            {icon: 'iconlovefont iconloveshimingrenzheng', auth: 'N' , size: 36 , path: '/user/upload/personal'}, //实名
+            {icon: 'iconlovefont iconlovegonghui1', auth: 'Y', size: 38, path: ''}, //工会
+            {icon: 'iconlovefont iconloveVIP2', auth: 'N', size: 32, path: '/user/my/vip'}, //vip
+            {icon: 'iconlovefont iconlovecheliang1', auth: 'N', size: 44, path: '/user/upload/car'}, //车辆
+            {icon: 'iconlovefont iconlovefangwu', auth: 'N', size: 44, path: '/user/upload/house'}, //房屋
+            {icon: 'iconlovefont iconloverenzheng1', auth: 'Y', size: 38, path: ''} //公安
+          ]
+        },
+        uiItem: null,
+      }
+    },
+    created() {
+      if(this.item === null) {
+        this.uiItem = this.$xdUniHelper.cloneDeep(this.itemTestData);
+      }
+
+      if(this.item !== null) {
+        this.uiItem = this.$xdUniHelper.cloneDeep(this.item);
+      }
+
+    },
+    methods:{
+
+      handleClickImage(image){
+        console.log('onClickImage', image);
+        this.$emit('onClickImage', image);
+      },
+
+      handleToDetail() {
+        console.log('handleToDetail', this.uiItem)
+        this.$emit('toDetail', this.uiItem);
+      },
+      handleToAuth(item) {
+        console.log('handleToAuth', item)
+        this.$emit('toAuth', item);
+      },
+    },
+
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-item  {
+    &__header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+
+      &-image {
+        width: unit(210,rpx);
+        height: unit(210,rpx);
+        position: relative;
+        flex-shrink: 0;
+        overflow: hidden;
+        border-radius: unit(10,rpx);
+        margin-right: unit(30,rpx);
+
+        & > image {
+          height: 100%;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+
+          transform: translate(-50%, -50%);
+        }
+      }
+
+      &-text {
+        flex: 1;
+
+        & > view:first-child {
+            display: flex;
+            align-items: center;
+          &>view{
+            margin: 0 unit(20,rpx);
+            font-size: @xd-font-size-base;
+          }
+        }
+
+        & > view:nth-child(2) {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          padding: unit(15,rpx) 0 unit(20, rpx);
+
+          & > view {
+            margin-right: unit(10,rpx);
+          }
+        }
+
+        & > view:last-child {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          flex-wrap: wrap;
+
+
+          & > view {
+            margin-right: unit(7,rpx);
+            margin-bottom: unit(10, rpx);
+          }
+        }
+      }
+    }
+
+    &__image {
+      overflow: hidden;
+      & > image {
+        width: 100%;
+      }
+    }
+
+    &__text {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      margin-top: unit(20,rpx);
+      /*padding: 0 unit(20,rpx);*/
+
+      & > view {
+        margin-right: unit(15,rpx);
+      }
+
+      & > view:first-child {
+        font-size: @xd-font-size-lg;
+        margin-right: unit(20,rpx);
+      }
+    }
+
+    &__tag {
+      margin-top: unit(20,rpx);
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      /*padding: 0 unit(20, rpx);*/
+
+      &-text {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        & > text {
+          margin-left: unit(5,rpx);
+        }
+      }
+
+      & > view {
+        margin-right: unit(10,rpx);
+      }
+    }
+
+    &__desc {
+      /*padding: 0 unit(20, rpx);*/
+      margin-top: unit(20,rpx);
+      color: #000;
+      font-size: @xd-font-size-base;
+      line-height: unit(36,rpx);
+      .uni-max-cut(2, 72);
+    }
+  }
+</style>

package/src/components/XdItemFilmImage/XdItemFilmImage.vue

@@ -0,0 +1,146 @@
+<template>
+  <view class="xd-item-image__box" @tap.stop="handleClick('box')" :style="{backgroundColor:bgc,borderRadius:radius}">
+    <view class="xd-item-image__img">
+      <image :src="src"></image>
+    </view>
+    <view class="xd-item-image__text">
+      <view class="xd-item-image__text-title">{{name}}</view>
+      <view v-if="star" class="xd-item-image__text-star">
+        <text>评分：</text>
+        <text class="xd-item-image__text-star-cont" :style="{color:$mainColor}">{{star}}</text>
+      </view>
+      <view class="xd-item-image__text-list">
+        <text>类型：</text>
+        <text>{{type}}</text>
+      </view>
+      <view class="xd-item-image__text-list">
+        <text>导演：</text>
+        <text>{{director}}</text>
+      </view>
+      <view class="xd-item-image__text-list">
+        <text>主演：</text>
+        <text>{{performer}}</text>
+      </view>
+      <view v-if="playTime" class="xd-item-image__text-list">
+        <text>上映时间：</text>
+        <text>{{playTime}}</text>
+      </view>
+    </view>
+    <view class="xd-item-image__btn-box">
+      <xd-button size="mini" @click="handleClick('btn')" :btn-type="btnType">
+        <slot name="btn"></slot>
+      </xd-button>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdButton from "@/components/XdButton/XdButton";
+
+  export default {
+    name: "XdItemFilmImage",
+    components: {XdButton},
+    props:{
+      bgc:{
+        type: String,
+        default: '#fff'
+      },
+
+      performer:String,
+      playTime:String,
+      star:String|Number,
+      director:String,
+      type:String,
+      name:String,
+      item: {
+        type: Object,
+        default(){
+          return {}
+        },
+      },
+      radius: {
+        type: String,
+        default: '10rpx'
+      },
+      btnType: {
+        type: String,
+        default: 'primary'
+      },
+      src: {
+        type: String,
+        default: ''
+      },
+    },
+    methods:{
+      handleClick(position){
+        this.$emit('click', this.item, position);
+      }
+    },
+
+  }
+</script>
+
+<style lang="less">
+  .xd-item-image__box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    align-content: center;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    padding: unit(30,rpx) unit(25, rpx);
+    width: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+
+    .xd-item-image__img {
+      width: unit(160, rpx);
+      height: unit(230,rpx);
+      margin-right: unit(26,rpx);
+      border-radius: unit(10, rpx);
+      overflow: hidden;
+
+      & *,& image {
+        width: 100%;
+        height: 100%;
+      }
+
+    }
+
+    .xd-item-image__text {
+      flex: 1;
+      color: @xd-text-color-grey;
+      font-size: @xd-font-size-base;
+
+      .xd-item-image__text-title {
+        font-size: @xd-font-size-lg;
+        font-weight: bold;
+        height: unit(60, rpx);
+        line-height: unit(60, rpx);
+        overflow: hidden;
+        color: @xd-text-color;
+        padding-bottom: unit(5, rpx);
+      }
+
+      .xd-item-image__text-star {
+        line-height: @xd-font-size-lg * 1.5;
+
+        .xd-item-image__text-star-cont {
+          color: @custom-btn-warning;
+          font-weight: bold;
+        }
+      }
+
+      .xd-item-image__text-list {
+        line-height: @xd-font-size-lg * 1.5;
+        height: @xd-font-size-lg * 1.5;
+        overflow: hidden;
+      }
+    }
+
+    .xd-item-image__btn-box {
+      margin-left: unit(50,rpx);
+      width: unit(130, rpx);
+    }
+  }
+</style>

package/src/components/XdItemFilmText/XdItemFilmText.vue

@@ -0,0 +1,83 @@
+<template>
+  <view
+    class="xd-film-itemtext"
+    @tap.stop="handleClick('box')"
+    :style="{backgroundColor:bgc,borderRadius:radius}"
+  >
+    <view class="xd-film-itemtext__warpper">
+      <view class="xd-film-itemtext__title">{{name}}</view>
+      <view class="xd-film-itemtext__type">
+        <view class="xd-film-itemtext__type-tag"><xd-tag :type="type ? 'primary': 'error'" size="small">{{typeName}}</xd-tag></view>
+        <view class="xd-film-itemtext__type-distance" :style="'color:' + $mainColor ">{{distance}}</view>
+      </view>
+      <view class="xd-film-itemtext__address">{{address}}</view>
+    </view>
+  </view>
+</template>
+
+<script>
+
+  import XdTag from '@/components/XdTag/XdTag';
+  export default {
+    name: "XdItemFilmText",
+    components: {XdTag},
+    props:{
+      name: String,
+      type: Boolean,
+      typeName: String,
+      distance: String,
+      address: String,
+      bgc: {
+        type: String,
+        default: '#fff'
+      },
+      radius: {
+        type: String,
+        default: '10rpx'
+      },
+    },
+    methods: {
+      handleClick(position) {
+        this.$emit('click', this.item, position);
+      }
+    },
+  }
+</script>
+
+<style scoped lang="less">
+  @name: xd-film-itemtext;
+
+  .@{name} {
+    box-sizing: border-box;
+    overflow: hidden;
+    padding: unit(20, rpx);
+
+    &__warpper {
+      width: 100%;
+    }
+
+    &__title {
+      font-size: @xd-font-size-lg;
+    }
+
+    &__address {
+      font-size: @xd-font-size-base;
+      color: #999;
+    }
+
+    &__type {
+      padding: unit(15,rpx) 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      align-content: center;
+
+      &-distance {
+        font-size: @xd-font-size-sm
+      }
+    }
+
+
+  }
+
+</style>