Kaynağa Gözat

全局改名、商品下单发布

kevin_zhangl 3 yıl önce
ebeveyn
işleme
5fcef482d3
42 değiştirilmiş dosya ile 2132 ekleme ve 1002 silme
  1. BIN
      public/favicon.ico
  2. 1 1
      public/index.html
  3. 37 9
      src/api/shop.js
  4. BIN
      src/assets/user_images/divider.png
  5. BIN
      src/assets/user_images/login-register.jpg
  6. BIN
      src/assets/user_images/simple-img.jpg
  7. 1 1
      src/components/Breadcrumb/index.vue
  8. 156 0
      src/components/Upload/Uploader.vue
  9. 19 2
      src/lang/en.js
  10. 18 1
      src/lang/zh.js
  11. 2 2
      src/layout/components/Navbar.vue
  12. 1 1
      src/router/index.js
  13. 1 1
      src/router/modules/article.js
  14. 1 1
      src/router/modules/atlas.js
  15. 4 4
      src/router/modules/bonus.js
  16. 3 3
      src/router/modules/config.js
  17. 2 2
      src/router/modules/finance.js
  18. 1 1
      src/router/modules/profile.js
  19. 6 13
      src/router/modules/shop.js
  20. 1 1
      src/utils/index.js
  21. 1 1
      src/views/article/article-list.vue
  22. 8 8
      src/views/atlas/brand-ambassador-list.vue
  23. 1 1
      src/views/bonus/account-list.vue
  24. 1 1
      src/views/bonus/bonus-list.vue
  25. 1 1
      src/views/bonus/historical-cumulative-bonus.vue
  26. 43 12
      src/views/config/shipping-address-list.vue
  27. 11 1
      src/views/dashboard/admin/index.vue
  28. 30 6
      src/views/finance/recharge-list.vue
  29. 1 1
      src/views/finance/transfer-list.vue
  30. 108 82
      src/views/login/index.vue
  31. 23 17
      src/views/profile/components/Account.vue
  32. 20 14
      src/views/profile/components/LoginPassword.vue
  33. 20 14
      src/views/profile/components/PaymentPassword.vue
  34. 21 15
      src/views/profile/index.vue
  35. 169 133
      src/views/shop/ba-dec-order-list.vue
  36. 408 41
      src/views/shop/car-fund-products.vue
  37. 2 2
      src/views/shop/dec-order-list.vue
  38. 5 5
      src/views/shop/order-list.vue
  39. 0 473
      src/views/shop/shopping-cart.vue
  40. 564 56
      src/views/shop/standard-products.vue
  41. 407 40
      src/views/shop/villa-fund-products.vue
  42. 34 35
      src/views/table/complex-table.vue

BIN
public/favicon.ico


+ 1 - 1
public/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="renderer" content="webkit">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+<!--    <link rel="icon" href="<%= BASE_URL %>favicon.ico">-->
     <title><%= webpackConfig.name %></title>
   </head>
   <body>

+ 37 - 9
src/api/shop.js

@@ -45,20 +45,21 @@ export function fetchOrderList(query) {
   })
 }
 
-// 下载订单PDF
-export function downloadOrder(orderSn) {
+// 购物信息
+export function fetchShoppingCart(query) {
   return request({
-    url: `/v1/shop/order-export/${orderSn}`,
+    url: '/v1/shop/show-cart',
     method: 'get',
-    params: { }
+    params: query
   })
 }
 
-export function createArticle(data) {
+// 下载订单PDF
+export function downloadOrder(orderSn) {
   return request({
-    url: '/v1/article/create',
-    method: 'post',
-    data
+    url: `/v1/shop/order-export/${orderSn}`,
+    method: 'get',
+    params: {}
   })
 }
 
@@ -76,6 +77,33 @@ export function downloadBaDecOrder(orderSn) {
   return request({
     url: `/v1/shop/ba-dec-order-export/${orderSn}`,
     method: 'get',
-    params: { }
+    params: {}
+  })
+}
+
+// PayStack支付订单
+export function createApproachOrder(data) {
+  return request({
+    url: '/v1/shop/sure-approach-order',
+    method: 'post',
+    data
+  })
+}
+
+// 支付订单
+export function createOrder(data) {
+  return request({
+    url: '/v1/shop/sure-order',
+    method: 'post',
+    data
+  })
+}
+
+// 删除订单中间表
+export function deleteApproachOrder(data) {
+  return request({
+    url: '/v1/shop/delete-approach-order',
+    method: 'post',
+    data
   })
 }

BIN
src/assets/user_images/divider.png


BIN
src/assets/user_images/login-register.jpg


BIN
src/assets/user_images/simple-img.jpg


+ 1 - 1
src/components/Breadcrumb/index.vue

@@ -41,7 +41,7 @@ export default {
       const first = matched[0]
 
       if (!this.isDashboard(first)) {
-        matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
+        matched = [{ path: '/dashboard/index', meta: { title: 'dashboard' }}].concat(matched)
       }
 
       this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)

+ 156 - 0
src/components/Upload/Uploader.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="leo-uploader" v-loading="uploaderLoading">
+    <el-upload
+        class="uploader-box"
+        v-show="uploaderShow"
+        :action="uploaderRequestUrl"
+        name="file"
+        :headers="uploaderHeaders"
+        :data="uploaderFormData"
+        :show-file-list="false"
+        :before-upload="uploaderHandleBefore"
+        :on-success="uploaderHandleSuccess"
+        :disabled="uploaderDisabled"
+        :style="`width:${width};height:${height};`"
+    >
+      <i v-if="uploaderImageUrl" class="el-icon-plus uploader-icon" :style="`line-height:${height};background-image: ${uploaderImageUrl}`">
+        <img :src="uploaderImageUrl" class="image-preview" :style="`width:${width};height:${height};display: block;margin-top:-${height}`" alt="">
+      </i>
+      <i v-else class="el-icon-plus uploader-icon"
+         :style="`width:${width};height:${height};line-height:${height};`"></i>
+    </el-upload>
+    <div class="image-show" v-show="!uploaderShow">
+      <img :src="uploaderImageUrl" alt="" :width="width" :height="height">
+    </div>
+  </div>
+</template>
+
+<script>
+import {fetchToken} from "@/api/file"
+
+  export default {
+    name: 'LeoUploader',
+    props: {
+      requestRoute: {
+        type: String,
+        required: true,
+      },
+      defaultImageUrl: {
+        type: String,
+        default: null,
+      },
+      uploaderSuccessCanChange: {
+        type: Boolean,
+        default: true,
+      },
+      width: {
+        type: String,
+        default: '720px',
+      },
+      height: {
+        type: String,
+        default: '480px',
+      }
+    },
+    data() {
+      return {
+        uploaderShow: true,
+        uploaderLoading: false,
+        uploaderFormData: {
+          'uploadToken': '',
+        },
+        uploaderRequestUrl: `${REQUEST_URL}${this.requestRoute}`,
+        uploaderHeaders: {
+          'Device-Type': 'pc',
+          'Suppress-Response-Code': '1',
+          'Authorization': '',
+        },
+        uploaderDisabled: false,
+        successImageUrl: null,
+      }
+    },
+    computed: {
+      uploaderImageUrl() {
+        if (this.successImageUrl !== null) {
+          return this.successImageUrl
+        }
+        else if (this.defaultImageUrl !== null) {
+          this.uploaderShow = false
+          this.uploaderDisabled = true
+          this.uploaderLoading = false
+          return this.defaultImageUrl
+        }
+      }
+    },
+    watch: {
+      requestRoute(newVal) {
+        Object.assign(this.$data, this.$options.data())
+        this.uploaderRequestUrl = `${REQUEST_URL}${this.requestRoute}`
+      },
+    },
+    methods: {
+      uploaderHandleBefore() {
+        this.$message({
+          message: 'Uploading, please hold on. Do not close the window!', // 正在上传,请稍后。请勿关闭窗口!
+          type: 'warning',
+          duration: 0,
+        })
+        this.uploaderLoading = true
+				fetchToken().then(response => {
+						this.uploaderHeaders.Authorization = response.data
+
+        return network.updateToken().then(accessToken => {
+          this.uploaderHeaders.Authorization = ACCESS_TOKEN_PREFIX + accessToken
+          return network.getData(`file/token`)
+        }).then(response => {
+          this.uploaderFormData.uploadToken = response
+        }).catch(response => {
+
+        })
+      },
+      uploaderHandleSuccess(response, file) {
+        this.$message.closeAll()
+        if (response.success) {
+          this.$message({
+            message: 'Successful',
+            type: 'success'
+          })
+          this.successImageUrl = URL.createObjectURL(file.raw)
+          if (!this.uploaderSuccessCanChange) {
+            this.uploaderShow = false
+            this.uploaderDisabled = true
+            this.uploaderLoading = false
+          }
+          this.uploaderLoading = false
+          this.$emit('on-success', response.data)
+        } else {
+          this.$message({
+            message: response.data.message,
+            type: 'warning'
+          })
+          this.uploaderLoading = false
+        }
+      },
+    }
+  }
+</script>
+
+<style scoped>
+  .uploader-box {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .uploader-box:hover {
+    border-color: #409EFF;
+  }
+
+  .uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    text-align: center;
+  }
+</style>

+ 19 - 2
src/lang/en.js

@@ -78,7 +78,7 @@ export default {
     size: 'Global Size'
   },
   login: {
-    title: 'Login Form',
+    title: 'Welcome',
     logIn: 'Login',
     username: 'Username',
     password: 'Password',
@@ -253,11 +253,13 @@ export default {
     qty: 'Qty',
     taxRate: 'Tax Rate',
     taxAmount: 'Tax',
+    totalTaxAmount: 'Total Tax',
     totalPrice: 'Total Price',
     totalBV: 'Total BV',
     orderCode: 'Order Code',
     orderType: 'Order Type',
-    decCode: 'Dec Code',
+    amount: 'Amount',
+    decCode: 'Code',
     memberCode: 'Member Code',
     memberName: 'Member Name',
     recipientName: 'Recipient Name',
@@ -277,6 +279,21 @@ export default {
     goBack: 'Go Back',
     goPay: 'Pay',
     orderDetail: 'Order Detail',
+    chooseTips: 'Please choose the products.',
+    confirmClose: 'Confirm to close?',
+    inputPasswordTips: 'Please enter your payment password',
+    selfPickUp: 'Self Pick-up',
+    selectAddress: 'Please select the shipping address',
+    selectPayment: 'Please select payment method',
+    freight: 'Freight',
+    paidAmount: 'Amount Paid',
+    productsSettlement: 'Products Settlement',
+    total: 'Total',
+    totalOrders: 'Total Orders',
+    accountBalance: 'Account Balance',
+    balanceNotAllow: 'insufficient, unable to buy products',
+    paymentError: 'Payment or Account Balance error',
+    successOrderTips: 'The order is successful',
   },
 
   user: {

+ 18 - 1
src/lang/zh.js

@@ -78,7 +78,7 @@ export default {
     size: '布局大小'
   },
   login: {
-    title: '系统登录',
+    title: '欢迎',
     logIn: '登录',
     username: '账号',
     password: '密码',
@@ -251,10 +251,12 @@ export default {
     qty: '数量',
     taxRate: '税率',
     taxAmount: '税额',
+    totalTaxAmount: '合计税额',
     totalPrice: '商品总价',
     totalBV: '合计BV',
     orderCode: '订单编号',
     orderType: '订单类型',
+    amount: '金额',
     decCode: '报单编号',
     memberCode: '会员编号',
     memberName: '会员姓名',
@@ -275,6 +277,21 @@ export default {
     goBack: '返回',
     goPay: '支付',
     orderDetail: '订单详情',
+    chooseTips: '请选择商品',
+    confirmClose: '确定要关闭页面吗?',
+    inputPasswordTips: '请输入支付密码',
+    selfPickUp: '自提',
+    selectAddress: '请选择收货地址',
+    selectPayment: '请选择支付方式',
+    freight: '运费',
+    paidAmount: '实付金额',
+    productsSettlement: '商品结算',
+    total: '合计',
+    totalOrders: '订单合计',
+    accountBalance: '账户余额',
+    balanceNotAllow: '不足,无法购买商品',
+    paymentError: '支付方式或账户类型错误',
+    successOrderTips: '订单支付成功',
   },
   user: {
     email: '电子邮箱'

+ 2 - 2
src/layout/components/Navbar.vue

@@ -6,7 +6,7 @@
 
     <div class="right-menu">
       <template v-if="device!=='mobile'">
-        <search id="header-search" class="right-menu-item" />
+<!--        <search id="header-search" class="right-menu-item" />-->
 
         <error-log class="errLog-container right-menu-item hover-effect" />
 
@@ -22,7 +22,7 @@
 
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
-          <img src="@/assets/user_images/avatar.png" class="user-avatar">
+          <img src="@/assets/user_images/avatar.png" class="user-avatar" alt="">
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">

+ 1 - 1
src/router/index.js

@@ -99,7 +99,7 @@ export const constantRoutes = [
   {
     path: '/dashboard/index',
     component: Layout,
-    redirect: '/dashboard',
+    redirect: '/dashboard/index',
     children: [
       {
         path: 'dashboard',

+ 1 - 1
src/router/modules/article.js

@@ -10,7 +10,7 @@ const articleRouter = {
       path: 'article-list',  // 文章列表
       component: () => import('@/views/article/article-list'),
       name: 'ArticleList',
-      meta: { title: 'articleList', icon: 'message' }
+      meta: { title: 'Article List', icon: 'message' }
     },
   ]
 }

+ 1 - 1
src/router/modules/atlas.js

@@ -10,7 +10,7 @@ const atlasRouter = {
       path: 'brand-ambassador-list',  // BA会员列表
       component: () => import('@/views/atlas/brand-ambassador-list'),
       name: 'BrandAmbassadorList',
-      meta: { title: 'brandAmbassadorList', icon: 'user', noCache: true }
+      meta: { title: 'Brand Ambassador List', icon: 'user', noCache: true }
     },
   ]
 }

+ 4 - 4
src/router/modules/bonus.js

@@ -13,20 +13,20 @@ const bonusRouter = {
     {
       path: 'index',  // 会员账户
       component: () => import('@/views/bonus/account-list'),
-      name: 'AccoutList',
-      meta: { title: 'accountList', icon: 'el-icon-coin' }
+      name: 'AccountList',
+      meta: { title: 'My Account', icon: 'el-icon-coin' }
     },
     {
       path: 'other',  // 奖金列表
       component: () => import('@/views/bonus/bonus-list'),
       name: 'BonusList',
-      meta: { title: 'bonusList', icon: 'el-icon-coin' }
+      meta: { title: 'Previous Bonus', icon: 'el-icon-coin' }
     },
     {
       path: 'historical-cumulative-bonus',  // 历史奖金
       component: () => import('@/views/bonus/historical-cumulative-bonus'),
       name: 'HistoricalCumulativeBonus',
-      meta: { title: 'historicalCumulativeBonus', icon: 'el-icon-coin' }
+      meta: { title: 'Historical Cumulative Bonus', icon: 'el-icon-coin' }
     },
   ]
 }

+ 3 - 3
src/router/modules/config.js

@@ -12,9 +12,9 @@ const configRouter = {
   children: [
     {
       path: 'receive-address-list',  // 收货地址列表
-      component: () => import('@/views/config/receive-address-list'),
-      name: 'ReceiveAddressList',
-      meta: { title: 'receiveAddressList', icon: 'el-icon-location' }
+      component: () => import('@/views/config/shipping-address-list'),
+      name: 'ShippingAddressList',
+      meta: { title: 'Shipping Address', icon: 'el-icon-location' }
     },
   ]
 }

+ 2 - 2
src/router/modules/finance.js

@@ -14,13 +14,13 @@ const financeRouter = {
       path: 'transfer-list',  // 转账列表
       component: () => import('@/views/finance/transfer-list'),
       name: 'TransferList',
-      meta: { title: 'transferList', icon: 'el-icon-coin' }
+      meta: { title: 'Transfer', icon: 'el-icon-coin' }
     },
     {
       path: 'recharge',  // 充值列表
       component: () => import('@/views/finance/recharge-list'),
       name: 'RechargeList',
-      meta: { title: 'rechargeList', icon: 'el-icon-coin' }
+      meta: { title: 'Recharge Details', icon: 'el-icon-coin' }
     },
   ]
 }

+ 1 - 1
src/router/modules/profile.js

@@ -10,7 +10,7 @@ const profileRouter = {
       path: 'index',  // 用户中心
       component: () => import('@/views/profile/index'),
       name: 'Profile',
-      meta: { title: 'profile', icon: 'user', noCache: true }
+      meta: { title: 'Personal Info', icon: 'user', noCache: true }
     },
   ]
 }

+ 6 - 13
src/router/modules/shop.js

@@ -14,44 +14,37 @@ const shopRouter = {
       path: 'standard-products', // 普通商品列表
       component: () => import('@/views/shop/standard-products'),
       name: 'StandardProducts',
-      meta: { title: 'standardProducts', icon: 'el-icon-goods' }
+      meta: { title: 'Standard Products', icon: 'el-icon-goods' }
     },
     {
       path: 'car-fund-products',  // 车奖商品列表
       component: () => import('@/views/shop/car-fund-products'),
       name: 'CarFundProducts',
-      meta: { title: 'carFundProducts', icon: 'el-icon-goods' }
+      meta: { title: 'Car Fund Products', icon: 'el-icon-goods' }
     },
     {
       path: 'villa-fund-products',  // 房奖商品列表
       component: () => import('@/views/shop/villa-fund-products'),
       name: 'VillaFundProducts',
-      meta: { title: 'villaFundProducts', icon: 'el-icon-goods' }
-    },
-    {
-      path: 'shopping-cart',  // 购物车
-      component: () => import('@/views/shop/shopping-cart'),
-      name: 'ShoppingCart',
-      meta: { title: 'shoppingCart', icon: 'el-icon-shopping-cart-full' },
-      hidden: true
+      meta: { title: 'Villa Fund Products', icon: 'el-icon-goods' }
     },
     {
       path: 'dec-order-list', // 报单列表
       component: () => import('@/views/shop/dec-order-list'),
       name: 'DecOrderList',
-      meta: { title: 'decOrderList', icon: 'el-icon-goods' }
+      meta: { title: 'Welcome Pack Listing', icon: 'el-icon-goods' }
     },
     {
       path: 'order-list', // 订单列表
       component: () => import('@/views/shop/order-list'),
       name: 'OrderList',
-      meta: { title: 'orderList', icon: 'el-icon-goods' }
+      meta: { title: 'Order List', icon: 'el-icon-goods' }
     },
     {
       path: 'ba-dec-order-list', // BA报单列表
       component: () => import('@/views/shop/ba-dec-order-list'),
       name: 'BaDecOrderList',
-      meta: { title: 'baDecOrderList', icon: 'el-icon-goods' }
+      meta: { title: 'Welcome Listing', icon: 'el-icon-goods' }
     }
   ]
 }

+ 1 - 1
src/utils/index.js

@@ -9,7 +9,7 @@
  * @returns {string | null}
  */
 export function parseTime(time, cFormat) {
-  if (arguments.length === 0 || !time) {
+  if (arguments.length === 0 || !time || parseInt(time) === 0) {
     return null
   }
   const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'

+ 1 - 1
src/views/article/article-list.vue

@@ -48,7 +48,7 @@ import Pagination from '@/components/Pagination'
 import {getScreenWidth} from "@/utils"
 
 export default {
-  name: 'articleList',
+  name: 'ArticleList',
   components: { Pagination },
   directives: { waves },
   data() {

+ 8 - 8
src/views/atlas/brand-ambassador-list.vue

@@ -9,22 +9,22 @@
       highlight-current-row
       style="width: 100%;"
     >
-      <el-table-column align="center" :label="$t('shop.memberCode')" prop="USER_NAME">
+      <el-table-column align="center" :label="$t('shop.memberCode')" prop="USER_NAME" min-width="120px">
         <template slot-scope="{row}">
-          <span>{{ row.USER_NAME }}</span>
+					<span style="word-break: keep-all; word-wrap: break-word; white-space: pre-wrap;">{{ row.USER_NAME }}</span>
         </template>
       </el-table-column>
-      <el-table-column align="center" :label="$t('shop.memberName')" prop="REAL_NAME">
+      <el-table-column align="center" :label="$t('shop.memberName')" prop="REAL_NAME" min-width="120px">
         <template slot-scope="{row}">
-          <span>{{ row.REAL_NAME }}</span>
+					<span style="word-break: keep-all; word-wrap: break-word; white-space: pre-wrap;">{{ row.REAL_NAME }}</span>
         </template>
       </el-table-column>
-      <el-table-column align="center" :label="$t('profile.joiningPeriod')" prop="PERIOD_AT">
+      <el-table-column align="center" :label="$t('profile.joiningPeriod')" prop="PERIOD_AT" min-width="120px">
         <template slot-scope="{row}">
-          <span>{{ row.PERIOD_AT }}</span>
+					<span style="word-break: keep-all; word-wrap: break-word; white-space: pre-wrap;">{{ row.PERIOD_AT }}</span>
         </template>
       </el-table-column>
-      <el-table-column align="center" :label="$t('profile.whetherUpgrade')" prop="WHETHER_UPGRADE">
+      <el-table-column align="center" :label="$t('profile.whetherUpgrade')" prop="WHETHER_UPGRADE" min-width="140px">
         <template slot-scope="{row}">
           <el-tag :type="row.WHETHER_UPGRADE | statusFilter">
 						{{ parseInt(row.WHETHER_UPGRADE) === 1 ? 'YES' : 'NO' }}
@@ -43,7 +43,7 @@ import waves from '@/directive/waves'
 import Pagination from '@/components/Pagination'
 
 export default {
-  name: 'brandAmbassadorList',
+  name: 'BrandAmbassadorList',
   components: { Pagination },
   directives: { waves },
   filters: {

+ 1 - 1
src/views/bonus/account-list.vue

@@ -111,7 +111,7 @@ import tool from "@/utils/tool"
 import {getScreenWidth} from "@/utils";
 
 export default {
-  name: 'accountList',
+  name: 'MyAccount',
 	components: { Pagination },
   data() {
     return {

+ 1 - 1
src/views/bonus/bonus-list.vue

@@ -50,7 +50,7 @@ import {fetchBonusList, fetchBonusDetail} from '@/api/bonus'
 import {getScreenWidth} from "@/utils";
 
 export default {
-  name: 'bonusList',
+  name: 'PreviousBonus',
   data() {
     return {
 			tableData: [],

+ 1 - 1
src/views/bonus/historical-cumulative-bonus.vue

@@ -21,7 +21,7 @@
 import {fetchHistoricalCumulativeBonus} from '@/api/bonus'
 
 export default {
-  name: 'historicalCumulativeBonus',
+  name: 'HistoricalCumulativeBonus',
   data() {
     return {
 			tableData: [],

+ 43 - 12
src/views/config/receive-address-list.vue → src/views/config/shipping-address-list.vue

@@ -1,21 +1,45 @@
 <template>
   <div class="app-container" v-loading="listLoading">
     <el-table :data="list" border fit highlight-current-row>
-      <el-table-column align="center" :label="$t('config.consignee')" prop="CONSIGNEE"></el-table-column>
-			<el-table-column align="center" :label="$t('shop.phoneNumber')" prop="MOBILE"></el-table-column>
-      <el-table-column align="center" :label="$t('config.detailedAddress')" prop="ADDRESS"></el-table-column>
-      <el-table-column align="center" :label="$t('config.city')" prop="CITY_NAME"></el-table-column>
-      <el-table-column align="center" :label="$t('config.localGovernmentArea')" prop="LGA_NAME"></el-table-column>
-      <el-table-column align="center" :label="$t('config.state')" prop="PROVINCE_NAME"></el-table-column>
-      <el-table-column align="center" :label="$t('config.default')" prop="IS_DEFAULT">
+      <el-table-column align="center" :label="$t('config.consignee')" prop="CONSIGNEE" min-width="100px">
+				<template slot-scope="{row}">
+					<span style="word-break: keep-all; word-wrap: break-word; white-space: pre-wrap;">{{ row.CONSIGNEE }}</span>
+				</template>
+			</el-table-column>
+			<el-table-column align="center" :label="$t('shop.phoneNumber')" prop="MOBILE" min-width="130px">
+				<template slot-scope="{row}">
+					<span style="word-break: keep-all; word-wrap: break-word; white-space: pre-wrap;">{{ row.MOBILE }}</span>
+				</template>
+			</el-table-column>
+      <el-table-column align="center" :label="$t('config.detailedAddress')" prop="ADDRESS" min-width="140px">
+				<template slot-scope="{row}">
+					<span style="word-break: keep-all; word-wrap: break-word; white-space: pre-wrap;">{{ row.ADDRESS }}</span>
+				</template>
+			</el-table-column>
+      <el-table-column align="center" :label="$t('config.city')" prop="CITY_NAME" min-width="140px">
+				<template slot-scope="{row}">
+					<span style="word-break: keep-all; word-wrap: break-word; white-space: pre-wrap;">{{ row.CITY_NAME }}</span>
+				</template>
+			</el-table-column>
+      <el-table-column align="center" :label="$t('config.localGovernmentArea')" prop="LGA_NAME" min-width="200px">
+				<template slot-scope="{row}">
+					<span style="word-break: keep-all; word-wrap: break-word; white-space: pre-wrap;">{{ row.LGA_NAME }}</span>
+				</template>
+			</el-table-column>
+      <el-table-column align="center" :label="$t('config.state')" prop="PROVINCE_NAME">
+				<template slot-scope="{row}">
+					<span style="word-break: keep-all; word-wrap: break-word; white-space: pre-wrap;">{{ row.PROVINCE_NAME }}</span>
+				</template>
+			</el-table-column>
+      <el-table-column align="center" :label="$t('config.default')" prop="IS_DEFAULT" min-width="130px">
         <template slot-scope="{row}">
 					<el-switch size="small" v-model="row.IS_DEFAULT" active-value="1" inactive-value="0" @change="changeDefault($event, row)"></el-switch>
         </template>
       </el-table-column>
-      <el-table-column align="center" :label="$t('common.action')" min-width="90px">
+      <el-table-column align="center" :label="$t('common.action')">
         <template slot-scope="{row}">
 						<el-button type="text" size="mini" @click="handleEdit(row)">{{ $t('common.edit') }}</el-button>
-						<el-button type="text" size="mini" @click="handleDelete(row.ID)">{{ $t('common.delete') }}</el-button>
+						<el-button type="text" size="mini" @click="handleDelete(row.ID)" style="color: red;">{{ $t('common.delete') }}</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -28,7 +52,7 @@
 		<el-dialog :title="$t('config.createAddress')" :width="screenWidth" :visible.sync="dialog" v-loading="dialogLoading" style="margin-top: -70px;">
 			<el-form ref="dataForm" :model="dataForm" :label-position="labelPosition" style="margin-top: -30px; margin-bottom: -25px;">
 				<el-row :gutter="1">
-					<el-col :xs="24" :sm="24" :lg="24">
+					<el-col :xs="24" :sm="24" :lg="12">
 						<el-form-item :label="$t('config.consignee')" prop="consignee" required style="margin-bottom: 10px;">
 							<el-input size="small" v-model="dataForm.consignee" type="text" />
 						</el-form-item>
@@ -64,7 +88,7 @@
 		<el-dialog :title="$t('config.editAddress')" :width="screenWidth" :visible.sync="dialogEdit" v-loading="editLoading" style="margin-top: -70px;">
 			<el-form ref="editForm" :model="editForm" :label-position="labelPosition" style="margin-top: -30px; margin-bottom: -25px;">
 				<el-row :gutter="3">
-					<el-col :xs="24" :sm="24" :lg="24">
+					<el-col :xs="24" :sm="24" :lg="12">
 						<el-input size="small" v-model="editForm.id" type="text" v-show="false" />
 						<el-form-item :label="$t('config.consignee')" prop="consignee" required style="margin-bottom: 10px;">
 							<el-input size="small" v-model="editForm.consignee" type="text" />
@@ -107,7 +131,7 @@ import Pagination from '@/components/Pagination'
 import {getScreenWidth} from "@/utils";
 
 export default {
-  name: 'receiveAddressList',
+  name: 'ShippingAddress',
   components: { Pagination },
   directives: { waves },
   data() {
@@ -231,6 +255,7 @@ export default {
 			this.$confirm(this.$t('common.deleteTips'), this.$t('common.hint'), {
 				confirmButtonText: this.$t('common.confirm'),
 				cancelButtonText: this.$t('common.cancel'),
+				customClass: 'csClass',
 				type: 'warning'
 			}).then(() => {
 				const data = { selected: [id]}
@@ -292,3 +317,9 @@ export default {
   }
 }
 </script>
+
+<style>
+.csClass{
+	width: 360px;
+}
+</style>

+ 11 - 1
src/views/dashboard/admin/index.vue

@@ -2,7 +2,7 @@
   <div class="dashboard-editor-container" v-loading="loading">
     <!-- <github-corner class="github-corner" /> -->
     <el-row  class="system-carousel">
-      <el-carousel trigger="click" indicator-position="none" :height="bannerHeight+'px'" style="max-height:350px;">
+      <el-carousel trigger="click" indicator-position="none" :height="bannerHeight+'px'" style="max-height:350px;" :interval="6000" arrow="always" :indicator-position="outside">
         <el-carousel-item v-for="(item,key) in slides" :key="key">
           <template v-if="item.TYPE==='1'">
             <router-link :to="`/shop/index`" target="_self" class="islide">
@@ -144,6 +144,7 @@ export default {
 				CREATED_AT: '',
 			},
 
+			outside: 'outside',
 			screenWidth: getScreenWidth() > 600 ? '70%' : getScreenWidth() + 'px',
 			labelPosition: getScreenWidth() > 600 ? 'right' : 'top',
     }
@@ -286,4 +287,13 @@ export default {
     padding: 8px;
   }
 }
+
+
+::v-deep .el-carousel__button {
+	border: 1px solid gray;
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+
+}
 </style>

+ 30 - 6
src/views/finance/recharge-list.vue

@@ -66,9 +66,10 @@
 				class="avatar-uploader"
 				:action="uploadUrl"
 				:show-file-list="false"
+				:headers="uploaderHeaders"
 				:data="uploaderData"
 				:on-success="handleSuccess"
-				:before-upload="beforeUpload"
+				:before-upload="uploaderHandleBefore"
 				:on-error="handleError">
 				<img v-if="imageUrl" :src="imageUrl" class="avatar" alt="" />
 				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
@@ -87,7 +88,7 @@ import {getScreenWidth} from "@/utils"
 import {integer, range, required} from "@/utils/rules"
 
 export default {
-	name: 'rechargeList',
+	name: 'RechargeDetails',
 	components: { Pagination },
 	directives: { waves },
 	filters: {
@@ -143,6 +144,11 @@ export default {
 			uploaderData: {
 				uploadToken: '',
 			},
+			uploaderHeaders: {
+				'Device-Type': 'pc',
+				'Suppress-Response-Code': '1',
+				'Authorization': '',
+			},
 		}
 	},
 	created() {
@@ -209,21 +215,39 @@ export default {
 		},
 		uploadAgain(id) {
 			this.viewVoucher = false
-			this.handleUpload(id)
+			// this.handleUpload(id)
 		},
 		handleUpload(id) {
 			// 获取上传token
 			fetchToken().then(response => {
+				this.uploaderHeaders.Authorization = process.env.VUE_APP_ACCESS_TOKEN_PREFIX + response.data
 				this.uploaderData.uploadToken = response.data
 
 				setTimeout(() => {
+					this.auditId = id
+					this.uploadUrl = `${process.env.VUE_APP_BASE_API}/v1/finance/prove-add?id=${this.auditId}`
+					this.uploadVoucher = true
+
 					this.listLoading = false
 				}, 0.5 * 1000)
 			})
+		},
+		uploaderHandleBefore() {
+			this.$message({
+				message: 'Uploading, please hold on. Do not close the window!', // 正在上传,请稍后。请勿关闭窗口!
+				type: 'warning',
+				duration: 500,
+			})
+			this.uploaderLoading = true
+
+			fetchToken().then(response => {
+				this.uploaderHeaders.Authorization = process.env.VUE_APP_ACCESS_TOKEN_PREFIX + response.data
+				this.uploaderData.uploadToken = response.data
 
-			this.auditId = id
-			this.uploadUrl = `${process.env.VUE_APP_BASE_API}/v1/finance/prove-add?id=${this.auditId}`
-			this.uploadVoucher = true
+				setTimeout(() => {
+					this.listLoading = false
+				}, 3 * 1000)
+			})
 		},
 		handleSuccess(res, file) {
 			this.imageUrl = URL.createObjectURL(file.raw);

+ 1 - 1
src/views/finance/transfer-list.vue

@@ -161,7 +161,7 @@ import usersInfo from "@/utils/usersInfo";
 import {getScreenWidth} from "@/utils";
 
 export default {
-	name: 'transferList',
+	name: 'Transfer',
 	components: { Pagination },
 	directives: { waves },
 	data() {

+ 108 - 82
src/views/login/index.vue

@@ -1,83 +1,104 @@
 <template>
   <div class="login-container">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
-      <div class="title-container">
-        <h3 class="title">
-          {{ $t('login.title') }}
-        </h3>
-        <lang-select class="set-language" />
-      </div>
-      <el-form-item prop="username">
-        <span class="svg-container">
-          <svg-icon icon-class="user" />
-        </span>
-        <el-input
-          ref="username"
-          v-model="loginForm.username"
-          :placeholder="$t('login.username')"
-          name="username"
-          type="text"
-          tabindex="1"
-          autocomplete="on"
-          @change="refreshLoginVerifyStatus"
-        />
-      </el-form-item>
-
-      <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
-        <el-form-item prop="password">
-          <span class="svg-container">
-            <svg-icon icon-class="password" />
-          </span>
-          <el-input
-            :key="passwordType"
-            ref="password"
-            v-model="loginForm.password"
-            :type="passwordType"
-            :placeholder="$t('login.password')"
-            name="password"
-            tabindex="2"
-            autocomplete="on"
-            @keyup.native="checkCapslock"
-            @blur="capsTooltip = false"
-            @keyup.enter.native="handleLogin"
-          />
-          <span class="show-pwd" @click="showPwd">
-            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
-          </span>
-        </el-form-item>
-      </el-tooltip>
-      <el-form-item label-width="0px" class="border-bottom key-name" v-show="isLoginVerify">
-        <el-input
-        type="verifyCode" 
-        v-model="loginForm.verifyCode" 
-        auto-complete="off" 
-        @keyup.enter.native="handleLogin" 
-        :placeholder="$t('login.verifyCode')">
-        </el-input>
-      </el-form-item>
-      <el-image :src="captchaUrl" @click="changeCaptcha" v-show="isLoginVerify" class="login-captcha">
-      </el-image>
-      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">
-        {{ $t('login.logIn') }}
-      </el-button>
-
-      <!-- <div style="position:relative">
-        <div class="tips">
-          <span>{{ $t('login.username') }} : admin</span>
-          <span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
-        </div>
-        <div class="tips">
-          <span style="margin-right:18px;">
-            {{ $t('login.username') }} : editor
-          </span>
-          <span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
-        </div>
-
-        <el-button class="thirdparty-button" type="primary" @click="showDialog=true">
-          {{ $t('login.thirdparty') }}
-        </el-button>
-      </div> -->
-    </el-form>
+<!--			 :style="{'background-image': `url(${require('@/assets/user_images/login-register.jpg')})`, 'background-size': `${screenWidth}, ${screenHeight}`, 'background-repeat': 'no-repeat'}"-->
+<!--		<el-container>-->
+<!--			<el-aside width="200px">-->
+<!--			</el-aside>-->
+
+		<el-row>
+
+			<el-col :xs="0" :sm="12" :lg="12">
+					<img src="@/assets/user_images/simple-img.jpg" class="login-form"  width="100%" alt="" style="margin-left: 10%" />
+			</el-col>
+
+			<el-col :xs="0" :sm="1" :lg="1">
+				<img src="@/assets/user_images/divider.png" class="user-avatar" height="330px" style="margin-top: 160px" alt=""/>
+			</el-col>
+
+			<el-col :xs="24" :sm="8" :lg="8">
+				<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
+						<div class="title-container">
+							<h3 class="title">
+								{{ $t('login.title') }}
+							</h3>
+							<lang-select class="set-language" />
+						</div>
+						<el-form-item prop="username">
+					<span class="svg-container">
+						<svg-icon icon-class="user" />
+					</span>
+							<el-input
+								ref="username"
+								v-model="loginForm.username"
+								:placeholder="$t('login.username')"
+								name="username"
+								type="text"
+								tabindex="1"
+								autocomplete="on"
+								size="small"
+								@change="refreshLoginVerifyStatus"
+							/>
+						</el-form-item>
+
+						<el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
+							<el-form-item prop="password">
+						<span class="svg-container">
+							<svg-icon icon-class="password" />
+						</span>
+								<el-input
+									:key="passwordType"
+									ref="password"
+									v-model="loginForm.password"
+									:type="passwordType"
+									:placeholder="$t('login.password')"
+									name="password"
+									tabindex="2"
+									autocomplete="on"
+									size="small"
+									@keyup.native="checkCapslock"
+									@blur="capsTooltip = false"
+									@keyup.enter.native="handleLogin"
+								/>
+								<span class="show-pwd" @click="showPwd">
+							<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+						</span>
+							</el-form-item>
+						</el-tooltip>
+						<el-form-item label-width="0px" class="border-bottom key-name" v-show="isLoginVerify">
+							<el-input
+								type="verifyCode"
+								v-model="loginForm.verifyCode"
+								auto-complete="off"
+								@keyup.enter.native="handleLogin"
+								:placeholder="$t('login.verifyCode')">
+							</el-input>
+						</el-form-item>
+						<el-image :src="captchaUrl" @click="changeCaptcha" v-show="isLoginVerify" class="login-captcha">
+						</el-image>
+						<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">
+							{{ $t('login.logIn') }}
+						</el-button>
+
+						<!-- <div style="position:relative">
+							<div class="tips">
+								<span>{{ $t('login.username') }} : admin</span>
+								<span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
+							</div>
+							<div class="tips">
+								<span style="margin-right:18px;">
+									{{ $t('login.username') }} : editor
+								</span>
+								<span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
+							</div>
+
+							<el-button class="thirdparty-button" type="primary" @click="showDialog=true">
+								{{ $t('login.thirdparty') }}
+							</el-button>
+						</div> -->
+					</el-form>
+			</el-col>
+		</el-row>
+<!--		</el-container>-->
 
     <!-- <el-dialog :title="$t('login.thirdparty')" :visible.sync="showDialog">
       {{ $t('login.thirdpartyTips') }}
@@ -94,6 +115,7 @@ import { validUsername } from '@/utils/validate'
 import LangSelect from '@/components/LangSelect'
 import SocialSign from './components/SocialSignin'
 import usersInfo from '@/utils/usersInfo'
+import {getScreenHeight, getScreenWidth} from "@/utils";
 
 export default {
   name: 'Login',
@@ -131,7 +153,10 @@ export default {
       isLoginVerify: false,
       captchaUrl: '',
       pageId:'',
-      otherQuery: {}
+      otherQuery: {},
+			banner: '',
+			screenWidth: getScreenWidth() + 'px',
+			screenHeight: getScreenHeight() + 'px',
     }
   },
   watch: {
@@ -219,7 +244,7 @@ export default {
             //   }
             //   this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
             // })
-            
+
         } else {
           console.log('error submit!!')
           return false
@@ -245,10 +270,10 @@ export default {
     siteConfig() {
       // this.$store.dispatch('settings/getWebSetting', {})
       //   .then(response => {
-          
+
       //   })
       //   .catch((error) => {
-          
+
       //   })
     },
     getOtherQuery(query) {
@@ -337,6 +362,7 @@ $light_gray:#eee;
   min-height: 100%;
   width: 100%;
   background-color: $bg;
+	//background-image: url("/assets/user_images/login-register.jpg");
   overflow: hidden;
 
   .login-form {

+ 23 - 17
src/views/profile/components/Account.vue

@@ -1,21 +1,27 @@
 <template>
-  <el-form wi v-loading="loading">
-    <el-form-item :label="$t('shop.memberCode')">
-      <el-input size="medium" v-model.trim="user.name" prefix-icon="el-icon-user-solid" readonly />
-    </el-form-item>
-		<el-form-item :label="$t('shop.memberName')">
-			<el-input size="medium" v-model.trim="user.realName" prefix-icon="el-icon-user" readonly />
-		</el-form-item>
-		<el-form-item :label="$t('shop.phoneNumber')">
-			<el-input size="medium" v-model.trim="user.mobile" prefix-icon="el-icon-phone-outline" readonly />
-		</el-form-item>
-    <el-form-item :label="$t('user.email')">
-      <el-input size="medium" v-model.trim="user.email" prefix-icon="el-icon-s-comment" />
-    </el-form-item>
-    <el-form-item>
-      <el-button type="primary" size="small" @click="submit">{{ $t('common.save') }}</el-button>
-    </el-form-item>
-  </el-form>
+	<el-card style="margin: 2px 1px;">
+		<div slot="header" class="clearfix">
+			<span>{{ $t('profile.personalInformation') }}</span>
+		</div>
+
+		<el-form wi v-loading="loading">
+			<el-form-item :label="$t('shop.memberCode')">
+				<el-input size="medium" v-model.trim="user.name" prefix-icon="el-icon-user-solid" readonly />
+			</el-form-item>
+			<el-form-item :label="$t('shop.memberName')">
+				<el-input size="medium" v-model.trim="user.realName" prefix-icon="el-icon-user" readonly />
+			</el-form-item>
+			<el-form-item :label="$t('shop.phoneNumber')">
+				<el-input size="medium" v-model.trim="user.mobile" prefix-icon="el-icon-phone-outline" readonly />
+			</el-form-item>
+			<el-form-item :label="$t('user.email')">
+				<el-input size="medium" v-model.trim="user.email" prefix-icon="el-icon-s-comment" />
+			</el-form-item>
+			<el-form-item>
+				<el-button type="primary" size="small" @click="submit">{{ $t('common.save') }}</el-button>
+			</el-form-item>
+		</el-form>
+	</el-card>
 </template>
 
 <script>

+ 20 - 14
src/views/profile/components/LoginPassword.vue

@@ -1,18 +1,24 @@
 <template>
-  <el-form wi v-loading="loading">
-    <el-form-item :label="$t('profile.originalPassword')">
-      <el-input size="medium" type="password" v-model.trim="password.oldPassword" prefix-icon="el-icon-lock" show-password />
-    </el-form-item>
-		<el-form-item :label="$t('profile.newPassword')">
-			<el-input size="medium" type="password" v-model.trim="password.password" prefix-icon="el-icon-lock" show-password />
-		</el-form-item>
-		<el-form-item :label="$t('profile.confirmPassword')">
-			<el-input size="medium" type="password" v-model.trim="password.verifyPassword" prefix-icon="el-icon-lock" show-password />
-		</el-form-item>
-    <el-form-item>
-      <el-button type="primary" size="small" @click="submit">{{ $t('common.save') }}</el-button>
-    </el-form-item>
-  </el-form>
+	<el-card style="margin: 2px 1px;">
+		<div slot="header" class="clearfix">
+			<span>{{ $t('profile.loginPassword') }}</span>
+		</div>
+
+		<el-form v-loading="loading">
+			<el-form-item :label="$t('profile.originalPassword')">
+				<el-input size="medium" type="password" v-model.trim="password.oldPassword" prefix-icon="el-icon-lock" show-password />
+			</el-form-item>
+			<el-form-item :label="$t('profile.newPassword')">
+				<el-input size="medium" type="password" v-model.trim="password.password" prefix-icon="el-icon-lock" show-password />
+			</el-form-item>
+			<el-form-item :label="$t('profile.confirmPassword')">
+				<el-input size="medium" type="password" v-model.trim="password.verifyPassword" prefix-icon="el-icon-lock" show-password />
+			</el-form-item>
+			<el-form-item>
+				<el-button type="primary" size="small" @click="submit">{{ $t('common.save') }}</el-button>
+			</el-form-item>
+		</el-form>
+	</el-card>
 </template>
 
 <script>

+ 20 - 14
src/views/profile/components/PaymentPassword.vue

@@ -1,18 +1,24 @@
 <template>
-	<el-form wi v-loading="loading">
-		<el-form-item :label="$t('profile.originalPassword')">
-			<el-input size="medium" type="password" v-model.trim="password.oldPassword" prefix-icon="el-icon-lock" show-password />
-		</el-form-item>
-		<el-form-item :label="$t('profile.newPassword')">
-			<el-input size="medium" type="password" v-model.trim="password.payPassword" prefix-icon="el-icon-lock" show-password />
-		</el-form-item>
-		<el-form-item :label="$t('profile.confirmPassword')">
-			<el-input size="medium" type="password" v-model.trim="password.verifyPassword" prefix-icon="el-icon-lock" show-password />
-		</el-form-item>
-		<el-form-item>
-			<el-button type="primary" size="small" @click="submit">{{ $t('common.save') }}</el-button>
-		</el-form-item>
-	</el-form>
+	<el-card style="margin: 2px 1px;">
+		<div slot="header" class="clearfix">
+			<span>{{ $t('profile.paymentPassword') }}</span>
+		</div>
+
+		<el-form wi v-loading="loading">
+			<el-form-item :label="$t('profile.originalPassword')">
+				<el-input size="medium" type="password" v-model.trim="password.oldPassword" prefix-icon="el-icon-lock" show-password />
+			</el-form-item>
+			<el-form-item :label="$t('profile.newPassword')">
+				<el-input size="medium" type="password" v-model.trim="password.payPassword" prefix-icon="el-icon-lock" show-password />
+			</el-form-item>
+			<el-form-item :label="$t('profile.confirmPassword')">
+				<el-input size="medium" type="password" v-model.trim="password.verifyPassword" prefix-icon="el-icon-lock" show-password />
+			</el-form-item>
+			<el-form-item>
+				<el-button type="primary" size="small" @click="submit">{{ $t('common.save') }}</el-button>
+			</el-form-item>
+		</el-form>
+	</el-card>
 </template>
 
 <script>

+ 21 - 15
src/views/profile/index.vue

@@ -5,24 +5,30 @@
 
         <el-col :span="8" :xs="24">
           <user-card :user="user" />
-        </el-col>
 
-        <el-col :span="8" :xs="24">
-          <el-card style="margin: 2px 1px;">
-            <el-tabs v-model="activeTab">
-              <el-tab-pane :label="$t('profile.account')" name="account">
-                <account :user="user" />
-              </el-tab-pane>
-              <el-tab-pane :label="$t('profile.loginPassword')" name="loginPassword">
-                <login-password />
-              </el-tab-pane>
-              <el-tab-pane :label="$t('profile.paymentPassword')" name="paymentPassword">
-                <payment-password />
-              </el-tab-pane>
-            </el-tabs>
-          </el-card>
+					<account :user="user" />
+
+					<login-password />
+
+					<payment-password />
         </el-col>
 
+<!--        <el-col :span="8" :xs="24">-->
+<!--          <el-card style="margin: 2px 1px;">-->
+<!--            <el-tabs v-model="activeTab">-->
+<!--              <el-tab-pane :label="$t('profile.account')" name="account">-->
+<!--                <account :user="user" />-->
+<!--              </el-tab-pane>-->
+<!--              <el-tab-pane :label="$t('profile.loginPassword')" name="loginPassword">-->
+<!--                <login-password />-->
+<!--              </el-tab-pane>-->
+<!--              <el-tab-pane :label="$t('profile.paymentPassword')" name="paymentPassword">-->
+<!--                <payment-password />-->
+<!--              </el-tab-pane>-->
+<!--            </el-tabs>-->
+<!--          </el-card>-->
+<!--        </el-col>-->
+
       </el-row>
     </div>
   </div>

+ 169 - 133
src/views/shop/ba-dec-order-list.vue

@@ -1,102 +1,116 @@
 <template>
-  <div class="app-container">
-    <el-table
-      :key="tableKey"
-      v-loading="listLoading"
-      :data="list"
-      border
-      fit
-      highlight-current-row
-      style="width: 100%;"
-    >
-      <el-table-column width="130px" align="center" :label="$t('shop.productCode')" prop="SKU_CODE">
-        <template slot-scope="{row}">
-          <span>{{ row.SKU_CODE }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column width="250px" align="center" :label="$t('shop.productName')" prop="GOODS_TITLE">
-        <template slot-scope="{row}">
-          <span style="height: auto; display:-webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:1;">
-						{{ row.GOODS_TITLE }}
-					</span>
-        </template>
-      </el-table-column>
-      <el-table-column width="120px" align="center" :label="$t('shop.productBV')" prop="REAL_PV">
-        <template slot-scope="{row}">
-          <span>{{ row | bvFilter }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column width="120px" align="center" :label="$t('shop.productPrice')" prop="REAL_PRICE">
-        <template slot-scope="{row}">
-          <span>{{ row.REAL_PRICE }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column width="80px" align="center" :label="$t('shop.qty')" prop="BUY_NUMS">
-        <template slot-scope="{row}">
-          <span>{{ row.BUY_NUMS }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column width="120px" align="center" :label="$t('shop.totalPrice')" prop="TOTAL_AMOUNT">
-        <template slot-scope="{row}">
-          <span>{{ row.TOTAL_AMOUNT }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column width="80px" align="center" :label="$t('shop.taxRate')" prop="TAX_RATE">
-        <template slot-scope="{row}">
-          <span>{{ row.TAX_RATE / 100 }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column width="120px" align="center" :label="$t('shop.taxAmount')" prop="TAX_AMOUNT">
-        <template slot-scope="{row}">
-          <span>{{ row.TAX_AMOUNT }}</span>
-        </template>
-      </el-table-column>
-			<el-table-column width="200px" align="center" :label="$t('shop.decCode')" prop="DEC_SN">
+	<div class="app-container">
+		<el-table
+			v-loading="listLoading"
+			fit
+			lazy
+			highlight-current-row
+			:data="tableData"
+		>
+			<el-table-column type="expand">
+				<template slot-scope="props">
+					<el-col :xs="18" :sm="18" :lg="18">
+						<el-card class="box-card" shadow="hover">
+							<el-table v-loading="listLoading" fit lazy highlight-current-row :data="props.row.hasChildren">
+								<el-table-column align="center" :label="$t('shop.productCode')" prop="SKU_CODE">
+									<template slot-scope="{row}">
+										<span style="white-space: nowrap;">{{ row.SKU_CODE }}</span>
+									</template>
+								</el-table-column>
+								<el-table-column min-width="200px" align="center" :label="$t('shop.productName')" prop="GOODS_TITLE">
+									<template slot-scope="{row}">
+										<span>{{ row.GOODS_TITLE }}</span>
+									</template>
+								</el-table-column >
+								<el-table-column align="center" :label="$t('shop.qty')" prop="BUY_NUMS">
+									<template slot-scope="{row}">
+										<span style="white-space: nowrap;">{{ row.BUY_NUMS }}</span>
+									</template>
+								</el-table-column>
+								<el-table-column align="center" :label="$t('shop.productPrice')">
+									<template slot-scope="{row}">
+										<span style="white-space: nowrap;">{{ $t('currency.sign') }} {{ row.REAL_PRICE | amountFilter }}</span>
+									</template>
+								</el-table-column>
+								<el-table-column align="center" :label="$t('shop.totalPrice')">
+									<template slot-scope="{row}">
+										<span style="white-space: nowrap;">{{ $t('currency.sign') }} {{ row | priceAmountFilter | amountFilter }}</span>
+									</template>
+								</el-table-column>
+								<el-table-column align="center" :label="$t('shop.totalBV')">
+									<template slot-scope="{row}">
+										<span style="white-space: nowrap;">{{ row | bvFilter | amountFilter }}</span>
+									</template>
+								</el-table-column>
+								<el-table-column align="center" :label="$t('shop.taxRate')">
+									<template slot-scope="{row}">
+										<span style="white-space: nowrap;">{{ row.TAX_RATE / 100 }}</span>
+									</template>
+								</el-table-column>
+								<el-table-column align="center" :label="$t('shop.totalTaxAmount')">
+									<template slot-scope="{row}">
+										<span style="white-space: nowrap;">{{ $t('currency.sign') }} {{ row | taxAmountFilter | amountFilter }}</span>
+									</template>
+								</el-table-column>
+							</el-table>
+						</el-card>
+					</el-col>
+				</template>
+			</el-table-column>
+			<el-table-column align="center" :label="$t('shop.decCode')" prop="DEC_SN" min-width="120px" style="white-space: pre-wrap;">
+				<template slot-scope="{row}">
+					<span style="white-space: pre-wrap; display: inline-block; word-break: break-all;">{{ row.ORDER_SN }}</span>
+				</template>
+			</el-table-column>
+			<el-table-column align="center" :label="$t('shop.orderCode')" prop="SN" min-width="120px" style="white-space: pre-wrap;">
+				<template slot-scope="{row}">
+					<span style="white-space: pre-wrap; display: inline-block; word-break: break-all;">{{ row.ORDER_SN }}</span>
+				</template>
+			</el-table-column>
+			<el-table-column align="center" :label="$t('shop.memberCode')" prop="USER_NAME" min-width="150px"></el-table-column>
+			<el-table-column align="center" :label="$t('shop.memberName')" prop="REAL_NAME" min-width="150px">
+				<template slot-scope="{row}">
+					<span style="white-space: pre-wrap; display: inline-block; min-width: 120px; word-break: break-all;">{{ row.REAL_NAME }}</span>
+				</template>
+			</el-table-column>
+			<el-table-column align="center" :label="$t('shop.recipientName')" prop="CONSIGNEE" min-width="150px">
+				<template slot-scope="{row}">
+					<span style="white-space: pre-wrap; display: inline-block; min-width: 120px; word-break: break-all;">{{ row.CONSIGNEE }}</span>
+				</template>
+			</el-table-column>
+			<el-table-column align="center" :label="$t('shop.phoneNumber')" prop="MOBILE" min-width="130px"></el-table-column>
+			<el-table-column align="center" :label="$t('shop.shippingAddress')" prop="FULL_ADDRESS" min-width="140px">
+				<template slot-scope="{row}">
+					<span>{{ row.FULL_ADDRESS }}</span>
+				</template>
+			</el-table-column>
+			<el-table-column align="center" :label="$t('shop.payment')" prop="PAY_TYPE" min-width="100px"></el-table-column>
+			<el-table-column align="center" :label="$t('shop.createdTime')" prop="CREATED_AT" min-width="110px">
+				<template slot-scope="{row}">
+					<span>{{ row.CREATED_AT | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
+				</template>
+			</el-table-column>
+			<el-table-column align="center" :label="$t('shop.payTime')" prop="PAY_AT" min-width="110px">
 				<template slot-scope="{row}">
-					<span>{{ row.DEC_SN }}</span>
+					<span>{{ row.PAY_AT | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
 				</template>
 			</el-table-column>
-      <el-table-column width="200px" align="center" :label="$t('shop.orderCode')" prop="ORDER_SN">
-        <template slot-scope="{row}">
-          <span>{{ row.ORDER_SN }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column width="230px" align="center" :label="$t('shop.memberCode')" prop="USER_NAME">
-        <template slot-scope="{row}">
-          <span>{{ row.USER_NAME }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column width="230px" align="center" :label="$t('shop.memberName')" prop="REAL_NAME">
-        <template slot-scope="{row}">
-          <span>{{ row.REAL_NAME }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column width="150px" align="center" :label="$t('shop.shippingAddress')" prop="FULL_ADDRESS">
-        <template slot-scope="{row}">
-          <span>{{ row.FULL_ADDRESS }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column width="150px" align="center" :label="$t('shop.createdTime')" prop="CREATED_AT">
-        <template slot-scope="{row}">
-          <span>{{ row.CREATED_AT | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column class-name="status-col" align="center" width="100" :label="$t('shop.payStatus')" prop="STATUS">
-        <template slot-scope="{row}">
-          <el-tag :type="row.STATUS | statusFilter">
-            {{ row.STATUS }}
-          </el-tag>
-        </template>
-      </el-table-column>
-			<el-table-column width="100px" align="center" :label="$t('shop.action')" class-name="small-padding fixed-width">
+			<el-table-column align="center" :label="$t('shop.payStatus')" prop="STATUS" min-width="110px">
 				<template slot-scope="{row}">
-					<el-button type="primary" size="mini" @click="handleDownload(row.ORDER_SN)">{{ $t('shop.download') }}</el-button>
+					<el-tag :type="row.STATUS | statusFilter">
+						{{ row.STATUS }}
+					</el-tag>
 				</template>
 			</el-table-column>
-    </el-table>
+			<el-table-column align="center" :label="$t('shop.action')" class-name="small-padding fixed-width">
+				<template slot-scope="{row}">
+					<el-button type="text" size="mini" @click="handleDownload(row.ORDER_SN)">{{ $t('shop.download') }}</el-button>
+				</template>
+			</el-table-column>
+		</el-table>
 
-    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
-  </div>
+		<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getList" />
+	</div>
 </template>
 
 <script>
@@ -104,54 +118,65 @@ import {downloadBaDecOrder, fetchBaDecOrderList} from '@/api/shop'
 import waves from '@/directive/waves'
 import tool from '@/utils/tool'
 import Pagination from '@/components/Pagination'
+import {formatAmount, getScreenWidth} from "@/utils"
 
 export default {
-  name: 'baDecOrderList',
-  components: { Pagination },
-  directives: { waves },
-  filters: {
+	name: 'BrandAmbassadorWelcomeListing',
+	components: { Pagination },
+	directives: { waves },
+	filters: {
 		bvFilter(row) {
 			return tool.calculateBV(row.REAL_PV, row.BUY_NUMS)
 		},
-    taxAmountFilter(row) {
-      return tool.calculateTax(row.REAL_PV, row.BUY_NUMS)
-    },
-    statusFilter(status) {
-      const statusMap = {
-        Unpaid: 'info',
-        Paid: 'success'
-      }
-      return statusMap[status]
-    }
-  },
-  data() {
-    return {
-      tableKey: 0,
-      list: null,
-      total: 0,
-      listLoading: true,
-      listQuery: {
-        page: 1,
-        pageSize: 20
-      },
-    }
-  },
-  created() {
-    // 列表查询
-    this.getList()
-  },
-  methods: {
-    getList() {
-      this.listLoading = true
+		taxAmountFilter(row) {
+			return tool.calculateTax(row.REAL_PRICE, row.BUY_NUMS)
+		},
+		priceAmountFilter(row) {
+			return tool.formatPrice(row.REAL_PRICE, row.BUY_NUMS)
+		},
+		amountFilter(amount) {
+			return formatAmount(amount)
+		},
+		statusFilter(status) {
+			const statusMap = {
+				Unpaid: 'info',
+				Paid: 'success'
+			}
+			return statusMap[status]
+		}
+	},
+	data() {
+		return {
+			tableKey: 0,
+			total: 0,
+			tableData: [],
+			listLoading: true,
+			downloadLoading: false,
+			listQuery: {
+				v: 2,
+				page: 1,
+				pageSize: 20
+			},
+			childrenNode: [],
+			screenWidth: getScreenWidth() > 600 ? '500px' : getScreenWidth() + 'px',
+			labelPosition: getScreenWidth() > 600 ? 'right' : 'top',
+		}
+	},
+	created() {
+		this.getList()
+	},
+	methods: {
+		getList() {
+			this.listLoading = true
 			fetchBaDecOrderList(this.listQuery).then(response => {
-        this.list = response.data.list
-        this.total = response.data.totalCount
+				this.tableData = response.data.list
+				this.total = +response.data.totalCount
 
-        setTimeout(() => {
-          this.listLoading = false
-        }, 1.5 * 1000)
-      })
-    },
+				setTimeout(() => {
+					this.listLoading = false
+				}, 0.5 * 1000)
+			})
+		},
 		handleDownload(orderSn) {
 			this.downloadLoading = true
 			downloadBaDecOrder(orderSn).then(response => {
@@ -165,6 +190,17 @@ export default {
 
 			this.downloadLoading = false
 		},
-  }
+	}
 }
 </script>
+
+<style>
+.el-table th.el-table__cell > .cell {
+	white-space: nowrap;
+}
+
+.el-table td.el-table__cell > .cell {
+	word-break: keep-all;
+	white-space: pre-wrap;
+}
+</style>

+ 408 - 41
src/views/shop/car-fund-products.vue

@@ -6,77 +6,177 @@
 			:data="tableData"
 			fit
 			highlight-current-row
-			style="width: 100%;"
 			ref="multipleTable"
 			@selection-change="handleSelectionChange"
 		>
-			<el-table-column type="selection" width="70" align="center"></el-table-column>
+			<el-table-column type="selection" width="50" align="center"></el-table-column>
 			<el-table-column align="center" type="index" width="50"></el-table-column>
-			<el-table-column :label="$t('shop.productName')" align="center" prop="GOODS_NAME">
+			<el-table-column :label="$t('shop.qty')" min-width="150" align="center">
+				<template slot-scope="{row, $index}">
+					<el-input-number size="mini" v-model="storeNums[$index]" :min="1" :max="Number(row.STORE_NUMS)" @change="handleInputNumber($event, row)"></el-input-number>
+				</template>
+			</el-table-column>
+			<el-table-column :label="$t('shop.productName')" min-width="140" align="center" prop="GOODS_NAME">
 				<template slot-scope="{row}">
-					<span>{{ row.GOODS_NAME }}</span>
+					<span style="word-break: keep-all;">{{ row.GOODS_NAME }}</span>
 				</template>
 			</el-table-column>
-			<el-table-column :label="$t('shop.productPicture')" align="center" min-width="70px" prop="GOODS_NAME">
+			<el-table-column :label="$t('shop.productPicture')" align="center" min-width="80px" prop="GOODS_NAME">
 				<template slot-scope="{row}">
 					<el-image
-						style="width: 70px; height: 70px"
+						style="width: 80px; height: 80px"
 						:src="tool.getArImage(row.COVER, '/files/')"
 						:preview-src-list="[tool.getArImage(row.COVER, '/files/')]"
 					>
 					</el-image>
 				</template>
 			</el-table-column>
-			<el-table-column :label="$t('shop.productPrice')" align="center" prop="SELL_PRICE">
+			<el-table-column :label="$t('shop.productPrice')" align="center" prop="SELL_PRICE" min-width="120px">
 				<template slot-scope="{row}">
-					<span>{{ row.SELL_PRICE }}</span>
+					<span>{{ row.SELL_PRICE | amountFilter }}</span>
 				</template>
 			</el-table-column>
-			<el-table-column :label="$t('shop.taxRate')" align="center" prop="TAX_RATE">
+			<el-table-column :label="$t('shop.taxRate')" align="center" prop="TAX_RATE" min-width="100px">
 				<template slot-scope="{row}">
 					<span>{{ row.TAX_RATE / 100  }}</span>
 				</template>
 			</el-table-column>
-			<el-table-column :label="$t('shop.taxAmount')" align="center">
+			<el-table-column :label="$t('shop.taxAmount')" align="center" min-width="120px">
 				<template slot-scope="{row}">
-					<span>{{ row | taxAmountFilter }}</span>
+					<span>{{ row | taxAmountFilter | amountFilter }}</span>
 				</template>
 			</el-table-column>
-			<el-table-column :label="$t('shop.inventory')" align="center" prop="STORE_NUMS">
+			<el-table-column :label="$t('shop.inventory')" align="center" prop="STORE_NUMS" min-width="120px">
 				<template slot-scope="{row}">
 					<span>{{ row.STORE_NUMS }}</span>
 				</template>
 			</el-table-column>
-			<el-table-column :label="$t('shop.inventory')" min-width="90" align="center">
-				<template slot-scope="scope">
-					<el-input-number size="mini" v-model="storeNums[scope.$index]" :min="1" :max="Number(scope.row.STORE_NUMS)" @change="(val)=>{handleInputNumber(val, scope.row)}"></el-input-number>
-				</template>
-			</el-table-column>
 		</el-table>
 
 		<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
 
-		<div class="white-box-footer" v-show="display" style="margin-top: 15px;">
+		<div class="white-box-footer" style="margin-top: 15px;">
 			<div class="flex data" style="float: left; display: inline-block; margin-top: 20px;">
 				<el-button type="primary" size="small" @click="settlement()" style="float: left;">{{ $t('shop.checkOut') }}</el-button>
 			</div>
 			<div class="flex data" style="float: right; display: inline-block; line-height: 35px; font-size: 14px; margin-top: 20px; border: 1px solid #dcdfe6; border-radius: 4px; padding: 0 15px;">
-				<div style="margin-right: 2rem; display: inline-block;">{{ $t('shop.productPrice') }}:{{ $t('currency.sign') }} {{ sellPriceSum }}</div>
-				<div style="display: inline-block;">{{ $t('shop.taxAmount') }}:{{ $t('currency.sign') }} {{ taxSum }}</div>
+				<div style="margin-right: 2rem; display: inline-block;">{{ $t('shop.productPrice') }}:{{ sellPriceSum }}</div>
+				<div style="display: inline-block;">{{ $t('shop.taxAmount') }}:{{ taxSum }}</div>
 			</div>
 		</div>
+
+		<!-- 购物车	-->
+		<el-dialog :title="$t('shop.productsSettlement')" :visible.sync="visibleShoppingCart" :width="screenWidth" style="margin-top: -95px;">
+			<div v-loading="loading">
+				<div class="white-box">
+					<el-table :data="goods" style="width: 100%" show-summary :summary-method="getSummaries">
+						<el-table-column :label="$t('shop.productPicture')" align="center" min-width="90px">
+							<template slot-scope="{row}">
+								<el-image
+									style="width: 80px; height: 80px"
+									:src="tool.getArImage(row.COVER, '/files/')"
+									:preview-src-list="[tool.getArImage(row.COVER, '/files/')]">
+								</el-image>
+							</template>
+						</el-table-column>
+						<el-table-column :label="$t('shop.productName')" prop="GOODS_NAME" align="center" min-width="130px"></el-table-column>
+						<el-table-column :label="$t('shop.qty')" prop="chose_num" align="center" min-width="90px"></el-table-column >
+						<el-table-column :label="$t('shop.productPrice')" prop="member_price" align="center" min-width="130px">
+							<template slot-scope="{row}">
+								<span>{{ row.member_price }}</span>
+							</template>
+						</el-table-column>
+						<el-table-column :label="$t('shop.totalPrice')" prop="member_price_plus" align="center" min-width="130px">
+							<template slot-scope="{row}">
+								<span>{{ row.member_price_plus }}</span>
+							</template>
+						</el-table-column>
+						<el-table-column :label="$t('shop.taxRate')" prop="TAX_RATE" align="center" min-width="70px">
+							<template slot-scope="{row}">
+								<span>{{ row.TAX_RATE / 100 }}</span>
+							</template>
+						</el-table-column>
+						<el-table-column :label="$t('shop.totalTaxAmount')" prop="tax_amount_plus" align="center" min-width="120px">
+							<template slot-scope="{row}">
+								<span>{{ row.tax_amount_plus }}</span>
+							</template>
+						</el-table-column>
+					</el-table>
+
+					<div class="white-box-footer" style=" padding: 10px; line-height: 10px;">
+						<el-row :gutter="40">
+							<el-col :xs="24" :sm="24" :lg="24">
+								<!-- 订单合计 -->
+								<div class="box address_box">
+									{{ $t('shop.totalOrders') }}:
+									<div class="sum">
+										<div class="sum_box">
+											<div>{{ $t('shop.paidAmount') }}</div>
+											<div>{{ pointsSum }}</div>
+										</div>
+										<div class="sum_box">
+											<div>{{ $t('shop.freight') }}</div>
+											<div>{{ pointFreight }}</div>
+										</div>
+									</div>
+								</div>
+								<!-- 支付方式/账户余额 -->
+								<div class="box address_box">
+									{{ $t('shop.selectPayment') }}:
+									<el-radio-group v-model="payType" @change='chosePayType'>
+										<div v-for="(item, index) in payList" :key='index' class="address">
+											<el-radio :label="item.label" border>
+												{{ item.name }}<span v-if="item.label === payType" style="color: tomato;">({{ cashCurrency }}: {{ userBalance[payType] }})</span>
+											</el-radio>
+										</div>
+									</el-radio-group>
+								</div>
+								<!-- 收货地址 -->
+								<div class="box address_box">
+									{{ $t('shop.selectAddress') }}:
+									<el-radio-group v-model="addressId" @change='choseAddress'>
+										<div class="address">
+											<el-radio :label="selfPickUpAddressId" border>{{ $t('shop.selfPickUp') }}</el-radio>
+										</div>
+										<div v-for="(item, index) in shippingAddressList" :key='index' class="address">
+											<el-radio :label="item.ID" border>
+												<span>{{item.ADDRESS}}, {{item.LGA_NAME}}, {{item.PROVINCE_NAME}}</span>
+												<el-divider direction="vertical"></el-divider>
+												<span>{{item.MOBILE}}</span>
+												<el-divider direction="vertical"></el-divider>
+												<span>{{item.CONSIGNEE}}</span>
+											</el-radio>
+										</div>
+									</el-radio-group>
+								</div>
+							</el-col>
+						</el-row>
+					</div>
+
+					<div class="white-box-footer" >
+						<el-row :gutter="40">
+							<el-col :xs="24" :sm="24" :lg="24" align="left">
+								<el-button type="warning"  size="small" @click="visibleShoppingCart = false">{{ $t('shop.goBack') }}</el-button>
+								<el-button type="primary" size="small" @click="orderSubmit" :loading="submitButtonStat">{{ $t('shop.goPay') }}</el-button>
+							</el-col>
+						</el-row>
+					</div>
+				</div>
+			</div>
+		</el-dialog>
 	</div>
 </template>
 
 <script>
-import { fetchProductList, fetchProduct } from '@/api/shop'
+import {fetchProductList, fetchShoppingCart, createOrder, createApproachOrder} from '@/api/shop'
 import waves from '@/directive/waves'
-import { parseTime } from '@/utils'
+import {formatAmount, getScreenWidth} from '@/utils'
 import tool from '@/utils/tool'
 import Pagination from '@/components/Pagination'
+import usersInfo from "@/utils/usersInfo";
 
 export default {
-	name: 'carFundProducts',
+	name: 'ProductsList',
 	components: { Pagination },
 	directives: { waves },
 	filters: {
@@ -93,6 +193,9 @@ export default {
 			}
 			return statusMap[status]
 		},
+		amountFilter(amount) {
+			return formatAmount(amount)
+		},
 	},
 	data() {
 		return {
@@ -109,18 +212,52 @@ export default {
 			tool: tool,
 			multipleSelection: [],
 			sellPriceSum: 0.00,
+			pricePvSum: 0.00,
 			taxSum: 0.00,
 			storeNums: [],
 			display: false,
 			currentPage: 1,
+			shoppingCartGoods: [],
+
+			visibleShoppingCart: false,
+			loading: false,
+
+			goods: [],
+			payList: [],
+			cashCurrency: '',
+			currency: {},
+			pointsSum: '',
+			pointFreight: '',
+			freeShipping: '',
+			goodsId: '',
+			goodsNum: '',
+			payPassword: '',
+			submitButtonStat: false,
+			sn: '',
+			orderType: '',
+			payDialog: false,
+			totalAmount: 0.00,
+			freight: 0.00,
+			userBalance: {},
+
+			payType: 'garage_points',
+			regionData: tool.getRegionData(),
+			addressId: '',
+			selfPickUpAddressId: '100000000000000000',
+			shippingAddressList: [],
+
+			screenWidth: getScreenWidth() > 600 ? '80%' : getScreenWidth() + 'px',
+			labelPosition: getScreenWidth() > 600 ? 'right' : 'top',
 		}
 	},
 	created() {
-		// 商品列表查询
 		this.getList()
 	},
+	mounted() {
+		// 支付方式、账户信息、余额
+		this.getShoppingCart()
+	},
 	methods: {
-		// 商品类别
 		getList() {
 			this.listLoading = true
 			fetchProductList(this.listQuery).then(response => {
@@ -153,19 +290,18 @@ export default {
 			})
 		},
 		// 选择商品计数
-		handleInputNumber(val, row){
-			let pageList = this.multipleSelection[this.currentPage]
+		handleInputNumber(current, row){
+			let pageList = this.multipleSelection[this.listQuery.page]
 			let selectStatus = false
 			for (let i in pageList) {
-				if( pageList[i].ID === row.ID ) {
-					pageList[i].chose_num = val
+				if (pageList[i].ID === row.ID) {
+					pageList[i].chose_num = current
 					selectStatus = true
 					break
 				}
 			}
-
 			if (selectStatus) {
-				this.multipleSelection[this.currentPage] = pageList
+				this.multipleSelection[this.listQuery.page] = pageList
 				this.handleSureChange()
 			}
 		},
@@ -175,10 +311,12 @@ export default {
 				let accumulatorSellPrice = 0, accumulatorPricePv = 0, accumulatorTax = 0
 				this.multipleSelection.forEach(item => {
 					item.forEach(accumulator => { accumulatorSellPrice += accumulator.SELL_PRICE * accumulator.chose_num * accumulator.DISCOUNT / 100; })
+					item.forEach(accumulator => { accumulatorPricePv += Number(accumulator.PRICE_PV) * Number(accumulator.chose_num) * (Number(accumulator.DISCOUNT) / 100); })
 					item.forEach(accumulator => { accumulatorTax += tool.calculateTax(Number(accumulator.SELL_PRICE), Number(accumulator.TAX_RATE), Number(accumulator.chose_num)); })
 				})
 
 				this.sellPriceSum = tool.formatPrice(accumulatorSellPrice)
+				this.pricePvSum = tool.formatPrice(accumulatorPricePv)
 				this.taxSum = tool.formatPrice(accumulatorTax)
 
 				this.display = true
@@ -187,33 +325,262 @@ export default {
 				this.display = true
 			}
 		},
+		// 选择商品
 		handleSelectionChange(val) {
 			let idx = -1, num
 			for (let i in this.tableData) {
-				for (let v in val) {
+				for (let v in val){
 					if (val[v].ID === this.tableData[i].ID) {
 						idx = i
 						num = this.storeNums[idx]
-						val[v]["chose_num"] = num
+						val[v]['chose_num'] = num
 						break
 					}
 				}
 			}
-			this.multipleSelection[this.currentPage] = val
-
+			this.multipleSelection[this.listQuery.page] = val
 			// 计算统计
 			this.handleSureChange()
 		},
 		// 结算商品
 		settlement() {
+			if (this.multipleSelection.length <= 0) {
+				this.$message.error(this.$t('shop.chooseTips'))
+				return false
+			}
+			// 弹出购物车
+			this.visibleShoppingCart = true
+			// 展示购物车商品数据
+			this.getShowCart()
+		},
+		// 设置运费
+		setFreight() {
+			// 如果地址为自提,则运费为0
+			this.pointFreight = (this.addressId === this.selfPickUpAddressId) ? Number(0) : Number(this.freight);
+		},
+		// 表格合并
+		getSummaries(param) {
+			const {columns, data} = param
+			const sums = []
+			columns.forEach((column, index) => {
+				if (index === 0) {
+					sums[index] = this.$t('shop.total')
+					return
+				}
+				const values = data.map(item => Number(item[column.property]));
+				if ((!values.every(value => isNaN(value))) && [2, 3, 4, 6].includes(index)) {
+					sums[index] = values.reduce((prev, curr) => {
+						const value = Number(curr)
+						if (!isNaN(value)) {
+							return Math.round((prev + curr) * 100) / 100
+						} else {
+							return Math.round(prev * 100) / 100
+						}
+					}, 0);
+					if (index !== 2) {
+						sums[index] = sums[index]
+					}
+				}
+			});
 
-		}
-	},
-	watch: {
-		// 监听多选按钮,判断结算按钮是否可用
-		multipleSelection: function (modern) {
-			this.$data.display = modern.length > 0
+			return sums
+		},
+		// 支付方式、账户信息、余额
+		getShoppingCart() {
+			fetchShoppingCart({categoryType: this.listQuery.categoryType}).then(response => {
+				// 收货地址
+				this.shippingAddressList = response.data.allAddress
+				this.shippingAddressList.map(item => {
+					if (item.IS_DEFAULT === '1') {
+						this.addressId = item.ID
+					}
+				})
+				// 账户
+				this.userBalance = response.data.userBalance
+				// 支付方式处理
+				this.currency = response.data.payList
+				this.cashCurrency = response.data.payList[this.payType].name
+				// 支付方式
+				for (let item of response.data.sellType) {
+					if (item.id === this.listQuery.categoryType) {
+						this.payList = item.sell_type
+						break
+					}
+				}
+				// 免运费阈值
+				this.freeShipping = response.data.freeShipping
+				// 运费
+				this.freight = response.data.freight
+			})
+		},
+		// 支付
+		orderSubmit() {
+			// 账户余额
+			let amountBalance = this.userBalance[this.payType]
+			// 账户类型提示信息
+			let accountType = this.currency[this.payType].name
+			if (amountBalance < 0 || !accountType) {
+				this.$message({
+					message: this.$t('shop.paymentError'),
+					type: 'error'
+				})
+				return false
+			}
+			// 余额是否充足
+			if ((amountBalance - this.pointsSum) < 0) {
+				this.$message({
+					message: accountType + this.$t('shop.balanceNotAllow'),
+					type: 'error'
+				})
+				this.submitButtonStat = false
+				return false
+			}
+
+			this.submitButtonStat = true
+			this.$prompt(this.$t('shop.inputPasswordTips'), this.$t('common.hint'), {
+				confirmButtonText: this.$t('common.confirm'),
+				cancelButtonText: this.$t('common.cancel'),
+				customClass: 'csClass',
+				type: 'info',
+				inputType: 'password',
+				inputPattern: /\S+/,
+				inputErrorMessage: this.$t('shop.inputPasswordTips')
+			}).then(({value}) => {
+				this.payPassword = value
+				let params = {
+					goodsId: this.goodsId,
+					goodsNum: this.goodsNum,
+					payPassword: this.payPassword,
+					email: usersInfo.userEmail(),
+					addressId: this.addressId,
+					address: this.address,
+					payType: this.payType,
+				}
+
+				createOrder(params).then(() => {
+					this.submitButtonStat = false
+					this.$message({
+						message: this.$t('common.successfully'),
+						type: 'success',
+						duration: 5 * 1000
+					})
+					this.$router.push({path: `/shop/order-list`})
+				}).catch(err => {
+					this.$message({
+						message: err,
+						type: 'error',
+						duration: 5 * 1000
+					})
+					this.submitButtonStat = false
+				})
+			}).catch(err => {
+				console.log(err)
+				this.submitButtonStat = false
+			})
+		},
+		// 计算价格
+		getSumMoney () {
+			let cash_plus_sum = [];
+			let goodsId = [];
+			let goodsNum = [];
+			let choseNum = 0;
+			this.goods.map(item => {
+				choseNum = Number(item.chose_num);
+				if (choseNum > 0) {
+					cash_plus_sum.push(item.SELL_PRICE * choseNum * (item.DISCOUNT / 100));
+					goodsId.push(item.ID);
+					goodsNum.push(choseNum);
+				}
+			})
+			this.goodsNum = goodsNum;
+			this.goodsId = goodsId;
+			// 增加运费
+			let payAmount = tool.sum(cash_plus_sum);
+			// 设置运费
+			this.setFreight();
+			// 商品总价大于预定值,免运费
+			this.pointFreight = (this.pointFreight > 0) ? ((payAmount >= this.freeShipping) ? 0 : this.freight) : 0
+			// 计算总价
+			this.pointsSum = tool.formatPrice(tool.sum(cash_plus_sum) + this.pointFreight) ;
+		},
+		// 展示购物车信息
+		getShowCart () {
+			let orderGoods = this.multipleSelection
+			let cartGoods = []
+			for (let i in orderGoods) {
+				cartGoods = orderGoods[i]
+				if (!cartGoods) continue
+
+				cartGoods.map(item => {
+					if (Number(item.chose_num) > 0) {
+						let discount = item.DISCOUNT / 100
+						item.member_price = Math.round(item.SELL_PRICE * discount * 100) / 100;
+						item.member_price_plus = Math.round(item.SELL_PRICE * Number(item.chose_num) * discount * 100) / 100;
+						item.tax_amount_plus = Math.round((item.member_price - item.member_price / (1 + item.TAX_RATE / 100)) * item.chose_num * 100) / 100;
+						this.goods.push(item)
+						this.totalAmount += item.member_price_plus
+					}
+				})
+			}
+
+			this.goods = cartGoods
+
+			// 计算价格
+			this.getSumMoney();
+		},
+		// 选择收货地址
+		choseAddress (addressId) {
+			this.addressId = addressId
+			// 设置运费
+			this.setFreight()
+			// 计算价格
+			this.getSumMoney()
+		},
+		// 切换支付方式
+		chosePayType(type) {
+			this.payType = type
 		},
 	},
 }
 </script>
+
+<style>
+.el-table--medium .el-table__cell {
+	padding: 3px 0;
+}
+
+.csClass{
+	width: 360px;
+}
+
+.address{
+	line-height: 2.5rem;
+}
+.address_box{
+	border-bottom: 1px solid #e3e3e3;
+}
+.sum{
+	display: inline-block;
+}
+.box{
+	margin: 1rem 0;
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	padding-bottom: 1rem;
+}
+.sum_box{
+	display: flex;
+	margin-left: 1rem;
+}
+.sum_box > div{
+	line-height: 2rem;
+}
+.sum_box > div:nth-child(1){
+	margin-right: 1rem;
+}
+.payButton {
+	border: none;
+	padding: 0;
+}
+</style>

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

@@ -47,7 +47,7 @@
 										<span style="white-space: nowrap;">{{ row.TAX_RATE / 100 }}</span>
 									</template>
 								</el-table-column>
-								<el-table-column align="center" :label="$t('shop.taxAmount')">
+								<el-table-column align="center" :label="$t('shop.totalTaxAmount')">
 									<template slot-scope="{row}">
 										<span style="white-space: nowrap;">{{ $t('currency.sign') }} {{ row | taxAmountFilter | amountFilter }}</span>
 									</template>
@@ -121,7 +121,7 @@ import Pagination from '@/components/Pagination'
 import {formatAmount, getScreenWidth} from "@/utils"
 
 export default {
-	name: 'orderList',
+	name: 'WelcomePackListing',
 	components: { Pagination },
 	directives: { waves },
 	filters: {

+ 5 - 5
src/views/shop/order-list.vue

@@ -12,12 +12,12 @@
 					<el-col :xs="18" :sm="18" :lg="18">
 						<el-card class="box-card" shadow="hover">
 							<el-table v-loading="listLoading" fit lazy highlight-current-row :data="props.row.hasChildren">
-								<el-table-column align="center" :label="$t('shop.productCode')" prop="SKU_CODE">
+								<el-table-column align="center" min-width="120px" :label="$t('shop.productCode')" prop="SKU_CODE">
 									<template slot-scope="{row}">
 										<span style="white-space: nowrap;">{{ row.SKU_CODE }}</span>
 									</template>
 								</el-table-column>
-								<el-table-column min-width="200px" align="center" :label="$t('shop.productName')" prop="GOODS_TITLE">
+								<el-table-column align="center" min-width="200px" :label="$t('shop.productName')" prop="GOODS_TITLE">
 									<template slot-scope="{row}">
 										<span>{{ row.GOODS_TITLE }}</span>
 									</template>
@@ -47,7 +47,7 @@
 										<span style="white-space: nowrap;">{{ row.TAX_RATE / 100 }}</span>
 									</template>
 								</el-table-column>
-								<el-table-column align="center" :label="$t('shop.taxAmount')">
+								<el-table-column align="center" :label="$t('shop.totalTaxAmount')">
 									<template slot-scope="{row}">
 										<span style="white-space: nowrap;">{{ $t('currency.sign') }} {{ row | taxAmountFilter | amountFilter }}</span>
 									</template>
@@ -70,7 +70,7 @@
 			</el-table-column>
       <el-table-column align="center" :label="$t('shop.recipientName')" prop="CONSIGNEE" min-width="150px">
 				<template slot-scope="{row}">
-					<span style="white-space: pre-wrap; display: inline-block; min-width: 120px; word-break: break-all;">{{ row.CONSIGNEE }}</span>
+					<span style="white-space: pre-wrap; min-width: 120px; word-break: break-all;">{{ row.CONSIGNEE }}</span>
 				</template>
 			</el-table-column>
       <el-table-column align="center" :label="$t('shop.phoneNumber')" prop="MOBILE" min-width="130px"></el-table-column>
@@ -117,7 +117,7 @@ import Pagination from '@/components/Pagination'
 import {formatAmount, getScreenWidth} from "@/utils"
 
 export default {
-  name: 'orderList',
+  name: 'OrderList',
   components: { Pagination },
   directives: { waves },
   filters: {

+ 0 - 473
src/views/shop/shopping-cart.vue

@@ -1,473 +0,0 @@
-<template>
-	<div v-loading="loading">
-		<div class="white-box">
-			<el-table :data="goods" style="width: 100%" show-summary :summary-method="getSummaries">
-				<el-table-column :label="$t('shop.productPicture')" align="center">
-					<template slot-scope="{row}">
-						<el-image
-							style="width: 80px; height: 80px"
-							:src="tool.getArImage(row.COVER, '/files/')"
-							:preview-src-list="[tool.getArImage(row.COVER, '/files/')]">
-						</el-image>
-					</template>
-				</el-table-column>
-				<el-table-column :label="$t('shop.productName')" prop="GOODS_NAME" align="center">
-
-				</el-table-column>
-				<el-table-column :label="$t('shop.productPrice')" prop="member_price" align="center">
-					<template slot-scope="{row}">
-						<span>{{ row.member_price }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column :label="$t('shop.taxRate')" prop="TAX_RATE" align="center">
-					<template slot-scope="{row}">
-							<span>{{ row.TAX_RATE / 100 }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column :label="$t('shop.taxAmount')" prop="tax_amount_plus" align="center">
-					<template slot-scope="{row}">
-							<span>{{ row.tax_amount_plus }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column :label="$t('shop.totalPrice')" prop="member_price_plus" align="center">
-					<template slot-scope="{row}">
-						<span>{{ row.member_price_plus }}</span>
-					</template>
-				</el-table-column>
-			</el-table>
-				<div style="margin-top: 25px; margin-left: 15px;">
-					<el-button type="warning"  size="small" @click="cancelOrder()">{{ $t('shop.goBack') }}</el-button>
-					<el-button type="primary" size="small" @click="goToAccounts()">{{ $t('shop.goPay') }}</el-button>
-				</div>
-		</div>
-
-	<!-- payStack模态框 -->
-	<el-dialog title="Pay" v-if="visible" :visible.sync="visible" width="30%" v-loading="payStackLoading" :before-close="handleClose">
-		<section>
-			<div class="formcontainer">
-				<el-divider></el-divider>
-				<div class="container">
-					<el-form :model="form">
-						<el-form-item label="Email" label-width="100px" required>
-							<el-input v-model="form.email" autocomplete="off"></el-input>
-						</el-form-item>
-						<el-form-item label="Amount" label-width="100px" required>
-							<el-input v-model="form.amount" autocomplete="off" readonly></el-input>
-						</el-form-item>
-					</el-form>
-				</div>
-			</div>
-		</section>
-		<paystack
-			:firstname="form.firstname"
-			:lastname="form.lastname"
-			:amount="form.amount * 100"
-			:email="form.email"
-			:metadata="form.metadata"
-			:currency="form.currency"
-			:paystackkey="form.publicKey"
-			:reference="reference"
-			:channels="channels"
-			:callback="processPayment"
-			:close="processClose"
-		>
-			<el-button type="primary" size="small">Pay</el-button>
-		</paystack>
-		<el-button type="danger" size="small" class="cancelButton" @click="handleClose">Cancel</el-button>
-	</el-dialog>
-
-	<!-- 倒计时页面 -->
-	<el-dialog title="Tips" :visible.sync="payDialog" :show-close="false" width="350px" :close="handleOrderList">
-		<el-result icon="success" title="the order is successful">
-			<template slot="extra">
-				<span style="color: #008efa; font-size: 30px;">{{ countdown }}</span>
-			</template>
-		</el-result>
-	</el-dialog>
-	</div>
-</template>
-
-<script>
-import tool from '@/utils/tool'
-import usersInfo from "@/utils/usersInfo"
-import paystack from 'vue-paystack'
-
-export default{
-	name: 'shoppingCart',
-	components: {
-		paystack
-	},
-	data: function () {
-		return {
-			tool: tool,
-			loading: false,
-			displayBV: false,
-			storeNums: [],
-
-			goods: [],
-			payList: [],
-			pointsSum: '',
-			cashSum: '',
-			freight: '',
-			pointFreight: '',
-			freeShipping: '',
-			goodsId: '',
-			goodsNum: '',
-			payPassword: '',
-			submitButtonStat: false,
-			prefixSign: '₦',
-			unit: 'NGN',
-			sn: '',
-			orderType: '',
-			payDialog: false,
-			countdown: 5,
-			visible: false,
-
-			payType: 'pay_stack',
-			payStackLoading: false,
-			channels: ["card", "bank", "ussd", "qr"],
-			form: {
-				publicKey: process.env.VUE_APP_BASE_PAY_STACK_PUBLIC_KEY,
-				currency: 'NGN',
-				firstname: usersInfo.userName(),
-				lastname: '',
-				email: usersInfo.userEmail(),
-				amount: 0,
-				orderSn: '',
-				metadata: {
-					cart_id: this.sn,
-					custom_fields: [
-						{
-							display_name: 'orderSn',
-							variable_name: 'orderSn',
-							value: this.sn,
-						},
-						{
-							display_name: 'orderType',
-							variable_name: 'orderType',
-							value: 'baOrder'
-						},
-					]
-			},
-			},
-
-			regionData: tool.getRegionData(),
-			addressId: '100000000000000000',
-			all_address: [],
-		}
-	},
-	created() {
-		// 加载sessionStorage中推送的商品
-		let orderGoodsQueue = sessionStorage.getItem('orderGoodsQueue')
-		// 加载sessionStorage中推送的商品类型
-		let categoryType = sessionStorage.getItem('categoryType')
-		// 判断是否展示BV(车奖、房奖不展示BV)
-		this.$data.displayBV = ['5', '6'].includes(categoryType)
-
-		// 加载购物车
-		this.getShowCart();
-		if (orderGoodsQueue) {
-			let orderGoods = JSON.parse(orderGoodsQueue)
-			let cartGoods = []
-			for (let i in orderGoods) {
-				cartGoods = orderGoods[i]
-				if (!cartGoods) continue
-
-				cartGoods.map(item => {
-					if (Number(item.chose_num) > 0) {
-						let discount = item.DISCOUNT / 100
-						item.member_price = Math.round(item.SELL_PRICE * discount * 100) / 100;
-						item.member_price_plus = Math.round(item.SELL_PRICE * Number(item.chose_num) * discount * 100) / 100;
-						item.tax_amount_plus = Math.round((item.member_price - item.member_price / (1 + item.TAX_RATE / 100)) * item.chose_num * 100) / 100;
-						this.goods.push(item)
-					}
-				})
-			}
-
-			// 计算价格
-			this.getSumMoney();
-		}
-	},
-	computed: {
-		// PayStack混淆串
-		reference() {
-			let text = ''
-			let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
-			for (let i = 0; i < 10; i++) {
-					text += possible.charAt(Math.floor(Math.random() * possible.length))
-			}
-			return text
-		}
-	},
-	methods: {
-		// 取消订单
-		cancelOrder() {
-			let orderGoodsQueue = sessionStorage.getItem('orderGoodsQueue')
-			// 加载sessionStorage中推送的商品类型
-			let categoryType = sessionStorage.getItem('categoryType')
-			// 判断是否展示BV(车奖、房奖不展示BV)
-			this.$data.displayBV = ['5', '6'].includes(categoryType)
-			// 清空已选择商品
-			sessionStorage.removeItem('orderGoodsQueue')
-			// 退回到商品列表
-			history.go(-1)
-		},
-		// 设置运费
-		setFreight() {
-			// 如果地址为自提,则运费为0
-			this.pointFreight = (this.addressId === '100000000000000000') ? Number(0) : Number(this.freight);
-		},
-		// 表格合并
-		getSummaries(param) {
-			const {columns, data} = param
-			const sums = [];
-			columns.forEach((column, index) => {
-				if (index === 0) {
-					sums[index] = 'Total'; // 合计
-					return;
-				}
-				const values = data.map(item => Number(item[column.property]));
-				if ((!values.every(value => isNaN(value))) && [4, 5, 6].includes(index)) {
-					sums[index] = values.reduce((prev, curr) => {
-						const value = Number(curr);
-						if (!isNaN(value)) {
-								return Math.round((prev + curr) * 100) / 100;
-						} else {
-								return Math.round(prev * 100) / 100;
-						}
-					}, 0);
-				}
-			});
-
-			return sums;
-			},
-			// 支付
-			goToAccounts() {
-					this.submitButtonStat = true
-					this.$prompt('Please enter your payment password', 'Hint', { // '请输入支付密码', '提示'
-							confirmButtonText: 'Confirm', // 确定
-							cancelButtonText: 'Cancel', // 取消
-							inputType: 'password',
-							inputPattern: /\S+/,
-							inputErrorMessage: 'Please enter your payment password' // 请输入支付密码
-					}).then(({value}) => {
-							this.payPassword = value
-							let params = {
-									goodsId: this.goodsId,
-									goodsNum: this.goodsNum,
-									payPassword: this.payPassword,
-									email: this.form.email,
-									addressId: this.addressId,
-									address: this.address,
-							};
-
-							// PayStack支付
-							// return network.postData('shop/ba-sure-approach-order', params).then(response => {
-							// 		this.submitButtonStat = false;
-							// 		this.form.orderSn = response.SN;
-							// 		this.form.amount = this.cashSum;
-							// 		this.form.metadata.custom_fields[0].value = response.SN;
-							// 		this.visible = true;
-							// }).catch(_ => {
-							// 		this.submitButtonStat = false;
-							// });
-					}).catch(_ => {
-							this.submitButtonStat = false;
-					});
-			},
-			// 计算价格
-			getSumMoney () {
-					let cash_plus_sum = [];
-					let goodsId = [];
-					let goodsNum = [];
-					let choseNum = 0;
-					this.goods.map(item => {
-							choseNum = Number(item.chose_num);
-							if (choseNum > 0) {
-									cash_plus_sum.push(item.SELL_PRICE * choseNum * (item.DISCOUNT / 100));
-									goodsId.push(item.ID);
-									goodsNum.push(choseNum);
-							}
-					})
-					this.goodsNum = goodsNum;
-					this.goodsId = goodsId;
-					// 增加运费
-					let payAmount = tool.sum(cash_plus_sum);
-					// 设置运费
-					this.setFreight();
-					// 商品总价大于预定值,免运费
-					this.pointFreight = (this.pointFreight > 0) ? ((payAmount >= this.freeShipping) ? 0 : this.freight) : 0
-					// 计算总价
-					this.pointsSum = this.cashSum = this.form.amount = tool.formatPrice(tool.sum(cash_plus_sum) + this.pointFreight) ;
-			},
-			// 展示购物车信息
-			getShowCart () {
-					// network.getData('shop/ba-shopping-cart', {}).then(response => {
-					// 		this.loading = false;
-					// 		// 免运费阈值
-					// 		this.freeShipping = response.freeShipping;
-					// 		// 运费
-					// 		this.freight = response.freight;
-					// 		// 收货地址
-					// 		this.all_address = response.allAddress;
-					// 		this.all_address.map((item, index) => {
-					// 				if (item.IS_DEFAULT === 1) {
-					// 						this.addressId = item.ID
-					// 				}
-					// 		})
-					// }).catch(_ => {
-					// 		this.loading = false;
-					// })
-			},
-			// 选择收货地址
-			choseAddress (addressId) {
-					this.addressId = addressId;
-					// 设置运费
-					this.setFreight()
-					// 计算价格
-					this.getSumMoney()
-			},
-		// 关闭支付回调
-		handleClose() {
-			let _this = this
-			// _this.$confirm('Confirm to close?').then(_ => {
-			// 	return network.postData('shop/ba-delete-approach-order', { orderSn: this.form.orderSn }).then(_ => {
-			// 		// 关闭支付模态框
-			// 		_this.visible = false
-			// 		// 关闭购物车页面,返回到订单列表页
-			// 		sessionStorage.setItem('order_goods', null)
-			// 		this.$router.push({path: `/shop/ba-product-list`})
-			// 	})
-			// }).catch(() => {
-			// 	// 关闭支付模态框
-			// 	_this.visible = false
-			// 	// 关闭购物车页面,返回到订单列表页
-			// 	sessionStorage.setItem('order_goods', null)
-			// 	this.$router.push({path: `/shop/ba-product-list`})
-			// })
-		},
-		// 支付成功回调
-		processPayment() {
-			// 关闭支付页面
-			this.visible = false
-			this.payStackLoading = false
-			// 显示支付成功模态框
-			this.payDialog = true;
-			// 启动支付成功倒计时
-			this.handleCountdown()
-		},
-		// 关闭支付回调
-		processClose () {
-			// 关闭支付模态框
-			this.visible = false
-			// 关闭购物车页面,清除购物车相关数据
-			sessionStorage.removeItem('orderGoodsQueue')
-			sessionStorage.removeItem('categoryType')
-			// 返回到订单列表页
-			this.$router.push({path: `/shop/standard-products`})
-		},
-		// 倒计时结束跳转
-		handleOrderList () {
-			this.$router.push({path: `/shop/order-list`})
-		},
-		// 启动倒计时
-		handleCountdown () {
-			// 创建定时器
-			setInterval(() => {
-				// 每隔1秒把time的值减一,赋值给span标签
-				this.countdown--
-				if (this.countdown === 0) {
-					// 倒计时结束,跳转到订单列表
-					this.$router.push({path: `/shop/order-list`});
-				}
-			}, 1000)
-		},
-		// 删除购物车中物品
-		handleDelete(row, index) {
-			let orderGoodsQueue = sessionStorage.getItem('orderGoodsQueue')
-			let orderGoods = JSON.parse(orderGoodsQueue)
-			orderGoods.splice(index, 1)
-			sessionStorage.setItem('orderGoodsQueue', JSON.stringify(orderGoods))
-			this.$notify({
-				title: '成功',
-				message: '删除成功',
-				type: 'success',
-				duration: 2000
-			})
-			location.reload()
-		},
-		// 选择商品计数
-		handleInputNumber(val, row){
-			let pageList = this.multipleSelection[this.currentPage]
-			let selectStatus = false
-			for (let i in pageList) {
-				if( pageList[i].ID === row.ID ) {
-					pageList[i].chose_num = val
-					selectStatus = true
-					break
-				}
-			}
-
-			if (selectStatus) {
-				this.multipleSelection[this.currentPage] = pageList
-				this.handleSureChange()
-			}
-		},
-		// 统计商品
-		handleSureChange() {
-			if (this.multipleSelection.length > 0) {
-				let accumulatorSellPrice = 0, accumulatorPricePv = 0, accumulatorTax = 0
-				this.multipleSelection.forEach(item => {
-					item.forEach(accumulator => { accumulatorSellPrice += accumulator.SELL_PRICE * accumulator.chose_num * accumulator.DISCOUNT / 100; })
-					item.forEach(accumulator => { accumulatorPricePv += Number(accumulator.PRICE_PV) * Number(accumulator.chose_num) * (Number(accumulator.DISCOUNT) / 100); })
-					item.forEach(accumulator => { accumulatorTax += tool.calculateTax(Number(accumulator.SELL_PRICE), Number(accumulator.TAX_RATE), Number(accumulator.chose_num)); })
-				})
-
-				this.sellPriceSum = tool.formatPrice(accumulatorSellPrice)
-				this.pricePvSum = tool.formatPrice(accumulatorPricePv)
-				this.taxSum = tool.formatPrice(accumulatorTax)
-
-				this.display = true
-			} else {
-				this.sellPriceSum = this.pricePvSum = this.taxSum = 0.00
-				this.display = true
-			}
-		},
-	},
-}
-</script>
-
-<style scoped>
-.address{
-    /* height: 3rem; */
-    line-height: 3.5rem;
-
-}
-.address_box{
-     border-bottom: 1px solid #e3e3e3;
-}
-.sum{
-    display: inline-block;
-}
-.box{
-    margin: 1rem 0;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    padding-bottom: 1rem;
-}
-.sum_box{
-    display: flex;
-    margin-left: 1rem;
-}
-.sum_box > div{
-    line-height: 2rem;
-}
-.sum_box > div:nth-child(1){
-    margin-right: 1rem;
-}
-.payButton {
-    border: none;
-    padding: 0;
-}
-</style>

+ 564 - 56
src/views/shop/standard-products.vue

@@ -6,57 +6,56 @@
     :data="tableData"
     fit
     highlight-current-row
-    style="width: 100%;"
 		ref="multipleTable"
 		@selection-change="handleSelectionChange"
   >
-		<el-table-column type="selection" width="70" align="center"></el-table-column>
+		<el-table-column type="selection" width="50" align="center"></el-table-column>
 		<el-table-column align="center" type="index" width="50"></el-table-column>
-    <el-table-column :label="$t('shop.productName')" align="center" prop="GOODS_NAME">
+		<el-table-column :label="$t('shop.qty')" min-width="150" align="center">
+			<template slot-scope="{row, $index}">
+				<el-input-number size="mini" v-model="storeNums[$index]" :min="1" :max="Number(row.STORE_NUMS)" @change="handleInputNumber($event, row)"></el-input-number>
+			</template>
+		</el-table-column>
+    <el-table-column :label="$t('shop.productName')" min-width="140" align="center" prop="GOODS_NAME">
       <template slot-scope="{row}">
-        <span>{{ row.GOODS_NAME }}</span>
+        <span style="word-break: keep-all;">{{ row.GOODS_NAME }}</span>
       </template>
     </el-table-column>
-    <el-table-column :label="$t('shop.productPicture')" align="center" min-width="70px" prop="GOODS_NAME">
+    <el-table-column :label="$t('shop.productPicture')" align="center" min-width="80px" prop="GOODS_NAME">
       <template slot-scope="{row}">
 				<el-image
-					style="width: 70px; height: 70px"
+					style="width: 80px; height: 80px"
 					:src="tool.getArImage(row.COVER, '/files/')"
 					:preview-src-list="[tool.getArImage(row.COVER, '/files/')]"
 				>
 				</el-image>
       </template>
     </el-table-column>
-    <el-table-column :label="$t('shop.productPrice')" align="center" prop="SELL_PRICE">
+    <el-table-column :label="$t('shop.productPrice')" align="center" prop="SELL_PRICE" min-width="120px">
       <template slot-scope="{row}">
-        <span>{{ row.SELL_PRICE }}</span>
+        <span>{{ $t('currency.sign') }} {{ row.SELL_PRICE | amountFilter }}</span>
       </template>
     </el-table-column>
-    <el-table-column :label="$t('shop.productBV')" align="center" prop="PRICE_PV">
+    <el-table-column :label="$t('shop.productBV')" align="center" prop="PRICE_PV" min-width="100px">
       <template slot-scope="{row}">
         <span>{{ row.PRICE_PV }}</span>
       </template>
     </el-table-column>
-    <el-table-column :label="$t('shop.taxRate')" align="center" prop="TAX_RATE">
+    <el-table-column :label="$t('shop.taxRate')" align="center" prop="TAX_RATE" min-width="100px">
       <template slot-scope="{row}">
 				<span>{{ row.TAX_RATE / 100  }}</span>
       </template>
     </el-table-column>
-    <el-table-column :label="$t('shop.taxAmount')" align="center">
+    <el-table-column :label="$t('shop.taxAmount')" align="center" min-width="120px">
       <template slot-scope="{row}">
-				<span>{{ row | taxAmountFilter }}</span>
+				<span>{{ $t('currency.sign') }} {{ row | taxAmountFilter | amountFilter }}</span>
       </template>
     </el-table-column>
-    <el-table-column :label="$t('shop.inventory')" align="center" prop="STORE_NUMS">
+    <el-table-column :label="$t('shop.inventory')" align="center" prop="STORE_NUMS" min-width="120px">
       <template slot-scope="{row}">
 				<span>{{ row.STORE_NUMS }}</span>
       </template>
     </el-table-column>
-		<el-table-column :label="$t('shop.qty')" min-width="90" align="center">
-			<template slot-scope="scope">
-				<el-input-number size="mini" v-model="storeNums[scope.$index]" :min="1" :max="Number(scope.row.STORE_NUMS)" @change="(val)=>{handleInputNumber(val, scope.row)}"></el-input-number>
-			</template>
-		</el-table-column>
   </el-table>
 
 	<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
@@ -71,19 +70,162 @@
 			<div style="display: inline-block;">{{ $t('shop.taxAmount') }}:{{ $t('currency.sign') }} {{ taxSum }}</div>
 		</div>
 	</div>
+
+	<!-- 购物车	-->
+	<el-dialog :title="$t('shop.productsSettlement')" :visible.sync="visibleShoppingCart" :width="screenWidth" v-loading="shoppingCartLoading" style="margin-top: -95px;">
+		<div v-loading="loading">
+			<div class="white-box">
+				<el-table :data="goods" style="width: 100%" show-summary :summary-method="getSummaries">
+					<el-table-column :label="$t('shop.productPicture')" align="center" min-width="90px">
+						<template slot-scope="{row}">
+							<el-image
+								style="width: 80px; height: 80px"
+								:src="tool.getArImage(row.COVER, '/files/')"
+								:preview-src-list="[tool.getArImage(row.COVER, '/files/')]">
+							</el-image>
+						</template>
+					</el-table-column>
+					<el-table-column :label="$t('shop.productName')" prop="GOODS_NAME" align="center" min-width="130px"></el-table-column>
+					<el-table-column :label="$t('shop.qty')" prop="chose_num" align="center" min-width="90px"></el-table-column >
+					<el-table-column :label="$t('shop.productPrice')" prop="member_price" align="center" min-width="130px">
+						<template slot-scope="{row}">
+							<span>{{ $t('currency.sign') }} {{ row.member_price }}</span>
+						</template>
+					</el-table-column>
+					<el-table-column :label="$t('shop.totalPrice')" prop="member_price_plus" align="center" min-width="130px">
+						<template slot-scope="{row}">
+							<span>{{ $t('currency.sign') }} {{ row.member_price_plus }}</span>
+						</template>
+					</el-table-column>
+					<el-table-column :label="$t('shop.taxRate')" prop="TAX_RATE" align="center" min-width="70px">
+						<template slot-scope="{row}">
+							<span>{{ row.TAX_RATE / 100 }}</span>
+						</template>
+					</el-table-column>
+					<el-table-column :label="$t('shop.totalTaxAmount')" prop="tax_amount_plus" align="center" min-width="120px">
+						<template slot-scope="{row}">
+							<span>{{ $t('currency.sign') }} {{ row.tax_amount_plus }}</span>
+						</template>
+					</el-table-column>
+				</el-table>
+
+				<div class="white-box-footer" style=" padding: 15px; line-height: 15px;">
+					<el-row :gutter="40">
+						<el-col :xs="24" :sm="24" :lg="24">
+							<!-- 订单合计 -->
+							<div class="box address_box">
+								{{ $t('shop.totalOrders') }}:
+								<div class="sum">
+									<div class="sum_box">
+										<div>{{ $t('shop.paidAmount') }}</div>
+										<div>{{ $t('currency.sign') }} {{ payType === "cash" ? cashSum : pointsSum }}</div>
+									</div>
+									<div class="sum_box">
+										<div>{{ $t('shop.freight') }}</div>
+										<div>{{ $t('currency.sign') }} {{ pointFreight }}</div>
+									</div>
+								</div>
+							</div>
+							<!-- 支付方式/账户余额 -->
+							<div class="box address_box">
+								{{ $t('shop.selectPayment') }}:
+								<el-radio-group v-model="payType" @change='chosePayType'>
+									<div v-for="(item, index) in payList" :key='index' class="address">
+										<el-radio :label="item.label" border>
+											{{ item.name }}<span v-if="item.label === 'cash'" style="color: tomato;">({{ cashCurrency }}: {{ $t('currency.sign') }} {{ userBalance.cash }})</span>
+										</el-radio>
+									</div>
+								</el-radio-group>
+							</div>
+							<!-- 收货地址 -->
+							<div class="box address_box">
+								{{ $t('shop.selectAddress') }}:
+								<el-radio-group v-model="addressId" @change='choseAddress'>
+									<div class="address">
+										<el-radio :label="selfPickUpAddressId" border>{{ $t('shop.selfPickUp') }}</el-radio>
+									</div>
+									<div v-for="(item, index) in shippingAddressList" :key='index' class="address">
+										<el-radio :label="item.ID" border>
+											<span>{{item.ADDRESS}}, {{item.LGA_NAME}}, {{item.PROVINCE_NAME}}</span>
+											<el-divider direction="vertical"></el-divider>
+											<span>{{item.MOBILE}}</span>
+											<el-divider direction="vertical"></el-divider>
+											<span>{{item.CONSIGNEE}}</span>
+										</el-radio>
+									</div>
+								</el-radio-group>
+							</div>
+						</el-col>
+					</el-row>
+				</div>
+
+				<div class="white-box-footer" >
+					<el-row :gutter="40">
+						<el-col :xs="24" :sm="24" :lg="24" align="left">
+							<el-button type="warning"  size="small" @click="visibleShoppingCart = false">{{ $t('shop.goBack') }}</el-button>
+							<el-button type="primary" size="small" @click="orderSubmit" :loading="submitButtonStat">{{ $t('shop.goPay') }}</el-button>
+						</el-col>
+					</el-row>
+				</div>
+			</div>
+		</div>
+	</el-dialog>
+
+	<!-- payStack模态框 -->
+	<el-dialog :title="$t('shop.goPay')" :visible.sync="visible" :width="payStackScreenWidth" v-loading="payStackLoading" :before-close="handleClose">
+		<section>
+			<el-form :model="form">
+				<el-form-item :label="$t('user.email')" label-width="100px" required>
+					<el-input v-model="form.email" autocomplete="off"></el-input>
+				</el-form-item>
+				<el-form-item :label="$t('shop.amount')" label-width="100px" required>
+					<el-input v-model="form.amount" autocomplete="off" readonly></el-input>
+				</el-form-item>
+			</el-form>
+		</section>
+		<paystack
+			:firstname="form.firstname"
+			:lastname="form.lastname"
+			:amount="form.amount * 100"
+			:email="form.email"
+			:metadata="form.metadata"
+			:currency="form.currency"
+			:paystackkey="form.publicKey"
+			:reference="reference"
+			:channels="channels"
+			:callback="processPayment"
+			:close="handleClose"
+		>
+			<el-button type="primary" size="small">{{ $t('shop.goPay') }}</el-button>
+		</paystack>
+		<el-button type="danger" size="small" class="cancelButton" @click="handleClose" style="margin-left: 10px;">{{ $t('common.cancel') }}</el-button>
+	</el-dialog>
+
+	<!-- 倒计时页面 -->
+	<el-dialog :title="$t('common.hint')" :visible.sync="payDialog" :width="payStackScreenWidth" :show-close="false" :close="handleOrderList">
+		<el-card shadow="always">
+			<el-result icon="success" :title="$t('common.successfully')" :subTitle="$t('shop.successOrderTips')">
+				<template slot="extra">
+					<el-button type="primary" size="medium" @click="handleOrderList">{{ $t('shop.goBack') }}({{ countdown }})</el-button>
+				</template>
+			</el-result>
+		</el-card>
+	</el-dialog>
 </div>
 </template>
 
   <script>
-  import { fetchProductList, fetchProduct } from '@/api/shop'
+	import {fetchProductList, createApproachOrder, deleteApproachOrder, fetchShoppingCart, createOrder} from '@/api/shop'
   import waves from '@/directive/waves'
-  import { parseTime } from '@/utils'
+	import {formatAmount, getScreenWidth} from '@/utils'
 	import tool from '@/utils/tool'
   import Pagination from '@/components/Pagination'
+	import usersInfo from "@/utils/usersInfo"
+	import paystack from 'vue-paystack'
 
   export default {
-    name: 'standardProducts',
-    components: { Pagination },
+    name: 'ProductsList',
+    components: { Pagination, paystack },
     directives: { waves },
 		filters: {
 			priceFilter(price) {
@@ -99,6 +241,9 @@
 				}
 				return statusMap[status]
 			},
+			amountFilter(amount) {
+				return formatAmount(amount)
+			},
 		},
     data() {
       return {
@@ -121,14 +266,92 @@
 				display: false,
 				currentPage: 1,
 				shoppingCartGoods: [],
+
+				shoppingCartLoading: false,
+				visibleShoppingCart: false,
+				loading: false,
+
+				goods: [],
+				payList: [],
+				cashCurrency: '',
+				currency: {},
+				pointsSum: '',
+				cashSum: '',
+				pointFreight: '',
+				freeShipping: '',
+				goodsId: '',
+				goodsNum: '',
+				payPassword: '',
+				submitButtonStat: false,
+				sn: '',
+				orderType: '',
+				payDialog: false,
+				countdown: 5,
+				visible: false,
+				totalAmount: 0.00,
+				freight: 0.00,
+				userBalance: {},
+
+				payType: 'cash',
+				payStackLoading: false,
+				channels: ["card", "bank", "ussd", "qr"],
+				form: {
+					publicKey: process.env.VUE_APP_BASE_PAY_STACK_PUBLIC_KEY,
+					currency: 'NGN',
+					firstname: usersInfo.userName(),
+					lastname: '',
+					email: usersInfo.userEmail(),
+					amount: 0,
+					orderSn: '',
+					metadata: {
+						cart_id: '',
+						custom_fields: [
+							{
+								display_name: 'orderSn',
+								variable_name: 'orderSn',
+								value: this.sn,
+							},
+							{
+								display_name: 'orderType',
+								variable_name: 'orderType',
+								value: 'userOrder'
+							},
+						]
+					},
+				},
+				payStackScreenWidth: getScreenWidth() > 500 ? '450px' : getScreenWidth() + 'px',
+
+				regionData: tool.getRegionData(),
+				addressId: '',
+				selfPickUpAddressId: '100000000000000000',
+				shippingAddressList: [],
+
+				screenWidth: getScreenWidth() > 600 ? '80%' : getScreenWidth() + 'px',
+				labelPosition: getScreenWidth() > 600 ? 'right' : 'top',
+				dialog: false,
+				dialogLoading: false,
       }
     },
     created() {
-			// 商品列表查询
       this.getList()
     },
-    methods: {
-			// 商品类别
+		mounted() {
+			// 支付方式、账户信息、余额
+			this.getShoppingCart()
+		},
+		computed: {
+			// PayStack混淆串
+			reference() {
+				let text = ''
+				let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
+				for (let i = 0; i < 10; i++) {
+					text += possible.charAt(Math.floor(Math.random() * possible.length))
+				}
+				return text
+			}
+		},
+		methods: {
+			// 商品列表
       getList() {
         this.listLoading = true
 				fetchProductList(this.listQuery).then(response => {
@@ -161,20 +384,18 @@
         })
       },
 			// 选择商品计数
-			handleInputNumber(val, row){
-				console.log(val, row)
-				let pageList = this.multipleSelection[this.currentPage]
+			handleInputNumber(current, row){
+				let pageList = this.multipleSelection[this.listQuery.page]
 				let selectStatus = false
 				for (let i in pageList) {
-					if( pageList[i].ID === row.ID ) {
-						pageList[i].chose_num = val
+					if (pageList[i].ID === row.ID) {
+						pageList[i].chose_num = current
 						selectStatus = true
 						break
 					}
 				}
-				console.log('selectStatus', selectStatus)
 				if (selectStatus) {
-					this.multipleSelection[this.currentPage] = pageList
+					this.multipleSelection[this.listQuery.page] = pageList
 					this.handleSureChange()
 				}
 			},
@@ -198,42 +419,329 @@
 					this.display = true
 				}
 			},
-			handleSelectionChange(ele) {
-				this.multipleSelection.length = 0
-				if (ele.length > 0) {
-					let idx = -1, num
-					for (let i in this.tableData) {
-						for (let v in ele) {
-							if (ele[v].ID === this.tableData[i].ID) {
-								idx = i
-								num = this.storeNums[idx]
-								ele[v]["chose_num"] = num
-								break
-							}
+			// 选择商品
+			handleSelectionChange(val) {
+				let idx = -1, num
+				for (let i in this.tableData) {
+					for (let v in val){
+						if (val[v].ID === this.tableData[i].ID) {
+							idx = i
+							num = this.storeNums[idx]
+							val[v]['chose_num'] = num
+							break
 						}
 					}
-					this.multipleSelection.push(ele)
 				}
-
+				this.multipleSelection[this.listQuery.page] = val
 				// 计算统计
 				this.handleSureChange()
 			},
 			// 结算商品
 			settlement() {
 				if (this.multipleSelection.length <= 0) {
-					this.$message.error('Please choose the products.')
+					this.$message.error(this.$t('shop.chooseTips'))
 					return false
 				}
-				sessionStorage.setItem('orderGoodsQueue', JSON.stringify(this.multipleSelection))
-				sessionStorage.setItem('categoryType', '1')
-				this.$router.push({path: `/shop/shopping-cart`})
-			}
-    },
-		watch: {
-			// 监听多选按钮,判断结算按钮是否可用
-			multipleSelection: function (modern) {
+				// 弹出购物车
+				this.visibleShoppingCart = true
+				// 展示购物车商品数据
+				this.getShowCart()
+			},
+			// 设置运费
+			setFreight() {
+				// 如果地址为自提,则运费为0
+				this.pointFreight = (this.addressId === this.selfPickUpAddressId) ? Number(0) : Number(this.freight);
+			},
+			// 表格合并
+			getSummaries(param) {
+				const {columns, data} = param
+				const sums = []
+				columns.forEach((column, index) => {
+					if (index === 0) {
+						sums[index] = this.$t('shop.total')
+						return;
+					}
+					const values = data.map(item => Number(item[column.property]));
+					if ((!values.every(value => isNaN(value))) && [2, 3, 4, 6].includes(index)) {
+						sums[index] = values.reduce((prev, curr) => {
+							const value = Number(curr)
+							if (!isNaN(value)) {
+								return Math.round((prev + curr) * 100) / 100
+							} else {
+								return Math.round(prev * 100) / 100
+							}
+						}, 0);
+						if (index !== 2) {
+							sums[index] = this.$t('currency.sign') + ' ' + sums[index]
+						}
+					}
+				});
 
+				return sums
 			},
-		},
+			// 支付方式、账户信息、余额
+			getShoppingCart() {
+			 fetchShoppingCart({categoryType: this.listQuery.categoryType}).then(response => {
+					// 收货地址
+					this.shippingAddressList = response.data.allAddress
+					this.shippingAddressList.map(item => {
+						if (item.IS_DEFAULT === '1') {
+							this.addressId = item.ID
+						}
+					})
+					// 账户
+					this.userBalance = response.data.userBalance
+				 	// 支付方式处理
+				  this.currency = response.data.payList
+				  this.cashCurrency = response.data.payList[this.payType].name
+					// 支付方式
+					for (let item of response.data.sellType) {
+						if (item.id === this.listQuery.categoryType) {
+							this.payList = item.sell_type
+							break
+						}
+					}
+					// 支付方式的第一项默认选中
+					this.payType = Object.values(this.payList)[1]['label']
+					// 免运费阈值
+					this.freeShipping = response.data.freeShipping
+					// 运费
+					this.freight = response.data.freight
+					})
+			},
+			// 支付
+			orderSubmit() {
+				// 账户余额
+				let amountBalance = this.userBalance[this.payType]
+				// 账户类型提示信息
+				let accountType = this.currency[this.payType].name
+				if (amountBalance < 0 || !accountType) {
+					this.$message({
+						message: this.$t('shop.paymentError'),
+						type: 'error'
+					})
+					return false
+				}
+				// 支付方式处理
+				if (['cash', 'pay_stack'].includes(this.payType)) {
+					let payObj = this.payList.find((item) => {
+						return item.label === this.payType
+					})
+					accountType = (payObj.length <= 0) ? '' : payObj.name
+				}
+
+				// 余额是否充足
+				if ((this.payType !== 'pay_stack') && ((amountBalance - this.cashSum) < 0)) {
+					this.$message({
+						message: accountType + this.$t('shop.balanceNotAllow'),
+						type: 'error'
+					})
+					this.submitButtonStat = false
+					return false
+				}
+
+				this.submitButtonStat = true
+				this.$prompt(this.$t('shop.inputPasswordTips'), this.$t('common.hint'), {
+					confirmButtonText: this.$t('common.confirm'),
+					cancelButtonText: this.$t('common.cancel'),
+					customClass: 'csClass',
+					type: 'info',
+					inputType: 'password',
+					inputPattern: /\S+/,
+					inputErrorMessage: this.$t('shop.inputPasswordTips')
+				}).then(({value}) => {
+					this.payPassword = value
+					let params = {
+						goodsId: this.goodsId,
+						goodsNum: this.goodsNum,
+						payPassword: this.payPassword,
+						email: this.form.email,
+						addressId: this.addressId,
+						address: this.address,
+						payType: this.payType,
+					}
+					if (this.payType === 'pay_stack') {
+						// PayStack支付
+						createApproachOrder(params).then(response => {
+							this.visibleShoppingCart = false
+							this.submitButtonStat = false
+							this.visible = true
+							this.form.orderSn = response.data.SN
+							this.form.amount = this.cashSum
+							this.form.metadata.cart_id = response.data.SN
+							this.form.metadata.custom_fields[0].value = response.data.SN
+						}).catch(err => {
+							this.$message({
+								message: err,
+								type: 'error',
+								duration: 5 * 1000
+							})
+							this.submitButtonStat = false
+						})
+					} else {
+						// 非PayStack支付
+						createOrder(params).then(() => {
+							this.submitButtonStat = false
+							this.$message({
+								message: this.$t('common.successfully'),
+								type: 'success',
+								duration: 5 * 1000
+							})
+							this.$router.push({path: `/shop/order-list`})
+						}).catch(err => {
+							this.$message({
+								message: err,
+								type: 'error',
+								duration: 5 * 1000
+							})
+							this.submitButtonStat = false
+						})
+					}
+				}).catch(() => {
+					this.submitButtonStat = false
+				})
+			},
+			// 计算价格
+			getSumMoney () {
+				let cash_plus_sum = [];
+				let goodsId = [];
+				let goodsNum = [];
+				let choseNum = 0;
+				this.goods.map(item => {
+					choseNum = Number(item.chose_num);
+					if (choseNum > 0) {
+						cash_plus_sum.push(item.SELL_PRICE * choseNum * (item.DISCOUNT / 100));
+						goodsId.push(item.ID);
+						goodsNum.push(choseNum);
+					}
+				})
+				this.goodsNum = goodsNum;
+				this.goodsId = goodsId;
+				// 增加运费
+				let payAmount = tool.sum(cash_plus_sum);
+				// 设置运费
+				this.setFreight();
+				// 商品总价大于预定值,免运费
+				this.pointFreight = (this.pointFreight > 0) ? ((payAmount >= this.freeShipping) ? 0 : this.freight) : 0
+				// 计算总价
+				this.pointsSum = this.cashSum = this.form.amount = tool.formatPrice(tool.sum(cash_plus_sum) + this.pointFreight) ;
+			},
+			// 展示购物车信息
+			getShowCart () {
+				let orderGoods = this.multipleSelection
+				let cartGoods = []
+				for (let i in orderGoods) {
+					cartGoods = orderGoods[i]
+					if (!cartGoods) continue
+
+					cartGoods.map(item => {
+						if (Number(item.chose_num) > 0) {
+							let discount = item.DISCOUNT / 100
+							item.member_price = Math.round(item.SELL_PRICE * discount * 100) / 100;
+							item.member_price_plus = Math.round(item.SELL_PRICE * Number(item.chose_num) * discount * 100) / 100;
+							item.tax_amount_plus = Math.round((item.member_price - item.member_price / (1 + item.TAX_RATE / 100)) * item.chose_num * 100) / 100;
+							this.goods.push(item)
+							this.totalAmount += item.member_price_plus
+						}
+					})
+				}
+
+				this.goods = cartGoods
+
+				// 计算价格
+				this.getSumMoney();
+			},
+			// 选择收货地址
+			choseAddress (addressId) {
+				this.addressId = addressId
+				// 设置运费
+				this.setFreight()
+				// 计算价格
+				this.getSumMoney()
+			},
+			// 切换支付方式
+			chosePayType(type) {
+				this.payType = type
+			},
+			// 关闭支付回调
+			handleClose() {
+				this.$confirm(this.$t('shop.confirmClose')).then(_ => {
+					deleteApproachOrder({ orderSn: this.form.orderSn }).then(() => {
+						// 关闭支付模态框
+						this.visible = false
+						// 关闭购物车
+						this.visibleShoppingCart = false
+						this.submitButtonStat = false
+					})
+				})
+			},
+			// 支付成功回调
+			processPayment() {
+				// 关闭支付页面
+				this.visible = false
+				this.payStackLoading = false
+				// 显示支付成功模态框
+				this.payDialog = true;
+				// 启动支付成功倒计时
+				this.handleCountdown()
+			},
+			// 倒计时结束跳转
+			handleOrderList () {
+				this.$router.push({path: `/shop/order-list`})
+			},
+			// 启动倒计时
+			handleCountdown () {
+				// 创建定时器
+				setInterval(() => {
+					// 每隔1秒把time的值减一,赋值给span标签
+					this.countdown--
+					if (this.countdown === 0) {
+						// 倒计时结束,跳转到订单列表
+						this.$router.push({path: `/shop/order-list`});
+					}
+				}, 1000)
+			},
+    },
   }
 </script>
+
+<style>
+.el-table--medium .el-table__cell {
+	padding: 3px 0;
+}
+
+.csClass{
+	width: 360px;
+}
+
+.address{
+	line-height: 2.5rem;
+}
+.address_box{
+	border-bottom: 1px solid #e3e3e3;
+}
+.sum{
+	display: inline-block;
+}
+.box{
+	margin: 1rem 0;
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	padding-bottom: 1rem;
+}
+.sum_box{
+	display: flex;
+	margin-left: 1rem;
+}
+.sum_box > div{
+	line-height: 2rem;
+}
+.sum_box > div:nth-child(1){
+	margin-right: 1rem;
+}
+.payButton {
+	border: none;
+	padding: 0;
+}
+</style>

+ 407 - 40
src/views/shop/villa-fund-products.vue

@@ -6,77 +6,177 @@
 			:data="tableData"
 			fit
 			highlight-current-row
-			style="width: 100%;"
 			ref="multipleTable"
 			@selection-change="handleSelectionChange"
 		>
-			<el-table-column type="selection" width="70" align="center"></el-table-column>
+			<el-table-column type="selection" width="50" align="center"></el-table-column>
 			<el-table-column align="center" type="index" width="50"></el-table-column>
-			<el-table-column :label="$t('shop.productName')" align="center" prop="GOODS_NAME">
+			<el-table-column :label="$t('shop.qty')" min-width="150" align="center">
+				<template slot-scope="{row, $index}">
+					<el-input-number size="mini" v-model="storeNums[$index]" :min="1" :max="Number(row.STORE_NUMS)" @change="handleInputNumber($event, row)"></el-input-number>
+				</template>
+			</el-table-column>
+			<el-table-column :label="$t('shop.productName')" min-width="140" align="center" prop="GOODS_NAME">
 				<template slot-scope="{row}">
-					<span>{{ row.GOODS_NAME }}</span>
+					<span style="word-break: keep-all;">{{ row.GOODS_NAME }}</span>
 				</template>
 			</el-table-column>
-			<el-table-column :label="$t('shop.productPicture')" align="center" min-width="70px" prop="GOODS_NAME">
+			<el-table-column :label="$t('shop.productPicture')" align="center" min-width="80px" prop="GOODS_NAME">
 				<template slot-scope="{row}">
 					<el-image
-						style="width: 70px; height: 70px"
+						style="width: 80px; height: 80px"
 						:src="tool.getArImage(row.COVER, '/files/')"
 						:preview-src-list="[tool.getArImage(row.COVER, '/files/')]"
 					>
 					</el-image>
 				</template>
 			</el-table-column>
-			<el-table-column :label="$t('shop.productPrice')" align="center" prop="SELL_PRICE">
+			<el-table-column :label="$t('shop.productPrice')" align="center" prop="SELL_PRICE" min-width="120px">
 				<template slot-scope="{row}">
-					<span>{{ row.SELL_PRICE }}</span>
+					<span>{{ row.SELL_PRICE | amountFilter }}</span>
 				</template>
 			</el-table-column>
-			<el-table-column :label="$t('shop.taxRate')" align="center" prop="TAX_RATE">
+			<el-table-column :label="$t('shop.taxRate')" align="center" prop="TAX_RATE" min-width="100px">
 				<template slot-scope="{row}">
 					<span>{{ row.TAX_RATE / 100  }}</span>
 				</template>
 			</el-table-column>
-			<el-table-column :label="$t('shop.taxAmount')" align="center">
+			<el-table-column :label="$t('shop.taxAmount')" align="center" min-width="120px">
 				<template slot-scope="{row}">
-					<span>{{ row | taxAmountFilter }}</span>
+					<span>{{ row | taxAmountFilter | amountFilter }}</span>
 				</template>
 			</el-table-column>
-			<el-table-column :label="$t('shop.inventory')" align="center" prop="STORE_NUMS">
+			<el-table-column :label="$t('shop.inventory')" align="center" prop="STORE_NUMS" min-width="120px">
 				<template slot-scope="{row}">
 					<span>{{ row.STORE_NUMS }}</span>
 				</template>
 			</el-table-column>
-			<el-table-column :label="$t('shop.inventory')" min-width="90" align="center">
-				<template slot-scope="scope">
-					<el-input-number size="mini" v-model="storeNums[scope.$index]" :min="1" :max="Number(scope.row.STORE_NUMS)" @change="(val)=>{handleInputNumber(val, scope.row)}"></el-input-number>
-				</template>
-			</el-table-column>
 		</el-table>
 
 		<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
 
-		<div class="white-box-footer" v-show="display" style="margin-top: 15px;">
+		<div class="white-box-footer" style="margin-top: 15px;">
 			<div class="flex data" style="float: left; display: inline-block; margin-top: 20px;">
 				<el-button type="primary" size="small" @click="settlement()" style="float: left;">{{ $t('shop.checkOut') }}</el-button>
 			</div>
 			<div class="flex data" style="float: right; display: inline-block; line-height: 35px; font-size: 14px; margin-top: 20px; border: 1px solid #dcdfe6; border-radius: 4px; padding: 0 15px;">
-				<div style="margin-right: 2rem; display: inline-block;">{{ $t('shop.productPrice') }}:{{ $t('currency.sign') }} {{ sellPriceSum }}</div>
-				<div style="display: inline-block;">{{ $t('shop.taxAmount') }}:{{ $t('currency.sign') }} {{ taxSum }}</div>
+				<div style="margin-right: 2rem; display: inline-block;">{{ $t('shop.productPrice') }}:{{ sellPriceSum }}</div>
+				<div style="display: inline-block;">{{ $t('shop.taxAmount') }}:{{ taxSum }}</div>
 			</div>
 		</div>
+
+		<!-- 购物车	-->
+		<el-dialog :title="$t('shop.productsSettlement')" :visible.sync="visibleShoppingCart" :width="screenWidth" style="margin-top: -95px;">
+			<div v-loading="loading">
+				<div class="white-box">
+					<el-table :data="goods" style="width: 100%" show-summary :summary-method="getSummaries">
+						<el-table-column :label="$t('shop.productPicture')" align="center" min-width="90px">
+							<template slot-scope="{row}">
+								<el-image
+									style="width: 80px; height: 80px"
+									:src="tool.getArImage(row.COVER, '/files/')"
+									:preview-src-list="[tool.getArImage(row.COVER, '/files/')]">
+								</el-image>
+							</template>
+						</el-table-column>
+						<el-table-column :label="$t('shop.productName')" prop="GOODS_NAME" align="center" min-width="130px"></el-table-column>
+						<el-table-column :label="$t('shop.qty')" prop="chose_num" align="center" min-width="90px"></el-table-column >
+						<el-table-column :label="$t('shop.productPrice')" prop="member_price" align="center" min-width="130px">
+							<template slot-scope="{row}">
+								<span>{{ row.member_price }}</span>
+							</template>
+						</el-table-column>
+						<el-table-column :label="$t('shop.totalPrice')" prop="member_price_plus" align="center" min-width="130px">
+							<template slot-scope="{row}">
+								<span>{{ row.member_price_plus }}</span>
+							</template>
+						</el-table-column>
+						<el-table-column :label="$t('shop.taxRate')" prop="TAX_RATE" align="center" min-width="70px">
+							<template slot-scope="{row}">
+								<span>{{ row.TAX_RATE / 100 }}</span>
+							</template>
+						</el-table-column>
+						<el-table-column :label="$t('shop.totalTaxAmount')" prop="tax_amount_plus" align="center" min-width="120px">
+							<template slot-scope="{row}">
+								<span>{{ row.tax_amount_plus }}</span>
+							</template>
+						</el-table-column>
+					</el-table>
+
+					<div class="white-box-footer" style=" padding: 10px; line-height: 10px;">
+						<el-row :gutter="40">
+							<el-col :xs="24" :sm="24" :lg="24">
+								<!-- 订单合计 -->
+								<div class="box address_box">
+									{{ $t('shop.totalOrders') }}:
+									<div class="sum">
+										<div class="sum_box">
+											<div>{{ $t('shop.paidAmount') }}</div>
+											<div>{{ pointsSum }}</div>
+										</div>
+										<div class="sum_box">
+											<div>{{ $t('shop.freight') }}</div>
+											<div>{{ pointFreight }}</div>
+										</div>
+									</div>
+								</div>
+								<!-- 支付方式/账户余额 -->
+								<div class="box address_box">
+									{{ $t('shop.selectPayment') }}:
+									<el-radio-group v-model="payType" @change='chosePayType'>
+										<div v-for="(item, index) in payList" :key='index' class="address">
+											<el-radio :label="item.label" border>
+												{{ item.name }}<span v-if="item.label === payType" style="color: tomato;">({{ cashCurrency }}: {{ userBalance[payType] }})</span>
+											</el-radio>
+										</div>
+									</el-radio-group>
+								</div>
+								<!-- 收货地址 -->
+								<div class="box address_box">
+									{{ $t('shop.selectAddress') }}:
+									<el-radio-group v-model="addressId" @change='choseAddress'>
+										<div class="address">
+											<el-radio :label="selfPickUpAddressId" border>{{ $t('shop.selfPickUp') }}</el-radio>
+										</div>
+										<div v-for="(item, index) in shippingAddressList" :key='index' class="address">
+											<el-radio :label="item.ID" border>
+												<span>{{item.ADDRESS}}, {{item.LGA_NAME}}, {{item.PROVINCE_NAME}}</span>
+												<el-divider direction="vertical"></el-divider>
+												<span>{{item.MOBILE}}</span>
+												<el-divider direction="vertical"></el-divider>
+												<span>{{item.CONSIGNEE}}</span>
+											</el-radio>
+										</div>
+									</el-radio-group>
+								</div>
+							</el-col>
+						</el-row>
+					</div>
+
+					<div class="white-box-footer" >
+						<el-row :gutter="40">
+							<el-col :xs="24" :sm="24" :lg="24" align="left">
+								<el-button type="warning"  size="small" @click="visibleShoppingCart = false">{{ $t('shop.goBack') }}</el-button>
+								<el-button type="primary" size="small" @click="orderSubmit" :loading="submitButtonStat">{{ $t('shop.goPay') }}</el-button>
+							</el-col>
+						</el-row>
+					</div>
+				</div>
+			</div>
+		</el-dialog>
 	</div>
 </template>
 
 <script>
-import { fetchProductList, fetchProduct } from '@/api/shop'
+import {fetchProductList, fetchShoppingCart, createOrder, createApproachOrder} from '@/api/shop'
 import waves from '@/directive/waves'
-import { parseTime } from '@/utils'
+import {formatAmount, getScreenWidth} from '@/utils'
 import tool from '@/utils/tool'
 import Pagination from '@/components/Pagination'
+import usersInfo from "@/utils/usersInfo";
 
 export default {
-	name: 'villaFundProducts',
+	name: 'ProductsList',
 	components: { Pagination },
 	directives: { waves },
 	filters: {
@@ -93,6 +193,9 @@ export default {
 			}
 			return statusMap[status]
 		},
+		amountFilter(amount) {
+			return formatAmount(amount)
+		},
 	},
 	data() {
 		return {
@@ -109,18 +212,52 @@ export default {
 			tool: tool,
 			multipleSelection: [],
 			sellPriceSum: 0.00,
+			pricePvSum: 0.00,
 			taxSum: 0.00,
 			storeNums: [],
 			display: false,
 			currentPage: 1,
+			shoppingCartGoods: [],
+
+			visibleShoppingCart: false,
+			loading: false,
+
+			goods: [],
+			payList: [],
+			cashCurrency: '',
+			currency: {},
+			pointsSum: '',
+			pointFreight: '',
+			freeShipping: '',
+			goodsId: '',
+			goodsNum: '',
+			payPassword: '',
+			submitButtonStat: false,
+			sn: '',
+			orderType: '',
+			payDialog: false,
+			totalAmount: 0.00,
+			freight: 0.00,
+			userBalance: {},
+
+			payType: 'villa_points',
+			regionData: tool.getRegionData(),
+			addressId: '',
+			selfPickUpAddressId: '100000000000000000',
+			shippingAddressList: [],
+
+			screenWidth: getScreenWidth() > 600 ? '80%' : getScreenWidth() + 'px',
+			labelPosition: getScreenWidth() > 600 ? 'right' : 'top',
 		}
 	},
 	created() {
-		// 商品列表查询
 		this.getList()
 	},
+	mounted() {
+		// 支付方式、账户信息、余额
+		this.getShoppingCart()
+	},
 	methods: {
-		// 商品类别
 		getList() {
 			this.listLoading = true
 			fetchProductList(this.listQuery).then(response => {
@@ -153,19 +290,18 @@ export default {
 			})
 		},
 		// 选择商品计数
-		handleInputNumber(val, row){
-			let pageList = this.multipleSelection[this.currentPage]
+		handleInputNumber(current, row){
+			let pageList = this.multipleSelection[this.listQuery.page]
 			let selectStatus = false
 			for (let i in pageList) {
 				if (pageList[i].ID === row.ID) {
-					pageList[i].chose_num = val
+					pageList[i].chose_num = current
 					selectStatus = true
 					break
 				}
 			}
-
 			if (selectStatus) {
-				this.multipleSelection[this.currentPage] = pageList
+				this.multipleSelection[this.listQuery.page] = pageList
 				this.handleSureChange()
 			}
 		},
@@ -175,10 +311,12 @@ export default {
 				let accumulatorSellPrice = 0, accumulatorPricePv = 0, accumulatorTax = 0
 				this.multipleSelection.forEach(item => {
 					item.forEach(accumulator => { accumulatorSellPrice += accumulator.SELL_PRICE * accumulator.chose_num * accumulator.DISCOUNT / 100; })
+					item.forEach(accumulator => { accumulatorPricePv += Number(accumulator.PRICE_PV) * Number(accumulator.chose_num) * (Number(accumulator.DISCOUNT) / 100); })
 					item.forEach(accumulator => { accumulatorTax += tool.calculateTax(Number(accumulator.SELL_PRICE), Number(accumulator.TAX_RATE), Number(accumulator.chose_num)); })
 				})
 
 				this.sellPriceSum = tool.formatPrice(accumulatorSellPrice)
+				this.pricePvSum = tool.formatPrice(accumulatorPricePv)
 				this.taxSum = tool.formatPrice(accumulatorTax)
 
 				this.display = true
@@ -187,33 +325,262 @@ export default {
 				this.display = true
 			}
 		},
+		// 选择商品
 		handleSelectionChange(val) {
 			let idx = -1, num
 			for (let i in this.tableData) {
-				for (let v in val) {
+				for (let v in val){
 					if (val[v].ID === this.tableData[i].ID) {
 						idx = i
 						num = this.storeNums[idx]
-						val[v]["chose_num"] = num
+						val[v]['chose_num'] = num
 						break
 					}
 				}
 			}
-			this.multipleSelection[this.currentPage] = val
-
+			this.multipleSelection[this.listQuery.page] = val
 			// 计算统计
 			this.handleSureChange()
 		},
 		// 结算商品
 		settlement() {
+			if (this.multipleSelection.length <= 0) {
+				this.$message.error(this.$t('shop.chooseTips'))
+				return false
+			}
+			// 弹出购物车
+			this.visibleShoppingCart = true
+			// 展示购物车商品数据
+			this.getShowCart()
+		},
+		// 设置运费
+		setFreight() {
+			// 如果地址为自提,则运费为0
+			this.pointFreight = (this.addressId === this.selfPickUpAddressId) ? Number(0) : Number(this.freight);
+		},
+		// 表格合并
+		getSummaries(param) {
+			const {columns, data} = param
+			const sums = []
+			columns.forEach((column, index) => {
+				if (index === 0) {
+					sums[index] = this.$t('shop.total')
+					return
+				}
+				const values = data.map(item => Number(item[column.property]));
+				if ((!values.every(value => isNaN(value))) && [2, 3, 4, 6].includes(index)) {
+					sums[index] = values.reduce((prev, curr) => {
+						const value = Number(curr)
+						if (!isNaN(value)) {
+							return Math.round((prev + curr) * 100) / 100
+						} else {
+							return Math.round(prev * 100) / 100
+						}
+					}, 0);
+					if (index !== 2) {
+						sums[index] = sums[index]
+					}
+				}
+			});
 
-		}
-	},
-	watch: {
-		// 监听多选按钮,判断结算按钮是否可用
-		multipleSelection: function (modern) {
-			this.$data.display = modern.length > 0
+			return sums
+		},
+		// 支付方式、账户信息、余额
+		getShoppingCart() {
+			fetchShoppingCart({categoryType: this.listQuery.categoryType}).then(response => {
+				// 收货地址
+				this.shippingAddressList = response.data.allAddress
+				this.shippingAddressList.map(item => {
+					if (item.IS_DEFAULT === '1') {
+						this.addressId = item.ID
+					}
+				})
+				// 账户
+				this.userBalance = response.data.userBalance
+				// 支付方式处理
+				this.currency = response.data.payList
+				this.cashCurrency = response.data.payList[this.payType].name
+				// 支付方式
+				for (let item of response.data.sellType) {
+					if (item.id === this.listQuery.categoryType) {
+						this.payList = item.sell_type
+						break
+					}
+				}
+				// 免运费阈值
+				this.freeShipping = response.data.freeShipping
+				// 运费
+				this.freight = response.data.freight
+			})
+		},
+		// 支付
+		orderSubmit() {
+			// 账户余额
+			let amountBalance = this.userBalance[this.payType]
+			// 账户类型提示信息
+			let accountType = this.currency[this.payType].name
+			if (amountBalance < 0 || !accountType) {
+				this.$message({
+					message: this.$t('shop.paymentError'),
+					type: 'error'
+				})
+				return false
+			}
+			// 余额是否充足
+			if ((amountBalance - this.pointsSum) < 0) {
+				this.$message({
+					message: accountType + this.$t('shop.balanceNotAllow'),
+					type: 'error'
+				})
+				this.submitButtonStat = false
+				return false
+			}
+
+			this.submitButtonStat = true
+			this.$prompt(this.$t('shop.inputPasswordTips'), this.$t('common.hint'), {
+				confirmButtonText: this.$t('common.confirm'),
+				cancelButtonText: this.$t('common.cancel'),
+				customClass: 'csClass',
+				type: 'info',
+				inputType: 'password',
+				inputPattern: /\S+/,
+				inputErrorMessage: this.$t('shop.inputPasswordTips')
+			}).then(({value}) => {
+				this.payPassword = value
+				let params = {
+					goodsId: this.goodsId,
+					goodsNum: this.goodsNum,
+					payPassword: this.payPassword,
+					email: usersInfo.userEmail(),
+					addressId: this.addressId,
+					address: this.address,
+					payType: this.payType,
+				}
+
+				createOrder(params).then(() => {
+					this.submitButtonStat = false
+					this.$message({
+						message: this.$t('common.successfully'),
+						type: 'success',
+						duration: 5 * 1000
+					})
+					this.$router.push({path: `/shop/order-list`})
+				}).catch(err => {
+					this.$message({
+						message: err,
+						type: 'error',
+						duration: 5 * 1000
+					})
+					this.submitButtonStat = false
+				})
+			}).catch(err => {
+				console.log(err)
+				this.submitButtonStat = false
+			})
+		},
+		// 计算价格
+		getSumMoney () {
+			let cash_plus_sum = [];
+			let goodsId = [];
+			let goodsNum = [];
+			let choseNum = 0;
+			this.goods.map(item => {
+				choseNum = Number(item.chose_num);
+				if (choseNum > 0) {
+					cash_plus_sum.push(item.SELL_PRICE * choseNum * (item.DISCOUNT / 100));
+					goodsId.push(item.ID);
+					goodsNum.push(choseNum);
+				}
+			})
+			this.goodsNum = goodsNum;
+			this.goodsId = goodsId;
+			// 增加运费
+			let payAmount = tool.sum(cash_plus_sum);
+			// 设置运费
+			this.setFreight();
+			// 商品总价大于预定值,免运费
+			this.pointFreight = (this.pointFreight > 0) ? ((payAmount >= this.freeShipping) ? 0 : this.freight) : 0
+			// 计算总价
+			this.pointsSum = tool.formatPrice(tool.sum(cash_plus_sum) + this.pointFreight) ;
+		},
+		// 展示购物车信息
+		getShowCart () {
+			let orderGoods = this.multipleSelection
+			let cartGoods = []
+			for (let i in orderGoods) {
+				cartGoods = orderGoods[i]
+				if (!cartGoods) continue
+
+				cartGoods.map(item => {
+					if (Number(item.chose_num) > 0) {
+						let discount = item.DISCOUNT / 100
+						item.member_price = Math.round(item.SELL_PRICE * discount * 100) / 100;
+						item.member_price_plus = Math.round(item.SELL_PRICE * Number(item.chose_num) * discount * 100) / 100;
+						item.tax_amount_plus = Math.round((item.member_price - item.member_price / (1 + item.TAX_RATE / 100)) * item.chose_num * 100) / 100;
+						this.goods.push(item)
+						this.totalAmount += item.member_price_plus
+					}
+				})
+			}
+
+			this.goods = cartGoods
+
+			// 计算价格
+			this.getSumMoney();
+		},
+		// 选择收货地址
+		choseAddress (addressId) {
+			this.addressId = addressId
+			// 设置运费
+			this.setFreight()
+			// 计算价格
+			this.getSumMoney()
+		},
+		// 切换支付方式
+		chosePayType(type) {
+			this.payType = type
 		},
 	},
 }
 </script>
+
+<style>
+.el-table--medium .el-table__cell {
+	padding: 3px 0;
+}
+
+.csClass{
+	width: 360px;
+}
+
+.address{
+	line-height: 2.5rem;
+}
+.address_box{
+	border-bottom: 1px solid #e3e3e3;
+}
+.sum{
+	display: inline-block;
+}
+.box{
+	margin: 1rem 0;
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	padding-bottom: 1rem;
+}
+.sum_box{
+	display: flex;
+	margin-left: 1rem;
+}
+.sum_box > div{
+	line-height: 2rem;
+}
+.sum_box > div:nth-child(1){
+	margin-right: 1rem;
+}
+.payButton {
+	border: none;
+	padding: 0;
+}
+</style>

+ 34 - 35
src/views/table/complex-table.vue

@@ -147,7 +147,6 @@
 </template>
 
 <script>
-import { fetchList, fetchPv, createArticle, updateArticle } from '@/api/article'
 import waves from '@/directive/waves' // waves directive
 import { parseTime } from '@/utils'
 import Pagination from '@/components/Pagination' // secondary package based on el-pagination
@@ -232,15 +231,15 @@ export default {
   methods: {
     getList() {
       this.listLoading = true
-      fetchList(this.listQuery).then(response => {
-        this.list = response.data.items
-        this.total = response.data.total
-
-        // Just to simulate the time of the request
-        setTimeout(() => {
-          this.listLoading = false
-        }, 1.5 * 1000)
-      })
+      // fetchList(this.listQuery).then(response => {
+      //   this.list = response.data.items
+      //   this.total = response.data.total
+			//
+      //   // Just to simulate the time of the request
+      //   setTimeout(() => {
+      //     this.listLoading = false
+      //   }, 1.5 * 1000)
+      // })
     },
     handleFilter() {
       this.listQuery.page = 1
@@ -291,16 +290,16 @@ export default {
         if (valid) {
           this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
           this.temp.author = 'vue-element-admin'
-          createArticle(this.temp).then(() => {
-            this.list.unshift(this.temp)
-            this.dialogFormVisible = false
-            this.$notify({
-              title: '成功',
-              message: '创建成功',
-              type: 'success',
-              duration: 2000
-            })
-          })
+          // createArticle(this.temp).then(() => {
+          //   this.list.unshift(this.temp)
+          //   this.dialogFormVisible = false
+          //   this.$notify({
+          //     title: '成功',
+          //     message: '创建成功',
+          //     type: 'success',
+          //     duration: 2000
+          //   })
+          // })
         }
       })
     },
@@ -318,17 +317,17 @@ export default {
         if (valid) {
           const tempData = Object.assign({}, this.temp)
           tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
-          updateArticle(tempData).then(() => {
-            const index = this.list.findIndex(v => v.id === this.temp.id)
-            this.list.splice(index, 1, this.temp)
-            this.dialogFormVisible = false
-            this.$notify({
-              title: '成功',
-              message: '更新成功',
-              type: 'success',
-              duration: 2000
-            })
-          })
+          // updateArticle(tempData).then(() => {
+          //   const index = this.list.findIndex(v => v.id === this.temp.id)
+          //   this.list.splice(index, 1, this.temp)
+          //   this.dialogFormVisible = false
+          //   this.$notify({
+          //     title: '成功',
+          //     message: '更新成功',
+          //     type: 'success',
+          //     duration: 2000
+          //   })
+          // })
         }
       })
     },
@@ -342,10 +341,10 @@ export default {
       this.list.splice(index, 1)
     },
     handleFetchPv(pv) {
-      fetchPv(pv).then(response => {
-        this.pvData = response.data.pvData
-        this.dialogPvVisible = true
-      })
+      // fetchPv(pv).then(response => {
+      //   this.pvData = response.data.pvData
+      //   this.dialogPvVisible = true
+      // })
     },
     handleDownload() {
       this.downloadLoading = true