18 changed files with 2240 additions and 1617 deletions
@ -0,0 +1,52 @@
|
||||
<template> |
||||
<!-- 蒙层 --> |
||||
<view v-if="modelValue" @click="modelValue = false" class="mask flex-c-c" @touchmove.stop> |
||||
<image :src="props.imgUrl" mode="widthFix"></image> |
||||
</view> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { defineProps, defineEmits, computed } from 'vue'; |
||||
|
||||
const props = defineProps({ |
||||
// 是否显示 |
||||
modelValue: { |
||||
type: Boolean, |
||||
requird: true |
||||
}, |
||||
// 图片地址 |
||||
imgUrl: { |
||||
type: String, |
||||
requird: true |
||||
} |
||||
}) |
||||
|
||||
const $emit = defineEmits(['update:modelValue']) |
||||
|
||||
const modelValue = computed({ |
||||
get() { |
||||
return props.modelValue |
||||
}, |
||||
set(value) { |
||||
$emit('update:modelValue', value) |
||||
} |
||||
}) |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import url(@/utils/style/common.scss); |
||||
|
||||
.mask { |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
z-index: 99999; |
||||
background-color: rgba(0, 0, 0, 0.6); |
||||
width: 100vw; |
||||
height: 100vh; |
||||
|
||||
image { |
||||
width: 100%; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,488 @@
|
||||
<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" @click="details.popUpObj.afterSalesType = true"> |
||||
<view class=""> |
||||
到 货 信 息 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- 行 -- 售后类型 --> |
||||
<view class="info_item border_bottom"> |
||||
<view class="info_item_title flex-c-sb" @click="details.popUpObj.afterSalesType = true"> |
||||
<view class=""> |
||||
到 货 状 态 |
||||
</view> |
||||
|
||||
<view> |
||||
<text class="mr10 fwn info"> |
||||
{{ installSales.status >= 3? '已到货':'未到货' }} |
||||
</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="details.packageList[index]" 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> |
||||
|
||||
<MyDrawer ref="myDrawer"> |
||||
<template #content> |
||||
<picker-view v-if="details.visible" :indicator-style="details.indicatorStyle" :immediate-change="true" |
||||
:value="details.value" @change="bindChange" class="picker-view"> |
||||
<picker-view-column> |
||||
<view class="item" v-for="(item, index) in details.pickerArr" :key="index"> |
||||
{{ item.label }} |
||||
</view> |
||||
</picker-view-column> |
||||
</picker-view> |
||||
</template> |
||||
</MyDrawer> |
||||
</view> |
||||
<tips ref="tip" /> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { |
||||
postInstallAfterUpdate, |
||||
postCenterInstallSalesTheArrival |
||||
} from '@/api/user.js' |
||||
import { |
||||
onLoad, |
||||
onShow, |
||||
onHide, |
||||
} from '@dcloudio/uni-app' |
||||
import { nextTick, reactive, ref, toRefs, computed, defineExpose } from "vue"; |
||||
import utils from '@/utils/utils.js' |
||||
import type { PropType } from 'vue'; |
||||
|
||||
|
||||
// 组件配置 |
||||
const option = reactive({ |
||||
// 标题 |
||||
title: '确认到货', |
||||
// 下拉刷新回调函数 |
||||
async pullDownRefreshInitPage() { |
||||
return null |
||||
}, |
||||
// 触底加载回到函数 |
||||
reachBottomInitPage: async () => { |
||||
return null |
||||
}, |
||||
haveData: true, |
||||
isEnd: false, |
||||
pageLoading: false, |
||||
haveReachBottom: false |
||||
}) |
||||
|
||||
|
||||
const props = defineProps({ |
||||
/** 页面路由数据 */ |
||||
pageInfo: { |
||||
type: Object as PropType<Object>, |
||||
required: true, |
||||
}, |
||||
/** 页面数据 */ |
||||
info: { |
||||
type: Object as PropType<Object>, |
||||
required: true, |
||||
}, |
||||
/** 开启loading */ |
||||
handleSetLoading: { |
||||
type: Function as PropType<Function>, |
||||
required: true |
||||
}, |
||||
/** 刷新数据 */ |
||||
handleRefresh: { |
||||
type: Function as PropType<Function>, |
||||
required: true |
||||
}, |
||||
/** */ |
||||
}) |
||||
|
||||
const pageInfo = computed(() => { |
||||
console.log('props.pageInfo :>> ', props.pageInfo); |
||||
|
||||
if (props.pageInfo) return props.pageInfo |
||||
else return {} |
||||
}) |
||||
|
||||
const installSales = computed(() => { |
||||
console.log('props.info :>> ', props.info); |
||||
|
||||
if (props.info && props.info.installSales) return props.info.installSales |
||||
else return {} |
||||
}) |
||||
|
||||
|
||||
|
||||
const myDrawer = ref() |
||||
const tip = ref() |
||||
|
||||
|
||||
let details = reactive({ |
||||
/** 主页面高度 */ |
||||
scrollheight: '80vh', |
||||
/** 表单数据 */ |
||||
form: { |
||||
type: '', |
||||
typeName: '', |
||||
/** 备注 */ |
||||
remark: '' |
||||
}, |
||||
/** 售后包件列表 */ |
||||
packageList: [], |
||||
/** 售后图片列表 */ |
||||
imgList: [], |
||||
/** 扫描码值 */ |
||||
scancode: '', |
||||
/** 是否显示弹窗 */ |
||||
popUpObj: { |
||||
/** 异常类型 */ |
||||
afterSalesType: false |
||||
}, |
||||
/** picker行高度 */ |
||||
indicatorStyle: `height: 40px;`, |
||||
visible: false, |
||||
value: [0], |
||||
pickerArr: [ |
||||
{ |
||||
label: '调试', |
||||
value: '1' |
||||
}, |
||||
{ |
||||
label: '维修', |
||||
value: '2' |
||||
}, |
||||
{ |
||||
label: '理赔', |
||||
value: '3' |
||||
}, |
||||
{ |
||||
label: '待确认', |
||||
value: '4' |
||||
}, { |
||||
label: '换货', |
||||
value: '5' |
||||
}, |
||||
{ |
||||
label: '工厂补单', |
||||
value: '6' |
||||
}, |
||||
|
||||
], |
||||
/** 页面信息 */ |
||||
pageInfo: { |
||||
id: '' |
||||
} |
||||
}) |
||||
|
||||
onLoad((e) => { |
||||
details.pageInfo.id = e.id |
||||
}) |
||||
|
||||
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' |
||||
}) |
||||
|
||||
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] |
||||
|
||||
if (value === res.result) return utils.handleToast('码值已存在') |
||||
} |
||||
|
||||
value = res.result |
||||
// scandata() |
||||
} |
||||
}) |
||||
return |
||||
// #endif |
||||
} |
||||
|
||||
/** 新增售后包件 */ |
||||
const handleAddPackage = () => { |
||||
details.packageList.push('') |
||||
} |
||||
|
||||
/** 删除售后包件 */ |
||||
const handleRemovePackage = (index : number) => { |
||||
details.packageList.splice(index, 1) |
||||
} |
||||
|
||||
/** picker切换时执行 */ |
||||
const bindChange = function (e, type) { |
||||
console.log('type :>> ', type); |
||||
console.log('e :>> ', e); |
||||
|
||||
details.value = e.detail.value |
||||
|
||||
} |
||||
|
||||
/** 到货 */ |
||||
const handleArrivalNotice = () => { |
||||
// postCenterInstallSalesTheArrival |
||||
console.log('details.packageList :>> ', details.packageList); |
||||
|
||||
tip.value.setdetails({ |
||||
isshow: true, |
||||
content: '确认到货', |
||||
cancelTxt: '部分到货', |
||||
confirmTxt: '确认到货', |
||||
async success() { |
||||
try { |
||||
props.handleSetLoading(true) |
||||
|
||||
const submitData = { |
||||
install_sales_id: pageInfo.value.id, |
||||
status: 0, |
||||
packages: details.packageList.filter(val => val) |
||||
} |
||||
|
||||
const res = await postCenterInstallSalesTheArrival(submitData) |
||||
|
||||
const { code, data } = res |
||||
|
||||
if (code !== 200) return |
||||
props.handleRefresh() |
||||
|
||||
} catch (err) { |
||||
console.log('err :>> ', err); |
||||
//TODO handle the exception |
||||
} finally { |
||||
props.handleSetLoading(false) |
||||
// 关闭弹窗 |
||||
tip.value.setdetails({ isshow: false }) |
||||
|
||||
} |
||||
}, |
||||
cancel() { |
||||
// 关闭弹窗 |
||||
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> |
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue