237 lines
4.8 KiB
Vue
237 lines
4.8 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view class="cont-top">
|
|
<view class="top-left">姓名:</view>
|
|
<view class="top-right">
|
|
<!-- @input="onInput" -->
|
|
<input type="text" placeholder="请输入姓名" v-model="customerName" >
|
|
</view>
|
|
</view>
|
|
<view class="cont-top">
|
|
<view class="top-left">电话:</view>
|
|
<view class="top-right">
|
|
<!-- @input="onInput" -->
|
|
<input type="number" placeholder="请输入电话" v-model="customerPhone" >
|
|
</view>
|
|
</view>
|
|
<view class="cont-top">
|
|
<view class="top-left">车牌号:</view>
|
|
<view class="top-right">
|
|
<!-- @input="onInput" -->
|
|
<input type="text" placeholder="请输入车牌号" v-model="carNum" >
|
|
</view>
|
|
</view>
|
|
<view class="cont-top">
|
|
<view class="top-left">金额:</view>
|
|
<view class="top-right">
|
|
<!-- @input="onInput" -->
|
|
<input type="number" placeholder="请输入金额" v-model="amount" >
|
|
</view>
|
|
</view>
|
|
<view class="cont-top">
|
|
<view class="top-left">付款方式:</view>
|
|
<view class="top-right" @click="show = true">
|
|
<text class="baizi">{{wenben}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="cont-top">
|
|
<view class="top-left">备注:</view>
|
|
<view class="top-right">
|
|
<!-- @input="onInput" -->
|
|
<input type="text" placeholder="请输入备注" v-model="remark" >
|
|
</view>
|
|
</view>
|
|
|
|
<view class="anniu" @click="getpayment">
|
|
<text>下一步</text>
|
|
</view>
|
|
<u-picker :show="show" :columns="columns" @confirm="clone" @cancel="open"></u-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data(){
|
|
return{
|
|
show: false,
|
|
columns: [
|
|
['微信支付', '到店支付', ]
|
|
],
|
|
customerName:'',
|
|
customerPhone:'',
|
|
carNum:'',
|
|
amount:'',
|
|
num:'',
|
|
payType:1,
|
|
remark:'',
|
|
inputValue: '',
|
|
actindex:'',
|
|
wenben:'请选择'
|
|
|
|
}
|
|
},
|
|
mounted() {
|
|
// this.num = this.num/100
|
|
},
|
|
methods:{
|
|
clone(e){
|
|
console.log(e);
|
|
this.show = false
|
|
if(e.indexs[0] == 0){
|
|
this.payType = 1
|
|
this.wenben = e.value[0]
|
|
}
|
|
if(e.indexs[0] == 1){
|
|
this.payType = 2
|
|
this.wenben = e.value[0]
|
|
}
|
|
},
|
|
open(e){
|
|
console.log(e);
|
|
this.show = false
|
|
},
|
|
getindex(index,text){
|
|
this.actindex = index
|
|
this.inputValue = text
|
|
},
|
|
onInput(event) {
|
|
const regex = /^\d*$/; // 只允许输入数字
|
|
if (!regex.test(event.target.value)) {
|
|
this.inputValue = this.inputValue.replace(/\D/g, ''); // 移除非数字字符
|
|
}
|
|
},
|
|
|
|
// 创建订单 吊起支付
|
|
async getpayment(){
|
|
|
|
if(this.remark == ''||this.customerName == ''||this.customerPhone == ''||this.carNum == ''||this.amount == ''||this.title == ''){
|
|
uni.showToast({
|
|
title:"请输入备注",
|
|
icon: "error"
|
|
})
|
|
return
|
|
}
|
|
if(this.amount<=0){
|
|
uni.showToast({
|
|
title:"请输入正确金额",
|
|
icon: "error"
|
|
})
|
|
return
|
|
}
|
|
let data = {
|
|
customerName:this.customerName,
|
|
customerPhone:this.customerPhone,
|
|
carNum:this.carNum,
|
|
amount:this.amount * 100,
|
|
payType:this.payType,
|
|
remark:this.remark,
|
|
}
|
|
let res = await this.$request({
|
|
method: 'post',
|
|
url: '/rescue/wxRescue/add',
|
|
data:data
|
|
})
|
|
uni.showToast({
|
|
title:'操作成功'
|
|
})
|
|
|
|
if(this.payType == 2){
|
|
uni.navigateBack()
|
|
}
|
|
if(this.payType == 1){
|
|
uni.navigateTo({
|
|
url:'/subRescuePages/orders/orders?title='+this.remark +'&num='+this.amount
|
|
})
|
|
}
|
|
|
|
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.container{
|
|
width: 100%;
|
|
height:calc(100vh);
|
|
box-sizing: border-box;
|
|
background-color: #242A38;
|
|
padding-top: 40px;
|
|
}
|
|
.cont-top{
|
|
width: 95%;
|
|
margin: 0 auto;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
padding-bottom: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1px solid #FFE3AD;
|
|
margin-top: 20px;
|
|
|
|
}
|
|
.top-right{
|
|
width: 70%;
|
|
input{
|
|
width: 100%;
|
|
color: white;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
.baizi{
|
|
color: #FFE3AD;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin-right: 5px;
|
|
}
|
|
.top-left{
|
|
color: #FFE3AD;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin-right: 5px;
|
|
}
|
|
.cont-box{
|
|
margin: 0 auto;
|
|
margin-top: 20px;
|
|
width: 95%;
|
|
|
|
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.box{
|
|
width: 30%;
|
|
height: 40px;
|
|
border-radius: 8px;
|
|
border: 1px solid #FFE3AD;
|
|
margin-top: 10px;
|
|
margin-right: 11px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 18px;
|
|
color: white;
|
|
font-weight: bold;
|
|
|
|
}
|
|
.anniu{
|
|
width: 80%;
|
|
height: 40px;
|
|
border-radius: 6px;
|
|
border: 1px solid #FFE3AD;
|
|
background-color: #FFE3AD ;
|
|
margin: 0 auto;
|
|
margin-top: 40px;
|
|
color: white;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
|
|
}
|
|
.indexbox{
|
|
background: #FFE3AD;
|
|
}
|
|
</style> |