php_group
/
watercat_web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="/static/image/logo.png">
    <!--<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">-->
    <link href="/static/plugs/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet">
    <link href="/static/plugs/vuetify/vuetify.css" rel="stylesheet">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/static/plugs/iview/styles/iview.css">
    <title>水猫工匠-用户名片</title>
    <style>
        [v-cloak] {
            display: none !important;
        }
        body{
            color: #000;
        }
        #app{
            /**padding: 1em;*/
        }
        #images .img_list{
            margin-top: 10px;
        }
        .demo-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
    #form .ivu-card-head{
        padding: 0px;
        width: 100%;
        height: 120px;
    }
    #form .ivu-card-head div{
        width: 100%;
        height: 100%;
    }
    #form .ivu-card-head div img{
        width: 100%;
        height: 100%;
    }
    .ivu-btn-primary:hover {
        color: #fff;
        background-color: #B3000F;
        border-color: #B3000F;
    }
    .ivu-btn-primary {
        color: #fff;
        background-color: #E60012;
        border-color: #E60012;
    }
    .red{
        color: #E60012;
    }
    .ivu-upload-drag:hover {
        border: 1px dashed #E60012;
    }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <!--<div id="header">
            <h1>水猫工匠-用户名片</h1>
        </div>-->
        <Card :bordered="false" id="form">
            <div slot="title">
                <img src="/static/image/workercard/banner.png">
            </div>
            <i-form :model="formdata" :label-width="80">
                <Form-item label="手机号">
                    <i-input v-model="formdata.telno" placeholder="请输入手机号"></i-input>
                </Form-item>
                <div id="editform"> 
                    <Form-item label="姓名">
                        <i-input v-model="formdata.name" placeholder="请输入姓名"></i-input>
                    </Form-item>
                    <Form-item label="工种">
                        <i-input v-model="formdata.work_type" placeholder="请输入工种"></i-input>
                    </Form-item>
                    <Form-item label="工种标签" >
                        <i-select v-model="formdata.key_word" style="width:200px" multiple>
                            <i-option v-for="(item,key) in worktypeonelabel" :value="item.label" :key="item.id">{{ item.label }}</i-option>
                        </i-select>
                    </Form-item>
                    <Form-item label="年龄">
                        <Input-number :max="100" :min="17" v-model="formdata.age"></Input-number>
                    </Form-item>
                    <Form-item label="籍贯">
                        <i-input v-model="formdata.native" placeholder="请输入籍贯"></i-input>
                    </Form-item>
                    <Form-item label="工作地区">
                        <i-input v-model="formdata.region" placeholder="请输入工作地区"></i-input>
                    </Form-item>
                    <Form-item label="交通工具">
                        <i-input v-model="formdata.traffic_tools" placeholder="请输入交通工具"></i-input>
                    </Form-item>
                    <Form-item label="备注">
                        <i-input type="textarea" v-model="formdata.note" placeholder="请输入备注"></i-input>
                    </Form-item>
                    <Form-item label="图片上传">
                        <div id="images">
                            <div  class="img_list"> 
                                <div class="demo-upload-list" v-for="(url,index) in uploadList" :key="index">
                                    <img :src="url">
                                    <div class="demo-upload-list-cover">
                                        <Icon type="ios-eye-outline" @click.native="handleView2(index)" class="red"></Icon>
                                        <Icon type="ios-trash-outline" @click.native="handleRemove2(index)" class="red"></Icon>
                                    </div>
                                    <i-button type="primary" long>提交</i-button>
                                </div>
                            </div>
                            <!--:max-size="204800"-->
                            <!--:on-exceeded-size="handleMaxSize" //action="https://app.tjzhxx.cn:5443/api/Cos/savephoto" http://app.tjzhxx.local.cn/api/Cos/savephoto-->
                            <Upload
                                ref="upload"
                                :show-upload-list="false"
                                :on-success="handleSuccess"
                                :format="['jpg','jpeg','png']"
                                :on-format-error="handleFormatError"
                                :before-upload="handleBeforeUpload"
                                :on-exceeded-size="handleMaxSize"
                                :max-size="20480"
                                name="file"
                                type="drag"
                                action="https://app.tjzhxx.cn:5443/api/Cos/savephoto"
                                style="display: inline-block;width:58px;">
                                <div style="width: 58px;height:58px;line-height: 58px;">
                                    <Icon type="md-camera" size="20" class="red"></Icon>
                                </div>
                            </Upload>
                            <Modal title="查看图片" v-model="visible">
                                <img :src="viewimgurl" v-if="visible" style="width: 100%">
                            </Modal>
                        </div>
                    </Form-item>
                    <Form-item>
                        <i-button type="primary" long @click="saveinfo" :loading="issavingloading">提交</i-button>
                    </Form-item>
                    <Form-item label="用户照片">
                        <div v-if="imglist"> 
                            <div class="img_list">
                                <div class="demo-upload-list" v-for="(item,index) in imglist" :key="index">
                                    <img :src="item">
                                    <div class="demo-upload-list-cover">
                                        <Icon type="ios-eye-outline" @click.native="handleView(index)" class="red"></Icon>
                                        <!--<Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>-->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </Form-item>
                </div>
            </i-form>
        </Card>
    </div>
    <script>
        var sharedata = {php}echo json_encode($sharedata);{/php}; 
    </script>
    <script src="/static/plugs/vue/vue.js"></script>
    <script src="/static/plugs/iview/iview.min.js"></script>
    <script src="/static/plugs/jquery/jquery.js"></script>
    <script src="/static/plugs/vuetify/vuetify.js"></script>
    <script src="/static/plugs/wechat/jweixin-1.0.0.js"></script>
    <!--<script src="/static/plugs/jssha/sha.js"></script>-->
    <script src="/static/plugs/js-sha1/sha1.js"></script>
    <!--<script src="/static/plugs/wechat/wx_share_config.js"></script>-->
    <script>
        var url =window.location.href;
        var string = "jsapi_ticket=" +sharedata.ticket + "&noncestr=" + sharedata.nonceStr+ "&timestamp=" +sharedata. timestamp + "&url=" + url;
        sign = sha1(string)
        wx.config({
            debug:false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId:sharedata.appid, // 必填，企业号的唯一标识，此处填写企业号corpid
            timestamp:sharedata.timestamp , // 必填，生成签名的时间戳
            nonceStr:sharedata.nonceStr, // 必填，生成签名的随机串
            signature: sign,// 必填，签名，见附录1
            jsApiList:['updateAppMessageShareData','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
        wx.error(function(res){
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            //alert(11)
            //alert(JSON.stringify(res));
        });
        var share_info = {
            title:"水猫工匠-用户名片",
            desc:"水猫工匠-用户名片",
            link:window.location.href,
            imgUrl:''
        };
        //alert(JSON.stringify(share_info));
    </script>
    <script src="/static/plugs/wechat/wx_share.js"></script>
    <script>
        
        var app = new Vue({
            el: '#app',
            vuetify: new Vuetify(),
            data: {
                issavingloading:false,
                formdata:{
                    name:"",
                    age:17,
                    telno:'',
                    work_type:'',
                    region:'',
                    note:'',
                    native:'',
                    traffic_tools:'',
                    key_word:[],
                    user_id:0
                },
                imglist:false,
                uploadList:[],
                viewimgurl:'',
                visible:false,
                url_host:"http://newwatercatserver.com/index.php/index",
                worktypeonelabel:[],
                userid:0
            },
            watch: {
                'formdata.telno' (newValue, old) {
                    //获取用户信息
                    this.getinfobytelno(newValue)
                }
            },
            computed: {
                isloading: function () {
                   
                }
            },
            methods:{
                handleView (index) {
                    this.viewimgurl = this.imglist[index];
                    this.visible = true;
                },
                handleRemove (file) {
                    // 从 upload 实例删除数据
                    const fileList = this.$refs.upload.fileList;
                    this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
                },
                handleView2 (key) {
                    this.viewimgurl = this.uploadList[key];
                    this.visible = true;
                },
                handleRemove2 (index) {
                    // 从 upload 实例删除数据
                    //const fileList = this.$refs.upload.fileList;
                    //console.log(fileList);
                    //this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
                    //this.uploadList = this.$refs.upload.fileList;
                    //console.log(this.uploadList);
                    this.uploadList.splice(index, 1);
                },
                handleSuccess (res, file) {
                    console.log(res,file)
                    if(1!=res.status){
                        this.$Message.error(res.msg);
                        return
                    }
                    var data = res.data
                    var path = data.path
                    // 因为上传过程为实例，这里模拟添加 url
                    this.uploadList.push(path);
                    //file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
                    //file.name = '7eb99afb9d5f317c912f08b5212fd69a';
                },
                handleFormatError (file) {
                    this.$Notice.error({
                        title: '文件格式不正确',
                        desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
                    });
                },
                handleMaxSize (file) {
                    this.$Notice.warning({
                        title: '超出文件大小限制',
                        desc: '文件 ' + file.name + ' 太大，不能超过 20M。'
                    });
                },
                handleBeforeUpload () {
                    const check = this.uploadList.length < 5;
                    if (!check) {
                        this.$Notice.warning({
                            title: '最多只能上传 5 张图片。'
                        });
                    }
                    return check;
                },
                getinfobytelno(telno){
                    //根据手机号获取信息
                    var that = this;
                    var url= this.url_host+"/workercardv1/getdatabytelnoforweb";
                    var data ={telno:telno};
                    $.ajax({
                        type: 'POST',
                        url: url,
                        data:data,
                        dataType: "json",
                        success: function(res){
                            //res = JSON.parse(res);
                            if(200!=res.code){
                                if(res.code<0){
                                }else{
                                    that.$Notice.error({
                                        title: res.msg
                                    });
                                }
                            }else{
                                that.formdata=res.data
                                that.userid  = that.formdata.user_id;
                                //查询素材图片
                                that.getimglist();
                            }
                        }
                    });
                },
                getimglist(){
                    userid = this.userid;
                    if(!userid||userid==''){
                        return false;
                    }
                    //获取用户素材图片列表
                    var that = this;
                    var url= this.url_host+"/workercardv1/getwcimgdatalistbyuserid";
                    var data ={userid:userid};
                    $.ajax({
                        type: 'POST',
                        url: url,
                        data:data,
                        dataType: "json",
                        success: function(res){
                            if(200!=res.code){
                                if(res.code<0){
                                }else{
                                    that.$Notice.error({
                                        title: res.msg
                                    });
                                }
                            }else{
                                var resultData = res.resultData
                                that.imglist =  resultData.urls;
                            }
                        },
                        error:function(XMLHttpRequest, textStatus, errorThrown){
                            that.$Notice.error({
                                title: textStatus
                            });  
                            that.issavingloading = false;
                        }
                    });
                },
                saveinfo(){
                    this.issavingloading = true;
                    //保存用户信息
                    var that = this;
                    var url= this.url_host+"/workercardv1/savewcidinfoforweb";
                    var data =this.formdata;
                    $.ajax({
                        type: 'POST',
                        url: url,
                        data:data,
                        dataType: "json",
                        success: function(res){
                            console.log(res);
                            if(200!=res.code){
                                if(res.code<0){
                                }else{
                                    that.$Notice.error({
                                        title: res.msg
                                    });  
                                }
                            }else{
                                that.$Notice.success({
                                    title: "用户信息保存成功"
                                });
                                var data = res.data
                                that.userid = data['uid'];
                                that.editimg();
                            }
                            that.issavingloading = false;
                        },
                        error:function(XMLHttpRequest, textStatus, errorThrown){
                            that.$Notice.error({
                                title: textStatus
                            });  
                            that.issavingloading = false;
                        }
                    });
                },
                editimg(){
                    //编辑素材图片
                    var that = this;
                    var url= this.url_host+"/workercardv1/editwcdataphotoimgforweb";
                    if(this.uploadList.length>0){
                        var data={userid:this.userid,url:this.uploadList}
                        $.ajax({
                            type: 'POST',
                            url: url,
                            data:data,
                            dataType: "json",
                            success: function(res){
                                console.log(res);
                                if(200!=res.code){
                                    if(res.code<0){
                                    }else{
                                        that.$Notice.error({
                                            title: res.msg
                                        });
                                    }
                                }else{
                                    that.$Notice.success({
                                        title: "用户图片保存成功"
                                    });
                                    that.imglist=false
                                    that.uploadList=[]
                                    that.getimglist()
                                }
                                that.issavingloading = false;
                            }
                        });
                    }
                },
                getworktypelabel(){
                    //获取一级标签
                    var that = this;
                    var url= this.url_host+"/Worktype/getonelabellist";
                    $.ajax({
                        type: 'POST',
                        url: url,
                        dataType: "json",
                        success: function(res){
                            if(200!=res.code){
                                that.$Notice.warning({
                                    title: res.msg
                                });
                            }else{
                                that.worktypeonelabel=res.resultData
                                let list  = res.resultData
                                for(let i in list){
                                    let item = list[i];
                                    if(item.is_default){
                                        that.formdata.key_word.push(item.label);
                                    }
                                }
                            }
                        }
                    });
                }
            },
            mounted() {
                this.getworktypelabel();
            }
        })
    </script>
</body>

</html>