123

src/components/content-expand/index.vue

@@ -0,0 +1,76 @@
+<template>
+    <div class="content-expand">
+       <div class="content" :class="[contentOverflow && !show && 'multiple-line-3']" ref="wrapper" :style="{height: (show ? contentHeight : 50) + 'px'}">
+            <div ref="content">
+                <slot></slot>
+            </div>
+        </div>
+        <span class="expand" v-if="contentOverflow" @click="toggle">
+            <i class="iconfont icon-double-arrow-down-" :class="[show && 'iconfont-expand']"></i>
+        </span>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'content-expand',
+    data(){
+        return {
+            wrapperHeight: 0,
+            contentHeight: 0,
+            show: false,
+            wrapperContainerHeight: 0
+        }
+    },
+    computed: {
+        contentOverflow: {
+            get(){
+                return this.contentHeight > this.wrapperHeight;
+            }
+        }
+    },
+    mounted(){
+        this.wrapperHeight = this.$refs.wrapper.offsetHeight
+        this.contentHeight = this.$refs.content.offsetHeight
+        this.$nextTick(() => {
+            this.wrapperContainerHeight = this.wrapperHeight;
+        })
+    },
+    methods: {
+        toggle(){
+            this.show = !this.show
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.content-expand{
+    .content{
+        line-height: 1.4;
+        font-size: .35rem;
+        color: #888;
+        letter-spacing: 1px;
+        text-align: justify;
+        margin-top: .3rem;
+        overflow: hidden;
+        height: 4em;
+        transition: height .3s linear;
+    }
+    .expand{
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 1.07rem;
+        color: #888;
+        .iconfont{
+            display: inline-block;
+            
+        }
+        .iconfont-expand{
+            transform: rotateZ(180deg);
+        }
+    }
+}
+</style>

src/components/index.js

@@ -6,6 +6,8 @@ import BuddhaProcess from './buddha-process';
 import MeritGoods from './merit-goods';
 import Order from './order';
 import ScrollView from './scroll-view'
+import Uploader from './uploader'
+import ContentExpand from './content-expand'
 
 Vue.component(UserMerit.name, UserMerit)
 Vue.component(Temple.name, Temple)
@@ -13,3 +15,5 @@ Vue.component(BuddhaProcess.name, BuddhaProcess)
 Vue.component(MeritGoods.name, MeritGoods)
 Vue.component(Order.name, Order)
 Vue.component(ScrollView.name, ScrollView)
+Vue.component(Uploader.name, Uploader)
+Vue.component(ContentExpand.name, ContentExpand)

src/components/uploader/index.vue

@@ -0,0 +1,58 @@
+<template>
+  <van-uploader class="custom-uploader" v-bind="$attrs" :max-size="maxCount * maxSize" :max-count="maxCount" v-model="fileList" @oversize="onOversize" :after-read="onBeforeUpload"></van-uploader>
+</template>
+
+<script>
+import { uploadFile } from '@/api'
+export default {
+    name: 'uploader',
+    props: {
+        maxCount: {
+            type: Number,
+        },
+        maxSize: Number,
+        value: {
+            type: Array,
+            default(){
+                return []
+            }
+        }
+    },
+    data(){
+        return {
+            fileList: []
+        }
+    },
+    watch: {
+        fileList(val){
+            this.$emit('input', val)
+        }
+    },
+    methods: {
+        onOversize(){
+            console.log(this.$props)
+            this.$toast(`文件大小不能超过${this.$props.maxSize}kb`)
+        },
+        async onBeforeUpload(obj){
+            const type = Object.prototype.toString;
+            if(type.call(obj) === '[object Object]'){
+                const formData = new FormData();
+                formData.append('photo', obj.file)
+                const res = await uploadFile(formData)
+                obj.url = res.url
+            }
+
+            if(type.call(obj) === '[object Array]'){
+                for(let file of obj){
+                    const formData = new FormData();
+                    formData.append('photo', file.file)
+                    const res = await uploadFile(formData)
+                    file.url = res.url
+                }
+                
+            }
+           
+        },
+    }
+}
+</script>