feat: 增加界面

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

@@ -3,11 +3,8 @@
 		<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 title="匿名参与" >
-                <van-switch v-model="checked" size="24px" />
-            </van-cell>
 		</van-cell-group>
-        <van-popup v-model="showDialog" position="bottom" :close-on-click-overlay="false" style="min-height: 50vh">
+        <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">
@@ -15,39 +12,36 @@
                     <button class="btn" @click="addName">添加</button>
                 </div>
                 <div class="name-group">
-                    <span class="name" v-for="name in names" :key="name.id" @click="onSelectName(name)">
+                    <span class="name" v-for="(name, index) in names" :key="name.id" @click="onSelectName(name)">
                         {{name.name}} 
-                        <i class="iconfont icon-biaodankongjianshanchu"></i>
+                        <i class="iconfont icon-biaodankongjianshanchu" @click.stop="onDeleteName(name, index)"></i>
                     </span>
                 </div>
-                <button class="confirm" @click="showDialog = false">确认</button>
+                <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="desire" type="text" maxlength="50" placeholder="请输入功德主姓名" />
+                    <textarea class="desire-textarea" v-model="desire" type="text" maxlength="50" placeholder="请输入您的心愿" />
                     <span>{{dream.length}}/50</span>
                 </div>
                 <div class="desire-quike">
                     <div class="bar">
                         <span>快捷输入</span>
-                        <span class="update">换一组<i class="iconfont icon-shuaxin"></i></span>
+                        <span class="update" @click="getDreamList">换一组<i class="iconfont icon-shuaxin"></i></span>
                     </div>
                     <div class="name-group">
-                        <span class="name">白头偕老</span>
-                        <span class="name">白头偕老</span>
-                        <span class="name">白头偕老</span>
-                        <span class="name">白头偕老</span>
+                        <span class="name" v-for="(dream, index) in dreamList" :key="index" @click="desire = dream">{{dream}}</span>
                     </div>
                 </div>
-                <button class="confirm" @click="showDialog = false">确认</button>
+                <button class="confirm" @click="onConfirmDream">确认</button>
             </div>
         </van-popup>
 	</div>
 </template>
 
 <script>
-import { getMeritName, postMeritName } from '@/api';
+import { deleteMeritName, getMeritName, postMeritName, getDreamList } from '@/api';
 
 export default {
     data(){
@@ -56,31 +50,57 @@ export default {
             showDialog: false,
             actionName: 'name',
             person: {},
+            name: '',
             dream: '',
-            names: []
+            desire: '',
+            names: [],
+            dreamList: []
         }
     },
     mounted(){
-        this.getName()
+        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 addName(){
             if(!this.name) return 
             await postMeritName(this.name)
             this.name = ''
-            this.getName()
+            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();
+            console.log(list)
+            this.dreamList = list;
         }
     }
 };