182 lines
3.9 KiB
Vue
182 lines
3.9 KiB
Vue
<template>
|
|
<div class="finish">
|
|
<div class="card">
|
|
<header>设置进度</header>
|
|
<u-gap height="120"></u-gap>
|
|
<u-slider v-model="form.percent" min="0" max="100" :use-slot="true">
|
|
<div class="wrap">
|
|
<div class="value" :style="{right:form.percent<30?'-50px':''}">{{ form.percent }}%</div>
|
|
<div class="btn" :style="{background:'url('+$cdn+ 'common/yuan.png)'}"></div>
|
|
</div>
|
|
</u-slider>
|
|
<u-gap height="70"></u-gap>
|
|
</div>
|
|
<div class="card">
|
|
<div class="label">
|
|
<em>*</em>
|
|
完成说明
|
|
</div>
|
|
<textarea placeholder="请输入说明" v-model.trim="form.remarks" :maxlength="1000"></textarea>
|
|
<u-gap height="28"></u-gap>
|
|
<u-row justify="between">
|
|
<text @click="form.remarks=''">清空内容</text>
|
|
<text>{{ form.remarks.length }}/1000</text>
|
|
</u-row>
|
|
<u-gap height="48"></u-gap>
|
|
</div>
|
|
<div class="footer" @click="submit">提交</div>
|
|
<u-modal v-model="show" content="提交后将无法撤回，您确定要执行此操作？" @confirm="handleConfirm"></u-modal>
|
|
<ai-back ref="aiBack"></ai-back>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: "finish",
|
|
data() {
|
|
return {
|
|
value: 0,
|
|
show: false,
|
|
form: {
|
|
percent: 0,
|
|
remarks: "",
|
|
taskCode: null,
|
|
}
|
|
}
|
|
},
|
|
onLoad(opt) {
|
|
this.form.taskCode = opt.taskCode
|
|
this.form.percent = opt.percent
|
|
},
|
|
methods: {
|
|
submit() {
|
|
if (!this.form.remarks) return this.$u.toast("请输入完成说明")
|
|
this.show = true
|
|
},
|
|
handleConfirm() {
|
|
this.$http.post("/app/appworktaskprocess/addOrUpdate", {
|
|
...this.form
|
|
}).then(res => {
|
|
if (res.code == 0) {
|
|
this.$u.toast("提交成功")
|
|
setTimeout(() => {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
}, 500)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.finish {
|
|
min-height: 100%;
|
|
background-color: #F5F5F5;
|
|
padding-bottom: 140px;
|
|
|
|
.card {
|
|
background-color: #FFFFFF;
|
|
margin-bottom: 8px;
|
|
box-sizing: border-box;
|
|
padding: 16px 32px;
|
|
|
|
header {
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
line-height: 44px;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
::v-deep .u-slider {
|
|
background: #F2F4FC !important;
|
|
border-radius: 12px !important;
|
|
|
|
.u-slider__gap {
|
|
height: 12px !important;
|
|
|
|
.u-slider__button-wrap {
|
|
top: 100% !important;
|
|
|
|
.wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.value {
|
|
width: 136px;
|
|
height: 64px;
|
|
background: #4F8DE7;
|
|
border-radius: 6px;
|
|
position: absolute;
|
|
top: -80px;
|
|
right: 50px;
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.btn {
|
|
width: 80px;
|
|
height: 80px;
|
|
background-size: 100% 100% !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.label {
|
|
height: 80px;
|
|
font-size: 32px;
|
|
color: #333333;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
& > em {
|
|
font-style: normal;
|
|
font-size: 32px;
|
|
color: #FF4466;
|
|
line-height: 44px;
|
|
}
|
|
}
|
|
|
|
textarea {
|
|
width: 100%;
|
|
}
|
|
|
|
.u-row {
|
|
& > text:first-child {
|
|
font-size: 28px;
|
|
color: #1365DD;
|
|
}
|
|
|
|
& > text:last-child {
|
|
font-size: 24px;
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
height: 112px;
|
|
width: 100%;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
background: #1365DD;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 36px;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
</style>
|