gxd-uni-library-editx 1.0.0

package/src/main/date/date.vue

@@ -0,0 +1,260 @@
+<template>
+	<view class="calendar-content" v-if="showCalendar">
+    <xd-bar @click="back">日历组件</xd-bar>
+		<text class="example-info">日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等。</text>
+		<xd-title-section title="插入模式" type="line"></xd-title-section>
+		<view>
+			<xd-date
+        :selected="info.selected"
+        :showMonth="false"
+        @change="change"
+        @monthSwitch="monthSwitch">
+      </xd-date>
+		</view>
+		<xd-title-section title="弹出模式" type="line"></xd-title-section>
+		<view class="example-body">
+      <xd-button btn-type="danger" @click="open">打开日历</xd-button>
+		</view>
+		<xd-date
+      ref="calendar"
+      :clear-date="true"
+      :date="info.date"
+      :insert="info.insert"
+      :lunar="info.lunar"
+      :startDate="info.startDate"
+      :endDate="info.endDate"
+      :range="info.range"
+      @confirm="confirm"
+      @close="close">
+    </xd-date>
+	</view>
+</template>
+
+<script>
+	import XdCalendar from "@/components/XdDate/XdDate";
+  import XdTitleSection from "@/components/XdTitleSection/XdTitleSection";
+  import XdBar from "@/components/XdBar/XdBar";
+  import XdButton from "@/components/XdButton/XdButton";
+
+
+  /**
+	 * 获取任意时间
+	 */
+	function getDate(date, AddDayCount = 0) {
+		if (!date) {
+			date = new Date()
+		}
+		if (typeof date !== 'object') {
+			date = date.replace(/-/g, '/')
+		}
+		const dd = new Date(date)
+
+		dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
+
+		const y = dd.getFullYear()
+		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
+		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
+		return {
+			fullDate: y + '-' + m + '-' + d,
+			year: y,
+			month: m,
+			date: d,
+			day: dd.getDay()
+		}
+	}
+
+
+
+	export default {
+		components: {
+		  XdButton,
+      XdBar,
+      XdTitleSection,
+      XdDate},
+		data() {
+			return {
+				showCalendar: false,
+				info: {
+					lunar: true,
+					range: true,
+					insert: false,
+					selected: []
+				}
+			}
+		},
+    created(){
+		  console.log(getCurrentPages());
+      if (typeof _hmt !== 'undefined') {
+        _hmt.push(['_trackEvent', 'calendar', 'calendar']);
+      }
+    },
+		onReady() {
+			this.$nextTick(() => {
+				this.showCalendar = true
+			});
+			// TODO 模拟请求异步同步数据
+			setTimeout(() => {
+				this.info.date = getDate(new Date(), -30).fullDate
+				this.info.startDate = getDate(new Date(), -60).fullDate
+				this.info.endDate = getDate(new Date(), 30).fullDate
+				this.info.selected = [{
+						date: getDate(new Date(), -3).fullDate,
+						info: '打卡'
+					},
+					{
+						date: getDate(new Date(), -2).fullDate,
+						info: '签到',
+						data: {
+							custom: '自定义信息',
+							name: '自定义消息头'
+						}
+					},
+					{
+						date: getDate(new Date(), -1).fullDate,
+						info: '已打卡'
+					}
+				]
+			}, 2000)
+		},
+		methods: {
+			open() {
+				this.$refs.calendar.open()
+			},
+      back(){
+			  this.$xdUniHelper.navigateBack();
+      },
+			close() {
+				console.log('弹窗关闭');
+			},
+			change(e) {
+				console.log('change 返回:', e)
+				// 模拟动态打卡
+				if (this.info.selected.length > 5) return
+				this.info.selected.push({
+					date: e.fulldate,
+					info: '打卡'
+				})
+			},
+			confirm(e) {
+				console.log('confirm 返回:', e)
+			},
+			monthSwitch(e) {
+				console.log('monthSwitchs 返回:', e)
+			}
+		}
+	}
+</script>
+
+<style>
+	/* 头条小程序组件内不能引入字体 */
+	/* #ifdef MP-TOUTIAO */
+	@font-face {
+		font-family: uniicons;
+		font-weight: normal;
+		font-style: normal;
+		src: url('~@/static/uni.ttf') format('truetype');
+	}
+
+	/* #endif */
+
+	/* #ifndef APP-NVUE */
+	page {
+		display: flex;
+		flex-direction: column;
+		box-sizing: border-box;
+		background-color: #efeff4;
+		min-height: 100%;
+		height: auto;
+	}
+
+	view {
+		font-size: 14px;
+		line-height: inherit;
+	}
+
+	.example {
+		padding: 0 15px 15px;
+	}
+
+	.example-info {
+		padding: 15px;
+		color: #3b4144;
+		background: #ffffff;
+	}
+
+	.example-body {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		flex-wrap: wrap;
+		justify-content: center;
+		padding: 0;
+		font-size: 14px;
+		background-color: #ffffff;
+	}
+
+	/* #endif */
+	.example {
+		padding: 0 15px;
+	}
+
+	.example-info {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		padding: 15px;
+		color: #3b4144;
+		background-color: #ffffff;
+		font-size: 14px;
+		line-height: 20px;
+	}
+
+	.example-info-text {
+		font-size: 14px;
+		line-height: 20px;
+		color: #3b4144;
+	}
+
+
+	.example-body {
+		flex-direction: column;
+		padding: 15px;
+		background-color: #ffffff;
+	}
+
+	.word-btn-white {
+		font-size: 18px;
+		color: #FFFFFF;
+	}
+
+	.word-btn {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		border-radius: 6px;
+		height: 48px;
+		margin: 15px;
+		background-color: #007AFF;
+	}
+
+	.word-btn--hover {
+		background-color: #4ca2ff;
+	}
+
+	.example-body {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.calendar-button {
+		flex: 1;
+		font-weight: bold;
+		font-size: 32rpx;
+	}
+</style>

package/src/main/order/order.js

@@ -0,0 +1,19 @@
+'use strict';
+
+/**
+ * @default 订单类型配置
+ * @type {*[]}
+ */
+export const tabs = [
+  {label: '全部', value: 0},
+  {label: '待付款', value: 1},
+  {label: '待发货', value: 2},
+  {label: '待收货', value: 3},
+  {label: '已完成', value: 4},
+]
+
+export const subTabs = [
+  {label: '配送', value: 1, selected: false},
+  {label: '电子码', value: 3, selected: false},
+]
+

package/src/main/order/order.vue

@@ -0,0 +1,222 @@
+<template>
+  <xd-layout
+    title="我的订单"
+    background="#f8f8f8"
+    :show-bar="true"
+    :show-footer="false"
+    @back="back"
+  >
+    <!--tab-->
+    <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>
+    </view>
+    <!--tab end-->
+    <xd-store-order-list
+      :list="orderList"
+      :type="orderTabId"
+      @onToPay="handleToPay"
+      @onCannelOrder="handleCannelOrder"
+      @onCashier="handleCashier"
+      @onOrderDetail="handleOrderDetail"
+    ></xd-store-order-list>
+  </xd-layout>
+</template>
+
+<script>
+  import {tabs, subTabs} from './order'
+  import XdLayout from "@/components/XdLayout/XdLayout";
+  import XdStoreOrderList from "@/components/XdStoreOrderList/XdStoreOrderList";
+  import XdRadio from "@/components/XdRadio/XdRadio";
+
+  export default {
+    name: "AppMyOrderhome",
+    components: {
+      XdStoreOrderList,
+      XdLayout,
+      XdRadio
+    },
+    data() {
+      return {
+        dataList: [],
+        orderTabId: 0, //选中的订单类型
+        orderTab: tabs, //订单类型菜单
+        subTabId: null,
+        subTab: [],
+
+        orderList: null,
+      }
+    },
+    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
+       */
+      handleToPay(item){
+        console.log('handleToPay', item)
+      },
+
+      /**
+       * @description 取消订单
+       * @param item
+       */
+      handleCannelOrder(item) {
+        console.log('handleCannelOrder', item)
+      },
+
+      /**
+       * @description 再次购买
+       * @param item
+       */
+      handleCashier(item) {
+        console.log('handleCashier', item)
+      },
+
+      /**
+       * @description 去订单详情
+       * @param item
+       */
+      handleOrderDetail(item) {
+        console.log('handleOrderDetail', item)
+      },
+
+      back(){
+        this.$xdUniHelper.navigateBack()
+      },
+
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .app-my-order {
+    .uni-body-margin();
+    box-sizing: border-box;
+    font-weight: normal;
+    padding-top: unit(20,rpx);
+  }
+
+  .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: 30%;
+        right: 30%;
+      }
+    }
+  }
+
+  .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/main/product/detail.vue

@@ -0,0 +1,121 @@
+<template>
+  <xd-layout
+    title="商品详情"
+    background="#f8f8f8"
+    :show-footer="false"
+    @back="back"
+  >
+    <xd-store-product-info
+      :item="null"
+      :collect="collect"
+      :cart-number="cartNumber"
+      :address="address"
+      :select-number="selectNumber"
+      @onCollect="handleCollect"
+      @onFastLink="handleFastLink"
+      @onFastBtn="handleFastBtn"
+      @onSelect="handleSelect"
+      @onAddress="handleAddress"
+    >
+    </xd-store-product-info>
+  </xd-layout>
+</template>
+
+<script>
+  import XdLayout from "@/components/XdLayout/XdLayout";
+  import XdStoreCart from "@/components/XdCartList/XdCartList";
+  import XdStoreProductInfo from "@/components/XdStoreProductInfo/XdStoreProductInfo";
+
+  export default {
+    name: "XdCartInde",
+    components: {
+      XdStoreProductInfo,
+      XdLayout,
+      XdStoreCart
+    },
+    data() {
+      return {
+        collect: false,
+        cartNumber: 99,
+        address:null,
+        selectNumber: null,
+      }
+    },
+    created(){
+      setTimeout(()=>{
+        this.address = '河北省廊坊三河市北城汽车站片城建新村50号楼5单元3001室'
+      }, 1000);
+      setTimeout(()=>{
+        this.collect = true;
+        this.cartNumber = 100;
+        this.selectNumber = '2件'
+      }, 5000)
+    },
+
+    methods: {
+      back(){
+        this.$xdUniHelper.navigateBack()
+      },
+
+      /**
+       * @description 点击收藏事件
+       * @param item 当前商品对象
+       */
+      handleCollect(item) {
+        console.log('handleCollect',item)
+        this.$xdShowLoading({});
+        setTimeout(() => {
+          this.collect = !this.collect;
+          this.$xdHideLoading()
+        }, 1000)
+      },
+
+      /**
+       * @description 快速连接点击事件
+       * @param link 当前点击连接对象
+       * @param index 当前快速连接所在列表位置
+       */
+      handleFastLink({link ,index}){
+        if(index === 0) {
+          this.$xdUniHelper.redirectTo({
+
+          })
+        }
+        console.log('handleFastLink', link, index)
+      },
+
+      /**
+       * @description 快速按钮点击事件
+       * @param link 当前点击连接对象
+       * @param index 当前快速连接所在列表位置
+       */
+      handleFastBtn({btn, index}){
+        console.log('handleFastBtn', btn, index)
+      },
+
+      /**
+       * @description 选中规格事件
+       * @param item 当前商品信息对象
+       */
+      handleSelect(item) {
+        console.log('handleSelect', item)
+      },
+
+      /**
+       * @description 切换配送地址
+       */
+      handleAddress() {
+        console.log('onAddress');
+        setTimeout(()=>{
+          this.address = '河北省廊坊三河市北城汽车站片城建新村49号楼5单元2001室'
+        }, 2000)
+      }
+
+
+    }
+  }
+</script>
+
+<style scoped lang="less">
+
+</style>