领取优惠券

src/api/coupon.js

@@ -8,6 +8,15 @@ export function receiveAssessmentGift(source) {
     })
 }
 
+export function receiveSalesmanCoupon(key) {
+    return request({
+        url: '/coupon/receiveSalesmanCoupon',
+        method: 'get',
+        params: { key },
+    })
+}
+
+
 export function getMyCoupons(hisOrdNum) {
     return request({
         url: '/coupon/getMyCoupons',

src/router/index.js

@@ -328,6 +328,13 @@ export const constantRoutes = [
       title: '健康宣教',
     },
   },
+  {
+    path: '/receiveCoupon/:key',
+    component: () => import('../views/isolations/ReceiveCoupon.vue'),
+    meta: {
+      title: '领取优惠券',
+    },
+  },
   {
     path: '/selectPriceQueryBranch',
     component: () => import('../views/hospital-service/query-price/SelectPriceQueryBranch.vue'),

src/views/isolations/ReceiveCoupon.vue

@@ -0,0 +1,88 @@
+<template>
+  <window-size :show-back-nav="false">
+    <div class="icon-wrapper">
+      <svg v-if="state==='SUCCESS'" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon-success">
+        <path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm-55.808 536.384-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.272 38.272 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336L456.192 600.384z"></path>
+      </svg>
+
+      <svg v-if="state==='FAILURE'" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon-failure">
+        <path d="M511.999488 65.290005C265.29162 65.290005 65.290517 265.291109 65.290517 511.998977c0 246.708891 200.001103 446.709995 446.708971 446.709995S958.70846 758.707868 958.70846 511.998977C958.70846 265.291109 758.707356 65.290005 511.999488 65.290005L511.999488 65.290005zM716.82855 637.854383c6.803963 6.819313 6.803963 17.856693 0 24.676006l-54.298673 54.29765c-6.819313 6.804986-17.85567 6.820336-24.676006 0L511.999488 590.973656 386.144082 716.828039c-6.819313 6.804986-17.871019 6.804986-24.676006 0l-54.29765-54.29765c-6.804986-6.804986-6.804986-17.856693 0-24.676006l125.869732-125.855406L307.170426 386.144594c-6.804986-6.819313-6.804986-17.871019 0-24.676006l54.29765-54.298673c6.820336-6.803963 17.856693-6.803963 24.676006 0l125.855406 125.870756 125.854383-125.870756c6.820336-6.803963 17.856693-6.803963 24.676006 0l54.298673 54.298673c6.803963 6.804986 6.803963 17.856693 0 24.676006L590.973144 511.998977 716.82855 637.854383 716.82855 637.854383zM716.82855 637.854383" fill="#FF696A"></path>
+      </svg>
+
+      <div class="result_title">
+        <p>{{title}}</p>
+      </div>
+      <div class="result_subtitle">
+        <p>{{response}}</p>
+      </div>
+    </div>
+  </window-size>
+</template>
+
+<script setup>
+import router from "../../router";
+import {receiveSalesmanCoupon} from "../../api/coupon";
+import {computed, ref} from "vue";
+
+const key = router.currentRoute.value.params.key
+
+const response = ref('')
+const state = ref('WAITING')
+
+const title = computed(() => {
+  switch (state.value) {
+    case 'SUCCESS':
+      return '领取成功'
+    case 'FAILURE':
+      return '领取失败'
+    default:
+      return ''
+  }
+})
+
+receiveSalesmanCoupon(key).then(res => {
+  response.value = res
+  state.value = 'SUCCESS'
+}).catch((err) => {
+  response.value = err
+  state.value = 'FAILURE'
+})
+</script>
+
+
+<style scoped>
+.icon-wrapper {
+  width: 100%;
+  text-align: center;
+  margin-top: 80px;
+}
+
+.icon-success {
+  color: #67c23a;
+  width: 128px;
+  height: 128px;
+}
+.icon-failure {
+  width: 128px;
+  height: 128px;
+}
+
+.result_title {
+  margin-top: 20px;
+}
+.result_title > p {
+  margin: 0;
+  font-size: 20px;
+  color: #303133;
+  line-height: 1.3;
+}
+.result_subtitle {
+  margin-top: 10px;
+}
+.result_subtitle > p {
+  margin: 0;
+  font-size: 14px;
+  color: #606266;
+  line-height: 1.3;
+}
+</style>

src/views/mine/my-coupons/MyCoupons.vue

@@ -1,16 +1,43 @@
 <template>
-  <window-size>
-    <van-coupon-list
-        :coupons="usableCoupons"
-        :disabled-coupons="unusableCoupons"
-        :show-exchange-bar="false"
-    ></van-coupon-list>
+  <window-size style="background: #f7f8fa">
+    <div style="height: calc(100% - 130px)">
+      <van-coupon-list
+          :coupons="usableCoupons"
+          :disabled-coupons="unusableCoupons"
+          :show-exchange-bar="false"
+      ></van-coupon-list>
+    </div>
+    <div class="coupon-rules-wrapper">
+      <div class="coupon-rules-title">
+        优惠劵使用须知：
+      </div>
+      <div>
+        1、优惠劵仅限微信服务号内支付使用；
+      </div>
+      <div>
+        2、不使用医保统筹的情况下方可使用优惠劵；
+      </div>
+      <div>
+        3、一张优惠券只能使用一次，余额不存不退；
+      </div>
+      <div>
+        4、优惠劵使用后作废，处方退费不退优惠劵；
+      </div>
+      <div>
+        5、使用优惠劵后，发票仅显示实际支付现金金额。
+      </div>
+    </div>
   </window-size>
 </template>
 
 <script setup>
 import {onMounted, ref} from "vue";
 import {getMyCoupons} from "../../../api/coupon";
+import store from "../../../store";
+
+const screenSize = store.state.screenSize
+
+console.log(screenSize)
 
 const usableCoupons = ref([])
 const unusableCoupons = ref([])
@@ -30,4 +57,23 @@ onMounted(() => {
 :deep(.van-coupon-list__bottom) {
   display: none;
 }
+
+.coupon-rules-wrapper {
+  padding: 4px 8px;
+  font-size: 12px;
+  height: 106px;
+  overflow-y: auto;
+  margin: 8px;
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: #d0d0d0 0 0 3px 1px;
+  color: red;
+}
+.coupon-rules-title {
+  font-weight: bold;
+  padding: 2px 0;
+}
+.coupon-rules-item {
+  padding: 2px 0;
+}
 </style>