gxd-uni-library-editx 1.0.0

package/src/main/product/type.vue

@@ -0,0 +1,108 @@
+<template>
+  <xd-layout
+    title="商品分类"
+    background="#f8f8f8"
+    :show-back="false"
+    @back="back"
+    @onDone="handleDone"
+  >
+    <view
+      v-if="layoutInfo"
+      :style="{height: layoutInfo.bodyMinHeight}"
+    >
+      <xd-store-product-type
+        :default-index="0"
+        @onNavList="handleNavList"
+        @onAdsList="handleAdsList"
+        @onSubNavList="handleSubNavList"
+        @onToDetail="handleToDetail"
+      ></xd-store-product-type>
+    </view>
+  </xd-layout>
+</template>
+
+<script>
+  import XdLayout from "@/components/XdLayout/XdLayout";
+  import XdStoreProductType from "@/components/XdStoreProductType/XdStoreProductType";
+
+  export default {
+    name: "XdCartInde",
+    components: {
+      XdStoreProductType,
+      XdLayout,
+    },
+    data() {
+      return {
+        isFirst: false,
+        layoutInfo: null
+      }
+    },
+    created(){
+
+    },
+
+    methods: {
+      handleDone(layoutInfo){
+        this.layoutInfo = layoutInfo;
+        console.log('layoutInfo', layoutInfo)
+      },
+
+      back(){
+        this.$xdUniHelper.navigateBack()
+      },
+
+      /**
+       * @description 获取一级分类列表
+       * @param resolve 成功回调事件 null=> 使用测试数据  array => 正式数控
+       */
+      handleNavList(resolve) {
+        this.$xdShowLoading({})
+        setTimeout(() => {
+          resolve(null);
+          this.$xdHideLoading();
+        }, 1000)
+      },
+
+      /**
+       * @description 获取分类推广广告
+       * @param resolve 成功回调事件 null=> 使用测试数据  object => 正式数控
+       * @param item
+       */
+      handleAdsList({item},resolve){
+        if(this.isFirst) this.$xdShowLoading({})
+        setTimeout(() => {
+          resolve(null);
+          if(!this.isFirst) this.isFirst = true;
+          if(this.isFirst) this.$xdHideLoading()
+        }, 1000)
+      },
+
+      /**
+       * @description 获取二级分类列表
+       * @param item 当前点击连接对象
+       * @param resolve 当前快速连接所在列表位置
+       */
+      handleSubNavList({item}, resolve){
+        console.log('handleSubNavList', item);
+        setTimeout(() => {
+          resolve(null);
+        }, 1000)
+      },
+
+
+      /**
+       * @description 切换配送地址
+       * @param item 分类对象数据
+       */
+      handleToDetail(item) {
+        console.log('handleToDetail', item);
+      }
+
+
+    }
+  }
+</script>
+
+<style scoped lang="less">
+
+</style>

package/src/main/search/search.vue

@@ -0,0 +1,501 @@
+<template>
+  <xd-layout
+    title="搜索结果"
+    background="#fff"
+    :show-bar="true"
+    :show-footer="false"
+    @back="back"
+  >
+    <view class="app-body">
+      <view class="app-body__search" :style="{top:getTop + 'px'}">
+        <view>
+          <view class="app-body__search-icon">
+            <xd-font-icon
+              icon="iconsousuo"
+              width="40"
+              height="40"
+              size="30"
+            ></xd-font-icon>
+          </view>
+          <view class="app-body__search-text">
+            <input
+              class="app-body__search-text-input"
+              placeholder-class="app-body__search-text-input-placeholder"
+              @confirm="doneInput"
+              @blur="handleKeypree"
+              type="text"
+              confirm-type="done"
+              placeholder="大家都在搜：祛湿茶"
+              :adjust-position="true"
+              v-model="keyword"/>
+          </view>
+          <view
+            class="app-body__search-clear"
+            v-if="keyword"
+            @click="handleClear"
+
+          >
+            <xd-font-icon
+              icon="iconshanchu"
+              color="#999"
+              width="40"
+              height="40"
+              size="36"
+            ></xd-font-icon>
+          </view>
+        </view>
+        <view @click="back">取消</view>
+      </view>
+      <view class="app-body__search-box"></view>
+      <template v-if="list === null && hotList.length > 0">
+        <view class="app-body__title">大家正在搜</view>
+        <view class="app-body__tag">
+          <view v-for="(hot,hotIndex) in hotList" :key="hotIndex">
+            <xd-tag @click="handleHot(hot)" type="default" radius="10rpx">{{hot}}</xd-tag>
+          </view>
+        </view>
+      </template>
+      <view class="app-body__content">
+        <view class="app-body__content-left" >
+          <view v-for="(itemL,index) in listLeft" :key="index">
+            <xd-shop-item :item="itemL"></xd-shop-item>
+          </view>
+        </view>
+        <view class="app-body__content-right">
+          <view v-for="(itemR,index) in listRight" :key="index">
+            <xd-shop-item :item="itemR"></xd-shop-item>
+          </view>
+        </view>
+      </view>
+    </view>
+  </xd-layout>
+</template>
+
+<script>
+  import XdLayout from "@/components/XdLayout/XdLayout";
+  import XdStoreCashier from "@/components/XdStoreCashier/XdStoreCashier";
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdTag from "@/components/XdTag/XdTag";
+  import XdShopItem from "@/components/XdShopItem/XdShopItem";
+
+  export default {
+    name: "XdCartInde",
+    components: {
+      XdStoreCashier,
+      XdLayout,
+      XdFontIcon,
+      XdTag,
+      XdShopItem
+    },
+    data() {
+      return {
+        keyword: '',
+
+        //热门搜索
+        hotList: [
+          '家纺满199减100',
+          '京东小魔方',
+          '祛湿茶',
+          '香菇干'
+        ],
+
+        //搜索结果 null=> 未搜索  []=> 搜索结果为空
+        list: null,
+
+        //左右编辑
+        listLeft: [],
+        listRight: [],
+
+        statusBarHeight: 0, //状态栏高度
+        navBarHeight: 45, //bar高度rpx
+
+      }
+    },
+
+    computed:{
+      getTop(){
+       return  this.statusBarHeight + this.navBarHeight;
+      }
+    },
+
+    watch:{
+      list(val){
+        if(val === null || val.length === 0) {
+          this.listLeft = [];
+          this.listRight = [];
+        }else{
+          let left = [];
+          let right = [];
+
+          val.map((item,index)=>{
+            if(index%2 === 0) {
+              left.push(item)
+            }else{
+              right.push(item)
+            }
+          })
+          this.listLeft = left;
+          this.listRight = right;
+        }
+      },
+    },
+
+    created(){
+
+      // 设置状态栏高度
+      this.statusBarHeight = getApp().globalData.$systemInfo.statusBarHeight;
+      // h5 app mp-alipay
+      // #ifndef H5 || APP-PLUS || MP-ALIPAY
+      // 获取胶囊的位置
+      const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+      // (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
+      this.navBarHeight = ((menuButtonInfo.bottom - this.statusBarHeight) + (menuButtonInfo.top - this.statusBarHeight))
+      // #endif
+
+      console.log('created',this.statusBarHeight, this.navBarHeight)
+    },
+
+    methods: {
+
+      handleClear(){
+        this.keyword = '';
+        this.list = null;
+      },
+
+      handleKeypree(e){
+        if(e.detail.value) {
+          this.getSearchList();
+        }
+      },
+
+      /**
+       * @description 选中热门标签
+       * @param hot 选中标签
+       */
+      handleHot(hot){
+        if(hot === this.keyword) return;
+        this.keyword = hot;
+        this.getSearchList();
+      },
+
+      /**
+       * @description 搜索数据列表
+       */
+      getSearchList(){
+        console.log('getSearchList', this.keyword)
+        this.$xdShowLoading({});
+        setTimeout(()=>{
+          this.list= [
+            {
+              "id": "1435562",
+              "product_name": "\u4e91\u6d77\u6620\u8c61 \u795e\u519c\u67b6\u6934\u6728\u91ce\u751f\u9999\u83c7\u4e01 250g*1\u888b  ",
+              "product_short_desc": "",
+              "price": 38,
+              "sale_price": 39,
+              "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210824140303106.jpg?x-oss-process=style\/200_200",
+              "brand": "",
+              "special": [""],
+              "best": "N",
+              "stock": "1000",
+              "hot": "2",
+              "newon": "2"
+            }, {
+              "id": "430858",
+              "product_name": "\u67ab\u5ddd \u65e0\u6839\u9999\u83c7 100g*1\u888b",
+              "product_short_desc": "",
+              "price": 44,
+              "sale_price": 30,
+              "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210318141825878.jpg?x-oss-process=style\/200_200",
+              "brand": "",
+              "special": ["\u751f\u6001\u539f\u79cd\uff0c\u7cbe\u54c1\u519c\u4e1a"],
+              "best": "N",
+              "stock": "987",
+              "hot": "2",
+              "newon": "2"
+            }, {
+              "id": "1415187",
+              "product_name": "GREEN KING\/\u7eff\u5e1d \u53e4\u7530\u9999\u83c7 250g*1\u888b",
+              "product_short_desc": "",
+              "price": 74,
+              "sale_price": 62,
+              "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210402101023855.jpg?x-oss-process=style\/200_200",
+              "brand": "GREEN KING\/\u7eff\u5e1d",
+              "special": [""],
+              "best": "N",
+              "stock": "988",
+              "hot": "2",
+              "newon": "2"
+            }, {
+              "id": "1415202",
+              "product_name": "GREEN KING\/\u7eff\u5e1d \u53e4\u7530\u9999\u83c7\u82b1\u83c7 250g*1\u888b",
+              "product_short_desc": "",
+              "price": 100,
+              "sale_price": 84,
+              "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210402104225852.jpg?x-oss-process=style\/200_200",
+              "brand": "GREEN KING\/\u7eff\u5e1d",
+              "special": [""],
+              "best": "N",
+              "stock": "991",
+              "hot": "2",
+              "newon": "2"
+            }, {
+              "id": "618923",
+              "product_name": "\u5929\u745e\u4f18\u54c1 \u65e0\u6839\u9999\u83c7 200g*1\u888b",
+              "product_short_desc": "",
+              "price": 80,
+              "sale_price": 60,
+              "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20200702171742592.png?x-oss-process=style\/200_200",
+              "brand": "\u5929\u745e\u4f18\u54c1",
+              "special": ["\u751f\u6001\u539f\u79cd\uff0c\u7cbe\u54c1\u519c\u4e1a"],
+              "best": "N",
+              "stock": "994",
+              "hot": "2",
+              "newon": "2"
+            }, {
+              "id": "891604",
+              "product_name": "\u4e2d\u7cae\u5c71\u8403 \u6709\u673a\u83cc\u83c7\u5c71\u73cd\u56db\u5b9d\u793c\u76d2 200g",
+              "product_short_desc": "",
+              "price": 128,
+              "sale_price": 101,
+              "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20200930154451802.jpg?x-oss-process=style\/200_200",
+              "brand": "\u9996\u7cae",
+              "special": ["\u9999\u83c7+\u6ed1\u5b50\u83c7+\u9ed1\u6728\u8033+\u699b\u8611"],
+              "best": "N",
+              "stock": "998",
+              "hot": "2",
+              "newon": "2"
+            }, {
+              "id": "891605",
+              "product_name": "\u4e2d\u7cae\u5c71\u8403 \u6709\u673a\u83cc\u83c7\u5c71\u73cd\u516d\u5b9d\u793c\u76d2 300g",
+              "product_short_desc": "",
+              "price": 188,
+              "sale_price": 153,
+              "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20200930155035495.jpg?x-oss-process=style\/200_200",
+              "brand": "\u9996\u7cae",
+              "special": ["\u9999\u83c7+\u6ed1\u5b50\u83c7+\u9ed1\u6728\u8033+\u79cb\u8033+\u699b\u8611+\u767d\u8611"],
+              "best": "N",
+              "stock": "997",
+              "hot": "2",
+              "newon": "2"
+            }, {
+              "id": "891606",
+              "product_name": "\u4e2d\u7cae\u5c71\u8403 \u6709\u673a\u83cc\u83c7\u516d\u5473\u771f\u83cc\u793c\u76d2 300g",
+              "product_short_desc": "",
+              "price": 378,
+              "sale_price": 297,
+              "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20200930155648924.jpg?x-oss-process=style\/200_200",
+              "brand": "\u9996\u7cae",
+              "special": ["\u9999\u83c7+\u6ed1\u5b50\u83c7+\u7897\u6728\u8033+\u971c\u513f+\u699b\u8611\u4e01+\u7f8a\u809a\u83cc"],
+              "best": "N",
+              "stock": "1000",
+              "hot": "2",
+              "newon": "2"
+            }, {
+              "id": "1419340",
+              "product_name": "\u5929\u9526 \u5c71\u73cd\u5e72\u8d27\u7ec4\u5408\u793c\u5305 400g",
+              "product_short_desc": "",
+              "price": 146,
+              "sale_price": 143,
+              "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/admin-upload\/202105171721484216.jpg?x-oss-process=style\/200_200",
+              "brand": "\u5929\u9526",
+              "special": ["\u793c\u5305\u5185\u542b\uff1a\u9ed1\u6728\u8033100g+\u9999\u83c7100g+\u9ec4\u82b1\u83dc100g+\u7334\u5934\u8611100g"],
+              "best": "N",
+              "stock": "1000",
+              "hot": "2",
+              "newon": "2"
+            }, {
+              "id": "1414942",
+              "product_name": "\u5929\u9526 \u5c71\u6c34\u7cfb\u5217-\u624b\u9009\u9999\u83c7\u793c\u76d2 100g",
+              "product_short_desc": "",
+              "price": 74,
+              "sale_price": 62,
+              "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210330165542174.jpg?x-oss-process=style\/200_200",
+              "brand": "\u5929\u9526",
+              "special": ["\u672c\u4ea7\u54c1\u4e0d\u652f\u6301\u65e0\u7406\u7531\u9000\u6362\uff0c\u82e5\u65e0\u8d28\u91cf\u95ee\u9898\uff0c\u9000\u6362\u8d27\u9700\u8981\u4e70\u5bb6\u627f\u62c5\u6765\u56de\u8fd0\u8d39\u3002"],
+              "best": "N",
+              "stock": "1000",
+              "hot": "2",
+              "newon": "2"
+            }, {
+              "id": "1414821",
+              "product_name": "\u5929\u9526 \u6709\u673a\u9999\u83c7\u5355\u76d2\u88c5 200g*2\u76d2",
+              "product_short_desc": "",
+              "price": 101,
+              "sale_price": 85,
+              "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210329120304437.jpg?x-oss-process=style\/200_200",
+              "brand": "\u5929\u9526",
+              "special": ["\u672c\u4ea7\u54c1\u4e0d\u652f\u6301\u65e0\u7406\u7531\u9000\u6362\uff0c\u82e5\u65e0\u8d28\u91cf\u95ee\u9898\uff0c\u9000\u6362\u8d27\u9700\u8981\u4e70\u5bb6\u627f\u62c5\u6765\u56de\u8fd0\u8d39\u3002"],
+              "best": "N",
+              "stock": "998",
+              "hot": "2",
+              "newon": "2"
+            }, {
+              "id": "1414811",
+              "product_name": "\u5929\u9526 \u6709\u673a\u9999\u83c7\u7eb8\u888b\u88c5 100g*2\u888b",
+              "product_short_desc": "",
+              "price": 61,
+              "sale_price": 52,
+              "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210329111609953.jpg?x-oss-process=style\/200_200",
+              "brand": "\u5929\u9526",
+              "special": ["\u672c\u4ea7\u54c1\u4e0d\u652f\u6301\u65e0\u7406\u7531\u9000\u6362\uff0c\u82e5\u65e0\u8d28\u91cf\u95ee\u9898\uff0c\u9000\u6362\u8d27\u9700\u8981\u4e70\u5bb6\u627f\u62c5\u6765\u56de\u8fd0\u8d39\u3002"],
+              "best": "N",
+              "stock": "996",
+              "hot": "2",
+              "newon": "2"
+            }, {
+              "id": "1414545",
+              "product_name": "\u5929\u9526 \u6709\u673a\u9999\u83c7\u7eb8\u76d2\u88c5 200g*2\u76d2",
+              "product_short_desc": "",
+              "price": 101,
+              "sale_price": 85,
+              "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210325163413378.jpg?x-oss-process=style\/200_200",
+              "brand": "\u5929\u9526",
+              "special": ["\u672c\u4ea7\u54c1\u4e0d\u652f\u6301\u65e0\u7406\u7531\u9000\u6362\uff0c\u82e5\u65e0\u8d28\u91cf\u95ee\u9898\uff0c\u9000\u6362\u8d27\u9700\u8981\u4e70\u5bb6\u627f\u62c5\u6765\u56de\u8fd0\u8d39\u3002"],
+              "best": "N",
+              "stock": "997",
+              "hot": "2",
+              "newon": "2"
+            }, {
+              "id": "1414839",
+              "product_name": "\u5929\u9526 \u5c71\u6c34\u7cfb\u5217-\u6709\u673a\u9999\u83c7\u888b\u88c5 150g*2\u888b",
+              "product_short_desc": "",
+              "price": 90,
+              "sale_price": 76,
+              "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210329143851587.jpg?x-oss-process=style\/200_200",
+              "brand": "\u5929\u9526",
+              "special": ["\u672c\u4ea7\u54c1\u4e0d\u652f\u6301\u65e0\u7406\u7531\u9000\u6362\uff0c\u82e5\u65e0\u8d28\u91cf\u95ee\u9898\uff0c\u9000\u6362\u8d27\u9700\u8981\u4e70\u5bb6\u627f\u62c5\u6765\u56de\u8fd0\u8d39\u3002"],
+              "best": "N",
+              "stock": "999",
+              "hot": "2",
+              "newon": "2"
+            }, {
+              "id": "1419338",
+              "product_name": "\u5929\u9526 \u5c71\u6c34\u6709\u673a\u83cc\u83c7\u5e72\u8d27\u7ec4\u5408\u793c\u5305 900g",
+              "product_short_desc": "",
+              "price": 285,
+              "sale_price": 246,
+              "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/admin-upload\/202105171749546174.jpg?x-oss-process=style\/200_200",
+              "brand": "\u5929\u9526",
+              "special": ["\u793c\u5305\u5185\u542b\uff1a\u699b\u8611150g+\u7334\u5934\u8611150g+\u6ed1\u5b50\u8611150g+\u9ec4\u82b1\u83dc150g+\u9999\u83c7150g+\u79cb\u6728\u8033150g"],
+              "best": "N",
+              "stock": "1000",
+              "hot": "2",
+              "newon": "2"
+            }
+          ];
+          this.$xdHideLoading();
+        },1000)
+
+      },
+
+      doneInput() {
+        uni.hideKeyboard()
+      },
+
+      back(){
+        this.$xdUniHelper.navigateBack()
+      },
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .app-body {
+    &__search {
+      height: unit(100,rpx);
+      line-height: unit(100,rpx);
+      background: #f1f1f1;
+      padding:0 unit(30,rpx);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      z-index: 1000;
+
+      &-box {
+        height: unit(100, rpx);
+      }
+
+      &-icon {
+        margin: unit(6,rpx) unit(20,rpx) 0;
+        flex-shrink: 1;
+      }
+
+      &-text {
+        flex: 1;
+        width: 0;
+
+        &-input {
+          font-size: @xd-font-size-base + 2;
+        }
+      }
+
+      &-clear {
+        margin: unit(6, rpx) unit(20, rpx) 0;
+        flex-shrink: 1;
+      }
+
+      & > view:first-child {
+        height: unit(70,rpx);
+        background: #fff;
+        border-radius: unit(35,rpx);
+        flex: 1;
+        width: 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      & > view:last-child {
+        flex-shrink: 0;
+        margin-left: unit(30,rpx);
+        font-size: @xd-font-size-base + 2;
+      }
+    }
+
+    &__title {
+      height: unit(80,rpx);
+      line-height: unit(80,rpx);
+      padding: 0 unit(30,rpx);
+      font-size: @xd-font-size-base;
+      font-weight: bold;
+    }
+
+    &__tag {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      flex-wrap: wrap;
+      padding: 0 unit(30, rpx);
+
+      & >view {
+        margin-right: unit(20,rpx);
+        margin-bottom: unit(20,rpx);
+      }
+    }
+
+    &__content {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      padding: unit(30,rpx) unit(30, rpx) 0;
+
+      &-right {
+        margin-right: 0;
+      }
+
+      & > view {
+        flex: 1;
+        width: 0;
+        margin-right: unit(30,rpx);
+
+        &> view {
+          margin-bottom: unit(30,rpx);
+        }
+      }
+    }
+  }
+</style>