@@ -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设备复制粘贴下载链接功能 |
@@ -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() { | |||
@@ -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' | |||
}; |
@@ -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, | |||
@@ -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; | |||
} | |||
} |
@@ -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> |