|
@@ -0,0 +1,420 @@
|
|
|
+<template>
|
|
|
+ <div id="myRelease">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="myRelease">
|
|
|
+ <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
|
|
|
+ <el-tab-pane label="我的需求" name="first">
|
|
|
+ <el-col :span="24" class="myxuqiu">
|
|
|
+ <el-tabs v-model="activeNames" @tab-click="handleClicks">
|
|
|
+ <el-tab-pane label="已审核信息" name="first">
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ <el-col :span="24" class="xuqiuYishenList" v-for="(item, index) in xuqiuYishenList" :key="index">
|
|
|
+ <el-col :span="20" class="num"> 信息号:{{ item.num }} </el-col>
|
|
|
+ <el-col :span="4" class="date">{{ item.date }} </el-col>
|
|
|
+ <el-col :span="10" class="left">
|
|
|
+ <el-col :span="12" class="image">
|
|
|
+ <el-image style="width:100px;height:100px;" :src="item.pic"></el-image>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="center">
|
|
|
+ <el-col :span="24" class="name">
|
|
|
+ {{ item.name }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="name"> 类别:{{ item.type }} </el-col>
|
|
|
+ <el-col :span="24" class="name yen"> ¥{{ item.yen }} </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10" class="shenqing">
|
|
|
+ 最新申请:
|
|
|
+ <p>{{ item.content }}</p>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4" class="btn">
|
|
|
+ <el-link :underline="false">编辑</el-link><br />
|
|
|
+ <el-link :underline="false">彻底删除</el-link><br />
|
|
|
+ <el-link :underline="false">查看详情</el-link>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="page">
|
|
|
+ <el-pagination
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="currentPage"
|
|
|
+ layout="total, prev, pager, next, jumper"
|
|
|
+ :total="1"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </el-col>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="审核中信息" name="second">
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ <el-col :span="24" class="xuqiuYishenList" v-for="(item, index) in xuqiuYishenList" :key="index">
|
|
|
+ <el-col :span="20" class="num"> 信息号:{{ item.num }} </el-col>
|
|
|
+ <el-col :span="4" class="date">{{ item.date }} </el-col>
|
|
|
+ <el-col :span="10" class="left">
|
|
|
+ <el-col :span="12" class="image">
|
|
|
+ <el-image style="width:100px;height:100px;" :src="item.pic"></el-image>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="center">
|
|
|
+ <el-col :span="24" class="name">
|
|
|
+ {{ item.name }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="name"> 类别:{{ item.type }} </el-col>
|
|
|
+ <el-col :span="24" class="name yen"> ¥{{ item.yen }} </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10" class="shenqing">
|
|
|
+ 最新申请:
|
|
|
+ <p>{{ item.content }}</p>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4" class="btn">
|
|
|
+ <el-link :underline="false">审核</el-link><br />
|
|
|
+ <el-link :underline="false">彻底删除</el-link>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="page">
|
|
|
+ <el-pagination
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="currentPage"
|
|
|
+ layout="total, prev, pager, next, jumper"
|
|
|
+ :total="1"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </el-col>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="交易完成信息" name="third">
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ <el-col :span="24" class="xuqiuYishenList" v-for="(item, index) in xuqiuYishenList" :key="index">
|
|
|
+ <el-col :span="20" class="num"> 信息号:{{ item.num }} </el-col>
|
|
|
+ <el-col :span="4" class="date">{{ item.date }} </el-col>
|
|
|
+ <el-col :span="10" class="left">
|
|
|
+ <el-col :span="12" class="image">
|
|
|
+ <el-image style="width:100px;height:100px;" :src="item.pic"></el-image>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="center">
|
|
|
+ <el-col :span="24" class="name">
|
|
|
+ {{ item.name }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="name"> 类别:{{ item.type }} </el-col>
|
|
|
+ <el-col :span="24" class="name yen"> ¥{{ item.yen }} </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10" class="shenqing">
|
|
|
+ 最新申请:
|
|
|
+ <p>{{ item.content }}</p>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4" class="btn">
|
|
|
+ <el-link :underline="false">编辑</el-link><br />
|
|
|
+ <el-link :underline="false">彻底删除</el-link><br />
|
|
|
+ <el-link :underline="false">查看详情</el-link>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="page">
|
|
|
+ <el-pagination
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="currentPage"
|
|
|
+ layout="total, prev, pager, next, jumper"
|
|
|
+ :total="1"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </el-col>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </el-col>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="我的供给" name="second">
|
|
|
+ <el-col :span="24" class="myxuqiu">
|
|
|
+ <el-tabs v-model="activeNames" @tab-click="handleClicks">
|
|
|
+ <el-tab-pane label="已审核信息" name="first">
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ <el-col :span="24" class="xuqiuYishenList" v-for="(item, index) in xuqiuYishenList" :key="index">
|
|
|
+ <el-col :span="20" class="num"> 信息号:{{ item.num }} </el-col>
|
|
|
+ <el-col :span="4" class="date">{{ item.date }} </el-col>
|
|
|
+ <el-col :span="10" class="left">
|
|
|
+ <el-col :span="12" class="image">
|
|
|
+ <el-image style="width:100px;height:100px;" :src="item.pic"></el-image>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="center">
|
|
|
+ <el-col :span="24" class="name">
|
|
|
+ {{ item.name }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="name"> 类别:{{ item.type }} </el-col>
|
|
|
+ <el-col :span="24" class="name yen"> ¥{{ item.yen }} </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10" class="shenqing">
|
|
|
+ 最新申请:
|
|
|
+ <p>{{ item.content }}</p>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4" class="btn">
|
|
|
+ <el-link :underline="false">编辑</el-link><br />
|
|
|
+ <el-link :underline="false">彻底删除</el-link><br />
|
|
|
+ <el-link :underline="false">查看详情</el-link>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="page">
|
|
|
+ <el-pagination
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="currentPage"
|
|
|
+ layout="total, prev, pager, next, jumper"
|
|
|
+ :total="1"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </el-col>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="审核中信息" name="second">
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ <el-col :span="24" class="xuqiuYishenList" v-for="(item, index) in xuqiuYishenList" :key="index">
|
|
|
+ <el-col :span="20" class="num"> 信息号:{{ item.num }} </el-col>
|
|
|
+ <el-col :span="4" class="date">{{ item.date }} </el-col>
|
|
|
+ <el-col :span="10" class="left">
|
|
|
+ <el-col :span="12" class="image">
|
|
|
+ <el-image style="width:100px;height:100px;" :src="item.pic"></el-image>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="center">
|
|
|
+ <el-col :span="24" class="name">
|
|
|
+ {{ item.name }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="name"> 类别:{{ item.type }} </el-col>
|
|
|
+ <el-col :span="24" class="name yen"> ¥{{ item.yen }} </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10" class="shenqing">
|
|
|
+ 最新申请:
|
|
|
+ <p>{{ item.content }}</p>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4" class="btn">
|
|
|
+ <el-link :underline="false">审核</el-link><br />
|
|
|
+ <el-link :underline="false">彻底删除</el-link>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="page">
|
|
|
+ <el-pagination
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="currentPage"
|
|
|
+ layout="total, prev, pager, next, jumper"
|
|
|
+ :total="1"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </el-col>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="交易完成信息" name="third">
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ <el-col :span="24" class="xuqiuYishenList" v-for="(item, index) in xuqiuYishenList" :key="index">
|
|
|
+ <el-col :span="20" class="num"> 信息号:{{ item.num }} </el-col>
|
|
|
+ <el-col :span="4" class="date">{{ item.date }} </el-col>
|
|
|
+ <el-col :span="10" class="left">
|
|
|
+ <el-col :span="12" class="image">
|
|
|
+ <el-image style="width:100px;height:100px;" :src="item.pic"></el-image>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="center">
|
|
|
+ <el-col :span="24" class="name">
|
|
|
+ {{ item.name }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="name"> 类别:{{ item.type }} </el-col>
|
|
|
+ <el-col :span="24" class="name yen"> ¥{{ item.yen }} </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10" class="shenqing">
|
|
|
+ 最新申请:
|
|
|
+ <p>{{ item.content }}</p>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4" class="btn">
|
|
|
+ <el-link :underline="false">编辑</el-link><br />
|
|
|
+ <el-link :underline="false">彻底删除</el-link><br />
|
|
|
+ <el-link :underline="false">查看详情</el-link>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="page">
|
|
|
+ <el-pagination
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="currentPage"
|
|
|
+ layout="total, prev, pager, next, jumper"
|
|
|
+ :total="1"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </el-col>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </el-col>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'myRelease',
|
|
|
+ props: {
|
|
|
+ xuqiuYishenList: null,
|
|
|
+ },
|
|
|
+ components: {},
|
|
|
+ data: () => ({
|
|
|
+ activeName: 'first',
|
|
|
+ activeNames: 'first',
|
|
|
+ currentPage: 1,
|
|
|
+ }),
|
|
|
+ created() {},
|
|
|
+ computed: {},
|
|
|
+ methods: {
|
|
|
+ handleClick(tab, event) {
|
|
|
+ console.log(tab, event);
|
|
|
+ },
|
|
|
+ handleClicks(tab, event) {
|
|
|
+ console.log(tab, event);
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ console.log(`每页 ${val} 条`);
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ console.log(`当前页: ${val}`);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+p {
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+/deep/.el-tabs__item {
|
|
|
+ padding: 0 53px;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #888;
|
|
|
+ height: 60px;
|
|
|
+ line-height: 60px;
|
|
|
+}
|
|
|
+/deep/.el-tabs__header {
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+/deep/.el-tabs--card > .el-tabs__header {
|
|
|
+ border-bottom: 1px solid #215299;
|
|
|
+}
|
|
|
+/deep/.el-tabs--card > .el-tabs__header .el-tabs__nav {
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+/deep/.el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:nth-child(2) {
|
|
|
+ padding-left: 53px;
|
|
|
+}
|
|
|
+/deep/.el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:last-child {
|
|
|
+ padding-right: 53px;
|
|
|
+}
|
|
|
+/deep/.el-tabs__item.is-active {
|
|
|
+ background-color: #215299;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.myxuqiu {
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+/deep/.myxuqiu .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
|
|
|
+ padding-left: 0;
|
|
|
+}
|
|
|
+/deep/.myxuqiu .el-tabs--top .el-tabs__item.is-top:last-child {
|
|
|
+ padding-right: 20px;
|
|
|
+}
|
|
|
+/deep/.myxuqiu .el-tabs__item {
|
|
|
+ padding: 0 20px;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #888;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+}
|
|
|
+/deep/.myxuqiu .el-tabs__item.is-active {
|
|
|
+ background-color: transparent;
|
|
|
+ color: #215299;
|
|
|
+}
|
|
|
+/deep/.myxuqiu .el-tabs__active-bar {
|
|
|
+ background-color: #215299;
|
|
|
+ height: 0;
|
|
|
+}
|
|
|
+.info {
|
|
|
+ margin: 20px 0 0 0;
|
|
|
+ height: 860px;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.xuqiuYishenList {
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+}
|
|
|
+.xuqiuYishenList .num {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ background-color: #fafafa;
|
|
|
+ padding: 0 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #888;
|
|
|
+}
|
|
|
+.xuqiuYishenList .date {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ background-color: #fafafa;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #888;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.xuqiuYishenList .left {
|
|
|
+ height: 100px;
|
|
|
+ margin: 10px 0;
|
|
|
+ border-right: 1px solid #ccc;
|
|
|
+ padding: 0 0 0 10px;
|
|
|
+}
|
|
|
+.xuqiuYishenList .left .image {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+}
|
|
|
+.xuqiuYishenList .center {
|
|
|
+ height: 100px;
|
|
|
+ padding: 0 0 0 10px;
|
|
|
+}
|
|
|
+.xuqiuYishenList .center .name {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #555;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+}
|
|
|
+.xuqiuYishenList .center .yen {
|
|
|
+ color: #ff0000;
|
|
|
+}
|
|
|
+.xuqiuYishenList .shenqing {
|
|
|
+ height: 100px;
|
|
|
+ margin: 10px 0;
|
|
|
+ border-right: 1px solid #ccc;
|
|
|
+ padding: 0 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #215299;
|
|
|
+}
|
|
|
+.xuqiuYishenList .shenqing p {
|
|
|
+ color: #555;
|
|
|
+ font-size: 14px;
|
|
|
+ text-indent: 1rem;
|
|
|
+ line-height: 25px;
|
|
|
+}
|
|
|
+.xuqiuYishenList .btn {
|
|
|
+ text-align: center;
|
|
|
+ height: 100px;
|
|
|
+ margin: 10px 0;
|
|
|
+ line-height: 30px;
|
|
|
+}
|
|
|
+.xuqiuYishenList .btn .el-link {
|
|
|
+ color: #215299;
|
|
|
+ margin: 0 10px;
|
|
|
+}
|
|
|
+.page {
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ margin: 40px 0;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+</style>
|