You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
389 lines
9.4 KiB
389 lines
9.4 KiB
<template> |
|
<view class="content u-flex-col u-col-center"> |
|
<view v-if="temple=='大佛寺'" class="u-flex u-row-center" style="width: 750rpx;height: 136rpx;"> |
|
<u-image width="357rpx" height="82rpx" src="../../static/home/title.png"></u-image> |
|
</view> |
|
<u-image v-if="temple=='能仁寺'" width="750rpx" height="136rpx" src="../../static/home/nr.jpg"></u-image> |
|
<u-image v-if="temple=='百花寺'" width="750rpx" height="136rpx" src="../../static/home/bh2.png"></u-image> |
|
<u-image width="750rpx" height="356rpx" src="../../static/home/top.jpg"></u-image> |
|
<u-form class="form u-m-t-30" ref="uForm"> |
|
<u-form-item label="功德主" labelWidth="120rpx" :border-bottom="false" :label-style="labelStyle" prop="master"> |
|
<u-input class="ipt" v-model="form.master" :border="true" :clearable="false" placeholder="" borderColor="#562511"></u-input> |
|
</u-form-item> |
|
<u-form-item label="付款人" labelWidth="120rpx" :border-bottom="false" :label-style="labelStyle" prop="name"> |
|
<u-input class="ipt" v-model="form.name" :border="true" :clearable="false" placeholder="" borderColor="#562511"></u-input> |
|
</u-form-item> |
|
<u-form-item label="手机" labelWidth="120rpx" :border-bottom="false" :label-style="labelStyle" prop="phone"> |
|
<u-input class="ipt" type="number" v-model="form.phone" :border="true" :clearable="false" placeholder="" borderColor="#562511"></u-input> |
|
</u-form-item> |
|
<u-form-item label="祝福语" labelWidth="120rpx" :border-bottom="false" :label-style="labelStyle" prop="wish"> |
|
<u-input |
|
class="ipt" |
|
v-model="form.wish" |
|
type="textarea" |
|
:autoHeight="true" |
|
:border="true" |
|
:clearable="false" |
|
placeholder="请填写祝福语,最多20个字!" |
|
borderColor="#562511" |
|
></u-input> |
|
</u-form-item> |
|
</u-form> |
|
|
|
<view class="u-flex u-m-t-30 u-m-l-50 category-title"> |
|
<view class="title">乐捐项目</view> |
|
<view class="title">功德金额</view> |
|
</view> |
|
|
|
<view class="u-m-t-20 u-m-l-50"> |
|
<view class="a u-m-t-15 u-flex-col" v-for="(item, index) in categories" :key="index"> |
|
<view class="b u-flex"> |
|
<view class="category u-flex"> |
|
<view class="item" @click="showSelect(index)"> |
|
|
|
{{item.category}} |
|
<!-- <u-input |
|
class="ipt" |
|
v-model="item.category" |
|
type="select" |
|
:border="true" |
|
:clearable="false" |
|
placeholder="" |
|
borderColor="#562511" |
|
@click="showSelect(index)" |
|
></u-input> --> |
|
</view> |
|
|
|
<view class="item u-m-l-10" @click="showKeyboardFunc(index)">{{item.amount}}</view> |
|
|
|
<!-- <u-input |
|
class="ipt u-m-l-10" |
|
v-model="item.amount" |
|
type="number" |
|
:border="true" |
|
:clearable="false" |
|
:disabled="true" |
|
placeholder="" |
|
borderColor="#562511" |
|
@click="showKeyboardFunc(index)" |
|
></u-input> --> |
|
</view> |
|
<u-icon v-if="index > 0" name="minus" color="#562511" class="u-m-l-10" @click="reduce(index)"></u-icon> |
|
</view> |
|
|
|
<view class="line u-m-t-15"></view> |
|
</view> |
|
</view> |
|
|
|
<view class="bottom u-flex u-col-top"> |
|
<view class="add u-flex u-row-center" @click="add">+ 新增捐赠</view> |
|
<view class="sure u-flex u-row-center" @click="sure">确认支付</view> |
|
</view> |
|
|
|
<u-gap height="150"></u-gap> |
|
|
|
<u-select v-model="show" :list="list" @confirm="selectComleted"></u-select> |
|
<u-keyboard mode="number" :tips="tips" @change="valChange" @backspace="backspace" v-model="showKeyboard"></u-keyboard> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
data() { |
|
return { |
|
browser: '', |
|
temple: '', |
|
machineNo: '', |
|
form: { |
|
master: '', |
|
name: '', |
|
phone: '', |
|
wish: '' |
|
}, |
|
list: [], |
|
show: false, |
|
showKeyboard: false, |
|
tips: '', |
|
index: 0, |
|
categories: [ |
|
{ |
|
category: '', |
|
amount: '' |
|
} |
|
], |
|
labelStyle: { |
|
fontWeight: 'bold', |
|
fontSize: '36rpx', |
|
color: '#562511' |
|
} |
|
}; |
|
}, |
|
onLoad() { |
|
this.browser = this.browserJudgment(); |
|
|
|
// if (this.browser == 'Other') { |
|
// uni.redirectTo({ |
|
// url:'../error/error' |
|
// }) |
|
// } |
|
|
|
|
|
|
|
this.getTempleAndMachineNo(); |
|
|
|
this.getCategories(); |
|
|
|
// if(this.temple === '能仁寺'){ |
|
// uni.reLaunch({ |
|
// url:'../underMaintenance/underMaintenance' |
|
// }) |
|
// } |
|
}, |
|
methods: { |
|
valChange(val) { |
|
if ('.' == val) { |
|
if ('' == this.categories[this.index].amount || this.categories[this.index].amount.indexOf('.') > -1) { |
|
return; |
|
} |
|
} |
|
if (this.categories[this.index].amount.indexOf('.') > -1) { |
|
if (this.categories[this.index].amount.split('.')[1].length >=2) { |
|
return; |
|
} |
|
} |
|
this.categories[this.index].amount += val; |
|
this.tips = this.categories[this.index].amount; |
|
console.log(this.categories[this.index].amount); |
|
|
|
}, |
|
backspace() { |
|
if (this.categories[this.index].amount.length) this.categories[this.index].amount = this.categories[this.index].amount.substr(0, this.categories[this.index].amount.length - 1); |
|
this.tips = this.categories[this.index].amount; |
|
console.log(this.categories[this.index].amount); |
|
}, |
|
browserJudgment() { |
|
var userAgent = navigator.userAgent.toLowerCase(); |
|
if (userAgent.match(/Alipay/i) == 'alipay') { |
|
return 'Ali'; |
|
} else if (userAgent.match(/MicroMessenger/i) == 'micromessenger') { |
|
return 'Wx'; |
|
} else { |
|
return 'Other'; |
|
} |
|
}, |
|
getTempleAndMachineNo() { |
|
var url = window.location.href; |
|
console.log(url); |
|
console.log(url.indexOf('temple')); |
|
if (url.indexOf('temple') > -1) { |
|
var obj = this.getAllUrlParams(url); |
|
this.machineNo = obj.machineNo; |
|
switch (obj.temple) { |
|
case '1': |
|
this.temple = '大佛寺'; |
|
break; |
|
case '2': |
|
this.temple = '能仁寺'; |
|
break; |
|
case '3': |
|
this.temple = '百花寺'; |
|
break; |
|
} |
|
|
|
} |
|
}, |
|
getAllUrlParams(url) { |
|
var obj = {}; |
|
if (!url) { |
|
return obj; |
|
} |
|
url = url.split('?')[1]; |
|
var arr = url.split('&'); |
|
for (var i = 0; i < arr.length; i++) { |
|
// 分离成key:value的形式 |
|
var a = arr[i].split('='); |
|
var paramName = a[0]; |
|
var paramValue = a[1]; |
|
obj[paramName] = paramValue; |
|
} |
|
return obj; |
|
}, |
|
getCategories() { |
|
this.$u |
|
.post('http://dafosi.zhihuizongjiao.cn:7878/api/app/getcategories', { |
|
temple: this.temple |
|
}) |
|
.then(res => { |
|
if (1 == res.code) { |
|
this.list = res.data; |
|
} |
|
}); |
|
}, |
|
donation() { |
|
var register = JSON.stringify(this.categories); |
|
var amount = 0; |
|
for (var i = 0; i < this.categories.length; i++) { |
|
amount += parseFloat(this.categories[i].amount); |
|
} |
|
this.$u |
|
.post('http://dafosi.zhihuizongjiao.cn:7878/api/app/donation', { |
|
browser: this.browser, |
|
temple: this.temple, |
|
master: this.form.master, |
|
name: this.form.name, |
|
phone: this.form.phone, |
|
wish: this.form.wish, |
|
register, |
|
amount, |
|
machineNo: this.machineNo |
|
}) |
|
.then(res => { |
|
if (1 == res.code) { |
|
// 登记成功 |
|
// 跳转支付 |
|
window.location.href = res.data.url; |
|
} else { |
|
// 登记失败 |
|
uni.showModal({ |
|
title: '登记出错', |
|
content: res.msg |
|
}); |
|
} |
|
}); |
|
}, |
|
add() { |
|
var obj = new Object(); |
|
obj.category = ''; |
|
obj.amount = ''; |
|
this.categories.push(obj); |
|
}, |
|
reduce(index) { |
|
this.categories.splice(index, 1); |
|
}, |
|
showSelect(index) { |
|
this.index = index; |
|
this.show = true; |
|
}, |
|
showKeyboardFunc(index) { |
|
this.tips = ''; |
|
this.index = index; |
|
this.showKeyboard = true; |
|
}, |
|
selectComleted(e) { |
|
this.categories[this.index].category = e[0].label; |
|
}, |
|
sure() { |
|
var flag = true; |
|
console.log(this.categories) |
|
for (var i = 0; i < this.categories.length; i++) { |
|
var obj = this.categories[i]; |
|
console.log(obj.amount) |
|
if (obj.category == '' || obj.amount == '' || obj.amount == '0') { |
|
flag = false; |
|
} |
|
} |
|
if (flag) { |
|
if (this.form.wish.length > 20) { |
|
uni.showModal({ |
|
title: '温馨提示', |
|
content: '祝福语最多20个字！', |
|
showCancel: false |
|
}); |
|
return; |
|
} |
|
this.donation(); |
|
} else { |
|
uni.showModal({ |
|
title: '温馨提示', |
|
content: '乐捐项目或功德金额为空!', |
|
showCancel: false |
|
}); |
|
} |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss"> |
|
.content { |
|
width: 100vw; |
|
min-height: 100vh; |
|
background: url(../../static/home/background.png); |
|
background-size: cover; |
|
|
|
.form { |
|
width: 500rpx; |
|
.ipt { |
|
background: #ffffff; |
|
color: '#562511'; |
|
} |
|
} |
|
|
|
.category-title { |
|
width: 600rpx; |
|
.title { |
|
width: 50%; |
|
height: 100%; |
|
color: #562511; |
|
font-size: 36rpx; |
|
font-weight: bold; |
|
text-shadow: 2rpx 3rpx 1rpx #ffffff; |
|
} |
|
} |
|
|
|
.a { |
|
width: 600rpx; |
|
.b { |
|
width: 600rpx; |
|
.category { |
|
width: 550rpx; |
|
.item { |
|
width: 270rpx; |
|
height: 60rpx; |
|
background: #ffffff; |
|
color: '#562511'; |
|
border-radius: 5rpx; |
|
border: solid #562511 0.25rpx; |
|
line-height: 60rpx; |
|
padding-left: 20rpx; |
|
} |
|
// .ipt { |
|
// background: #ffffff; |
|
// color: '#562511'; |
|
// background: #ff0000; |
|
// } |
|
} |
|
} |
|
|
|
.line { |
|
width: 550rpx; |
|
height: 2rpx; |
|
background: #562511; |
|
} |
|
} |
|
|
|
.bottom { |
|
position: fixed; |
|
bottom: 0rpx; |
|
width: 750rpx; |
|
height: 100rpx; |
|
color: #562511; |
|
font-size: 36rpx; |
|
font-weight: bold; |
|
.add { |
|
width: 50%; |
|
height: 100%; |
|
background: #e8d19d; |
|
border: solid #562511 0.25rpx; |
|
border-radius: 10rpx; |
|
} |
|
.sure { |
|
width: 50%; |
|
height: 100%; |
|
background: #e8d19d; |
|
border: solid #562511 0.25rpx; |
|
border-radius: 10rpx; |
|
} |
|
} |
|
} |
|
</style>
|
|
|