You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
403 lines
8.2 KiB
403 lines
8.2 KiB
<template> |
|
<BasicContainer ref='basicContainer' :option="option"> |
|
<!-- 头部 --> |
|
<template #head> |
|
</template> |
|
|
|
<!-- 主体 --> |
|
<template #body> |
|
<view class="main"> |
|
<scroll-view class="scvmabx" :style="{height: details.scrollheight}" @scrolltolower="()=>{}" scroll-y="true" |
|
@touchmove.stop> |
|
<view class="main_container "> |
|
<!-- 行 -- 图片 --> |
|
<view class="info_item border_bottom"> |
|
<view class="info_item_title"> |
|
图 片 |
|
</view> |
|
|
|
<view class="imgList flex"> |
|
<!-- 单个图片 --> |
|
<block v-for="(item, index) in details.imagesList" :key="item.url"> |
|
<view class="image_conatiner mr20 mb20"> |
|
<image :src="item.url" mode=""></image> |
|
|
|
<!-- 删除 --> |
|
<view class="removeIcon" @click="() => handleRemove(index)"> |
|
<u-icon name="close-circle-fill" color="#666" size="50"></u-icon> |
|
</view> |
|
</view> |
|
</block> |
|
|
|
|
|
<!-- 添加图片 --> |
|
<view class="image_conatiner addImg flex-c-c" @click="handleUploadFile"> |
|
<u-icon name="photo-fill" color="#999" size="100"></u-icon> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<!-- 行 -- 备注 --> |
|
<view class="info_item "> |
|
<view class="info_item_title"> |
|
备 注 |
|
</view> |
|
|
|
<u--textarea v-model="details.form.remark" placeholder="请输入备注"></u--textarea> |
|
</view> |
|
</view> |
|
</scroll-view> |
|
|
|
<view class="footer"> |
|
<view class="button subColor" @click="handleSubmit"> |
|
确 认 |
|
</view> |
|
</view> |
|
</view> |
|
|
|
</template> |
|
</BasicContainer> |
|
|
|
<tips ref="tip" /> |
|
|
|
<!-- #ifdef APP --> |
|
<!-- <saomiao2 :ishidestop="scanState !== 0"></saomiao2> --> |
|
<!-- #endif --> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import { |
|
postInstallSalesComplete, |
|
} from '@/api/user.js' |
|
import { |
|
onLoad, |
|
onShow, |
|
onHide, |
|
onUnload |
|
} from '@dcloudio/uni-app' |
|
import { nextTick, reactive, ref, toRefs } from "vue"; |
|
import utils from '@/utils/utils.js' |
|
import useSystemSettingsStore from '@/store/useSystemSettingsStore'; |
|
import { storeToRefs } from 'pinia'; |
|
const { scanState } = storeToRefs(useSystemSettingsStore()) |
|
|
|
let details = reactive({ |
|
/** 主页面高度 */ |
|
scrollheight: '80vh', |
|
/** 表单数据 */ |
|
form: { |
|
/** 备注 */ |
|
remark: '' |
|
}, |
|
pageInfo: { |
|
/** 类型 -- siginIn: 签入 ; siginOut: 签出 */ |
|
type: 'siginIn' as 'siginIn' | 'siginOut', |
|
/** 页面类型 -- install: 安装任务; installSales: 安装售后 */ |
|
pageType: 'install' as 'install' | 'installSales', |
|
/** install_id | install_sales_id */ |
|
id: '' |
|
}, |
|
imagesList: [] as { name : string, url : string }[] |
|
}) |
|
|
|
// 组件配置 |
|
const option = reactive({ |
|
// 标题 |
|
title: '售后完成信息', |
|
// 下拉刷新回调函数 |
|
async pullDownRefreshInitPage() { |
|
|
|
return null |
|
}, |
|
// 触底加载回到函数 |
|
reachBottomInitPage: async () => { return null }, |
|
haveData: true, |
|
isEnd: false, |
|
pageLoading: false |
|
}) |
|
|
|
// 组件实例 |
|
const basicContainer = ref() |
|
const tip = ref() |
|
|
|
onShow(async () => { |
|
// // #ifdef APP |
|
// // 初始化关闭监听 |
|
// uni.$off('scancodedate') |
|
// // init() |
|
// uni.$on('scancodedate', function (code) { |
|
// console.log('code :>> ', code); |
|
// if (code) { |
|
// console.log(code); |
|
// details.scancode = code |
|
// scandata() |
|
// } |
|
// }) |
|
// // #endif |
|
|
|
await nextTick() |
|
// basicContainer.value.startPullDownRefresh() |
|
const _height = await utils.getViewDistanceFormTop('.scvmabx') |
|
|
|
details.scrollheight = Number(_height.replace('px', '')) - 100 + 'px' |
|
}) |
|
|
|
onLoad((e) => { |
|
console.log('e :>> ', e); |
|
details.pageInfo.id = e.id |
|
|
|
const _info = (uni.getStorageSync('installWork') || {}) |
|
|
|
details.form.remark = _info.remark || '' |
|
details.imagesList = _info.images || [] |
|
}) |
|
|
|
onUnload(() => { |
|
uni.removeStorageSync('installWork') |
|
}) |
|
|
|
|
|
const scandata = () => { } |
|
|
|
/** 页面初始化请求 */ |
|
const initpage = () => { } |
|
|
|
/** 上传图片 */ |
|
const handleUploadFile = () => { |
|
const beforeUpload = (files) => { |
|
option.pageLoading = true |
|
} |
|
|
|
const successByUpload = (res) => { |
|
console.log('res :>> ', res); |
|
const { data } = res |
|
const _data = JSON.parse(data) |
|
|
|
console.log('_data :>> ', _data); |
|
const { code, data: img } = _data |
|
|
|
if (code !== 200) return |
|
|
|
details.imagesList.push({ url: img, name: img }) |
|
} |
|
|
|
const allSuccess = () => { |
|
option.pageLoading = false |
|
} |
|
|
|
utils.handleUploadFile({ |
|
successByUpload, |
|
beforeUpload, |
|
allSuccess |
|
}) |
|
} |
|
|
|
|
|
/** 移除 */ |
|
const handleRemove = (index : number) => { |
|
tip.value.setdetails({ |
|
isshow: true, |
|
content: '确认移除', |
|
cancelTxt: '取消', |
|
confirmTxt: '确认', |
|
async success() { |
|
details.imagesList.splice(index, 1) |
|
|
|
// 关闭弹窗 |
|
tip.value.setdetails({ isshow: false }) |
|
}, |
|
cancel() { |
|
// 关闭弹窗 |
|
tip.value.setdetails({ isshow: false }) |
|
} |
|
}) |
|
} |
|
|
|
/** 签到 */ |
|
const handleSubmit = () => { |
|
const submitData : { |
|
// 类型 -- 签入: 1,签出: 2 |
|
type : string, |
|
// 备注 |
|
remark : string |
|
// 售后任务id |
|
install_sales_id : string, |
|
// 图片列表 |
|
images : { |
|
url : string, |
|
name : string |
|
}[] |
|
} = { |
|
type: details.pageInfo.type === 'siginIn' ? '1' : '2', |
|
remark: details.form.remark, |
|
install_sales_id: details.pageInfo.id, |
|
images: [...details.imagesList] |
|
} |
|
|
|
|
|
if (submitData.images.length === 0) return utils.handleToast('最少上传一张照片') |
|
|
|
|
|
|
|
tip.value.setdetails({ |
|
isshow: true, |
|
content: '确认完工', |
|
cancelTxt: '取消', |
|
confirmTxt: '确认', |
|
async success() { |
|
try { |
|
option.pageLoading = true |
|
|
|
const res = await postInstallSalesComplete(submitData) |
|
const { code, data } = res |
|
|
|
if (code !== 200) return |
|
|
|
// const timer = setTimeout(() => { |
|
// utils.handleToast((details.pageInfo.type === 'siginIn' ? '签入' : '签出') + '成功') |
|
|
|
// clearTimeout(timer) |
|
// }, 200) |
|
uni.navigateBack() |
|
|
|
} catch (err) { |
|
console.log('err :>> ', err); |
|
//TODO handle the exception |
|
} finally { |
|
// 关闭弹窗 |
|
tip.value.setdetails({ isshow: false }) |
|
option.pageLoading = false |
|
} |
|
}, |
|
cancel() { |
|
// 关闭弹窗 |
|
tip.value.setdetails({ isshow: false }) |
|
} |
|
}) |
|
|
|
|
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
@import url("@/utils/style/common.scss"); |
|
|
|
// 主体内容 |
|
.main { |
|
font-family: 黑体; |
|
position: relative; |
|
border-top-right-radius: 20upx; |
|
border-top-left-radius: 20upx; |
|
background-color: #fff; |
|
|
|
.scvmabx { |
|
background-color: #fff; |
|
|
|
|
|
} |
|
|
|
.main_container { |
|
padding: 0 20upx; |
|
} |
|
|
|
.info_item { |
|
padding-bottom: 20upx; |
|
|
|
.info_item_title { |
|
padding: 20upx 0; |
|
font-weight: bold; |
|
} |
|
|
|
&.border_bottom { |
|
border-bottom: 2upx solid #eee; |
|
} |
|
|
|
:deep(.u-textarea) { |
|
background-color: #f5f5f6; |
|
border: none; |
|
height: 200upx; |
|
} |
|
} |
|
|
|
|
|
|
|
// 图片列表 |
|
.imgList { |
|
flex-wrap: wrap; |
|
|
|
.image_conatiner { |
|
position: relative; |
|
|
|
.removeIcon { |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
transform: translate(40%, -40%); |
|
opacity: 0.9; |
|
} |
|
} |
|
|
|
.addImg { |
|
width: 160upx; |
|
height: 160upx; |
|
border-radius: 20upx; |
|
box-sizing: border-box; |
|
border: 2upx solid #eee; |
|
} |
|
|
|
image { |
|
width: 160upx; |
|
height: 160upx; |
|
border-radius: 20upx; |
|
} |
|
} |
|
} |
|
|
|
// 底部 |
|
.footer { |
|
box-sizing: border-box; |
|
height: 100px; |
|
padding-top: 30upx; |
|
display: flex; |
|
justify-content: space-between; |
|
|
|
.button { |
|
height: 80upx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
flex: 1; |
|
// margin: 10upx; |
|
border: 2upx solid #b5babf; |
|
border-radius: 80upx; |
|
margin: 0 10upx; |
|
padding: 0 10upx; |
|
font-size: 0.9rem; |
|
font-weight: bold; |
|
|
|
&.subColor { |
|
// border-color: var(--subjectColor); |
|
// color: var(--subjectColor); |
|
background-color: var(--subjectColor); |
|
color: #fff; |
|
border: none; |
|
} |
|
|
|
&.primaryColor { |
|
// border-color: var(--primaryColor); |
|
// color: var(--primaryColor); |
|
background-color: var(--primaryColor); |
|
color: #fff; |
|
border: none; |
|
} |
|
|
|
&.errColor { |
|
// border-color: var(--errColor); |
|
// color: var(--errColor); |
|
background-color: var(--errColor); |
|
color: #fff; |
|
border: none; |
|
} |
|
} |
|
} |
|
</style> |