完成下单

src/components/index.js

@@ -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)

src/components/merit-desire/index.vue

@@ -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>

src/components/merit-name/index.vue

@@ -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>

src/components/random-money/index.vue

@@ -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;

src/pages/everyday-donation/index.vue

@@ -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>

src/pages/fill-name/index.vue

@@ -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>

src/pages/goods-detail/components/fill-information.vue

@@ -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();

src/pages/goods-detail/components/select-spec.vue

@@ -1,9 +1,9 @@
 <template>
 	<span>
 		<ul class="spec-group">
-			<li class="border-circle">
+			<li class="border-circle" :class="[value === 'is_customized' && 'active']" @click="onAnyAmount">
-				<span>季度放生（每周放/反馈）</span>
+				<span>随喜参与法会</span>
-				<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')
         }
     }
 };

src/pages/goods-detail/index.vue

@@ -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){
+            if(this.current > 0){
-                const { merit_name_id, dream } = this.dreamInfo;
                 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){

src/router/index.js

@@ -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',