<template>
|
<view class="content" v-if="validPath">
|
<view class="banner">
|
<image src="/static/banner.png" mode="widthFix"></image>
|
</view>
|
<view class="list">
|
<view class="list-item">
|
<view class="list-item-label"><text>*</text>付款事由</view>
|
<view class="list-item-cate">
|
<view :class="{'list-item-cate-item': true, 'active': form.type === 0}" @click="form.type = 0">车款</view>
|
<view :class="{'list-item-cate-item': true, 'active': form.type === 1}" @click="form.type = 1">延期款</view>
|
</view>
|
</view>
|
<view class="list-item">
|
<view class="list-item-label"><text>*</text>姓名</view>
|
<view class="list-item-input">
|
<input type="text" focus placeholder="请输入" v-model="form.name" />
|
</view>
|
</view>
|
<view class="list-item">
|
<view class="list-item-label"><text>*</text>手机号</view>
|
<view class="list-item-input">
|
<input type="tel" placeholder="请输入" v-model="form.phone" />
|
</view>
|
</view>
|
<view class="list-item">
|
<view class="list-item-label"><text>*</text>金额(元)</view>
|
<view class="list-item-input">
|
<input type="number" placeholder="请输入" v-model="form.money" />
|
</view>
|
</view>
|
<view class="list-item">
|
<view class="list-item-label">备注</view>
|
<view class="list-item-input">
|
<input type="text" placeholder="请输入" adjust-position="true" v-model="form.remark" />
|
</view>
|
</view>
|
</view>
|
<view class="btn" @click="sendSave">去支付</view>
|
</view>
|
<view class="box" v-else>
|
<image src="/static/ic_payfail.png" mode="widthFix" class="icon"></image>
|
<view class="title" >请使用微信或者支付宝应用扫码打开</view>
|
</view>
|
</template>
|
|
<script>
|
import axios from 'axios'
|
export default {
|
data() {
|
return {
|
flag:'name',
|
validPath : true,
|
form: {
|
type: 0,
|
name: '',
|
phone: '',
|
money: '',
|
remark: '',
|
userId:''
|
},
|
loading:false
|
}
|
},
|
mounted() {
|
this.loading=false
|
this.validPath = this.isWeChatBrowser() || this.isAlipayBrowser()
|
this.form.userId = this.fetchParams("userId",window.location.href)
|
},
|
methods: {
|
// 判断是否在微信浏览器中打开
|
isWeChatBrowser() {
|
// #ifdef H5
|
const userAgent = navigator.userAgent.toLowerCase();
|
return userAgent.indexOf('micromessenger') !== -1;
|
// #endif
|
return false;
|
},
|
// 判断是否在支付宝浏览器中打开
|
isAlipayBrowser() {
|
// #ifdef H5
|
const userAgent = navigator.userAgent.toLowerCase();
|
return userAgent.indexOf('alipayclient') !== -1;
|
// #endif
|
return false;
|
},
|
toSuccess() {
|
uni.navigateTo({
|
url: '/pages/success/success'
|
})
|
},
|
fetchParams(name,url) {
|
name = name.replace(/[\[\]]/g, '\\$&');
|
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
|
results = regex.exec(url);
|
console.log(results)
|
if (!results) return null;
|
if (!results[2]) return '';
|
return decodeURIComponent(results[2].replace(/\+/g, ' '));
|
},
|
async sendSave() {
|
if(this.loading){
|
// return
|
}
|
this.loading=true
|
var that = this
|
if(!this.form.name){
|
uni.showToast({
|
'title': '请输入姓名',icon:'none'
|
})
|
this.loading=false
|
return
|
}
|
if(!this.form.phone){
|
uni.showToast({
|
'title': '请输入手机号',icon:'none'
|
})
|
this.loading=false
|
return
|
}
|
if(this.form.phone.length != 11){
|
uni.showToast({
|
'title': '请输入正确的11位手机号',icon:'none'
|
})
|
this.loading=false
|
return
|
}
|
if(!this.form.money || this.form.money < 0.01){
|
uni.showToast({
|
'title': '请输入正确的金额',icon:'none'
|
})
|
return
|
}
|
let res = await this.$u.api.orderCreate(this.form)
|
if (res && res.code === 200) {
|
const url = res.data.url
|
const elements = document.querySelectorAll('form');
|
if(elements&& elements.length){
|
elements.forEach(element => {
|
element.remove();
|
})
|
}
|
uni.showToast({title:'发起支付中'})
|
var demo_form = document.createElement("form");
|
demo_form.action = url;
|
demo_form.id = "tempFromId";
|
demo_form.method = "post";
|
demo_form.style.display = "block";
|
for (const key in res.data.param) {
|
if(key,res.data.param[key]){
|
var ta = document.createElement("input");
|
console.log('============',key,res.data.param[key])
|
// ta.name=key;
|
// ta.value = res.data.param[key];
|
ta.setAttribute("type", "text");
|
ta.setAttribute("name", key);
|
ta.setAttribute("value", res.data.param[key]);
|
demo_form.appendChild(ta)
|
}
|
}
|
document.body.appendChild(demo_form)
|
demo_form.submit()
|
|
// this.toSuccess()
|
}
|
this.loading=false
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.box {
|
width: 100%;
|
padding: 0 40rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
.icon {
|
width: 180rpx;
|
height: 180rpx;
|
margin-top: 54rpx;
|
}
|
.title {
|
font-size: 32rpx;
|
color: #222222;
|
margin-top: 32rpx;
|
}
|
}
|
.content {
|
width: 100%;
|
padding: 20rpx 30rpx;
|
box-sizing: border-box;
|
.btn {
|
width: 100%;
|
height: 88rpx;
|
line-height: 88rpx;
|
text-align: center;
|
background: #0464FC;
|
border-radius: 8rpx;
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #FFFFFF;
|
margin-top: 150rpx;
|
}
|
.banner {
|
width: 100%;
|
height: 400rpx;
|
overflow: hidden;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border-radius: 20rpx;
|
image {
|
width: 100%;
|
}
|
}
|
.list {
|
width: 100%;
|
height: calc(100% - 800rpx);
|
overflow-y: auto;
|
display: flex;
|
flex-direction: column;
|
margin-top: 30rpx;
|
.list-item {
|
width: 100%;
|
height: 100rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
border-bottom: 1rpx solid #E5E5E5;
|
.list-item-label {
|
flex-shrink: 0;
|
width: 160rpx;
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #333333;
|
text {
|
color: #FF0000;
|
}
|
}
|
.list-item-cate {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
.active {
|
background: #0464FC !important;
|
color: #FFFFFF !important;
|
}
|
.list-item-cate-item {
|
padding: 0 28rpx;
|
height: 64rpx;
|
line-height: 64rpx;
|
background: #F7F7F7;
|
border-radius: 8rpx;
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #333333;
|
margin-right: 20rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
}
|
}
|
.list-item-input {
|
flex: 1;
|
input {
|
width: 100%;
|
font-weight: 400;
|
font-size: 28rpx;
|
//color: #999999;
|
text-align: right;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
