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

<template>
	<div>
		<van-cell-group>
			<van-cell title="功德芳名" :value="person.name" is-link @click="onAction('name')"/>
			<van-cell title="心愿" :value="dream"  is-link @click="onAction('desire')" />
		</van-cell-group>
        <van-popup v-model="showDialog" position="bottom" safe-area-inset-bottom style="min-height: 50vh">
            <div class="add-merit-name" v-if="actionName === '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" v-for="(name, index) in names" :key="name.id" @click="onSelectName(name)">
                        {{name.name}} 
                        <i class="iconfont icon-biaodankongjianshanchu" @click.stop="onDeleteName(name, index)"></i>
                    </span>
                </div>
                <button class="confirm" @click="onConfirmMeritName">确认</button>
            </div>
            <div class="add-merit-name" v-if="actionName === 'desire'">
                <h3 class="title">心愿</h3>
                <div class="desire-input">
                    <textarea class="desire-textarea" v-model="dream" type="text" maxlength="50" placeholder="请输入您的心愿" />
                    <span>{{dream.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>
	</div>
</template>

<script>
import { getDreamList } from '@/api';

export default {
    data(){
        return {
            checked: false,
            showDialog: false,
            actionName: 'name',
            person: {},
            name: '',
            dream: '',
            desire: '',
            names: [],
            dreamList: []
        }
    },
    mounted(){
        this.getName();
        this.getDreamList();
    },
    methods: {
        onAction(name){
            this.showDialog = true;
            this.actionName = name;
        },
        onConfirmMeritName(){
            this.$emit('change', {
                ...this.person,
                merit_name_id: this.person.id,
                dream: this.dream,
            })
        },
        onSelectName(name){
            this.person = name;
            this.showDialog = false;
        },
        onConfirmDream(){
            this.showDialog = false;
            this.dream = this.desire;
            this.onConfirmMeritName();
        },


        //获取心愿列表
        async getDreamList(){
            const list = await getDreamList();
            console.log(list)
            this.dreamList = list;
        }
    }
};
</script>

<style 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;
        span{
            display: inline-block;
            padding: .2rem .3rem;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: .08rem;
            position: relative;
            margin-right: .4rem;
            margin-bottom: .3rem;
            font-size: .35rem;
            vertical-align: top;
            .iconfont{
                position: absolute;
                right: -.25rem;
                top: -.25rem;
                font-size: .5rem;
                color: red;
            }
        }
    }
    .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: 3rem;
        padding: .3rem 0;
        border-radius: .07rem;
        display: block;
        margin: 0 auto;
        font-size: .4rem;
    }
}
</style>