对接接口

2021-11-03 21:02:22 +08:00
parent 411ecf4c05
commit c5c2f661a0
71 changed files with 5436 additions and 145 deletions
@@ -0,0 +1,193 @@
+<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 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">
+            <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 in names" :key="name.id" @click="onSelectName(name)">
+                        {{name.name}} 
+                        <i class="iconfont icon-biaodankongjianshanchu"></i>
+                    </span>
+                </div>
+                <button class="confirm" @click="showDialog = false">确认</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="请输入功德主姓名" />
+                    <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>
+                    </div>
+                    <div class="name-group">
+                        <span class="name">白头偕老</span>
+                        <span class="name">白头偕老</span>
+                        <span class="name">白头偕老</span>
+                        <span class="name">白头偕老</span>
+                    </div>
+                </div>
+                <button class="confirm" @click="showDialog = false">确认</button>
+            </div>
+        </van-popup>
+	</div>
+</template>
+
+<script>
+import { getMeritName, postMeritName } from '@/api';
+
+export default {
+    data(){
+        return {
+            checked: false,
+            showDialog: false,
+            actionName: 'name',
+            person: {},
+            dream: '',
+            names: []
+        }
+    },
+    mounted(){
+        this.getName()
+    },
+    methods: {
+        onAction(name){
+            this.showDialog = true;
+            this.actionName = name;
+        },
+        onSelectName(name){
+            this.person = name;
+            this.showDialog = false;
+        },
+        async addName(){
+            if(!this.name) return 
+            await postMeritName(this.name)
+            this.name = ''
+            this.getName()
+        },
+        async getName(){
+            const data = await getMeritName();
+            this.names = data;
+        }
+    }
+};
+</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>