完成下单
This commit is contained in:
@@ -61,7 +61,7 @@
|
||||
<button class="merit-button" @click="showSpec = true">去行善</button>
|
||||
</div>
|
||||
|
||||
<van-popup v-model="showSpec" position="bottom" closeable :style="{ height: 'auto' }" :close-on-click-overlay="false" :close-on-popstate="true">
|
||||
<van-popup v-model="showSpec" position="bottom" closeable :style="{ height: 'auto' }" safe-area-inset-bottom :close-on-click-overlay="false" :close-on-popstate="true">
|
||||
<!-- 显示日行一善的商品规格 -->
|
||||
<div class="caret" v-if="query.goods_type == '1'">
|
||||
<div class="head">
|
||||
@@ -104,13 +104,13 @@
|
||||
</div>
|
||||
<ul class="spec brick-spec">
|
||||
<li class="random">
|
||||
<span class="border-circle" :class="[is_assign && 'active']" @click="onCustomeBrike">自定义砖数认捐</span>
|
||||
<span class="border-circle" :class="[is_assign && 'active']" @click="onCustomeBrike">{{data.rule_btn}}</span>
|
||||
<van-stepper v-model="buy_quantity" step="1" />
|
||||
</li>
|
||||
<li v-for="(spec, index) in data.spec" :key="index">
|
||||
<span
|
||||
class="border-circle"
|
||||
:class="[Number(spec.money) === priceUnit && 'active']"
|
||||
:class="[Number(spec.money) === priceUnit && !is_assign && 'active']"
|
||||
@click="onPriceUnit(spec)"
|
||||
>认捐{{spec.donate_number}}块砖 {{spec.money}}元</span>
|
||||
</li>
|
||||
|
||||
@@ -0,0 +1,187 @@
|
||||
<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 class="required">心愿</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>
|
||||
<div class="field">
|
||||
<label class="required">手机号码</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">合计： ￥{{query.amount}}</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>
|
||||
import { getUserData } from '@/api';
|
||||
|
||||
export default {
|
||||
name: 'fill-name',
|
||||
data(){
|
||||
return {
|
||||
query: this.$route.query,
|
||||
mobile: '',
|
||||
dream: '',
|
||||
merit_name_id: '',
|
||||
dialogName: '',
|
||||
showMeritName: false,
|
||||
showDesire: false,
|
||||
merit_names: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
meritName(){
|
||||
return this.merit_names.map(item => item.name).join('，')
|
||||
},
|
||||
meritId(){
|
||||
return this.merit_names.map(item => item.id).join(',')
|
||||
}
|
||||
},
|
||||
created() {
|
||||
getUserData().then(data => {
|
||||
this.user = data;
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
onShowDialog(){
|
||||
this.showMeritName = true;
|
||||
},
|
||||
onShowDesire(){
|
||||
this.showDesire = true;
|
||||
},
|
||||
onMeritName(meritNameArr){
|
||||
console.log(meritNameArr)
|
||||
this.merit_names = meritNameArr;
|
||||
},
|
||||
onMeritDesire(desire){
|
||||
this.dream = desire;
|
||||
},
|
||||
onNext(){
|
||||
if(!this.meritId){
|
||||
return this.$toast.fail('请填写功德芳名');
|
||||
}
|
||||
if(!this.dream){
|
||||
return this.$toast.fail('请填写心愿');
|
||||
}
|
||||
if(!this.mobile){
|
||||
return this.$toast.fail('请填写功德主手机号');
|
||||
}
|
||||
this.$router.push({
|
||||
name: 'pay',
|
||||
query: {
|
||||
...this.$route.query,
|
||||
dream: this.dream,
|
||||
merit_name_id: this.meritId,
|
||||
mobile: this.mobile,
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.fill-name{
|
||||
background: #f9f9f9;
|
||||
height: 100vh;
|
||||
.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: .8rem;
|
||||
.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;
|
||||
.input{
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: none;
|
||||
}
|
||||
.input[type=textarea]{
|
||||
min-height: 3rem;
|
||||
width: calc(100% - .5rem);
|
||||
padding-right: .5rem;
|
||||
}
|
||||
.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: .5rem;
|
||||
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: #666666;
|
||||
padding-left: .4rem;
|
||||
}
|
||||
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>
|
||||
@@ -22,7 +22,7 @@
|
||||
<div class="add-merit-name" v-if="actionName === 'desire'">
|
||||
<h3 class="title">心愿</h3>
|
||||
<div class="desire-input">
|
||||
<textarea class="desire-textarea" v-model="desire" type="text" maxlength="50" placeholder="请输入您的心愿" />
|
||||
<textarea class="desire-textarea" v-model="dream" type="text" maxlength="50" placeholder="请输入您的心愿" />
|
||||
<span>{{dream.length}}/50</span>
|
||||
</div>
|
||||
<div class="desire-quike">
|
||||
@@ -41,7 +41,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { deleteMeritName, getMeritName, postMeritName, getDreamList } from '@/api';
|
||||
import { getDreamList } from '@/api';
|
||||
|
||||
export default {
|
||||
data(){
|
||||
@@ -82,20 +82,8 @@ export default {
|
||||
this.dream = this.desire;
|
||||
this.onConfirmMeritName();
|
||||
},
|
||||
async addName(){
|
||||
if(!this.name) return
|
||||
await postMeritName(this.name)
|
||||
this.name = ''
|
||||
await this.getName()
|
||||
},
|
||||
async onDeleteName(name){
|
||||
await deleteMeritName(name.id);
|
||||
await this.getName();
|
||||
},
|
||||
async getName(){
|
||||
const data = await getMeritName();
|
||||
this.names = data;
|
||||
},
|
||||
|
||||
|
||||
//获取心愿列表
|
||||
async getDreamList(){
|
||||
const list = await getDreamList();
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<span>
|
||||
<ul class="spec-group">
|
||||
<li class="border-circle">
|
||||
<span>季度放生（每周放/反馈）</span>
|
||||
<span>随喜</span>
|
||||
<li class="border-circle" :class="[value === 'is_customized' && 'active']" @click="onAnyAmount">
|
||||
<span>随喜参与法会</span>
|
||||
<span>{{data.rule_btn}}</span>
|
||||
</li>
|
||||
<li class="border-circle" v-for="spec in data.spec" :key="spec.id" :class="[ value === spec.id && 'active']" @click="onSelectSpec(spec)">
|
||||
<span>{{spec.spec_name}}</span>
|
||||
@@ -38,6 +38,7 @@ export default {
|
||||
data(){
|
||||
return {
|
||||
num: 0,
|
||||
is_customized: false,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@@ -54,6 +55,9 @@ export default {
|
||||
},
|
||||
onSelectSpec(spec){
|
||||
this.$emit('input', spec.id)
|
||||
},
|
||||
onAnyAmount(){
|
||||
this.$emit('input', 'is_customized')
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -60,6 +60,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
|
||||
<!-- 随喜金额-->
|
||||
<random-money :value.sync="showAnyAmount" @change="onReceiveAnyAmount"></random-money>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -78,8 +81,8 @@ export default {
|
||||
FillInformation
|
||||
},
|
||||
data(){
|
||||
|
||||
return {
|
||||
showAnyAmount: false,
|
||||
paddingBottom: 0,
|
||||
fixedBottomHeight: 0,
|
||||
query: this.$route.query,
|
||||
@@ -92,6 +95,7 @@ export default {
|
||||
step: 0,
|
||||
quantity: 1,
|
||||
dreamInfo: null,
|
||||
anyPrice: 0, // 随喜金额
|
||||
swiperOption: {
|
||||
autoplay: 8000,
|
||||
initialSlide: 1,
|
||||
@@ -112,6 +116,9 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
priceUnit(){
|
||||
if(this.spec_id === 'is_customized'){
|
||||
return this.anyPrice;
|
||||
}
|
||||
const spec = this.data.spec.find(item => item.id === this.spec_id);
|
||||
if(!spec){
|
||||
return 0;
|
||||
@@ -129,24 +136,41 @@ export default {
|
||||
this.getGoodsDetail('common');
|
||||
},
|
||||
methods: {
|
||||
// 接收随喜金额
|
||||
onReceiveAnyAmount(anyObj){
|
||||
this.anyPrice = anyObj.money;
|
||||
this.onNextStep();
|
||||
},
|
||||
// dreamInfo: 心愿信息
|
||||
onDreamInfoChange(dreamInfo){
|
||||
this.dreamInfo = dreamInfo;
|
||||
},
|
||||
getSelectedSpec(){
|
||||
const spec = this.data.spec.find(spec => spec.id === this.spec_id);
|
||||
return spec;
|
||||
return spec || {
|
||||
id: '',
|
||||
spec_name: this.data.rule_btn || '随喜'
|
||||
};
|
||||
},
|
||||
onNextStep(){
|
||||
if(!this.spec_id){
|
||||
this.$toast.fail('请选择类型')
|
||||
return;
|
||||
}
|
||||
|
||||
this.current += 1;
|
||||
|
||||
if(this.current === 1 && this.spec_id === 'is_customized'){
|
||||
this.showAnyAmount = true;
|
||||
return ;
|
||||
}
|
||||
const selectedSpec = this.getSelectedSpec();
|
||||
|
||||
if(this.current > 1){
|
||||
const { merit_name_id, dream } = this.dreamInfo;
|
||||
if(this.current > 0){
|
||||
this.$router.push({
|
||||
name: 'pay',
|
||||
name: 'fill-name',
|
||||
query: {
|
||||
...this.$route.query,
|
||||
...this.query,
|
||||
is_auto: this.is_auto ? 1 : 0,
|
||||
spec_id: selectedSpec.id,
|
||||
friendly_time: this.number,
|
||||
@@ -155,12 +179,11 @@ export default {
|
||||
subTitle: selectedSpec.spec_name,
|
||||
amount: this.priceTotal,
|
||||
// merit_name_id: ,
|
||||
dream,
|
||||
merit_name_id,
|
||||
is_customized: 0,
|
||||
from: 'common_goods', // 标识为通用商品
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
async getGoodsDetail(type){
|
||||
|
||||
Reference in New Issue
Block a user