gxd-uni-library-editx 1.0.0

package/src/dome/dome/order/detail.vue

@@ -0,0 +1,166 @@
+<template>
+  <xd-layout
+    title="我的订单详情"
+    background="#f8f8f8"
+    :show-footer="false"
+    :show-bar="true"
+    @back="back"
+    @done="handleDone"
+  >
+    <view class="app-body" v-if="layoutInfo !== null">
+      <xd-store-order-detail
+        :detail="null"
+        @onProductDetail="handleProductDetail"
+        @onExpress="handleExpress"
+      >
+        <view class="app-order-detail">
+          <view class="app-order-detail__body">
+            <view>
+              <xd-font-icon size="60" icon="iconshijian" color="#fff"></xd-font-icon>
+            </view>
+            <view>订单支付成功</view>
+          </view>
+        </view>
+      </xd-store-order-detail>
+    </view>
+  </xd-layout>
+</template>
+
+<script>
+
+  import XdLayout from "@/components/XdLayout/XdLayout";
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdStoreOrderDetail from "@/components/XdStoreOrderDetail/XdStoreOrderDetail";
+  import {Base64} from 'js-base64';
+
+  export default {
+    name: "AppMyOrderhome",
+    components: {
+      XdStoreOrderDetail,
+      XdLayout,
+      XdFontIcon
+    },
+    data() {
+      return {
+        //我的订单列表数据，null使用测试数据   array=> 使用正式数据
+        orderList: [],
+        layoutInfo: null, //layout数据
+      }
+    },
+    created(){
+
+    },
+    methods: {
+      handleDone(layoutInfo){
+        this.layoutInfo = layoutInfo;
+      },
+
+      /**
+       * @description 主菜单切换事件
+       * @param item
+       */
+      handeChangeTabs(item){
+        if(item['value'] === this.orderTabId) return;
+        this.orderTabId = item['value'];
+        this.getList();
+      },
+
+      /**
+       * @description 子级菜单切换事件
+       * @param item
+       */
+      handleSubTabChange(item){
+        if (item['value'] === this.subTabId) return;
+        this.subTabId = item['value'];
+        let subTab = this.$xdUniHelper.cloneDeep(this.subTab)
+        subTab.map((value)=>{
+          if(item['value'] === value['value']) {
+            value['selected'] = true;
+          }else{
+            value['selected'] = false;
+          }
+        });
+        this.subTab = subTab;
+        this.getList();
+      },
+
+      /**
+       * @description 获取我的订单接口
+       */
+      getList(){},
+
+
+      /***
+       * @description 点击标题事件
+       * @param item {Object} 当前订单或者店铺详情
+       */
+      handleOnTitle(item){
+        console.log('点击标题事件',item)
+      },
+
+      /***
+       * @description 点击按钮事件
+       * @param item
+       * @param btn
+       */
+      handleOnBtn({item,btn}){
+        console.log('点击标题事件', item, btn)
+      },
+
+      /**
+       * @description 点击商品事件
+       * @param order
+       * @param product
+       */
+      handleProductDetail({order, product}){
+        console.log('点击标题事件', order, product)
+      },
+
+      /**
+       * @description 点击快递按钮
+       * @param express
+       */
+      handleExpress(express) {
+        console.log('点击快递按钮', express)
+        this.$xdUniHelper.navigateTo({
+          url: `/dome/dome/express?express=${Base64.encodeURI(JSON.stringify(express))}&order_id=s299419273976496128&number=JT5020234707556`
+        })
+      },
+
+      back(){
+        this.$xdUniHelper.navigateBack()
+      },
+
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .app-body {
+
+  }
+
+  .app-order-detail {
+    box-sizing: border-box;
+    font-weight: normal;
+    color: #fff;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    &__body {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      height: unit(120, rpx);
+      font-size: @xd-font-size-lg;
+
+      /deep/ .xd-iconfont {
+        margin-right: unit(30, rpx);
+      }
+    }
+  }
+
+
+
+</style>

package/src/dome/dome/order/enter_order.vue

@@ -0,0 +1,294 @@
+<template>
+  <xd-layout
+    title="入口项目订单"
+    background="#f8f8f8"
+    :show-back="false"
+    :show-footer="true"
+    @back="back"
+  >
+    <view class="app-my-order">
+      <view class="app-my-order-tab">
+        <view
+          class="app-my-order-tab__item"
+          v-for="(item,index) in orderTab"
+          :key="index"
+          @click="handeChangeTabs(item)"
+        >
+          <view
+            :style="{
+              color:item['value'] === orderTabId ? '#333': '#999',
+              fontWeight: item['value'] === orderTabId ? 'bold': 'normal'
+            }"
+          >{{item['label']}}
+          </view>
+          <view
+            class="app-my-order-tab__item-line"
+            :style="{background: $mainColor}"
+            v-if="item['value'] === orderTabId"
+          ></view>
+        </view>
+      </view>
+      <view class="app-my-order-subTab" v-if="subTab.length > 0">
+        <view
+          class="app-my-order-subTab__item"
+          v-for="(item,index) in subTab"
+          :key="index"
+          @click="handleSubTabChange(item)"
+        >
+          <xd-radio size="mini" v-model="item['selected']"></xd-radio>
+          <view
+            :style="{
+              color:item['value'] === subTabId ? '#333': '#999',
+              fontWeight: item['value'] === subTabId ? 'bold': 'normal'
+            }"
+          >{{item['label']}}
+          </view>
+        </view>
+      </view>
+      <xd-enter-order-list
+        :list="orderList"
+        :type="orderTabId"
+        @onTitle="handleOnTitle"
+        @onBtn="handleOnBtn"
+        @onOrderDetail="handleProductDetail"
+      ></xd-enter-order-list>
+    </view>
+  </xd-layout>
+</template>
+
+<script>
+  import {tabs, subTabs} from "@/dome/dome/order/order";
+  import XdLayout from "@/components/XdLayout/XdLayout";
+  import XdEnterOrderList from "@/components/XdEnterOrderList/XdEnterOrderList";
+
+  export default {
+    name: "AppMyOrderhome",
+    components: {
+      XdEnterOrderList,
+      XdLayout,
+    },
+    data() {
+      return {
+        dataList: [],
+        orderTabId: 0, //选中的订单类型
+        orderTab: tabs, //订单类型菜单
+        subTabId: null,
+        subTab: [],
+
+        //我的订单列表数据，null使用测试数据   array=> 使用正式数据
+        orderList: [
+          {
+            "order_id": "m458170654005029364",
+            "placed_time": "2022-03-15 19:28:09",
+            "product_data": [
+              {
+                "product_id": 0,
+                "product_name": "六神花露水",
+                "ct": 1,
+                "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210119153621543.jpg?x-oss-process=style\/200_200",
+                "ext": ""
+              },
+              {
+                "product_id": 1,
+                "product_name": "六神花露水",
+                "ct": 1,
+                "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210119153621543.jpg?x-oss-process=style\/200_200",
+                "ext": ""
+              }, {
+                "product_id": 2,
+                "product_name": "六神花露水",
+                "ct": 1,
+                "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210119153621543.jpg?x-oss-process=style\/200_200",
+                "ext": ""
+              },
+              {
+                "product_id": 3,
+                "product_name": "六神花露水",
+                "ct": 1,
+                "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210119153621543.jpg?x-oss-process=style\/200_200",
+                "ext": ""
+              },
+            ],
+            "business_type": "store",
+            "business_type_name": "商城兑换",
+            "status": "3000",
+            "status_name": "支付完成",
+            "total_price": "25.00",
+            "order_url": "http://sandbox-store.jufubao.cn/main/order/detail?order_id=m458170654005029364"
+          },
+          {
+            "order_id": "m458170654005029365",
+            "placed_time": "2022-03-15 19:28:09",
+            "product_data": [
+              {
+                "product_id": 1,
+                "product_name": "六神花露水",
+                "ct": 1,
+                "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210119153621543.jpg?x-oss-process=style\/200_200",
+                "ext": ""
+              }
+            ],
+            "business_type": "store",
+            "business_type_name": "商城兑换",
+            "status": "3000",
+            "status_name": "支付完成",
+            "total_price": "25.00",
+            "order_url": "http://sandbox-store.jufubao.cn/main/order/detail?order_id=m458170654005029364"
+          },
+          {
+            "order_id": "m458170654005029363",
+            "placed_time": "2022-03-15 19:28:09",
+            "product_data": [
+              {
+                "product_id": 0,
+                "product_name": "六神花露水",
+                "ct": 1,
+                "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210119153621543.jpg?x-oss-process=style\/200_200",
+                "ext": ""
+              }
+            ],
+            "business_type": "store",
+            "business_type_name": "商城兑换",
+            "status": "3000",
+            "status_name": "支付完成",
+            "total_price": "25.00",
+            "order_url": "http://sandbox-store.jufubao.cn/main/order/detail?order_id=m458170654005029364"
+          }
+        ],
+      }
+    },
+    created() {
+
+    },
+    methods: {
+
+
+      /**
+       * @description 主菜单切换事件
+       * @param item
+       */
+      handeChangeTabs(item) {
+        if (item['value'] === this.orderTabId) return;
+        this.orderTabId = item['value'];
+        this.getList();
+      },
+
+      /**
+       * @description 子级菜单切换事件
+       * @param item
+       */
+      handleSubTabChange(item) {
+        if (item['value'] === this.subTabId) return;
+        this.subTabId = item['value'];
+        let subTab = this.$xdUniHelper.cloneDeep(this.subTab)
+        subTab.map((value) => {
+          if (item['value'] === value['value']) {
+            value['selected'] = true;
+          } else {
+            value['selected'] = false;
+          }
+        });
+        this.subTab = subTab;
+        this.getList();
+      },
+
+      /**
+       * @description 获取我的订单接口
+       */
+      getList() {
+      },
+
+
+      /***
+       * @description 点击标题事件
+       * @param item {Object} 当前订单或者店铺详情
+       */
+      handleOnTitle(item) {
+        console.log('点击标题事件', item)
+      },
+
+      /***
+       * @description 点击按钮事件
+       * @param item
+       * @param btn
+       * @param index
+       */
+      handleOnBtn({item, btn, index}) {
+        console.log('点击按钮事件', item, btn, index)
+      },
+
+      /**
+       * @description 点击商品事件
+       * @param item
+       * @param product
+       */
+      handleProductDetail(item) {
+        console.log('点击商品事件', item)
+      },
+
+      back() {
+        this.$xdUniHelper.navigateBack()
+      },
+
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .app-my-order {
+    margin: 0 unit(20, rpx);
+    box-sizing: border-box;
+    font-weight: normal;
+  }
+
+  .app-my-order-tab {
+    height: unit(68, rpx);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &__item {
+      flex: 1;
+      font-size: @xd-font-size-base + 2;
+      text-align: center;
+      position: relative;
+      height: 100%;
+      line-height: unit(68, rpx);
+
+      &-line {
+        position: absolute;
+        height: unit(6, rpx);
+        border-radius: unit(2, rpx);
+        bottom: 0;
+        left: 42%;
+        right: 42%;
+      }
+    }
+  }
+
+  .app-my-order-subTab {
+    border: 1px solid #ececec;
+    box-sizing: border-box;
+    height: unit(110, rpx);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    background: #fff;
+    .uni-box-radius();
+    margin-bottom: unit(20, rpx);
+
+    &__item {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      padding: 0 unit(20, rpx);
+      font-size: @xd-font-size-base;
+
+      & > view:last-child {
+        margin-left: unit(10, rpx);
+      }
+    }
+  }
+
+
+</style>

package/src/dome/dome/order/list.vue

@@ -0,0 +1,219 @@
+<template>
+  <xd-layout
+    title="我的订单列表（不带店铺）"
+    background="#f8f8f8"
+    :show-back="false"
+    :show-footer="true"
+    @back="back"
+  >
+    <view class="app-my-order">
+      <view class="app-my-order-tab">
+        <view
+          class="app-my-order-tab__item"
+          v-for="(item,index) in orderTab"
+          :key="index"
+          @click="handeChangeTabs(item)"
+        >
+          <view
+            :style="{
+              color:item['value'] === orderTabId ? '#333': '#999',
+              fontWeight: item['value'] === orderTabId ? 'bold': 'normal'
+            }"
+          >{{item['label']}}</view>
+          <view
+            class="app-my-order-tab__item-line"
+            :style="{background: $mainColor}"
+            v-if="item['value'] === orderTabId"
+          ></view>
+        </view>
+      </view>
+      <view class="app-my-order-subTab" v-if="subTab.length > 0">
+        <view
+          class="app-my-order-subTab__item"
+          v-for="(item,index) in subTab"
+          :key="index"
+          @click="handleSubTabChange(item)"
+        >
+          <xd-radio size="mini" v-model="item['selected']"></xd-radio>
+          <view
+            :style="{
+              color:item['value'] === subTabId ? '#333': '#999',
+              fontWeight: item['value'] === subTabId ? 'bold': 'normal'
+            }"
+          >{{item['label']}}</view>
+        </view>
+      </view>
+      <xd-store-order-list
+        :list="null"
+        :type="orderTabId"
+        @onTitle="handleOnTitle"
+        @onBtn="handleOnBtn"
+        @onProductDetail="handleProductDetail"
+      >
+        <template slot-scope="{item ,index}">
+          {{item}}--{{index}}
+        </template>
+      </xd-store-order-list>
+    </view>
+  </xd-layout>
+</template>
+
+<script>
+  import {tabs, subTabs} from "@/dome/dome/order/order";
+  import XdLayout from "@/components/XdLayout/XdLayout";
+  import XdRadio from "@/components/XdRadio/XdRadio";
+  import XdStoreOrderList from "@/components/XdStoreOrderList/XdStoreOrderList";
+
+  export default {
+    name: "AppMyOrderhome",
+    components: {
+      XdStoreOrderList,
+      XdLayout,
+      XdRadio
+    },
+    data() {
+      return {
+        dataList: [],
+        orderTabId: 0, //选中的订单类型
+        orderTab: tabs, //订单类型菜单
+        subTabId: null,
+        subTab: [],
+
+        //我的订单列表数据，null使用测试数据   array=> 使用正式数据
+        orderList: [],
+      }
+    },
+    created(){
+
+    },
+    methods: {
+
+
+      /**
+       * @description 主菜单切换事件
+       * @param item
+       */
+      handeChangeTabs(item){
+        if(item['value'] === this.orderTabId) return;
+        this.orderTabId = item['value'];
+        this.getList();
+      },
+
+      /**
+       * @description 子级菜单切换事件
+       * @param item
+       */
+      handleSubTabChange(item){
+        if (item['value'] === this.subTabId) return;
+        this.subTabId = item['value'];
+        let subTab = this.$xdUniHelper.cloneDeep(this.subTab)
+        subTab.map((value)=>{
+          if(item['value'] === value['value']) {
+            value['selected'] = true;
+          }else{
+            value['selected'] = false;
+          }
+        });
+        this.subTab = subTab;
+        this.getList();
+      },
+
+      /**
+       * @description 获取我的订单接口
+       */
+      getList(){},
+
+
+      /***
+       * @description 点击标题事件
+       * @param item {Object} 当前订单或者店铺详情
+       */
+      handleOnTitle(item){
+        console.log('点击标题事件',item)
+      },
+
+      /***
+       * @description 点击按钮事件
+       * @param item
+       * @param btn
+       * @param index
+       */
+      handleOnBtn({item,btn, index}){
+        console.log('点击按钮事件', item, btn, index)
+      },
+
+      /**
+       * @description 点击商品事件
+       * @param item
+       * @param product
+       */
+      handleProductDetail({item,product}){
+        console.log('点击商品事件', item, product)
+      },
+
+      back(){
+        this.$xdUniHelper.navigateBack()
+      },
+
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .app-my-order {
+    margin: 0 unit(20,rpx);
+    box-sizing: border-box;
+    font-weight: normal;
+  }
+
+  .app-my-order-tab {
+    height: unit(68,rpx);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &__item {
+      flex: 1;
+      font-size: @xd-font-size-base + 2;
+      text-align: center;
+      position: relative;
+      height: 100%;
+      line-height: unit(68,rpx);
+
+      &-line {
+        position: absolute;
+        height: unit(6,rpx);
+        border-radius: unit(2,rpx);
+        bottom: 0;
+        left: 42%;
+        right: 42%;
+      }
+    }
+  }
+
+  .app-my-order-subTab {
+    border: 1px solid #ececec;
+    box-sizing: border-box;
+    height: unit(110,rpx);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    background: #fff;
+    .uni-box-radius();
+    margin-bottom: unit(20,rpx);
+
+    &__item {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      padding: 0 unit(20,rpx);
+      font-size: @xd-font-size-base;
+
+      & > view:last-child {
+        margin-left: unit(10,rpx);
+      }
+    }
+  }
+
+
+</style>

package/src/dome/dome/order/order.js

@@ -0,0 +1,18 @@
+'use strict';
+
+/**
+ * @default 订单类型配置
+ * @type {*[]}
+ */
+export const tabs = [
+  {label: '全部', value: 0},
+  {label: '待付款', value: 1},
+  {label: '已完成', value: 2},
+  {label: '已取消', value: 3},
+]
+
+export const subTabs = [
+  {label: '配送', value: 1, selected: false},
+  {label: '自提', value: 3, selected: false},
+]
+