财务详情

components/ws/menu.vue

@@ -19,66 +19,82 @@ export default {
     menuIndex: {
       type: Number,
       default() {
-        return 0
-      },
+        return 0;
+      }
     }
   },
   data() {
-    return {///wo/work_todo
-      items: [{
-        label: '我的工作',
-        link: '/wo/work_todo',
-      }, {
-        label: '协作群组',
-        link: '/group',
-      }, {
-        label: '资金账户',
-        link: '/wo/account',
-      }, {
-        label: '信息设置',
-        link: '/setting',
-      }, {
-        label: '更多服务',
-        link: '/wo/services',
-      }, {
-        label: '代码托管GitInn',
-        link: '/explore/repos',
-      }, {
-        label: '其他',
-        link: '/wo/other',
-      }],
-      homepageType: null,
-    }
+    return {
+      ///wo/work_todo
+      items: [
+        {
+          label: "我的工作",
+          link: "/wo/work_todo"
+        },
+        {
+          label: "协作群组",
+          link: "/group"
+        },
+        {
+          label: "财务详情new",
+          link: "/paysdetail"
+        },
+        {
+          label: "资金账户",
+          link: "/wo/account"
+        },
+        {
+          label: "信息设置",
+          link: "/setting"
+        },
+        {
+          label: "更多服务",
+          link: "/wo/services"
+        },
+        {
+          label: "代码托管GitInn",
+          link: "/explore/repos"
+        },
+        {
+          label: "其他",
+          link: "/wo/other"
+        }
+      ],
+      homepageType: null
+    };
   },
   computed: {
     goTitle() {
-      if(this.homepageType) return this.homepageType === `1` ? `前往个人版` : `前往企业版`
-      else return ``
+      if (this.homepageType)
+        return this.homepageType === `1` ? `前往个人版` : `前往企业版`;
+      else return ``;
     }
   },
   mounted() {
-    this.homepageType = this.userinfo.home_page_type
+    this.homepageType = this.userinfo.home_page_type;
   },
   methods: {
     clickItem(item, index) {
-      location.href = item.link
+      location.href = item.link;
     },
     /**
      * 点击前往
      */
     async clickGo() {
-      let type = this.homepageType === `1` ? `2` : `1`
-      let res = await this.$axios.$post(`/api/user/update_info`, { home_page_type: type || `1`})
+      let type = this.homepageType === `1` ? `2` : `1`;
+      let res = await this.$axios.$post(`/api/user/update_info`, {
+        home_page_type: type || `1`
+      });
       this.$message({
         message: `更新成功, 即将刷新`,
         type: `success`
-      })
+      });
       setTimeout(() => {
-        location.reload()
-      }, 1500)
+        location.reload();
+      }, 1500);
     }
   }
-}
+};
 </script>
 
 <style scoped>

nuxt.config.js

@@ -65,9 +65,9 @@ module.exports = {
   ** Axios module configuration
   */
 	axios: {
-		// See https://github.com/nuxt-community/axios-module#options
+		// See http://github.com/nuxt-community/axios-module#options
 		proxy: process.env.NODE_ENV === 'development',
-		// https: true,
+		// http: true,
 		progress: true,
 		// baseURL: process.env.BASE_URL || '',
 		// browserBaseURL: '',
@@ -80,10 +80,10 @@ module.exports = {
    * Proxy
    */
 	proxy: [
-		[ '/api', { target: 'https://dev.test.proginn.com', changeOrigin: true } ],
-		[ '/file/proxyUpload', { target: 'https://dev.test.proginn.com', changeOrigin: true } ],
-		[ '/upload_image', { target: 'https://dev.test-jishuin.proginn.com', changeOrigin: true } ],
-		[ '/image', { target: 'https://stacdn.proginn.com', changeOrigin: true } ]
+		[ '/api', { target: 'http://dev.test.proginn.com', changeOrigin: true } ],
+		[ '/file/proxyUpload', { target: 'http://dev.test.proginn.com', changeOrigin: true } ],
+		[ '/upload_image', { target: 'http://dev.test-jishuin.proginn.com', changeOrigin: true } ],
+		[ '/image', { target: 'http://stacdn.proginn.com', changeOrigin: true } ]
 	],
 
 	/*

pages/group/index.vue

@@ -20,12 +20,12 @@
         >
           <section class="imgs" v-if="item.developers.length === 1">
             <template v-for="(developer, idx) of item.developers">
-              <img class="img" :src="developer && developer.icon_url" alt="icon_url" :key="idx">
+              <img class="img" :src="developer && developer.icon_url" alt="icon_url" :key="idx" />
             </template>
           </section>
           <section class="imgs" v-else-if="item.developers.length === 2">
             <template v-for="(developer, idx) of item.developers">
-              <img class="img two" :src="developer && developer.icon_url" alt="icon_url" :key="idx">
+              <img class="img two" :src="developer && developer.icon_url" alt="icon_url" :key="idx" />
             </template>
           </section>
           <section class="imgs" v-else>
@@ -36,7 +36,7 @@
                 :src="developer && developer.icon_url"
                 alt="icon_url"
                 :key="idx"
-              >
+              />
             </template>
           </section>
           <p class="name">{{item.name}}</p>
@@ -56,13 +56,13 @@
 </template>
 
 <script>
-import mixinGroup from '@/mixins/group'
+import mixinGroup from "@/mixins/group";
 
 export default {
   head() {
     return {
       title: `云端协作群组-程序员客栈`
-    }
+    };
   },
   mixins: [mixinGroup],
   data() {
@@ -70,38 +70,41 @@ export default {
       list: null,
       pageSize: 15,
       pageTotal: 0,
-      currentPage: 1,
-    }
+      currentPage: 1
+    };
   },
   mounted() {
-    if(this.hasLogined) {
-      this.getList()
+    if (this.hasLogined) {
+      this.getList();
     } else {
       // 前往登录页
-      this.goLogin()
+      this.goLogin();
     }
-    this.getUserStatus()
+    this.getUserStatus();
   },
   methods: {
     async getList() {
-      let res = await this.$axios.$post(`/api/group/list`, { page: this.currentPage, page_size: this.pageSize })
-      if(res) {
-        this.list = res.data.list
-        this.pageTotal = res.data.total
+      let res = await this.$axios.$post(`/api/group/list`, {
+        page: this.currentPage,
+        page_size: this.pageSize
+      });
+      if (res) {
+        this.list = res.data.list;
+        this.pageTotal = res.data.total;
       }
     },
     changePage(page) {
-      this.currentPage = page
-      this.getList()
+      this.currentPage = page;
+      this.getList();
     },
     /**
      * 获取用户状态判断前往那个版本
      */
     async getUserStatus() {
-      let res = await this.$axios.$post(`/api/user/update_info`)
+      let res = await this.$axios.$post(`/api/user/update_info`);
     }
   }
-}
+};
 </script>
 
 <style scoped>

pages/paysdetail/index.vue

@@ -0,0 +1,321 @@
+// 列表页
+<template>
+  <ws-page :menuIndex="2">
+    <section class="group-list">
+      <div id="order_detailbox">
+        <!-- <section> -->
+        <h3 style="font-size:24px">整包协作开发者认证</h3>
+        <span class="lines"></span>
+        <div class="order-infos">
+          <span v-if="successTF">
+            <i class="el-icon-success icons-s"></i>
+            <span>交易成功</span>
+          </span>
+          <span v-else>
+            <i class="el-icon-success icons-f"></i>
+            <span>交易失败</span>
+          </span>
+          <div class="pays-info">
+            <p>
+              <span class="pays-title">实际金额：</span>
+              <span v-if="statusTF" class="detail-pays orange font20">+¥59.00</span>
+              <span v-else class="detail-pays green font20">-¥59.00</span>
+            </p>
+            <p>
+              <span class="pays-title">原始金额：</span>
+              <span v-if="statusTF" class>+¥59.00</span>
+              <span v-else class>-¥59.00</span>
+            </p>
+            <p>
+              <span class="pays-title">支付方式：</span>
+              <span>账户余额</span>
+            </p>
+          </div>
+          <div class="pays-others">
+            <p>
+              <span>创建时间：</span>
+              <span>2019-08-20 13:30</span>
+            </p>
+            <p>
+              <span>提交时间：</span>
+              <span>2019-08-20 13:30</span>
+            </p>
+            <p>
+              <span>到账时间：</span>
+              <span>2019-08-20 13:30</span>
+            </p>
+            <p>
+              <span>订单编号：</span>
+              <span>39984849394894</span>
+            </p>
+            <p>
+              <span>支付编号：</span>
+              <span>2334443423233</span>
+            </p>
+            <p>
+              <span>创建时间：</span>
+              <span>2019-08-20 13:30</span>
+            </p>
+            <p>
+              <span>到账时间：</span>
+              <span>2019-08-20 13:30</span>
+            </p>
+            <p>
+              <span>备注说明：</span>
+              <span>对方空间对方看看风景地方</span>
+            </p>
+          </div>
+          <span class="lines"></span>
+          <h3 style="padding:20px 0 10px 0">整包协作开发者认证</h3>
+          <div class="pays-others" style="padding-bottom:40px">
+            <p>
+              <span>订单类型：</span>
+              <span>资质认证</span>
+            </p>
+            <p>
+              <span>交易类型：</span>
+              <span>购买</span>
+            </p>
+            <p>
+              <span>关联项目：</span>
+              <span>————</span>
+            </p>
+            <p>
+              <span>关联订单：</span>
+              <span class="blue">将减肥咖啡|酒店客房</span>
+            </p>
+            <p>
+              <span>人工财务：</span>
+              <span>是</span>
+            </p>
+            <p>
+              <span>出账账号：</span>
+              <span>2334443423233</span>
+            </p>
+            <p>
+              <span>入账账号：</span>
+              <span>2334443423233</span>
+            </p>
+            <p class="clear">
+              <span class="floatl">数据备注：</span>
+              <span
+                class="mark-width floatl"
+              >接口的咖啡饿的发呆发呆发呆发呆发呆发呆地方地方机看对方空间对方看当看到反馈的风景看对方空间发的快点放假放的看对方空间对方</span>
+              <span class="blue point floatl" @click="centerDialogVisible=true">查看详情</span>
+            </p>
+            <p>
+              <span>内部备注：</span>
+              <span>2334443423233</span>
+            </p>
+          </div>
+        </div>
+        <el-dialog title="数据备注" :visible.sync="centerDialogVisible" width="50%" center>
+          <p>接口的咖啡饿的发呆发呆发呆发呆发呆发呆地方地方机看对方空间对方看当看到反馈的风景看对方空间发的快点放假放的看对方空间对方</p>
+          <span slot="footer" class="dialog-footer">
+            <el-button @click=" centerDialogVisible=false">取 消</el-button>
+            <el-button type="primary" @click="centerDialogVisible=false">确 定</el-button>
+          </span>
+        </el-dialog>
+        <!-- </section> -->
+      </div>
+    </section>
+  </ws-page>
+</template>
+
+<script>
+import mixinGroup from "@/mixins/group";
+
+export default {
+  head() {
+    return {
+      title: `整包协作开发者认证`
+    };
+  },
+  mixins: [mixinGroup],
+  data() {
+    return {
+      successTF: true,
+      statusTF: true,
+      centerDialogVisible: false
+    };
+  }
+};
+</script>
+
+<style scoped>
+.group-list {
+  display: flex;
+  flex-direction: column;
+  width: 816px;
+  padding: 20px;
+  background: white;
+}
+.top {
+  display: flex;
+  justify-content: space-between;
+  height: 40px;
+}
+.info {
+  display: flex;
+  align-items: center;
+}
+.info p {
+  margin-left: 12px;
+  color: #999;
+  font-size: 14px;
+}
+.el-button {
+  width: 100px;
+  background: var(--mainColor);
+}
+.list {
+  display: flex;
+  flex-wrap: wrap;
+}
+.group-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 250px;
+  height: 220px;
+  border-radius: 4px;
+  border: 1px solid rgba(220, 223, 230, 1);
+  margin-top: 20px;
+  font-size: 14px;
+  color: #333;
+  cursor: pointer;
+  margin: 20px 4px 0;
+}
+.group-item:nth-child(n + 2) {
+  /* margin-right: 0; */
+}
+.group-item:hover {
+  border: 1px solid var(--mainColor);
+}
+.imgs {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 48px;
+  height: 78px;
+}
+.img {
+  width: 48px;
+  height: 48px;
+  border: 2px solid white;
+  border-radius: 50%;
+}
+.two {
+  position: absolute;
+}
+.two:nth-child(1) {
+  top: 0;
+  left: 0;
+}
+.two:nth-child(2) {
+  top: 30px;
+  left: 0;
+}
+.three {
+  position: absolute;
+}
+.three:nth-child(1) {
+  top: 0;
+  left: 0;
+}
+.three:nth-child(2) {
+  top: 30px;
+  left: -20px;
+}
+.three:nth-child(3) {
+  top: 30px;
+  left: 20px;
+}
+.name {
+  margin: 14px 0 10px;
+}
+.count {
+  color: #999;
+}
+.el-pagination {
+  margin-top: 20px;
+  text-align: center;
+}
+#order_detailbox {
+  padding: 30px;
+  font-size: 14px;
+}
+#order_detailbox h3 {
+  /* font-size: 24px; */
+}
+#order_detailbox .lines {
+  padding-top: 30px;
+  display: block;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+#order_detailbox .icons-s {
+  color: #5dc945;
+  font-size: 34px;
+  padding: 25px 0;
+  vertical-align: middle;
+}
+#order_detailbox .icons-f {
+  color: red;
+  font-size: 34px;
+  padding: 30px 0;
+  vertical-align: middle;
+}
+.pays-info .pays-title {
+  color: #1d2a3a;
+  font-weight: bold;
+}
+.orange {
+  color: rgba(255, 152, 0, 1);
+}
+.green {
+  color: rgba(37, 155, 36, 1);
+}
+.blue {
+  color: #005fef;
+}
+.font20 {
+  font-size: 20px;
+}
+.pays-info > p,
+.pays-others > p {
+  padding-bottom: 6px;
+}
+.pays-others {
+  font-size: 13px;
+  color: #666666;
+}
+.pays-others h3 {
+  padding-top: 20px;
+  color: black;
+  font-size: 16px;
+}
+
+.point {
+  cursor: pointer;
+}
+.mark-width {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+  width: 350px;
+}
+.floatl {
+  float: left;
+}
+.clear::after {
+  clear: both;
+  display: block;
+  content: "";
+}
+.el-button--default {
+  background: transparent !important;
+}
+</style>

yarn.lock

@@ -4844,8 +4844,8 @@ minizlib@^1.2.1:
 
 mint-ui@^2.2.13:
   version "2.2.13"
-  resolved "https://registry.npm.taobao.org/mint-ui/download/mint-ui-2.2.13.tgz#856a2cba9608c6ecf21f0e521ce89ed8ddfe33d3"
-  integrity sha1-hWosupYIxuzyHw5SHOie2N3+M9M=
+  resolved "https://registry.yarnpkg.com/mint-ui/-/mint-ui-2.2.13.tgz#856a2cba9608c6ecf21f0e521ce89ed8ddfe33d3"
+  integrity sha512-Xz1SFagHSzKOprwQv3fcekXT5RJvhh939zwZHcWeazk1OJrCjsD4I2qm49AEUCfT1AoYzC+rsZIwGP/J6LwVVw==
   dependencies:
     array-find-index "^1.0.2"
     raf.js "0.0.4"