index.vue
11.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
<template>
<div class='container'>
<form class="baseinfo-box" @submit='commit'>
<div class="baseinfo">
<div class="list-input">
<span>值班人</span>
<p class="text_right">{{name}}</p>
</div>
<div class="list-input">
<span>值班日期</span>
<div class="datebox">
<!--<picker class="date" v-model="startDate" mode='date' :value='startDate' @change="pickerConfirm($event,'date')">
<div hover-class='hover' :class="{unset:startDate==''}">{{startDate || '选择日期'}}</div>
</picker>-->
<picker class="date" v-model="startDate" mode='date' :value='startDate' @change="pickerConfirm($event,'date')">
<div hover-class='hover' :class="{unset:startDate==''}">{{startDate || '选择日期'}}</div>
</picker>
</div>
</div>
<div class="list-input">
<span>值班社区</span>
<p class="text_right">{{commName}}</p>
</div>
<div class='greytitle'>值班证明图片</div>
<div class="img-box" style='background:white;'>
<div class='image' v-for="(item,i) in imgfiles" :key="i" @tap='previewImg(i)'>
<img :src="item" mode='aspectFill'>
<div @tap.stop='cancelImg(i)'><img src='/static/imgs/cancel.png'></div>
</div>
<div hover-class='fade' class='upload' @tap="chooseImage"><img src='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU3NDYzMDY5MzcyIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwNTUgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI1MDEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNjUuOTM3NSIgaGVpZ2h0PSI2NCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj5AZm9udC1mYWNlIHsgZm9udC1mYW1pbHk6IHJiaWNvbjsgc3JjOiB1cmwoImNocm9tZS1leHRlbnNpb246Ly9kaXBpYWdpaW9oZmxqY2ljZWdwZ2ZmcGJuam1namNuZi9mb250cy9yYmljb24ud29mZjIiKSBmb3JtYXQoIndvZmYyIik7IGZvbnQtd2VpZ2h0OiBub3JtYWw7IGZvbnQtc3R5bGU6IG5vcm1hbDsgfQo8L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNODU4LjU3OTY1MSAxMDcuMjY4Njc5IDUwMC44NTAwODEgMTA3LjI2ODY3OUM1MDAuODUwMDgxIDQ4LjExMzE1NyA0NTIuNjY1MjIgMCAzOTMuNTA5Njk4IDBMMzIxLjk0OTQ0MyAwQzI2Mi43OTM5MjIgMCAyMTQuNjgwNzY1IDQ4LjExMzE1NyAyMTQuNjgwNzY1IDEwNy4yNjg2NzlMMTA3LjM0MDM4MiAxMDcuMjY4Njc5QzQ4LjE4NDg2MSAxMDcuMjY4Njc5IDAgMTU1LjQ1MzU0IDAgMjE0LjUzNzM1N2wwIDU3Mi40MTAzMzVjMCA1OS4yMjcyMjUgNDguMTg0ODYxIDEwNy40MTIwODYgMTA3LjM0MDM4MiAxMDcuNDEyMDg2bDQ2Ny4xNDkzNTkgMGMxMC4yNTM2MjQgMCAxOS44NjE5MTQtNC4zNzM5MjMgMjYuNjczNzYyLTExLjkwMjgwOHMxMC4wMzg1MTMtMTcuNzgyNTA4IDguODkxMjU0LTI3Ljg5MjcyNWMtMS4wNzU1NTUtOS4zOTMxOC0xLjcyMDg4OC0xOC43ODYzNTktMS43MjA4ODgtMjguNTM4MDU4IDAtMTU4LjI0OTk4MiAxNDcuODUyOTUxLTI4NC44MDY5NDYgMzEyLjkxNDc4Mi0yNDIuMTQzMjY3IDEwLjY4Mzg0NiAyLjY1MzAzNiAyMi4wODQ3MjggMC40MzAyMjIgMzAuODMyNTc1LTYuNDUzMzMgOC43NDc4NDctNi43NDAxNDQgMTMuODM4ODA3LTE3LjIwODg3OSAxMy44Mzg4MDctMjguMTc5NTM5TDk2NS45MjAwMzQgMjE0LjUzNzM1N0M5NjUuOTIwMDM0IDE1NS40NTM1NCA5MTcuNzM1MTczIDEwNy4yNjg2NzkgODU4LjU3OTY1MSAxMDcuMjY4Njc5TDg1OC41Nzk2NTEgMTA3LjI2ODY3OXpNNDY1LjA2OTk1MyA3MTUuNTMwODQ1Yy0xMTguMzgyNzQ2IDAtMjE0LjY4MDc2NS05Ni4zNjk3MjItMjE0LjY4MDc2NS0yMTQuNzUyNDY4IDAtMTE4LjMxMTA0MyA5Ni4yOTgwMTgtMjE0LjY4MDc2NSAyMTQuNjgwNzY1LTIxNC42ODA3NjUgMTE4LjMxMTA0MyAwIDIxNC42MDkwNjEgOTYuMzY5NzIyIDIxNC42MDkwNjEgMjE0LjY4MDc2NUM2NzkuNjc5MDE0IDYxOS4xNjExMjMgNTgzLjQ1MjY5OSA3MTUuNTMwODQ1IDQ2NS4wNjk5NTMgNzE1LjUzMDg0NUw0NjUuMDY5OTUzIDcxNS41MzA4NDV6TTgwNC45NDUzMTIgMzc2LjY1OTMzOGMtNDAuMTU0MDUxIDAtNzIuNzA3NTEzLTMyLjQ4MTc1OS03Mi43MDc1MTMtNzIuNzA3NTEzIDAtNDAuMDgyMzQ3IDMyLjU1MzQ2My03Mi43MDc1MTMgNzIuNzA3NTEzLTcyLjcwNzUxM3M3Mi43MDc1MTMgMzIuNjI1MTY2IDcyLjcwNzUxMyA3Mi43MDc1MTNDODc3LjU4MTEyMiAzNDQuMTc3NTc5IDg0NS4wMjc2NTkgMzc2LjY1OTMzOCA4MDQuOTQ1MzEyIDM3Ni42NTkzMzhMODA0Ljk0NTMxMiAzNzYuNjU5MzM4ek05MzAuMTM5OTA2IDg1OC41MDc5NDgiIHAtaWQ9IjI1MDIiIGZpbGw9IiNBRUFFQUUiPjwvcGF0aD48cGF0aCBkPSJNMTAxMS4wOTMzNDEgNzg0Ljg2ODI4N2wtMTA4LjI3MjUzIDAgMC0xMDguMjcyNTNjMC0yMy45NDkwMjMtMTkuNDMxNjkyLTQzLjMwOTAxMi00My4zMDkwMTItNDMuMzA5MDEycy00My4zMDkwMTIgMTkuMzU5OTg5LTQzLjMwOTAxMiA0My4zMDkwMTJsMCAxMDguMjcyNTMtMTA4LjI3MjUzIDBjLTIzLjk0OTAyMyAwLTQzLjMwOTAxMiAxOS40MzE2OTItNDMuMzA5MDEyIDQzLjM4MDcxNnMxOS40MzE2OTIgNDMuMzA5MDEyIDQzLjMwOTAxMiA0My4zMDkwMTJsMTA4LjI3MjUzIDAgMCAxMDguMjcyNTNjMCAyMy45NDkwMjMgMTkuNDMxNjkyIDQzLjM4MDcxNiA0My4zMDkwMTIgNDMuMzgwNzE2czQzLjMwOTAxMi0xOS40MzE2OTIgNDMuMzA5MDEyLTQzLjM4MDcxNmwwLTEwOC4yNzI1MyAxMDguMjcyNTMgMGMyMy45NDkwMjMgMCA0My4zMDkwMTItMTkuMzU5OTg5IDQzLjMwOTAxMi00My4zMDkwMTJTMTAzNS4wNDIzNjQgNzg0Ljg2ODI4NyAxMDExLjA5MzM0MSA3ODQuODY4Mjg3eiIgcC1pZD0iMjUwMyIgZmlsbD0iI0FFQUVBRSI+PC9wYXRoPjwvc3ZnPg=='></div>
</div>
<div class='commit'>
<button form-type='submit' hover-class='fade' :disabled='commiting' bindtap='submit'>提交</button>
</div>
</div>
</form>
</div>
</template>
<script>
export default {
data() {
return {
SCID: '',
name: '',
commName: '',
startDate: '',
commiting: false,
loaded: false,
imgfiles: []
}
},
methods: {
commit(e){
if(this.commiting) return
if(!this.service.checkEmptyInput([this.startDate,this.commName,this.imgfiles,this.SCID],['值班日期','值班社区','值班证明图片','值班社区'])){
return
}
wx.showModal({
title:'',
content:'确定要提交吗?',
success: res => {
if(res.confirm){
this.execCommit(e)
}
}
})
},
execCommit(e){
this.commiting = true
wx.showLoading({ title: '正在提交' })
wx.request({
url: this.rootUrl + 'duty/add',
method: 'POST',
header: { 'content-type': 'application/x-www-form-urlencoded' },
data: {
duty_date: this.startDate,
SCID: this.SCID,
sessionID: wx.getStorageSync('sessionID')
},
success: res => {
console.log(res)
if (res.statusCode == '500') {
this.service.getUnionId(this.rootAvatar, this.rootUrl).then(res => this.submit_exec(content))
} else {
wx.hideLoading()
if (res.data > 0) {
this.upLoadImgs(res.data)
wx.showModal({
title: '提交成功',
content: '',
showCancel: false
})
wx.hideLoading()
} else {
wx.showToast({ title: '提交失败', icon: 'none' })
}
this.commiting = false
this.toHomelist()
}
}
})
},
loadArticles () {
this.getLawName()
},
// /*根据时间和当前律师获取值班街道*/
getLawStreet(){
wx.request({
url: this.rootUrl + '/sch/getLawStreet',
method: 'POST',
header: { 'content-type': 'application/x-www-form-urlencoded' },
data: {
Schedule_Date: this.startDate,
sessionID: wx.getStorageSync('sessionID')},
success: res => {
console.log(res.data)
this.commName = res.data.comm_Name
this.SCID = res.data.scid
}
})
},
// /*获取值班律师的姓名*/
getLawName(){
wx.showLoading({ title: '正在加载' })
wx.request({
url: this.rootUrl + '/law/getLawName',
method: 'GET',
header: { 'content-type': 'application/x-www-form-urlencoded' },
data: { sessionID: wx.getStorageSync('sessionID')},
success: res => {
console.log(res)
// this.name = res.data[0].name
if(undefined != res.data[0].name){
this.name = res.data[0].name
}else{
this.name = ''
}
wx.hideLoading()
}
})
},
//回到首页
toHomelist: function () {
wx.navigateBack({
// url: '../homelist'
delta: 1
})
},
pickerConfirm(e, s) {
switch (s) {
case 'date': this.startDate = e.mp.detail.value;break
}
this.getLawStreet()
},
upLoadImgs(id) {
wx.showLoading({ title: '正在上传图片' })
const time = this.imgfiles.length
let counter = time
for(let i = 0; i < time; i++){
wx.uploadFile({
url: this.rootUrl + 'duty/addpic',
filePath: this.imgfiles[i],
formData: {
id,
filetype: 0
},
name: 'file',
header: {
'content-type': 'multipart/form-data'
},
success: res => {
if(res.data == 1){
console.log(res)
wx.showLoading({ title: `图片上传成功` })
wx.hideLoading()
//
}else{
wx.showLoading({ title: `图片上传失败` })
wx.hideLoading()
//
}
},
fail: res => {
wx.hideLoading()
wx.showToast({title:'上传失败',icon: 'none'})
this.commiting = false
}
})
}
},
chooseImage() {
const count = 6 - this.imgfiles.length
if(count==0){
if(!wx.showModal({
title: '上传限制',
content: '图片数量上限为6张\n请删除部分图片后再上传新图片',
showCancel: false,
success: res => {
if(res.confirm){return false}
}
})){return}
}
wx.chooseImage({
count,
sizeType: ['compressed'],
success: res => {
console.log(res)
this.imgfiles = this.imgfiles.concat(res.tempFilePaths)
}
})
},
cancelImg(i){
wx.showModal({
title:'',
content: '放弃上传这张照片吗?',
success: res => {
if(res.confirm){
this.imgfiles.splice(i, 1)
}
}
})
},
previewImg(i){
wx.previewImage({
urls: this.imgfiles,
current: this.imgfiles[i]
})
}
},
onLoad() {
this.getLawName()
},
onShow(){
this.loadArticles()
},
onUnload() {
this.commName = ''
this.name = ''
this.imgfiles = []
this.loaded = false
}
}
</script>
<style lang="stylus" scoped>
.container
position absolute
min-height 100%
width 100%
Background()
.baseinfo-box
Background()
.datebox
margin-right 0 !important
width 100%
text-align right
.date
float right
width 180rpx
.img-box
padding 0 30rpx 30rpx 30rpx
.image
position relative
> img
Height_Width(100%)
div
position absolute
top 0
right 0
background rgba(0,0,0,.5)
Height_Width(100% / 5)
Flex(flex,center,center)
border-radius 0 0 0 10rpx
img
Height_Width(60%)
.upload
Flex(flex,center,center)
background #f5f5f5
img
Height_Width(40%)
.text_right
display: block;
text-align: right;
width: 100%;
padding-right: 30rpx;
</style>