gxd-uni-library-editx 1.0.0

package/src/components/XdItemStore/XdItemStore.vue

@@ -0,0 +1,236 @@
+<template>
+  <view class="xd-store-item" @click="handleClick">
+    <view class="xd-store-item__flag" :style="'background: ' + uiColor">{{flagName}}</view>
+    <view class="xd-store-item__logo">
+      <image v-if="image" mode="aspectFit" :src="image"></image>
+      <view v-else>
+        <xd-font-icon color="#aaa" size="80" icon="iconiconset0149"></xd-font-icon>
+      </view>
+    </view>
+    <view class="xd-store-item__body">
+      <view
+        class="xd-store-item__body-title"
+        :style="{
+          borderBottom: '4rpx solid ' + uiColor
+        }"
+      >{{getName(name)}}</view>
+      <view
+        class="xd-store-item__body-other"
+        v-if="address"
+        :style="{
+          borderBottom: '1rpx dotted ' + uiColor
+        }"
+      >地址: {{address}}</view>
+      <view
+        class="xd-store-item__body-other"
+        v-if="time"
+        :style="{
+          borderBottom: '1rpx dotted ' + uiColor
+        }"
+      >营业时间: {{time}}</view>
+      <view
+        class="xd-store-item__body-other"
+        v-if="tel"
+        :style="{
+          borderBottom: '1rpx dotted ' + uiColor
+        }"
+      >电话: {{tel}}</view>
+    </view>
+    <view class="xd-store-item__btn" v-if="typeName">
+      <xd-button
+        :btn-type="i === 0 ? 'primary' : 'default'"
+        v-for="(it,i) in typeName"
+        :key="i"
+        size="small"
+      >{{it}}</xd-button>
+    </view>
+    <view class="xd-store-item__distance" v-if="distance">
+      <xd-font-icon size="34" icon="icondiqu" :color="uiColor"></xd-font-icon>
+      <text>{{distance}}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdButton from "@/components/XdButton/XdButton";
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  export default {
+    name: "XdItemStore",
+    components:{
+      XdButton,
+      XdFontIcon
+    },
+    props: {
+      image: {
+        type: String,
+        required: true
+      },
+      color: {
+        type: String,
+        default: '',
+      },
+      flagName: {
+        type: String,
+        default: '品牌'
+      },
+      typeName: {
+        type: Array,
+        default() {
+          return [];
+        }
+      },
+      distance: {
+        type: String,
+        default: '约48.07km'
+      },
+      name: {
+        type: String,
+        required: true
+      },
+      address: {
+        type: String,
+        default: '',
+      },
+      time: {
+        type: String,
+        default: '',
+      },
+      tel: {
+        type: String,
+        default: '',
+      }
+    },
+    data(){
+      return {
+        uiColor: ''
+      }
+    },
+    created(){
+      if(this.color) {
+        this.uiColor = this.color;
+      }else{
+        this.uiColor = this.$mainColor;
+      }
+
+    },
+    methods:{
+      getName(name){
+        return this.$xdUniHelper.cutStringLen(name,30)
+      },
+      getStyle(rpx,style='solid'){
+        if(rpx < 3) rpx = '1px';
+        else rpx = `${rpx}rpx`;
+        return `border-bottom: ${rpx} ${style} ${this.uiColor}`;
+      },
+      handleClick(){
+        this.$emit('click');
+        this.$emit('tab');
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-store-item {
+    box-shadow: 0 unit(5, rpx) unit(10,rpx) rgba(0,0,0,.1);
+    min-height: unit(200,rpx);
+    background: #fff;
+    border-radius: unit(10,rpx);
+    position: relative;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    &__flag {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: unit(70,rpx);
+      height: unit(40,rpx);
+      line-height: unit(40,rpx);
+      border-radius: unit(10,rpx) 0 unit(16,rpx) 0;
+      font-size: @xd-font-size-sm;
+      text-align: center;
+      color: #fff;
+    }
+
+    &__body {
+      flex: 1;
+      padding: unit(14,rpx) unit(30, rpx)  unit(30,rpx) 0;
+
+      &-title {
+        width: 100%;
+        height: unit(42,rpx);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: @xd-font-size-lg - 2;
+        line-height: unit(42, rpx);
+        margin-bottom: unit(5,rpx);
+      }
+
+      &-other {
+        width: unit(260,rpx);
+        height: unit(44,rpx);
+        line-height: unit(44, rpx);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: @xd-font-size-sm;
+        color: @xd-color-subtitle;
+      }
+
+    }
+
+    &__btn {
+      position: absolute;
+      bottom: unit(40, rpx);
+      right: unit(30, rpx);
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+
+      > xd-button {
+        margin-left: unit(10, rpx);
+
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+
+      /deep/ .xd-button {
+        height: unit(40,rpx);
+        line-height: unit(40, rpx);
+        margin-left: unit(10,rpx);
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+    }
+
+    &__distance {
+      position: absolute;
+      top: unit(72,rpx);
+      right: unit(30, rpx);
+      font-size: @xd-font-size-sm;
+      color: #b5b5b5;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+    }
+
+    &__logo {
+      width: unit(140,rpx);
+      margin-right: unit(30,rpx);
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+
+      > image {
+        width: unit(116,rpx);
+        height: unit(116,rpx);
+      }
+
+    }
+  }
+</style>

package/src/components/XdItemUserInfo/XdItemUserInfo.vue

@@ -0,0 +1,175 @@
+<template>
+  <view class="xd-item-user-new" @click="handleToDetail">
+    <view class="xd-item-user-new__image"
+      :style="{
+        width: imageWidth + 'rpx',
+        height: imageHeight + 'rpx'
+      }"
+    >
+      <image @click="handleClickImage(uiItem.image)" :src="uiItem.image" mode="widthFix"></image>
+    </view>
+    <view class="xd-item-user-new__text">
+      <view>
+        <xd-red-name :is-vip="uiItem.is_vip">{{uiItem.name}}</xd-red-name>
+      </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 class="xd-item-user-new__tag">
+      <view>
+        <xd-tag type="primary" inverted size="small">
+          <view class="xd-item-user-new__tag-text">
+            <xd-font-icon size="25" :icon="uiItem.sex === 1 ? 'iconnan':'iconnv'"></xd-font-icon>
+            <text>{{uiItem.age}}</text>
+          </view>
+        </xd-tag>
+      </view>
+      <view v-for="(item,index) in uiItem.otherTags" :key="index">
+        <xd-tag type="primary" inverted size="small">{{item}}</xd-tag>
+      </view>
+    </view>
+    <view class="xd-item-user-new__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: "XdItemUserInfo",
+    components:{
+      XdFontIcon,
+      XdTag,
+      XdRedName
+    },
+    props: {
+      item: {
+        type: Object | null,
+        default: null
+      },
+      imageWidth: {
+        type: Number | String,
+        default: 704
+      },
+      imageHeight: {
+        type: Number | String,
+        default: 346
+      }
+    },
+    data(){
+      return {
+        itemTestData: {
+          image: 'https://sandbox-image.jufubao.cn/20210719171512575.png',
+          desc: '保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。',
+          sex: 1, //1=>男 2=>女
+          age: '26岁',
+          is_vip: false,
+          otherTags:['北京', '国有企业', '未婚'],
+          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-user-new {
+    &__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>