支付和支付成功

src/api/config.ts

@@ -1,8 +1,6 @@
 import axios from 'axios'
 import { Toast } from 'vant'
 
-Toast.setDefaultOptions({ getContainer: '#app' })
-
 // 配置api地址
 // axios设置
 const $ajax = axios.create({
@@ -30,7 +28,7 @@ $ajax.interceptors.response.use((response) => {
   if (response.data.error_msg === '需要登录' || response.data.error_code === 1001) {
     Toast('需要登录')
   }
-  if (response.data.error_code !== 0) {
+  if (response.data.error_code !== 0 && response.config.headers.noToast !== 1) {
     Toast(response.data.error_msg || '请求失败，请重试')
   }
   return response

src/api/home.ts

@@ -19,10 +19,11 @@ export function getReportDetail (data: any) {
   })
 }
 
-export function serviceTerms () {
-  // data = qs.stringify(data)
+// 数据报告详情页
+export function orderSubmit (data: any) {
   return request({
-    url: '/jyapp/front/staticPage/dataExport_serviceterms.html',
-    method: 'get'
+    url: '/datareport/orderSubmit',
+    method: 'post',
+    data
   })
 }

src/api/pay.ts

@@ -0,0 +1,42 @@
+import request from '@/api/config.ts'
+import qs from 'qs'
+
+// 获取wxSdkSign, 这个方法在 @/utils/globalVariable.ts中调用
+export function getWxSdkSign (data: any) {
+  data = qs.stringify(data)
+  return request({
+    url: '/jypay/wx/getwxSdkSign',
+    method: 'post',
+    data
+  })
+}
+
+// app支付
+export function appPay (data: any) {
+  data = qs.stringify(data)
+  return request({
+    url: '/datareport/pay',
+    method: 'post',
+    data
+  })
+}
+
+// 查询是否支付成功
+export function isPaySuccess (data: any) {
+  data = qs.stringify(data)
+  return request({
+    url: '/datareport/paySuccess',
+    method: 'post',
+    data
+  })
+}
+
+// 查询订单详情
+export function orderDetail (data: any) {
+  data = qs.stringify(data)
+  return request({
+    url: '/datareport/orderDetail',
+    method: 'post',
+    data
+  })
+}

src/main.ts

@@ -4,12 +4,14 @@ import router from './router'
 import store from './store'
 import '@/utils/'
 import { Component } from 'vue-property-decorator'
+import { Toast } from 'vant'
 import VueBus from './vue_bus'
 
 Component.registerHooks(['beforeRouteEnter', 'beforeRouteLeave', 'beforeRouteUpdate'])
+Toast.setDefaultOptions({ getContainer: '#app' })
 
 Vue.config.productionTip = false
-Vue.use(VueBus)
+Vue.use(Toast).use(VueBus)
 
 new Vue({
   router,

src/router/modules/home.ts

@@ -24,7 +24,7 @@ export default [
     }
   },
   {
-    path: '/pay',
+    path: '/pay/:orderCode',
     name: 'pay',
     component: () => import(/* webpackChunkName: "pay" */ '@/views/pay/Pay.vue'),
     meta: {
@@ -34,7 +34,7 @@ export default [
   {
     path: '/pay-success',
     name: 'pay-success',
-    component: () => import(/* webpackChunkName: "pay" */ '@/views/pay/Pay.vue'),
+    component: () => import(/* webpackChunkName: "pay" */ '@/views/pay/PaySuccess.vue'),
     meta: {
       title: '支付结果'
     }

src/store/index.ts

@@ -1,6 +1,5 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-import { isWeiXinBrowser } from '@/utils/globalFunctions.ts'
 
 if (process.env.NODE_DEV !== 'production') {
   Vue.use(Vuex)
@@ -18,10 +17,6 @@ export default new Vuex.Store({
   state: {
     pageTitle: '剑鱼标讯',
     direction: 'forward', // 页面切换方向
-    env: {
-      // 运行环境是否是微信浏览器
-      isWeiXinBrowser: isWeiXinBrowser()
-    },
     defaultLayoutConf: {
       // layout标题,优先级高于$route.meta
       title: '',

src/store/modules/home.ts

@@ -1,7 +1,6 @@
 import {
   getReportList,
-  getReportDetail,
-  serviceTerms
+  getReportDetail
 } from '@/api/home'
 
 export default {
@@ -35,13 +34,6 @@ export default {
         const res = await getReportDetail(data)
         return res.data
       } catch (error) {}
-    },
-    // 测试-获取条款html页面
-    async getServiceTerms (state) {
-      try {
-        const res = await serviceTerms()
-        return res.data
-      } catch (error) {}
     }
   },
   getters: {}

src/style/common.scss

@@ -1,3 +1,6 @@
+@import './pic-icon.scss';
+@import './vant-reset.scss';
+
 $color_main: #2ABED1;
 
 // 文字颜色高亮

src/style/pic-icon.scss

@@ -0,0 +1,25 @@
+.j-icon {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+}
+
+.icon-duihao {
+  background: transparent url(~@/assets/image/icon-duihao.png) no-repeat center;
+  background-size: contain;
+}
+
+.icon-checkbox-choose {
+  background: transparent url(~@/assets/image/icon-checkbox-choose.png) no-repeat center;
+  background-size: contain;
+}
+
+.icon-wx-pay {
+  background: transparent url(~@/assets/image/icon-wx-pay.png) no-repeat center;
+  background-size: contain;
+}
+
+.icon-ali-pay {
+  background: transparent url(~@/assets/image/icon-ali-pay.png) no-repeat center;
+  background-size: contain;
+}

src/style/vant-reset.scss

@@ -0,0 +1,82 @@
+.one-cell {
+  .van-cell {
+    font-size: 16px;
+    color: #171826;
+    padding: 15px 16px;
+    .van-cell__title {
+      width: auto;
+    }
+    .van-field__control {
+      font-size: 14px;
+      color: #9B9CA3;
+    }
+    .van-cell__value {
+      font-size: 13px;
+    }
+  }
+}
+
+// 选择器重置样式
+.j-date-time-picker {
+  .j-picker-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 16px;
+    height: 64px;
+    font-size: 16px;
+    .header-title {
+      min-width: 80px;
+      color: #171826;
+      font-size: 20px;
+    }
+    .j-icon {
+      color: #C0C4CC;
+      text-align: right;
+    }
+  }
+
+  .picker-footer {}
+
+  .van-picker__frame {
+    background: rgba(42, 190, 209, 0.05);
+    &::after, &::before {
+      border: none;
+    }
+  }
+  .van-picker-column__item {
+    font-size: 18px;
+  }
+  .van-picker-column__item--selected {
+    color: #2ABED1;
+    font-size: 20px;
+  }
+}
+
+// // cell右侧group样式
+// .van-cell-group {
+//   .van-cell {
+//     .van-cell__value {
+//       font-size: 14px;
+//     }
+//     .van-icon.van-icon-arrow {
+//       color: #C0C4CC;
+//     }
+//   }
+// }
+
+// 重置icon样式
+
+// 重置checkbox disabled样式
+.van-checkbox__icon .van-icon {
+  // border: none;
+}
+
+.van-checkbox__icon--disabled.van-checkbox__icon--checked {
+  .van-icon {
+    color: #fff;
+    background-color: #e5e5e5;
+    border-color: transparent;
+  }
+}

src/utils/globalVariable.ts

@@ -0,0 +1,26 @@
+import Vue from 'vue'
+import { isWeiXinBrowser } from '@/utils/globalFunctions.ts'
+import { getWxSdkSign } from '@/api/pay.ts'
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $env: any;
+    $getWxSdkSign: any;
+  }
+}
+
+const inWeiXinBrowser = isWeiXinBrowser()
+
+// 全局变量
+Vue.prototype.$env = {
+  isWeiXinBrowser: inWeiXinBrowser,
+  platform: inWeiXinBrowser ? 'wx' : 'app'
+}
+
+// 如果是微信浏览器,全局初始化一个微信SDK
+if (inWeiXinBrowser) {
+  // Vue.prototype.$getWxSdkSign = getWxSdkSign
+  // getWxSdkSign({ url: location.href.split('#')[0] }).then(res => {
+  //   console.log(res)
+  // })
+}

src/utils/index.ts

@@ -1,3 +1,4 @@
 import './globalDirectives'
 import './globalFilters'
+import './globalVariable'
 // import './vConsole'

src/views/buy/Buy.vue

@@ -4,10 +4,9 @@
       <van-cell-group title="请填写订单信息">
         <van-field v-model="userInfo.email" class="field" center placeholder="输入邮箱地址" @blur="checkPass('email')" :error-message="errorMsg.email" />
         <transition name="van-slide-right">
-          <van-field v-show="true" class="field" center v-model="userInfo.code" @blur="checkPass('code')" placeholder="输入邮箱验证码" :error-message="errorMsg.code">
+          <van-field v-show="true" class="field" center v-model="userInfo.code" maxlength="6" @blur="checkPass('code')" placeholder="输入邮箱验证码" :error-message="errorMsg.code">
             <template #button>
-              <!-- <countdown-button @click="sendCode" :countdown="120" :disabled="sendButtonDisabled"></countdown-button> -->
-              <countdown-button @click="sendCode" :countdown="120"></countdown-button>
+              <countdown-button @click="sendCode" :countdown="120" :disabled="sendButtonDisabled"></countdown-button>
             </template>
           </van-field>
         </transition>
@@ -42,7 +41,7 @@
         <template #title>
           <p class="state">
             <span>我已阅读，理解并接受</span>
-            <a class="link highlight-text" @click="serviceTerms" href="/jyapp/front/staticPage/dataExport_serviceterms.html">《剑鱼标讯线上购买与服务条款》</a>
+            <a class="link highlight-text" @click.stop.prevent="toServiceTerms" href="/jyapp/front/staticPage/dataExport_serviceterms.html">《剑鱼标讯线上购买与服务条款》</a>
           </p>
         </template>
       </van-cell>
@@ -56,6 +55,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import { Field, Cell, CellGroup, Checkbox, CheckboxGroup } from 'vant'
+import { mapActions } from 'vuex'
 import countdownButton from '@/components/common/CountDownButton.vue'
 import { inputFocusHideFooter } from '@/utils/globalFunctions'
 
@@ -68,10 +68,17 @@ import { inputFocusHideFooter } from '@/utils/globalFunctions'
     [Checkbox.name]: Checkbox,
     [CheckboxGroup.name]: CheckboxGroup,
     countdownButton
+  },
+  methods: {
+    ...mapActions({
+      // getServiceTerms: 'home/getServiceTerms'
+    })
   }
 })
 
-export default class Buy extends Vue {
+export default class BuyReport extends Vue {
+  // protected getServiceTerms!: any
+
   tipText = [
     '数据报告将以邮件形式发至您的邮箱',
     '数据报告一经购买不支持退货、退款',
@@ -127,12 +134,12 @@ export default class Buy extends Vue {
     return !this.iAgreee || !this.allRegPass
   }
 
-  // get sendButtonDisabled () {
-  //   const type = 'email'
-  //   const reg = this.errorMsgMap[type].reg
-  //   const email = this.userInfo[type]
-  //   return !reg.test(email)
-  // }
+  get sendButtonDisabled () {
+    const type = 'email'
+    const reg = this.errorMsgMap[type].reg
+    const email = this.userInfo[type]
+    return !reg.test(email)
+  }
 
   toggleStatementState () {
     this.iAgreee = !this.iAgreee
@@ -197,8 +204,9 @@ export default class Buy extends Vue {
     return f
   }
 
-  serviceTerms () {
-    console.log('serviceTerms')
+  toServiceTerms (e) {
+    this.saveBuyState()
+    // location.href = e.target.href
   }
 
   sendCode (cb) {
@@ -210,9 +218,23 @@ export default class Buy extends Vue {
     console.log('sendCode')
   }
 
+  verifyCode () {
+    console.log('verifyCode')
+  }
+
   onSubmit () {
     console.log(JSON.stringify(this.userInfo))
   }
+
+  saveBuyState () {
+    const JSON = {
+      orderInfo: this.orderInfo,
+      userInfo: this.userInfo,
+      allRegPass: this.allRegPass,
+      iAgreee: this.iAgreee,
+      errorMsg: this.errorMsg
+    }
+  }
 }
 </script>
 

src/views/pay/Pay.vue

@@ -2,22 +2,24 @@
   <div class="j-pay">
     <div class="j-main">
       <div class="price-info">
-        <span class="info-text"></span>
+        <span class="info-text">需支付金额</span>
         <span class="price-count">
           <span class="pc-l">&yen;</span>
           <span class="pc-r">{{ orderInfo.price }}</span>
         </span>
       </div>
-      <van-radio-group v-model="radio">
+      <van-radio-group v-model="payWay">
         <van-cell-group>
-          <van-cell title="单选框 1" clickable @click="radio = '1'">
-            <template #right-icon>
-              <van-radio name="1" />
+          <van-cell v-for="(item, index) in payPlatFormWayMap[env.platform]" :key="index" center clickable :title="item.title" @click="radioCheck(item.type)">
+            <template #icon>
+              <div class="label-icon j-icon" :class="item.iconClass"></div>
             </template>
-          </van-cell>
-          <van-cell title="单选框 2" clickable @click="radio = '2'">
             <template #right-icon>
-              <van-radio name="2" />
+              <van-radio :name="item.type">
+                <template #icon>
+                  <div class="radio-icon j-icon icon-duihao"></div>
+                </template>
+              </van-radio>
             </template>
           </van-cell>
         </van-cell-group>
@@ -31,6 +33,9 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import { Cell, CellGroup, Radio, RadioGroup } from 'vant'
+import { mapState, mapActions } from 'vuex'
+
+declare const JyObj: any
 
 @Component({
   name: 'pay',
@@ -39,20 +44,128 @@ import { Cell, CellGroup, Radio, RadioGroup } from 'vant'
     [CellGroup.name]: CellGroup,
     [Radio.name]: Radio,
     [RadioGroup.name]: RadioGroup
+  },
+  methods: {
+    // ...mapState({
+    //   getEnv: 'env'
+    // })
   }
 })
 
 export default class Pay extends Vue {
   orderInfo = {
+    ordercode: '',
     price: '2020'
   }
 
+  // 将原型的全局变量提出来
+  env = this.$env
+
+  payPlatFormWayMap = {
+    wx: [
+      {
+        title: '微信支付',
+        type: 'wx_js',
+        iconClass: 'icon-wx-pay'
+      }
+    ],
+    app: [
+      {
+        title: '微信支付',
+        type: 'wx_app',
+        iconClass: 'icon-wx-pay'
+      },
+      {
+        title: '支付宝支付',
+        type: 'ali_app',
+        iconClass: 'icon-ali-pay'
+      }
+    ]
+  }
+
+  payWay = this.payPlatFormWayMap[this.env.platform][0].type
+
+  created () {
+    this.orderInfo.ordercode = this.$route.params.orderCode
+    console.log(this.$route)
+  }
+
+  radioCheck (type) {
+    this.payWay = type
+  }
+
+  // 确认支付
   confirmPay () {
-    console.log(123)
+    if (this.env.isWeiXinBrowser) {
+      this.wxPay()
+    } else {
+      this.appPay()
+    }
+  }
+
+  // 微信支付逻辑
+  wxPay () {
+    console.log('wxPay')
+  }
+
+  // app支付逻辑
+  appPay () {
+    console.log('appPay')
+    console.log(this.payWay)
   }
 }
 </script>
 
 <style lang="scss">
-  .j-pay {}
+  .j-pay {
+    .price-info {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      margin-bottom: 8px;
+      height: 80px;
+      background-color: #fff;
+      .info-text {
+        color: #9B9CA3;
+        font-size: 12px;
+        line-height: 18px;
+        margin-bottom: 4px;
+      }
+      .price-count {
+        color: #FB483D;
+        font-size: 18px;
+        line-height: 30px;
+        .pc-r {
+          margin-left: 4px;
+          font-size: 22px;
+        }
+      }
+    }
+
+    .van-cell {
+      height: 54px;
+    }
+
+    .van-radio-group {
+      .label-icon {
+        width: 28px;
+        height: 28px;
+      }
+      .van-cell__title {
+        margin-left: 14px;
+        font-size: 15px;
+        line-height: 22px;
+        color: #171826;
+      }
+      .radio-icon {
+        display: none;
+      }
+      .van-radio__icon--checked {
+        .radio-icon {
+          display: inline-block;
+        }
+      }
+    }
+  }
 </style>

src/views/pay/PaySuccess.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="j-pay-success">
+    <div class="j-main">
+      <div class="pay-success">
+        <span class="j-icon icon-checkbox-choose"></span>
+        <span class="pay-text">支付成功</span>
+        <span class="pay-count">
+          <span class="pc-l">&yen;</span>
+          <span class="pc-r">{{ orderInfo.price }}</span>
+        </span>
+        <p class="pay-text-desc">我们会尽快将数据报告发送至</p>
+        <p class="pay-text-desc">123@qq.com</p>
+      </div>
+      <van-cell-group class="order-info">
+        <van-cell center title="支付方式" value="内容" />
+        <van-cell center title="支付时间" value="内容" />
+        <van-cell center title="订单编号" value="内容" />
+      </van-cell-group>
+    </div>
+    <div class="j-button-group j-footer">
+      <button class="j-button-confirm" @click="onConfirm">查看订单</button>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { Cell, CellGroup } from 'vant'
+import { mapActions } from 'vuex'
+
+@Component({
+  name: 'pay',
+  components: {
+    [Cell.name]: Cell,
+    [CellGroup.name]: CellGroup
+  },
+  methods: {
+    // ...mapState({
+    //   getEnv: 'env'
+    // })
+  }
+})
+
+export default class PaySuccess extends Vue {
+  orderInfo = {
+    price: '2020'
+  }
+
+  // 将原型的全局变量提出来
+  env = this.$env
+
+  mounted () {
+    // console.log(this.env)
+  }
+
+  onConfirm () {
+    console.log('confirm')
+    console.log(this.env)
+  }
+}
+</script>
+
+<style lang="scss">
+  .j-pay-success {
+    .van-cell {
+      height: 54px;
+    }
+    .icon-checkbox-choose {
+      width: 80px;
+      height: 80px;
+    }
+    .pay-success {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      background-color: #fff;
+      height: 316px;
+      border-top: 1px solid transparent;
+      .j-icon {
+        margin-top: 50px;
+        margin-bottom: 18px;
+      }
+      .pay-text {
+        font-size: 18px;
+        line-height: 26px;
+        color: #2ABED1;
+      }
+      .pay-count {
+        margin-top: 4px;
+        margin-bottom: 24px;
+        color: #171826;
+        font-size: 17px;
+        line-height: 30px;
+        .pc-r {
+          margin-left: 4px;
+          font-size: 24px;
+        }
+      }
+      .pay-text-desc {
+        font-size: 13px;
+        line-height: 20px;
+        color: #5F5E64;
+      }
+    }
+
+    .order-info {
+      margin-top: 8px;
+    }
+  }
+</style>

vue.config.js

@@ -45,7 +45,6 @@ module.exports = {
     proxy: {
       '^/testServer': {
         target: 'http://192.168.20.241:92/',
-        // target: 'http://app2-jytest.jianyu360.cn'，
         changeOrigin: true,
         logLevel: 'debug',
         pathRewrite: {