building-sign/pages/worker/sign/sign.vue

849 lines
26 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view class="pad-x100">
<!-- 头部 -->
<status-nav :ifReturn="false" navBarTitle="打卡小程序" :titleColor="titleColor" :backgroudColor="backgroudColor"></status-nav>
<view class="content">
<!-- 打卡 -->
<view class="sign-top font24 color-white" :style="{'padding-top':statusHeight+50+'px'}">
<image src="/static/sign-bg.jpg" mode="aspectFill"></image>
<view class="name font30" v-if="isLoding">{{siteInfo.name}}</view>
<view class="sign-btn orange" @tap="showRadioEv" v-if="buttonColor=='orange'">
<text class="font56">打卡</text>
<text>{{currenTime}}</text>
</view>
<view class="sign-btn green" @tap="showRadioEv" v-else-if="buttonColor=='green'">
<text class="font56">已打卡</text>
<text>{{currenTime}}</text>
</view>
<view class="sign-btn" @tap="showRadioEv" v-else>
<text class="font56">打卡</text>
<text>{{currenTime}}</text>
</view>
<view class="sign-site">
<view class="sign-time">
<text>{{currentDate}}</text>
<text>{{currentWeek}}</text>
</view>
<view class="position" v-if="isLoding">
<view class="warning" v-if="!siteInfo.name">
<image src="/static/icon/icon-warning.png" mode="aspectFit"></image>
<text class="color-yellow">不在范围内</text>
</view>
<view class="position-btn" @tap="getLocationEv(1)">
<image src="/static/icon/icon-position.png" mode="aspectFit"></image>
<text>重新定位</text>
</view>
</view>
</view>
</view>
<!-- 打卡记录 -->
<view class="sign-record bg-white">
<view class="title">
<image src="/static/icon/icon-sign.png" mode="aspectFit"></image>
<text class="color-blue font28">今日打卡记录</text>
</view>
<view class="item font26" v-for="(item,index) in signList" :key="index">
<view class="info">
<text>{{item.type_text}}打卡:{{item.is_replenish==1?'补打卡':item.created_at.substr(item.created_at.length-8)}}</text>
<text v-if="item.role!==0">打卡工地:{{item.worksite_name}}</text>
</view>
<view class="state" v-if="item.role!==0&&item.status==1">{{item.status_text}}</view>
<view class="state color-blue" v-if="item.role!==0&&item.status==0">{{item.status_text}}</view>
<view class="state color-red" v-if="item.role!==0&&item.status==-1">{{item.status_text}}</view>
</view>
<!-- 加载更多 -->
<view class="more-tips font24" style="margin-bottom: 15rpx;" v-if="signList.length==0">今日没有打卡记录</view>
</view>
<!-- 打卡日历 -->
<view class="sign-calendar">
<sign-calendar ref="signCalendar" @getDate="getDate"></sign-calendar>
</view>
</view>
<!-- 打卡类型选择 -->
<view class="pop-up-bg" v-if="showRadio">
<view class="sign-cate bg-white">
<view class="title font34">请确认打卡类型</view>
<view class="txt font28">
<view class="radio-item" @tap="changeSignType(index)" v-for="(item,index) in radioList" :key="index">
<view :class="radioIndex==index?'checked':''"></view>
<view>{{item.title}}</view>
</view>
</view>
<!-- 审核按钮 -->
<view class="sign-cate-btns color-white font30">
<view class="btn" @tap="showRadio=false,radioIndex=0">取消</view>
<view class="btn" @tap="signEv">确认</view>
</view>
</view>
</view>
<!-- 公告 -->
<view class="pop-up-bg" v-if="ifNotice||ifWsNotice">
<view class="safety-bulletin bg-white">
<view class="title font34">{{ifNotice?'公告':'工地公告'}}</view>
<view class="txt font24">
<rich-text :nodes="ifNotice?notice:wsNotice"></rich-text>
</view>
<view class="close-btn font30 color-66" @tap="closeNotice">关闭</view>
</view>
</view>
<!-- 安全告知 -->
<view class="pop-up-bg" v-if="!isRead && safetyBulletin!==''">
<view class="safety-bulletin bg-white">
<view class="title font34">安全告知</view>
<view class="txt font24">
<rich-text :nodes="safetyBulletin"></rich-text>
</view>
<view class="close-btn font30 color-66" @tap="closeSafetyBulletin">关闭</view>
</view>
</view>
<!-- 审核通知 -->
<view class="pop-up-bg" v-if="isNotice">
<view class="sign-cate bg-white">
<view class="title font34">审核通知</view>
<view class="txt notice-msg font28">不通过原因:{{noticeInfo.msg}}</view>
<!-- 审核按钮 -->
<view class="sign-cate-btns color-white font30">
<view class="btn" @tap="closeEdit">取消</view>
<view class="btn" @tap="editEv">修改</view>
</view>
</view>
</view>
<!-- 注册工人信息 -->
<view class="pop-up-bg" v-if="ifRegister"> <!-- v-if="ifRegister" -->
<view class="register-information font24 bg-white">
<view class="item">
<view class="title">姓名</view>
<input class="input" type="text" v-model="registerObj.real_name" placeholder="请填写姓名">
</view>
<view class="item">
<view class="title">电话号码</view>
<input class="input" type="number" v-model="registerObj.mobile" placeholder="请填写电话号码">
</view>
<view class="item">
<view class="title">身份证</view>
<input class="input" type="text" v-model="registerObj.card_number" placeholder="请填写身份证号码">
</view>
<view class="item item-other" style="align-items: flex-start;">
<view class="title" style="margin-top: 18rpx;">身份证正面</view>
<view class="upload-box">
<view class="img" v-if="registerObj.id_front!==''" @tap.stop="previewImage(registerObj.id_front)">
<image :src="registerObj.id_front" mode="widthFix"></image>
<image class="del-btn" src="/static/icon/icon-del.png" mode="widthFix" @tap.stop="delImg(index,'positive')"></image>
</view>
<view class="upload-btn" @tap="changeImg('positive')" v-else>
<view class="bg">
<image src="/static/id-front.jpg" mode="aspectFill"></image>
</view>
<view class="icon">
<image src="/static/icon/icon-camera.png" mode="widthFix"></image>
<text class="font22 color-white">拍摄身份证正面</text>
</view>
</view>
</view>
</view>
<view class="item item-other" style="align-items: flex-start;">
<view class="title" style="margin-top: 18rpx;">身份证反面</view>
<view class="upload-box">
<view class="img" v-if="registerObj.id_back!==''" @tap.stop="previewImage(registerObj.id_back)">
<image :src="registerObj.id_back" mode="widthFix"></image>
<image class="del-btn" src="/static/icon/icon-del.png" mode="widthFix" @tap.stop="delImg(index,'back')"></image>
</view>
<view class="upload-btn" @tap="changeImg('back')" v-else>
<view class="bg">
<image src="/static/id-back.jpg" mode="aspectFill"></image>
</view>
<view class="icon">
<image src="/static/icon/icon-camera.png" mode="widthFix"></image>
<text class="font22 color-white">拍摄身份证反面</text>
</view>
</view>
</view>
</view>
<view class="item">
<view class="title">技术岗位</view>
<picker class="input" mode="selector" :range="positionList" @change="choicePosition" :value="positionIndex" :range-key="'name'">
<view class="name">
<text>{{positionList[positionIndex].name}}</text>
<image src="/static/icon/icon-arrow-01.png" mode="aspectFit"></image>
</view>
</picker>
</view>
<view class="item">
<view class="title">证件名称</view>
<input class="input" type="text" v-model="registerObj.certificate" placeholder="请填写证件名称">
</view>
<view class="item">
<view class="title">工资</view>
<input class="input" type="number" v-model="registerObj.pay" placeholder="请填写工资">
</view>
<view class="item">
<view class="title">紧急联系人</view>
<input class="input" type="text" v-model="registerObj.emergency_contact" placeholder="请填写紧急联系人">
</view>
<view class="item">
<view class="title">联系人电话</view>
<input class="input" type="number" v-model="registerObj.emergency_phone" placeholder="请填写联系人电话">
</view>
<view class="item">
<view class="title">银行卡户名</view>
<input class="input" type="text" v-model="registerObj.bank_card_name" placeholder="请填写银行卡户名">
</view>
<view class="item">
<view class="title">银行卡号</view>
<input class="input" type="number" v-model="registerObj.bank_card_number" placeholder="请填写银行卡号">
</view>
<view class="item">
<view class="title">开户行</view>
<input class="input" type="text" v-model="registerObj.bank_name" placeholder="请填写开户行">
</view>
<view class="item item-other" style="align-items: flex-start;">
<view class="title" style="margin-top: 18rpx;">银行卡拍照</view>
<view class="upload-box">
<view class="img" v-if="registerObj.bank_card_img!==''" @tap.stop="previewImage(registerObj.bank_card_img)">
<image :src="registerObj.bank_card_img" mode="widthFix"></image>
<image class="del-btn" src="/static/icon/icon-del.png" mode="widthFix" @tap.stop="delImg(index,'bank')"></image>
</view>
<view class="upload-btn" @tap="changeImg('bank')" v-if="registerObj.bank_card_img==''">
<view class="bg">
<image src="/static/bank.jpg" mode="aspectFill"></image>
</view>
<view class="icon">
<image src="/static/icon/icon-camera.png" mode="widthFix"></image>
<text class="font22 color-white">拍摄银行卡</text>
</view>
</view>
</view>
</view>
<view class="item item-other" style="align-items: flex-start;">
<view class="title" style="margin-top: 18rpx;">工作经验</view>
<textarea class="input textarea" v-model="registerObj.work_experience" placeholder="请填写工作经验"></textarea>
</view>
<view class="item item-other" style="align-items: flex-start;">
<view class="title" style="margin-top: 18rpx;">现住地址</view>
<view class="addr-box">
<picker mode="region" @change="changeAddress">
<view class="addr-input">
<view class="input-box">
<input class="input-flex clips1" type="text" v-model="registerObj.province" disabled="true">
<image src="/static/icon/icon-arrow-01.png" mode="widthFix"></image>
</view>
<view class="input-box">
<input class="input-flex clips1" type="text" v-model="registerObj.city" disabled="true">
<image src="/static/icon/icon-arrow-01.png" mode="widthFix"></image>
</view>
<view class="input-box">
<input class="input-flex clips1" type="text" v-model="registerObj.area" disabled="true">
<image src="/static/icon/icon-arrow-01.png" mode="widthFix"></image>
</view>
</view>
</picker>
<input class="input" type="text" v-model="registerObj.address_now" placeholder="请填写详细地址">
</view>
</view>
<view class="register-btns color-white font30">
<view class="btn cancel-btn bg-99" @tap="cancelRegister">取消</view>
<view class="btn submit-btn bg-blue" @tap="submitRegister">提交</view>
</view>
</view>
</view>
<!-- 尾部 -->
<tabbar :userType="userType"></tabbar>
</view>
</template>
<script>
import signCalendar from '@/components/sign-calendar/sign-calendar';
import tabbar from '@/components/tabbar/tabbar';
export default {
components:{
signCalendar,
tabbar
},
data() {
return {
statusHeight:uni.getSystemInfoSync().statusBarHeight, //状态栏高度
userType:'', //账户类型 工人worker 负责人director
frontColor:'#ffffff', //状态栏文字颜色
backgroudColor:'none', //导航栏背景
titleColor:'#ffffff', //导航栏颜色
radioList:[
{title:'上午上班',type:'morning_on'},
{title:'上午下班',type:'morning_off'},
{title:'下午上班',type:'afternoon_on'},
{title:'下午下班',type:'afternoon_off'}
],//打卡类型
radioIndex:0, //当前选择
showRadio:false, //是否显示上班类型
currentDate:'', //当前日期
currentWeek:'', //当前星期几
currenTime:'', //实时时间
siteInfo:{}, //定位工地
signList:[], //打卡记录
safetyBulletin:'', //安全公告
isRead:true, //是否已读安全公告
userInfo:{
checking:-1,
role:-1
}, //用户信息
registerObj:{
real_name:'',
mobile:'',
card_number:'',
pay:'',
position:-1,
emergency_contact:'',
emergency_phone:'',
bank_card_name:'',
bank_card_number:'',
bank_name:'',
worksite_id:-1,
work_experience:'',
address_now:'',
bank_card_img:'',
id_front:'',
id_back:'',
certificate:'',
province:'北京市', //省
city:'北京市', //市
area:'东城区',//区
}, //工人注册信息
positionList:[], //技术岗位
positionIndex:0, //当前技术岗位
flag:true, //是否能提交
isLoding:false, //是否加载完成
timer:false, //计时器状态
noticeInfo:'', //审核通知
isNotice:false, //是否显示通知
notice:'', //公告
ifNotice:false, //是否显示公告
wsNotice:'', //工地公告
ifWsNotice:false,// 是否显示工地公告
stagingImg:'', //暂存img
ifRegister:false, //是否显示注册表
buttonColor:'',//打卡按钮颜色
}
},
onPageScroll(object){
if(object.scrollTop >= 5){
this.frontColor = '#000000';
this.backgroudColor = '#ffffff';
this.titleColor = '#3333333';
// 改变状态栏
this.changeStatusNav();
}
if(object.scrollTop <= 0){
this.frontColor = '#ffffff';
this.backgroudColor = 'none';
this.titleColor = '#ffffff';
// 改变状态栏
this.changeStatusNav();
}
},
onLoad(op) {
if(op.userType){
this.userType = op.userType;
}
if(op.apply=='join'){
// 显示注册表
this.ifRegister = true;
}
// 改变状态栏
this.changeStatusNav();
// 判断用户类型
if(uni.getStorageSync('worker_role')!==0){
// 获取位置信息
this.getLocationEv(0);
}else{
// 判断是否查看安全公告
if(uni.getStorageSync('readSafeNotice')){
// 查询是否有通知
this.getNoticeInfo();
}else{
this.isRead = false;
// 获取安全告知
this.getSafetyBulletin();
}
}
// 获取工作岗位
this.getPositionList();
},
onShow() {
// 获取用户信息
this.getUserInfo();
// 获取打卡信息
this.getSignInfo();
// 获取打卡记录
this.getSignList();
},
onPullDownRefresh() {
// 获取工资列表
this.getSignList();
// 关闭下拉刷新
uni.stopPullDownRefresh();
},
onShareAppMessage(res) {
let shareObj = {
title:'工地打卡',
path: '/pages/pagehome/pagehome',
imageUrl:'/static/share-logo.jpg',
}
// 返回shareObj
return shareObj;
},
methods: {
// 改变状态栏
changeStatusNav(){
wx.setNavigationBarColor({
frontColor: this.frontColor,
backgroundColor: 'none',
})
},
// 获取用户信息
getUserInfo(){
this.$requst.post('/api/v1/user/info').then(res=>{
if(res.code==0){
console.log(res,'用户信息');
if(res.data.role!==uni.getStorageSync('worker_role')){
this.$toolAll.tools.showToast('身份已变更,正在切换');
setTimeout(()=>{
uni.reLaunch({
url:'/pages/pagehome/pagehome'
})
},2000)
}
this.userInfo = res.data;
if(this.userInfo.worksite_id==0){
this.registerObj = this.userInfo;
this.registerObj.pay = parseFloat(res.data.pay);
}
}
})
},
// 选择省市区
changeAddress(e){
this.registerObj.province = e.detail.value[0];
this.registerObj.city = e.detail.value[1];
this.registerObj.area = e.detail.value[2];
},
// 授权位置信息
getLocationEv(type){
uni.getLocation({
type: 'gcj02',
isHighAccuracy:'true',
success: (res)=>{
console.log(res,'位置信息');
if(type=='1'){
this.$toolAll.tools.showToast('重新定位成功');
}
//获取工地列表
this.getSiteEv(res.longitude,res.latitude);
},
complete: ()=>{
// 判断是否查看安全公告
if(uni.getStorageSync('readSafeNotice')){
// 查询是否有通知
this.getNoticeInfo();
}else{
this.isRead = false;
// 获取安全告知
this.getSafetyBulletin();
}
}
});
},
//获取工地列表
getSiteEv(lng,lat){
this.$requst.get('/api/v1/common/get-current-worksite',{lng:lng,lat:lat}).then(res=>{
if(res.code == 0){
console.log(res,'定位工地信息');
// 缓存工地id
uni.setStorageSync('worksite_id',res.data.id);
this.siteInfo = res.data;
this.registerObj.worksite_id = res.data.id;
this.isLoding = true;
// 获取打卡记录
this.getSignList();
// 获取状态列表
this.$refs.signCalendar.getStatusObj();
}
})
},
// 获取安全告知
getSafetyBulletin(){
if(!this.readSafeNotice){
this.$requst.get('/api/v1/index/safe-notice').then(res=>{
if(res.code == 0){
console.log(res,'安全告知');
this.safetyBulletin = res.data.content;
}
})
}else{
// 查询是否有通知
this.getNoticeInfo();
}
},
// 关闭安全告知
closeSafetyBulletin(){
this.isRead = true;
// 缓存是否已读
uni.setStorageSync('readSafeNotice',true);
// 查询是否有通知
this.getNoticeInfo();
},
// 查询是否有通知
getNoticeInfo(){
this.$requst.get('/api/v1/common/notice').then(res=>{
if(res.code==0){
console.log(res,'通知消息');
if(res.data.notice==1){
this.isNotice = true;
this.noticeInfo = res.data;
}else{
// 获取公告
this.getNotice();
}
}
})
},
// 关闭通知
closeEdit(){
this.isNotice = false;
// 获取公告
this.getNotice();
},
// 修改审核资料
editEv(){
this.isNotice = false;
// 显示注册表
this.ifRegister = true;
// 查询审核资料
this.getCheckDetail();
},
// 获取公告
getNotice(){
this.$requst.get('/api/v1/index/notice').then(res=>{
if(res.code==0){
console.log(res,'公告');
if(res.data.status==1){
if(uni.getStorageSync('noticeVersion')!==res.data.version){
this.ifNotice = true;
uni.setStorageSync('noticeVersion',res.data.version);
this.notice = res.data.content;
}else{
// 获取工地公告
this.getWorksiteNotice();
}
}else{
// 获取工地公告
this.getWorksiteNotice();
}
}
})
},
// 关闭公告||安全公告
closeNotice(){
if(!this.ifWsNotice){
this.ifNotice = false;
// 获取工地公告
this.getWorksiteNotice();
}else{
this.ifWsNotice = false;
}
},
// 获取工地公告
getWorksiteNotice(){
this.$requst.get('/api/v1/index/worksite-notice',{worksite_id:this.registerObj.worksite_id}).then(res=>{
if(res.code==0){
console.log(res,'工地公告');
if(res.data.status==1){
if(uni.getStorageSync('wsNoticeVersion')!==res.data.version){
this.ifWsNotice = true;
uni.setStorageSync('wsNoticeVersion',res.data.version);
this.wsNotice = res.data.content;
}
}
}
})
},
// 查询审核资料
getCheckDetail(){
this.$requst.get('/api/v1/worker/check-detail',{id:this.noticeInfo.id}).then(res=>{
if(res.code==0){
console.log(res,'审核资料');
this.registerObj = res.data;
this.positionIndex = this.positionList.findIndex(item=> item.id === res.data.position);
this.registerObj.pay = parseFloat(res.data.pay);
}
})
},
// 获取技术岗位
getPositionList(){
this.$requst.get('/api/v1/common/position-list').then(res=>{
if(res.code == 0){
console.log(res,'技术岗位');
this.positionList = res.data.list;
this.registerObj.position = res.data.list[this.positionIndex].id;
if(this.noticeInfo.notice==1){
// 查询审核资料
this.getCheckDetail();
}
}
})
},
// 选择技术岗位
choicePosition(e){
this.positionIndex = e.detail.value;
this.registerObj.position = this.positionList[e.detail.value].id;
},
// 提交注册信息
submitRegister(){
if(this.checkEmpty() && this.flag){
this.flag = false;
let params = this.registerObj;
this.$requst.post('/api/v1/worker/register',params).then(res=>{
if(res.code == 0){
this.$toolAll.tools.showToast('提交成功');
// 隐藏注册表
this.ifRegister = false;
setTimeout(()=>{
this.flag = true;
},2000)
}else{
this.$toolAll.tools.showToast(res.msg);
setTimeout(()=>{
this.flag = true;
},2000)
}
})
}
},
// 取消注册
cancelRegister(){
// 隐藏注册表
uni.navigateBack({
delta: 1 ,// 返回的页面数
fail: () => {
uni.reLaunch({
url: '/pages/pagehome/pagehome'
})
}
})
},
// 验证电话号
checkEmpty(){
let result = false;
if(this.$toolAll.tools.isPhone(this.registerObj.mobile)) {
this.$toolAll.tools.showToast('请正确填写电话号码');
} else {
result = true;
}
return result;
},
// 获取打卡信息
getSignInfo(){
this.$requst.get('/api/v1/user/sign-info').then(res=>{
if(res.code == 0){
console.log(res,'打卡信息');
// 获取日期
this.currentDate = res.data.info.today;
// 获取星期几
this.currentWeek = res.data.info.week;
// 获取当前时间
this.currenTime = res.data.info.now;
// 服务端时间处理
this.setIntervalEv();
}
})
},
// 服务端时间处理
setIntervalEv(){
// 改变计时器状态
this.timer = true;
if(this.timer){
setInterval(()=>{
let nowArr = this.currenTime.split(':');
let hour = parseInt(nowArr[0]);
let minute = parseInt(nowArr[1]);
let second = parseInt(nowArr[2]);
if(second<59){
second++;
}else{
second = 0;
if(minute<59){
minute++;
}else{
minute = 0;
if(hour<23){
hour++;
}else{
hour = 0;
}
}
}
this.currenTime = `${hour<10?'0'+hour:hour}:${minute<10?'0'+minute:minute}:${second<10?'0'+second:second}`;
},1000)
}
},
//
getSignList(){
let params = {};
if(uni.getStorageSync('worksite_id')){
params = {
worksite_id:uni.getStorageSync('worker_role')!==0?uni.getStorageSync('worksite_id'):0
}
}
this.$requst.get('/api/v1/user/sign-today',params).then(res=>{
if(res.code == 0){
console.log(res,'打卡记录');
// 获取打卡状态
this.buttonColor = res.data.buttonColor;
// 获取打卡记录列表
this.signList = res.data.list;
}
})
},
// 唤起打卡弹窗
showRadioEv(){
if(this.userInfo.role!==0){
if(this.signList.length<4){
if(this.siteInfo.name){
this.showRadio = true;
this.radioIndex = 0;
}else{
this.$toolAll.tools.showToast('');
}
}else{
this.$toolAll.tools.showToast('');
}
}else{
this.showRadio = true;
this.radioIndex = 0;
}
},
//
changeSignType(index){
if(this.radioIndex !== index){
this.radioIndex = index;
}
},
//
signEv(){
let params = {
type:this.radioList[this.radioIndex].type,
lat:this.siteInfo.lat,
lng:this.siteInfo.lng,
worksite_id:this.siteInfo.id
}
this.$requst.post('/api/v1/user/sign',params).then(res=>{
if(res.code==0){
this.showRadio = false;
// 获取打卡记录
this.getSignList();
// 获取状态列表
this.$refs.signCalendar.getStatusObj();
}else{
this.$toolAll.tools.showToast(res.msg);
}
})
},
// 选择图片
changeImg(type){
uni.chooseImage({
count: 1, //默认9
sourceType: ['album','camera'], //从相册选择
success: (res)=> {
this.stagingImg = res.tempFilePaths[0];
// 上传图片
this.uploadImg(type);
}
})
},
// 上传图片
uploadImg(type){
uni.showLoading({
title: '上传中'
});
this.$requst.upload('/api/v1/file/upload/image',{path:this.stagingImg}).then(res=>{
if(res.code==0) {
if(type=='positive'){
this.registerObj.id_front = `${getApp().globalData.hostapi}`+res.data.src;
}
if(type=='back'){
this.registerObj.id_back = `${getApp().globalData.hostapi}`+res.data.src;
}
if(type=='bank'){
this.registerObj.bank_card_img = `${getApp().globalData.hostapi}`+res.data.src;
}
}
uni.hideLoading();
})
},
// 删除图片
delImg(index,type){
if(type=='positive'){
this.registerObj.id_front = '';
}
if(type=='back'){
this.registerObj.id_back = '';
}
if(type=='bank'){
this.registerObj.bank_card_img = '';
}
},
// 获取选择日期
getDate(date){
uni.navigateTo({
url:`/pagesA/signRecord/signRecord?date=${date}&userType=${this.userType}`
})
},
// 预览图片
previewImage(url) {
let urlArr = [url];
uni.previewImage({
current: 1, //预览图片的下标
urls: urlArr //预览图片的地址,必须要数组形式,如果不是数组形式就转换成数组形式就可以
})
}
}
}
</script>
<style scoped>
</style>