添加选择地址页面

 import axios from 'axios';
 import config from 'config';
-import {sign} from './utils';
+import {
+  sign
+} from './utils';
 
 axios.defaults.baseURL = config.axiosBaseUrl;
 axios.defaults.responseType = config.axiosResponseType;
@@ -20,7 +22,9 @@ const request = (options, store) => {
 
   return axios(options).then((res) => {
     if (res.data.code === 401) {
-      store && store.commit('needLogin', {needLogin: true});
+      store && store.commit('needLogin', {
+        needLogin: true
+      });
       return Promise.reject(res.data);
     }
     return res.data;

@@ -6,13 +6,20 @@ const yohoApi = global.yoho.API;
 const ufoAPI = global.yoho.UfoAPI;
 const serviceApi = global.yoho.ServiceAPI;
 
-
 const checkApiMap = url => {
   return apiMaps[url] ? apiMaps[url] : void 0;
 };
-const request = async({url, method, reqParams = {}, context}) => {
+const request = async ({
+  url,
+  method,
+  reqParams = {},
+  context
+}) => {
   const apiInfo = checkApiMap(url);
-  const {env, user} = context;
+  const {
+    env,
+    user
+  } = context;
 
   if (!apiInfo) {
     return Promise.reject(new Error(`未找到对应的接口:${url}`));
@@ -25,7 +32,7 @@ const request = async({url, method, reqParams = {}, context}) => {
         },
         sessionKey: user.sessionKey,
         appSessionType: user.appSessionType
-      } : 1,
+      } : void 0,
       method: apiInfo.api,
     });
   }
@@ -76,10 +83,20 @@ const catchError = (context, reqParams) => {
 export const createApi = context => {
   return {
     get(url, reqParams = {}) {
-      return request({url, method: 'get', reqParams, context}).then(catchError(context, reqParams));
+      return request({
+        url,
+        method: 'get',
+        reqParams,
+        context
+      }).then(catchError(context, reqParams));
     },
     post(url, reqParams = {}) {
-      return request({url, method: 'post', reqParams, context}).then(catchError(context, reqParams));
+      return request({
+        url,
+        method: 'post',
+        reqParams,
+        context
+      }).then(catchError(context, reqParams));
     }
   };
 };

+<template>
+  <LayoutApp title="选择地址" :show-back="true">
+    <AddressItem :list="list"></AddressItem>
+  </LayoutApp>
+</template>
+
+<script>
+import Layout from "../../components/layout/layout-app";
+import RadioGroup from "./components/radio-group";
+import AddressItem from "./components/address-item";
+import axios from "axios";
+
+import { createNamespacedHelpers } from "vuex";
+const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
+  "address/address"
+);
+
+export default {
+  name: "addressManager",
+  components: {
+    LayoutApp: Layout,
+    RadioGroup,
+    AddressItem
+  },
+  data() {
+    return {
+      list: [{ name: "hahaha" }, { name: "hahaha" }]
+    };
+  },
+  computed: {
+    ...mapState(["addressList"])
+  },
+  methods: {
+    ...mapMutations({}),
+    ...mapActions(["fetchUserAddressList"])
+  },
+  mounted() {
+    this.fetchUserAddressList();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.body {
+  height: 100%;
+  background-color: #e0e0e0;
+  overflow-y: auto;
+}
+
+.address-container {
+  margin-bottom: 120px;
+}
+
+.addNew {
+  display: block;
+  height: 80px;
+  margin-top: 20px;
+  background-color: white;
+}
+
+.newText {
+  line-height: 80px;
+  font-size: 28px;
+  letter-spacing: 0.6px;
+  white-space: nowrap;
+  text-align: center;
+}
+</style>

+<template>
+  <CubeScroll class="main-container" ref="scroll" :options="scrollOpts">
+    <div class="user-list">
+      <div v-for="(item, index) in list" :key="index" class="item" @click="toOrderPage(item)">
+        <slot name="item" :data="item">
+          <div class="user-item">
+            <div class="user-info">
+              <div class="extra">
+                <p class="name">WUNA</p>
+                <p class="mobile">183****8888</p>
+                <div class="tag-btn">默认</div>
+                <div class="option-btn" :data-item="item" :data-add="false" @click="toEditorPage">编辑</div>
+              </div>
+              <p class="address">江苏省 南京市 建邺区 江陵江东街 国家广告产业园5栋17楼新与力传媒</p>
+              <div class="border-line"></div>
+            </div>
+          </div>
+        </slot>
+      </div>
+    </div>
+
+    <div class="add-btn" :data-add="true" @click="toEditorPage">添加地址</div>
+  </CubeScroll>
+</template>
+
+<script>
+import { get } from "lodash";
+import { Scroll, Loading } from "cube-ui";
+
+export default {
+  props: {
+    list: {
+      type: Array,
+      default: function() {
+        return [];
+      }
+    }
+  },
+  data() {
+    return {
+      scrollOpts: {
+        bounce: false
+      }
+    };
+  },
+  methods: {
+    toOrderPage(item) {
+      console.log("toOrderPage");
+      // this.$router.push({
+      //   name: "author",
+      //   params: {
+      //     id: item.userId,
+      //     type: item.userType || 1
+      //   }
+      // });
+    },
+    toEditorPage(event) {
+      event.stopPropagation();
+      let isAdd = event.currentTarget.dataset.add;
+      let item = event.currentTarget.dataset.item || {};
+
+      if (isAdd) {
+        console.log("toAddPage");
+      } else {
+        console.log("toEditorPage");
+      }
+    }
+  },
+  components: {
+    CubeScroll: Scroll
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+/deep/ {
+  .cube-scroll-content {
+    min-height: 100%;
+  }
+
+  .cube-scroll-list-wrapper {
+    overflow: auto;
+  }
+
+  .cube-loading-spinners {
+    margin: auto;
+  }
+}
+
+.user-list {
+  background-color: white;
+
+  .border-line {
+    height: 1px;
+    margin-top: 40px;
+    background-color: #e0e0e0;
+  }
+}
+
+.user-item {
+  display: flex;
+  padding-top: 40px;
+  padding-left: 40px;
+  padding-right: 40px;
+  align-items: center;
+
+  .user-info {
+    flex-grow: 1;
+    overflow: hidden;
+  }
+
+  .extra {
+    display: flex;
+    flex-direction: row;
+
+    .name {
+      font-size: 32px;
+      font-weight: 400;
+      color: #000000;
+      line-height: 44px;
+    }
+
+    .mobile {
+      display: block;
+      margin-left: 20px;
+      font-size: 32px;
+      font-weight: 400;
+      color: #000000;
+      line-height: 44px;
+    }
+
+    .tag-btn {
+      width: 80px;
+      line-height: 44px;
+      font-size: 22px;
+      text-align: center;
+      background-color: #002b47;
+      margin-left: 18px;
+      color: white;
+    }
+
+    .option-btn {
+      display: block;
+      width: 48px;
+      line-height: 44px;
+      letter-spacing: -0.29;
+      color: black;
+      font-size: 24px;
+      position: absolute;
+      right: 40px;
+    }
+  }
+
+  .address {
+    width: 100%;
+    font-size: 22px;
+    line-height: 1.4;
+    margin-top: 16px;
+    color: #b0b0b0;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+}
+
+.add-btn {
+  height: 100px;
+  line-height: 100px;
+  font-size: 32px;
+  text-align: center;
+  background-color: #002b47;
+  color: white;
+  position: absolute;
+  left: 40px;
+  right: 40px;
+  bottom: 40px;
+}
+</style>

+<template>
+  <div class="radio-group">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Radio-Group',
+  props: {
+    value: {
+      type: [String, Number]
+    }
+  },
+  data() {
+    return {
+      labelList: []
+    };
+  },
+  methods: {
+    getLabels() {
+      return this.$children.forEach(i => i.$options.name === 'Radio');
+    },
+    updateLabel() {
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.radio-group {
+  display: flex;
+}
+</style>

+export default [{
+  name: 'address',
+  path: '/xianyu/address',
+  component: () => import('./address')
+}];

@@ -3,5 +3,6 @@ import Common from './common';
 import List from './list';
 import Product from './product';
 import Home from './home';
+import Address from './address';
 
-export default [...Order, ...Common, ...List, ...Product, ...Home];
+export default [...Order, ...Common, ...List, ...Product, ...Home, ...Address];

+import * as Types from './types';
+import {
+  get
+} from 'lodash';
+
+export default {
+  // 获取用户地址列表
+  async fetchUserAddressList({
+    commit
+  }) {
+    const result = await this.$api.get('/api/address/gethidden', {
+      uid: '500031912',
+    });
+
+    console.log('----------', result.data);
+    if (result.code === 200) {
+      commit(Types.FETCH_USER_ADDRESS_LIST, {
+        list: get(result, 'data', [])
+      });
+    }
+  },
+
+  // 获取地址标签
+  async fetchAddressTags({
+    commit
+  }) {
+    const result = await this.$api.get('/api/address/getTags');
+
+    if (result.code === 200) {
+      commit(Types.FETCH_ADDRESS_TAGS, {
+        list: get(result, 'data', [])
+      });
+    }
+  },
+
+  async fetchAddressProvinces({
+    commit
+  }) {
+    const result = await this.$api.get('/api/address/getProvinces');
+
+    if (result.code === 200) {
+      commit(Types.FETCH_ADDRESS_PROVINCES, {
+        list: get(result, 'data', [])
+      });
+    }
+  },
+
+  // 设置默认地址, post请求
+  async setDefaultAddress({
+    commit
+  }) {
+    const result = await this.$api.post('/api/address/setDefaultAddress');
+
+    if (result.code === 200) {
+      commit(Types.SET_DEFAULT_ADDRESS);
+    }
+
+    return result || {};
+  },
+
+  // 添加、更新、删除地址，post请求
+  async addUserAddress({
+    commit
+  }, {
+    uid
+  }) {
+    const result = await this.$api.post('/api/address/addAddress', {
+      uid
+    });
+
+    if (result.code === 200) {
+      commit(Types.ADD_USER_ADDRESS_INFO);
+    }
+
+    return result || {};
+  },
+
+  async updateUserAddress({
+    commit
+  }) {
+    const result = await this.$api.post('/api/address/updateAddress');
+
+    if (result.code === 200) {
+      commit(Types.UPDATE_USER_ADDRESS_INFO);
+    }
+
+    return result || {};
+  },
+
+  async deleteUserAddress({
+    commit
+  }) {
+    const result = await this.$api.post('/api/address/delAddress');
+
+    if (result.code === 200) {
+      commit(Types.DELETE_USER_ADDRESS_INFO);
+    }
+
+    return result || {};
+  },
+};

+import actions from './actions';
+import mutations from './mutations';
+
+export default function () {
+  return {
+    namespaced: true,
+    state: {
+      addressList: [],
+      addressTags: [],
+      provincesList: [],
+    },
+    actions,
+    mutations,
+  };
+}

+import * as Types from './types';
+
+export default {
+  [Types.FETCH_USER_ADDRESS_LIST](state, {
+    list
+  }) {
+    state.addressList = list;
+  },
+  [Types.FETCH_ADDRESS_TAGS](state, {
+    list
+  }) {
+    state.addressTags = list;
+  },
+  [Types.FETCH_ADDRESS_PROVINCES](state, {
+    list
+  }) {
+    state.provincesList = list;
+  },
+};

+export const FETCH_USER_ADDRESS_LIST = 'FETCH_USER_ADDRESS_LIST';
+export const FETCH_ADDRESS_TAGS = 'FETCH_ADDRESS_TAGS';
+
+export const ADD_USER_ADDRESS_INFO = 'ADD_USER_ADDRESS_INFO';
+export const UPDATE_USER_ADDRESS_INFO = 'UPDATE_USER_ADDRESS_INFO';
+export const DELETE_USER_ADDRESS_INFO = 'DELETE_USER_ADDRESS_INFO';
+
+export const FETCH_ADDRESS_PROVINCES = 'FETCH_ADDRESS_PROVINCES';
+
+export const SET_DEFAULT_ADDRESS = 'SET_DEFAULT_ADDRESS';

+import address from './address';
+
+export default function () {
+  return {
+    namespaced: true,
+    modules: {
+      address: address()
+    }
+  };
+}

 import Vue from 'vue';
 import Vuex from 'vuex';
-import {createApi} from 'create-api';
+import {
+  createApi
+} from 'create-api';
 import storeYoho from './yoho';
-import storeOrder,{ buyerOderList } from './order';
+import storeOrder, {
+  buyerOderList
+} from './order';
 import storeList from './list';
 import storeProduct from './product';
 import storeHome from './home';
-// import storeNotice from '/Notice'
+import storeAddress from './address';
 
 Vue.use(Vuex);
 
@@ -19,6 +23,7 @@ export function createStore(context) {
       list: storeList(),
       produt: storeProduct(),
       home: storeHome(),
+      address: storeAddress(),
       // 买家订单列表
       buyerOderList: buyerOderList(),
       // notice: storeNotice()

+module.exports = {
+  '/api/address/gethidden': {
+    api: 'app.address.gethidden',
+    params: {}
+  },
+  '/api/address/getTags': {
+    api: 'app.address.getTags',
+    params: {}
+  },
+  '/api/address/getProvinces': {
+    api: 'app.address.provinces',
+    params: {}
+  },
+  '/api/address/addAddress': {
+    api: 'app.address.add',
+    params: {}
+  },
+  '/api/address/updateAddress': {
+    api: 'app.address.update',
+    params: {}
+  },
+  '/api/address/delAddress': {
+    api: 'app.address.del',
+    params: {}
+  },
+  '/api/address/setDefaultAddress': {
+    api: 'app.address.setdefault',
+    params: {}
+  },
+
+};

@@ -2,10 +2,12 @@ const orderApi = require('./order-api-map');
 const productApi = require('./product-api-map');
 const listApi = require('./list-api-map');
 const homeApi = require('./home-api-map');
+const addressApi = require('./address-api-map');
 
 module.exports = {
   ...orderApi,
   ...productApi,
   ...listApi,
-  ...homeApi
+  ...homeApi,
+  ...addressApi
 };