安置网络、行政区划、UI调整

.env.staging

@@ -6,6 +6,6 @@ ENV = 'staging'
 # base api
 # VUE_APP_BASE_API = '/stage-api'
 VUE_APP_BASE_API = 'http://16.163.228.151:8022'
-VUE_APP_CDN_API = 'http://16.163.228.151:8024'
+VUE_APP_CDN_API = 'http://16.163.228.151:8036'
 VUE_APP_BASE_PAY_STACK_PUBLIC_KEY = 'pk_test_2eed10135c4a958c5073795b22854ded9d1a6c55'
 VUE_APP_ACCESS_TOKEN_PREFIX = 'Bearer '

src/api/atlas.js

@@ -1,5 +1,32 @@
 import request from '@/utils/request'
 
+// 安置网络-主会员信息
+export function fetchMainUserInfo(query) {
+  return request({
+    url: '/v1/atlas/main-user-info',
+    method: 'get',
+    params: query
+  })
+}
+
+// 安置网络列表
+export function fetchNetworkList(query) {
+  return request({
+    url: '/v1/atlas/network-list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 安置网络
+export function fetchNetwork(query) {
+  return request({
+    url: '/v1/atlas/network',
+    method: 'get',
+    params: query
+  })
+}
+
 // BA会员列表
 export function fetchBrandAmbassadorList(query) {
   return request({

src/lang/en.js

@@ -243,6 +243,7 @@ export default {
     successfully: 'Successfully',
     close: 'Close',
     note: 'Note',
+    awaitData: 'Retrieving data, please wait.',
   },
 
   shop: {
@@ -326,6 +327,15 @@ export default {
     right: 'Right',
     placementAutoLeft: 'Placement Auto Location: L',
     placementAutoRight: 'Placement Auto Location: R',
+    topMember: 'Top Member',
+    spreadDepth: 'Spread Depth',
+    periodNumber: 'Period number',
+    numberLayers: 'Number of Layers',
+    highest: 'Highest',
+    memberCode: 'Member Code',
+    name: 'Name',
+    level: 'Level',
+    location: 'Location',
   },
 
   config: {

src/lang/zh.js

@@ -242,6 +242,7 @@ export default {
     successfully: '成功',
     close: '关闭',
     note: '备注',
+    awaitData: '正在获取数据，请稍后',
   },
   shop: {
     product: '商品',
@@ -323,6 +324,15 @@ export default {
     right: '右区',
     placementAutoLeft: '自动安置在左侧',
     placementAutoRight: '自动安置在右侧',
+    topMember: '顶级会员',
+    spreadDepth: '展开深度',
+    periodNumber: '期数',
+    numberLayers: '层数',
+    highest: '最高',
+    memberCode: '会员编号',
+    name: '姓名',
+    level: '级别',
+    location: '区位',
   },
 
   config: {

src/layout/components/Navbar.vue

@@ -73,7 +73,6 @@ export default {
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar',
       'device'
     ])
   },

src/router/modules/article.js

@@ -7,10 +7,10 @@ const articleRouter = {
   hidden: true,
   children: [
     {
-      path: 'article-list',  // 文章列表
+      path: 'article-list',  // 系统通知
       component: () => import('@/views/article/article-list'),
-      name: 'ArticleList',
-      meta: { title: 'Article List', icon: 'message' }
+      name: 'SystemNotification',
+      meta: { title: 'System Notification', icon: 'message' }
     },
   ]
 }

src/router/modules/atlas.js

@@ -6,6 +6,12 @@ const atlasRouter = {
   redirect: '/atlas/network',
   hidden: true,
   children: [
+    {
+      path: 'network',  // 安置网络
+      component: () => import('@/views/atlas/placement-network'),
+      name: 'network',
+      meta: { title: 'Placement Network', icon: 'user', noCache: true }
+    },
     {
       path: 'brand-ambassador-list',  // BA会员列表
       component: () => import('@/views/atlas/brand-ambassador-list'),

src/store/getters.js

@@ -17,6 +17,5 @@ const getters = {
   decLv: state => state.user.decLv,
   empLv: state => state.user.empLv,
   crownLv: state => state.user.crownLv,
-  regionInfo: state => state.regionInfo,
 }
 export default getters

src/store/modules/region.js

@@ -1,21 +1,14 @@
-// import {backendQuickLogin} from '@/api/user' // TODO: 改为从服务端读取
-import Vuex from 'vuex'
-
-const moduleRegionInfo = {
-  state: {
-    provinceAndCityData: [],
-    regionData: [],
-    provinceAndCityDataPlus: [],
-    regionDataPlus: [],
-    CodeToText: {
-      '': null,
-    },
-    TextToCode: {},
-  }
+const regionInfo = {
+  provinceAndCityData: [],
+  regionData: [],
+  provinceAndCityDataPlus: [],
+  regionDataPlus: [],
+  CodeToText: {
+    '': null,
+  },
+  TextToCode: {},
 }
 
-export default new Vuex.Store({
-  modules: {
-    regionInfo: moduleRegionInfo,
-  }
-})
+export default {
+  regionInfo: regionInfo,
+}

src/utils/region.js

@@ -6,7 +6,7 @@
 // // document.write("<script language='javascript' src='http://upload.ar.wqcms.com/cdn/jsdata/ar_region_data.js?ver=0.1'></script>");
 // require('http://tool.anran.io/cdn/jsdata/ar_region_data.js')
 import importScript from "@/utils/importScript"
-import store from "@/store"
+import regionInfo from "@/store/modules/region";
 
 let regionScriptLoaded = false
 
@@ -17,58 +17,54 @@ const initRegion = function (vueObj) {
     let ANRAN_REGION_DATA = AR_REGION_DATA
 
     // 汉字转code大对象
-    const rootCode = '86'
-
-    // console.log('ANRAN_REGION_DATA', ANRAN_REGION_DATA)
-    // console.log('store.state', store.state)
-    // console.log('store.state.regionInfo', store.state.regionInfo)
-
-    vueObj.$set(store.state.regionInfo.CodeToText, '', '全部')
+    const rootCode = '234'
 
+    vueObj.$set(regionInfo.regionInfo.CodeToText, '', '全部')
     // 计算省
     for (const prop in ANRAN_REGION_DATA[rootCode]) {
-      store.state.regionInfo.regionData.push({
+      regionInfo.regionInfo.regionData.push({
         value: prop,
         label: ANRAN_REGION_DATA[rootCode][prop]
       })
-      store.state.regionInfo.CodeToText[prop] = ANRAN_REGION_DATA[rootCode][prop]
-      store.state.regionInfo.TextToCode[ANRAN_REGION_DATA[rootCode][prop]] = {
+
+      regionInfo.regionInfo.CodeToText[prop] = ANRAN_REGION_DATA[rootCode][prop]
+      regionInfo.regionInfo.TextToCode[ANRAN_REGION_DATA[rootCode][prop]] = {
         code: prop
       }
-      store.state.regionInfo.TextToCode[ANRAN_REGION_DATA[rootCode][prop]]['全部'] = {
+      regionInfo.regionInfo.TextToCode[ANRAN_REGION_DATA[rootCode][prop]]['全部'] = {
         code: ''
       }
     }
 
     // 计算市
-    for (let i = 0, len = store.state.regionInfo.regionData.length; i < len; i++) {
-      const provinceCode = store.state.regionInfo.regionData[i].value
-      const provinceText = store.state.regionInfo.regionData[i].label
+    for (let i = 0, len = regionInfo.regionInfo.regionData.length; i < len; i++) {
+      const provinceCode = regionInfo.regionInfo.regionData[i].value
+      const provinceText = regionInfo.regionInfo.regionData[i].label
       const provinceChildren = []
       for (const prop in ANRAN_REGION_DATA[provinceCode]) {
         provinceChildren.push({
           value: prop,
           label: ANRAN_REGION_DATA[provinceCode][prop]
         })
-        store.state.regionInfo.CodeToText[prop] = ANRAN_REGION_DATA[provinceCode][prop]
-        store.state.regionInfo.TextToCode[provinceText][ANRAN_REGION_DATA[provinceCode][prop]] = {
+        regionInfo.regionInfo.CodeToText[prop] = ANRAN_REGION_DATA[provinceCode][prop]
+        regionInfo.regionInfo.TextToCode[provinceText][ANRAN_REGION_DATA[provinceCode][prop]] = {
           code: prop
         }
-        store.state.regionInfo.TextToCode[provinceText][ANRAN_REGION_DATA[provinceCode][prop]]['全部'] = {
+        regionInfo.regionInfo.TextToCode[provinceText][ANRAN_REGION_DATA[provinceCode][prop]]['全部'] = {
           code: ''
         }
       }
       if (provinceChildren.length) {
-        store.state.regionInfo.regionData[i].children = provinceChildren
+        regionInfo.regionInfo.regionData[i].children = provinceChildren
       }
     }
 
-    store.state.regionInfo.provinceAndCityData = cloneArray(store.state.regionInfo.regionData)
+    regionInfo.regionInfo.provinceAndCityData = cloneArray(regionInfo.regionInfo.regionData)
 
     // 计算区
-    for (let i = 0, len = store.state.regionInfo.regionData.length; i < len; i++) {
-      const province = store.state.regionInfo.regionData[i].children
-      const provinceText = store.state.regionInfo.regionData[i].label
+    for (let i = 0, len = regionInfo.regionInfo.regionData.length; i < len; i++) {
+      const province = regionInfo.regionInfo.regionData[i].children
+      const provinceText = regionInfo.regionInfo.regionData[i].label
       if (province) {
         for (let j = 0, len = province.length; j < len; j++) {
           const cityCode = province[j].value
@@ -79,8 +75,8 @@ const initRegion = function (vueObj) {
               value: prop,
               label: ANRAN_REGION_DATA[cityCode][prop]
             })
-            store.state.regionInfo.CodeToText[prop] = ANRAN_REGION_DATA[cityCode][prop]
-            store.state.regionInfo.TextToCode[provinceText][cityText][ANRAN_REGION_DATA[cityCode][prop]] = {
+            regionInfo.regionInfo.CodeToText[prop] = ANRAN_REGION_DATA[cityCode][prop]
+            regionInfo.regionInfo.TextToCode[provinceText][cityText][ANRAN_REGION_DATA[cityCode][prop]] = {
               code: prop
             }
           }
@@ -92,14 +88,14 @@ const initRegion = function (vueObj) {
     }
 
     // 添加“全部”选项
-    store.state.regionInfo.provinceAndCityDataPlus = cloneArray(store.state.regionInfo.provinceAndCityData)
-    store.state.regionInfo.provinceAndCityDataPlus.unshift({
+    regionInfo.regionInfo.provinceAndCityDataPlus = cloneArray(regionInfo.regionInfo.provinceAndCityData)
+    regionInfo.regionInfo.provinceAndCityDataPlus.unshift({
       value: '',
       label: '全部'
     })
 
-    store.state.regionInfo.regionDataPlus = cloneArray(store.state.regionInfo.regionData)
-    store.state.regionInfo.regionDataPlus.unshift({
+    regionInfo.regionInfo.regionDataPlus = cloneArray(regionInfo.regionInfo.regionData)
+    regionInfo.regionInfo.regionDataPlus.unshift({
       value: '',
       label: '全部'
     })

src/utils/tool.js

@@ -236,14 +236,6 @@ const tool = {
   getEmpLv(id) {
     // return id.length > 0 ? getBaseInfo().empLevels : 'No Rank';
   },
-
-  /**
-   * 获取地区数据.
-   * @returns {string}
-   */
-  getRegionData() {
-    return process.env.VUE_APP_CDN_API + `/cdn/jsdata/ar_region_data.js`
-  },
 }
 
 export default tool

src/views/article/article-list.vue

@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import {fetchArticleList, fetchArticleOne, fetchCategory} from '@/api/article'
+import {fetchArticleList, fetchArticleOne} from '@/api/article'
 import waves from '@/directive/waves'
 import Pagination from '@/components/Pagination'
 import {getScreenWidth} from "@/utils"

src/views/atlas/placement-network.vue

@@ -0,0 +1,244 @@
+<template>
+  <div class="app-container">
+		<div class="white-box">
+			<div class="filter-user" @keyup.enter="getMainData()" style="margin: 5px">
+				<el-input v-model="mainUserName" size="small" class="top-member" style="width: 300px; margin-top: 10px;">
+					<template slot="prepend">{{ $t('atlas.topMember') }}</template>
+				</el-input>
+				<el-input v-model="expandDeep" size="small" style="width: 200px; margin-top: 10px;" class="spread-depth">
+					<template slot="prepend">{{ $t('atlas.spreadDepth') }}</template>
+				</el-input>
+				<el-input v-model="periodNum" size="small" style="width: 150px;" v-show="false">
+					<template slot="prepend">{{ $t('atlas.periodNumber') }}</template>
+				</el-input>
+				<el-button type="primary" size="small" @click="getMainData()" style=" margin-top: 10px;">{{ $t('common.confirm') }}</el-button>
+			</div>
+
+			<el-tree :props="props" :data="treeData" node-key="USER_ID" @node-click="getChildData" ref="tree" :indent="0" default-expand-all :height="tool.getTableHeight(true)" style="margin-top: 15px;">
+        <span :id="'node_'+data.USER_ID" :class="'custom-tree-node '+data.className" slot-scope="{ node, data }">
+          <span :class="'el-icon-loading '+ data.displayNone"></span>
+          <span :class="data.icon"></span>
+          <span>
+            <el-tag type="danger">{{countTopDeep(data.TOP_NETWORK_DEEP, topDeep)}}</el-tag>
+            <el-tag>{{ node.label }}</el-tag>
+            <el-tag type="info">{{data.REAL_NAME}}</el-tag>
+            <el-tag type="danger">{{ $t('atlas.location') }}: {{ data.RELATIVE_LOCATION }}</el-tag>
+            <el-tag type="success">{{ data.DEC_LV_NAME }}</el-tag>
+            <el-tag type="warning">{{ $t('atlas.highest') }}: {{ data.EMP_LV_NAME }}, {{ data.CROWN_LV_NAME }}</el-tag>
+            <el-tag>{{ data.PERIOD_AT }}</el-tag>
+          </span>
+        </span>
+			</el-tree>
+		</div>
+  </div>
+</template>
+
+<script>
+import {fetchMainUserInfo, fetchNetwork, fetchNetworkList} from '@/api/atlas'
+import Pagination from '@/components/Pagination'
+import waves from '@/directive/waves'
+import tool from '@/utils/tool'
+
+export default {
+  name: 'network',
+  components: { Pagination },
+  directives: { waves },
+  filters: {
+    statusFilter(status) {
+			status = parseInt(status)
+      const statusMap = {
+        0: 'info',
+        1: 'success'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+			loading: true,
+			tabActiveName: 'first',
+			props: {
+				label: 'USER_NAME',
+				children: 'children',
+				icon: 'icon',
+			},
+			treeData: null,
+			expandDeep: 5,
+			topDeep: 0,
+			mainUserName: '',
+			periodNum: null,
+			listPeriodNum: null,
+			allData: null,
+			tableHeaders: null,
+			tableData: null,
+			currentPage: 1,
+			totalPages: 1,
+			totalCount: 1,
+			tool: tool,
+			filterForm: {
+				userName: null,
+				deep: 5,
+				periodNum: null,
+				page: 1,
+				pageSize: 20
+			},
+			listTopDeep: 0,
+    }
+  },
+  created() {
+		this.getMainData(null,true)
+  },
+  methods: {
+		getMainData(userName = null, getList = false) {
+			this.$message({
+				message: this.$t('common.awaitData')
+			})
+			let params = {
+				periodNum: this.periodNum
+			}
+			if (this.mainUserName !== null) {
+				params = {userName: this.mainUserName, periodNum: this.periodNum}
+			}
+			this.loading = true
+			fetchMainUserInfo(params).then(response => {
+				this.treeData = response.data
+				this.topDeep = Number(response.data[0].TOP_NETWORK_DEEP)
+				this.listPeriodNum = response.data[0].listPeriodNum
+				if (getList) {
+					this.getListData()
+				}
+
+				setTimeout(() => {
+					this.loading = false
+				}, 1.5 * 1000)
+			})
+		},
+		getChildData(data, node) {
+			let userId = data.USER_ID
+			let that = data
+			if (that.leaf) {
+				return ''
+			}
+			if (that.isExpanded) {
+				return ''
+			}
+			if (that.children !== null && that.children.length > 0) {
+				return ''
+			}
+			that.displayNone = ''
+
+			this.loading = true
+			fetchNetwork({id: userId, deep: this.expandDeep, periodNum: this.periodNum}).then(response => {
+				this.$refs.tree.updateKeyChildren(userId, response.data.allData)
+				this.listPeriodNum = response.data.periodNum
+				that.displayNone = 'display-none'
+				that.isExpanded = true
+
+				setTimeout(() => {
+					this.loading = false
+				}, 1.5 * 1000)
+			})
+		},
+		getListData(page, pageSize) {
+			this.filterForm.page = page
+			this.filterForm.pageSize = pageSize
+			fetchNetworkList(this.filterForm).then(response => {
+				this.allData = response.data
+				this.listTopDeep = response.data.listTopDeep
+
+        setTimeout(() => {
+          this.loading = false
+        }, 1.5 * 1000)
+      })
+    },
+		countTopDeep (deep, topDeep) {
+			return Number(deep) - Number(topDeep)
+		},
+		handleCurrentChange (page) {
+			this.getListData(page, this.pageSize)
+		},
+		handleSizeChange (pageSize) {
+			this.getListData(this.currentPage, pageSize)
+		},
+		handleFilter () {
+			this.getListData(1, this.pageSize)
+			this.tabActiveName = 'two'
+		},
+		handleShow (row) {
+			this.loading = true
+			this.filterForm.userName = row.SEE_USER_NAME
+			this.getListData(1, this.pageSize)
+			this.tabActiveName = 'two'
+		},
+  }
+}
+</script>
+
+<style>
+.filter-user{font-size: 14px;margin-bottom: 20px;}
+.filter-user:after{content: '';display: table;
+	clear: both;}
+.filter-user .el-input-group{float: left;margin-right: 15px;}
+.el-tree {
+	padding-bottom: 20px;
+	font-size: 14px;
+	overflow-x: auto;
+}
+
+.el-tree .el-tag {
+	height: 20px;
+	line-height: 18px;vertical-align: middle;
+}
+.el-tree-node{position: relative;}
+
+.el-tree-node__content {
+	height: 30px;
+	line-height: 30px;
+}
+
+.el-tree-node__children {
+	overflow: unset;
+	position: relative;
+	padding: 0 0 0 16px;
+}
+
+.el-tree-node > .el-tree-node__children {
+	overflow: unset;
+}
+
+.el-tree-node:before {
+	position: absolute;
+	content: '';
+	top: 0px;
+	left: -4px;
+	height: 100%;
+	border-left: 1px solid #ccc;
+}
+.el-tree-node:last-child:before{height: 15px;}
+
+.custom-tree-node {
+	position: relative;
+	padding-left: 5px;
+}
+
+.first-node:before {
+	display: none;
+}
+
+.custom-tree-node:before {
+	position: absolute;
+	width: 8px;
+	content: '';
+	top: 15px;
+	left: -4px;
+	border-bottom: 1px solid #ccc;
+}
+
+.el-tree-node__expand-icon {
+	display: none !important;
+}
+
+.display-none {
+	display: none!important;
+}
+</style>

src/views/config/shipping-address-list.vue

@@ -61,7 +61,7 @@
 						</el-form-item>
 						<el-form-item :label="$t('config.state')" prop="province" required style="margin-bottom: 10px;">
 							<el-select v-model="dataForm.province" class="filter-item" style="width: 100%;">
-								<el-option v-for="item in regionData" :key="item.id" :label="item.address" :value="item.id" />
+								<el-option v-for="(item,index) in regionData" :key="index" :label="item.label" :value="item.value"></el-option>
 							</el-select>
 						</el-form-item>
 						<el-form-item :label="$t('config.detailedAddress')" prop="address" required style="margin-bottom: 10px;">
@@ -98,7 +98,7 @@
 						</el-form-item>
 						<el-form-item :label="$t('config.state')" prop="province" required style="margin-bottom: 10px;">
 							<el-select v-model="editForm.province" class="filter-item" style="width: 100%;">
-								<el-option v-for="item in regionData" :key="item.id" :label="item.address" :value="item.id" />
+								<el-option v-for="(item,index) in regionData" :key="index" :label="item.label" :value="item.value"></el-option>
 							</el-select>
 						</el-form-item>
 						<el-form-item :label="$t('config.detailedAddress')" prop="address" required style="margin-bottom: 10px;">
@@ -128,7 +128,8 @@
 import {createAddress, fetchAddressList, updateAddress, deleteAddress} from '@/api/config'
 import waves from '@/directive/waves'
 import Pagination from '@/components/Pagination'
-import {getScreenWidth} from "@/utils";
+import {getScreenWidth} from "@/utils"
+import region from "@/store/modules/region"
 
 export default {
   name: 'ShippingAddress',
@@ -168,17 +169,7 @@ export default {
 				address: '',
 				isDefault: '',
 			},
-			// TODO: 地区需处理
-			regionData: [
-				{
-					id: '10600',
-					address: 'test1',
-				},
-				{
-					id: '10601',
-					address: 'test2',
-				},
-			],
+			regionData: region.regionInfo.regionData,
 			screenWidth: getScreenWidth() > 600 ? '500px' : getScreenWidth() + 'px',
 			labelPosition: getScreenWidth() > 600 ? 'right' : 'top',
     }

src/views/shop/car-fund-products.vue

@@ -172,12 +172,12 @@
 </template>
 
 <script>
-import {fetchProductList, fetchShoppingCart, createOrder, createApproachOrder} from '@/api/shop'
+import {fetchProductList, fetchShoppingCart, createOrder} from '@/api/shop'
 import waves from '@/directive/waves'
 import {formatAmount, getMedia, getScreenWidth} from '@/utils'
 import tool from '@/utils/tool'
 import Pagination from '@/components/Pagination'
-import usersInfo from "@/utils/usersInfo";
+import usersInfo from "@/utils/usersInfo"
 
 export default {
 	name: 'CarFundProducts',
@@ -245,7 +245,6 @@ export default {
 			userBalance: {},
 
 			payType: 'garage_points',
-			regionData: tool.getRegionData(),
 			addressId: '',
 			selfPickUpAddressId: '100000000000000000',
 			shippingAddressList: [],

src/views/shop/dec-order-list.vue

@@ -132,7 +132,7 @@ export default {
 			return tool.calculateTax(row.REAL_PRICE, row.BUY_NUMS)
 		},
 		priceAmountFilter(row) {
-			return tool.formatPrice(row.REAL_PRICE, row.BUY_NUMS)
+			return tool.formatPrice(row.REAL_PRICE * row.BUY_NUMS)
 		},
 		amountFilter(amount) {
 			return formatAmount(amount)

src/views/shop/order-list.vue

@@ -128,7 +128,7 @@ export default {
       return tool.calculateTax(row.REAL_PRICE, row.BUY_NUMS)
     },
 		priceAmountFilter(row) {
-			return tool.formatPrice(row.REAL_PRICE, row.BUY_NUMS)
+			return tool.formatPrice(row.REAL_PRICE * row.BUY_NUMS)
 		},
 		amountFilter(amount) {
 			return formatAmount(amount)

src/views/shop/standard-products.vue

@@ -325,7 +325,6 @@
 				},
 				payStackScreenWidth: getScreenWidth() > 500 ? '450px' : getScreenWidth() + 'px',
 
-				regionData: tool.getRegionData(),
 				addressId: '',
 				selfPickUpAddressId: '100000000000000000',
 				shippingAddressList: [],

src/views/shop/villa-fund-products.vue

@@ -172,7 +172,7 @@
 </template>
 
 <script>
-import {fetchProductList, fetchShoppingCart, createOrder, createApproachOrder} from '@/api/shop'
+import {fetchProductList, fetchShoppingCart, createOrder} from '@/api/shop'
 import waves from '@/directive/waves'
 import {formatAmount, getMedia, getScreenWidth} from '@/utils'
 import tool from '@/utils/tool'
@@ -245,7 +245,6 @@ export default {
 			userBalance: {},
 
 			payType: 'villa_points',
-			regionData: tool.getRegionData(),
 			addressId: '',
 			selfPickUpAddressId: '100000000000000000',
 			shippingAddressList: [],

src/views/user/brand-ambassador.vue

@@ -56,9 +56,10 @@
 
 						<el-divider content-position="left">{{ $t('atlas.networkInformation') }}</el-divider>
 						<el-form-item :label="$t('shop.sponsorCode')">
-							<el-input v-model="form.recUserName" @change="handleChkRecUser">
-								<template slot="append">【{{recRealName}}】</template>
-							</el-input>
+							<el-input v-model="form.recUserName" @change="handleChkRecUser"></el-input>
+						</el-form-item>
+						<el-form-item>
+							<el-input v-model="recRealName" :disabled="true"></el-input>
 						</el-form-item>
 
 						<el-divider content-position="left">{{ $t('profile.personalInformation') }}</el-divider>
@@ -90,9 +91,7 @@
 							</el-radio-group>
 						</el-form-item>
 						<el-form-item prop="areaSelected" :label="$t('config.state')">
-							<el-select v-model="form.areaSelected" class="filter-item" style="width: 100%;">
-								<el-option v-for="item in regionData" :key="item.id" :label="item.address" :value="item.id" />
-							</el-select>
+							<el-cascader :disabled="areaDisabled" size="large" :options="regionData" v-model="form.areaSelected" style="width: 100%;"></el-cascader>
 						</el-form-item>
 						<el-form-item :label="$t('config.detailedAddress')">
 							<el-input :disabled="addressDisabled" v-model="form.address"></el-input>
@@ -107,7 +106,7 @@
 						<el-divider content-position="left">{{ $t('user.payInfo') }}</el-divider>
 						<el-form-item :label="$t('shop.paymentMethod')" required>
 							<el-radio-group v-model="form.payType" @change="chosePayType">
-								<el-radio border v-for="(item, index) in payList" :key='index' :label="item.label">
+								<el-radio border v-for="(item, index) in payList" :key='index' :label="item.label" style="margin: 5px;">
 									{{ item.name }}<span v-if="item.label === 'cash'" style="color: tomato;">（{{ $t('currency.sign') }} {{ userBalance.cash | amountFilter }}）</span>
 								</el-radio>
 							</el-radio-group>
@@ -193,7 +192,7 @@ import paystack from 'vue-paystack'
 import tool from "@/utils/tool"
 import usersInfo from "@/utils/usersInfo"
 import {deleteApproachOrder} from "@/api/shop"
-import {mapGetters} from "vuex"
+import region from "@/store/modules/region"
 
 export default {
   name: 'brandAmbassador',
@@ -207,7 +206,7 @@ export default {
 			return tool.calculateTax(row.REAL_PRICE, row.BUY_NUMS)
 		},
 		priceAmountFilter(row) {
-			return tool.formatPrice(row.REAL_PRICE, row.BUY_NUMS)
+			return tool.formatPrice(row.REAL_PRICE * row.BUY_NUMS)
 		},
 		amountFilter(amount) {
 			return formatAmount(amount)
@@ -221,9 +220,6 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters([
-			'regionInfo',
-		]),
 		// PayStack混淆串
 		reference() {
 			let text = ''
@@ -323,17 +319,7 @@ export default {
 			imageStyle: 'margin-top: -50px;',
 
 			decWay: '2',
-			// TODO: 地区需处理
-			regionData: [
-				{
-					id: '10600',
-					address: 'test1',
-				},
-				{
-					id: '10601',
-					address: 'test2',
-				},
-			],
+			regionData: region.regionInfo.regionData,
 			form: {
 				realName: '',
 				decLv: '',

src/views/user/member-upgrade.vue

@@ -32,11 +32,8 @@
 							<template slot="label">{{ $t('profile.upgradePurchaseProduct') }}</template>
 							<el-tabs type="border-card" v-model="decWay" style="position: relative; width: 100%;">
 								<el-tab-pane :label="$t('shop.product')" name="2">
-									<el-collapse accordion>
-										<el-collapse-item>
-											<template slot="title">
-												{{ $t('shop.product') }} <i class="header-icon el-icon-info"></i>
-											</template>
+									<el-collapse accordion v-model="activeName">
+										<el-collapse-item name="product">
 											<el-table :data="tableData" :show-header="false" @selection-change="handleSelectionChange">
 												<el-table-column type="selection" width="30" align="center" style="top: -30px;"></el-table-column>
 												<el-table-column align="center">
@@ -81,10 +78,7 @@
 							<el-input v-model="form.acceptMobile"></el-input>
 						</el-form-item>
 						<el-form-item v-if="!isMax" prop="areaSelected" :label="$t('config.state')">
-	<!--						<el-cascader size="large" :options="regionData" v-model="form.areaSelected"></el-cascader>-->
-							<el-select v-model="form.areaSelected" class="filter-item" style="width: 100%;">
-								<el-option v-for="item in regionData" :key="item.id" :label="item.address" :value="item.id" />
-							</el-select>
+							<el-cascader size="large" :options="regionData" v-model="form.areaSelected" style="width: 100%;"></el-cascader>
 						</el-form-item>
 						<el-form-item v-if="!isMax" :label="$t('config.localGovernmentArea')">
 							<el-input v-model="form.lgaName"></el-input>
@@ -101,11 +95,9 @@
 
 						<el-form-item v-if="!isMax" :label="$t('shop.paymentMethod')" required style="padding-left: 0;">
 							<el-radio-group v-model="form.payType" @change="chosePayType">
-								<el-col :xs="24" :sm="24" :lg="24" style="padding-left: 0;">
-									<el-radio border v-for="(item, index) in payList" :key='index' :label="item.label" >
-										{{ item.name }}<span v-if="item.label === 'cash'" style="color: tomato;">({{ $t('currency.sign') }} {{ userBalance.cash | amountFilter }})</span>
-									</el-radio>
-								</el-col>
+								<el-radio border v-for="(item, index) in payList" :key='index' :label="item.label" style="margin: 5px;">
+									{{ item.name }}<span v-if="item.label === 'cash'" style="color: tomato;">({{ $t('currency.sign') }} {{ userBalance.cash | amountFilter }})</span>
+								</el-radio>
 							</el-radio-group>
 						</el-form-item>
 
@@ -181,15 +173,15 @@
 </template>
 
 <script>
-import {createBrandAmbassador, fetchFullInfo, fetchSendUpgrade, fetchUpgrade, fetchUpgradeInfo} from '@/api/user'
+import {fetchFullInfo, fetchSendUpgrade, fetchUpgrade, fetchUpgradeInfo} from '@/api/user'
 import waves from '@/directive/waves'
 import {formatAmount, getScreenWidth} from "@/utils"
 import Pagination from '@/components/Pagination'
 import paystack from 'vue-paystack'
 import tool from "@/utils/tool"
 import {deleteApproachOrder} from "@/api/shop"
-import {mapGetters} from "vuex"
 import usersInfo from "@/utils/usersInfo"
+import region from "@/store/modules/region"
 
 export default {
   name: 'upgradeManagement',
@@ -203,7 +195,7 @@ export default {
 			return tool.calculateTax(row.REAL_PRICE, row.BUY_NUMS)
 		},
 		priceAmountFilter(row) {
-			return tool.formatPrice(row.REAL_PRICE, row.BUY_NUMS)
+			return tool.formatPrice(row.REAL_PRICE * row.BUY_NUMS)
 		},
 		amountFilter(amount) {
 			return formatAmount(amount)
@@ -217,9 +209,6 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters([
-			'regionInfo',
-		]),
 		// PayStack混淆串
 		reference() {
 			let text = ''
@@ -243,17 +232,7 @@ export default {
 			toLevel: '',
 			currentRow: null,
 			decWay: '2',
-			// TODO: 地区需处理
-			regionData: [
-				{
-					id: '10600',
-					address: 'test1',
-				},
-				{
-					id: '10601',
-					address: 'test2',
-				},
-			],
+			regionData: region.regionInfo.regionData,
 			form: {
 				address: '',
 				areaSelected:[],
@@ -354,11 +333,11 @@ export default {
 			userBalance: {
 				cash: 0,
 			},
+
+			activeName: 'product',
 		}
   },
   created() {
-			let regionInfo = this.$store.getters.regionInfo
-		// console.log(this.$store.state.region)
     this.fetchUpgrade()
   },
 	mounted() {

src/views/user/welcome-pack.vue

@@ -31,11 +31,8 @@
 							</template>
 							<el-tabs type="border-card" v-model="decWay" style="position: relative; width: 100%;">
 								<el-tab-pane :label="$t('shop.product')" name="2">
-									<el-collapse accordion>
-										<el-collapse-item>
-											<template slot="title">
-												{{ $t('shop.product') }} <i class="header-icon el-icon-info"></i>
-											</template>
+									<el-collapse accordion v-model="activeName">
+										<el-collapse-item name="product">
 											<el-table :data="tableData" :show-header="false" @selection-change="handleSelectionChange">
 												<el-table-column type="selection" width="30" align="center" style="top: -30px;"></el-table-column>
 												<el-table-column align="center">
@@ -76,15 +73,16 @@
 
 						<el-divider content-position="left">{{ $t('atlas.networkInformation') }}</el-divider>
 						<el-form-item :label="$t('shop.sponsorCode')">
-							<el-input v-model.trim="form.recUserName" @change="handleChkRecUser" :readonly="recReadOnly">
-								<template slot="append">【{{ recRealName }}】</template>
-							</el-input>
+							<el-input v-model.trim="form.recUserName" @change="handleChkRecUser" :readonly="recReadOnly"></el-input>
+						</el-form-item>
+						<el-form-item>
+							<el-input v-model="recRealName" :disabled="true"></el-input>
 						</el-form-item>
 						<el-form-item :label="$t('atlas.placementCode')">
 							<el-input v-model.trim="form.conUserName" @change="handleChkConUser"></el-input>
 						</el-form-item>
 						<el-form-item>
-							<el-input placeholder="请输入内容" v-model="conRealName" :disabled="true"></el-input>
+							<el-input v-model="conRealName" :disabled="true"></el-input>
 						</el-form-item>
 						<el-form-item :label="$t('atlas.placementTree')">
 							<el-radio-group border v-model="form.location">
@@ -132,9 +130,7 @@
 							</el-radio-group>
 						</el-form-item>
 						<el-form-item prop="areaSelected" :label="$t('config.state')">
-							<el-select v-model="form.areaSelected" class="filter-item" style="width: 100%;">
-								<el-option v-for="item in regionData" :key="item.id" :label="item.address" :value="item.id" />
-							</el-select>
+							<el-cascader :disabled="areaDisabled" size="large" :placeholder="$t('shop.delivery')" :options="regionData" v-model="form.areaSelected" style="width: 100%;"></el-cascader>
 						</el-form-item>
 						<el-form-item :label="$t('config.detailedAddress')">
 							<el-input :disabled="addressDisabled" v-model.trim="form.address"></el-input>
@@ -161,8 +157,8 @@
 
 						<el-divider content-position="left">{{ $t('user.payInfo') }}</el-divider>
 						<el-form-item :label="$t('shop.paymentMethod')" required>
-							<el-radio-group v-model="form.payType" @change="chosePayType" style="margin: 5px 5px;">
-								<el-radio border v-for="(item, index) in payList" :key='index' :label="item.label">
+							<el-radio-group v-model="form.payType" @change="chosePayType">
+								<el-radio border v-for="(item, index) in payList" :key='index' :label="item.label" style="margin: 5px;">
 									{{ item.name }}<span v-if="item.label === 'cash'" style="color: tomato;">（{{ $t('currency.sign') }} {{ userBalance.cash }}）</span>
 								</el-radio>
 							</el-radio-group>
@@ -240,13 +236,7 @@
 </template>
 
 <script>
-import {
-	fetchBrandAmbassador,
-	createBrandAmbassador,
-	fetchFullInfo,
-	fetchBrandAmbassadorInfo,
-	fetchAutoPlace, fetchWelcomePack, createWelcomePack
-} from '@/api/user'
+import {fetchFullInfo, fetchBrandAmbassadorInfo, fetchAutoPlace, fetchWelcomePack, createWelcomePack} from '@/api/user'
 import waves from '@/directive/waves'
 import {formatAmount, getScreenWidth} from "@/utils"
 import Pagination from '@/components/Pagination'
@@ -254,7 +244,7 @@ import paystack from 'vue-paystack'
 import tool from "@/utils/tool"
 import usersInfo from "@/utils/usersInfo"
 import {deleteApproachOrder} from "@/api/shop"
-import {mapGetters} from "vuex"
+import region from "@/store/modules/region"
 
 export default {
   name: 'welcomePack',
@@ -268,7 +258,7 @@ export default {
 			return tool.calculateTax(row.REAL_PRICE, row.BUY_NUMS)
 		},
 		priceAmountFilter(row) {
-			return tool.formatPrice(row.REAL_PRICE, row.BUY_NUMS)
+			return tool.formatPrice(row.REAL_PRICE * row.BUY_NUMS)
 		},
 		amountFilter(amount) {
 			return formatAmount(amount)
@@ -282,9 +272,6 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters([
-			'regionInfo',
-		]),
 		// PayStack混淆串
 		reference() {
 			let text = ''
@@ -386,17 +373,7 @@ export default {
 			imageStyle: 'margin-top: -50px;',
 
 			decWay: '2',
-			// TODO: 地区需处理
-			regionData: [
-				{
-					id: '10600',
-					address: 'test1',
-				},
-				{
-					id: '10601',
-					address: 'test2',
-				},
-			],
+			regionData: region.regionInfo.regionData,
 			form: {
 				decType: 'normal',
 				realName: '',
@@ -442,6 +419,8 @@ export default {
 			recReadOnly: false,
 			allDecLevel: usersInfo.getBaseInfo().decLevels,
 			allOpenBank: [],
+
+			activeName: 'product',
     }
   },
   created() {