wang jun 2 years ago
parent
commit
9fd458eed5
2 changed files with 134 additions and 27 deletions
  1. 134 27
      application/page/view/tools/workercard.html
  2. BIN
      public/static/image/workercard/banner.png

+ 134 - 27
application/page/view/tools/workercard.html

@@ -61,6 +61,35 @@
         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>
 
@@ -70,7 +99,9 @@
             <h1>水猫工匠-用户名片</h1>
         </div>-->
         <Card :bordered="false" id="form">
-            <p slot="title">水猫工匠-用户名片信息</p>
+            <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>
@@ -104,42 +135,33 @@
                     </Form-item>
                     <Form-item label="图片上传">
                         <div id="images">
-                            <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)"></Icon>
-                                            <!--<Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>-->
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
                             <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)"></Icon>
-                                        <Icon type="ios-trash-outline" @click.native="handleRemove2(index)"></Icon>
+                                        <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']"
-                                :max-size="2048"
                                 :on-format-error="handleFormatError"
-                                :on-exceeded-size="handleMaxSize"
                                 :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"></Icon>
+                                    <Icon type="md-camera" size="20" class="red"></Icon>
                                 </div>
                             </Upload>
                             <Modal title="查看图片" v-model="visible">
@@ -148,7 +170,20 @@
                         </div>
                     </Form-item>
                     <Form-item>
-                        <i-button type="primary" long>提交</i-button>
+                        <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>
@@ -197,6 +232,7 @@
             el: '#app',
             vuetify: new Vuetify(),
             data: {
+                issavingloading:false,
                 formdata:{
                     name:"",
                     age:17,
@@ -215,12 +251,12 @@
                 visible:false,
                 url_host:"http://newwatercatserver.com/index.php/index",
                 worktypeonelabel:[],
+                userid:0
             },
             watch: {
                 'formdata.telno' (newValue, old) {
                     //获取用户信息
                     this.getinfobytelno(newValue)
-                   
                 }
             },
             computed: {
@@ -265,7 +301,7 @@
                     //file.name = '7eb99afb9d5f317c912f08b5212fd69a';
                 },
                 handleFormatError (file) {
-                    this.$Notice.warning({
+                    this.$Notice.error({
                         title: '文件格式不正确',
                         desc: '文件 ' + file.name + ' 格式不正确,请上传 jpg 或 png 格式的图片。'
                     });
@@ -273,7 +309,7 @@
                 handleMaxSize (file) {
                     this.$Notice.warning({
                         title: '超出文件大小限制',
-                        desc: '文件 ' + file.name + ' 太大,不能超过 2M。'
+                        desc: '文件 ' + file.name + ' 太大,不能超过 20M。'
                     });
                 },
                 handleBeforeUpload () {
@@ -306,16 +342,18 @@
                                 }
                             }else{
                                 that.formdata=res.data
-                                var userid = that.formdata.user_id
+                                that.userid  = that.formdata.user_id;
                                 //查询素材图片
-                                if(userid>0){
-                                    that.getimglist(userid)
-                                }   
+                                that.getimglist();
                             }
                         }
                     });
                 },
-                getimglist(userid){
+                getimglist(){
+                    userid = this.userid;
+                    if(!userid||userid==''){
+                        return false;
+                    }
                     //获取用户素材图片列表
                     var that = this;
                     var url= this.url_host+"/workercardv1/getwcimgdatalistbyuserid";
@@ -337,16 +375,85 @@
                                 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 url= this.url_host+"/workercardv1/getdatabytelnoforweb";
+                    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(){
                     //获取一级标签

BIN
public/static/image/workercard/banner.png