- 增加 非支付宝浏览环境下扫码切换支付宝弹窗提示

- 增加 android和ios设备支付宝下载链接
- 增加 android设备复制粘贴下载链接功能

README.md

@@ -1,7 +1,7 @@
 <!--
  * @Date: 2022-01-19 10:08:58
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-02-25 15:28:25
+ * @LastEditTime: 2022-02-25 17:55:22
  * @FilePath: \AntpayFrontEnd\README.md
  * @description: readme说明文档
 -->
@@ -27,6 +27,7 @@ npm run build
 - css类名: 小写驼峰 中间用 - 隔开
 - js函数方法: 开头小写后面开头大写驼峰
 - .vue 文件命名: 统一大写驼峰
+- 常量命名: 全部大写 以_拼接, 具体例子见: /src/config/models下的文件
 
 ### git 提交规范
 - feature 新增一个功能
@@ -53,4 +54,11 @@ build
 - 增加 环境设置脚本
 - 增加 nginx.conf文件
 fix
-- 修复 路由history模式原因引起的页面空白的问题
+- 修复 路由history模式原因引起的页面空白的问题
+
+### v1.0.1
+`2022.02.25`
+feature
+- 增加 非支付宝浏览环境下扫码切换支付宝弹窗提示
+- 增加 android和ios设备支付宝下载链接
+- 增加 android设备复制粘贴下载链接功能

src/App.vue

@@ -1,8 +1,8 @@
 <!--
  * @Date: 2022-01-19 10:08:26
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-02-23 17:23:45
- * @FilePath: \AlipayFrontEnd\src\App.vue
+ * @LastEditTime: 2022-02-25 16:45:37
+ * @FilePath: \AntpayFrontEnd\src\App.vue
  * @description:
 -->
 <template>
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import { VersionModel } from './config/models';
+import { VERSION_MODEL } from './config/models';
 export default {
     provide() {
             return {
@@ -25,7 +25,7 @@ export default {
             }
         },
         mounted() {
-            console.log("当前版本号::", VersionModel, "当前环境::", process.env.NODE_ENV);
+            console.log("当前版本号::", VERSION_MODEL, "当前环境::", process.env.NODE_ENV);
         },
         methods: {
             reload() {

src/config/models.js

@@ -1,13 +1,21 @@
 /*
  * @Date: 2021-11-20 10:26:39
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-02-23 17:36:43
- * @FilePath: \AlipayFrontEnd\src\config\models.js
+ * @LastEditTime: 2022-02-25 17:36:47
+ * @FilePath: \AntpayFrontEnd\src\config\models.js
  * @description:
  */
-export const VersionModel = '1.0.0';
-export const ImageUrl = {
+export const VERSION_MODEL = '1.0.0';
+export const IMAGE_URL = {
     production: 'http://zfb.ssjlai.com/web/',
     test: 'http://zfb.ssjlai.com/web/',
     development: 'http://zfb.ssjlai.com/web/'
 };
+//用户设备
+export const USER_AGENT = window.navigator.userAgent;
+
+// 支付宝下载链接
+export const ALIPAY_DOWN_URL = {
+    android: 'https://d.alipay.com',
+    ios: 'https://itunes.apple.com/cn/app/zhi-fu-bao-qian-bao-yu-e-bao/id333206289?mt=8'
+};

src/main.js

@@ -1,8 +1,8 @@
 /*
  * @Date: 2022-01-19 10:08:26
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-02-15 17:22:45
- * @FilePath: \alipay-scan-code-front-end\src\main.js
+ * @LastEditTime: 2022-02-25 17:51:58
+ * @FilePath: \AntpayFrontEnd\src\main.js
  * @description:
  */
 import Vue from "vue";
@@ -33,6 +33,7 @@ import {
     Empty,
     Notify,
     Loading,
+    Toast,
 } from 'vant';
 
 Vue
@@ -57,10 +58,10 @@ Vue
     .use(Empty)
     .use(Notify)
     .use(Loading)
+    .use(Toast)
     .use(Tabs);
 
 Vue.config.productionTip = false;
-
 new Vue({
   router,
   store,

src/utils/index.js

@@ -1,3 +1,10 @@
+/*
+ * @Date: 2022-01-19 16:39:51
+ * @LastEditors: JinxChen
+ * @LastEditTime: 2022-02-25 16:55:56
+ * @FilePath: \AntpayFrontEnd\src\utils\index.js
+ * @description: 工具类
+ */
 
 
 /**
@@ -20,4 +27,26 @@ export function isNull(o) {
  */
 export function isNotNull(o) {
     return !isNull(o);
-}
+}
+
+// 判断用户是否是支付宝浏览器
+export function isAlipayBrowser(userAgent) {
+    if (/AlipayClient/.test(userAgent)) {
+        console.log("当前浏览器是支付宝浏览器");
+        return true;
+    } else {
+        console.log("当前浏览器是非支付宝浏览器");
+        return false;
+    }
+}
+
+// 判断用户的设备是否是android
+export function isAndroid(userAgent) {
+    if (userAgent.indexOf('Android') > -1 || userAgent.indexOf('Linux') > -1) {
+        console.log("当前用户设备是android");
+        return true;
+    } else if (userAgent.indexOf('iPhone') > -1) {
+        console.log("当前用户设备是ios");
+        return false;
+    }
+}

src/views/AliPayIndex.vue

@@ -1,8 +1,8 @@
 <!--
  * @Date: 2022-01-19 16:52:21
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-02-16 11:05:34
- * @FilePath: \alipay-scan-code-front-end\src\views\AliPayIndex.vue
+ * @LastEditTime: 2022-02-25 17:49:42
+ * @FilePath: \AntpayFrontEnd\src\views\AliPayIndex.vue
  * @description:
 -->
 <template>
@@ -100,13 +100,28 @@
                 </div>
             </div>
         </div>
+        <!-- 非支付宝浏览器提示弹窗 -->
+        <van-dialog v-model="isAlipayBrowser" title="提示您切换支付宝扫码！"
+        :show-cancel-button="false"
+        :show-confirm-button="false"
+        confirm-button-color="#1989fa"
+        className="alipay-dialog"
+        :close-on-click-overlay="true">
+           <p>1.如果已安装支付宝，请打开支付宝扫码。</p>
+           <p>2.如果未安装支付宝，请到应用商店下载。
+               <span v-show="!isAndroid" @click="onDownAlipay" class="down">点击前往应用商店下载</span>
+               <span v-show="isAndroid">或复制 {{alipayDownUrl.android}}
+               [<span @click="onCopy" class="copy-span">点击复制
+               </span>],粘贴到浏览器打开下载页面。</span></p>
+               <p class="close-text">点击屏幕任意地方关闭弹窗</p>
+        </van-dialog>
     </div>
 </template>
 
 <script>
-import { isNotNull } from "../utils/index";
+import { isNotNull, isAlipayBrowser, isAndroid } from "../utils/index";
 import { APIAlipay } from "../api/alipay";
-import { ImageUrl} from '../config/models';
+import { IMAGE_URL, USER_AGENT, ALIPAY_DOWN_URL} from '../config/models';
 export default {
   name:'alipay-index',
   data(){
@@ -144,6 +159,9 @@ export default {
        isNewCustom: true, //是否是新用户
        isOldCustom: false, //是否是新用户
        checkCount: 0, //首次点击同意协议单选框
+       isAlipayBrowser: !isAlipayBrowser(USER_AGENT), //是否是支付宝浏览器
+       isAndroid: isAndroid(USER_AGENT), //用户设备是否是android
+       alipayDownUrl: ALIPAY_DOWN_URL
 
    }
   },
@@ -188,7 +206,7 @@ export default {
                     let good = res.data.data.goods;
                     console.log("good", good);
                     // 图片路径
-                    this.goodsData.imgPath = ImageUrl[ process.env.NODE_ENV ] + good.goodsImg;
+                    this.goodsData.imgPath = IMAGE_URL[ process.env.NODE_ENV ] + good.goodsImg;
                     // 价格
                     this.goodsData.price = good.price;
                     // 是否是老用户
@@ -286,7 +304,6 @@ export default {
         clearInterval(this.agreement.timer);
         this.agreement.countDown = 3;
     },
-
     // 一键下单提交按钮
     onSubmit() {
         if(this.checked === false) {
@@ -308,6 +325,21 @@ export default {
                 }
             })
         }
+    },
+    // 点击下载支付宝app
+    onDownAlipay() {
+        window.location.href = this.alipayDownUrl.ios;
+    },
+    // 复制网址
+    onCopy() {
+        let oInput = document.createElement('input');
+        oInput.value = this.alipayDownUrl.android;
+        document.body.appendChild(oInput);
+        oInput.select(); // 选择对象;
+        console.log(oInput.value)
+        document.execCommand("Copy"); // 执行浏览器复制命令
+        this.$toast.success('已复制到粘贴板!');
+        oInput.remove()
     }
   }
 }
@@ -476,5 +508,24 @@ export default {
                 }
             }
         }
+        .alipay-dialog {
+            p {
+                padding: 10px;
+                line-height: 20px;
+                text-align: left;
+                font-size: 14px;
+            }
+            .down {
+                display: block;
+                color: #1989fa;
+                text-decoration: #1989fa;
+            }
+            .copy-span {
+                color: red;
+            }
+            .close-text {
+                text-align: center;
+            }
+        }
     }
 </style>