Browse Source

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

- 增加 android和ios设备支付宝下载链接
- 增加 android设备复制粘贴下载链接功能
feat
JinxChen 2 years ago
parent
commit
2a916c6ba7
6 changed files with 117 additions and 20 deletions
  1. +10
    -2
      README.md
  2. +4
    -4
      src/App.vue
  3. +12
    -4
      src/config/models.js
  4. +4
    -3
      src/main.js
  5. +30
    -1
      src/utils/index.js
  6. +57
    -6
      src/views/AliPayIndex.vue

+ 10
- 2
README.md View File

@@ -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设备复制粘贴下载链接功能

+ 4
- 4
src/App.vue View File

@@ -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() {


+ 12
- 4
src/config/models.js View File

@@ -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'
};

+ 4
- 3
src/main.js View File

@@ -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,


+ 30
- 1
src/utils/index.js View File

@@ -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;
}
}

+ 57
- 6
src/views/AliPayIndex.vue View File

@@ -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>

Loading…
Cancel
Save