scg地址编辑

www/webapp/scg/src/lib/baseUrl.js

@@ -22,6 +22,10 @@ const serviceModule = {
     url: 'o2o/order/list',
     method: 'post'
   },
+  addOrder: {
+    url: 'o2o/order/add',
+    method: 'post'
+  },
   /*
   * 用户注册
   * @params {string} user_id
@@ -34,6 +38,13 @@ const serviceModule = {
     method: 'get'
   },
   /*
+  * 获取商品列表
+  * */
+  getProductList: {
+    url: 'o2o/product/list',
+    method: 'get'
+  },
+  /*
   * 短信验证码
   * @params {number} type 3
   * @params {number} mobile
@@ -69,6 +80,15 @@ const serviceModule = {
     url: 'api/shop/editAddress',
     method: 'post'
   },
+  /*
+  * 检测用户地址是否在服务站范围内
+  * @param {Strting} user_id 用户ID
+  * @param {Strting} address_id 用户地址ID
+  * */
+  checkAddress: {
+    url: 'o2o/order/checkAddress',
+    method: 'get'
+  },
   delAddress: {
     url: 'api/shop/delAddress',
     method: 'post'

www/webapp/scg/src/lib/product.js

@@ -0,0 +1,442 @@
+export default {
+  success: true,
+  message: 'true',
+  data: {
+    products: [
+      {
+        id: '57e3a5a49f5160c9048b457c',
+        price: '',
+        name: '母婴清洁',
+        desc: '[{"type":1,"content":"http://icon.yiguanjia.me/29650b1c3c7a91480490276220.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/7b40fe1b14fc1480490279077.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/d3e060f3ead4b1480490333346.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/28ef635fdf9061480490344521.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/9fdc93aa391761480490347557.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/eb27390e9e7a61480490350592.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/993949a8a718a1480490353292.jpg"}]',
+        status: 1,
+        is_extra: 0,
+        order: 200,
+        type: '8',
+        type_str: '母婴房清洁',
+        extra: [
+          {
+            type: '整间深度清洁',
+            price: '888'
+          },
+          {
+            type: '整间日常清洁',
+            price: '388'
+          }
+        ],
+        action_user: '',
+        action_time: '',
+        action_log: '',
+        pics: [
+          {
+            url: 'http://icon.yiguanjia.me/9ff6558673ea71500523539085.jpg',
+            width: 750,
+            height: 585
+          },
+          {
+            url: 'http://icon.yiguanjia.me/2de4b5863734f1500523545618.jpg',
+            width: 720,
+            height: 1327
+          },
+          {
+            url: 'http://icon.yiguanjia.me/2e5687d0a88751500523548579.jpg',
+            width: 720,
+            height: 545
+          },
+          {
+            url: 'http://icon.yiguanjia.me/dc23ea5821d9a1500523551017.jpg',
+            width: 720,
+            height: 1066
+          },
+          {
+            url: 'http://icon.yiguanjia.me/19b71d095f5b91500523564591.jpg',
+            width: 720,
+            height: 1024
+          }
+        ]
+      },
+      {
+        id: '57e0e0189f5160dc048b4568',
+        price: '',
+        name: '深度清洁',
+        desc: '[{ "type": 1,  "content": "http://icon.yiguanjia.me/e4c29bbe45c911475913783707.jpg"},{ "type": 1,  "content": "http://icon.yiguanjia.me/2aa238fb222661475913799166.jpg"},{ "type": 1,  "content": "http://icon.yiguanjia.me/e295c92da2e7c1475913803198.png"},{ "type": 1,  "content": "http://icon.yiguanjia.me/363f18ed617211475913944488.jpg"},{ "type": 1,  "content": "http://icon.yiguanjia.me/64a1375694e091475913947183.png"},{ "type": 1,  "content": "http://icon.yiguanjia.me/8cf32629eece91475913957779.png"}, { "type": 1,  "content": "http://icon.yiguanjia.me/0ef470cf13ea51475914131334.jpg"},{ "type": 1,  "content": "http://icon.yiguanjia.me/341746e8065381475978339748.jpg"},{ "type": 1,  "content": "http://icon.yiguanjia.me/beb99ec9850041475978342874.jpg"} ]',
+        status: 1,
+        is_extra: 0,
+        order: 2,
+        type: '2',
+        type_str: '深度清洁',
+        extra: [
+          {
+            type: '卧室清洁',
+            price: '188'
+          },
+          {
+            type: '客厅清洁',
+            price: '288'
+          },
+          {
+            type: '厨房清洁',
+            price: '388'
+          },
+          {
+            type: '卫生间清洁',
+            price: '188'
+          }
+        ],
+        action_user: '',
+        action_time: '',
+        action_log: '',
+        pics: [
+          {
+            url: 'http://icon.yiguanjia.me/1797607a982b21500523584641.jpg',
+            width: 750,
+            height: 585
+          },
+          {
+            url: 'http://icon.yiguanjia.me/4f335da2f5481500523587165.jpg',
+            width: 720,
+            height: 832
+          },
+          {
+            url: 'http://icon.yiguanjia.me/56b2b00de21511500523589215.jpg',
+            width: 720,
+            height: 1178
+          },
+          {
+            url: 'http://icon.yiguanjia.me/24167ab96746f1500523591257.jpg',
+            width: 720,
+            height: 473
+          },
+          {
+            url: 'http://icon.yiguanjia.me/29679ed29175e1500523605080.jpg',
+            width: 720,
+            height: 1204
+          }
+        ]
+      },
+      {
+        id: '57e0dffc9f5160dd048b4568',
+        price: '',
+        name: '日常清洁',
+        desc: '[{"type":1,"content":"http://icon.yiguanjia.me/15d8ec3241b41480492100598.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/5782ced3b6a221480492104947.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/0b4d8988278011480492111752.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/0b4f25923689b1480492121452.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/ec449c658a7a81480492126559.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/bdad1bc6934f81480492135364.jpg"}]',
+        status: 1,
+        is_extra: 0,
+        order: 1,
+        type: '1',
+        type_str: '日常清洁',
+        extra: [
+          {
+            type: '一室一卫',
+            price: '98'
+          },
+          {
+            type: '两室一卫',
+            price: '118'
+          },
+          {
+            type: '两室两卫',
+            price: '138'
+          },
+          {
+            type: '三室两卫',
+            price: '158'
+          },
+          {
+            type: '四室三卫',
+            price: '228'
+          },
+          {
+            type: '200-250平米',
+            price: '298'
+          },
+          {
+            type: '200-300平米',
+            price: '398'
+          },
+          {
+            type: '三层别墅',
+            price: '498'
+          },
+          {
+            type: '四层别墅',
+            price: '598'
+          },
+          {
+            type: '其他',
+            price: '1'
+          }
+        ],
+        action_user: '',
+        action_time: '',
+        action_log: '',
+        pics: [
+          {
+            url: 'http://icon.yiguanjia.me/7f212bc8efe831500523627492.jpg',
+            width: 750,
+            height: 585
+          },
+          {
+            url: 'http://icon.yiguanjia.me/27331c95fb2261500523632088.jpg',
+            width: 720,
+            height: 1127
+          },
+          {
+            url: 'http://icon.yiguanjia.me/4549043c51ad31500523635167.jpg',
+            width: 720,
+            height: 1178
+          },
+          {
+            url: 'http://icon.yiguanjia.me/ce1ef0e22dc931500523645931.jpg',
+            width: 720,
+            height: 520
+          },
+          {
+            url: 'http://icon.yiguanjia.me/0d3b572c069e91500523649185.gif',
+            width: 720,
+            height: 1158
+          }
+        ]
+      },
+      {
+        id: '57e0e0369f5160b1048b456b',
+        price: '',
+        name: '专业除螨',
+        desc: '[{"type":1,"content":"http://icon.yiguanjia.me/11cc40af11871480493869084.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/ea7a4586b5d2b1480494780841.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/57718bb459ea81480494783551.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/a1cf6e6da1db71480494785987.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/b875e4c126d041480494790474.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/f7a3590ed10f51480494806345.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/e244149a548451480494810267.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/757bcf11f3a451480494813003.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/d9405553aae8a1480494815467.jpg"}]',
+        status: 1,
+        is_extra: 0,
+        order: 0,
+        type: '3',
+        type_str: '除螨杀菌',
+        extra: [
+          {
+            type: '儿童床',
+            price: '80'
+          },
+          {
+            type: '布艺窗帘',
+            price: '100'
+          },
+          {
+            type: '整床除螨',
+            price: '180'
+          },
+          {
+            type: '布艺沙发',
+            price: '50'
+          }
+        ],
+        action_user: '',
+        action_time: '',
+        action_log: '',
+        pics: [
+          {
+            url: 'http://icon.yiguanjia.me/79cffb41d4c011500523673639.jpg',
+            width: 750,
+            height: 585
+          },
+          {
+            url: 'https://icon.yiguanjia.me/866141749a7221500523677347.jpg',
+            width: 720,
+            height: 832
+          },
+          {
+            url: 'http://icon.yiguanjia.me/0e2d0a08924a1500523681022.jpg',
+            width: 720,
+            height: 1697
+          },
+          {
+            url: 'http://icon.yiguanjia.me/5ad5109e340681500523684107.jpg',
+            width: 720,
+            height: 1204
+          }
+        ]
+      },
+      {
+        id: '57e0e04e9f5160af048b456b',
+        price: '',
+        name: '家电清洗',
+        desc: '[{"type":1,"content":"http://icon.yiguanjia.me/534317519e9b1480493689815.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/db190005bd9fc1480493702868.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/9c84cd5e00c5a1480493706280.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/de04da4b769a41480493709817.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/37b9518e8cfb51480493713410.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/b43780afa98691480493719152.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/7d55b5fe3c5e31480493723053.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/26353540295a41480493726622.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/17eed959130011480493729623.jpg"}]',
+        status: 1,
+        is_extra: 0,
+        order: 0,
+        type: '4',
+        type_str: '家电清洗',
+        extra: [
+          {
+            type: '微波炉',
+            price: '60'
+          },
+          {
+            type: '洗衣机',
+            price: '100'
+          },
+          {
+            type: '油烟机',
+            price: '120'
+          },
+          {
+            type: '挂式空调',
+            price: '100'
+          },
+          {
+            type: '立式空调',
+            price: '130'
+          },
+          {
+            type: '冰箱-单开门',
+            price: '100'
+          },
+          {
+            type: '冰箱-双开门',
+            price: '130'
+          }
+        ],
+        action_user: '',
+        action_time: '',
+        action_log: '',
+        pics: [
+          {
+            url: 'http://icon.yiguanjia.me/a4dc8d2541381500523702857.jpg',
+            width: 750,
+            height: 585
+          },
+          {
+            url: 'http://icon.yiguanjia.me/0f66d5802d05c1500523706243.jpg',
+            width: 720,
+            height: 844
+          },
+          {
+            url: 'http://icon.yiguanjia.me/36766992f4f2e1500523708676.jpg',
+            width: 720,
+            height: 1204
+          }
+        ]
+      },
+      {
+        id: '57e0e0879f5160b8048b4571',
+        price: '8',
+        name: '新居开荒',
+        desc: '[{"type":1,"content":"http://icon.yiguanjia.me/67b4871c13f781480493497023.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/b02e5765e45dc1480495231912.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/9f693fab851d61480495234559.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/2a7f5284e1eea1480495236431.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/08058efd85011480495238403.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/2c7f8c9e602bb1480495247880.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/5c449e8bbe7161480495250019.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/12a7fa370563b1480495252148.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/026a46e2bde0f1480495253918.jpg"}]',
+        status: 1,
+        is_extra: 0,
+        order: 0,
+        type: '6',
+        type_str: '新居开荒',
+        extra: [],
+        action_user: '',
+        action_time: '',
+        action_log: '',
+        pics: [
+          {
+            url: 'http://icon.yiguanjia.me/f779503941d941500523732301.jpg',
+            width: 750,
+            height: 585
+          },
+          {
+            url: 'http://icon.yiguanjia.me/4c3d505c72a291500523734883.jpg',
+            width: 720,
+            height: 654
+          },
+          {
+            url: 'http://icon.yiguanjia.me/ae9a8484065751500523737604.jpg',
+            width: 720,
+            height: 691
+          },
+          {
+            url: 'http://icon.yiguanjia.me/96e8b0424bda21500523740183.gif',
+            width: 720,
+            height: 558
+          },
+          {
+            url: 'http://icon.yiguanjia.me/7cd4392a4d9ac1500523742839.gif',
+            width: 720,
+            height: 306
+          }
+        ]
+      },
+      {
+        id: '57fb4a909f5160b2048b4a0e',
+        price: '10',
+        name: '擦玻璃',
+        desc: '[{"type":1,"content":"http://icon.yiguanjia.me/f8edd60a959da1480493218526.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/323188edb50cb1480493223005.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/8a2528607ef231480493226505.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/7b8bcb7ae71891480493229856.jpg"}]',
+        status: 1,
+        is_extra: 0,
+        order: 0,
+        type: '10',
+        type_str: '擦玻璃',
+        extra: [],
+        action_user: '',
+        action_time: '',
+        action_log: '',
+        pics: [
+          {
+            url: 'http://icon.yiguanjia.me/f90733e3ba9a51500523759715.jpg',
+            width: 750,
+            height: 585
+          },
+          {
+            url: 'http://icon.yiguanjia.me/49172465934811500523763351.jpg',
+            width: 720,
+            height: 820
+          },
+          {
+            url: 'http://icon.yiguanjia.me/faac0f58e40b51500523766805.jpg',
+            width: 720,
+            height: 829
+          },
+          {
+            url: 'http://icon.yiguanjia.me/c9918fb586dae1500523769439.jpg',
+            width: 720,
+            height: 1099
+          }
+        ]
+      },
+      {
+        id: '58085f4b9f5160a9048b490e',
+        price: '12',
+        name: '租房大扫除',
+        desc: '[{"type":1,"content":"http://icon.yiguanjia.me/7279bbc724e8c1480490663038.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/85b1c8466aa071480490672287.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/005fd813ba16e1480490676184.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/f3f60d0bae84b1480490679162.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/fb670ff173dc91480490682528.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/4af72d8222de11480490690122.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/eed8c9bedb58b1480490693776.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/6b95c86a172921480490696603.jpg"},{"type":1,"content":"http://icon.yiguanjia.me/02dc92eef9c7f1480490700649.jpg"}]',
+        status: 1,
+        is_extra: 0,
+        order: 0,
+        type: '5',
+        type_str: '民宿保洁',
+        extra: [],
+        action_user: '',
+        action_time: '',
+        action_log: '',
+        pics: [
+          {
+            url: 'http://icon.yiguanjia.me/944fc213e95041500523782518.jpg',
+            width: 750,
+            height: 585
+          },
+          {
+            url: 'http://icon.yiguanjia.me/5d1176e5c13311500523785187.jpg',
+            width: 720,
+            height: 840
+          },
+          {
+            url: 'http://icon.yiguanjia.me/fcbe8b95b069c1500523788434.jpg',
+            width: 720,
+            height: 822
+          },
+          {
+            url: 'http://icon.yiguanjia.me/66ac5c700c0451500523790605.jpg',
+            width: 720,
+            height: 1128
+          }
+        ]
+      }
+    ]
+  },
+  sum_count: 9999,
+  sum_page: 99,
+  page_size: null,
+  current_page: 1,
+  holiday: [
+    ''
+  ],
+  error_code: 200,
+  exec_time: 0.040411949157715,
+  memory_usage: '3,460KB'
+};

www/webapp/scg/src/router/index.js

@@ -2,6 +2,9 @@ import Vue from 'vue';
 import Router from 'vue-router';
 import home from 'views/home/index';
 import order from 'views/order/index';
+import product from 'views/product/index';
+import addOrder from 'views/order/addOrder';
+import orderDetail from 'views/order/detail';
 import mine from 'views/mine/index';
 import login from 'views/login/index';
 import address from 'views/address/index';
@@ -17,7 +20,8 @@ export default new Router({
       path: '/',
       name: 'home',
       component: home,
-    }, {
+    },
+    {
       path: '/login',
       name: 'login',
       component: login,
@@ -27,6 +31,21 @@ export default new Router({
       name: 'order',
       component: order,
     },
+    {
+      path: '/order/add',
+      name: 'addOrder',
+      component: addOrder,
+    },
+    {
+      path: '/product',
+      name: 'product',
+      component: product,
+    },
+    {
+      path: '/order/detail',
+      name: 'orderDetail',
+      component: orderDetail,
+    },
     {
       path: '/pay',
       name: 'pay',

www/webapp/scg/src/store.js

@@ -3,8 +3,9 @@ import Vuex from 'vuex';
 import http from 'api';
 import ApiSetting from 'lib/baseUrl';
 import userID from 'lib/userID';
-import ifDev from 'lib/ifDev';
+import isDev from 'lib/isDev';
 import Name from 'lib/name';
+import product from 'lib/product';
 import {
   createAPI, Dialog
 } from 'cube-ui';
@@ -17,13 +18,15 @@ Vue.use(Vuex);
 export default new Vuex.Store({
   state: {
     user_id: userID(),
-    ifDev: ifDev(),
+    isDev: isDev(),
     userInfo: {},
     ifLogin: '',
     name: Name,
     addressRouter: {},
     addressInformation: {},
-    order: {}
+    order: {},
+    product: {},
+    productList: {}
   },
   getters: {
     getUserInfo: state => state.userInfo,
@@ -48,8 +51,49 @@ export default new Vuex.Store({
           } else {
             self.ifLogin = true;
           }
+        })
+        .then(() => {
+          console.log('准备获取商品列表');
+          self.productList = product.data.products;
+          // http(ApiSetting.getProductList)
+          //   .then(res => {
+          //     console.log(res);
+          //     const products = {};
+          //     res.products.forEach((key, i) => {
+          //       products[i] = key;
+          //       products[i].pics.forEach((p, index) => {
+          //         // products[i].pics[index] = products[i].pics[index].url.replace(/oduj3utzz\.bkt\.clouddn\.com/, 'icon.yiguanjia.me');
+          //         products[i].pics[index].url = products[i].pics[index].url.replace(/oduj3utzz\.bkt\.clouddn\.com/, 'icon.yiguanjia.me');
+          //       });
+          //     });
+          //     self.productList = products;
+          //   });
         });
     },
+    addOrder(state) {
+      console.log(state.order);
+      console.log(state.userInfo);
+      console.log(state.product);
+      /* http(ApiSetting.addOrder,{
+        balance: state.userInfo.balance,
+        products: JSON.stringify({
+          product_id:state.product.id.
+          count: state.order.num
+        }),
+        memo: this.order.remarks!==undefined?this.order.remarks:'',
+        precedence: '0',
+        booking_time: this.bookingDate + ' ' + this.bookingTime + ':00',
+        address_id: this.order.address.address_id,
+        coupons: JSON.stringify(coupons),
+        station: this.stationID,
+        type: this.productType,
+        counts: this.productCount,
+        extra: extraJson,
+        tech_id: this.beautician.id,
+        user_id: userID,
+        order_channel: channel
+      }) */
+    },
     addAddress(state) {
       console.log(state);
       const that = state;
@@ -130,6 +174,9 @@ export default new Vuex.Store({
     },
     pay({ commit }) {
       commit('pay');
+    },
+    addOrder({ commit }) {
+      commit('addOrder');
     }
   },
 });

www/webapp/scg/src/views/address/index.vue

@@ -2,7 +2,7 @@
   <div class="address-wrapper" v-if="userInfo && userInfo.shop_address">
     <div class="row">
       <cube-scroll ref="scroll">
-        <div class="address" v-for="(item,index) in userInfo.shop_address" :key="index" @click="select">
+        <div class="address" v-for="(item,index) in userInfo.shop_address" :key="index" @click="select(item)">
           <div class="left">
             <div class="header">
               <span class="user-name">{{item.name}}</span>
@@ -42,13 +42,15 @@
       hEdit
     },
     methods: {
-      select() {
+      select(address) {
         if (this.addressRouter.from === null) {
           this.$router.push({ name: 'mine' });
           return;
         }
-        console.log(this.addressRouter);
-        this.$router.push({ name: this.addressRouter.from });
+        this.$store.state.order.address = address;
+        // console.log(this.addressRouter);
+        // this.$router.push({ name: this.addressRouter.from });
+        this.$router.go(-1);
       },
       edit(address) {
         const userAddress = address;

www/webapp/scg/src/views/home/list.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="list-box">
-    <div v-for="(item, index) in productIcon" :key="index" @click="test">
+    <div v-for="(item, index) in productIcon" :key="index" @click="toProduct(item)">
       <div class="icon">
         <img :src="item.url" :alt="item.title">
       </div>
@@ -65,11 +65,18 @@
       };
     },
     methods: {
-      test() {
-        // console.log(69);
+      toProduct(info) {
+        Object.keys(this.$store.state.productList)
+          .forEach(key => {
+            if (this.$store.state.productList[key].name === info.title) {
+              this.$store.state.product = this.$store.state.productList[key];
+            }
+          });
+        // console.log(this.$store.state.product);
+        this.$store.state.order = {};
+        this.$router.push({ name: 'product' });
       }
     }
-
   };
 </script>
 <style lang="stylus" scoped>
@@ -81,11 +88,9 @@
     grid-column-gap len
     grid-row-gap len
     padding-bottom: 70px
-
     & > div
       .icon > img
         width 100%
-
       .title
         margin-top: 5px
 </style>

www/webapp/scg/src/views/order/addOrder.vue

@@ -0,0 +1,452 @@
+<template>
+  <div class="add-order-wrapper" v-if="product !== ''">
+    <h-header :title="title"></h-header>
+    <div class="row">
+      <img :src="product.pics[0].url" alt="">
+      <div class="extra-wrapper">
+        <div v-if="product.extra.length > 0" v-for="(extra, index) in product.extra" @click="selectExtra(extra,index)" :class="{'active':active.index === index}" class="extra">
+          {{extra.type}}
+        </div>
+      </div>
+      <!--   options   -->
+      <div class="option-wrapper">
+        <!--    选择数量    -->
+        <div class="cell border-top-1px">
+          <div class="title">
+            选择数量
+          </div>
+          <div class="content one">
+            <cube-button @click="cut" :inline="true" :outline="true">-</cube-button>
+            <cube-input class="border-top-1px border-bottom-1px" type="number" @blur="blur" v-model="num"></cube-input>
+            <cube-button @click="add" :inline="true" :outline="true">+</cube-button>
+          </div>
+        </div>
+        <!--    服务时间    -->
+        <div class="cell border-top-1px">
+
+          <div class="title">
+            服务时间
+          </div>
+          <div class="content" @click="showDatePicker">
+            {{time.text}}<i class="cubeic-arrow"></i>
+          </div>
+        </div>
+        <!--    服务地址    -->
+        <div class="cell border-top-1px">
+          <div class="title">
+            选择地址
+          </div>
+          <div class="content two" @click="selectAddress">
+            <div class="address-wrapper">
+              <div class="address" v-if="address !==''">
+                <p><span>{{order.name}}</span><span>{{address.mobile}}</span></p>
+                <p><span>{{address.address.city}}</span><span>{{address.address.area}}</span><span>{{address.address.detail}}</span></p>
+              </div>
+              <span v-else>请选择服务地址</span>
+              <i class="cubeic-arrow"></i>
+            </div>
+          </div>
+        </div>
+        <!--    备注    -->
+        <div class="cell border-top-1px">
+          <div class="title">
+            备注：
+          </div>
+          <div class="content">
+            <cube-input placeholder="可填写附加内容" v-model="remarks"></cube-input>
+          </div>
+        </div>
+        <!--    服务协议    -->
+        <!--        <div class="cell border-top-1px">-->
+        <!--          <div class="title">-->
+        <!--            协议：-->
+        <!--          </div>-->
+        <!--          <div class="content">-->
+
+        <!--          </div>-->
+        <!--        </div>-->
+      </div>
+    </div>
+    <div class="btn-wrapper border-top-1px">
+      <div class="order-amount">
+        费用总计：<span>{{price}}</span>
+      </div>
+      <cube-button :primary="true" @click="addOrder">立即下单</cube-button>
+    </div>
+  </div>
+</template>
+<script>
+  import http from 'api';
+  import ApiSetting from 'lib/baseUrl';
+
+  export default {
+    name: 'addOrder',
+    data() {
+      return {
+        title: '',
+        product: '',
+        active: {
+          index: -1,
+          extra: ''
+        },
+        order: {},
+        time: {
+          text: '',
+          other: {
+            date: '',
+            selectedVal: '',
+            selectedText: '',
+          }
+        },
+        address: '',
+        num: 0,
+        remarks: '',
+        price: 0
+      };
+    },
+    created() {
+      if (JSON.stringify(this.$store.state.product) === '{}') {
+        this.$router.go(-2);
+      } else {
+        this.product = this.$store.state.product;
+        this.title = this.product.name;
+        this.init();
+      }
+    },
+    watch: {
+      active: {
+        // eslint-disable-next-line
+        handler: function (val, old) {
+          this.price = this.num * window.Number.parseInt(this.active.extra.price);
+          this.order.active = this.active;
+        },
+        deep: true
+      },
+      // eslint-disable-next-line
+      num: function (val, old) {
+        if (val < 0) {
+          this.num = 0;
+        }
+        this.order.num = val;
+        if (this.active.extra !== '') {
+          this.price = this.num * window.Number.parseInt(this.active.extra.price);
+        }
+      },
+      time: {
+        // eslint-disable-next-line
+        handler: function (val, old) {
+          if (val !== '') {
+            this.order.time = val;
+          }
+        },
+        deep: true
+      },
+      // eslint-disable-next-line
+      remarks: function (val, old) {
+        this.order.remarks = val;
+      },
+      order: {
+        // eslint-disable-next-line
+        handler: function (val, oldVal) {
+          this.$store.state.order = this.order;
+        },
+        deep: true
+      }
+    },
+    methods: {
+      selectExtra(extra, index) {
+        this.active.index = index;
+        this.active.extra = extra;
+      },
+      selectAddress() {
+        this.$router.push({ name: 'address' });
+      },
+      // 页面跳转之后数据绑定
+      init() {
+        this.order = this.$store.state.order;
+        if (JSON.stringify(this.order) !== '{}') {
+          // active
+          if (this.order.active !== undefined) {
+            this.active = this.order.active;
+          }
+          // num
+          if (this.order.num !== undefined) {
+            this.num = this.order.num;
+          }
+          // time
+          this.time = this.order.time;
+          // address
+          if (this.order.address !== undefined) {
+            this.address = this.order.address;
+          }
+          // remarks
+          this.remarks = this.order.remarks;
+        }
+        // 放置初始化最底层
+        if (this.time.text === '') {
+          this.time.text = '请选择上门服务时间';
+        }
+      },
+      add() {
+        this.num += 1;
+      },
+      cut() {
+        this.num -= 1;
+      },
+      blur() {
+        console.log(this.num);
+        if (this.num < 0 || this.num === '') {
+          this.num = 0;
+        }
+      },
+      // 立即下单
+      addOrder() {
+        if (this.orderTest()) {
+          // 检测用户地址是否在服务范围内
+          http(ApiSetting.checkAddress, {
+            user_id: this.$store.state.userInfo.id,
+            address_id: this.order.address.address_id
+          })
+            .then(res => {
+              this.$store.state.order.station = res.station;
+              const state = this.$store.state;
+              console.log(state.order);
+              console.log(state.userInfo);
+              console.log(state.product);
+              const json = {
+                balance: state.userInfo.balance,
+                products: JSON.stringify({
+                  product_id: state.product.id,
+                  count: state.order.num
+                }),
+                memo: state.order.remarks !== undefined ? state.order.remarks : '',
+                precedence: '0',
+                booking_time: `${state.order.time.other.selectedVal[0]}-${state.order.time.other.selectedVal[1]}-${state.order.time.other.selectedVal[2]} ${state.order.time.other.selectedVal[3] === 9 ? '09' : state.order.time.other.selectedVal[3]}:00`,
+                address_id: state.order.address.address_id,
+                station: state.order.station,
+                type: state.product.type
+              };
+              console.log(json);
+            });
+          /* {
+        balance: state.userInfo.balance,
+        products: JSON.stringify({
+          product_id:state.product.id.
+          count: state.order.num
+        }),
+        memo: this.order.remarks!==undefined?this.order.remarks:'',
+        precedence: '0',
+        booking_time: this.bookingDate + ' ' + this.bookingTime + ':00',
+        address_id: this.order.address.address_id,
+        coupons: JSON.stringify(coupons),
+        station: this.stationID,
+        type: this.productType,
+        counts: this.productCount,
+        extra: extraJson,
+        tech_id: this.beautician.id,
+        user_id: userID,
+        order_channel: channel
+      } */
+          // this.$store.dispatch('addOrder');
+        }
+      },
+      // 选择时间
+      showDatePicker() {
+        // 当前日期加2天
+        const minD = new Date();
+        // eslint-disable-next-line
+        minD.setTime(minD.getTime() + 24 * 2 * 60 * 60 * 1000);
+        const maxD = new Date();
+        // eslint-disable-next-line
+        maxD.setTime(maxD.getTime() + 24 * 32 * 60 * 60 * 1000);
+        if (!this.datePicker) {
+          this.datePicker = this.$createDatePicker({
+            title: '服务时间',
+            min: new Date(minD.getFullYear(), minD.getMonth(), minD.getDate()),
+            max: new Date(maxD.getFullYear(), maxD.getMonth(), maxD.getDate()),
+            value: new Date(),
+            format: {
+              year: 'YYYY年',
+              month: 'MM月',
+              date: 'D日',
+              hour: 'h点',
+              minute: 'mm分'
+            },
+            columnCount: 4,
+            onSelect: this.selectHandle,
+            onCancel: this.cancelHandle
+          });
+        }
+        this.datePicker.show();
+      },
+      // eslint-disable-next-line
+      selectHandle(date, selectedVal, selectedText) {
+        console.log(selectedVal[3]);
+        if (selectedVal[3] < 9 || selectedVal[3] > 18) {
+          this.$createDialog({
+            type: 'alert',
+            title: '抱歉',
+            content: '我们的服务时间为早上9点到晚上7点，其他时间段暂不提供服务！',
+            time: 2500
+          })
+            .show();
+          return;
+        }
+        this.time.text = `${selectedText[0]}${selectedText[1]}${selectedText[2]}${selectedText[3]}`;
+        this.time.other.date = date;
+        this.time.other.selectedVal = selectedVal;
+        this.time.other.selectedText = selectedText;
+      },
+      cancelHandle() {
+        this.$createToast({
+          type: 'correct',
+          txt: '取消时间选择',
+          time: 1000
+        })
+          .show();
+      },
+      // 订单检测
+      orderTest() {
+        // 判断服务是否选择
+        if (this.product.extra.length > 0 && this.active.index < 0) {
+          this.$createDialog({
+            type: 'alert',
+            title: '抱歉',
+            content: '你还没有选择服务类型！',
+            time: 2500
+          })
+            .show();
+          return false;
+        }
+        // 商品数量不为0
+        if (this.num === 0) {
+          this.$createDialog({
+            type: 'alert',
+            title: '抱歉',
+            content: '你还没有选择服务数量！',
+            time: 2500
+          })
+            .show();
+          return false;
+        }
+        // 时间必选
+        if (this.time.text === '请选择上门服务时间') {
+          this.$createDialog({
+            type: 'alert',
+            title: '抱歉',
+            content: '请选择上门服务时间！',
+            time: 2500
+          })
+            .show();
+          return false;
+        }
+        // 地址不为空
+        if (this.address === '') {
+          this.$createDialog({
+            type: 'alert',
+            title: '抱歉',
+            content: '您还没有选择地址',
+            time: 2500
+          })
+            .show();
+          return false;
+        }
+        return true;
+      }
+    }
+  };
+</script>
+<style lang="stylus">
+  .add-order-wrapper
+    height: 60vh
+    .row
+      height calc(100vh - 94px)
+      overflow scroll
+      .extra-wrapper
+        display grid
+        padding: 10px 20px
+        grid-template-columns repeat(2, 1fr)
+        .extra
+          flex 1
+          padding: 8px
+          font-size otherSize
+          transition-duration: 300ms;
+          color #929292
+          margin: 5px 20px
+          border: 1px solid #000;
+          &.active
+            background-color black
+            color #fff
+      .option-wrapper
+        .cell
+          font-size h3
+          display flex
+          padding 15px 25px
+          i.cubeic-arrow
+          .title
+            flex 0 0 80px
+            text-align left
+          .content
+            flex 1
+            text-align right
+            &.one
+              display flex
+              justify-content flex-end
+              .cube-input
+                height h3
+                width: h1
+                input
+                  text-align center
+                  padding: 0
+              button
+                padding 0 5px
+                height: h3
+                width: h3
+            &.two
+              display flex
+              justify-content flex-end
+              i.cubeic-arrow
+                line-height 1
+                flex 0 0 20px
+            .address-wrapper
+              flex 1
+              display flex
+              justify-content flex-end
+              .address
+                flex 1
+                p
+                  font-size inputTitle
+                  span
+                    margin-right: 5px
+                  &:nth-child(2)
+                    padding-top: 5px
+                    font-size inputSize
+                    span:nth-child(3)
+                      display inline-block
+                      width 80px
+                      text-align left
+                      vertical-align bottom
+                      overflow: hidden;
+                      white-space: nowrap;
+                      text-overflow: ellipsis;
+              i.cubeic-arrow
+                flex 0 0 20px
+      img
+        display block
+        width: 100%
+    .btn-wrapper
+      position fixed
+      display flex
+      bottom: 0
+      right: 0
+      left: 0
+      .order-amount
+        flex 1
+        line-height 20px
+        text-align left
+        padding: 15px
+        span
+          color red
+      button
+        flex 0 0 150px
+</style>

www/webapp/scg/src/views/order/detail.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="order-detail-wrapper" v-if="order!==''">
+    <h-header title="订单详情"></h-header>
+    <div class="row border-bottom-1px border-top-1px">
+      <div class="detail">
+        <div class="title">订单状态</div>
+        <div class="content">{{order.status_str}}</div>
+      </div>
+      <div class="detail">
+        <div class="title">订单编号</div>
+        <div class="content">{{order.order_num}}</div>
+      </div>
+      <div class="detail">
+        <div class="title">服务地点</div>
+        <div class="content">{{order.address.city + '&nbsp;' + order.address.area + '&nbsp;' + order.address.poi.name + '&nbsp;' + order.address.detail}}</div>
+      </div>
+      <div class="detail">
+        <div class="title">联系电话</div>
+        <div class="content">{{order.address.mobile}}</div>
+      </div>
+      <div class="detail">
+        <div class="title">预约时间</div>
+        <div class="content">{{order.booking_time_str}}</div>
+      </div>
+      <div class="detail">
+        <div class="title">下单时间</div>
+        <div class="content">{{order.order_time_str}}</div>
+      </div>
+      <div class="detail" v-if="order.status < 0 && order.cancel_time_str !==''">
+        <div class="title">取消时间</div>
+        <div class="content">{{order.cancel_time_str}}</div>
+      </div>
+      <div class="detail" v-if="order.status===6">
+        <div class="title">完成时间</div>
+        <div class="content">{{order.finish_time_str}}</div>
+      </div>
+    </div>
+    <div class="row border-bottom-1px border-top-1px" v-if="order.status > -1">
+      <div class="cell border-bottom-1px">
+        <div class="title">订单明细</div>
+        <div class="content"></div>
+      </div>
+      <div class="cell border-bottom-1px">
+        <div class="title">{{order.products_str + ' x' + order.counts}}</div>
+        <div class="content"></div>
+      </div>
+      <div class="cell border-bottom-1px">
+        <div class="title">总价</div>
+        <div class="content">{{order.price}}</div>
+      </div>
+      <div class="cell border-bottom-1px">
+        <div class="title">订单状态</div>
+        <div class="content">{{order.status_str}}</div>
+      </div>
+      <div class="cell" v-if="order.status>0">
+        <div class="title">支付方式</div>
+        <div class="content">微信</div>
+      </div>
+      <div class="cell">
+        <div class="title">订单备注</div>
+        <div class="content">{{order.memo}}</div>
+      </div>
+      <div class="cell">
+        <div class="title"></div>
+        <div class="content">
+          <cube-button v-if="order.status===0" @click="del" :outline="true">取消订单</cube-button>
+          <cube-button v-if="order.status===0" @click="pay" :primary="true">立即支付</cube-button>
+          <cube-button v-if="order.status === 1 || order.status === 2 || order.status === 3 || order.status === 4 || order.status === 5" :primary="true">确认完成</cube-button>
+          <cube-button v-if="order.have_comment === 0 && order.status === 6" :primary="true">立即评价</cube-button>
+          <cube-button v-if="order.have_comment === 1 && order.status === 6" :disabled="true">已评价</cube-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'orderInfo',
+    data() {
+      return {
+        order: ''
+      };
+    },
+    created() {
+      if (JSON.stringify(this.$store.state.order) === '{}') {
+        this.$router.push({ name: 'order' });
+      }
+      this.order = this.$store.state.order;
+      console.log(this.order);
+    },
+    methods: {
+      del() {
+        console.log(this.order);
+      },
+      pay() {
+        this.$store.state.order = this.order;
+        this.$router.push({ name: 'pay' });
+      },
+    }
+  };
+</script>
+<style lang="stylus">
+  .order-detail-wrapper
+    .row
+      padding: 10px
+      margin-top: 15px
+      &:nth-child(1)
+        background-color #42b983
+      .detail
+        margin-bottom 10px
+        display flex
+        padding: 0 15px
+        .title
+          flex 0 0 80px
+          text-align left
+        .content
+          flex 1
+          text-align right
+      .cell
+        display flex
+        justify-content space-between
+        padding: 10px
+        margin-bottom 5px
+        .title
+          font-size h3
+          text-align left
+          flex 0 0 120px
+        .content
+          flex 1
+          display flex
+          justify-content flex-end
+          button
+            padding: 8px
+            width 70px
+            font-size otherSize
+            &:nth-child(1)
+              margin-right: 5px
+</style>

www/webapp/scg/src/views/order/index.vue

@@ -9,7 +9,7 @@
         <div class="orders">
           <cube-scroll
             ref="scroll">
-            <div v-if="item.data.length>0" :class="item.data, index| border" v-for="(order,index) in item.data" :key="order.id">
+            <div @click.stop="orderDetail(order)" v-if="item.data.length>0" :class="item.data, index| border" v-for="(order,index) in item.data" :key="order.id">
               <i class="cubeic-arrow"></i>
               <div class="row">
                 <div class="order-header border-bottom-1px">
@@ -39,8 +39,8 @@
                 </div>
                 <div class="order-footer" v-if="item.label !== '已取消'">
                   <div class="control one" v-if="order.status===0">
-                    <cube-button :outline="true">取消订单</cube-button>
-                    <cube-button @click="pay(order)" :primary="true">立即支付</cube-button>
+                    <cube-button @click.stop='del(order)' :outline="true">取消订单</cube-button>
+                    <cube-button @click.stop="pay(order)" :primary="true">立即支付</cube-button>
                   </div>
                   <div class="control two" v-if="order.status === 1 || order.status === 2 || order.status === 3 || order.status === 4 || order.status === 5">
                     <cube-button :primary="true">确认完成</cube-button>
@@ -83,6 +83,9 @@
     },
     mounted() {
       this.$nextTick(() => {
+        if (this.$store.state.order.selectedLabel) {
+          this.selectedLabel = this.$store.state.order.selectedLabel;
+        }
         this.getOrderList();
       });
     },
@@ -102,7 +105,12 @@
         // if you clicked home tab, then print 'Home'
         this.getOrderList(label);
       },
-      getOrderList(label) {
+      getOrderList(l) {
+        let label = l;
+        if (label === undefined && this.selectedLabel !== '') {
+          label = this.selectedLabel;
+        }
+        console.log(label);
         let status = 1;
         let index = 0;
         // eslint-disable-next-line
@@ -110,14 +118,17 @@
           case '预约中':
             status = 1;
             index = 0;
+            this.selectedLabel = '预约中';
             break;
           case '已完成':
             status = 3;
             index = 1;
+            this.selectedLabel = '已完成';
             break;
           case '已取消':
             status = 2;
             index = 2;
+            this.selectedLabel = '已取消';
         }
         http(ApiSetting.GetOrderList, {
           user_id: this.$store.state.user_id,
@@ -125,16 +136,20 @@
           page: 1
         })
           .then(res => {
-            // console.log(status - 1);
-            if (res.length > 0 && status === 2) {
-              console.log(res[0].order_time_str);
-            }
             this.$nextTick(() => {
               this.tabs[index].data = res;
               this.refresh();
             });
           });
       },
+      orderDetail(order) {
+        this.$store.state.order = order;
+        this.$store.state.order.selectedLabel = this.selectedLabel;
+        this.$router.push({ name: 'orderDetail' });
+      },
+      del(order) {
+        console.log(order);
+      },
       pay(order) {
         this.$store.state.order = order;
         this.$router.push({ name: 'pay' });

www/webapp/scg/src/views/pay/index.vue

@@ -21,15 +21,15 @@
     },
     methods: {
       pay() {
-        let payInfo = {
-          user_id: config.userId,
-          order_id: this.$route.query.orderInfo.id,
-          pay_channel: 'wx_pub'
-        };
-        axios.post('o2o/order/pay', qs.stringify(payInfo))
-          .then(res => {
-            this.pay(res, payInfo.order_id, this.$route.query.orderInfo);
-          });
+        // let payInfo = {
+        //   user_id: config.userId,
+        //   order_id: this.$route.query.orderInfo.id,
+        //   pay_channel: 'wx_pub'
+        // };
+        // axios.post('o2o/order/pay', qs.stringify(payInfo))
+        //   .then(res => {
+        //     this.pay(res, payInfo.order_id, this.$route.query.orderInfo);
+        //   });
       }
     }
   };

www/webapp/scg/src/views/product/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="product-wrapper" v-if="product!==''">
+    <h-header :title="title"></h-header>
+    <div class="row">
+      <cube-scroll ref="scroll">
+        <img ref="img" v-for="(item,index) in product.pics" v-if="index > 0" :key="index" :src="item.url" alt="">
+      </cube-scroll>
+    </div>
+    <div class="btn-wrapper">
+      <cube-button :primary="true" @click="addOrder">立即下单</cube-button>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'product',
+    data() {
+      return {
+        product: '',
+        title: ''
+      };
+    },
+    created() {
+      if (JSON.stringify(this.$store.state.product) === '{}') {
+        this.$router.go(-1);
+      } else {
+        this.product = this.$store.state.product;
+        console.log(this.product);
+        this.title = this.product.name;
+      }
+    },
+    mounted() {
+      const that = this;
+      // 监听所有图片加载完成之后 ==>
+      if (that.product !== '') {
+        let i = 0;
+        that.$refs.img.forEach(k => {
+          const key = k;
+          key.onload = () => {
+            if (i === that.$refs.img.length - 1) {
+              // ==> 刷新，重新计算高度且刷新 BetterScroll 实例
+              that.$refs.scroll.refresh();
+            } else {
+              i += 1;
+            }
+          };
+        });
+      }
+    },
+    methods: {
+      addOrder() {
+        this.$router.push({ name: 'addOrder' });
+      }
+    }
+  };
+</script>
+<style lang="stylus">
+  .product-wrapper
+    .row
+      height calc(100vh - 94px)
+      img
+        width 100%
+        display block
+    .btn-wrapper
+      position fixed
+      bottom: 0
+      left: 0
+      right: 0
+</style>