新增h5物流详情的接口

zhiyangdu
1 parent d3e5c3db
Showing 7 changed files with 553 additions and 11 deletions
src/components/logisticsBar/logisticsBar.less
src/components/logisticsBar/logisticsBar.vue
src/components/logisticsListCom/logisticsListCom.less
src/components/logisticsListCom/logisticsListCom.vue
src/pages/logistics/logistics.less
src/pages/logistics/logistics.vue
src/router/index.js
+@charset "UTF-8";
+
+.logistics-bar {
+	background-color: #FFFFFF;
+	width: 100%;
+	height: auto;
+	.box {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin: 0 auto;
+		padding: 30rpx 0;
+		width: 690rpx;
+		height: auto;
+		.left-box {
+			display: flex;
+			justify-content: flex-start;
+			align-items: center;
+			.logo-box {
+				width: 80rpx;
+				height: 80rpx;
+				.logo-img {
+					display: block;
+					width: 80rpx;
+					height: 80rpx;
+				}
+				& + .info-box {
+					margin-left: 30rpx;
+				}
+			}
+			.info-box {
+				.state {
+					color: #333333;
+					font-size: 28rpx;
+					font-weight: 600;
+				}
+				.com-order-id {
+					color: #B4B4B4;
+					font-size: 24rpx;
+					font-weight: 400;
+				}
+			}
+		}
+		.right-box {
+			.btn {
+				&.btn-active-o {
+					color: #941305;
+					font-size: 26rpx;
+					font-weight: 500;
+					padding: 8rpx 22rpx;
+					border: 1px solid #941305;
+					border-radius: 30rpx;
+				}
+			}
+		}
+	}
+}
 \ No newline at end of file
+<template>
+  <div class="logistics-bar"
+       v-if="logistics">
+    <div class="box">
+      <div class="left-box">
+        <div class="logo-box"
+             v-if="logistics.express.simg">
+          <img :src="logistics.express.simg"
+               class="logo-img" />
+        </div>
+        <div class="info-box">
+          <div class="state">{{logistics.order.express_state_title}}</div>
+          <div class="com-order-id">{{logistics.express.com}}：{{logistics.order.express_num}}</div>
+        </div>
+      </div>
+      <div class="right-box">
+        <div class="btn btn-active-o"
+             v-clipboard:copy="logistics.order.express_num"
+             v-clipboard:success="success"
+             v-clipboard:error="error">复制单号</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+// 引入组件
+import Vue from 'vue';
+import VueClipboard from 'vue-clipboard2';
+Vue.use(VueClipboard);
+
+export default {
+  name: 'logisticsBar',
+  data: function () {
+    return {
+
+    }
+  },
+  props: ["logistics"],
+  methods: {
+
+    /**
+     * 复制单号成功
+     * @param {Object} event [复制剪切板事件]
+     */
+    success (event) {
+      this.showToast('复制单号成功');
+    },
+
+    /**
+     * 复制单号失败
+     * @param {Object} event [复制剪切板事件]
+     */
+    error (event) {
+      this.showToast('复制单号失败');
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style rel="stylesheet/less" lang="less">
+@import './logisticsBar';
+</style>
 \ No newline at end of file
+@charset "UTF-8";
+
+.logistics-list-com {
+	background-color: #FFFFFF;
+	width: 100%;
+	height: auto;
+	.box {
+		margin: 0 auto;
+		padding: 42rpx 0 82rpx 0;
+		width: 690rpx;
+		height: auto;
+		.item {
+			display: flex;
+			justify-content: flex-start;
+			align-items: flex-start;
+			width: 100%;
+			height: auto;
+			.time-box {
+				width: 96rpx;
+				text-align: right;
+				.date {
+					color: #333333;
+					font-size: 24rpx;
+					font-weight: 400;
+				}
+				.time {
+					color: #B4B4B4;
+					font-size: 20rpx;
+					font-weight: 400;
+				}
+			}
+			.line-box {
+				position: relative;
+				margin: 0 42rpx 0 32rpx;
+				width: 0;
+				height: 100%;
+				min-height: 230rpx;
+				border-left: 1px solid #DCDCDC;
+				.dot {
+					position: absolute;
+					top: 18rpx;
+					left: -6rpx;
+					z-index: 1;
+					background-color: #DCDCDC;
+					width: 10rpx;
+					height: 10rpx;
+					border-radius: 50%;
+				}
+			}
+			.content-box {
+				width: 515rpx;
+				.value {
+					color: #B4B4B4;
+					font-size: 24rpx;
+					font-weight: 400;
+				}
+			}
+			&.active {
+				.line-box {
+					.dot {
+						position: absolute;
+						top: 8rpx;
+						left: -14rpx;
+						z-index: 1;
+						background-color: #941305;
+						width: 26rpx;
+						height: 26rpx;
+						border-radius: 50%;
+					}
+				}
+				.content-box {
+					.value {
+						color: #333333;
+						font-weight: 600;
+					}
+				}
+			}
+		}
+		.order-address-box {
+			.item {
+				.line-box {
+					border-left: 1px dashed #DCDCDC;
+				}
+				.content-box {
+					.value {
+						color: #333333;
+						font-weight: 600;
+					}
+				}
+			}
+		}
+	}
+}
 \ No newline at end of file
+<template>
+  <div class="logistics-list-com"
+       v-if="logistics">
+    <div class="box">
+
+      <!-- 收货地址 -->
+      <div class="order-address-box"
+           v-if="logistics.order.address">
+        <div class="item">
+          <div class="time-box"></div>
+          <div class="line-box">
+            <div class="dot"></div>
+          </div>
+          <div class="content-box">
+            <div class="value">[收货地址]{{logistics.order.address}}</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 物流详情 -->
+      <template v-if="logistics.data && logistics.data.length">
+        <div class="logistics-list-box">
+          <div class="item"
+               :class="{'active': index === 0}"
+               v-for="(item, index) in logistics.data"
+               :key="index">
+            <div class="time-box">
+              <div class="date">{{item.accept_time | datetime('MM-dd')}}</div>
+              <div class="time">{{item.accept_time | datetime('HH:mm:ss')}}</div>
+            </div>
+            <div class="line-box">
+              <div class="dot"></div>
+            </div>
+            <div class="content-box">
+              <div class="value">{{item.AcceptStation}}</div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'logisticsListCom',
+  data: function () {
+    return {
+
+    }
+  },
+  props: ["logistics"],
+  methods: {
+
+
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style rel="stylesheet/less" lang="less">
+@import './logisticsListCom';
+</style>
 \ No newline at end of file
+@charset "UTF-8";
+
+page {
+	background-color: #F5F5F5;
+	width: 100%;
+	height: 100%;
+}
+
+.logistics-page {
+	@supports (padding-bottom: env(safe-area-inset-bottom)) {
+		& {
+			padding-bottom: env(safe-area-inset-bottom);
+		}
+	}
+	.nav {
+		position: fixed;
+		top: 0;
+		z-index: 100;
+		background-color: #FFFFFF;
+		width: 100%;
+		.nav-bar {
+			position: unset;
+			background-color: #FFFFFF;
+			border-bottom: 1px solid #E6E6E6;
+		}
+	}
+	.pl {
+		background-color: transparent;
+		width: 100%;
+		&.is-cnlive {
+			height: 44px;
+		}
+		&.not-is-cnlive {
+			height: 0;
+			&.is-open-app {
+				// height: 124rpx;
+			}
+		}
+		&.not-is-cnlive {
+			&.not-is-wechat {
+				height: 44px;
+			}
+		}
+	}
+	.main-box {
+		.logistics-bar {
+			margin-bottom: 10rpx;
+		}
+		.logistics-list-com {
+			
+		}
+	}
+}
 \ No newline at end of file
+<template>
+  <div class="logistics-page">
+
+    <!-- 导航栏 -->
+    <div class="nav"
+         :style="{'paddingTop': top.value + 'px'}">
+
+      <!-- navBar -->
+      <nav-bar v-if="!isWeChat.value"
+               @back="back"
+               :navs="navs">
+      </nav-bar>
+    </div>
+
+    <div class="pl"
+         :class="{'is-cnlive': isCNLive2.value, 'not-is-wechat': !isWeChat.value, 'not-is-cnlive': !isCNLive2.value, 'is-open-app': isOpenApp.value}"
+         :style="{'paddingTop': top.value + 'px'}"></div>
+
+    <!-- 主区域 -->
+    <div class="main-box">
+
+      <!-- 物流单号信息 -->
+      <logistics-bar :logistics="datas">
+      </logistics-bar>
+
+      <!-- 物流详细信息列表 -->
+      <logistics-list-com :logistics="datas">
+      </logistics-list-com>
+    </div>
+  </div>
+</template>
+
+<script>
+
+// 引入组件
+import navBar from '@/components/navBar/navBar';
+import logisticsBar from '@/components/logisticsBar/logisticsBar';
+import logisticsListCom from '@/components/logisticsListCom/logisticsListCom';
+
+export default {
+  name: 'logisticsPage',
+  data () {
+    return {
+      title: "",
+      query: {},
+      navs: null,							// navBar配置参数
+      datas: null							// 数据
+    }
+  },
+  components: {
+    navBar,
+    logisticsBar,
+    logisticsListCom
+  },
+  created (options) {
+
+    // 设置标题
+    this.$set(this, 'title', '物流详情');
+
+    // 设置地址栏请求参数
+    this.$set(this, "query", options);
+
+    this.$set(this, "navs", {
+      back: {
+        img: "/static/img/icon_back.png"
+      },
+      title: this.title
+    });
+
+    // 活动物流查询
+    this.luckDrawExpress();
+    // #ifdef H5 || APP-PLUS
+
+    // 更新页面title
+    this.$emit("updateHead");
+
+    // #endif
+  },
+
+
+  // #endif
+
+  methods: {
+
+    /**
+     * 活动物流查询
+     */
+    luckDrawExpress () {
+
+      // 必要参数
+      if (this.query.orderId && this.query.orderId != '0' && this.query.orderId != '000') {
+
+        // 显示loading
+        uni.showLoading({
+          title: "",
+          mask: true
+        });
+
+        // 请求接口
+        this.http("/Api/" + (this.getApiVersion().luckdraw) + "/luckDrawExpress", {
+          id: this.query.orderId
+        }, this.luckDrawExpressCallback, {
+            method: "POST"
+          });
+      } else {
+
+        // 订单号错误提示
+        this.showToast('订单号错误~');
+
+        // 定时返回
+        setTimeout(() => {
+
+          // 后退
+          this.back();
+        }, 2000);
+      }
+    },
+
+    /**
+     * 活动物流查询回调
+     * @param {Object} res [服务器返回数据]
+     * @param {Object} res [扩展参数]
+     */
+    luckDrawExpressCallback (res, ext) {
+
+      // 隐藏loading
+      uni.hideLoading();
+
+      // 返回处理
+      if (res.statusCode === 200 && res.data.code == 200) {
+
+        // 解构数据
+        let { data: datas } = res.data;
+
+        // 设置参数
+        this.$set(this, 'datas', datas);
+      } else if (res.statusCode === 200 && res.data.code == 400) {
+
+        // 获取地址列表出错
+        this.showToast(res.data.message);
+
+        // 定时返回
+        setTimeout(() => {
+
+          // 后退
+          this.back();
+        }, 2000);
+      } else {
+
+        // 获取地址列表出错
+        this.showToast("获取物流详情出错");
+
+        // 定时返回
+        setTimeout(() => {
+
+          // 后退
+          this.back();
+        }, 2000);
+      }
+    },
+
+    /**
+     * 返回
+     */
+    back () {
+
+      // 判断是否有返回函数
+      if (typeof this.helper.$Apps2 === 'object' && typeof this.helper.$Apps2.back === 'function') {
+
+        // 调用返回
+        this.helper.$Apps2.back();
+      } else {
+
+        // 后退
+        uni.navigateBack({
+          delta: 1
+        });
+      }
+    }
+  },
+  head: {
+    title () {
+      return {
+        inner: this.title
+      }
+    }
+  },
+  watch: {
+
+    /**
+   * 设置页面标题
+   * @param {Object} newVal [标题新值]
+   */
+    title (newVal) {
+
+      /* 设置页面标题 开始 */
+      this.setTitle(newVal);
+      /* 设置页面标题 结束 */
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/less" lang="less">
+@import './logistics';
+</style>
 \ No newline at end of file
@@ -146,9 +146,7 @@ const router = new Router({
                     path: "/shopList",
                     name: "shopList",
                     component: resolve => {
-                        require([
-                            "@/pages/shopList/shopList"
-                        ], resolve);
+                        require(["@/pages/shopList/shopList"], resolve);
                     },
                     meta: {
                         requireAuth: false
@@ -159,9 +157,7 @@ const router = new Router({
                     path: "/welfareList",
                     name: "welfareList",
                     component: resolve => {
-                        require([
-                            "@/pages/welfareList/welfareList"
-                        ], resolve);
+                        require(["@/pages/welfareList/welfareList"], resolve);
                     },
                     meta: {
                         requireAuth: false
@@ -172,9 +168,7 @@ const router = new Router({
                     path: "/actList",
                     name: "actList",
                     component: resolve => {
-                        require([
-                            "@/pages/actList/actList"
-                        ], resolve);
+                        require(["@/pages/actList/actList"], resolve);
                     },
                     meta: {
                         requireAuth: false
@@ -338,6 +332,17 @@ const router = new Router({
                         requireAuth: false
                     }
                 },
+                {
+                    // 查看兑换商品物流
+                    path: "/logistics",
+                    name: "logistics",
+                    component: resolve => {
+                        require(["@/pages/logistics/logistics"], resolve);
+                    },
+                    meta: {
+                        requireAuth: false
+                    }
+                },
                 /* 积分商城结束 */
  
                 /* 健步走健康值商城开始 */
@@ -379,8 +384,8 @@ const router = new Router({
                         requireAuth: false
                     }
                 },
-                  /* H5地址开始 */
-                  {
+                /* H5地址开始 */
+                {
                     // 创建地址
                     path: "/addressCreate",
                     name: "addressCreate",