|
@@ -0,0 +1,385 @@
|
|
|
|
|
+<!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;
|
|
|
|
|
+ }
|
|
|
|
|
+ </style>
|
|
|
|
|
+</head>
|
|
|
|
|
+
|
|
|
|
|
+<body>
|
|
|
|
|
+ <div id="app" v-cloak>
|
|
|
|
|
+ <!--<div id="header">
|
|
|
|
|
+ <h1>水猫工匠-用户名片</h1>
|
|
|
|
|
+ </div>-->
|
|
|
|
|
+ <Card :bordered="false" id="form">
|
|
|
|
|
+ <p slot="title">水猫工匠-用户名片信息</p>
|
|
|
|
|
+ <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 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>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <i-button type="primary" long>提交</i-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <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"
|
|
|
|
|
+ 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>
|
|
|
|
|
+ </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>提交</i-button>
|
|
|
|
|
+ </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+ "×tamp=" +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: {
|
|
|
|
|
+ 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:[],
|
|
|
|
|
+ },
|
|
|
|
|
+ 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.warning({
|
|
|
|
|
+ title: '文件格式不正确',
|
|
|
|
|
+ desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ handleMaxSize (file) {
|
|
|
|
|
+ this.$Notice.warning({
|
|
|
|
|
+ title: '超出文件大小限制',
|
|
|
|
|
+ desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ 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
|
|
|
|
|
+ var userid = that.formdata.user_id
|
|
|
|
|
+ //查询素材图片
|
|
|
|
|
+ if(userid>0){
|
|
|
|
|
+ that.getimglist(userid)
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ getimglist(userid){
|
|
|
|
|
+ //获取用户素材图片列表
|
|
|
|
|
+ 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;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ saveinfo(){
|
|
|
|
|
+ //保存用户信息
|
|
|
|
|
+ var url= this.url_host+"/workercardv1/getdatabytelnoforweb";
|
|
|
|
|
+ },
|
|
|
|
|
+ editimg(){
|
|
|
|
|
+ //编辑素材图片
|
|
|
|
|
+ var url= this.url_host+"/workercardv1/editwcdataphotoimgforweb";
|
|
|
|
|
+ },
|
|
|
|
|
+ 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>
|
