Skip to content

B
biz-trina5-app
Commit 1c9ee0e7 authored by 贺世双's avatar 贺世双
Browse files
Options

新增

parent b1172282
Hide whitespace changes
Inline Side-by-side
Showing with 3487 additions and 0 deletions
subpkg/bookingConfirm/bookingConfirm.vue 0 → 100644
View file @ 1c9ee0e7
<template>
<view class="bookingConfirm-list content_box">
<view class="bookingConfirm-item">
<bs-customCell label="基础订单号 :" :value="orderList.order_base_no" labelCol="3" wrapCol="6" />
<view class=" flex_sb">
<view style="width: 50%;float: left;">
<bs-customCell label="起运港 :" :value="orderList.port_of_source_location_name" labelCol="4" wrapCol="6" />
</view>
<view style="width: 50%;float: left;">
<bs-customCell label="目的港 :" :value="orderList.port_of_dest_location_name" labelCol="4" wrapCol="8" />
</view>
</view>
<!-- 基本信息 -->
<view class="module-title flex">
<text class="font_bolder">订舱信息</text>
</view>
<!-- 注册内容 -->
<u--form :model="formData" :rules="rules" ref="myForm" errorType='none'>
<view class="basic-info">
<u-form-item prop="event_date" required label="订舱确认时间" labelWidth="35%" borderBottom>
<view @click="onVisibleDate('event_date')">
<u-input :disabledColor="'#ffffff'" disabled border="none" readonly placeholder="请选择确认时间"
:value="convertTime(formData.event_date)" />
</view>
</u-form-item>
<u-form-item prop="shipowner" required label="船公司" labelWidth="25%" borderBottom>
<view @click="showProcess">
<u-input border="none" readonly placeholder="请选择船公司" :value="viewEnums[formData.shipowner]" />
</view>
</u-form-item>
<u-form-item prop="m_vsl_voy" required label="船名船次" labelWidth="25%" borderBottom>
<u-input :disabledColor="'#ffffff'" border="none" v-model="formData.m_vsl_voy" />
</u-form-item>
<u-form-item prop="f_vsl_voy" label="驳船船名船次" labelWidth="35%" borderBottom>
<u-input :disabledColor="'#ffffff'" border="none" v-model="formData.f_vsl_voy" />
</u-form-item>
<u-form-item prop="bl_no" required label="提单号" labelWidth="25%" borderBottom>
<u-input :disabledColor="'#ffffff'" border="none" v-model="formData.bl_no" />
</u-form-item>
<u-form-item prop="booking_no" required label="订舱号" labelWidth="25%" borderBottom>
<u-input :disabledColor="'#ffffff'" border="none" v-model="formData.booking_no" />
</u-form-item>
<u-form-item prop="etd" required label="预计开船时间" labelWidth="35%" borderBottom>
<view @click="onVisibleDate('etd')">
<u-input :disabledColor="'#ffffff'" disabled border="none" readonly placeholder="请选择开船时间"
:value="convertTime(formData.etd)" />
</view>
</u-form-item>
<u-form-item prop="destination_port_free_date" required label="目的港免箱期" labelWidth="35%" borderBottom>
<u-input :disabledColor="'#ffffff'" border="none" v-model="formData.destination_port_free_date" />
</u-form-item>
<u-form-item prop="destination_port_free_date2" label="目的港免堆期" labelWidth="35%" borderBottom>
<u-input :disabledColor="'#ffffff'" border="none" v-model="formData.destination_port_free_date2" />
</u-form-item>
<u-form-item prop="estimated_pack_time" required label="预计装箱时间" labelWidth="35%" borderBottom>
<view @click="onVisibleDate('estimated_pack_time')">
<u-input :disabledColor="'#ffffff'" disabled border="none" readonly placeholder="请选择装箱时间"
:value="convertTime(formData.estimated_pack_time)" />
</view>
</u-form-item>
<u-form-item prop="eta" required label="预计到港时间" labelWidth="35%" borderBottom>
<view @click="onVisibleDate('eta')">
<u-input :disabledColor="'#ffffff'" disabled border="none" readonly placeholder="请选择到港时间"
:value="convertTime(formData.eta)" />
</view>
</u-form-item>
<u-form-item prop="epo" label="预计开港时间" labelWidth="35%" borderBottom>
<view @click="onVisibleDate('epo')">
<u-input :disabledColor="'#ffffff'" disabled border="none" readonly placeholder="请选择开港时间"
:value="convertTime(formData.epo)" />
</view>
</u-form-item>
<u-form-item prop="epc" label="预计截港时间" labelWidth="35%" borderBottom>
<view @click="onVisibleDate('epc')">
<u-input :disabledColor="'#ffffff'" disabled border="none" readonly placeholder="请选择截港时间"
:value="convertTime(formData.epc)" />
</view>
</u-form-item>
<u-form-item prop="f_etd" label="驳船ETD" labelWidth="25%" borderBottom>
<view @click="onVisibleDate('f_etd')">
<u-input :disabledColor="'#ffffff'" disabled border="none" readonly placeholder="请选择驳船ETD"
:value="convertTime(formData.f_etd)" />
</view>
</u-form-item>
<u-form-item prop="f_eta" label="驳船ETA" labelWidth="25%" borderBottom>
<view @click="onVisibleDate('f_eta')">
<u-input :disabledColor="'#ffffff'" disabled border="none" readonly placeholder="请选择驳船ETA"
:value="convertTime(formData.f_eta)" />
</view>
</u-form-item>
<u-form-item prop="multimodal_transport" label="拖车运输方式" labelWidth="35%" borderBottom>
<view @click="onVisible('multimodal_transport')">
<u-input border="none" readonly placeholder="请选择运输方式" :value="genderViewEnums[formData.multimodal_transport]" />
</view>
</u-form-item>
<u-form-item prop="remark" label="备注" labelWidth="25%" borderBottom>
<u-input :disabledColor="'#ffffff'" border="none" v-model="formData.remark" />
</u-form-item>
</view>
</u--form>
<!--查询区域-->
<u-popup :show="visible" @close="closeProcess">
<view class="select-container">
<view class="search-input flex_center">
<u-search searchIconSize="50" searchIconColor="#FFFFFF" placeholderColor='#757575' color="#606266"
:showAction="false" :placeholder="placeholder" v-model="searchValue" @clickIcon="onSearch" @search="onSearch" @clear="onSearchclear" />
</view>
<scroll-view scroll-y class="select-list">
<u-radio-group v-model="currentChecked" placement="column" iconPlacement="right">
<u-radio :customStyle="{margin: '22rpx 40rpx'}" :size="40" :iconSize="32" :labelSize="32"
labelColor="#262626" v-for="(item, index) in selectEnum" :key="index" :label="item.label"
:name="item.value" @change="onSelect(item.value)">
</u-radio>
</u-radio-group>
</scroll-view>
</view>
</u-popup>
</view>
<!-- 底部按钮 -->
<view class="operation-btn flex_sb">
<button class="backBtn common_btn" @click="onNavBack">返回</button>
<button class="submitBtn common_btn" @click="onSubmitForm">确认</button>
</view>
<!-- 类型选择动作面板 -->
<bs-selectPopup :popTitle="popTitle" :selectEnum="optionEnums" :visible="visible2" @onVisible="onVisible"
@onConfirm="onConfirmPicker" />
<!-- 时间选择 -->
<bs-datetimePicker ref="myTimePicker" :visible="showPopup" @onVisible="onVisibleDate"
@onSelsectDate="onSelsectDate" />
</view>
</template>
<script>
import {queryShipownerAll, updateTmBlEvent,
OMOrderDetail, OROrderDetail } from '../../api/apiList.js'
export default {
name: 'bookingConfirm',
options: { styleIsolation: 'shared' },
data() {
return {
pageNum: 1, //页码
pageSize: 10, //每页条数
orderList: '', //订单列表,当默认为{}时,小程序会自动转结构
cargoDetails: [], //货量明细
cargoEvents:[],//节点明细
isEmpty: true, //是否为空
rows: [], //当前展开面板
formData: {
event_date: "", //订舱确认时间
shipowner: "", //船公司
m_vsl_voy: "", //船名船次
f_vsl_voy: "", //驳船船名船次
bl_no: "", //提单号
booking_no: '', //订舱号
etd: "",//预计开船时间
destination_port_free_date: "",//目的港免箱期
destination_port_free_date2: "",//目的港免堆期
estimated_pack_time: "",//预计装箱时间
eta: "", //预计到港时间
epo: "", //预计开港日期
epc: "",//预计截港日期
f_etd: "",//驳船ETD
f_eta: "",//驳船ETA
multimodal_transport:"",//拖车运输方式
remark: "",//备注
},
rules: {
'event_date': { required: true },//确认时间
'shipowner': { required: true }, //船公司
'm_vsl_voy': { required: true }, //船名船次
'bl_no': { required: true }, //提单号
'booking_no': { required: true }, //订舱号
'etd': { required: true },//预计开船时间
'destination_port_free_date': { required: true },//目的港免箱期
'estimated_pack_time': { required: true },//预计装箱时间
'eta': { required: true }, //预计到港时间
},
showPopup: false, //时间选择
visibleKey: '', //当前显示字段的key
optionEnums: [], //候选项枚举
popTitle: '', //弹窗标题
visible: false, //类型选择
visible2:false,
viewEnums:[],//船公司枚举视图
genderViewEnums:[],//运输方式枚举
searchValue: "", //搜索值--船公司
selectEnum:[],//接受返回值
currentChecked:'',
placeholder: "请输入搜索船公司", //默认提示
}
},
onLoad(options) {
const data = getApp().globalData.bookingConfirm
const isEmpty = !Object.keys(data).length
this.orderList=data;
this.isEmpty = isEmpty
if (!isEmpty) {
this.activeNames = [data.id]
}
},
methods: {
showProcess() {
this.visible = true
},
// 时间选择
onSelsectDate(dateInfo) {
const {
timestamp
} = dateInfo
this.setFormData(timestamp)
this.showPopup = false
},
//关闭时间选择框
onVisibleDate(type) {
if (type) {
this.visibleKey = type
}
this.showPopup = !this.showPopup
},
// 折叠面板
onChange(values) {
this.activeNames = values
},
//关闭弹出框
closeProcess() {
this.visible = false
this.selectEnum = []
this.searchValue =''
},
//船公司输入查询
onSearch() {
this.pageNum = 1
this.onAreaSuccess()
},
onSelect(value) {
this.currentChecked = value;
this.formData.shipowner = value;
this.visible=false
},
onSearchclear(){
this.selectEnum = []
this.searchValue =''
},
//查询回调
onAreaSuccess() {
const { pageNum, pageSize } = this
let optionEnums = []
var searchValue = this.searchValue
let reqData = {
"args": { pageNum, pageSize }
}
if(this.searchValue){
reqData.args.restrictions = [{
"field": 'code',
"type": "like", //EQ精准匹配，LK模糊匹配
"value": this.searchValue
}]
}
let _this =this;
var setKey = 'viewEnums'
queryShipownerAll(reqData).then(res=>{
uni.stopPullDownRefresh()
optionEnums = res.data.data.datas;
this.setViewEnums(optionEnums, setKey)
_this.selectEnum = optionEnums
})
},
//类型选择
async onVisible(type) {
if (this.visible2) {
this.visible2 = false
} else {
let optionEnums = []
let setKey = 'viewEnums' //要设置的字段Key
if (type == 'multimodal_transport') {
setKey = 'genderViewEnums'
optionEnums = [{ label: '陆改铁含短驳', value: 'land_to_railway' },
{ label: '陆改水含短驳', value: 'land_to_water' },
{ label: '全程拖车', value: 'road' },
{ label: '第六港', value: 'sixth_port' },
{ label: '内装', value: 'interior' }]
} if (type =="shipowner") {
const res = await queryShipownerAll()
optionEnums = res.data.data.datas
}
this.setViewEnums(optionEnums, setKey)
this.optionEnums = optionEnums
this.visibleKey = type
this.visible2 = true
}
},
// 提交表单数据
onSubmitForm() {
const rows = getApp().globalData.bookingConfirm;
this.formData.rows= rows;
this.formData.bl_event_code="booking_confirmed";
var baseData = {
"aux": {
"rows":rows,
"aux":this.formData,
},
}
//订舱委托确认操作
updateTmBlEvent(baseData).then(res => {
if (res.data.data.messageType === 'success') {
uni.showToast({
title: '确认成功！',
duration: 1000
})
setTimeout(() => {
uni.navigateBack()
}, 1500)
}
})
},
//设置显示枚举
setViewEnums(optionEnums, key) {
let viewEnums = {}
optionEnums.map(item => {
viewEnums[item.value] = item.label
})
this[key] = viewEnums
},
//确认选择
onConfirmPicker(value) {
this.setFormData(value)
this.visible = false
this.visible2 = false
},
//页面展示时间戳转换为日期
convertTime(timestamp) {
if (!timestamp) return
const nowDate = new Date(timestamp)
var year = nowDate.getFullYear();
var month = nowDate.getMonth() + 1;
var date = nowDate.getDate();
return `${year}-${ month}-${date}`
},
//设置formData
setFormData(value) {
const key = this.visibleKey
if (key.includes('.')) { //对象特殊处理
const keys = key.split('.')
this.formData[keys[0]][keys[1]] = value
} else {
this.formData[key] = value
}
},
}
}
</script>
<style lang="scss">
.bookingConfirm-list {
.module-title {
margin-top: 20rpx;
//padding: 15rpx 0rpx 16rpx;
//background-color:#a2a2a2;
.vertical-separate {
height: 40rpx;
border-left: 7rpx solid #797979;
margin-right: 20rpx;
}
}
.select-container {
min-width: 70vw;
height: 50vh;
padding: 30rpx;
font-weight: 400;
.popTitle {
color: #8C8C8C;
font-size: 32rpx;
text-align: center;
margin-bottom: 44rpx;
}
.select-list{
height: 460rpx;
}
}
.bookingConfirm-item {
padding: 32rpx;
margin-bottom: 24rpx;
background: #FFFFFF;
.detail-title {
font-size: 28rpx;
padding: 8rpx 0 30rpx;
border-bottom: 1rpx solid #E5E5E5;
.t-icon-order {
width: 50rpx;
height: 50rpx;
margin-right: 20rpx;
}
}
/deep/.custom-cell-row {
margin-top: 10rpx;
.custom-cell-label {
color: #8C8C8C;
}
}
.outer-frame {
margin-top: 32rpx;
border-radius: 16rpx;
border: 2rpx solid #F0F0F0;
overflow: hidden;
.foldPanel-title {
color: #2E75E6;
font-size: 28rpx;
padding-left: 20rpx;
height: 96rpx;
background: rgba(46, 117, 230, .1);
.foldPanel-right-icon {
margin-right: 20rpx;
}
}
/deep/.cargo-detail-table {
background: #FFFFFF;
padding-bottom: 10rpx;
.detail-row-title {
color: #8C8C8C;
background: #FAFAFA;
padding: 20rpx 0;
}
.detail-col-item {
margin: 20rpx;
.cargo-title {
font-size: 28rpx;
padding-left: 20rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
}
.snapshoot image {
margin: 20rpx 15rpx;
width: 140rpx;
height: 140rpx;
}
/deep/.basic-info,
/deep/.driving-license {
padding: 0 10rpx;
background-color: #ffffff;
.input-tip {
font-size: 28rpx;
color: #BFBFBF;
}
.u-form-item__body__left__content__label {
color: #8C8C8C;
font-size: 28rpx;
}
.u-form-item__body {
padding: 25rpx 0;
}
.u-icon {
margin-left: 20rpx;
}
.u-upload__wrap>view {
width: 100%;
}
.previewImages {
width: 100%;
.previewImg {
width: 100% !important;
height: 240rpx !important;
}
}
.uploadeBtn {
width: 100% !important;
height: 240rpx !important;
margin-bottom: 30rpx;
margin-left: 0 !important;
}
.orderTotal {
display: none;
}
}
}
</style>
subpkg/changeShippingDate/changeShippingDate.vue 0 → 100644
View file @ 1c9ee0e7
<template>
<view class="changeShippingDate-list content_box">
<view class="changeShippingDate-item">
<bs-customCell label="基础订单号 :" :value="orderList.order_base_no" labelCol="3" wrapCol="6" />
<view class=" flex_sb">
<view style="width: 50%;float: left;">
<bs-customCell label="起运港 :" :value="orderList.port_of_source_location_name" labelCol="4" wrapCol="6" />
</view>
<view style="width: 50%;float: left;">
<bs-customCell label="目的港 :" :value="orderList.port_of_dest_location_name" labelCol="4" wrapCol="8" />
</view>
</view>
<view class=" flex_sb">
<view style="width: 60%;float: left;">
<bs-customCell label="当前节点 :" :value="orderList.booking_status_label" labelCol="4" wrapCol="6" />
</view>
</view>
<!-- 基本信息 -->
<view class="module-title flex">
<text class="font_bolder">修改船期</text>
</view>
<!-- 注册内容 -->
<u--form :model="formData" :rules="rules" ref="myForm" errorType='none'>
<view class="basic-info">
<u-form-item prop="m_vsl_voy" required label="船名船次" labelWidth="25%" borderBottom>
<u-input :disabledColor="'#ffffff'" border="none" v-model="formData.m_vsl_voy" />
</u-form-item>
<u-form-item prop="f_vsl_voy" label="驳船船名船次" labelWidth="35%" borderBottom>
<u-input :disabledColor="'#ffffff'" border="none" v-model="formData.f_vsl_voy" />
</u-form-item>
<u-form-item prop="bl_no" required label="提单号" labelWidth="25%" borderBottom>
<u-input :disabledColor="'#ffffff'" border="none" v-model="formData.bl_no" />
</u-form-item>
<u-form-item prop="booking_no" required label="托书号/订舱号" labelWidth="35%" borderBottom>
<u-input :disabledColor="'#ffffff'" border="none" v-model="formData.booking_no" />
</u-form-item>
<u-form-item prop="destination_port_free_date2" label="目的港免堆期" labelWidth="35%" borderBottom>
<u-input :disabledColor="'#ffffff'" border="none" v-model="formData.destination_port_free_date2" />
</u-form-item>
<u-form-item prop="early_pickup_date" required label="预计提货时间" labelWidth="35%" borderBottom>
<view @click="onVisibleDate('early_pickup_date')">
<u-input :disabledColor="'#ffffff'" disabled border="none" readonly placeholder="请选择提货时间"
:value="convertTime(formData.early_pickup_date)" />
</view>
</u-form-item>
<u-form-item prop="epo" required label="预计开港时间" labelWidth="35%" borderBottom>
<view @click="onVisibleDate('epo')">
<u-input :disabledColor="'#ffffff'" disabled border="none" readonly placeholder="请选择开港时间"
:value="convertTime(formData.epo)" />
</view>
</u-form-item>
<u-form-item prop="epc" required label="预计截港时间" labelWidth="35%" borderBottom>
<view @click="onVisibleDate('epc')">
<u-input :disabledColor="'#ffffff'" disabled border="none" readonly placeholder="请选择截港时间"
:value="convertTime(formData.epc)" />
</view>
</u-form-item>
<u-form-item prop="etd" required label="预计开船时间" labelWidth="35%" borderBottom>
<view @click="onVisibleDate('etd')">
<u-input :disabledColor="'#ffffff'" disabled border="none" readonly placeholder="请选择开船时间"
:value="convertTime(formData.etd)" />
</view>
</u-form-item>
<u-form-item prop="eta" required label="预计到港时间" labelWidth="35%" borderBottom>
<view @click="onVisibleDate('eta')">
<u-input :disabledColor="'#ffffff'" disabled border="none" readonly placeholder="请选择到港时间"
:value="convertTime(formData.eta)" />
</view>
</u-form-item>
<u-form-item prop="actual_sail_time" required label="实际开船时间" labelWidth="35%" borderBottom>
<view @click="onVisibleDate('actual_sail_time')">
<u-input :disabledColor="'#ffffff'" disabled border="none" readonly placeholder="请选择实际开船时间"
:value="convertTime(formData.actual_sail_time)" />
</view>
</u-form-item>
<u-form-item prop="f_etd" required label="驳船预计开船时间" labelWidth="35%" borderBottom>
<view @click="onVisibleDate('f_etd')">
<u-input :disabledColor="'#ffffff'" disabled border="none" readonly placeholder="请选择驳船开船时间"
:value="convertTime(formData.f_etd)" />
</view>
</u-form-item>
<u-form-item prop="f_eta" required label="驳船预计到港时间" labelWidth="35%" borderBottom>
<view @click="onVisibleDate('f_eta')">
<u-input :disabledColor="'#ffffff'" disabled border="none" readonly placeholder="请选择驳船到港时间"
:value="convertTime(formData.f_eta)" />
</view>
</u-form-item>
<u-form-item prop="f_atd" required label="驳船实际开船时间" labelWidth="35%" borderBottom>
<view @click="onVisibleDate('f_atd')">
<u-input :disabledColor="'#ffffff'" disabled border="none" readonly placeholder="请选择驳船实际开船时间"
:value="convertTime(formData.f_atd)" />
</view>
</u-form-item>
</view>
</u--form>
<!--查询区域-->
<u-popup :show="visible" @close="closeProcess">
<view class="select-container">
<view class="search-input flex_center">
<u-search searchIconSize="50" searchIconColor="#FFFFFF" placeholderColor='#757575' color="#606266"
:showAction="false" :placeholder="placeholder" v-model="searchValue" @clickIcon="onSearch" @search="onSearch" @clear="onSearchclear" />
</view>
<scroll-view scroll-y class="select-list">
<u-radio-group v-model="currentChecked" placement="column" iconPlacement="right">
<u-radio :customStyle="{margin: '22rpx 40rpx'}" :size="40" :iconSize="32" :labelSize="32"
labelColor="#262626" v-for="(item, index) in selectEnum" :key="index" :label="item.label"
:name="item.value" @change="onSelect(item.value)">
</u-radio>
</u-radio-group>
</scroll-view>
</view>
</u-popup>
</view>
<!-- 底部按钮 -->
<view class="operation-btn flex_sb">
<button class="backBtn common_btn" @click="onNavBack">返回</button>
<button class="submitBtn common_btn" @click="onSubmitForm">确认</button>
</view>
<!-- 类型选择动作面板 -->
<bs-selectPopup :popTitle="popTitle" :selectEnum="optionEnums" :visible="visible2" @onVisible="onVisible"
@onConfirm="onConfirmPicker" />
<!-- 时间选择 -->
<bs-datetimePicker ref="myTimePicker" :visible="showPopup" @onVisible="onVisibleDate"
@onSelsectDate="onSelsectDate" />
</view>
</template>
<script>
import {queryShipownerAll, changeShippingDateSubmit } from '../../api/apiList.js'
export default {
name: 'changeShippingDate',
options: { styleIsolation: 'shared' },
data() {
return {
pageNum: 1, //页码
pageSize: 10, //每页条数
orderList: '', //订单列表,当默认为{}时,小程序会自动转结构
cargoDetails: [], //货量明细
cargoEvents:[],//节点明细
isEmpty: true, //是否为空
rows: [], //当前展开面板
formData: {
m_vsl_voy: "", //船名船次
f_vsl_voy: "", //驳船船名船次
bl_no: "", //提单号
booking_no: '', //订舱号
early_pickup_date:"",//提货时间
etd: "",//预计开船时间
destination_port_free_date: "",//目的港免箱期
destination_port_free_date2: "",//目的港免堆期
estimated_pack_time: "",//预计装箱时间
eta: "", //预计到港时间
epo: "", //预计开港日期
epc: "",//预计截港日期
actual_sail_time:"",//实绩开船时间
f_etd: "",//驳船预计开船时间
f_eta: "",//驳船预计到港时间
f_atd:"",//驳船实际开船时间
},
rules: {
'event_date': { required: true },//确认时间
'shipowner': { required: true }, //船公司
'm_vsl_voy': { required: true }, //船名船次
'bl_no': { required: true }, //提单号
'booking_no': { required: true }, //订舱号
'etd': { required: true },//预计开船时间
'destination_port_free_date': { required: true },//目的港免箱期
'estimated_pack_time': { required: true },//预计装箱时间
'eta': { required: true }, //预计到港时间
},
showPopup: false, //时间选择
visibleKey: '', //当前显示字段的key
optionEnums: [], //候选项枚举
popTitle: '', //弹窗标题
visible: false, //类型选择
visible2:false,
viewEnums:[],//船公司枚举视图
genderViewEnums:[],//运输方式枚举
searchValue: "", //搜索值--船公司
selectEnum:[],//接受返回值
currentChecked:'',
placeholder: "请输入搜索船公司", //默认提示
}
},
onLoad(options) {
const data = getApp().globalData.changeShippingDate
const isEmpty = !Object.keys(data).length
this.orderList=data;
this.formData.m_vsl_voy = data.m_vsl_voy
this.formData.f_vsl_voy = data.m_vsl_voy
this.formData.bl_no = data.bl_no
this.formData.booking_no = data.booking_no
this.formData.destination_port_free_date2 = data.destination_port_free_date2
this.formData.early_pickup_date = data.early_pickup_date
this.formData.epo = data.epo
this.formData.epc = data.epc
this.formData.eta = data.eta
this.formData.etd = data.etd
this.formData.actual_sail_time = data.actual_sail_time
this.formData.f_etd = data.f_etd
this.formData.f_eta = data.f_eta
this.formData.f_atd = data.f_atd
},
methods: {
showProcess() {
this.visible = true
},
// 时间选择
onSelsectDate(dateInfo) {
const {
timestamp
} = dateInfo
this.setFormData(timestamp)
this.showPopup = false
},
//关闭时间选择框
onVisibleDate(type) {
if (type) {
this.visibleKey = type
}
this.showPopup = !this.showPopup
},
// 折叠面板
onChange(values) {
this.activeNames = values
},
//关闭弹出框
closeProcess() {
this.visible = false
this.selectEnum = []
this.searchValue =''
},
//船公司输入查询
onSearch() {
this.pageNum = 1
this.onAreaSuccess()
},
onSelect(value) {
this.currentChecked = value;
this.formData.shipowner = value;
this.visible=false
},
onSearchclear(){
this.selectEnum = []
this.searchValue =''
},
//查询回调
onAreaSuccess() {
const { pageNum, pageSize } = this
let optionEnums = []
var searchValue = this.searchValue
let reqData = {
"args": { pageNum, pageSize }
}
if(this.searchValue){
reqData.args.restrictions = [{
"field": 'code',
"type": "like", //EQ精准匹配，LK模糊匹配
"value": this.searchValue
}]
}
let _this =this;
var setKey = 'viewEnums'
queryShipownerAll(reqData).then(res=>{
uni.stopPullDownRefresh()
optionEnums = res.data.data.datas;
this.setViewEnums(optionEnums, setKey)
_this.selectEnum = optionEnums
})
},
//类型选择
async onVisible(type) {
if (this.visible2) {
this.visible2 = false
} else {
let optionEnums = []
let setKey = 'viewEnums' //要设置的字段Key
if (type == 'multimodal_transport') {
setKey = 'genderViewEnums'
optionEnums = [{ label: '陆改铁含短驳', value: 'land_to_railway' },
{ label: '陆改水含短驳', value: 'land_to_water' },
{ label: '全程拖车', value: 'road' },
{ label: '第六港', value: 'sixth_port' },
{ label: '内装', value: 'interior' }]
} if (type =="shipowner") {
const res = await queryShipownerAll()
optionEnums = res.data.data.datas
}
this.setViewEnums(optionEnums, setKey)
this.optionEnums = optionEnums
this.visibleKey = type
this.visible2 = true
}
},
// 提交表单数据
onSubmitForm() {
const rows = getApp().globalData.changeShippingDate;
this.formData.rows= rows;
var baseData = {
"aux": {
"rows":rows,
"changeShippingDate":this.formData,
},
}
//修改船期操作
changeShippingDateSubmit(baseData).then(res => {
if (res.data.data.messageType === 'success') {
uni.showToast({
title: '修改成功！',
duration: 1000
})
setTimeout(() => {
uni.navigateBack()
}, 1500)
}
})
},
//设置显示枚举
setViewEnums(optionEnums, key) {
let viewEnums = {}
optionEnums.map(item => {
viewEnums[item.value] = item.label
})
this[key] = viewEnums
},
//确认选择
onConfirmPicker(value) {
this.setFormData(value)
this.visible = false
this.visible2 = false
},
//页面展示时间戳转换为日期
convertTime(timestamp) {
if (!timestamp) return
const nowDate = new Date(timestamp)
var year = nowDate.getFullYear();
var month = nowDate.getMonth() + 1;
var date = nowDate.getDate();
return `${year}-${ month}-${date}`
},
//设置formData
setFormData(value) {
const key = this.visibleKey
if (key.includes('.')) { //对象特殊处理
const keys = key.split('.')
this.formData[keys[0]][keys[1]] = value
} else {
this.formData[key] = value
}
},
}
}
</script>
<style lang="scss">
.changeShippingDate-list {
.module-title {
margin-top: 20rpx;
//padding: 15rpx 0rpx 16rpx;
//background-color:#a2a2a2;
.vertical-separate {
height: 40rpx;
border-left: 7rpx solid #797979;
margin-right: 20rpx;
}
}
.select-container {
min-width: 70vw;
height: 50vh;
padding: 30rpx;
font-weight: 400;
.popTitle {
color: #8C8C8C;
font-size: 32rpx;
text-align: center;
margin-bottom: 44rpx;
}
.select-list{
height: 460rpx;
}
}
.changeShippingDate-item {
padding: 32rpx;
margin-bottom: 24rpx;
background: #FFFFFF;
.detail-title {
font-size: 28rpx;
padding: 8rpx 0 30rpx;
border-bottom: 1rpx solid #E5E5E5;
.t-icon-order {
width: 50rpx;
height: 50rpx;
margin-right: 20rpx;
}
}
/deep/.custom-cell-row {
margin-top: 10rpx;
.custom-cell-label {
color: #8C8C8C;
}
}
.outer-frame {
margin-top: 32rpx;
border-radius: 16rpx;
border: 2rpx solid #F0F0F0;
overflow: hidden;
.foldPanel-title {
color: #2E75E6;
font-size: 28rpx;
padding-left: 20rpx;
height: 96rpx;
background: rgba(46, 117, 230, .1);
.foldPanel-right-icon {
margin-right: 20rpx;
}
}
/deep/.cargo-detail-table {
background: #FFFFFF;
padding-bottom: 10rpx;
.detail-row-title {
color: #8C8C8C;
background: #FAFAFA;
padding: 20rpx 0;
}
.detail-col-item {
margin: 20rpx;
.cargo-title {
font-size: 28rpx;
padding-left: 20rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
}
.snapshoot image {
margin: 20rpx 15rpx;
width: 140rpx;
height: 140rpx;
}
/deep/.basic-info,
/deep/.driving-license {
padding: 0 10rpx;
background-color: #ffffff;
.input-tip {
font-size: 28rpx;
color: #BFBFBF;
}
.u-form-item__body__left__content__label {
color: #8C8C8C;
font-size: 28rpx;
}
.u-form-item__body {
padding: 25rpx 0;
}
.u-icon {
margin-left: 20rpx;
}
.u-upload__wrap>view {
width: 100%;
}
.previewImages {
width: 100%;
.previewImg {
width: 100% !important;
height: 240rpx !important;
}
}
.uploadeBtn {
width: 100% !important;
height: 240rpx !important;
margin-bottom: 30rpx;
margin-left: 0 !important;
}
.orderTotal {
display: none;
}
}
}
</style>
subpkg/ladingUpload/ladingUpload.vue 0 → 100644
View file @ 1c9ee0e7
<template>
<view class="ladingUpload-list content_box">
<view class="ladingUpload-item">
<bs-customCell label="基础订单号 :" :value="orderList.order_base_no" labelCol="3" wrapCol="6" />
<bs-customCell label="起运港 :" :value="orderList.port_of_source_location_name" labelCol="2.5" wrapCol="6" />
<bs-customCell label="目的港 :" :value="orderList.port_of_dest_location_name" labelCol="2.5" wrapCol="8" />
<bs-customCell label="当前节点 :" :value="orderList.booking_status_label" labelCol="3" wrapCol="6" />
<bs-customCell label="订单类型 :" :value="orderList.order_type_label" labelCol="3" wrapCol="6" />
<!-- 基本信息 -->
<view class="module-title flex">
<text class="font_bolder">提单上传</text>
</view>
<!-- 注册内容 -->
<u--form :model="formData" :rules="rules" ref="myForm" errorType='none'>
<view class="basic-info">
<u-form-item prop="on_board_time" required label="On board日期" labelWidth="35%" borderBottom>
<view @click="onVisibleDate('on_board_time')">
<u-input :disabledColor="'#ffffff'" disabled border="none" readonly placeholder="请选择On board日期"
:value="convertTime(formData.on_board_time)" />
</view>
</u-form-item>
</view>
</u--form>
<!-- 上传图片 -->
<view class="uploader-img">
<bs-uploader ref="myUploadImg" :required="requiredStatus"
uploadTitle="上传图片" />
</view>
</view>
<!-- 底部按钮 -->
<view class="operation-btn flex_sb">
<button class="backBtn common_btn" @click="onNavBack">返回</button>
<button class="submitBtn common_btn" @click="onSubmitForm">确认</button>
</view>
<!-- 时间选择 -->
<bs-datetimePicker ref="myTimePicker" :visible="showPopup" @onVisible="onVisibleDate"
@onSelsectDate="onSelsectDate" />
</view>
</template>
<script>
import { getLadingUpload,downloadImg} from '../../api/apiList.js'
export default {
data() {
return {
isMulti: false, //是否分配多辆车, 分配多辆车时支持多选
truckList: [],
currentDriver: '', //单辆车为字符串，多辆车为数组
searchValue: '',
rules: {
'on_board_time': { required: true },//确认时间
},
pageNum: 1, //页码
pageSize: 20, //每页条数
loadMore: true, //加载更多
orderList: '', //订单列表
formData: {
on_board_time: "", //On board 日期
image_group:"",
},
showPopup: false, //时间选择
requiredStatus: true
}
},
//下拉刷新
onPullDownRefresh() {
this.pageNum = 1
this.truckList = []
this.getTruckList()
},
// 触底加载更多
onReachBottom() {
if (this.loadMore) {
this.getTruckList()
this.loadMore = false
}
},
onLoad(option) {
const data = getApp().globalData.ladingUpload
const isEmpty = !Object.keys(data).length
this.orderList=data;
this.formData.on_board_time = data.on_board_time
console.log(data.image_group)
/*if(data.image_group){
const imgInstance = this.$refs.myUploadImg;
const rectifyImages = this.downloadImgs(data.image_group);
imgInstance.fileList = imgInstance.fileList.concat(rectifyImages);
const newDetailiImgs = [];
rectifyImages.map(itemImg =>newDetailiImgs.push({url: itemImg, type: 'image'}))
imgInstance.fileDetailList = imgInstance.fileDetailList.concat(newDetailiImgs)
}*/
},
methods: {
// 时间选择
onSelsectDate(dateInfo) {
const {
timestamp
} = dateInfo
this.setFormData(timestamp)
this.showPopup = false
},
//关闭时间选择框
onVisibleDate(type) {
if (type) {
this.visibleKey = type
}
this.showPopup = !this.showPopup
},
//关闭时间选择框
onVisibleDate(type) {
if (type) {
this.visibleKey = type
}
this.showPopup = !this.showPopup
},
//设置页面头部标题
setNavTitle(title) {
uni.setNavigationBarTitle({ title })
},
// 提交表单数据
onSubmitForm() {
const imgInstance = this.$refs.myUploadImg //获取图片上传实例
const rows = getApp().globalData.ladingUpload;
imgInstance.uploadImage(images => {
this.formData.image_group= images;
this.formData.on_board_time= this.convertTimeHh24(this.formData.on_board_time)
console.log(this.formData)
var baseData = {
"aux": {
"rows":rows,
"ladingUpload":this.formData,
},
}
//提货单上传
getLadingUpload(baseData).then(res => {
if (res.data.data.messageType === 'success') {
uni.showToast({
title: '上传成功！',
duration: 1000
})
setTimeout(() => {
uni.navigateBack()
}, 1500)
}
})
})
},
change(value) {
this.searchValue = value
this.truckList = []
this.pageNum = 1
this.getTruckList()
},
onConfirm() {
const _this = this
const flag = _this.isMulti ? _this.currentDriver.length : _this.currentDriver
if(flag){
let truckInfo = {}
if(_this.isMulti){ //分配多车
const datas = []
_this.currentDriver.map(truckId => {
const info = _this.truckList.find(item => item.id === truckId)
datas.push(info)
})
truckInfo = [...datas]
} else {
truckInfo = _this.truckList.find(item => item.id === _this.currentDriver)
}
uni.$emit('onAddMassAssignTruck', truckInfo)
uni.navigateBack()
} else {
uni.showToast({
title: '请选择车辆',
icon:'none',
duration: 1500
})
}
},
//确认选择
onConfirmPicker(value) {
this.setFormData(value)
this.visible = false
this.visible2 = false
},
//页面展示时间戳转换为日期
convertTime(timestamp) {
if (!timestamp) return
const nowDate = new Date(timestamp)
var year = nowDate.getFullYear();
var month = nowDate.getMonth() + 1;
var date = nowDate.getDate();
return `${year}-${ month}-${date}`
},
//页面展示时间戳转换为年月日时分秒
convertTimeHh24(timestamp) {
if (!timestamp) return
const nowDate = new Date(timestamp)
var year = nowDate.getFullYear();
var month = nowDate.getMonth() < 10 ? '0' + (nowDate.getMonth() + 1) : nowDate.getMonth() + 1;
var date = nowDate.getDate();
return `${year}-${ month}-${date} 00:00:00`
},
//图片下载
downloadImgs(paths) {
const _this = this
const imgPaths = paths.split('|')
imgPaths.map(path => {
downloadImg(path).then(res => {
_this.imgs = _this.imgs.concat(res)
})
})
},
//设置formData
setFormData(value) {
const key = this.visibleKey
if (key.includes('.')) { //对象特殊处理
const keys = key.split('.')
this.formData[keys[0]][keys[1]] = value
} else {
this.formData[key] = value
}
},
}
}
</script>
<style lang="scss">
.ladingUpload-list {
.module-title {
margin-top: 20rpx;
//padding: 15rpx 0rpx 16rpx;
//background-color:#a2a2a2;
.vertical-separate {
height: 40rpx;
border-left: 7rpx solid #797979;
margin-right: 20rpx;
}
}
.ladingUpload-item {
padding: 32rpx;
margin-bottom: 24rpx;
background: #FFFFFF;
.detail-title {
font-size: 28rpx;
padding: 8rpx 0 30rpx;
border-bottom: 1rpx solid #E5E5E5;
.t-icon-order {
width: 50rpx;
height: 50rpx;
margin-right: 20rpx;
}
}
/deep/.custom-cell-row {
margin-top: 10rpx;
.custom-cell-label {
color: #8C8C8C;
}
}
.outer-frame {
margin-top: 32rpx;
border-radius: 16rpx;
border: 2rpx solid #F0F0F0;
overflow: hidden;
.foldPanel-title {
color: #2E75E6;
font-size: 28rpx;
padding-left: 20rpx;
height: 96rpx;
background: rgba(46, 117, 230, .1);
.foldPanel-right-icon {
margin-right: 20rpx;
}
}
/deep/.cargo-detail-table {
background: #FFFFFF;
padding-bottom: 10rpx;
.detail-row-title {
color: #8C8C8C;
background: #FAFAFA;
padding: 20rpx 0;
}
.detail-col-item {
margin: 20rpx;
.cargo-title {
font-size: 28rpx;
padding-left: 20rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
}
.snapshoot image {
margin: 20rpx 15rpx;
width: 140rpx;
height: 140rpx;
}
/deep/.basic-info,
/deep/.driving-license {
padding: 0 10rpx;
background-color: #ffffff;
.input-tip {
font-size: 28rpx;
color: #BFBFBF;
}
.u-form-item__body__left__content__label {
color: #8C8C8C;
font-size: 28rpx;
}
.u-form-item__body {
padding: 25rpx 0;
}
.u-icon {
margin-left: 20rpx;
}
.u-upload__wrap>view {
width: 100%;
}
.previewImages {
width: 100%;
.previewImg {
width: 100% !important;
height: 240rpx !important;
}
}
.uploadeBtn {
width: 100% !important;
height: 240rpx !important;
margin-bottom: 30rpx;
margin-left: 0 !important;
}
.orderTotal {
display: none;
}
}
}
</style>
subpkg/shipmentDispatch/shipmentDispatch.vue 0 → 100644
View file @ 1c9ee0e7
<template>
<view class="shipmentDispatch-list content_box">
<view class="shipmentDispatch-item">
<!-- 基本信息 -->
<view class="module-title flex">
<text class="font_bolder">派车信息</text>
</view>
<!-- 注册内容 -->
<u--form :model="formData" :rules="rules" ref="myForm" errorType='none'>
<view class="basic-info">
<u-form-item prop="truck_id" required label="车牌号" labelWidth="25%" borderBottom>
<view @click="showProcess">
<u-input border="none" readonly placeholder="请选择车牌号" :value="viewEnums[formData.truck_id]" />
</view>
</u-form-item>
<u-form-item prop="driver_id" required label="司机" labelWidth="25%" borderBottom>
<view @click="showProcess1">
<u-input border="none" placeholder="请选择司机" :value="driverViewEnums[formData.driver_id]" />
</view>
</u-form-item>
<u-form-item prop="driver_tel" required label="司机电话" labelWidth="25%" borderBottom>
<u-input :disabledColor="'#ffffff'" placeholder="请输入手机号" border="none" v-model="formData.driver_tel" />
</u-form-item>
<u-form-item prop="early_pickup_date" required label="预计提货时间" labelWidth="35%" borderBottom>
<view @click="onVisibleDate('early_pickup_date')">
<u-input :disabledColor="'#ffffff'" disabled border="none" readonly placeholder="请选择提货时间"
:value="convertTime(formData.early_pickup_date)" />
</view>
</u-form-item>
</view>
</u--form>
<!--查询车牌-->
<u-popup :show="visible" @close="closeProcess">
<view class="select-container">
<view class="search-input flex_center">
<u-search searchIconSize="50" searchIconColor="#FFFFFF" placeholderColor='#757575' color="#606266"
:showAction="false" :placeholder="placeholder" v-model="searchValue" @clickIcon="onSearch" @search="onSearch" @clear="onSearchclear" />
</view>
<scroll-view scroll-y class="select-list">
<u-radio-group v-model="currentChecked" placement="column" iconPlacement="right">
<u-radio :customStyle="{margin: '22rpx 40rpx'}" :size="40" :iconSize="32" :labelSize="32"
labelColor="#262626" v-for="(item, index) in selectEnum" :key="index" :label="item.label"
:name="item.value" @change="onSelect(item)">
</u-radio>
</u-radio-group>
</scroll-view>
</view>
</u-popup>
<!--查询司机电话-->
<u-popup :show="visible1" @close="closeProcess1">
<view class="select-container">
<view class="search-input flex_center">
<u-search searchIconSize="50" searchIconColor="#FFFFFF" placeholderColor='#757575' color="#606266"
:showAction="false" :placeholder="placeholder1" v-model="searchValue1" @clickIcon="onSearch1" @search="onSearch1" @clear="onSearchclear1" />
</view>
<scroll-view scroll-y class="select-list">
<u-radio-group v-model="currentChecked1" placement="column" iconPlacement="right">
<u-radio :customStyle="{margin: '22rpx 40rpx'}" :size="40" :iconSize="32" :labelSize="32"
labelColor="#262626" v-for="(item, index) in selectEnum1" :key="index" :label="item.label"
:name="item.value" @change="onSelect1(item)">
</u-radio>
</u-radio-group>
</scroll-view>
</view>
</u-popup>
</view>
<!-- 底部按钮 -->
<view class="operation-btn flex_sb">
<button class="backBtn common_btn" @click="onNavBack">返回</button>
<button class="submitBtn common_btn" @click="onSubmitForm">确认</button>
</view>
<!-- 时间选择 -->
<bs-datetimePicker ref="myTimePicker" :visible="showPopup" @onVisible="onVisibleDate"
@onSelsectDate="onSelsectDate" />
</view>
</template>
<script>
import {searchTruckList, searchDriverList,
getMassShipmentTruckList} from '../../api/apiList.js'
export default {
name: 'shipmentDispatch',
options: { styleIsolation: 'shared' },
data() {
return {
pageNum: 1, //页码
pageSize: 10, //每页条数
isEmpty: true, //是否为空
rows: [], //当前展开面板
formData: {
truck_id: "", //车牌号
truck_no:"",
driver_id: "", //司机
driver_name:"",
driver_tel: "", //司机电话
early_pickup_date: "", //预计提货时间
},
rules: {
'truck_id': { required: true },//车辆
'driver_id': { required: true }, //司机
'driver_tel': { required: true } //司机电话
},
showPopup: false, //时间选择
visibleKey: '', //当前显示字段的key
optionEnums: [], //候选项枚举
popTitle: '', //弹窗标题
visible: false, //类型选择
visible1: false, //类型选择
visible2:false,
viewEnums:[],//车辆枚举视图
driverViewEnums:[],//司机方式枚举
searchValue: "", //搜索值--车辆
searchValue1: "", //搜索值--司机
selectEnum:[],//接受返回值
selectEnum1:[],//接受返回值
currentChecked:'',
currentChecked1:'',
placeholder: "请输入搜索车牌号", //默认提示
placeholder1: "请输入搜索司机", //默认提示
}
},
onLoad(options) {
const data = getApp().globalData.choose;//勾选的数据
const isEmpty = !Object.keys(data).length
},
methods: {
//弹出车辆
showProcess() {
this.visible = true
},
//弹出司机
showProcess1() {
this.visible1 = true
},
// 时间选择
onSelsectDate(dateInfo) {
const {
timestamp
} = dateInfo
this.setFormData(timestamp)
this.showPopup = false
},
//关闭时间选择框
onVisibleDate(type) {
if (type) {
this.visibleKey = type
}
this.showPopup = !this.showPopup
},
//关闭弹出框车辆
closeProcess() {
this.visible = false
this.selectEnum = []
this.searchValue =''
},
//关闭弹出框司机
closeProcess1() {
this.visible1 = false
this.selectEnum1 = []
this.searchValue1 =''
},
//车辆输入查询
onSearch() {
this.pageNum = 1
this.onAreaSuccess()
},
//司机输入查询
onSearch1() {
this.pageNum = 1
this.onAreaSuccess1()
},
//车辆选择
onSelect(item) {
this.currentChecked = item.value;
this.formData.truck_id = item.value;
this.formData.truck_no = item.label;
this.visible=false
},
//司机选择
onSelect1(item) {
this.currentChecked1 = item.value;
this.formData.driver_id = item.value;
this.formData.driver_name = item.label;
this.formData.driver_tel = item.tel;
this.visible1=false
},
//清除查询车辆
onSearchclear(){
this.selectEnum = []
this.searchValue =''
},
//清除查询司机
onSearchclear1(){
this.selectEnum1 = []
this.searchValue1 =''
},
//查询车辆回调
onAreaSuccess() {
const { pageNum, pageSize } = this
let optionEnums = []
var searchValue = this.searchValue
let reqData = {
"args": { pageNum, pageSize }
}
if(this.searchValue){
reqData.args.restrictions = [{
"field": 'code',
"type": "like", //EQ精准匹配，LK模糊匹配
"value": this.searchValue
}]
}
let _this =this;
var setKey = 'viewEnums'
searchTruckList(reqData).then(res=>{
uni.stopPullDownRefresh()
optionEnums = res.data.data.datas;
this.setViewEnums(optionEnums, setKey)
_this.selectEnum = optionEnums
})
},
//查询司机回调
onAreaSuccess1() {
const { pageNum, pageSize } = this
let optionEnums = []
var searchValue1 = this.searchValue1
let reqData = {
"args": { pageNum, pageSize }
}
if(this.searchValue1){
reqData.args.restrictions = [{
"field": 'name',
"type": "like", //EQ精准匹配，LK模糊匹配
"value": this.searchValue1
}]
}
let _this =this;
var setKey = 'driverViewEnums'
searchDriverList(reqData).then(res=>{
uni.stopPullDownRefresh()
optionEnums = res.data.data.datas;
console.log(optionEnums)
this.setViewEnums(optionEnums, setKey)
_this.selectEnum1 = optionEnums
})
},
// 提交表单数据
onSubmitForm() {
var truck = uni.$u.test.carNo(this.formData.truck_no)
if(!truck){
uni.showToast({
title: "请填写正确的车牌号",
icon: 'none',
duration: 1000
})
}
var driver =uni.$u.test.mobile(this.formData.driver_tel)
if (!driver) {
uni.showToast({
title: "请填写正确的手机号",
icon: 'none',
duration: 1000
})
}
const rows = getApp().globalData.choose;
this.formData.rows= rows;
this.formData.ship_event_code="truck_vehicle_dispatching";//派车接单
this.formData.local_etd= this.convertTimeHh24(this.formData.early_pickup_date)
console.log(this.formData)
var baseData = {
"aux": {
"rows":rows,
"aux":this.formData,
},
}
console.log('派车确认===========')
//派车确认操作
getMassShipmentTruckList(baseData).then(res => {
if (res.data.data.messageType === 'success') {
uni.showToast({
title: '操作成功！',
duration: 1000
})
setTimeout(() => {
uni.navigateBack()
}, 1500)
}
})
},
//设置显示枚举
setViewEnums(optionEnums, key) {
let viewEnums = {}
optionEnums.map(item => {
viewEnums[item.value] = item.label
})
this[key] = viewEnums
},
//确认选择
onConfirmPicker(value) {
this.setFormData(value)
this.visible = false
this.visible1 = false
this.visible2 = false
},
//页面展示时间戳转换为日期
convertTime(timestamp) {
if (!timestamp) return
const nowDate = new Date(timestamp)
var year = nowDate.getFullYear();
var month = nowDate.getMonth() + 1;
var date = nowDate.getDate();
return `${year}-${ month}-${date}`
},
//页面展示时间戳转换为年月日时分秒
convertTimeHh24(timestamp) {
if (!timestamp) return
const nowDate = new Date(timestamp)
var year = nowDate.getFullYear();
var month = nowDate.getMonth() < 10 ? '0' + (nowDate.getMonth() + 1) : nowDate.getMonth() + 1;
var date = nowDate.getDate();
return `${year}-${ month}-${date} 00:00:00`
},
//设置formData
setFormData(value) {
const key = this.visibleKey
if (key.includes('.')) { //对象特殊处理
const keys = key.split('.')
this.formData[keys[0]][keys[1]] = value
} else {
this.formData[key] = value
}
},
}
}
</script>
<style lang="scss">
.shipmentDispatch-list {
.module-title {
margin-top: 20rpx;
//padding: 15rpx 0rpx 16rpx;
//background-color:#a2a2a2;
.vertical-separate {
height: 40rpx;
border-left: 7rpx solid #797979;
margin-right: 20rpx;
}
}
.select-container {
min-width: 70vw;
height: 50vh;
padding: 30rpx;
font-weight: 400;
.popTitle {
color: #8C8C8C;
font-size: 32rpx;
text-align: center;
margin-bottom: 44rpx;
}
.select-list{
height: 460rpx;
}
}
.shipmentDispatch-item {
padding: 32rpx;
margin-bottom: 24rpx;
background: #FFFFFF;
.detail-title {
font-size: 28rpx;
padding: 8rpx 0 30rpx;
border-bottom: 1rpx solid #E5E5E5;
.t-icon-order {
width: 50rpx;
height: 50rpx;
margin-right: 20rpx;
}
}
/deep/.custom-cell-row {
margin-top: 10rpx;
.custom-cell-label {
color: #8C8C8C;
}
}
.outer-frame {
margin-top: 32rpx;
border-radius: 16rpx;
border: 2rpx solid #F0F0F0;
overflow: hidden;
.foldPanel-title {
color: #2E75E6;
font-size: 28rpx;
padding-left: 20rpx;
height: 96rpx;
background: rgba(46, 117, 230, .1);
.foldPanel-right-icon {
margin-right: 20rpx;
}
}
/deep/.cargo-detail-table {
background: #FFFFFF;
padding-bottom: 10rpx;
.detail-row-title {
color: #8C8C8C;
background: #FAFAFA;
padding: 20rpx 0;
}
.detail-col-item {
margin: 20rpx;
.cargo-title {
font-size: 28rpx;
padding-left: 20rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
}
.snapshoot image {
margin: 20rpx 15rpx;
width: 140rpx;
height: 140rpx;
}
/deep/.basic-info,
/deep/.driving-license {
padding: 0 10rpx;
background-color: #ffffff;
.input-tip {
font-size: 28rpx;
color: #BFBFBF;
}
.u-form-item__body__left__content__label {
color: #8C8C8C;
font-size: 28rpx;
}
.u-form-item__body {
padding: 25rpx 0;
}
.u-icon {
margin-left: 20rpx;
}
.u-upload__wrap>view {
width: 100%;
}
.previewImages {
width: 100%;
.previewImg {
width: 100% !important;
height: 240rpx !important;
}
}
.uploadeBtn {
width: 100% !important;
height: 240rpx !important;
margin-bottom: 30rpx;
margin-left: 0 !important;
}
.orderTotal {
display: none;
}
}
}
</style>
uni_modules/uni-popup/changelog.md 0 → 100644
View file @ 1c9ee0e7
## 1.9.1（2024-04-02）
- 修复 uni-popup-dialog vue3下使用value无法进行绑定的bug(双向绑定兼容旧写法)
## 1.9.0（2024-03-28）
- 修复 uni-popup-dialog 双向绑定时初始化逻辑修正
## 1.8.9（2024-03-20）
- 修复 uni-popup-dialog 数据输入时修正为双向绑定
## 1.8.8（2024-02-20）
- 修复 uni-popup 在微信小程序下出现文字向上闪动的bug
## 1.8.7（2024-02-02）
- 新增 uni-popup-dialog 新增属性focus：input模式下，是否自动自动聚焦
## 1.8.6（2024-01-30）
- 新增 uni-popup-dialog 新增属性maxLength:限制输入框字数
## 1.8.5（2024-01-26）
- 新增 uni-popup-dialog 新增属性showClose:控制关闭按钮的显示
## 1.8.4（2023-11-15）
- 新增 uni-popup 支持uni-app-x 注意暂时仅支持 `maskClick` `@open` `@close`
## 1.8.3（2023-04-17）
- 修复 uni-popup 重复打开时的 bug
## 1.8.2（2023-02-02）
- uni-popup-dialog 组件新增 inputType 属性
## 1.8.1（2022-12-01）
- 修复 nvue 下 v-show 报错
## 1.8.0（2022-11-29）
- 优化 主题样式
## 1.7.9（2022-04-02）
- 修复 弹出层内部无法滚动的bug
## 1.7.8（2022-03-28）
- 修复 小程序中高度错误的bug
## 1.7.7（2022-03-17）
- 修复 快速调用open出现问题的Bug
## 1.7.6（2022-02-14）
- 修复 safeArea 属性不能设置为false的bug
## 1.7.5（2022-01-19）
- 修复 isMaskClick 失效的bug
## 1.7.4（2022-01-19）
- 新增 cancelText \ confirmText 属性 ，可自定义文本
- 新增 maskBackgroundColor 属性 ，可以修改蒙版颜色
- 优化 maskClick属性 更新为 isMaskClick ，解决微信小程序警告的问题
## 1.7.3（2022-01-13）
- 修复 设置 safeArea 属性不生效的bug
## 1.7.2（2021-11-26）
- 优化 组件示例
## 1.7.1（2021-11-26）
- 修复 vuedoc 文字错误
## 1.7.0（2021-11-19）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-popup](https://uniapp.dcloud.io/component/uniui/uni-popup)
## 1.6.2（2021-08-24）
- 新增 支持国际化
## 1.6.1（2021-07-30）
- 优化 vue3下事件警告的问题
## 1.6.0（2021-07-13）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.5.0（2021-06-23）
- 新增 mask-click 遮罩层点击事件
## 1.4.5（2021-06-22）
- 修复 nvue 平台中间弹出后，点击内容，再点击遮罩无法关闭的Bug
## 1.4.4（2021-06-18）
- 修复 H5平台中间弹出后，点击内容，再点击遮罩无法关闭的Bug
## 1.4.3（2021-06-08）
- 修复 错误的 watch 字段
- 修复 safeArea 属性不生效的问题
- 修复 点击内容，再点击遮罩无法关闭的Bug
## 1.4.2（2021-05-12）
- 新增 组件示例地址
## 1.4.1（2021-04-29）
- 修复 组件内放置 input 、textarea 组件，无法聚焦的问题
## 1.4.0 （2021-04-29）
- 新增 type 属性的 left\right 值，支持左右弹出
- 新增 open(String:type) 方法参数 ，可以省略 type 属性 ，直接传入类型打开指定弹窗
- 新增 backgroundColor 属性，可定义主窗口背景色,默认不显示背景色
- 新增 safeArea 属性，是否适配底部安全区
- 修复 App\h5\微信小程序底部安全区占位不对的Bug
- 修复 App 端弹出等待的Bug
- 优化 提升低配设备性能，优化动画卡顿问题
- 优化 更简单的组件自定义方式
## 1.2.9（2021-02-05）
- 优化 组件引用关系，通过uni_modules引用组件
## 1.2.8（2021-02-05）
- 调整为uni_modules目录规范
## 1.2.7（2021-02-05）
- 调整为uni_modules目录规范
- 新增 支持 PC 端
- 新增 uni-popup-message 、uni-popup-dialog扩展组件支持 PC 端
uni_modules/uni-popup/components/uni-popup-dialog/keypress.js 0 → 100644
View file @ 1c9ee0e7
// #ifdef H5
export default {
name: 'Keypress',
props: {
disable: {
type: Boolean,
default: false
}
},
mounted () {
const keyNames = {
esc: ['Esc', 'Escape'],
tab: 'Tab',
enter: 'Enter',
space: [' ', 'Spacebar'],
up: ['Up', 'ArrowUp'],
left: ['Left', 'ArrowLeft'],
right: ['Right', 'ArrowRight'],
down: ['Down', 'ArrowDown'],
delete: ['Backspace', 'Delete', 'Del']
}
const listener = ($event) => {
if (this.disable) {
return
}
const keyName = Object.keys(keyNames).find(key => {
const keyName = $event.key
const value = keyNames[key]
return value === keyName || (Array.isArray(value) && value.includes(keyName))
})
if (keyName) {
// 避免和其他按键事件冲突
setTimeout(() => {
this.$emit(keyName, {})
}, 0)
}
}
document.addEventListener('keyup', listener)
this.$once('hook:beforeDestroy', () => {
document.removeEventListener('keyup', listener)
})
},
render: () => {}
}
// #endif
uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue 0 → 100644
View file @ 1c9ee0e7
<template>
<view class="uni-popup-dialog">
<view class="uni-dialog-title">
<text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{titleText}}</text>
</view>
<view v-if="mode === 'base'" class="uni-dialog-content">
<slot>
<text class="uni-dialog-content-text">{{content}}</text>
</slot>
</view>
<view v-else class="uni-dialog-content">
<slot>
<input class="uni-dialog-input" :maxlength="maxlength" v-model="val" :type="inputType"
:placeholder="placeholderText" :focus="focus">
</slot>
</view>
<view class="uni-dialog-button-group">
<view class="uni-dialog-button" v-if="showClose" @click="closeDialog">
<text class="uni-dialog-button-text">{{closeText}}</text>
</view>
<view class="uni-dialog-button" :class="showClose?'uni-border-left':''" @click="onOk">
<text class="uni-dialog-button-text uni-button-color">{{okText}}</text>
</view>
</view>
</view>
</template>
<script>
import popup from '../uni-popup/popup.js'
import {
initVueI18n
} from '@dcloudio/uni-i18n'
import messages from '../uni-popup/i18n/index.js'
const {
t
} = initVueI18n(messages)
/**
* PopUp 弹出层-对话框样式
* @description 弹出层-对话框样式
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
* @property {String} value input 模式下的默认值
* @property {String} placeholder input 模式下输入提示
* @property {Boolean} focus input模式下是否自动聚焦，默认为true
* @property {String} type = [success|warning|info|error] 主题样式
* @value success 成功
* @value warning 提示
* @value info 消息
* @value error 错误
* @property {String} mode = [base|input] 模式、
* @value base 基础对话框
* @value input 可输入对话框
* @showClose {Boolean} 是否显示关闭按钮
* @property {String} content 对话框内容
* @property {Boolean} beforeClose 是否拦截取消事件
* @property {Number} maxlength 输入
* @event {Function} confirm 点击确认按钮触发
* @event {Function} close 点击取消按钮触发
*/
export default {
name: "uniPopupDialog",
mixins: [popup],
emits: ['confirm', 'close', 'update:modelValue', 'input'],
props: {
inputType: {
type: String,
default: 'text'
},
showClose: {
type: Boolean,
default: true
},
// #ifdef VUE2
value: {
type: [String, Number],
default: ''
},
// #endif
// #ifdef VUE3
modelValue: {
type: [Number, String],
default: ''
},
// #endif
placeholder: {
type: [String, Number],
default: ''
},
type: {
type: String,
default: 'error'
},
mode: {
type: String,
default: 'base'
},
title: {
type: String,
default: ''
},
content: {
type: String,
default: ''
},
beforeClose: {
type: Boolean,
default: false
},
cancelText: {
type: String,
default: ''
},
confirmText: {
type: String,
default: ''
},
maxlength: {
type: Number,
default: -1,
},
focus: {
type: Boolean,
default: true,
}
},
data() {
return {
dialogType: 'error',
val: ""
}
},
computed: {
okText() {
return this.confirmText || t("uni-popup.ok")
},
closeText() {
return this.cancelText || t("uni-popup.cancel")
},
placeholderText() {
return this.placeholder || t("uni-popup.placeholder")
},
titleText() {
return this.title || t("uni-popup.title")
}
},
watch: {
type(val) {
this.dialogType = val
},
mode(val) {
if (val === 'input') {
this.dialogType = 'info'
}
},
value(val) {
if (this.maxlength != -1 && this.mode === 'input') {
this.val = val.slice(0, this.maxlength);
} else {
this.val = val
}
},
val(val) {
// #ifdef VUE2
// TODO 兼容 vue2
this.$emit('input', val);
// #endif
// #ifdef VUE3
// TODO　兼容　vue3
this.$emit('update:modelValue', val);
// #endif
}
},
created() {
// 对话框遮罩不可点击
this.popup.disableMask()
// this.popup.closeMask()
if (this.mode === 'input') {
this.dialogType = 'info'
this.val = this.value;
// #ifdef VUE3
this.val = this.modelValue;
// #endif
} else {
this.dialogType = this.type
}
},
methods: {
/**
* 点击确认按钮
*/
onOk() {
if (this.mode === 'input') {
this.$emit('confirm', this.val)
} else {
this.$emit('confirm')
}
if (this.beforeClose) return
this.popup.close()
},
/**
* 点击取消按钮
*/
closeDialog() {
this.$emit('close')
if (this.beforeClose) return
this.popup.close()
},
close() {
this.popup.close()
}
}
}
</script>
<style lang="scss">
.uni-popup-dialog {
width: 300px;
border-radius: 11px;
background-color: #fff;
}
.uni-dialog-title {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
padding-top: 25px;
}
.uni-dialog-title-text {
font-size: 16px;
font-weight: 500;
}
.uni-dialog-content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
align-items: center;
padding: 20px;
}
.uni-dialog-content-text {
font-size: 14px;
color: #6C6C6C;
}
.uni-dialog-button-group {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
border-top-color: #f5f5f5;
border-top-style: solid;
border-top-width: 1px;
}
.uni-dialog-button {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
justify-content: center;
align-items: center;
height: 45px;
}
.uni-border-left {
border-left-color: #f0f0f0;
border-left-style: solid;
border-left-width: 1px;
}
.uni-dialog-button-text {
font-size: 16px;
color: #333;
}
.uni-button-color {
color: #007aff;
}
.uni-dialog-input {
flex: 1;
font-size: 14px;
border: 1px #eee solid;
height: 40px;
padding: 0 10px;
border-radius: 5px;
color: #555;
}
.uni-popup__success {
color: #4cd964;
}
.uni-popup__warn {
color: #f0ad4e;
}
.uni-popup__error {
color: #dd524d;
}
.uni-popup__info {
color: #909399;
}
</style>
uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue 0 → 100644
View file @ 1c9ee0e7
<template>
<view class="uni-popup-message">
<view class="uni-popup-message__box fixforpc-width" :class="'uni-popup__'+type">
<slot>
<text class="uni-popup-message-text" :class="'uni-popup__'+type+'-text'">{{message}}</text>
</slot>
</view>
</view>
</template>
<script>
import popup from '../uni-popup/popup.js'
/**
* PopUp 弹出层-消息提示
* @description 弹出层-消息提示
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
* @property {String} type = [success|warning|info|error] 主题样式
* @value success 成功
* @value warning 提示
* @value info 消息
* @value error 错误
* @property {String} message 消息提示文字
* @property {String} duration 显示时间，设置为 0 则不会自动关闭
*/
export default {
name: 'uniPopupMessage',
mixins:[popup],
props: {
/**
* 主题 success/warning/info/error 默认 success
*/
type: {
type: String,
default: 'success'
},
/**
* 消息文字
*/
message: {
type: String,
default: ''
},
/**
* 显示时间，设置为 0 则不会自动关闭
*/
duration: {
type: Number,
default: 3000
},
maskShow:{
type:Boolean,
default:false
}
},
data() {
return {}
},
created() {
this.popup.maskShow = this.maskShow
this.popup.messageChild = this
},
methods: {
timerClose(){
if(this.duration === 0) return
clearTimeout(this.timer)
this.timer = setTimeout(()=>{
this.popup.close()
},this.duration)
}
}
}
</script>
<style lang="scss" >
.uni-popup-message {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
}
.uni-popup-message__box {
background-color: #e1f3d8;
padding: 10px 15px;
border-color: #eee;
border-style: solid;
border-width: 1px;
flex: 1;
}
@media screen and (min-width: 500px) {
.fixforpc-width {
margin-top: 20px;
border-radius: 4px;
flex: none;
min-width: 380px;
/* #ifndef APP-NVUE */
max-width: 50%;
/* #endif */
/* #ifdef APP-NVUE */
max-width: 500px;
/* #endif */
}
}
.uni-popup-message-text {
font-size: 14px;
padding: 0;
}
.uni-popup__success {
background-color: #e1f3d8;
}
.uni-popup__success-text {
color: #67C23A;
}
.uni-popup__warn {
background-color: #faecd8;
}
.uni-popup__warn-text {
color: #E6A23C;
}
.uni-popup__error {
background-color: #fde2e2;
}
.uni-popup__error-text {
color: #F56C6C;
}
.uni-popup__info {
background-color: #F2F6FC;
}
.uni-popup__info-text {
color: #909399;
}
</style>
uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue 0 → 100644
View file @ 1c9ee0e7
<template>
<view class="uni-popup-share">
<view class="uni-share-title"><text class="uni-share-title-text">{{shareTitleText}}</text></view>
<view class="uni-share-content">
<view class="uni-share-content-box">
<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
<text class="uni-share-text">{{item.text}}</text>
</view>
</view>
</view>
<view class="uni-share-button-box">
<button class="uni-share-button" @click="close">{{cancelText}}</button>
</view>
</view>
</template>
<script>
import popup from '../uni-popup/popup.js'
import {
initVueI18n
} from '@dcloudio/uni-i18n'
import messages from '../uni-popup/i18n/index.js'
const { t } = initVueI18n(messages)
export default {
name: 'UniPopupShare',
mixins:[popup],
emits:['select'],
props: {
title: {
type: String,
default: ''
},
beforeClose: {
type: Boolean,
default: false
}
},
data() {
return {
bottomData: [{
text: '微信',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png',
name: 'wx'
},
{
text: '支付宝',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png',
name: 'ali'
},
{
text: 'QQ',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/e7a79520-50be-11eb-b997-9918a5dda011.png',
name: 'qq'
},
{
text: '新浪',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0dacdbe0-50bf-11eb-8ff1-d5dcf8779628.png',
name: 'sina'
},
// {
// text: '百度',
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png',
// name: 'copy'
// },
// {
// text: '其他',
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png',
// name: 'more'
// }
]
}
},
created() {},
computed: {
cancelText() {
return t("uni-popup.cancel")
},
shareTitleText() {
return this.title || t("uni-popup.shareTitle")
}
},
methods: {
/**
* 选择内容
*/
select(item, index) {
this.$emit('select', {
item,
index
})
this.close()
},
/**
* 关闭窗口
*/
close() {
if(this.beforeClose) return
this.popup.close()
}
}
}
</script>
<style lang="scss" >
.uni-popup-share {
background-color: #fff;
border-top-left-radius: 11px;
border-top-right-radius: 11px;
}
.uni-share-title {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
height: 40px;
}
.uni-share-title-text {
font-size: 14px;
color: #666;
}
.uni-share-content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
padding-top: 10px;
}
.uni-share-content-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
flex-wrap: wrap;
width: 360px;
}
.uni-share-content-item {
width: 90px;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
padding: 10px 0;
align-items: center;
}
.uni-share-content-item:active {
background-color: #f5f5f5;
}
.uni-share-image {
width: 30px;
height: 30px;
}
.uni-share-text {
margin-top: 10px;
font-size: 14px;
color: #3B4144;
}
.uni-share-button-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
padding: 10px 15px;
}
.uni-share-button {
flex: 1;
border-radius: 50px;
color: #666;
font-size: 16px;
}
.uni-share-button::after {
border-radius: 50px;
}
</style>
uni_modules/uni-popup/components/uni-popup/i18n/en.json 0 → 100644
View file @ 1c9ee0e7
{
"uni-popup.cancel": "cancel",
"uni-popup.ok": "ok",
"uni-popup.placeholder": "pleace enter",
"uni-popup.title": "Hint",
"uni-popup.shareTitle": "Share to"
}
uni_modules/uni-popup/components/uni-popup/i18n/index.js 0 → 100644
View file @ 1c9ee0e7
import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
export default {
en,
'zh-Hans': zhHans,
'zh-Hant': zhHant
}
uni_modules/uni-popup/components/uni-popup/i18n/zh-Hans.json 0 → 100644
View file @ 1c9ee0e7
{
"uni-popup.cancel": "取消",
"uni-popup.ok": "确定",
"uni-popup.placeholder": "请输入",
"uni-popup.title": "提示",
"uni-popup.shareTitle": "分享到"
}
uni_modules/uni-popup/components/uni-popup/i18n/zh-Hant.json 0 → 100644
View file @ 1c9ee0e7
{
"uni-popup.cancel": "取消",
"uni-popup.ok": "確定",
"uni-popup.placeholder": "請輸入",
"uni-popup.title": "提示",
"uni-popup.shareTitle": "分享到"
}
uni_modules/uni-popup/components/uni-popup/keypress.js 0 → 100644
View file @ 1c9ee0e7
// #ifdef H5
export default {
name: 'Keypress',
props: {
disable: {
type: Boolean,
default: false
}
},
mounted () {
const keyNames = {
esc: ['Esc', 'Escape'],
tab: 'Tab',
enter: 'Enter',
space: [' ', 'Spacebar'],
up: ['Up', 'ArrowUp'],
left: ['Left', 'ArrowLeft'],
right: ['Right', 'ArrowRight'],
down: ['Down', 'ArrowDown'],
delete: ['Backspace', 'Delete', 'Del']
}
const listener = ($event) => {
if (this.disable) {
return
}
const keyName = Object.keys(keyNames).find(key => {
const keyName = $event.key
const value = keyNames[key]
return value === keyName || (Array.isArray(value) && value.includes(keyName))
})
if (keyName) {
// 避免和其他按键事件冲突
setTimeout(() => {
this.$emit(keyName, {})
}, 0)
}
}
document.addEventListener('keyup', listener)
// this.$once('hook:beforeDestroy', () => {
// document.removeEventListener('keyup', listener)
// })
},
render: () => {}
}
// #endif
uni_modules/uni-popup/components/uni-popup/popup.js 0 → 100644
View file @ 1c9ee0e7
export default {
data() {
return {
}
},
created(){
this.popup = this.getParent()
},
methods:{
/**
* 获取父元素实例
*/
getParent(name = 'uniPopup') {
let parent = this.$parent;
let parentName = parent.$options.name;
while (parentName !== name) {
parent = parent.$parent;
if (!parent) return false
parentName = parent.$options.name;
}
return parent;
},
}
}
uni_modules/uni-popup/components/uni-popup/uni-popup.uvue 0 → 100644
View file @ 1c9ee0e7
<template>
<view class="popup-root" v-if="isOpen" v-show="isShow" @click="clickMask">
<view @click.stop>
<slot></slot>
</view>
</view>
</template>
<script>
type CloseCallBack = ()=> void;
let closeCallBack:CloseCallBack = () :void => {};
export default {
emits:["close","clickMask"],
data() {
return {
isShow:false,
isOpen:false
}
},
props: {
maskClick: {
type: Boolean,
default: true
},
},
watch: {
// 设置show = true 时，如果没有 open 需要设置为 open
isShow:{
handler(isShow) {
// console.log("isShow",isShow)
if(isShow && this.isOpen == false){
this.isOpen = true
}
},
immediate:true
},
// 设置isOpen = true 时，如果没有 isShow 需要设置为 isShow
isOpen:{
handler(isOpen) {
// console.log("isOpen",isOpen)
if(isOpen && this.isShow == false){
this.isShow = true
}
},
immediate:true
}
},
methods:{
open(){
// ...funs : CloseCallBack[]
// if(funs.length > 0){
// closeCallBack = funs[0]
// }
this.isOpen = true;
},
clickMask(){
if(this.maskClick == true){
this.$emit('clickMask')
this.close()
}
},
close(): void{
this.isOpen = false;
this.$emit('close')
closeCallBack()
},
hiden(){
this.isShow = false
},
show(){
this.isShow = true
}
}
}
</script>
<style>
.popup-root {
position: fixed;
top: 0;
left: 0;
width: 750rpx;
height: 100%;
flex: 1;
background-color: rgba(0, 0, 0, 0.3);
justify-content: center;
align-items: center;
z-index: 99;
}
</style>
\ No newline at end of file
uni_modules/uni-popup/components/uni-popup/uni-popup.vue 0 → 100644
View file @ 1c9ee0e7
<template>
<view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']">
<view @touchstart="touchstart">
<uni-transition key="1" v-if="maskShow" name="mask" mode-class="fade" :styles="maskClass"
:duration="duration" :show="showTrans" @click="onTap" />
<uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration"
:show="showTrans" @click="onTap">
<view class="uni-popup__wrapper" :style="getStyles" :class="[popupstyle]" @click="clear">
<slot />
</view>
</uni-transition>
</view>
<!-- #ifdef H5 -->
<keypress v-if="maskShow" @esc="onTap" />
<!-- #endif -->
</view>
</template>
<script>
// #ifdef H5
import keypress from './keypress.js'
// #endif
/**
* PopUp 弹出层
* @description 弹出层组件，为了解决遮罩弹层的问题
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
* @property {String} type = [top|center|bottom|left|right|message|dialog|share] 弹出方式
* @value top 顶部弹出
* @value center 中间弹出
* @value bottom 底部弹出
* @value left 左侧弹出
* @value right 右侧弹出
* @value message 消息提示
* @value dialog 对话框
* @value share 底部分享示例
* @property {Boolean} animation = [true|false] 是否开启动画
* @property {Boolean} maskClick = [true|false] 蒙版点击是否关闭弹窗(废弃)
* @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗
* @property {String} backgroundColor 主窗口背景色
* @property {String} maskBackgroundColor 蒙版颜色
* @property {String} borderRadius 设置圆角(左上、右上、右下和左下) 示例:"10px 10px 10px 10px"
* @property {Boolean} safeArea 是否适配底部安全区
* @event {Function} change 打开关闭弹窗触发，e={show: false}
* @event {Function} maskClick 点击遮罩触发
*/
export default {
name: 'uniPopup',
components: {
// #ifdef H5
keypress
// #endif
},
emits: ['change', 'maskClick'],
props: {
// 开启动画
animation: {
type: Boolean,
default: true
},
// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
// message: 消息提示 ; dialog : 对话框
type: {
type: String,
default: 'center'
},
// maskClick
isMaskClick: {
type: Boolean,
default: null
},
// TODO 2 个版本后废弃属性 ，使用 isMaskClick
maskClick: {
type: Boolean,
default: null
},
backgroundColor: {
type: String,
default: 'none'
},
safeArea: {
type: Boolean,
default: true
},
maskBackgroundColor: {
type: String,
default: 'rgba(0, 0, 0, 0.4)'
},
borderRadius:{
type: String,
}
},
watch: {
/**
* 监听type类型
*/
type: {
handler: function(type) {
if (!this.config[type]) return
this[this.config[type]](true)
},
immediate: true
},
isDesktop: {
handler: function(newVal) {
if (!this.config[newVal]) return
this[this.config[this.type]](true)
},
immediate: true
},
/**
* 监听遮罩是否可点击
* @param {Object} val
*/
maskClick: {
handler: function(val) {
this.mkclick = val
},
immediate: true
},
isMaskClick: {
handler: function(val) {
this.mkclick = val
},
immediate: true
},
// H5 下禁止底部滚动
showPopup(show) {
// #ifdef H5
// fix by mehaotian 处理 h5 滚动穿透的问题
document.getElementsByTagName('body')[0].style.overflow = show ? 'hidden' : 'visible'
// #endif
}
},
data() {
return {
duration: 300,
ani: [],
showPopup: false,
showTrans: false,
popupWidth: 0,
popupHeight: 0,
config: {
top: 'top',
bottom: 'bottom',
center: 'center',
left: 'left',
right: 'right',
message: 'top',
dialog: 'center',
share: 'bottom'
},
maskClass: {
position: 'fixed',
bottom: 0,
top: 0,
left: 0,
right: 0,
backgroundColor: 'rgba(0, 0, 0, 0.4)'
},
transClass: {
backgroundColor: 'transparent',
borderRadius: this.borderRadius || "0",
position: 'fixed',
left: 0,
right: 0
},
maskShow: true,
mkclick: true,
popupstyle: 'top'
}
},
computed: {
getStyles() {
let res = { backgroundColor: this.bg };
if (this.borderRadius || "0") {
res = Object.assign(res, { borderRadius: this.borderRadius })
}
return res;
},
isDesktop() {
return this.popupWidth >= 500 && this.popupHeight >= 500
},
bg() {
if (this.backgroundColor === '' || this.backgroundColor === 'none') {
return 'transparent'
}
return this.backgroundColor
}
},
mounted() {
const fixSize = () => {
const {
windowWidth,
windowHeight,
windowTop,
safeArea,
screenHeight,
safeAreaInsets
} = uni.getSystemInfoSync()
this.popupWidth = windowWidth
this.popupHeight = windowHeight + (windowTop || 0)
// TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异，需要框架修复
if (safeArea && this.safeArea) {
// #ifdef MP-WEIXIN
this.safeAreaInsets = screenHeight - safeArea.bottom
// #endif
// #ifndef MP-WEIXIN
this.safeAreaInsets = safeAreaInsets.bottom
// #endif
} else {
this.safeAreaInsets = 0
}
}
fixSize()
// #ifdef H5
// window.addEventListener('resize', fixSize)
// this.$once('hook:beforeDestroy', () => {
// window.removeEventListener('resize', fixSize)
// })
// #endif
},
// #ifndef VUE3
// TODO vue2
destroyed() {
this.setH5Visible()
},
// #endif
// #ifdef VUE3
// TODO vue3
unmounted() {
this.setH5Visible()
},
// #endif
activated() {
this.setH5Visible(!this.showPopup);
},
deactivated() {
this.setH5Visible(true);
},
created() {
// this.mkclick = this.isMaskClick || this.maskClick
if (this.isMaskClick === null && this.maskClick === null) {
this.mkclick = true
} else {
this.mkclick = this.isMaskClick !== null ? this.isMaskClick : this.maskClick
}
if (this.animation) {
this.duration = 300
} else {
this.duration = 0
}
// TODO 处理 message 组件生命周期异常的问题
this.messageChild = null
// TODO 解决头条冒泡的问题
this.clearPropagation = false
this.maskClass.backgroundColor = this.maskBackgroundColor
},
methods: {
setH5Visible(visible = true) {
// #ifdef H5
// fix by mehaotian 处理 h5 滚动穿透的问题
document.getElementsByTagName('body')[0].style.overflow = visible ? "visible" : "hidden";
// #endif
},
/**
* 公用方法，不显示遮罩层
*/
closeMask() {
this.maskShow = false
},
/**
* 公用方法，遮罩层禁止点击
*/
disableMask() {
this.mkclick = false
},
// TODO nvue 取消冒泡
clear(e) {
// #ifndef APP-NVUE
e.stopPropagation()
// #endif
this.clearPropagation = true
},
open(direction) {
// fix by mehaotian 处理快速打开关闭的情况
if (this.showPopup) {
return
}
let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share']
if (!(direction && innerType.indexOf(direction) !== -1)) {
direction = this.type
}
if (!this.config[direction]) {
console.error('缺少类型：', direction)
return
}
this[this.config[direction]]()
this.$emit('change', {
show: true,
type: direction
})
},
close(type) {
this.showTrans = false
this.$emit('change', {
show: false,
type: this.type
})
clearTimeout(this.timer)
// // 自定义关闭事件
// this.customOpen && this.customClose()
this.timer = setTimeout(() => {
this.showPopup = false
}, 300)
},
// TODO 处理冒泡事件，头条的冒泡事件有问题 ，先这样兼容
touchstart() {
this.clearPropagation = false
},
onTap() {
if (this.clearPropagation) {
// fix by mehaotian 兼容 nvue
this.clearPropagation = false
return
}
this.$emit('maskClick')
if (!this.mkclick) return
this.close()
},
/**
* 顶部弹出样式处理
*/
top(type) {
this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top'
this.ani = ['slide-top']
this.transClass = {
position: 'fixed',
left: 0,
right: 0,
backgroundColor: this.bg,
borderRadius:this.borderRadius || "0"
}
// TODO 兼容 type 属性 ，后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
this.$nextTick(() => {
if (this.messageChild && this.type === 'message') {
this.messageChild.timerClose()
}
})
},
/**
* 底部弹出样式处理
*/
bottom(type) {
this.popupstyle = 'bottom'
this.ani = ['slide-bottom']
this.transClass = {
position: 'fixed',
left: 0,
right: 0,
bottom: 0,
paddingBottom: this.safeAreaInsets + 'px',
backgroundColor: this.bg,
borderRadius:this.borderRadius || "0",
}
// TODO 兼容 type 属性 ，后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
},
/**
* 中间弹出样式处理
*/
center(type) {
this.popupstyle = 'center'
//微信小程序下，组合动画会出现文字向上闪动问题，再此做特殊处理
// #ifdef MP-WEIXIN
this.ani = ['fade']
// #endif
// #ifndef MP-WEIXIN
this.ani = ['zoom-out', 'fade']
// #endif
this.transClass = {
position: 'fixed',
/* #ifndef APP-NVUE */
display: 'flex',
flexDirection: 'column',
/* #endif */
bottom: 0,
left: 0,
right: 0,
top: 0,
justifyContent: 'center',
alignItems: 'center',
borderRadius:this.borderRadius || "0"
}
// TODO 兼容 type 属性 ，后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
},
left(type) {
this.popupstyle = 'left'
this.ani = ['slide-left']
this.transClass = {
position: 'fixed',
left: 0,
bottom: 0,
top: 0,
backgroundColor: this.bg,
borderRadius:this.borderRadius || "0",
/* #ifndef APP-NVUE */
display: 'flex',
flexDirection: 'column'
/* #endif */
}
// TODO 兼容 type 属性 ，后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
},
right(type) {
this.popupstyle = 'right'
this.ani = ['slide-right']
this.transClass = {
position: 'fixed',
bottom: 0,
right: 0,
top: 0,
backgroundColor: this.bg,
borderRadius:this.borderRadius || "0",
/* #ifndef APP-NVUE */
display: 'flex',
flexDirection: 'column'
/* #endif */
}
// TODO 兼容 type 属性 ，后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
}
}
}
</script>
<style lang="scss">
.uni-popup {
position: fixed;
/* #ifndef APP-NVUE */
z-index: 99;
/* #endif */
&.top,
&.left,
&.right {
/* #ifdef H5 */
top: var(--window-top);
/* #endif */
/* #ifndef H5 */
top: 0;
/* #endif */
}
.uni-popup__wrapper {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
position: relative;
/* iphonex 等安全区设置，底部安全区适配 */
/* #ifndef APP-NVUE */
// padding-bottom: constant(safe-area-inset-bottom);
// padding-bottom: env(safe-area-inset-bottom);
/* #endif */
&.left,
&.right {
/* #ifdef H5 */
padding-top: var(--window-top);
/* #endif */
/* #ifndef H5 */
padding-top: 0;
/* #endif */
flex: 1;
}
}
}
.fixforpc-z-index {
/* #ifndef APP-NVUE */
z-index: 999;
/* #endif */
}
.fixforpc-top {
top: 0;
}
</style>
uni_modules/uni-popup/package.json 0 → 100644
View file @ 1c9ee0e7
{
"id": "uni-popup",
"displayName": "uni-popup 弹出层",
"version": "1.9.1",
"description": " Popup 组件，提供常用的弹层",
"keywords": [
"uni-ui",
"弹出层",
"弹窗",
"popup",
"弹框"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
"type": "component-vue"
},
"uni_modules": {
"dependencies": [
"uni-scss",
"uni-transition"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y",
"alipay": "n"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
uni_modules/uni-popup/readme.md 0 → 100644
View file @ 1c9ee0e7
## Popup 弹出层
> **组件名：uni-popup**
> 代码块： `uPopup`
> 关联组件：`uni-transition`
弹出层组件，在应用中弹出一个消息提示窗口、提示框等
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-popup)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment