<!-- 订单列表 -->
<template>
<div class="pariculasr">
<fh :Text="{...propsText}"></fh>
<van-row type="flex">
<van-col span="24">
<van-search v-model="value" show-action placeholder="请输入时间、地点、人员等信息" @search="onSearch">
<template #action>
<div @click="onSearch">搜索</div>
</template>
</van-search>
</van-col>
</van-row>
<div v-if="list.length>0">
<van-row type="flex" class="ME-box BOXshadow bg mT" v-for="item in list" :key="item.id">
<van-col>
<van-card
:tag="item.tag"
:title="('目的地 : '+item.title)"
:desc="('提交人 : '+item.desc) "
:thumb="item.thumb"
>
<template #tags>
<van-tag plain type="danger">订单时间 : {{item.time}}</van-tag>
</template>
<template #footer>
<van-button size="mini" @click="xqyem(item.id)">{{item.text1}}</van-button>
<van-button size="mini" @click="qxdd(item.id)">{{item.text2}}</van-button>
</template>
</van-card>
</van-col>
</van-row>
</div>
<div v-else>
<van-row type="flex" class="ME-box BOXshadow bg mT" v-for="item in mydae" :key="item.id">
<van-col>
<van-card
:tag="item.tag"
:title="('目的地 : '+item.title)"
:desc="('提交人 : '+item.desc) "
:thumb="item.thumb"
>
<template #tags>
<van-tag plain type="danger">订单时间 : {{item.time}}</van-tag>
</template>
<template #footer>
<van-button size="mini" @click="xqyem(item.id)">{{item.text1}}</van-button>
<van-button size="mini" @click="qxdd(item.id)">{{item.text2}}</van-button>
</template>
</van-card>
</van-col>
</van-row>
</div>
</div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import fh from "@/components/tabbar/fh";
import { Dialog } from "vant";
export default {
name: "",
//import引入的组件需要注入到对象中才能使用
components: {
fh,
},
data() {
//这里存放数据
return {
propsText: {
num: 1,
Titletext: "订单列表",
},
value:'',
// 搜索后的展示数据
list: [],
// 原本展示数据
mydae: [
{
id: "0",
tag: "待接单",
title: "广州市越秀区建设大马路规划院",
desc: "李市民 ",
thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
time: "10:00",
text1: "详情",
text2: "取消订单",
},
{
id: "4",
tag: "已接单",
title: "广州市越秀区建设大马路规划院",
desc: "李白 ",
thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
time: "09:00",
text1: "详情",
text2: "取消订单",
},
{
id: "2",
tag: "待接单",
title: "广州市越秀区建设大马路规划院",
desc: "李老头 ",
thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
time: "10:15",
text1: "详情",
text2: "取消订单",
},
{
id: "1",
tag: "已接单",
title: "广州市越秀区建设大马路规划院",
desc: "李逵 ",
thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
time: "10:11",
text1: "详情",
text2: "取消订单",
},
],
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
onClickLeft() {
this.$router.go(-1);
},
xqyem(id) {
this.$router.push({ path: "/xqym", query: { id: id } });
console.log(id);
},
qxdd(id) {
console.log(id);
Dialog.confirm({
title: "订单信息",
message: "您确定呀取消订单吗？",
})
.then(() => {
// on confirm
console.log("确定");
})
.catch(() => {
console.log("取消");
// on cancel
});
},
onSearch(){
console.log(this.value)
let search = this.value
this.list = this.mydae.filter(function(product) {
// 每一项数据
console.log(product)
return Object.keys(product).some(function(key) {
// // 每一项数据的参数名
// console.log(key)
return (
String(product[key])
// toLowerCase() 方法用于把字符串转换为小写。
.toLowerCase()
// indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
.indexOf(search) > -1
);
});
});
}
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
</style>
