271 lines
7.4 KiB
Vue
271 lines
7.4 KiB
Vue
|
<!-- 物品类型弹窗页面 -->
|
|||
|
|
<template>
|
|||
|
|
<view class="goodsSearch">
|
|||
|
|
<!-- 头部 -->
|
|||
|
|
<view class="searchBox-title">
|
|||
|
|
<view class="title">
|
|||
|
|
物品名称
|
|||
|
|
<view class="label"></view>
|
|||
|
|
</view>
|
|||
|
|
<view class="stopSend" @click="openForbidGoodsDialog">
|
|||
|
|
禁寄物品
|
|||
|
|
<view class="gantanhao"></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 搜索框 -->
|
|||
|
|
<view class="seachBox" v-if="!isSelectedGoods">
|
|||
|
|
<uni-search-bar :cancelButton='isFocus && searchValue?"none":"auto"' :focus="isFocus" placeholder="请输入搜索内容"
|
|||
|
|
v-model="searchValue" @blur="blur" @focus="focus" @input="input" @cancel="cancel" @clear="clear">
|
|||
|
|
<template v-slot:searchIcon>
|
|||
|
|
<view class="search-icon"></view>
|
|||
|
|
</template>
|
|||
|
|
</uni-search-bar>
|
|||
|
|
<view class="search-btn" @click="userDefined" v-if="searchValue && isFocus">确定</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 最近寄件 -->
|
|||
|
|
<view class="recent-send-goods" v-if='!isSelectedGoods && recentSendList.data.length && !isInput'>
|
|||
|
|
<view class="title">最近寄件</view>
|
|||
|
|
<view class="recent-send-list">
|
|||
|
|
<view class="recent-send-item" v-for="(item,index) in recentSendList.data" :key='index'
|
|||
|
|
@click="handleClick(item)">
|
|||
|
|
{{item.name}}{{item.goodsType?'('+item.goodsType.name+')':''}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 选择的物品 -->
|
|||
|
|
<view class="selected-goods" v-if="isSelectedGoods">
|
|||
|
|
<view class="goods" @click.prevent="handleSelectedGoods">
|
|||
|
|
<image src='../../../static/shanchu-after.png' @click.stop="handleCancelGood"></image>
|
|||
|
|
{{goods.info.name}}{{goods.info.goodsType?'('+goods.info.goodsType.name+')':""}}
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 热门寄件 -->
|
|||
|
|
<view class="hot-send-goods" v-if='!isSelectedGoods && !isInput && isFocus'>
|
|||
|
|
<view class="title">热门寄件</view>
|
|||
|
|
<view class="recent-send-list">
|
|||
|
|
<view class="recent-send-item" v-for="(item,index) in hotSendList.data" :key='index'
|
|||
|
|
@click="handleClick(item)">
|
|||
|
|
{{item.name}}{{item.goodsType?'('+item.goodsType.name+')':''}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 模糊查询出的列表 -->
|
|||
|
|
<view class="search-list" v-if="isInput">
|
|||
|
|
<view class="seatch-list-item" @click="handleClick(item)" v-for="(item,index) in dimSearchList.data"
|
|||
|
|
:key="index">
|
|||
|
|
<view class="label">{{item.name}}</view>
|
|||
|
|
<view class="classify">{{item.name}}{{item.goodsType?'('+item.goodsType.name+')':''}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 禁寄物品弹窗 -->
|
|||
|
|
<uni-popup ref="popup" type="bottom" :safe-area="false">
|
|||
|
|
<view class="title">禁止寄递物品目录</view>
|
|||
|
|
<view class="content">
|
|||
|
|
1.枪支(含仿制品、主要零部件)弹药。
|
|||
|
|
</view>
|
|||
|
|
<view class="content">
|
|||
|
|
2．管制器具。如匕首、三棱刮刀、带有自锁装置的弹簧刀(跳刀)、弩、催泪器等。
|
|||
|
|
</view>
|
|||
|
|
<view class="content">
|
|||
|
|
3.爆炸物品。如炸药、雷管、导火索、烟花、鞭炮、摔炮、拉炮、砸炮等。
|
|||
|
|
</view>
|
|||
|
|
<view class="content">
|
|||
|
|
4.压缩和液化气体及其容器。如氢气、甲烷、乙烷、乙炔、打火机、氯气、压缩氧气、氮气等。
|
|||
|
|
</view>
|
|||
|
|
<view class="content">
|
|||
|
|
5.易燃液体。如汽油、柴油、煤油、桐油、丙酮、乙醚、油漆、生漆、苯、酒精、松香油等。
|
|||
|
|
</view>
|
|||
|
|
<view class="content">
|
|||
|
|
6.易燃固体、自燃物质、遇水易燃物质。如红磷、硫磺、固体酒精、火柴、活性炭等。
|
|||
|
|
</view>
|
|||
|
|
<view class="content">
|
|||
|
|
7.氧化剂和过氧化物。如高锰酸盐、高氯酸盐、氧化氢、双氧水等。
|
|||
|
|
</view>
|
|||
|
|
<view class="content">
|
|||
|
|
8.毒性物质。如砷、砒霜、汞化物、铊化物、氰化物、硒粉、苯酚、汞、剧毒农药等。
|
|||
|
|
</view>
|
|||
|
|
<view class="content">
|
|||
|
|
9.生化制品、传染性、感染性物质。如病菌、炭疽、寄生虫、排泄物、医疗废弃物、尸骨、动物器官等。
|
|||
|
|
</view>
|
|||
|
|
<view class="content">
|
|||
|
|
10.放射性物质。如铀、钴、镭、钚等。
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="btn" @click="closeForbidGoodsDialog">知道了</view>
|
|||
|
|
</uni-popup>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import {
|
|||
|
|
ref,
|
|||
|
|
reactive,
|
|||
|
|
onMounted,
|
|||
|
|
} from 'vue';
|
|||
|
|
import {
|
|||
|
|
usualGoodsList,
|
|||
|
|
goodsList
|
|||
|
|
} from '@/pages/api/order.js'
|
|||
|
|
import {
|
|||
|
|
useStore
|
|||
|
|
} from 'vuex';
|
|||
|
|
const store = useStore(); //vuex获取、储存数据
|
|||
|
|
const users = store.state.user
|
|||
|
|
const emits = defineEmits(["@getGoodsInfo"]);
|
|||
|
|
const props = defineProps({
|
|||
|
|
isShowOther: {
|
|||
|
|
type: Function,
|
|||
|
|
required: true
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
const goods = reactive({
|
|||
|
|
info: {}
|
|||
|
|
})
|
|||
|
|
const isSelectedGoods = ref(false) //是否选择了物品
|
|||
|
|
const popup = ref()
|
|||
|
|
const searchValue = ref('')
|
|||
|
|
const isFocus = ref(false) //是否搜索框为聚焦状态
|
|||
|
|
const isInput = ref(false) //是否搜索框为输入状态
|
|||
|
|
const isUpload = ref(true) //是否输入框加载完毕
|
|||
|
|
//模糊查询出的列表数据
|
|||
|
|
const dimSearchList = reactive({
|
|||
|
|
data: []
|
|||
|
|
})
|
|||
|
|
//热门寄件物品
|
|||
|
|
const hotSendList = reactive({
|
|||
|
|
data: []
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const recentSendList = reactive({
|
|||
|
|
data: [],
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
getData()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const getData = () => {
|
|||
|
|
usualGoodsList({
|
|||
|
|
name: ''
|
|||
|
|
}).then((res) => {
|
|||
|
|
if (res.data) {
|
|||
|
|
hotSendList.data = res.data.slice(0, 6)
|
|||
|
|
}
|
|||
|
|
}).catch((err) => {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '网络异常',
|
|||
|
|
duration: 2000,
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
isSelectedGoods.value = users.goodsInfo.name
|
|||
|
|
if (isSelectedGoods.value) goods.info = users.goodsInfo
|
|||
|
|
|
|||
|
|
goodsList().then((res) => {
|
|||
|
|
if (res.data) {
|
|||
|
|
recentSendList.data = res.data.slice(0, 5)
|
|||
|
|
}
|
|||
|
|
}).catch((err) => {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '网络异常',
|
|||
|
|
duration: 2000,
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
const handleSelectedGoods = () => {
|
|||
|
|
searchValue.value = goods.info.name
|
|||
|
|
isFocus.value = true
|
|||
|
|
isInput.value = true
|
|||
|
|
isSelectedGoods.value = false
|
|||
|
|
dimSearch(searchValue.value)
|
|||
|
|
props.isShowOther(true, 'always')
|
|||
|
|
}
|
|||
|
|
//模糊查询列表数据
|
|||
|
|
const dimSearch = (key) => {
|
|||
|
|
if (!isUpload.value) return
|
|||
|
|
isUpload.value = false
|
|||
|
|
usualGoodsList({
|
|||
|
|
name: key
|
|||
|
|
}).then((res) => {
|
|||
|
|
dimSearchList.data = res.data
|
|||
|
|
isUpload.value = true
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const input = (e) => {
|
|||
|
|
isFocus.value = e ? true : false
|
|||
|
|
isInput.value = Boolean(e)
|
|||
|
|
if (!isUpload.value) return
|
|||
|
|
searchValue.value = e
|
|||
|
|
dimSearch(e)
|
|||
|
|
props.isShowOther(e ? true : false)
|
|||
|
|
}
|
|||
|
|
const cancel = () => {
|
|||
|
|
isInput.value = false
|
|||
|
|
props.isShowOther(false)
|
|||
|
|
}
|
|||
|
|
const clear = () => {
|
|||
|
|
props.isShowOther(true)
|
|||
|
|
}
|
|||
|
|
const blur = () => {
|
|||
|
|
console.log('blur')
|
|||
|
|
}
|
|||
|
|
const focus = () => {
|
|||
|
|
isFocus.value = true
|
|||
|
|
props.isShowOther(true)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//用户自定义的物品
|
|||
|
|
const userDefined = () => {
|
|||
|
|
goods.info = {
|
|||
|
|
name: searchValue.value
|
|||
|
|
}
|
|||
|
|
isSelectedGoods.value = Boolean(searchValue.value)
|
|||
|
|
props.isShowOther(false)
|
|||
|
|
emits('getGoodsInfo', {
|
|||
|
|
name: searchValue.value
|
|||
|
|
})
|
|||
|
|
isFocus.value = false
|
|||
|
|
}
|
|||
|
|
//取消物品选择
|
|||
|
|
const handleCancelGood = () => {
|
|||
|
|
goods.info = {}
|
|||
|
|
store.commit('user/setGoodsInfo', {})
|
|||
|
|
emits('getGoodsInfo', {})
|
|||
|
|
isSelectedGoods.value = false
|
|||
|
|
searchValue.value = ''
|
|||
|
|
isFocus.value = false
|
|||
|
|
isInput.value = false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//点击标签物品
|
|||
|
|
const handleClick = (item) => {
|
|||
|
|
searchValue.value = item.value
|
|||
|
|
isFocus.value = true
|
|||
|
|
goods.info = item
|
|||
|
|
isSelectedGoods.value = true
|
|||
|
|
isInput.value = false
|
|||
|
|
props.isShowOther(false)
|
|||
|
|
emits('getGoodsInfo', item)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//打开禁寄物品弹窗
|
|||
|
|
const openForbidGoodsDialog = () => {
|
|||
|
|
popup.value.open('bottom');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//关闭禁寄物品弹窗
|
|||
|
|
const closeForbidGoodsDialog = () => {
|
|||
|
|
popup.value.close();
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped src='./goodsSearch.scss'></style>
|