增加弹框组件
This commit is contained in:
aihe
parent
23ff2eb144
commit
18e0bdeca7
@ -73,6 +73,17 @@ const dateTypeList = [
|
|||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
|
const sendTypeEnum = {
|
||||||
|
home: 1,
|
||||||
|
tockRoom: 2,
|
||||||
|
container: 3,
|
||||||
|
}
|
||||||
|
const sendTypeList = [
|
||||||
|
{ title: '上门取件', val: sendTypeEnum.home },
|
||||||
|
{ title: '仓库收货', val: sendTypeEnum.tockRoom },
|
||||||
|
{ title: '整柜提货', val: sendTypeEnum.container }
|
||||||
|
]
|
||||||
|
|
||||||
export {
|
export {
|
||||||
ordStaEnum,
|
ordStaEnum,
|
||||||
ordStatusList,
|
ordStatusList,
|
||||||
@ -81,5 +92,7 @@ export {
|
|||||||
dlvTypeEnum,
|
dlvTypeEnum,
|
||||||
dlvTypeList,
|
dlvTypeList,
|
||||||
dateTypeEnum,
|
dateTypeEnum,
|
||||||
dateTypeList
|
dateTypeList,
|
||||||
|
sendTypeEnum,
|
||||||
|
sendTypeList
|
||||||
}
|
}
|
||||||
@ -1,21 +1,68 @@
|
|||||||
<template>
|
<template>
|
||||||
<tpx-dialog :show="show" title="选择国家" @onClose="handleCloseModal()">
|
<tpx-dialog :show="show" title="选择国家" @onClose="handleCloseModal()">
|
||||||
<view style="height: 600rpx;">哈哈哈哈</view>
|
<view class="shet-cont">
|
||||||
|
<!-- 关键字搜索框 -->
|
||||||
|
<tpx-search placeholder="请输入" v-model:value="keyword" bgColor="#FFF"></tpx-search>
|
||||||
|
|
||||||
|
<view class="mt-20 mb-10">
|
||||||
|
<tpx-tags :list="hisList" type="" @onItemClick="handleHisItemClick"></tpx-tags>
|
||||||
|
</view>
|
||||||
|
<u-line></u-line>
|
||||||
|
|
||||||
|
<view class="">
|
||||||
|
<tpx-checkitems :list="dataList.filter(v=> !keyword || (v.title.indexOf(keyword) > -1))" :value="value" v-slot="dlCurrent" min-checked="1" type="single"
|
||||||
|
@onChange="handleDataItemChange"
|
||||||
|
>
|
||||||
|
<view slot style="margin-top: 10rpx;">
|
||||||
|
<u-row justify="between">
|
||||||
|
<u-col span="10">
|
||||||
|
<u-text size="28" :text="dlCurrent.item.title"></u-text>
|
||||||
|
</u-col>
|
||||||
|
<view span="2" class="chk-icon">
|
||||||
|
<u-checkbox :checked="dlCurrent.checked" shape="circle" size="32" activeColor="#B12D29"></u-checkbox>
|
||||||
|
</view>
|
||||||
|
</u-row>
|
||||||
|
<u-line margin="10rpx 0 0 0"></u-line>
|
||||||
|
</view>
|
||||||
|
</tpx-checkitems>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
</tpx-dialog>
|
</tpx-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
// computed: {
|
||||||
|
// filDataList() {
|
||||||
|
// return []
|
||||||
|
// },
|
||||||
|
// },
|
||||||
props: {
|
props: {
|
||||||
show: {
|
show: {
|
||||||
default () {
|
default () {
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
value: {
|
||||||
|
default () {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
hisList: [
|
||||||
|
{ title: '柬埔寨', val: 1 },
|
||||||
|
{ title: '越南', val: 2 }
|
||||||
|
],
|
||||||
|
dataList: [
|
||||||
|
{ title: '柬埔寨', val: 1 },
|
||||||
|
{ title: '越南', val: 2 },
|
||||||
|
{ title: '泰国', val: 3 },
|
||||||
|
{ title: '巴厘岛', val: 4 }
|
||||||
|
],
|
||||||
|
keyword: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
@ -29,11 +76,37 @@
|
|||||||
methods: {
|
methods: {
|
||||||
handleCloseModal() {
|
handleCloseModal() {
|
||||||
this.$emit('update:show', false)
|
this.$emit('update:show', false)
|
||||||
|
|
||||||
|
},
|
||||||
|
handleHisItemClick(res) {
|
||||||
|
this.updateValue(res.val)
|
||||||
|
},
|
||||||
|
handleDataItemChange(val) {
|
||||||
|
this.updateValue(val)
|
||||||
|
},
|
||||||
|
updateValue(val) {
|
||||||
|
this.$emit('onChange', val)
|
||||||
|
this.$emit('update:value', val)
|
||||||
|
this.handleCloseModal()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
.shet-cont{
|
||||||
|
min-height: 500rpx;
|
||||||
|
padding: 10rpx 0 30rpx 0;
|
||||||
|
}
|
||||||
|
.chk-icon{
|
||||||
|
position: relative;
|
||||||
|
&::after {
|
||||||
|
position: absolute;
|
||||||
|
content: ' ';
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
117
components/buns-stockroom-sheet/buns-stockroom-sheet.vue
Normal file
117
components/buns-stockroom-sheet/buns-stockroom-sheet.vue
Normal file
@ -0,0 +1,117 @@
|
|||||||
|
<template>
|
||||||
|
<tpx-dialog :show="show" title="选择仓库" @onClose="handleCloseModal()">
|
||||||
|
<view class="shet-cont">
|
||||||
|
<!-- 关键字搜索框 -->
|
||||||
|
<tpx-search placeholder="请输入" v-model:value="keyword" bgColor="#FFF"></tpx-search>
|
||||||
|
|
||||||
|
<view class="mt-20 mb-10">
|
||||||
|
<tpx-tags :list="hisList" type="" @onItemClick="handleHisItemClick"></tpx-tags>
|
||||||
|
</view>
|
||||||
|
<u-line></u-line>
|
||||||
|
|
||||||
|
<view class="">
|
||||||
|
<tpx-checkitems :list="dataList.filter(v=> !keyword || (v.title.indexOf(keyword) > -1))" :value="value" v-slot="dlCurrent" min-checked="1" type="single"
|
||||||
|
@onChange="handleDataItemChange"
|
||||||
|
>
|
||||||
|
<view slot style="margin-top: 10rpx;">
|
||||||
|
<u-row justify="between">
|
||||||
|
<u-col span="10">
|
||||||
|
<u-text size="28" :text="dlCurrent.item.title"></u-text>
|
||||||
|
</u-col>
|
||||||
|
<view span="2" class="chk-icon">
|
||||||
|
<u-checkbox :checked="dlCurrent.checked" shape="circle" size="32" activeColor="#B12D29"></u-checkbox>
|
||||||
|
</view>
|
||||||
|
</u-row>
|
||||||
|
<u-line margin="10rpx 0 0 0"></u-line>
|
||||||
|
</view>
|
||||||
|
</tpx-checkitems>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</tpx-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
// computed: {
|
||||||
|
// filDataList() {
|
||||||
|
// return []
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
props: {
|
||||||
|
show: {
|
||||||
|
default () {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
default () {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
hisList: [
|
||||||
|
{ title: '河桥仓', val: 1 },
|
||||||
|
{ title: '宁波海运仓', val: 2 }
|
||||||
|
],
|
||||||
|
dataList: [
|
||||||
|
{ title: '河桥仓', val: 1 },
|
||||||
|
{ title: '宁波海运仓', val: 2 },
|
||||||
|
{ title: '南京分仓-1', val: 3 },
|
||||||
|
{ title: '南京分仓-2', val: 4 },
|
||||||
|
{ title: '南京分仓-2', val: 5 },
|
||||||
|
{ title: '南京分仓-2', val: 6 },
|
||||||
|
{ title: '南京分仓-2', val: 7 },
|
||||||
|
{ title: '南京分仓-2', val: 8 },
|
||||||
|
{ title: '南京分仓-2', val: 9 }
|
||||||
|
],
|
||||||
|
keyword: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
onHide() {
|
||||||
|
|
||||||
|
},
|
||||||
|
destroyed() {},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
handleCloseModal() {
|
||||||
|
this.$emit('update:show', false)
|
||||||
|
|
||||||
|
},
|
||||||
|
handleHisItemClick(res) {
|
||||||
|
this.updateValue(res.val)
|
||||||
|
},
|
||||||
|
handleDataItemChange(val) {
|
||||||
|
this.updateValue(val)
|
||||||
|
},
|
||||||
|
updateValue(val) {
|
||||||
|
this.$emit('onChange', val)
|
||||||
|
this.$emit('update:value', val)
|
||||||
|
this.handleCloseModal()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.shet-cont{
|
||||||
|
min-height: 500rpx;
|
||||||
|
padding: 10rpx 0 30rpx 0;
|
||||||
|
}
|
||||||
|
.chk-icon{
|
||||||
|
position: relative;
|
||||||
|
&::after {
|
||||||
|
position: absolute;
|
||||||
|
content: ' ';
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
112
components/buns-way-sheet/buns-way-sheet.vue
Normal file
112
components/buns-way-sheet/buns-way-sheet.vue
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
<template>
|
||||||
|
<tpx-dialog :show="show" title="选择线路" @onClose="handleCloseModal()">
|
||||||
|
<view class="shet-cont">
|
||||||
|
<!-- 关键字搜索框 -->
|
||||||
|
<tpx-search placeholder="请输入" v-model:value="keyword" bgColor="#FFF"></tpx-search>
|
||||||
|
|
||||||
|
<view class="mt-20 mb-10">
|
||||||
|
<tpx-tags :list="hisList" type="" @onItemClick="handleHisItemClick"></tpx-tags>
|
||||||
|
</view>
|
||||||
|
<u-line></u-line>
|
||||||
|
|
||||||
|
<view class="">
|
||||||
|
<tpx-checkitems :list="dataList.filter(v=> !keyword || (v.title.indexOf(keyword) > -1))" :value="value" v-slot="dlCurrent" min-checked="1" type="single"
|
||||||
|
@onChange="handleDataItemChange"
|
||||||
|
>
|
||||||
|
<view slot style="margin-top: 10rpx;">
|
||||||
|
<u-row justify="between">
|
||||||
|
<u-col span="10">
|
||||||
|
<u-text size="28" :text="dlCurrent.item.title"></u-text>
|
||||||
|
</u-col>
|
||||||
|
<view span="2" class="chk-icon">
|
||||||
|
<u-checkbox :checked="dlCurrent.checked" shape="circle" size="32" activeColor="#B12D29"></u-checkbox>
|
||||||
|
</view>
|
||||||
|
</u-row>
|
||||||
|
<u-line margin="10rpx 0 0 0"></u-line>
|
||||||
|
</view>
|
||||||
|
</tpx-checkitems>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</tpx-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
// computed: {
|
||||||
|
// filDataList() {
|
||||||
|
// return []
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
props: {
|
||||||
|
show: {
|
||||||
|
default () {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
default () {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
hisList: [
|
||||||
|
{ title: '柬-铁运', val: 1 },
|
||||||
|
{ title: '越-铁运', val: 2 }
|
||||||
|
],
|
||||||
|
dataList: [
|
||||||
|
{ title: '柬埔寨-铁卡联运', val: 1 },
|
||||||
|
{ title: '越南-铁卡联运', val: 2 },
|
||||||
|
{ title: '泰国-铁卡联运', val: 3 },
|
||||||
|
{ title: '巴厘岛-铁卡联运', val: 4 }
|
||||||
|
],
|
||||||
|
keyword: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
onHide() {
|
||||||
|
|
||||||
|
},
|
||||||
|
destroyed() {},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
handleCloseModal() {
|
||||||
|
this.$emit('update:show', false)
|
||||||
|
|
||||||
|
},
|
||||||
|
handleHisItemClick(res) {
|
||||||
|
this.updateValue(res.val)
|
||||||
|
},
|
||||||
|
handleDataItemChange(val) {
|
||||||
|
this.updateValue(val)
|
||||||
|
},
|
||||||
|
updateValue(val) {
|
||||||
|
this.$emit('onChange', val)
|
||||||
|
this.$emit('update:value', val)
|
||||||
|
this.handleCloseModal()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.shet-cont{
|
||||||
|
min-height: 500rpx;
|
||||||
|
padding: 10rpx 0 30rpx 0;
|
||||||
|
}
|
||||||
|
.chk-icon{
|
||||||
|
position: relative;
|
||||||
|
&::after {
|
||||||
|
position: absolute;
|
||||||
|
content: ' ';
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -2,7 +2,8 @@
|
|||||||
<view class="sch-cont">
|
<view class="sch-cont">
|
||||||
<view>
|
<view>
|
||||||
<u-input shape="circle" :placeholder="placeholder" v-model="keyword" :custom-style="`background-color: ${bgColor};height: ${height}rpx;${true?'padding-right:120rpx;': ''}`"
|
<u-input shape="circle" :placeholder="placeholder" v-model="keyword" :custom-style="`background-color: ${bgColor};height: ${height}rpx;${true?'padding-right:120rpx;': ''}`"
|
||||||
@focus="handleSwitchFouce()" @blur="handleSwitchFouce()" @confirm="triggerChange()" @change="handleChange()">
|
font-size="28rpx" placeholder-style="font-size: 28rpx;"
|
||||||
|
@focus="handleSwitchFouce()" @blur="handleSwitchFouce()" @confirm="triggerChange()" @change="handleChange()">
|
||||||
</u-input>
|
</u-input>
|
||||||
<u-row justify="end" custom-style="position: absolute;width: 120rpx;top: 0;bottom: 0;right: 20rpx;">
|
<u-row justify="end" custom-style="position: absolute;width: 120rpx;top: 0;bottom: 0;right: 20rpx;">
|
||||||
<u-row justify="end" customStyle="height: 100%;width:100%;">
|
<u-row justify="end" customStyle="height: 100%;width:100%;">
|
||||||
|
|||||||
@ -68,7 +68,7 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view>
|
<view>
|
||||||
<view class="pt-30 pb-30" style="border-bottom: 2rpx solid #F6F6F6;" @click="handleDialogClick(countryModal)">
|
<view @click="handleDialogClick(countryModal)" class="pt-30 pb-30" style="border-bottom: 2rpx solid #F6F6F6;" >
|
||||||
<u-row>
|
<u-row>
|
||||||
<view>
|
<view>
|
||||||
<u-text text="目的国" size="28" :bold="true"></u-text>
|
<u-text text="目的国" size="28" :bold="true"></u-text>
|
||||||
@ -80,7 +80,7 @@
|
|||||||
</u-row>
|
</u-row>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="pt-30 pb-30" style="border-bottom: 2rpx solid #F6F6F6;;">
|
<view @click="handleDialogClick(wayModal)" class="pt-30 pb-30" style="border-bottom: 2rpx solid #F6F6F6;;">
|
||||||
<u-row>
|
<u-row>
|
||||||
<view>
|
<view>
|
||||||
<u-text text="选择线路" size="28" :bold="true"></u-text>
|
<u-text text="选择线路" size="28" :bold="true"></u-text>
|
||||||
@ -106,7 +106,9 @@
|
|||||||
</u-row>
|
</u-row>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="pt-30 pb-30" style="border-bottom: 2rpx solid #F6F6F6;;">
|
<view class="pt-30 pb-30" style="border-bottom: 2rpx solid #F6F6F6;;"
|
||||||
|
v-if="submitParam.type != sendTypeEnum.container"
|
||||||
|
>
|
||||||
<u-row>
|
<u-row>
|
||||||
<view>
|
<view>
|
||||||
<u-text text="重量/体积" size="28" :bold="true"></u-text>
|
<u-text text="重量/体积" size="28" :bold="true"></u-text>
|
||||||
@ -118,6 +120,21 @@
|
|||||||
</u-row>
|
</u-row>
|
||||||
</u-row>
|
</u-row>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<view @click="handleDialogClick(stockRoomModal)" class="pt-30 pb-30" style="border-bottom: 2rpx solid #F6F6F6;;"
|
||||||
|
v-if="submitParam.type != sendTypeEnum.home"
|
||||||
|
>
|
||||||
|
<u-row>
|
||||||
|
<view>
|
||||||
|
<u-text text="选择仓库" size="28" :bold="true"></u-text>
|
||||||
|
</view>
|
||||||
|
<u-row custom-style="flex: 1;" justify="end" align="center">
|
||||||
|
<u-text align="right" margin="0 12rpx 0 0" size="26" color="#999"
|
||||||
|
text="请选择"></u-text>
|
||||||
|
<u-icon size="26" name="arrow-right" color="#333"></u-icon>
|
||||||
|
</u-row>
|
||||||
|
</u-row>
|
||||||
|
</view>
|
||||||
|
|
||||||
<view class="pt-30 pb-30" style="border-bottom: 2rpx solid #F6F6F6;;">
|
<view class="pt-30 pb-30" style="border-bottom: 2rpx solid #F6F6F6;;">
|
||||||
<u-row>
|
<u-row>
|
||||||
@ -215,21 +232,14 @@
|
|||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
</tpx-layout>
|
</tpx-layout>
|
||||||
<buns-country-sheet v-model:show="countryModal.show"></buns-country-sheet>
|
<buns-country-sheet v-model:show="countryModal.show" v-model:value="submitParam.countryId"></buns-country-sheet>
|
||||||
|
<buns-way-sheet v-model:show="wayModal.show" v-model:value="submitParam.wayId"></buns-way-sheet>
|
||||||
|
<buns-stockroom-sheet v-model:show="stockRoomModal.show" v-model:value="submitParam.stockRoomId"></buns-stockroom-sheet>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import getCdnUrl from "@/common/getCdnUrl"
|
import getCdnUrl from "@/common/getCdnUrl"
|
||||||
import {
|
import { sendTypeEnum, sendTypeList } from "@/common/enum"
|
||||||
ordStaEnum,
|
|
||||||
ordStatusList,
|
|
||||||
payTypeEnum,
|
|
||||||
payTypeList,
|
|
||||||
dlvTypeEnum,
|
|
||||||
dlvTypeList,
|
|
||||||
dateTypeEnum,
|
|
||||||
dateTypeList
|
|
||||||
} from "@/common/enum"
|
|
||||||
import {
|
import {
|
||||||
goto
|
goto
|
||||||
} from "@/common/untool"
|
} from "@/common/untool"
|
||||||
@ -244,11 +254,7 @@
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
sendTypeList: [
|
...(JSON.parse(JSON.stringify({ sendTypeEnum, sendTypeList }))),
|
||||||
{ title: '上门取件', val: 1 },
|
|
||||||
{ title: '仓库收货', val: 2 },
|
|
||||||
{ title: '整柜提货', val: 3 }
|
|
||||||
],
|
|
||||||
proList: [
|
proList: [
|
||||||
{val: 1},{val: 2}
|
{val: 1},{val: 2}
|
||||||
],
|
],
|
||||||
@ -262,9 +268,18 @@
|
|||||||
countryModal: {
|
countryModal: {
|
||||||
show: false
|
show: false
|
||||||
},
|
},
|
||||||
|
wayModal: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
stockRoomModal: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
submitParam: {
|
submitParam: {
|
||||||
|
stockRoomId: '',
|
||||||
|
countryId: '',
|
||||||
|
wayId: '',
|
||||||
tips: [],
|
tips: [],
|
||||||
type: 1,
|
type: sendTypeList[0].val,
|
||||||
otherDes: '',
|
otherDes: '',
|
||||||
prodId: 1
|
prodId: 1
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user