完成下单

2021-11-26 14:00:23 +08:00
parent 29da9c7746
commit 84380ef55a
10 changed files with 673 additions and 31 deletions
@@ -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>