开始做医保移动支付

src/api/medins-mobile-pay.js

@@ -0,0 +1,33 @@
+import request from '../utils/request'
+
+export function getPayAuthNo(data) {
+    return request({
+        url: '/medInsMobilePay/getPayAuthNo',
+        method: 'post',
+        data,
+    })
+}
+
+export function medInsRegister(hisOrdNum) {
+    return request({
+        url: '/medInsMobilePay/medInsRegister',
+        method: 'get',
+        params: {hisOrdNum},
+    })
+}
+
+export function medInsUploadCost(data) {
+    return request({
+        url: '/medInsMobilePay/medInsUploadCost',
+        method: 'post',
+        data,
+    })
+}
+
+export function medInsPreSettle(data) {
+    return request({
+        url: '/medInsMobilePay/medInsPreSettle',
+        method: 'post',
+        data,
+    })
+}

src/views/hospital-service/pay-mz-fee/UnPaidList.vue

@@ -21,14 +21,77 @@
           @confirm="handleConfirmPayMethod"
       ></van-picker>
     </van-popup>
+
+      <van-overlay :show="showOverlay" z-index="9999">
+
+        <div class="med-ins-mobile-pay">
+          <div class="wrapper">
+            <div class="block">
+              <div class="title">正在为您办理医保业务，请耐心等待</div>
+              <van-steps :active="currentStep">
+                <van-step v-for="item in progressText">
+                  {{ item }}
+                </van-step>
+              </van-steps>
+              <div style="height: 50px"></div>
+              <van-loading
+                  v-if="currentStep < 3"
+                  type="spinner"
+                  color="#1989fa"
+                  size="45px"
+                  vertical
+              >
+                {{loadingText[currentStep+1]}}
+              </van-loading>
+              <div v-if="currentStep >= 3">
+                <div class="fund-title">
+                  试算结束，以下为医保明细：
+                </div>
+                <div class="fund-detail">
+                  <div>
+                    医疗总计金额：￥{{fundDetail.feeSumamt}}
+                  </div>
+                  <div>
+                    医保报销金额：￥{{fundDetail.fundPay}}
+                  </div>
+                </div>
+                <div class="fund-detail">
+                  <div>
+                    个账支付金额：￥{{fundDetail.psnAcctPay}}
+                  </div>
+                  <div>
+                    现金支付金额：
+                    <span style="color: orangered">
+                      ￥{{fundDetail.ownPayAmt}}
+                    </span>
+                  </div>
+                </div>
+                <div class="pay-button">
+                  <van-button
+                      type="success"
+                      size="small"
+                      style="width: 180px"
+                  >
+                    前往支付（￥{{fundDetail.ownPayAmt}}）
+                  </van-button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </van-overlay>
+
+
   </window-size>
 </template>
 
 <script setup>
 import {getFundPayAmt, getUnPaidFee} from '@/api/pay-mz-fee'
 import empty from '@/assets/empty.png'
-import { useRouter } from 'vue-router'
-import { computed, onMounted, ref } from 'vue'
+import {useRouter} from 'vue-router'
+import {computed, onMounted, ref} from 'vue'
+import {getPayAuthNo,medInsRegister,medInsUploadCost,medInsPreSettle} from "@/api/medins-mobile-pay";
 
 const router = useRouter()
 const patientId = router.currentRoute.value.params.patientId
@@ -39,6 +102,7 @@ const showEmpty = computed(() => {
 
 const currentHisItem = ref({})
 function handleClickHisItem(item) {
+  localStorage.setItem('hisOrdNum', item.hisOrdNum)
   currentHisItem.value = item
   showPayMethodPicker.value = true
 }
@@ -105,7 +169,7 @@ function handleConfirmPayMethod({selectedValues}) {
 }
 
 function askForMedinsAuth() {
-  const authUrl = 'https://exp.wecity.qq.com/oauth/code?' +
+  location.href = 'https://exp.wecity.qq.com/oauth/code?' +
       'authType=2&' +
       'isDepart=2&' +
       'appid=wxbde6b16acad84204&' +
@@ -115,20 +179,130 @@ function askForMedinsAuth() {
       'orgCodg=H43010500370&' +
       'bizType=04107&' +
       'orgAppId=1I14E7CSC05E4460C80A0000D6788E13&' +
-      'redirectUrl=http://staticweb.hnthyy.cn/unPaidList/' +　patientId
-  location.href = authUrl
+      'redirectUrl=http://staticweb.hnthyy.cn/unPaidList/' + patientId
+}
+
+const authCode = ref('')
+const showOverlay = ref(false)
+const currentStep = ref(-1)
+const progressText = ref([
+  '查询参保信息',
+  '医保登记',
+  '费用上传',
+  '医保试算',
+])
+const loadingText = ref([
+  '正在查询参保信息...',
+  '正在办理医保登记...',
+  '正在进行费用上传...',
+  '正在进行医保试算...',
+  ''
+])
+const fundDetail = ref({})
+function startMedInsMobilePay() {
+  showOverlay.value = true
+  const hisOrdNum = localStorage.getItem('hisOrdNum')
+  getPayAuthNo({
+    hisOrdNum,
+    authCode: authCode.value,
+  }).then(wxUser => {
+    currentStep.value += 1
+
+    medInsRegister(hisOrdNum).then(mdtrtId => {
+      currentStep.value += 1
+
+      medInsUploadCost({
+        hisOrdNum,
+        payAuthNo: wxUser.pay_auth_no,
+        userLongLat: wxUser.user_longitude_latitude
+      }).then(orderInfo => {
+        currentStep.value += 1
+
+        medInsPreSettle(orderInfo).then(res4 => {
+          currentStep.value += 1
+          fundDetail.value = res4
+        }).catch(e => {
+          currentStep.value = -1
+          showOverlay.value = false
+        })
+      }).catch(e => {
+        currentStep.value = -1
+        showOverlay.value = false
+      })
+
+    }).catch(e => {
+      currentStep.value = -1
+      showOverlay.value = false
+    })
+
+  }).catch(e => {
+    currentStep.value = -1
+    showOverlay.value = false
+  })
 }
 
 onMounted(() => {
   getUnPaidFee(patientId).then((res) => {
     unpaidFees.value = res
+    let hisOrdNum = localStorage.getItem('hisOrdNum')
+    if (hisOrdNum) {
+      for (let i = 0; i < res.length; i++) {
+        if (res[i].hisOrdNum === hisOrdNum) {
+          currentHisItem.value = res[i]
+        }
+      }
+    }
   })
   const queryParams = router.currentRoute.value.query
-  const retCode = queryParams.retCode
-  if (retCode === '0') {
-    const authCode = queryParams.authCode
-    alert(authCode)
+  if (queryParams.retCode === '0') {
+    authCode.value = queryParams.authCode
+    startMedInsMobilePay()
   }
 })
 
-</script>
+</script>
+
+<style lang="scss">
+.med-ins-mobile-pay {
+  .wrapper {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .block {
+    border-radius: 8px;
+    width: 90%;
+    background-color: #fff;
+    padding-bottom: 80px;
+    .title {
+      padding: 20px 8px;
+      font-weight: bold;
+      margin-bottom: 30px;
+    }
+    .fund-title {
+      width: 100%;
+      text-align: center;
+      background-color: lightgrey;
+      padding: 4px 0;
+      font-size: 14px;
+      margin-bottom: 24px;
+    }
+    .fund-detail {
+      width: 100%;
+      display: flex;
+      > div {
+        font-size: 12px;
+        padding-left: 30px;
+        width: 50%;
+      }
+    }
+    .pay-button {
+      width: 100%;
+      text-align: center;
+      margin-top: 24px;
+    }
+  }
+}
+</style>