交易申请认证

src/layout/supermarket/transData.vue

@@ -0,0 +1,138 @@
+<template>
+  <div id="transData">
+    <el-row>
+      <el-col :span="24" class="transData">
+        <el-table :data="serviceData" style="width: 100%" border>
+          <el-table-column label="序号" type="index" width="50" align="left"> </el-table-column>
+          <el-table-column prop="message" label="交易信息" width="100" align="left"> </el-table-column>
+          <el-table-column prop="user" label="交易信息发布用户" width="140" align="left"> </el-table-column>
+          <el-table-column prop="shenUser" label="申请用户" width="100" align="left"> </el-table-column>
+          <el-table-column prop="date" label="创建时间" width="100" align="left"> </el-table-column>
+          <el-table-column prop="shenBiaoji" label="申请人交易结果标记" width="108" align="left"> </el-table-column>
+          <el-table-column prop="faBiaoji" label="发布人交易结果标记" width="108" align="left"> </el-table-column>
+          <el-table-column prop="content" label="交易申请说明" width="109" align="left"> </el-table-column>
+          <el-table-column prop="state" label="当前交易状态" width="109" align="left"> </el-table-column>
+          <el-table-column label="操作" width="120" align="left">
+            <template slot-scope="">
+              <el-button size="mini" type="primary" icon="el-icon-edit" title="认证成功" @click="adopt"></el-button>
+              <el-button size="mini" type="danger" icon="el-icon-delete" title="认证失败" @click="refuse"></el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <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-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'transData',
+  props: {
+    serviceData: null,
+  },
+  components: {},
+  data: () => ({
+    currentPage: 1,
+    info: {},
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+    refuse() {
+      this.$confirm('审核拒绝，您确定吗?', '系统提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
+          this.$message({
+            type: 'success',
+            message: '操作成功!',
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消操作',
+          });
+        });
+    },
+    adopt() {
+      this.$confirm('审核通过，您确定吗?', '系统提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
+          this.$message({
+            type: 'success',
+            message: '操作成功!',
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消操作',
+          });
+        });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.transData {
+  padding: 20px 0 0 0;
+}
+/deep/.el-table th {
+  padding: 5px 0;
+  background: #f2f2f2;
+}
+/deep/.el-table td {
+  padding: 5px 0;
+}
+/deep/.el-table tr {
+  background: #f9f9f9;
+}
+/deep/.el-table tr:nth-child(2n) {
+  background: #fff;
+}
+.page {
+  text-align: center;
+  padding: 30px 0;
+}
+.text {
+  font-size: 16px;
+  padding: 0 0 10px 0;
+}
+.text span {
+  display: inherit;
+  text-indent: 1rem;
+}
+/deep/.el-form-item {
+  margin-bottom: 0;
+}
+/deep/.el-dialog__footer {
+  text-align: center;
+}
+</style>

src/views/supermarket/trans/index.vue

@@ -1,19 +1,71 @@
 <template>
   <div id="index">
-    <p>index</p>
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="top">
+          <topInfo :topTitle="topTitle"></topInfo>
+        </el-col>
+        <el-col :span="24" class="main">
+          <transData :serviceData="serviceData"></transData>
+        </el-col>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
+import topInfo from '@/layout/public/top.vue';
+import transData from '@/layout/supermarket/transData.vue';
 export default {
   name: 'index',
   props: {},
-  components: {},
-  data: () => ({}),
+  components: {
+    topInfo, //头部标题
+    transData, //商铺类别管理
+  },
+  data: () => ({
+    topTitle: '交易申请认证',
+    input: '',
+    serviceData: [
+      {
+        message: '交易信息',
+        user: '企业用户',
+        shenUser: '普通用户',
+        date: '2019-01-14',
+        shenBiaoji: '未提交',
+        faBiaoji: '未提交',
+        content: '交易申请说明',
+        state: '交易成功',
+      },
+      {
+        message: '十条数据',
+        user: '企业用户',
+        shenUser: '普通用户',
+        date: '2019-01-14',
+        shenBiaoji: '未提交',
+        faBiaoji: '未提交',
+        content: '交易申请说明',
+        state: '交易成功',
+      },
+    ],
+  }),
   created() {},
   computed: {},
-  methods: {},
+  methods: {
+    addData() {
+      this.$router.push({ path: './detail' });
+    },
+  },
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.top {
+  height: 40px;
+  background-color: #f5f5f5;
+}
+.main {
+  width: 97%;
+  margin: 0 15px;
+}
+</style>