221 lines
6.6 KiB
Vue
221 lines
6.6 KiB
Vue
<template>
|
||
<div class="fill-name">
|
||
<div class="panel-wrapper">
|
||
<div class="panel">
|
||
<div class="field">
|
||
<label class="required">功德芳名</label>
|
||
<div class="input-wrapper">
|
||
<input class="input" :value="meritName" type="text" readonly placeholder="请输入功德芳名" @click="onShowDialog('name')">
|
||
</div>
|
||
</div>
|
||
<div class="field">
|
||
<label >心愿</label>
|
||
<div class="input-wrapper" @click="onShowDesire">
|
||
<textarea class="input" v-model="dream" placeholder="请填写您的心愿" readonly type="textarea" />
|
||
<i class="iconfont icon-arrow-right"></i>
|
||
</div>
|
||
</div>
|
||
<template v-if="query.is_die == '1'">
|
||
<div class="field">
|
||
<label class="required">阳上人</label>
|
||
<div class="input-wrapper">
|
||
<input class="input" v-model="live_name" type="tel" placeholder="请填写阳上人">
|
||
</div>
|
||
</div>
|
||
<div class="field">
|
||
<label class="required">往生者</label>
|
||
<div class="input-wrapper">
|
||
<input class="input" v-model="die_name" type="tel" placeholder="请填写往生者">
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<div class="field">
|
||
<label >手机号码</label>
|
||
<div class="input-wrapper">
|
||
<input class="input" v-model="mobile" type="tel" placeholder="请填写手机号码">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="btn-wrapper">
|
||
<span class="total">合计： <b class="price">￥{{query.amount}}</b></span>
|
||
<button type="button" @click="onNext">下一步</button>
|
||
</div>
|
||
|
||
<merit-name :visible.sync="showMeritName" :selected="merit_names" @change="onMeritName"></merit-name>
|
||
|
||
<merit-desire :visible.sync="showDesire" @change="onMeritDesire"></merit-desire>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'fill-name',
|
||
data(){
|
||
return {
|
||
query: this.$route.query,
|
||
mobile: '',
|
||
dream: '',
|
||
merit_name_id: '',
|
||
dialogName: '',
|
||
showMeritName: false,
|
||
showDesire: false,
|
||
merit_names: [],
|
||
meritTypes: [],
|
||
meritTypeId: null,
|
||
showBuddhi: true,
|
||
live_name: '', // 阳上人姓名
|
||
die_name: '', // 往生人姓名
|
||
}
|
||
},
|
||
computed: {
|
||
meritName(){
|
||
return this.merit_names.map(item => item.name).join('，')
|
||
},
|
||
meritId(){
|
||
return this.merit_names.map(item => item.id).join(',')
|
||
},
|
||
},
|
||
|
||
methods: {
|
||
|
||
onShowDialog(){
|
||
this.showMeritName = true;
|
||
},
|
||
onShowDesire(){
|
||
this.showDesire = true;
|
||
},
|
||
onMeritName(meritNameArr){
|
||
this.merit_names = meritNameArr;
|
||
},
|
||
onMeritDesire(desire){
|
||
this.dream = desire;
|
||
},
|
||
onNext(){
|
||
if(!this.meritId){
|
||
return this.$toast.fail('请填写功德芳名');
|
||
}
|
||
if(this.query.is_die == 1 && (!this.live_name || !this.die_name)){
|
||
return this.$toast.fail('请填写阳上人与往生人')
|
||
}
|
||
|
||
this.$router.push({
|
||
name: 'pay',
|
||
query: {
|
||
...this.$route.query,
|
||
dream: this.dream,
|
||
merit_name: this.meritName,
|
||
mobile: this.mobile,
|
||
live_name: this.live_name,
|
||
die_name: this.die_name
|
||
}
|
||
})
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
.fill-name{
|
||
.field{
|
||
.van-radio__icon--checked .van-icon{
|
||
background: #CF9E3B;
|
||
border-color: #CF9E3B;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<style scoped lang="scss">
|
||
.fill-name{
|
||
background: #f9f9f9;
|
||
height: 100vh;
|
||
position: relative;
|
||
.panel-wrapper{
|
||
padding: .3rem;
|
||
}
|
||
.panel{
|
||
padding: .3rem;
|
||
border-radius: .1rem;
|
||
font-size: .4rem;
|
||
background: white;
|
||
box-shadow: 0 0 .2rem rgba(0,0,0,0.05);
|
||
}
|
||
.field{
|
||
margin-bottom: .6rem;
|
||
.required{
|
||
&::after{
|
||
content: '*';
|
||
color: red;
|
||
margin-left: .1rem;
|
||
}
|
||
}
|
||
label{
|
||
color: #333;
|
||
}
|
||
|
||
.input-wrapper{
|
||
margin-top: .2rem;
|
||
border: 1px solid rgba(183, 173, 173, 0.54);
|
||
padding: .2rem .3rem;
|
||
border-radius: .1rem;
|
||
position: relative;
|
||
background: #fdfdfd;
|
||
.input{
|
||
display: block;
|
||
width: 100%;
|
||
border: none;
|
||
background: transparent;
|
||
}
|
||
.input[type=textarea]{
|
||
min-height: 2rem;
|
||
width: calc(100% - .5rem);
|
||
padding-right: .5rem;
|
||
line-height: 1.4;
|
||
text-align: justify;
|
||
}
|
||
.icon-arrow-right{
|
||
position: absolute;
|
||
right: .1rem;
|
||
top: 50%;
|
||
transform: translateY(-.35rem);
|
||
display: inline-block;
|
||
font-size: .7rem;
|
||
color: #aaa;
|
||
}
|
||
}
|
||
}
|
||
.btn-wrapper{
|
||
position: absolute;
|
||
left: .3rem;
|
||
right: .3rem;
|
||
bottom: calc(.5rem + env(safe-area-inset-bottom));
|
||
border: 1px solid $primary-color;
|
||
border-radius: 100px;
|
||
background: white;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
overflow: hidden;
|
||
align-items: center;
|
||
.total{
|
||
font-size: .4rem;
|
||
color: $primary-color;
|
||
padding-left: .4rem;
|
||
.price{
|
||
font-size: .5rem;
|
||
line-height: 1;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
button{
|
||
background: linear-gradient(to bottom, $primary-color, #9f7313);
|
||
color: white;
|
||
height: 1.4rem;
|
||
border: none;
|
||
font-size: .5rem;
|
||
padding: 0 1rem;
|
||
width: 50%;
|
||
}
|
||
}
|
||
}
|
||
</style>
|