tradelove/public/themes/simpleboot3/love/register/intro.html

<extend name="public@base"/>
<block name="css">
    <link rel="stylesheet" href="__TMPL__/public/assets/css/userwall.css">
    <style>
        .van-nav-bar--fixed {z-index:100;}
        .van-uploader,.van-uploader__wrapper,.van-uploader__input-wrapper {width: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;}
    </style>
</block>
<block name="body">
    <!--头部-->
    <van-nav-bar
            class="bg-pink"
            fixed="true"
    >
        <template #title>
            <span style="color:white;">完善资料(2/4)</span>
        </template>
    </van-nav-bar>
    <div style="width:100%;height:46px;"></div>

    <van-steps :active="1">
        <van-step>选择性别</van-step>
        <van-step>上传头像</van-step>
        <van-step>基础资料</van-step>
        <van-step>择偶要求</van-step>
    </van-steps>

    <!--头图-->
    <van-uploader :max-count="1" :after-read="uploadHead">
        <van-image style="width:80%;display:block;margin:20px auto 0 auto;" :src="head_image"></van-image>
    </van-uploader>
    <p class="fz14 color_9" style="text-align:center;">点击图片上传头图，建议750*780像素</p>

    <van-field
            v-model="form.signature"
            rows="3"
            autosize
            type="textarea"
            maxlength="200"
            placeholder="请输入爱情宣言"
            show-word-limit
            style="margin-top:30px;font-size:16px;"
    ></van-field>
    <div class="tips p15 color_9">
        <h3 class="fz15">温馨提示：</h3>
        <div class="text fz13 mt5"> 请不要发布广告信息、暴力、色情信息、攻击性言论语，联系方式等违规内容。
            一经发现，严肃处理。
        </div>
    </div>
    <div style="padding:16px;">
        <van-button block class="bg-pink" @click="onSubmit">下一步</van-button>
    </div>
</block>
<block name="script">
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    form: {
                        main_image: '{$user.main_image}',
                        main_image_thumb: '{$user.main_image_thumb}',
                        signature: '{$user.signature}',
                    }
                };
            },
            methods: {
                onSubmit() {
                    if (this.form.main_image == '') {
                        this.$toast('请上传头图');
                        return false;
                    }
                    $.post("{:url('intro')}", this.form, function (json) {
                        location.href = "{:url('profile')}";
                    }, 'json');
                },
                uploadHead(file) {
                    let self = this;
                    $.post("{:url('imageUpload')}",{file:file.content,name:file.file.name},function(json){
                        if (json.code) {
                            self.form.main_image = json.data.main_image;
                            self.form.main_image_thumb = json.data.main_image_thumb;
                            self.$forceUpdate();
                        } else {
                            self.$toast(json.msg);
                        }
                    },'json')
                },
            },
            computed: {
                head_image() {
                    return this.form.main_image ? this.form.main_image : '__TMPL__/public/assets/images/userwall/no_image.png?v=1';
                }
            },
        });
    </script>
</block>