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.
426 lines
8.5 KiB
426 lines
8.5 KiB
<template> |
|
<BasicContainer ref="basicContainer" :option="option"> |
|
<!-- 头部 --> |
|
<template #head></template> |
|
|
|
<!-- 主体 --> |
|
<template #body></template> |
|
</BasicContainer> |
|
|
|
<view class=""> |
|
<view class="main_container"> |
|
<!-- 到货信息 --> |
|
<view class="info_item border_bottom"> |
|
<view class="info_item_title flex-c-sb"> |
|
<view class=""> |
|
到 货 信 息 |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<!-- 行 -- 售后类型 --> |
|
<view class="info_item border_bottom"> |
|
<view class="info_item_title flex-c-sb"> |
|
<view class=""> |
|
到 货 状 态 |
|
</view> |
|
|
|
<view> |
|
<text class="mr10 fwn info"> |
|
{{ details.isArrival? '部分到货':'未到货' }} |
|
</text> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<!-- 行 -- 售后类型 --> |
|
<view class="info_item border_bottom"> |
|
<view class="info_item_title flex-c-sb"> |
|
<view class=""> |
|
到 货 包 件 |
|
</view> |
|
|
|
<!-- 新增售后包件 --> |
|
<view class="flex addBtn" @click="handleAddPackage"> |
|
<view class="addButton"> |
|
<u-icon name="close-circle" color="#2F8DFF" size="36"></u-icon> |
|
</view> |
|
|
|
<text class="ml10 fwn"> |
|
添加 |
|
</text> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<scroll-view class="scvmabx" :style="{height: details.scrollheight}" @scrolltolower="()=>{}" scroll-y="true" |
|
@touchmove.stop> |
|
<!-- 售后包件列表 --> |
|
<view :class="{packageList: true, pd20: details.packageList.length > 0}" |
|
:style="{height: (details.packageList.length > 0 ?(40 * details.packageList.length) + ((details.packageList.length - 1) * 10): 0) + 'px'}"> |
|
<block v-for="(item, index) in details.packageList"> |
|
<view :class="{'packageItem': true, 'flex-c-sb': true, 'mt20': index !== 0}"> |
|
<view class="inputBox flex1 flex"> |
|
<input class="packageInput flex1" v-model="item.code" placeholder="请输入包条码" /> |
|
|
|
<view class="scanIcon flex-c-c" @click.stop="()=> handleScan(item)"> |
|
<u-icon name="scan" color="#2F8DFF" size="60"></u-icon> |
|
</view> |
|
</view> |
|
|
|
<view class="ml20 flex-c-c" @click="()=> handleRemovePackage(index)"> |
|
<u-icon name="trash" color="#8792AA" size="36"></u-icon> |
|
|
|
<text class="ml10 info"> |
|
删除 |
|
</text> |
|
</view> |
|
</view> |
|
</block> |
|
</view> |
|
</scroll-view> |
|
|
|
<view class="felx-c-c mb20"> |
|
<view class="button subColor" @click="handleArrivalNotice"> |
|
到货确认 |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<tips ref="tip" /> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import { |
|
postCenterInstallSalesTheArrival |
|
} from '@/api/user.js' |
|
import { |
|
onLoad, |
|
onShow, |
|
onUnload |
|
} from '@dcloudio/uni-app' |
|
import { nextTick, reactive, ref, toRefs, computed, defineExpose } from "vue"; |
|
import utils from '@/utils/utils.js' |
|
|
|
|
|
// 组件配置 |
|
const option = reactive({ |
|
// 标题 |
|
title: '确认到货', |
|
// 下拉刷新回调函数 |
|
async pullDownRefreshInitPage() { |
|
return null |
|
}, |
|
// 触底加载回到函数 |
|
reachBottomInitPage: async () => { |
|
return null |
|
}, |
|
haveData: true, |
|
isEnd: false, |
|
pageLoading: false, |
|
haveReachBottom: false |
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const tip = ref() |
|
|
|
|
|
let details = reactive({ |
|
/** 主页面高度 */ |
|
scrollheight: '80vh', |
|
/** 表单数据 */ |
|
form: { |
|
type: '', |
|
typeName: '', |
|
/** 备注 */ |
|
remark: '' |
|
}, |
|
/** 到货包件 */ |
|
packageList: [], |
|
/** 售后图片列表 */ |
|
imgList: [], |
|
/** 扫描码值 */ |
|
scancode: '', |
|
/** 是否到货 */ |
|
isArrival: false, |
|
/** 页面信息 */ |
|
pageInfo: { |
|
id: '' |
|
} |
|
}) |
|
|
|
onLoad((e) => { |
|
details.pageInfo.id = e.id |
|
const _arr = uni.getStorageSync('arrivalPackage') || [] |
|
details.packageList = _arr.map(val => { |
|
return { code: val.package_code } |
|
}) |
|
|
|
details.isArrival = details.packageList.length > 0 ? true : false |
|
}) |
|
|
|
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' |
|
}) |
|
|
|
onUnload(() => { |
|
uni.removeStorageSync('arrivalPackage') |
|
}) |
|
|
|
const scandata = () => { } |
|
|
|
const initpage = () => { } |
|
|
|
/** 显示扫描 */ |
|
const handleScan = (value) => { |
|
console.log('value :>> ', value); |
|
// #ifdef MP-WEIXIN |
|
// 微信小程序适配 |
|
uni.scanCode({ |
|
success(res) { |
|
console.log('res :>> ', res); |
|
console.log('res.result :>> ', res.result); |
|
for (let i = 0; i < details.packageList.length; i++) { |
|
const value = details.packageList[i].code |
|
|
|
if (value === res.result) return utils.handleToast('码值已存在') |
|
} |
|
|
|
value = res.result |
|
// scandata() |
|
} |
|
}) |
|
return |
|
// #endif |
|
} |
|
|
|
/** 新增售后包件 */ |
|
const handleAddPackage = () => { |
|
details.packageList.push({ code: '' }) |
|
} |
|
|
|
/** 删除售后包件 */ |
|
const handleRemovePackage = (index : number) => { |
|
details.packageList.splice(index, 1) |
|
} |
|
|
|
|
|
/** 到货 */ |
|
const handleArrivalNotice = () => { |
|
// postCenterInstallSalesTheArrival |
|
console.log('details.packageList :>> ', details.packageList); |
|
|
|
tip.value.setdetails({ |
|
isshow: true, |
|
content: '确认到货', |
|
cancelTxt: '部分到货', |
|
confirmTxt: '确认到货', |
|
async success() { |
|
try { |
|
option.pageLoading = true |
|
|
|
const submitData = { |
|
install_sales_id: details.pageInfo.id, |
|
status: 1, |
|
packages: details.packageList.filter(val => val.code).map(val => val.code) |
|
} |
|
|
|
const res = await postCenterInstallSalesTheArrival(submitData) |
|
|
|
const { code, data } = res |
|
|
|
if (code !== 200) return |
|
uni.navigateBack() |
|
|
|
} catch (err) { |
|
console.log('err :>> ', err); |
|
//TODO handle the exception |
|
} finally { |
|
option.pageLoading = false |
|
// 关闭弹窗 |
|
tip.value.setdetails({ isshow: false }) |
|
|
|
} |
|
}, |
|
async cancel() { |
|
try { |
|
option.pageLoading = true |
|
|
|
const submitData = { |
|
install_sales_id: details.pageInfo.id, |
|
status: 0, |
|
packages: details.packageList.filter(val => val.code).map(val => val.code) |
|
} |
|
|
|
const res = await postCenterInstallSalesTheArrival(submitData) |
|
|
|
const { code, data } = res |
|
|
|
if (code !== 200) return |
|
uni.navigateBack() |
|
|
|
} catch (err) { |
|
console.log('err :>> ', err); |
|
//TODO handle the exception |
|
} finally { |
|
option.pageLoading = false |
|
// 关闭弹窗 |
|
tip.value.setdetails({ isshow: false }) |
|
|
|
} |
|
|
|
} |
|
}) |
|
} |
|
|
|
defineExpose({ details }) |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
@import url("@/utils/style/common.scss"); |
|
|
|
.info { |
|
color: #AFB4BA; |
|
} |
|
|
|
.main_container { |
|
// padding: 0 20upx; |
|
background-color: #fff; |
|
} |
|
|
|
// 行 |
|
.info_item { |
|
margin: 0 20upx; |
|
padding: 20upx; |
|
|
|
.info_item_title { |
|
// padding: 0 0 20upx; |
|
font-weight: bold; |
|
height: 40upx; |
|
line-height: 40upx; |
|
} |
|
|
|
|
|
&.border_bottom { |
|
border-bottom: 2upx solid #eee; |
|
} |
|
|
|
:deep(.u-textarea) { |
|
background-color: #f5f5f6; |
|
border: none; |
|
height: 200upx; |
|
} |
|
|
|
// 添加 |
|
.addBtn { |
|
color: #2F8DFF; |
|
|
|
.addButton { |
|
transform: rotate(45deg); |
|
} |
|
} |
|
|
|
} |
|
|
|
// 包件列表 |
|
.packageList { |
|
background: #f5f5f6; |
|
transition: all 0.3s; |
|
overflow: hidden; |
|
|
|
.packageItem { |
|
$inputHeight: 80upx; |
|
|
|
.inputBox { |
|
position: relative; |
|
border-radius: calc($inputHeight / 2); |
|
overflow: hidden; |
|
background: #fff; |
|
|
|
.packageInput { |
|
height: $inputHeight; |
|
padding: 0 40upx; |
|
} |
|
|
|
.scanIcon { |
|
padding: 0 20upx; |
|
// position: absolute; |
|
// right: 40upx; |
|
// top: 50%; |
|
// transform: translateY(-50%); |
|
} |
|
} |
|
} |
|
} |
|
|
|
// 图片列表 |
|
.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; |
|
} |
|
} |
|
|
|
.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.75rem; |
|
|
|
&.subColor { |
|
background-color: var(--subjectColor); |
|
color: #fff; |
|
} |
|
} |
|
</style> |