gxd-uni-library-editx 1.0.0

package/src/components/XdItemPhysical/XdItemPhysical.vue

@@ -0,0 +1,410 @@
+<template>
+  <view
+    class="xd-physical"
+    v-if="uiItem !== null"
+    :style="{
+       borderRadius: borderRadius + 'rpx',
+       color: color
+    }"
+  >
+    <!--机构-->
+    <view
+      class="xd-physical__org"
+      @click="handleEvent('onOrganization')"
+      :style="{
+        background: 'rgba('+ colorValue +')',
+        borderRadius: borderRadius + 'rpx'
+      }"
+    >
+      <view
+        class="xd-physical__org-logo"
+        :style="{
+           borderRadius: borderRadius + 'rpx',
+        }"
+      >
+        <image :src="uiItem['organization']['logo']"></image>
+      </view>
+      <view class="xd-physical__org-text">
+        <view class="xd-physical__org-text-title">{{uiItem['organization']['name']}}</view>
+        <view class="xd-physical__org-text-footer">
+          <view class="xd-physical__org-text-footer-left">
+            <view v-for="(tag,index) in uiItem['organization']['tags']" :key="index">
+              <xd-tag
+                type="primary"
+                size="small"
+                height="32"
+                radius="20rpx"
+                :is-stop="false"
+                inverted>{{tag}}
+              </xd-tag>
+            </view>
+          </view>
+          <view class="xd-physical__org-text-footer-right">
+            <view>
+              <xd-font-icon icon="icondiqu" color="#666"></xd-font-icon>
+            </view>
+            <view>{{uiItem['organization']['distance']}}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!--机构-->
+    <!--套餐-->
+    <view class="xd-physical__pack">
+      <view
+        class="xd-physical__pack-item"
+        v-for="item in uiItem['packages']"
+        :key="item.id"
+        @click="handleEvent('onPackage', item)"
+      >
+        <view class="xd-physical__pack-item-logo">
+          <image :src="item.image"></image>
+        </view>
+        <view class="xd-physical__pack-item-text">
+          <view class="xd-physical__pack-item-text-title">
+            <view>{{item.name}}</view>
+            <view>已约：{{item.sell_num}}</view>
+          </view>
+          <view class="xd-physical__pack-item-text-tag" v-if="item['favours']">
+            <view v-for="(tag,index) in item['favours']" :key="index">
+              <xd-tag
+                :is-stop="false"
+                type="primary"
+                color="red"
+                size="small"
+                height="34"
+                radius="20rpx"
+                inverted>
+                {{tag.favour}}
+              </xd-tag>
+            </view>
+          </view>
+          <view class="xd-physical__pack-item-text-cont">
+            <view>
+              <xd-unit
+                :price="item.price"
+                :font-size="36"
+                color="red"
+                :icon-size="0.45"
+              ></xd-unit>
+            </view>
+            <view>
+              <xd-unit
+                v-if="item.specified_price"
+                :price="item.specified_price"
+                delete-line
+                color="#999"
+                :font-size="26"
+                font-weight="normal"
+                is-gray
+                :icon-size="0.35"
+              ></xd-unit>
+            </view>
+            <view></view>
+            <view>
+              <xd-button
+                type="primary"
+                size="mini"
+                width="100rpx"
+                @click="handleEvent('onPackage', item)"
+              >预约</xd-button>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!--套餐-->
+    <!--更多套餐-->
+    <view
+      class="xd-physical__more"
+      @click="handleEvent('onMore')"
+      :style="{
+         borderRadius: '0 0 ' + borderRadius + 'rpx;' ,
+      }"
+    >
+      <view>查看更多体检套餐</view>
+      <view>
+        <xd-font-icon size="24" icon="iconxiashuangjiantou"></xd-font-icon>
+      </view>
+    </view>
+    <!--更多套餐-->
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdTag from "@/components/XdTag/XdTag";
+  import XdUnit from "@/components/XdUnit/XdUnit";
+  import XdButton from "@/components/XdButton/XdButton";
+
+  const color = require('color');
+
+  export default {
+    name: "XdItemPhysical",
+    components: {
+      XdButton,
+      XdUnit,
+      XdTag,
+      XdFontIcon
+    },
+    props: {
+      item: {
+        type: Object | null,
+        default: null
+      },
+      borderRadius: {
+        type: Number | String,
+        default: 10, //rpx
+      },
+
+      color: {
+        type: String,
+        default: '#333',
+      }
+    },
+    data() {
+      return {
+        uiItem: null,
+        colorValue: null,
+
+        testData: {
+          organization: {
+            id: 1,
+            logo: 'https://img.dangaoss.com/public/b/21/15/1346223_s.jpg',
+            name: '廊坊美年大健康（廊坊分院）',
+            distance: '约34.84km',
+            tags: ['专业机构', '提前两天预约']
+          },
+          packages: [
+            {
+              id: 1,
+              image: 'https://img.li91.com/m/0/1541663983/57a17d381f94c.jpg',
+              name: '常规套餐（男女通用）',
+              sell_num: 5652,
+              price: 566,
+              specified_price: 1166,
+              favour: '立减300',
+            },
+            {
+              id: 2,
+              image: 'https://jfb-public-images.oss-cn-qingdao.aliyuncs.com/20211109102807500.jpg',
+              name: '常规套餐（男女通用）',
+              sell_num: 6668,
+              price: 666,
+              specified_price: 1666,
+              favour: '立减500',
+            }
+          ]
+        }
+
+      }
+    },
+
+    watch: {
+      item() {
+        this.init();
+      }
+    },
+
+    created() {
+      this.colorValue = color(this.$mainColor).alpha(0.06).array().join(',');
+      this.init();
+    },
+
+    methods: {
+      init() {
+        if (this.item === null) this.uiItem = this.$xdUniHelper.cloneDeep(this.testData);
+        else this.uiItem = this.$xdUniHelper.cloneDeep(this.item);
+      },
+
+      /**
+       * @description 事件处理
+       * @param eventName 事件名称
+       * @param data 传递参数
+       */
+      handleEvent(eventName, data = null) {
+        this.$emit(eventName, data || this.uiItem);
+      },
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-physical {
+    background: #fff;
+    padding: unit(6, rpx) 0 0;
+
+    &__org {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      padding: unit(10, rpx);
+      margin: 0 unit(6, rpx);
+
+      &-logo {
+        flex-shrink: 0;
+        padding-right: unit(20, rpx);
+        width: unit(150, rpx);
+        height: unit(112, rpx);
+
+
+        & > image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      &-text {
+        flex: 1;
+        width: 0;
+        display: flex;
+        justify-content: flex-start;
+        align-content: center;
+        flex-wrap: wrap;
+        min-height: unit(112, rpx);;
+
+        &-title {
+          width: 100%;
+          .uni-max-cut(2, 80);
+          line-height: unit(40, rpx);
+          margin-bottom: unit(15, rpx);
+          font-size: @xd-font-size-lg;
+          padding-bottom: unit(10, rpx);
+        }
+
+        &-footer {
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          align-items: flex-start;
+          padding-bottom: unit(5, rpx);
+
+          &-left {
+            flex: 1;
+            width: 0;
+            display: flex;
+            justify-content: flex-start;
+            align-items: flex-start;
+
+            & > view {
+              margin-right: unit(10, rpx);
+            }
+
+          }
+
+          &-right {
+            flex-shrink: 0;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            font-size: @xd-font-size-sm;
+            color: #666;
+
+            & > view:first-child {
+              margin-right: unit(10, rpx);
+            }
+          }
+        }
+      }
+    }
+
+    &__pack {
+      &-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        border-bottom: 1px solid #efefef;
+        padding: unit(16, rpx);
+
+        &-logo {
+          width: unit(150, rpx);
+          height: unit(112, rpx);
+          margin-right: unit(20, rpx);
+          flex-shrink: 0;
+
+          & > image {
+            height: 100%;
+            width: 100%;
+          }
+        }
+
+        &-text {
+          flex: 1;
+          width: 0;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          flex-wrap: wrap;
+          min-height: unit(112, rpx);
+
+          &-tag {
+            padding: unit(10, rpx) 0 unit(6, rpx);
+          }
+
+          &-title {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+
+            & > view:first-child {
+              .uni-max-cut(1, 40);
+              line-height: unit(40, rpx);
+              font-size: @xd-font-size-lg - 2;
+              flex: 1;
+              width: 0;
+            }
+
+            & > view:last-child {
+              flex-shrink: 0;
+              font-size: @xd-font-size-sm;
+              color: #999;
+            }
+
+          }
+
+          &-cont {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            & > view:nth-child(1),
+            & > view:nth-child(2) {
+              flex-shrink: 0;
+              margin-right: unit(10, rpx);
+            }
+
+            & > view:nth-child(3) {
+              flex: 1;
+              width: 0;
+            }
+
+            & > view:last-child {
+              flex-shrink: 0;
+              align-content: flex-end;
+              display: flex;
+            }
+
+          }
+        }
+      }
+    }
+
+    &__more {
+      line-height: unit(30, rpx);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: @xd-font-size-sm;
+      color: #666;
+      padding: unit(10, rpx) 0;
+      border-bottom: unit(10, rpx) solid #efefef;
+
+      & > view:first-child {
+        padding-right: unit(10, rpx);
+      }
+    }
+
+  }
+</style>

package/src/components/XdItemPhysicalPack/XdItemPhysicalPack.vue

@@ -0,0 +1,240 @@
+<template>
+  <view
+    class="xd-physical-pack"
+    v-if="uiItem !== null"
+    :style="{
+       borderRadius: borderRadius + 'rpx',
+       color: color,
+       background: background
+    }"
+  >
+    <view
+      class="xd-physical-pack__item"
+      @click="handleEvent('onPackage', uiItem)"
+    >
+      <view class="xd-physical-pack__item-logo">
+        <image :src="uiItem.image"></image>
+      </view>
+      <view class="xd-physical-pack__item-text">
+        <view class="xd-physical-pack__item-text-title">
+          <view>{{uiItem.name}}</view>
+          <view>已约：{{uiItem.sell_num}}</view>
+        </view>
+        <view class="xd-physical-pack__item-text-tag">
+          <view
+            :style="{background: 'rgba('+ colorValue +')', color: $mainColor}"
+            v-for="(tag,index) in uiItem.tags"
+            :key="index"
+          >{{tag}}</view>
+        </view>
+        <view class="xd-physical-pack__item-text-cont">
+          <view v-if="uiItem.favour">
+            <xd-tag
+              :is-stop="false"
+              type="primary"
+              color="red"
+              size="small"
+              height="34"
+              radius="20rpx"
+              inverted
+            >{{uiItem.favour}}</xd-tag>
+          </view>
+          <view>
+            <xd-unit
+              :price="uiItem.price"
+              :font-size="36"
+              color="red"
+              :icon-size="0.45"
+            ></xd-unit>
+          </view>
+          <view v-if="uiItem.specified_price">
+            <xd-unit
+              :price="uiItem.specified_price"
+              delete-line
+              color="#999"
+              :font-size="26"
+              font-weight="normal"
+              is-gray
+              :icon-size="0.35"
+            ></xd-unit>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdTag from "@/components/XdTag/XdTag";
+  import XdUnit from "@/components/XdUnit/XdUnit";
+  import XdButton from "@/components/XdButton/XdButton";
+  const color = require('color');
+
+  export default {
+    name: "XdItemPhysicalPack",
+    components: {
+      XdButton,
+      XdUnit,
+      XdTag,
+      XdFontIcon
+    },
+    props:{
+      item: {
+        type: Object | null,
+        default: null
+      },
+      borderRadius: {
+        type: Number|String,
+        default: 10, //rpx
+      },
+
+      background: {
+        type: String,
+        default: '#fff',
+      },
+
+      color: {
+        type: String,
+        default: '#333',
+      }
+    },
+    data(){
+      return {
+        uiItem: null,
+        colorValue: null,
+
+        testData: {
+          id: 1,
+          image: 'https://img.li91.com/m/0/1541663983/57a17d381f94c.jpg',
+          name: '常规套餐（男女通用）',
+          sell_num: 5652,
+          price: 566,
+          specified_price: 1166,
+          favour: '立减300',
+          tags: ['青年体检', '心脑血管检查', '糖尿病']
+        },
+      }
+    },
+
+    watch:{
+      item(){
+        this.init();
+      }
+    },
+
+    created(){
+      this.colorValue = color(this.$mainColor).alpha(0.2).array().join(',');
+      this.init();
+    },
+
+    methods:{
+      init(){
+        if(this.item === null) this.uiItem = this.$xdUniHelper.cloneDeep(this.testData);
+        else this.uiItem = this.$xdUniHelper.cloneDeep(this.item);
+      },
+
+      /**
+       * @description 事件处理
+       * @param eventName 事件名称
+       * @param data 传递参数
+       */
+      handleEvent(eventName , data = null){
+        this.$emit(eventName, data || this.uiItem);
+      },
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-physical-pack {
+    padding: unit(6,rpx) 0 0;
+
+    &__item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding:unit(16,rpx);
+
+        &-logo {
+          width: unit(170,rpx);
+          height: unit(127.5,rpx);
+          margin-right: unit(20,rpx);
+          flex-shrink: 0;
+
+          & > image {
+            height: 100%;
+            width: 100%;
+          }
+        }
+
+        &-text {
+          flex: 1;
+          width: 0;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          flex-wrap: wrap;
+          min-height: unit(127.5, rpx);
+
+          &-favour {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            padding: unit(10,rpx) 0 unit(6, rpx);
+          }
+
+          &-title {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+
+            & > view:first-child {
+              .uni-max-cut(1, 40);
+              line-height: unit(40, rpx);
+              font-size: @xd-font-size-lg - 2;
+              flex: 1;
+              width: 0;
+            }
+
+            & > view:last-child {
+              flex-shrink: 0;
+              font-size: @xd-font-size-sm;
+              color: #999;
+            }
+
+          }
+
+          &-tag {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            font-size: @xd-font-size-sm;
+            padding: unit(15,rpx) 0;
+
+            &> view {
+              margin-right: unit(10,rpx);
+              height: unit(36,rpx);
+              border-radius: unit(16,rpx);
+              line-height: unit(36,rpx);
+              padding: 0 unit(16,rpx);
+            }
+          }
+
+          &-cont {
+            width: 100%;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+
+            & > view {
+              margin-right: unit(10,rpx);
+            }
+          }
+        }
+      }
+  }
+</style>