love/public/themes/simpleboot3/matchmaker/user/follow.html

<extend name="public/base"/>
<block name="css">
    <style>
        .van-nav-bar--fixed {z-index:100;}
        .van-nav-bar .van-icon,.van-nav-bar__text {color:white;}
        .van-step--horizontal .van-step__title {font-size:16px;}
        .van-step--horizontal .van-step__icon {font-size:16px;}
        .van-step__circle {width:10px;height:10px;}

        .lw-list .list-item{padding:5px 10px;background:white;}
        .lw-list .list-content {display:flex;align-items:center;}
        .lw-list .list-content .list-left {width:50px;height:50px;}
        .lw-list .list-content .list-left img {width:50px;height:50px;}
        .lw-list .list-content .list-right {margin-left:20px;}
        .lw-list .list-content .list-right .name {color:black;height:30px;line-height:30px;}
        .lw-list .list-content .list-right .name .mobile {font-size:14px;color:var(--blue);}
        .lw-list .list-content .list-right .desc {color:#666;font-size:14px;height:20px;line-height:20px;}
        .lw-list .list-tool {border-top:1px solid #f8f9fb;margin-top:5px;display:flex;justify-content:flex-end;align-items:center;padding-top:5px;}
        .lw-list .list-tool .tool-btn {margin-left:5px;font-size:14px;border:1px solid #ccc;padding:5px 10px;border-radius:20px;color:#555;}
        .lw-list .list-tool .tool-btn.delete {border-color:var(--pink);color:var(--pink);}
        .lw-list .list-tool .tool-btn.match {border-color:var(--blue);color:var(--blue);}

        .image-box {padding:10px 0;}
        .image-box .van-image {margin:0 5px;}
    </style>
</block>
<block name="body">
    <!--头部-->
    <van-nav-bar
            class="bg-pink"
            fixed="true"
            left-text="返回"
            @click-left="onBack"
            left-arrow
    >
        <template #title>
            <span style="color:white;">跟进记录</span>
        </template>
    </van-nav-bar>
    <div style="width:100%;height:46px;"></div>

    <div class="lw-list">
        <div class="list-item">
            <div class="list-content">
                <div class="list-left">
                    <img :src="dealAvatar(info.avatar,info.sex)" alt="">
                </div>
                <div class="list-right">
                    <div class="name">{{info.realname}} <span class="mobile" v-if="info.mobile">({{info.mobile}})</span></div>
                    <div class="desc">{{info.sex_text}} • {{info.age}}岁 • {{dealHigh(info.high)}}</div>
                </div>
            </div>
        </div>
    </div>
    <van-field
            v-model="form.content"
            rows="3"
            autosize
            label="跟进内容"
            type="textarea"
            placeholder="请输入跟进内容"
            show-word-limit
    ></van-field>
    <!--头图-->
    <van-uploader multiple :after-read="uploadHead" :before-delete="deleteImage" v-model="image_list" style="padding:20px;width:100%;background:white;">
    </van-uploader>
    <div style="padding:16px;">
        <van-button block class="bg-pink" @click="onSubmit">提交</van-button>
    </div>

    <van-empty description="暂无跟进记录" v-if="list.length == 0"></van-empty>

    <van-steps direction="vertical" :active="0">
        <van-step v-for="item in list">
            <h3>{{item.content}}</h3>
            <p v-if="item.image_list != null" class="image-box">
                <van-image
                        v-for="(image,index) in item.image_list"
                        width="100"
                        height="100"
                        :src="image"
                        @click="showImage(item.image_list,index)"
                ></van-image>
            </p>
            <p>{{item.create_time_text}}</p>
        </van-step>
    </van-steps>
</block>
<block name="script">
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    info:{$info},
                    form:{
                        user_id: {$id},
                        content: '',
                        image_list: [],
                    },
                    image_list:[],
                    list: {$list},
                };
            },
            methods: {
                onBack() {
                    location.href = "{:url('index/index')}";
                },
                onSubmit() {
                    $.post("{:url('followPost')}", this.form, function (json) {
                        if (json.code == 0) {
                            vant.Toast(json.msg);
                            return false;
                        }
                        location.reload();
                    }, 'json');
                },
                dealAvatar(avatar,sex) {
                    if (avatar == '') {
                        return '__TMPL__/public/assets/images/matchmaker/avatar' + sex + '.png'
                    } else {
                        return avatar;
                    }
                },
                dealHigh(high) {
                    return high ? high + 'CM' : '保密';
                },
                uploadHead(file) {
                    let self = this;
                    $.post("{:url('imageUpload')}",{file:file.content,name:file.file.name},function(json){
                        if (json.code) {
                            self.form.image_list.push(json.data.avatar);
                            self.$forceUpdate();
                        } else {
                            self.$toast(json.msg);
                        }
                    },'json')
                },
                deleteImage(file,index) {
                    let arr = [...this.form.image_list];
                    arr.splice(index,1);

                    this.form.image_list = arr;
                    console.log(this.form);
                    return true;
                },
                showImage(images,index) {
                    vant.ImagePreview({
                        images: images,
                        startPosition: index,
                    });
                }
            },
            computed: {
            }
        });
    </script>
</block>