增加tags、search 组件
This commit is contained in:
aihe
parent
1760aa3d60
commit
045619b37a
96
components/tpx-search/tpx-search.vue
Normal file
96
components/tpx-search/tpx-search.vue
Normal file
@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-row justify="start">
|
||||
<view v-for="(item) in list" @click="handleChangeTab(item)"
|
||||
:class="`sta-item ${value == item.val?'active':''} stai-${mode}`">
|
||||
<view class="stai-text">
|
||||
{{item.title}}
|
||||
<view class="stai-chk-line"></view>
|
||||
</view>
|
||||
</view>
|
||||
</u-row>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
list: {
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
value: {
|
||||
default () {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
mode: {
|
||||
default () {
|
||||
return 'primary' // primary info
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onHide() {
|
||||
|
||||
},
|
||||
destroyed() {},
|
||||
|
||||
methods: {
|
||||
handleChangeTab(cur){
|
||||
this.$emit('tabchange', cur.val)
|
||||
this.$emit('update:value', cur.val)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.sta-item {
|
||||
flex: 1;
|
||||
padding: 0 0 30rpx 0;
|
||||
margin-right: 30rpx;
|
||||
position: relative;
|
||||
font-size: 28rpx;
|
||||
color: #FFF;
|
||||
opacity: 0.8;
|
||||
.stai-text {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
opacity: 1;
|
||||
.stai-text {
|
||||
.stai-chk-line{
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
bottom: -30rpx;
|
||||
left: 0;
|
||||
margin-left: 10%;
|
||||
width: 80%;
|
||||
height: 4rpx;
|
||||
background: #FFF;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.stai-primary{
|
||||
color: #0E0708;
|
||||
&.active {
|
||||
.stai-chk-line{
|
||||
background: $u-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
128
components/tpx-tags/tpx-tags.vue
Normal file
128
components/tpx-tags/tpx-tags.vue
Normal file
@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="smp-tag" v-for="(item, dIndex) in list">
|
||||
<u-tag :text="`${item.title}`" :plain="!checkedVal.indexOf(item.val) > -1" :type="mode"
|
||||
border-color="transparent" shape="circle" :bg-color="`${(checkedVal.indexOf(item.val)>-1 || (mode == 'primary'))?activeColor:color}`"
|
||||
:color="`${(checkedVal.indexOf(item.val)>-1 || (mode == 'primary'))?'#fff':'#666'}`"
|
||||
@click="handleCheckBoxClick(item)" @close="handleDeleteItem(item)" :closable="closable">
|
||||
</u-tag>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const typeEnum = {
|
||||
single: 'single',
|
||||
multiple: 'multiple'
|
||||
}
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
checkedVal() {
|
||||
let val = this.value
|
||||
let res = []
|
||||
if(typeof val == "object") {
|
||||
res = val
|
||||
}
|
||||
if(typeof val == 'string' && val !== '') {
|
||||
res = val.split(",")
|
||||
}
|
||||
if(typeof val == 'number') {
|
||||
res = [val]
|
||||
}
|
||||
return res
|
||||
},
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
value: {
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
type: {
|
||||
default () {
|
||||
return typeEnum.multiple // typeEnum | ''; 为空代表不做切换选中功能
|
||||
}
|
||||
},
|
||||
closable: {
|
||||
default () {
|
||||
return false
|
||||
}
|
||||
},
|
||||
mode: {
|
||||
default () {
|
||||
return 'info' // 'info' | 'primary'
|
||||
}
|
||||
},
|
||||
color: {
|
||||
default () {
|
||||
return '#F6F6F6'
|
||||
}
|
||||
},
|
||||
activeColor: {
|
||||
default () {
|
||||
return '#de524e'
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onHide() {
|
||||
|
||||
},
|
||||
destroyed() {},
|
||||
|
||||
methods: {
|
||||
handleCheckBoxClick(curItem) {
|
||||
if(this.type) {
|
||||
const curVal = curItem.val
|
||||
let checkedVal = [].concat(this.checkedVal)
|
||||
const hasChked = checkedVal.indexOf(curVal) > -1
|
||||
if(hasChked) {
|
||||
checkedVal = checkedVal.filter(val=> val != curVal)
|
||||
} else {
|
||||
if(this.type == typeEnum.multiple) {
|
||||
checkedVal.push(curVal)
|
||||
} else {
|
||||
checkedVal = [curVal]
|
||||
}
|
||||
}
|
||||
this.changeTabCheck(checkedVal)
|
||||
}
|
||||
this.$emit('onItemClick', curItem)
|
||||
},
|
||||
handleDeleteItem(curItem) {
|
||||
const newList = this.list.filter(t=> t.val != curItem.val)
|
||||
this.$emit('onChange', newList)
|
||||
this.$emit('update:list', newList)
|
||||
},
|
||||
changeTabCheck(checkedVal) {
|
||||
let oldVal = checkedVal
|
||||
let val = oldVal
|
||||
if(this.type == typeEnum.single) {
|
||||
val = checkedVal[0]
|
||||
}
|
||||
|
||||
this.$emit('onChange', val)
|
||||
this.$emit('update:value', val)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
@ -178,11 +178,7 @@
|
||||
|
||||
<view class="com-section mt-30">给快递员捎话</view>
|
||||
<view class="blcok-white">
|
||||
<view class="smp-tag" v-for="(item, index) in tipsList">
|
||||
<u-tag :text="`${item.title}`" :plain="!item.checked" type="info" shape="circle"
|
||||
:bg-color="`${item.checked?'#de524e':''}`" @click="handleCheckBoxClick(item)">
|
||||
</u-tag>
|
||||
</view>
|
||||
<tpx-tags :list="tipsList" v-model:value="submitParam.tips"></tpx-tags>
|
||||
<u-textarea v-model="submitParam.otherDes" border="surround" height="160" placeholder="其他说明"
|
||||
maxlength="50" count></u-textarea>
|
||||
<u-line margin="20rpx 0 10rpx 0"></u-line>
|
||||
@ -257,35 +253,20 @@
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sendTypeList: [{
|
||||
title: '上门取件',
|
||||
val: 1
|
||||
},
|
||||
{
|
||||
title: '仓库收货',
|
||||
val: 2
|
||||
},
|
||||
{
|
||||
title: '整柜提货',
|
||||
val: 3
|
||||
}
|
||||
sendTypeList: [
|
||||
{ title: '上门取件', val: 1 },
|
||||
{ title: '仓库收货', val: 2 },
|
||||
{ title: '整柜提货', val: 3 }
|
||||
],
|
||||
tipsList: [{
|
||||
title: '请带纸箱',
|
||||
val: 3
|
||||
},
|
||||
{
|
||||
title: '需要爬楼',
|
||||
val: 3
|
||||
},
|
||||
{
|
||||
title: '来前电话',
|
||||
val: 3
|
||||
},
|
||||
tipsList: [
|
||||
{ title: '请带纸箱', val: '请带纸箱' },
|
||||
{ title: '需要爬楼', val: '需要爬楼' },
|
||||
{ title: '来前电话', val: '来前电话' },
|
||||
],
|
||||
showCladar: false,
|
||||
agreePrivateRule: false,
|
||||
submitParam: {
|
||||
tips: [],
|
||||
type: 1,
|
||||
otherDes: ''
|
||||
}
|
||||
|
||||
@ -42,39 +42,18 @@
|
||||
<view style="padding: 0 0 30rpx 0">
|
||||
<view>
|
||||
<u-text text="快递状态" size="28" :bold="true" margin="0 0 20rpx 0"></u-text>
|
||||
<view class="smp-tag" v-for="(dItem, dIndex) in dlvTypeList">
|
||||
<u-tag :text="`${dItem.title}`" :plain="!dItem.checked" type="info" shape="circle" :bg-color="`${dItem.checked?'#de524e':''}`" :name="dIndex"
|
||||
@click="handleCheckBoxClick(dItem)">
|
||||
</u-tag>
|
||||
</view>
|
||||
<tpx-tags :list="dlvTypeList" v-model:value="tmpSearchParam.postStatus" ></tpx-tags>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<u-text text="付款方式" size="28" :bold="true" margin="20rpx 0 20rpx 0"></u-text>
|
||||
<view class="smp-tag" v-for="(pItem, pIndex) in payTypeList">
|
||||
<u-tag :text="`${pItem.title}`" :plain="!pItem.checked" type="info" shape="circle" :bg-color="`${pItem.checked?'#de524e':''}`" :name="pIndex"
|
||||
@click="handleCheckBoxClick(pItem)">
|
||||
</u-tag>
|
||||
</view>
|
||||
<tpx-tags :list="payTypeList" v-model:value="tmpSearchParam.payType" ></tpx-tags>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<u-text text="时间范围" size="28" :bold="true" margin="20rpx 0 20rpx 0"></u-text>
|
||||
<view class="smp-tag" v-for="(daItem, daIndex) in dateTypeList"
|
||||
v-show="!(tmpSearchParam.date && dateTypeEnum.custom == daItem.val)"
|
||||
>
|
||||
<u-tag
|
||||
:text="`${daItem.title}`" :plain="!(daItem.val == tmpSearchParam.dateType)" type="info" shape="circle" :bg-color="`${daItem.val == tmpSearchParam.dateType?'#de524e':''}`"
|
||||
@click="handleCheckDate(daItem)">
|
||||
</u-tag>
|
||||
</view>
|
||||
<view v-if="tmpSearchParam.date" class="smp-tag" style="display: block;">
|
||||
<view style="display: inline-block;">
|
||||
<u-tag :text="`${tmpSearchParam.date}`" :plain="false" type="info" shape="circle" :bg-color="`#de524e`"
|
||||
@click="handleSwitchCladar()">
|
||||
</u-tag>
|
||||
</view>
|
||||
</view>
|
||||
<tpx-tags type="single" :list="dateTypeList" v-model:value="tmpSearchParam.dateType" @onItemClick="handleCheckDate"></tpx-tags>
|
||||
<tpx-tags v-if="tmpSearchParam.date" type='' :list="[{title: tmpSearchParam.date}]" @onItemClick="handleSwitchCladar()" mode="primary"></tpx-tags>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -196,10 +175,7 @@
|
||||
showSearchMore: false,
|
||||
showCladar: false,
|
||||
tmpSearchParam: {
|
||||
postStatus: '', // 快递状态
|
||||
payType: '', // 支付类型
|
||||
dateType: '', // 日期类型
|
||||
date: '' // 日期
|
||||
|
||||
},
|
||||
ordList: [
|
||||
{},{},{},{},{},{},{},{}
|
||||
@ -215,6 +191,7 @@
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.initTmpSrchParam()
|
||||
this.initData();
|
||||
},
|
||||
onUnload() {
|
||||
@ -228,8 +205,17 @@
|
||||
uni.stopPullDownRefresh();
|
||||
}, 300);
|
||||
},
|
||||
setListData() {
|
||||
|
||||
initTmpSrchParam(){
|
||||
this.tmpSearchParam = {
|
||||
postStatus: [], // 快递状态
|
||||
payType: [], // 支付类型
|
||||
dateType: [], // 日期类型
|
||||
date: '' // 日期
|
||||
}
|
||||
},
|
||||
loadListData() {
|
||||
// 请求列表数据 TODO
|
||||
console.log('====this.searchParam===', this.searchParam)
|
||||
},
|
||||
|
||||
onScrollBottom() {
|
||||
@ -238,15 +224,14 @@
|
||||
return;
|
||||
}
|
||||
this.showLoadMore = true;
|
||||
setTimeout(() => {
|
||||
this.setListData();
|
||||
}, 300);
|
||||
this.handleSearchParamChange();
|
||||
},
|
||||
handleSearchMoreBtn(){
|
||||
if(!this.showLoadMore) {
|
||||
// 回显更多条件
|
||||
Object.keys(this.tmpSearchParam).map(t=> {
|
||||
this.tmpSearchParam[t] = this.searchParam[t] || ''
|
||||
const val = this.searchParam[t]
|
||||
typeof val != 'undefined' && (this.tmpSearchParam[t] = val)
|
||||
})
|
||||
}
|
||||
this.showSearchMore = !this.showSearchMore
|
||||
@ -255,7 +240,7 @@
|
||||
if(key) {
|
||||
this.searchParam[key] = val
|
||||
}
|
||||
|
||||
this.loadListData()
|
||||
},
|
||||
async handleDealItem(item, deal = { type: '1' }) {
|
||||
switch (deal.type){
|
||||
@ -275,28 +260,20 @@
|
||||
}
|
||||
},
|
||||
handleResetTempSearch(){
|
||||
Object.keys(this.tmpSearchParam).map(t=> {
|
||||
this.tmpSearchParam[t] = ''
|
||||
})
|
||||
this.initTmpSrchParam()
|
||||
},
|
||||
handleConfirmTempSearch(){
|
||||
Object.assign(this.searchParam, this.tmpSearchParam)
|
||||
// Object.keys(this.tmpSearchParam).map(t=> {
|
||||
// this.searchParam[t] = this.tmpSearchParam[t]
|
||||
// })
|
||||
},
|
||||
handleCheckBoxClick(item, key){
|
||||
item.checked = !item.checked
|
||||
this.showSearchMore = false
|
||||
this.handleSearchParamChange();
|
||||
},
|
||||
handleCheckDate(item) {
|
||||
let newVal = item.val
|
||||
if(newVal == dateTypeEnum.custom) {
|
||||
this.handleSwitchCladar()
|
||||
} else {
|
||||
newVal == this.tmpSearchParam.dateType && (newVal = '')
|
||||
this.tmpSearchParam.date = ''
|
||||
}
|
||||
this.tmpSearchParam.dateType = newVal
|
||||
},
|
||||
handleClaOk(res){
|
||||
const ary = Object.values(res)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user