526 lines
		
	
	
		
			17 KiB
		
	
	
	
		
			HTML
		
	
	
		
		
			
		
	
	
			526 lines
		
	
	
		
			17 KiB
		
	
	
	
		
			HTML
		
	
	
|  | <!DOCTYPE html> | ||
|  | <html> | ||
|  | <head> | ||
|  |   <meta charset="utf-8"> | ||
|  |   <title>相关方安全告知培训合格证</title> | ||
|  |   <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> | ||
|  |   <link rel="stylesheet" type="text/css" href="../../assets/css/weui.css"/> | ||
|  |   <link rel="stylesheet" type="text/css" href="../../assets/css/weuix.css"/> | ||
|  |   <link rel="stylesheet" type="text/css" href="../../../bi/css/vant.css"/> | ||
|  | 
 | ||
|  |   <!-- vue --> | ||
|  |   <script src="../../../bi/js/vue.js"></script> | ||
|  |   <script src="../../../bi/js/vant.min.js"></script> | ||
|  |   <!--全局配置--> | ||
|  |   <script src="../../../config.js"></script> | ||
|  |   <script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script> | ||
|  |   <style> | ||
|  |     .training_records { | ||
|  |       margin: 0 10px; | ||
|  |     } | ||
|  | 
 | ||
|  |     .training_records td { | ||
|  |       text-align: center; | ||
|  |     } | ||
|  | 
 | ||
|  |     .dy-card:nth-child(1) { | ||
|  |       height: 240px; | ||
|  |     } | ||
|  | 
 | ||
|  |     .dy-card:nth-child(2) { | ||
|  |       padding-top: 10px; | ||
|  |     } | ||
|  | 
 | ||
|  |     .bg_table { | ||
|  |       background: url("../../assets/images/xgf_hgz/tablebg.jpg") no-repeat bottom center; | ||
|  |       background-size: 100%; | ||
|  |       width: 660px; | ||
|  |       height: 435px; | ||
|  |       border: 4px solid #453d3a; | ||
|  |       transform: scale(0.5) translateX(-50%); | ||
|  |       transform-origin: left; | ||
|  |       position: absolute; | ||
|  |       top: -90px; | ||
|  |       left: 50%; | ||
|  |     } | ||
|  | 
 | ||
|  |     .bg_table .title { | ||
|  |       font-size: 28px; | ||
|  |       text-align: center; | ||
|  |       margin-top: 34px; | ||
|  |       font-weight: bold; | ||
|  |       color: #000000; | ||
|  |     } | ||
|  | 
 | ||
|  |     .bg_table .table { | ||
|  |       border-collapse: collapse; | ||
|  |       width: 590px; | ||
|  |       color: #453d3a; | ||
|  |       font-size: 20px; | ||
|  |       margin: 34px; | ||
|  |       text-align: left; | ||
|  |       margin-top: 10px; | ||
|  |     } | ||
|  | 
 | ||
|  |     .bg_table .table .tcenter { | ||
|  |       text-align: center; | ||
|  |     } | ||
|  | 
 | ||
|  |     .bg_table .table .w60 { | ||
|  |       width: 100px; | ||
|  |     } | ||
|  | 
 | ||
|  |     .bg_table .table .w74 { | ||
|  |       width: 148px; | ||
|  |     } | ||
|  | 
 | ||
|  |     .bg_table .table th, .bg_table .table td { | ||
|  |       border: 2px solid #453d3a; | ||
|  |       text-align: left; | ||
|  |       height: 40px; | ||
|  |       padding: 0 16px; | ||
|  |       box-sizing: border-box; | ||
|  |     } | ||
|  | 
 | ||
|  |     .bg_table .table th .textone, .bg_table .table td .textone { | ||
|  |       width: 80px; | ||
|  |       text-align: justify; | ||
|  |       text-align-last: justify; | ||
|  |       text-justify: distribute-all-lines; | ||
|  |       margin: 0 auto; | ||
|  |     } | ||
|  | 
 | ||
|  |     .bg_table .table th .text2, .bg_table .table td .text2 { | ||
|  |       width: 50px; | ||
|  |       text-align: justify; | ||
|  |       text-align-last: justify; | ||
|  |       text-justify: distribute-all-lines; | ||
|  |       margin: 0 auto; | ||
|  |     } | ||
|  | 
 | ||
|  |     .Number { | ||
|  |       margin-left: 34px; | ||
|  |       font-size: 24px; | ||
|  |       color: #ff0000; | ||
|  |     } | ||
|  |   </style> | ||
|  | </head> | ||
|  | <body style="background-color: #f1f1f1;"> | ||
|  | <div id="app"> | ||
|  |   <div class="dy-card"> | ||
|  |     <div class="bg_table"> | ||
|  |       <div class="title">相关方安全告知培训合格证</div> | ||
|  |       <div class="Number">{{ message.CLASS_NO }}</div> | ||
|  |       <table class="table"> | ||
|  |         <tr> | ||
|  |           <td style="width: 120px"> | ||
|  |             <div class="text textone ">姓名</div> | ||
|  |           </td> | ||
|  |           <td style="width: 92px"> | ||
|  |             <div class="text text2 tcenter">{{ message.NAME }}</div> | ||
|  |           </td> | ||
|  |           <td style="width: 86px"> | ||
|  |             <div class="text text2 tcenter">工种</div> | ||
|  |           </td> | ||
|  |           <td style="width: 148px;"> | ||
|  |             <div v-if="message.PERSON_WORK_TYPE" class="text tcenter ">{{ message.PERSON_WORK_TYPE }}</div> | ||
|  |             <div v-else>暂无</div> | ||
|  |           </td> | ||
|  |           <td rowspan="4" style="width: 134px;"> | ||
|  |             <img :src="config.fileUrl + message.PHOTO" style="width: 116px; height: 146px"> | ||
|  |           </td> | ||
|  |         </tr> | ||
|  |         <tr> | ||
|  |           <td> | ||
|  |             <div class="text textone">资质</div> | ||
|  |           </td> | ||
|  |           <td colspan="3"> | ||
|  |             <div v-if="message.CERTIFICATE" class="text">{{ message.CERTIFICATE }}</div> | ||
|  |             <div v-else>暂无</div> | ||
|  |           </td> | ||
|  |         </tr> | ||
|  |         <tr> | ||
|  |           <td> | ||
|  |             <div class="text textone">培训时间</div> | ||
|  |           </td> | ||
|  |           <td colspan="3"> | ||
|  |             <div class="text">{{ message.OPENING_TIME }}</div> | ||
|  |           </td> | ||
|  |         </tr> | ||
|  |         <tr> | ||
|  |           <td> | ||
|  |             <div class="text textone">有效期限</div> | ||
|  |           </td> | ||
|  |           <td colspan="3"> | ||
|  |             <div class="text">{{ message.VALIDITY_PERIOD_END }}</div> | ||
|  |           </td> | ||
|  |         </tr> | ||
|  |         <tr> | ||
|  |           <td> | ||
|  |             <div class="text textone">所在单位</div> | ||
|  |           </td> | ||
|  |           <td colspan="3"> | ||
|  |             <div class="text">{{ message.DEPARTMENT_NAME }}</div> | ||
|  |           </td> | ||
|  |           <td rowspan="3"> | ||
|  |             <div class="qrcode"></div> | ||
|  |           </td> | ||
|  |         </tr> | ||
|  |         <tr> | ||
|  |           <td> | ||
|  |             <div class="text textone">身份证号</div> | ||
|  |           </td> | ||
|  |           <td colspan="3"> | ||
|  |             <div class="text">{{ message.CARD_ID }}</div> | ||
|  |           </td> | ||
|  |         </tr> | ||
|  |         <tr> | ||
|  |           <td> | ||
|  |             <div class="text textone">手机</div> | ||
|  |           </td> | ||
|  |           <td colspan="3"> | ||
|  |             <div class="text">{{ message.PHONE }}</div> | ||
|  |           </td> | ||
|  |         </tr> | ||
|  |       </table> | ||
|  |     </div> | ||
|  |   </div> | ||
|  |   <div class="dy-card"> | ||
|  |     <van-divider content-position="left">人员信息</van-divider> | ||
|  |     <van-cell-group> | ||
|  |       <van-cell title="照片"> | ||
|  |         <van-image | ||
|  |           v-if="imgUrl" | ||
|  |           width="50px" | ||
|  |           height="50px" | ||
|  |           :src="imgUrl" | ||
|  |           @click="fnImagePreview(imgUrl,0)" | ||
|  |         ></van-image> | ||
|  |       </van-cell> | ||
|  |       <van-cell title="姓名" :value="info.NAME"></van-cell> | ||
|  |       <van-cell title="性别" :value="info.SEX === '0' ? '男' : '女'"></van-cell> | ||
|  |       <van-cell title="出生年月" :value="info.DATE_OF_BIRTH"></van-cell> | ||
|  |       <van-cell title="年龄" :value="info.AGE"></van-cell> | ||
|  |       <van-cell title="手机号" :value="info.PHONE"></van-cell> | ||
|  |       <van-cell title="身份证" :value="info.CARD_ID"></van-cell> | ||
|  |       <van-cell title="身份证照片"> | ||
|  |         <van-image | ||
|  |           v-for="(item,index) in userCardIDPhotoFile" | ||
|  |           :key="item" | ||
|  |           width="50px" | ||
|  |           height="50px" | ||
|  |           :src="item" | ||
|  |           @click="fnImagePreview(item,index)" | ||
|  |         ></van-image> | ||
|  |       </van-cell> | ||
|  |       <van-cell title="民族" :value="info.NATIONALITY_NAME"></van-cell> | ||
|  |       <van-cell title="婚姻状况" :value="info.MARITALSTATUS === '0' ? '未婚' : '已婚'"></van-cell> | ||
|  |       <van-cell title="政治面貌" :value="info.POLITICAL_STATUS_NAME"></van-cell> | ||
|  |       <van-cell title="户口所在地" :value="info.HKLOCAL"></van-cell> | ||
|  |       <van-cell title="现住址" :value="info.ADDRESS"></van-cell> | ||
|  |       <van-cell title="联系电话" :value="info.PHONE"></van-cell> | ||
|  |       <van-cell title="文化程度" :value="info.DEGREE_OF_EDUCATION_NAME"></van-cell> | ||
|  |       <van-cell title="本企业从业开始日期" :value="info.CORP_START_DATE"></van-cell> | ||
|  |       <van-cell title="岗位名称" :value="info.POST_ID"></van-cell> | ||
|  |       <van-cell title="本岗位从业开始日期" :value="info.ENTRY_DATE"></van-cell> | ||
|  |       <van-cell title="是否签订劳动合同"> | ||
|  |         <span v-if="info.IS_SIGN_LABOR === '1'">是</span> | ||
|  |         <span v-if="info.IS_SIGN_LABOR === '0'">否</span> | ||
|  |       </van-cell> | ||
|  |       <van-cell title="劳动合同附件" v-if="info.IS_SIGN_LABOR === '1'"> | ||
|  |         <van-image | ||
|  |           v-for="(item,index) in contractFileList" | ||
|  |           :key="item" | ||
|  |           width="50px" | ||
|  |           height="50px" | ||
|  |           :src="item" | ||
|  |           @click="fnImagePreview(item,index)" | ||
|  |         ></van-image> | ||
|  |       </van-cell> | ||
|  |       <van-cell title="社会保障号码" :value="info.SOCIAL_NUMBER"></van-cell> | ||
|  |       <van-cell title="社保卡照片" v-if="socialPhotoFile.length > 0"> | ||
|  |         <van-image | ||
|  |           v-for="(item,index) in socialPhotoFile" | ||
|  |           :key="item" | ||
|  |           width="50px" | ||
|  |           height="50px" | ||
|  |           :src="item" | ||
|  |           @click="fnImagePreview(item,index)" | ||
|  |         ></van-image> | ||
|  |       </van-cell> | ||
|  |       <van-cell title="是否参加三级安全培训"> | ||
|  |         <span v-if="info.IS_LEVEL_THREE === '1'">是</span> | ||
|  |         <span v-if="info.IS_LEVEL_THREE === '0'">否</span> | ||
|  |       </van-cell> | ||
|  |       <van-cell title="是否按期缴纳工伤保险"> | ||
|  |         <span v-if="info.IS_INJURIES_PAY === '1'">是</span> | ||
|  |         <span v-if="info.IS_INJURIES_PAY === '0'">否</span> | ||
|  |       </van-cell> | ||
|  |       <template v-if="info.IS_INJURIES_PAY === '1'"> | ||
|  |         <van-cell title="工伤保险有效期" :value="info.IS_INJURIES_PAY_TIME"></van-cell> | ||
|  |         <van-cell title="工伤保险凭证"> | ||
|  |           <van-image | ||
|  |             v-for="(item,index) in gongshangbaoxianFile" | ||
|  |             :key="item" | ||
|  |             width="50px" | ||
|  |             height="50px" | ||
|  |             :src="item" | ||
|  |             @click="fnImagePreview(item,index)" | ||
|  |           ></van-image> | ||
|  |         </van-cell> | ||
|  |       </template> | ||
|  |       <van-cell title="是否缴纳商业保险"> | ||
|  |         <span v-if="info.ISPAY === '1'">是</span> | ||
|  |         <span v-if="info.ISPAY === '0'">否</span> | ||
|  |       </van-cell> | ||
|  |       <template v-if="info.ISPAY === '1'"> | ||
|  |         <van-cell title="商业保险附件"> | ||
|  |           <van-image | ||
|  |             v-for="(item,index) in insuranceFileList" | ||
|  |             :key="item" | ||
|  |             width="50px" | ||
|  |             height="50px" | ||
|  |             :src="item" | ||
|  |             @click="fnImagePreview(item,index)" | ||
|  |           ></van-image> | ||
|  |         </van-cell> | ||
|  |         <van-cell title="商业保险单号" :value="info.ISPAY_NUMBER"></van-cell> | ||
|  |       </template> | ||
|  |       <van-cell title="是否特殊工种"> | ||
|  |         <span v-if="info.IS_SPECIAL_JOB === '1'">是</span> | ||
|  |         <span v-if="info.IS_SPECIAL_JOB === '0'">否</span> | ||
|  |       </van-cell> | ||
|  |       <van-cell title="身体状况是否适应本岗位工作"> | ||
|  |         <span v-if="info.IS_BODY_ADAPT === '1'">是</span> | ||
|  |         <span v-if="info.IS_BODY_ADAPT === '0'">否</span> | ||
|  |       </van-cell> | ||
|  |       <van-cell title="是否流动人员"> | ||
|  |         <span v-if="info.ISFLOW === '1'">是</span> | ||
|  |         <span v-if="info.ISFLOW === '0'">否</span> | ||
|  |       </van-cell> | ||
|  |     </van-cell-group> | ||
|  |     <van-divider content-position="left">培训记录</van-divider> | ||
|  |     <div class="training_records"> | ||
|  |       <table> | ||
|  |         <tr> | ||
|  |           <td>培训开始时间</td> | ||
|  |           <td>培训结束时间</td> | ||
|  |           <td>培训部门</td> | ||
|  |           <td>培训结果</td> | ||
|  |         </tr> | ||
|  |         <template v-if="trainRecordList.length > 0"> | ||
|  |           <tr v-for="(item,index) in trainRecordList" :key="index"> | ||
|  |             <td>{{ item.OPENING_TIME }}</td> | ||
|  |             <td>{{ item.VALIDITY_PERIOD_END }}</td> | ||
|  |             <td>{{ item.DEPARTMENT_NAME }}</td> | ||
|  |             <td> | ||
|  |               <span v-if="item.STATUS === '0'">不合格</span> | ||
|  |               <span v-if="item.STATUS === '1'">合格</span> | ||
|  |             </td> | ||
|  |           </tr> | ||
|  |         </template> | ||
|  |         <tr v-else> | ||
|  |           <td colspan="4">暂无数据</td> | ||
|  |         </tr> | ||
|  |       </table> | ||
|  |     </div> | ||
|  |     <van-divider content-position="left">电子入场证</van-divider> | ||
|  |     <van-cell-group> | ||
|  |       <van-cell title="照片"> | ||
|  |         <van-image | ||
|  |           v-if="imgUrl" | ||
|  |           width="50px" | ||
|  |           height="50px" | ||
|  |           :src="imgUrl" | ||
|  |           @click="fnImagePreview(imgUrl,0)" | ||
|  |         ></van-image> | ||
|  |       </van-cell> | ||
|  |       <van-cell title="所属单位" :value="info.RELEVANT_UNIT_NAME"></van-cell> | ||
|  |       <van-cell title="姓名" :value="info.NAME"></van-cell> | ||
|  |       <van-cell title="性别" :value="info.SEX === '0' ? '男' : '女'"></van-cell> | ||
|  |       <van-cell title="年龄" :value="info.AGE"></van-cell> | ||
|  |       <van-cell title="职务" :value="info.POST_ID"></van-cell> | ||
|  |       <van-cell title="联系电话" :value="info.PHONE"></van-cell> | ||
|  |       <van-cell title="流动范围" :value="info.TRAIN_AREA || '暂无'"></van-cell> | ||
|  |     </van-cell-group> | ||
|  |     <van-image-preview v-model="show" :images="images" :start-position="startPosition"> | ||
|  |     </van-image-preview> | ||
|  |   </div> | ||
|  | </div> | ||
|  | <script type="text/javascript" src="../../assets/js/jquery-1.7.2.js"></script> | ||
|  | <script type="text/javascript"> | ||
|  |   var vm = new Vue({ | ||
|  |     el: '#app', | ||
|  |     data: { | ||
|  |       config: config, | ||
|  |       USER_ID: '', | ||
|  |       CLASS_INFO_ID: '', | ||
|  |       CORPINFO_ID: '', | ||
|  |       message: {}, | ||
|  |       info: {}, | ||
|  |       show: false, | ||
|  |       startPosition: 0, | ||
|  |       images: [], | ||
|  |       imgUrl: '', | ||
|  |       userCardIDPhotoFile: [], | ||
|  |       contractFileList: [], | ||
|  |       socialPhotoFile: [], | ||
|  |       gongshangbaoxianFile: [], | ||
|  |       insuranceFileList: [], | ||
|  |       trainRecordList: [] | ||
|  |     }, | ||
|  |     methods: { | ||
|  |       //初始执行 | ||
|  |       init() { | ||
|  |         this.CLASS_INFO_ID = this.getUrlKey('CLASS_INFO_ID'); | ||
|  |         this.getData(); | ||
|  |       }, | ||
|  |       getData () { | ||
|  |         this.loading = true; | ||
|  |         this.getUserInfo() | ||
|  |       }, | ||
|  |       getUserInfo() { | ||
|  |         var _this = this; | ||
|  |         $.ajax({ | ||
|  |           xhrFields: { | ||
|  |             withCredentials: true | ||
|  |           }, | ||
|  |           type: "POST", | ||
|  |           url: config.httpJgUrl + '/app/classMessage/getUserInfo', | ||
|  |           dataType: 'json', | ||
|  |           data: { | ||
|  |             CLASS_INFO_ID: _this.CLASS_INFO_ID | ||
|  |           }, | ||
|  |           success: function (data) { | ||
|  |             _this.message = data.pd | ||
|  |             _this.USER_ID = data.pd.USER_ID | ||
|  |             new QRCode(document.querySelector(".qrcode"), { | ||
|  |               text: config.messageUrl + '?CLASS_INFO_ID=' + _this.CLASS_INFO_ID, | ||
|  |               width: 110, | ||
|  |               height: 110, | ||
|  |               colorDark: "#000000", | ||
|  |               colorLight: "#ffffff", | ||
|  |               correctLevel: QRCode.CorrectLevel.H, | ||
|  |             }); | ||
|  |             _this.getInfoOne() | ||
|  |             _this.getInfoTwo() | ||
|  |             _this.getInfo() | ||
|  |           } | ||
|  |         }) | ||
|  |       }, | ||
|  |       getInfoOne() { | ||
|  |         var _this = this; | ||
|  |         $.ajax({ | ||
|  |           xhrFields: { | ||
|  |             withCredentials: true | ||
|  |           }, | ||
|  |           type: "POST", | ||
|  |           url: config.httpurl + '/app/user/getDetailByUserIdAndCorpInfoId', | ||
|  |           dataType: 'json', | ||
|  |           data: { | ||
|  |             USER_ID: this.USER_ID | ||
|  |           }, | ||
|  |           success: function (data) { | ||
|  |             if ( data.userPhotoFile && data.userPhotoFile.length > 0) { | ||
|  |               _this.imgUrl = config.fileUrl + data.userPhotoFile[0].FILEPATH | ||
|  |             } | ||
|  |             if (data.userCardIDPhotoFile){ | ||
|  |               for (let i = 0; i < data.userCardIDPhotoFile.length; i++) { | ||
|  |                 _this.userCardIDPhotoFile.push(config.fileUrl + data.userCardIDPhotoFile[i].FILEPATH) | ||
|  |               } | ||
|  |             } | ||
|  |             if (data.contractFile){ | ||
|  |               for (let i = 0; i < data.contractFile.length; i++) { | ||
|  |                 _this.contractFileList.push(config.fileUrl + data.contractFile[i].FILEPATH) | ||
|  |               } | ||
|  |             } | ||
|  |             if( data.socialPhotoFile){ | ||
|  |               for (let i = 0; i < data.socialPhotoFile.length; i++) { | ||
|  |                 _this.socialPhotoFile.push(config.fileUrl + data.socialPhotoFile[i].FILEPATH) | ||
|  |               } | ||
|  |             } | ||
|  |             if(data.workInsurancePhotoFile){ | ||
|  |               for (let i = 0; i < data.workInsurancePhotoFile.length; i++) { | ||
|  |                 _this.gongshangbaoxianFile.push(config.fileUrl + data.workInsurancePhotoFile[i].FILEPATH) | ||
|  |               } | ||
|  |             } | ||
|  |             if(data.insuranceFile){ | ||
|  |               for (let i = 0; i < data.insuranceFile.length; i++) { | ||
|  |                 _this.insuranceFileList.push(config.fileUrl + data.insuranceFile[i].FILEPATH) | ||
|  |               } | ||
|  |             } | ||
|  |             _this.info = data.pd | ||
|  |           } | ||
|  |         }) | ||
|  |       }, | ||
|  |       getInfoTwo() { | ||
|  |         var _this = this; | ||
|  |         $.ajax({ | ||
|  |           xhrFields: { | ||
|  |             withCredentials: true | ||
|  |           }, | ||
|  |           type: "POST", | ||
|  |           url: config.httpurl + '/app/user/getFloatPersonDetailById', | ||
|  |           dataType: 'json', | ||
|  |           data: { | ||
|  |             USER_ID: this.USER_ID, | ||
|  |           }, | ||
|  |           success: function (data) { | ||
|  |             // _this.info = data.eCard | ||
|  |             _this.trainRecordList = data.recordList | ||
|  |           } | ||
|  |         }) | ||
|  |       }, | ||
|  |       getInfo() { | ||
|  |         var _this = this; | ||
|  |         _this.loading = true; | ||
|  |         $.ajax({ | ||
|  |           xhrFields: { | ||
|  |             withCredentials: true | ||
|  |           }, | ||
|  |           type: "POST", | ||
|  |           url: config.httpurl + '/user/getFloatPersonDetailById', | ||
|  |           dataType: 'json', | ||
|  |           data: { | ||
|  |             CLASS_INFO_ID: _this.CLASS_INFO_ID, | ||
|  |             USER_ID: _this.USER_ID, | ||
|  |             CORPINFO_ID: _this.CORPINFO_ID | ||
|  |           }, | ||
|  |           success: function (data) { | ||
|  |             vm.loading = false; | ||
|  |             if ("success" == data.result) { | ||
|  |               vm.varList = data.varList; | ||
|  |               vm.pd = data.varList[0]; | ||
|  |               var nameArray = []; | ||
|  |               for (var i = 0; i < vm.varList.length; i++) { | ||
|  |                 var ACCIDENTS_NAME = vm.varList[i].ACCIDENTS_NAME; | ||
|  |                 var names = ACCIDENTS_NAME.split(","); | ||
|  |                 for (var j = 0; j < names.length; j++) { | ||
|  |                   nameArray.distinctPush(names[j]); | ||
|  |                 } | ||
|  |               } | ||
|  |               vm.ACCIDENTS_NAME = nameArray.join(","); | ||
|  |             } | ||
|  |           } | ||
|  |         }) | ||
|  |       }, | ||
|  |       //根据url参数名称获取参数值 | ||
|  |       getUrlKey: function (name) { | ||
|  |         return decodeURIComponent( | ||
|  |           (new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null; | ||
|  |       }, | ||
|  |       fnImagePreview(images, startPosition) { | ||
|  |         this.images = [images]; | ||
|  |         this.startPosition = startPosition | ||
|  |         this.show = true | ||
|  |       } | ||
|  | 
 | ||
|  |     }, | ||
|  |     mounted() { | ||
|  |       this.init(); | ||
|  |     } | ||
|  |   }) | ||
|  | </script> | ||
|  | </body> | ||
|  | </html> |