完成下单
This commit is contained in:
@@ -14,8 +14,11 @@ import ThankGiving from './Thanksgiving'
|
||||
import ArrowMore from './arrow-more'
|
||||
import SafeArea from './safe-area';
|
||||
import FixedBottom from './fixed-bottom';
|
||||
import MeritName from './merit-name'; // 功德芳名
|
||||
import MeritDesire from './merit-desire'; // 心愿
|
||||
|
||||
|
||||
Vue.component(MeritDesire.name, MeritDesire)
|
||||
Vue.component(MeritName.name, MeritName)
|
||||
Vue.component(UserMerit.name, UserMerit)
|
||||
Vue.component(Temple.name, Temple)
|
||||
Vue.component(BuddhaProcess.name, BuddhaProcess)
|
||||
|
||||
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<van-popup :value.sync="visible" position="bottom" @close="onClose" @click-overlay="onClose" safe-area-inset-bottom
|
||||
style="min-height: 50vh">
|
||||
<div class="add-merit-name" >
|
||||
<h3 class="title">心愿</h3>
|
||||
<div class="desire-input">
|
||||
<textarea class="desire-textarea" v-model="desire" type="text" maxlength="50" placeholder="请输入您的心愿" />
|
||||
<span>{{desire.length}}/50</span>
|
||||
</div>
|
||||
<div class="desire-quike">
|
||||
<div class="bar">
|
||||
<span>快捷输入</span>
|
||||
<span class="update" @click="getDreamList">换一组<i class="iconfont icon-shuaxin"></i></span>
|
||||
</div>
|
||||
<div class="name-group">
|
||||
<span class="name" v-for="(dream, index) in dreamList" :key="index" @click="desire = dream">{{dream}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="confirm" @click="onConfirmDream">确认</button>
|
||||
</div>
|
||||
</van-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDreamList } from '@/api';
|
||||
|
||||
export default {
|
||||
name: 'merit-desire',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
selected: {
|
||||
type: Array,
|
||||
default(){
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
name: '',
|
||||
desire: '',
|
||||
dreamList: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
visible(value){
|
||||
if(value){
|
||||
this.selectedName = this.selected.map(v => v.id)
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getDreamList();
|
||||
},
|
||||
methods: {
|
||||
onClose() {
|
||||
this.$emit('update:visible', false);
|
||||
},
|
||||
//获取心愿列表
|
||||
async getDreamList(){
|
||||
const list = await getDreamList();
|
||||
this.dreamList = list;
|
||||
},
|
||||
onConfirmDream(){
|
||||
this.showDialog = false;
|
||||
this.dream = this.desire;
|
||||
this.$emit('update:visible', false);
|
||||
this.$emit('change', this.dream)
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.add-merit-name {
|
||||
padding: .4rem;
|
||||
|
||||
.title {
|
||||
font-size: .4rem;
|
||||
margin-bottom: .4rem;
|
||||
}
|
||||
|
||||
.add-name {
|
||||
display: flex;
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
height: .8rem;
|
||||
line-height: .8rem;
|
||||
padding-left: .3rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: .11rem;
|
||||
font-size: .4rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: .2rem .6rem;
|
||||
background: $primary-color;
|
||||
color: white;
|
||||
border: 1px solid $primary-color;
|
||||
font-size: .4rem;
|
||||
border-radius: .11rem;
|
||||
margin-left: .3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.name-group {
|
||||
padding: .5rem 0;
|
||||
height: 30vh;
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: .2rem .3rem;
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: .08rem;
|
||||
position: relative;
|
||||
margin-right: .2rem;
|
||||
margin-bottom: .2rem;
|
||||
font-size: .35rem;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
|
||||
.iconfont {
|
||||
position: absolute;
|
||||
right: -.25rem;
|
||||
top: -.25rem;
|
||||
font-size: .5rem;
|
||||
color: red;
|
||||
}
|
||||
input[type=checkbox]{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
&.selected{
|
||||
background: $primary-color;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.desire-input {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: .13rem;
|
||||
overflow: hidden;
|
||||
|
||||
.desire-textarea {
|
||||
border: none;
|
||||
display: block;
|
||||
font-size: .35rem;
|
||||
width: calc(100% - .5rem);
|
||||
padding: .25rem;
|
||||
height: 2rem;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
text-align: right;
|
||||
padding: .2rem;
|
||||
font-size: .35rem;
|
||||
}
|
||||
}
|
||||
|
||||
.desire-quike {
|
||||
margin-top: 1rem;
|
||||
|
||||
.bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: .4rem;
|
||||
margin-bottom: .3rem;
|
||||
|
||||
.update {
|
||||
font-size: .35rem;
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.name-group {
|
||||
padding: .1rem 0;
|
||||
|
||||
.name {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.confirm {
|
||||
background: $primary-color;
|
||||
color: white;
|
||||
border: 1px solid $primary-color;
|
||||
width: 100%;
|
||||
padding: .3rem 0;
|
||||
border-radius: 1rem;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
font-size: .4rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<van-popup :value.sync="visible" position="bottom" @close="onClose" @click-overlay="onClose" safe-area-inset-bottom
|
||||
style="min-height: 50vh">
|
||||
<div class="add-merit-name">
|
||||
<h3 class="title">功德芳名</h3>
|
||||
<div class="add-name">
|
||||
<input class="input" type="text" v-model="name" placeholder="请输入功德主姓名">
|
||||
<button class="btn" @click="addName">添加</button>
|
||||
</div>
|
||||
<div class="name-group">
|
||||
<span class="name" :class="[selectedName.includes(name.id) && 'selected']" v-for="(name, index) in names" :key="name.id" @click="onSelectName(name)">
|
||||
{{ name.name }}
|
||||
<input type="checkbox" v-model="selectedName" :value="name.id" >
|
||||
<i class="iconfont icon-biaodankongjianshanchu" @click.stop="onDeleteName(name, index)"></i>
|
||||
</span>
|
||||
</div>
|
||||
<button class="confirm" @click="onConfirmMeritName">确认</button>
|
||||
</div>
|
||||
</van-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { deleteMeritName, getMeritName, postMeritName } from '@/api';
|
||||
|
||||
export default {
|
||||
name: 'merit-name',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
selected: {
|
||||
type: Array,
|
||||
default(){
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
name: '',
|
||||
names: [],
|
||||
selectedName: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
visible(value){
|
||||
if(value){
|
||||
|
||||
this.selectedName = this.selected.map(v => v.id)
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getName();
|
||||
},
|
||||
methods: {
|
||||
onClose() {
|
||||
this.$emit('update:visible', false);
|
||||
},
|
||||
onSelectName(name){
|
||||
this.person = name;
|
||||
this.showDialog = false;
|
||||
},
|
||||
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;
|
||||
},
|
||||
onConfirmMeritName() {
|
||||
const selected = this.names.filter(item => this.selectedName.includes(item.id));
|
||||
this.onClose();
|
||||
this.$emit('change', selected);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.add-merit-name {
|
||||
padding: .4rem;
|
||||
|
||||
.title {
|
||||
font-size: .4rem;
|
||||
margin-bottom: .4rem;
|
||||
}
|
||||
|
||||
.add-name {
|
||||
display: flex;
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
height: .8rem;
|
||||
line-height: .8rem;
|
||||
padding-left: .3rem;
|
||||
font-size: .35rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: .11rem;
|
||||
font-size: .4rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: .2rem .6rem;
|
||||
background: $primary-color;
|
||||
color: white;
|
||||
border: 1px solid $primary-color;
|
||||
font-size: .4rem;
|
||||
border-radius: .11rem;
|
||||
margin-left: .3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.name-group {
|
||||
padding: .5rem 0;
|
||||
height: 30vh;
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: .2rem .3rem;
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: .08rem;
|
||||
position: relative;
|
||||
margin-right: .2rem;
|
||||
margin-bottom: .2rem;
|
||||
font-size: .35rem;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
|
||||
.iconfont {
|
||||
position: absolute;
|
||||
right: -.25rem;
|
||||
top: -.25rem;
|
||||
font-size: .5rem;
|
||||
color: red;
|
||||
}
|
||||
input[type=checkbox]{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
&.selected{
|
||||
background: $primary-color;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.desire-input {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: .13rem;
|
||||
overflow: hidden;
|
||||
|
||||
.desire-textarea {
|
||||
border: none;
|
||||
display: block;
|
||||
font-size: .35rem;
|
||||
width: calc(100% - .5rem);
|
||||
padding: .25rem;
|
||||
height: 2rem;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
text-align: right;
|
||||
padding: .2rem;
|
||||
font-size: .35rem;
|
||||
}
|
||||
}
|
||||
|
||||
.desire-quike {
|
||||
margin-top: 1rem;
|
||||
|
||||
.bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: .4rem;
|
||||
margin-bottom: .3rem;
|
||||
|
||||
.update {
|
||||
font-size: .35rem;
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.name-group {
|
||||
padding: .1rem 0;
|
||||
|
||||
.name {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.confirm {
|
||||
background: $primary-color;
|
||||
color: white;
|
||||
border: 1px solid $primary-color;
|
||||
width: 100%;
|
||||
padding: .3rem 0;
|
||||
border-radius: 1rem;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
font-size: .4rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -116,6 +116,7 @@ export default {
|
||||
background: #e85042 url('~@/assets/img/red-packet.jpg') top center no-repeat;
|
||||
background-size: contain;
|
||||
overflow: hidden;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
.avatar{
|
||||
width: 2rem;
|
||||
|
||||
@@ -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){
|
||||
|
||||
@@ -96,6 +96,12 @@ const routes = [
|
||||
meta: { title: '详情', navBarBackgroundColor: 'white' },
|
||||
component: () => import('@/pages/goods-detail')
|
||||
},
|
||||
{
|
||||
path: '/fill-name',
|
||||
name: 'fill-name',
|
||||
meta: { title: '详情', navBarBackgroundColor: 'white' },
|
||||
component: () => import('@/pages/fill-name')
|
||||
},
|
||||
{
|
||||
path: '/everyday-donation',
|
||||
name: 'everyday-donation',
|
||||
|
||||
Reference in New Issue
Block a user