添加订单支付页面

package.json

@@ -23,6 +23,7 @@
     "@better-scroll/core": "^2.0.0-beta.6",
     "axios": "^0.19.2",
     "core-js": "^3.6.4",
+    "dayjs": "^1.8.33",
     "js-cookie": "^2.2.1",
     "lodash": "^4.17.19",
     "normalize.css": "^8.0.1",

src/components/Vant/index.js

@@ -45,7 +45,8 @@ import {
   DropdownItem,
   ContactCard,
   ContactList,
-  ContactEdit
+  ContactEdit,
+  NoticeBar
 } from 'vant'
 
 Vue.use(Toast)
@@ -92,3 +93,4 @@ Vue.use(Toast)
   .use(ContactCard)
   .use(ContactList)
   .use(ContactEdit)
+  .use(NoticeBar)

src/filter/index.js

@@ -0,0 +1,15 @@
+import dayjs from 'dayjs'
+import { isNumber } from 'lodash'
+export const dateFormat = (value, format = 'YYYY-MM-DD') =>
+  value ? dayjs(value * 1000).format(format) : ''
+
+export const yuan = value => {
+  return isNumber(value) ? `${(value).toFixed(2)}` : value
+}
+
+export default {
+  install(Vue) {
+    Vue.filter('yuan', yuan)
+    Vue.filter('dateFormat', dateFormat)
+  }
+}

src/main.js

@@ -16,7 +16,9 @@ import './permission'
 import '@/components/Vant'
 // register common components globally
 import '@/components/common'
-import { toDecimal2 } from '@/utils'
+import filters from '@/filter'
+
+Vue.use(filters)
 
 // mock in online
 if (process.env.NODE_ENV === 'production') {
@@ -26,8 +28,6 @@ if (process.env.NODE_ENV === 'production') {
 
 Vue.config.productionTip = false
 
-Vue.prototype.$toDecimal2 = toDecimal2
-
 new Vue({
   router,
   store,

src/router/index.js

@@ -124,6 +124,15 @@ const routes = [
       keepAlive: true
     }
   },
+  // 订单支付
+  {
+    path: '/order/pay',
+    name: 'OrderPay',
+    component: () => import('@/views/order/pay'),
+    meta: {
+      title: '订单支付'
+    }
+  },
   // 订单列表
   {
     path: '/order/list',

src/utils/localStorage.js

@@ -0,0 +1,20 @@
+export const getLocalStorage = (...args) => {
+  const storage = {}
+  args.forEach(arg => {
+    storage[arg] = window.localStorage.getItem(arg) || null
+  })
+  return storage
+}
+
+export const setLocalStorage = data => {
+  Object.keys(data).forEach(prop => {
+    const el = data[prop]
+    window.localStorage.setItem(prop, el)
+  })
+}
+
+export const removeLocalStorage = (...args) => {
+  args.forEach(arg => {
+    window.localStorage.removeItem(arg)
+  })
+}

src/views/cart/index.vue

@@ -11,7 +11,7 @@
       :desc="item.specifications.join(' ')"
       :tag="'123'"
       :tags="['满50减20', 'hot']"
-      :price="item.price"
+      :price="item.price | yuan"
       :isChecked="item.checked"
       @input="handleItemSelect"
       @handleDelete="handleDelete"
@@ -66,9 +66,6 @@ export default {
       getCartList().then(res => {
         const { data } = res.map
         this.list = data
-        this.list.forEach(item => {
-          item.price = this.$toDecimal2(item.price)
-        })
         this.isSkeletonShow = false
       })
     },

src/views/detail/index.vue

@@ -31,7 +31,6 @@
 
 <script>
 import { getDetail } from '@/api/detail'
-import NavBar from '@/components/NavBar'
 import Swiper from './modules/Swiper'
 import Overview from './modules/Overview'
 import Section from './modules/Section'
@@ -46,7 +45,6 @@ export default {
   name: 'Detail',
   props: ['goodsId'],
   components: {
-    NavBar,
     Swiper,
     Overview,
     Section,

src/views/order/confirm/modules/ListItem.vue

@@ -83,6 +83,7 @@ export default {
       const userId = this.id
       submit({ cartIdArr, addressId, userId, message }).then(res => {
         this.$toast('提交成功')
+        this.$router.push({ name: 'OrderPay' })
       })
     }
   }

src/views/order/pay/index.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="payment">
+    <nav-bar title="购物车" />
+    <!-- closeable 模式，在右侧显示关闭按钮 -->
+    <van-notice-bar mode="closeable">请在半小时内完成付款，否则系统自动取消订单</van-notice-bar>
+
+    <van-cell-group class="payment_group">
+      <van-cell title="订单编号" :value="order.orderInfo.orderSn" />
+      <van-cell title="实付金额">
+        <span class="red">{{1 *100 | yuan}}</span>
+      </van-cell>
+    </van-cell-group>
+
+    <div class="pay_way_group">
+      <div class="pay_way_title">选择支付方式</div>
+      <van-radio-group v-model="payWay">
+        <van-cell-group>
+          <van-cell>
+            <template slot="title">
+              <img src="../../../assets/images/ali_pay.png" alt="支付宝" width="82" height="29" />
+            </template>
+            <van-radio name="ali" />
+          </van-cell>
+          <van-cell>
+            <template slot="title">
+              <img src="../../../assets/images/wx_pay.png" alt="微信支付" width="113" height="23" />
+            </template>
+            <van-radio name="wx" />
+          </van-cell>
+        </van-cell-group>
+      </van-radio-group>
+    </div>
+
+    <van-button class="pay_submit" @click="pay" type="primary" bottomAction>去支付</van-button>
+  </div>
+</template>
+
+<script>
+import { Radio, RadioGroup, Dialog } from 'vant'
+import { orderDetail, orderPrepay, orderH5pay } from '@/api/order'
+import _ from 'lodash'
+import { getLocalStorage, setLocalStorage } from '@/utils/localStorage'
+
+export default {
+  name: 'payment',
+
+  data() {
+    return {
+      payWay: 'wx',
+      order: {
+        orderInfo: {},
+        orderGoods: []
+      },
+      orderId: 0
+    }
+  },
+  created() {
+    if (_.has(this.$route.params, 'orderId')) {
+      this.orderId = this.$route.params.orderId
+      this.getOrder(this.orderId)
+    }
+  },
+  methods: {
+    getOrder(orderId) {
+      orderDetail({ orderId: orderId }).then((res) => {
+        this.order = res.data.data
+      })
+    },
+    pay() {
+      Dialog.alert({
+        message:
+          '你选择了' + (this.payWay === 'wx' ? '微信支付' : '支付宝支付')
+      }).then(() => {
+        if (this.payWay === 'wx') {
+          const ua = navigator.userAgent.toLowerCase()
+          const isWeixin = ua.indexOf('micromessenger') !== -1
+          if (isWeixin) {
+            orderPrepay({ orderId: this.orderId })
+              .then((res) => {
+                const data = res.data.data
+                const prepayData = JSON.stringify({
+                  appId: data.appId,
+                  timeStamp: data.timeStamp,
+                  nonceStr: data.nonceStr,
+                  package: data.packageValue,
+                  signType: 'MD5',
+                  paySign: data.paySign
+                })
+                setLocalStorage({ prepay_data: prepayData })
+
+                if (typeof WeixinJSBridge === 'undefined') {
+                  if (document.addEventListener) {
+                    document.addEventListener(
+                      'WeixinJSBridgeReady',
+                      this.onBridgeReady,
+                      false
+                    )
+                  } else if (document.attachEvent) {
+                    document.attachEvent(
+                      'WeixinJSBridgeReady',
+                      this.onBridgeReady
+                    )
+                    document.attachEvent(
+                      'onWeixinJSBridgeReady',
+                      this.onBridgeReady
+                    )
+                  }
+                } else {
+                  this.onBridgeReady()
+                }
+              })
+              .catch((err) => {
+                Dialog.alert({ message: err.data.errmsg })
+                this.$router.replace({
+                  name: 'paymentStatus',
+                  params: {
+                    status: 'failed'
+                  }
+                })
+              })
+          } else {
+            orderH5pay({ orderId: this.orderId })
+              .then((res) => {
+                const data = res.data.data
+                window.location.replace(
+                  data.mwebUrl +
+                    '&redirect_url=' +
+                    encodeURIComponent(
+                      window.location.origin +
+                        '/#/?orderId=' +
+                        this.orderId +
+                        '&tip=yes'
+                    )
+                )
+              })
+              .catch((err) => {
+                Dialog.alert({ message: err.data.errmsg })
+              })
+          }
+        } else {
+          // todo : alipay
+        }
+      })
+    },
+    onBridgeReady() {
+      const that = this
+      const data = getLocalStorage('prepay_data')
+      // eslint-disable-next-line no-undef
+      WeixinJSBridge.invoke(
+        'getBrandWCPayRequest',
+        JSON.parse(data.prepay_data),
+        function (res) {
+          if (res.err_msg === 'get_brand_wcpay_request:ok') {
+            that.$router.replace({
+              name: 'paymentStatus',
+              params: {
+                status: 'success'
+              }
+            })
+          } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
+            that.$router.replace({
+              name: 'paymentStatus',
+              params: {
+                status: 'cancel'
+              }
+            })
+          } else {
+            that.$router.replace({
+              name: 'paymentStatus',
+              params: {
+                status: 'failed'
+              }
+            })
+          }
+        }
+      )
+    }
+  },
+
+  components: {
+    [Radio.name]: Radio,
+    [RadioGroup.name]: RadioGroup,
+    [Dialog.name]: Dialog
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.payment {
+  min-height: 100vh;
+  background: #f5f5f5;
+
+  .van-notice-bar {
+    margin-bottom: 2vw;
+  }
+
+  .payment_group {
+    margin-bottom: 2vw;
+  }
+
+  .pay_submit {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+  }
+
+  .pay_way_group img {
+    vertical-align: middle;
+  }
+
+  .pay_way_title {
+    padding: 5vw 4vw;
+    background-color: #fff;
+  }
+}
+</style>