dealPage

package-lock.json

@@ -2724,6 +2724,16 @@
       "integrity": "sha512-1QL4544moEsDVH9T/l6Cemov/37iv1RtoKf7NJ04A60+4MREXNfx/QvavbH6QoGdsD4N4Mwy49cmaINR/o2mdg==",
       "dev": true
     },
+    "clipboard": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz",
+      "integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "cliui": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/cliui/-/cliui-2.1.0.tgz",
@@ -3945,6 +3955,11 @@
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
       "dev": true
     },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+    },
     "delegates": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/delegates/-/delegates-1.0.0.tgz",
@@ -5806,6 +5821,14 @@
         }
       }
     },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
     "gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.0.1.tgz",
@@ -12321,6 +12344,11 @@
         }
       }
     },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA=="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/select-hose/-/select-hose-2.0.0.tgz",
@@ -13802,6 +13830,11 @@
       "integrity": "sha512-qsdtZH+vMoCARQtyod4imc2nIJwg9Cc7lPRrw9CzF8ZKR0khdr8+2nX80PBhET3tcyTtJDxAffGh2rXH4tyU8A==",
       "dev": true
     },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+    },
     "to-arraybuffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "axios": "^0.18.1",
     "better-scroll": "^1.15.2",
+    "clipboard": "^2.0.11",
     "dayjs": "^1.10.5",
     "echarts": "^4.7.0",
     "exif-js": "^2.3.0",

src/assets/iconfont.css

@@ -1,23 +1,29 @@
 @font-face {
-    font-family: "courseIcon"; /* Project id 4478034 */
-    src: url('//at.alicdn.com/t/c/font_4478034_i2raqw7pnb8.woff2?t=1711094974111') format('woff2'),
-         url('//at.alicdn.com/t/c/font_4478034_i2raqw7pnb8.woff?t=1711094974111') format('woff'),
-         url('//at.alicdn.com/t/c/font_4478034_i2raqw7pnb8.ttf?t=1711094974111') format('truetype');
-  }
-  
-  .courseIcon {
-    font-family: "courseIcon" !important;
-    font-size: 16px;
-    font-style: normal;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-  
-  .icon-shenfenzheng:before {
-    content: "\e61b";
-  }
-  
-  .icon-erweima:before {
-    content: "\e7ad";
-  }
-  
+  font-family: "courseIcon"; /* Project id 4478034 */
+  src: url("//at.alicdn.com/t/c/font_4478034_feuwvdh5ol8.woff2?t=1711172080312")
+      format("woff2"),
+    url("//at.alicdn.com/t/c/font_4478034_feuwvdh5ol8.woff?t=1711172080312")
+      format("woff"),
+    url("//at.alicdn.com/t/c/font_4478034_feuwvdh5ol8.ttf?t=1711172080312")
+      format("truetype");
+}
+
+.courseIcon {
+  font-family: "courseIcon" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-shenfenzheng:before {
+  content: "\e61b";
+}
+
+.icon-erweima:before {
+  content: "\e7ad";
+}
+
+.icon-fuzhi:before {
+  content: "\e8b0";
+}

src/router/course.js

@@ -1,18 +1,32 @@
   // 在线课程相关
   const routes = [
+    {
+      path: '/courseLogin',
+      name: 'courseLogin',
+      component: () => import('@/view/course/user/login'),
+      label: '课程登录',
+      need_login: false,
+    },
     {
       path: '/courseHome',
       name: 'courseHome',
       component: () => import('@/view/course/home'),
       label: '课程首页',
-      need_login: true,
+      need_login: false,
     },
     {
-      path: '/courseLogin',
-      name: 'courseLogin',
-      component: () => import('@/view/course/user/login'),
-      label: '课程登录',
-      need_login: true,
+      path: '/courseTeam/:id',
+      name: 'courseHome',
+      component: () => import('@/view/course/user/team'),
+      label: '我的团队',
+      need_login: false,
+    },
+    {
+      path: '/courseDeal/:id',
+      name: 'courseDeal',
+      component: () => import('@/view/course/user/deal'),
+      label: '课程交易',
+      need_login: false,
     },
 ]
 export default routes

src/view/course/components/CourseTeam.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="team-page">
+    <div class="team-s">
+      <scroller
+        class="team-scroll"
+        :on-refresh="refresh"
+        :isInitRefresh="false"
+      >
+        <form action="/">
+          <van-search
+            v-model="searchValue"
+            placeholder="请输入搜索团队成员"
+            @search="onSearch"
+          />
+        </form>
+        <div class="team-desc">
+          <p v-if="teamType == 1">团队人数：{{ teamData.count }}人</p>
+          <p v-if="teamType == 2">近{{ days }}天有交易的人</p>
+        </div>
+        <div class="team-list">
+          <div class="team-flex" v-for="(item, index) in teamData.list">
+            <userImage
+              class="about-me__avatar"
+              :img_url="item.img_url"
+              :user_name="item.name"
+              width=".8rem"
+              height=".8rem"
+            ></userImage>
+            <div class="flex-r">
+              <div class="flex-tel">
+                <p>{{ item.name }}</p>
+                <span>手机:{{ item.tel }}</span>
+              </div>
+              <div class="flex-deal" @click="otDealPage(item.id)">交易</div>
+            </div>
+          </div>
+        </div>
+      </scroller>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  components: {},
+  props: {
+    teamType: {
+      type: String,
+      default: 1
+    },
+    days: {
+      type: Number,
+      default: 30
+    }
+  },
+  data() {
+    return {
+      searchValue: "",
+      teamData: {
+        count: 0,
+        list: []
+      }
+    };
+  },
+  computed: {},
+  created() {
+    this.init();
+  },
+  methods: {
+    //跳转人员交易记录
+    otDealPage(id) {
+      this.$router.push({
+        path: `/courseDeal/${id}`,
+      });
+    },
+    //初始化
+    init() {
+      let data = {
+        count: 10,
+        list: [
+          {
+            img_url: "../../../assets/course.jpg",
+            name: "张三",
+            tel: "16844554155",
+            id: 123
+          },
+          {
+            img_url: "../../../assets/course.jpg",
+            name: "李四",
+            tel: "16844554155",
+            id: 123
+          },
+          {
+            img_url: "../../../assets/course.jpg",
+            name: "王五",
+            tel: "16844554155",
+            id: 123
+          }
+        ]
+      };
+      if (this.teamType == 2) {
+        data.list[0].name = "李白";
+      }
+      this.teamData.count = data.count;
+      this.teamData.list = data.list;
+    },
+    //人员搜索
+    onSearch() {},
+    //下拉刷新
+    refresh(done) {
+      setTimeout(() => {
+        done();
+      }, 1000);
+    }
+  }
+};
+</script>
+<style scoped lang="scss">
+* {
+  margin: 0;
+  padding: 0;
+}
+.team-page {
+  background-color: #fff;
+  .team-s {
+    height: calc(100vh - 0.44rem) !important;
+    position: relative;
+    .team-desc {
+      padding: 0 0.32rem 0.25rem;
+      border-bottom: 1px solid rgb(241, 241, 241);
+      p {
+        font-size: 0.28rem;
+        line-height: 0.8;
+        color: #000;
+        font-weight: 550;
+      }
+    }
+    .team-list {
+      padding: 0 0.32rem;
+      .team-flex {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.15rem 0;
+        border-bottom: 1px solid rgb(241, 241, 241);
+        .flex-r {
+          padding: 0 0.2rem;
+          display: flex;
+          flex: 1;
+          justify-content: space-between;
+          align-items: center;
+          .flex-tel {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            p {
+              font-size: 0.32rem;
+              color: #000;
+              line-height: 1.5;
+            }
+            span {
+              font-size: 0.28rem;
+              color: #666;
+              line-height: 1.2;
+            }
+          }
+          .flex-deal {
+            font-size: 0.28rem;
+            color: #0075fc;
+            line-height: 1.4;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/view/course/components/courseList.vue

@@ -1,29 +1,46 @@
 <template>
-    <div class="listOuer" :style="{ background: outBg }">
-      <div class="listTit" v-if="title">
-        <p>{{ title }}</p>
-      </div>
-      <div class="listInner">
-        <div class="listLi" v-for="(item, index) in dataList" :key="index">
-          <div class="listLiTop">
-            <img :src="item.url" />
-            <div class="liInfo">
-              <div class="courseLiTit">
-                <p>{{ item.title }}</p>
-              </div>
-              <div class="courseLiDesc">
-                <span>共{{ item.courseNum }}节</span>
-                <span style="color: #F76146;">￥{{ item.price }}</span>
-              </div>
+  <div class="listOuer">
+    <div class="listTit" v-if="fixedTitle" :style="{'background': outBg}">
+      <p>{{ fixedTitle }}</p>
+    </div>
+    <div class="listInner">
+      <div class="listLi" v-for="(item, index) in dataList" :key="index" :class="{'marginGap':listType==2}" :style="{'background': outBg}">
+        <div class="listLiTit" v-if='item.direction'>
+          <p>
+            {{ item.direction == "to" ? "卖出" : "收到"
+            }}<span>【{{ item.dealNumber }}】套</span>课程
+          </p>
+        </div>
+        <div class="listLiTop">
+          <img :src="item.url" />
+          <div class="liInfo">
+            <div class="courseLiTit">
+              <p>{{ item.title }}</p>
+            </div>
+            <div class="courseLiDesc">
+              <span>共{{ item.courseNum }}节</span>
+              <span style="color: #F76146;">￥{{ item.price }}</span>
             </div>
           </div>
-          <div class="courseBtm" v-if="showNum">
-            <span>剩余名额:{{ item.surplus }}套</span>
-            <span>已卖出:{{ item.sale }}套</span>
-          </div>
+        </div>
+        <div class="courseBtm" v-if="showNum">
+          <span>剩余名额:{{ item.surplus }}套</span>
+          <span>已卖出:{{ item.sale }}套</span>
+        </div>
+        <div v-if="!showNum&&!(item.dealStatus && item.dealStatus !== 4)" style="height: .2rem;"></div>
+        <div
+          class="dealComfirm"
+          @click="comfirm(item)"
+          v-if="item.dealStatus && item.dealStatus !== 4"
+          :class="item.direction=='to'?'dealTo':''"
+        >
+          <span>{{
+            item.direction == "to" ? "待对方确认" : "确认接收"
+          }}</span>
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -31,21 +48,28 @@ export default {
   name: "courseList",
   components: {},
   props: {
+    //数组列表
     dataList: {
       type: Array,
       default: []
     },
+    //背景色
     outBg: {
       type: String,
       default: "#FFF"
     },
-    title: {
+    //提示
+    fixedTitle: {
       type: String,
       default: ""
     },
     showNum: {
       type: Boolean,
       default: false
+    },
+    listType:{
+      type:Number,
+      default:"1"
     }
   },
   data() {
@@ -53,7 +77,11 @@ export default {
   },
   created() {},
   mounted() {},
-  methods: {},
+  methods: {
+    comfirm(item){
+      this.$emit('dealComfirm',item)
+    }
+  },
   computed: {}
 };
 </script>
@@ -64,9 +92,11 @@ export default {
 }
 .listOuer {
   border-radius: 0.1rem;
-  padding: 0.1rem 0.15rem;
+  overflow: hidden;
+  padding: 0.1rem 0;
   .listTit {
     p {
+      padding-left: .2rem;
       font-size: 0.3rem;
       color: #000;
       line-height: 2;
@@ -78,11 +108,44 @@ export default {
   }
   .listInner {
     .listLi {
-      padding-top: 0.2rem;
+      // padding-top: 0.2rem;
+      padding-bottom: 0.2rem;
+      padding: .2rem .15rem 0;
       &:not(:nth-last-child(1)) {
-        padding-bottom: 0.2rem;
+        // padding-bottom: 0.2rem;
         border-bottom: 1px solid #999;
       }
+      &.marginGap{
+        margin-bottom:.2rem;
+        border: 0;
+        border-radius: .1rem;
+        &:not(:nth-last-child(1)) {
+          padding-bottom: 0;
+          border-bottom: 0;
+        }
+      }
+      .listLiTit{
+        font-size: 0.3rem;
+        color: #000;
+        line-height: 2;
+        font-weight: 600;
+        span {
+          color: #0075fc;
+        }
+      }
+      .dealComfirm{
+        text-align: center;
+        span{
+          font-size: 0.3rem;
+          color: rgb(41, 121, 255);
+          line-height: 3;
+        }
+        &.dealTo{
+          span{
+            color:rgb(253, 209, 67);
+          }
+        }
+      }
       .listLiTop {
         display: flex;
         justify-content: space-between;
@@ -104,36 +167,36 @@ export default {
             display: -webkit-box;
             -webkit-line-clamp: 2;
             -webkit-box-orient: vertical;
-            p{
-                font-size: .3rem;
-                color:#333;
-                line-height: 1.5;
-                font-weight: 600;
+            p {
+              font-size: 0.3rem;
+              color: #333;
+              line-height: 1.5;
+              font-weight: 600;
             }
           }
           .courseLiDesc {
             display: flex;
             justify-content: space-between;
-            span{
-                font-size: .28rem;
-                color:#333;
-                line-height: 1.3;
-                &:nth-child(1){
-                    margin-right: .3rem;
-                }
+            span {
+              font-size: 0.28rem;
+              color: #333;
+              line-height: 1.3;
+              &:nth-child(1) {
+                margin-right: 0.3rem;
+              }
             }
           }
         }
       }
       .courseBtm {
         display: flex;
-        span{
-            font-size: .28rem;
-            color:#0075FC;
-            line-height: 2;
-            &:nth-child(1){
-                margin-right: .3rem;
-            }
+        span {
+          font-size: 0.28rem;
+          color: #0075fc;
+          line-height: 2;
+          &:nth-child(1) {
+            margin-right: 0.3rem;
+          }
         }
       }
     }

src/view/course/home.vue

@@ -26,18 +26,21 @@
                 color="#E1B98B"
                 style="margin-left: .1rem;"
             /></span>
-            <p>手机：{{ user_info.tel }}</p>
+            <!-- <p>手机：{{ user_info.tel }}</p> -->
+            <p class="userId" @click="copyLink(user_info.id, '.userId')">
+              <i class="courseIcon icon-fuzhi"></i>复制身份ID
+            </p>
           </div>
         </div>
         <div class="user_leave">
           <van-icon name="gem-o" color="#a66666" />
-          {{ user_info.isDearler ? "经销商" : "学员" }}
+          {{ user_info.site_count_max ? "经销商" : "学员" }}
         </div>
       </van-row>
     </div>
     <div class="user_tabs">
       <div class="tabs_content">
-        <div class="tabsLi">
+        <div class="tabsLi" @click="toUrl('/courseTeam/1')">
           <van-icon name="friends-o" />
           <span>我的团队</span>
         </div>
@@ -47,31 +50,41 @@
         </div>
       </div>
     </div>
-    <div class="myCourseList">
-      <courseList
-        :dataList="courseClass.proCourse.courseList"
-        showNum
-        :title="courseClass.proCourse.title"
-      ></courseList>
-    </div>
-    <div class="myCourseList">
-      <courseList
-        :dataList="courseClass.learnCourse.courseList"
-        :title="courseClass.learnCourse.title"
-      ></courseList>
-    </div>
-    <div class="myCourseList">
-      <courseList
-        :dataList="courseClass.learnCourse.courseList"
-        :title="courseClass.learnCourse.title"
-      ></courseList>
+    <div class="courScroll">
+      <scroller
+        ref="scroller"
+        :on-refresh="refresh"
+        :isInitRefresh="false"
+      >
+        <div class="myCourseList">
+          <courseList
+            :dataList="courseClass.proCourse.courseList"
+            showNum
+            :fixedTitle="courseClass.proCourse.title"
+          ></courseList>
+        </div>
+        <div class="myCourseList">
+          <courseList
+            :dataList="courseClass.learnCourse.courseList"
+            :fixedTitle="courseClass.learnCourse.title"
+          ></courseList>
+        </div>
+        <div class="myCourseList">
+          <courseList
+            :dataList="courseClass.learnCourse.courseList"
+            :fixedTitle="courseClass.learnCourse.title"
+          ></courseList>
+        </div>
+      </scroller>
     </div>
   </div>
 </template>
 
 <script>
 import Vue from "vue";
+import Clipboard from "clipboard";
 import { getWxToken, setWxToken, openError } from "@/utils/auth";
+import { isWxEnv } from "./utils";
 import { Col, Row } from "vant";
 import courseList from "./components/courseList.vue";
 Vue.use(Col);
@@ -84,14 +97,15 @@ export default {
   props: [],
   data() {
     return {
+      scrollH: "calc(100% - 2rem)",
       isWx: true,
       isAndroid: this.$getCache("isAndroid"),
       user_info: {
         img_url: "",
-        wx_id: "wx15451154555",
+        id: "wx15451154555",
         name: "新人",
         tel: "15270803986",
-        isDearler: true
+        site_count_max: false
       },
       courseClass: {
         proCourse: {
@@ -129,7 +143,7 @@ export default {
         learnCourse: {
           title: "我学习的课程",
           courseList: [
-          {
+            {
               surplus: 120,
               sale: 341,
               title:
@@ -154,23 +168,56 @@ export default {
   },
   created() {
     console.log(this.$route.query);
-    // this.isWxEnv();
+    this.init();
   },
-  mounted() {},
   methods: {
-    isWxEnv() {
-      if (this.$isWx) {
-        this.isWx = true;
-        if (getWxToken()) {
-          console.log(localStorage.getItem("wx_user_info"));
-        } else {
-          this.doWeixinLogin();
+    copyLink(data, event) {
+      let that = this;
+      //这里是复制目标的类名
+      let clipboard = new Clipboard(event, {
+        text: function() {
+          return data;
         }
-      } else {
-        this.isWx = false;
-        this.$toast("当前不在微信环境中，请在微信中打开浏览");
-      }
+      });
+      clipboard.on("success", function(e) {
+        console.info("Action:", e.action);
+        console.info("Text:", e.text); //复制的文本内容
+        console.info("Trigger:", e.trigger); //节点
+        e.clearSelection(); //清除选中的文字的选择状态
+        that.$toast("身份ID复制成功~");
+      });
+
+      clipboard.on("error", function(e) {
+        console.error("Action:", e.action);
+        console.error("Trigger:", e.trigger);
+      });
+    },
+    //跳转内页
+    toUrl(url) {
+      this.$router.push({
+        path: url
+      });
+    },
+    // 下拉刷新
+    refresh(done) {
+      setTimeout(() => {
+        done();
+      }, 1000);
+      // this.getInitData(done);
     },
+    //获取用户数据
+    init() {
+      isWxEnv()
+        .then(() => {
+          this.user_info = JSON.parse(
+            localStorage.getItem("wx_user_info")
+          ).account;
+        })
+        .catch(err => {
+          console.log(err);
+        });
+    },
+    //请求微信授权
     doWeixinLogin() {
       if (this.isAndroid) {
         window.open(`${process.env.VUE_APP_WXURL}?marketing=1`, "_blank");
@@ -184,13 +231,15 @@ export default {
 </script>
 <style scoped lang="scss">
 @import "../../assets/iconfont.css";
+* {
+  margin: 0;
+  padding: 0;
+}
 .curPage {
-  box-sizing: border-box;
   padding: 0.4rem 0 0;
+  height: 100%;
+  position: relative !important;
   background-color: #eee;
-  p {
-    margin: 0;
-  }
   .userInfo {
     padding: 0.24rem 0.32rem;
     .userImage {
@@ -209,10 +258,15 @@ export default {
           display: block;
         }
         p {
-          font-size: 0.28rem;
+          font-size: 0.22rem;
           color: #222;
           line-height: 1;
           display: block;
+          i {
+            font-size: 0.22rem;
+            color: #222;
+            line-height: 1;
+          }
         }
       }
     }
@@ -254,9 +308,16 @@ export default {
       }
     }
   }
-  .myCourseList{
-    padding: 0 0.2rem;
-    margin-top: .2rem;
+  .courScroll {
+    height: calc(100vh - 2rem) !important;
+    .cScroll {
+      height: 100%;
+      position: relative !important;
+    }
+    .myCourseList {
+      padding: 0 0.2rem;
+      margin-top: 0.2rem;
+    }
   }
 }
 </style>

src/view/course/user/deal.vue

@@ -0,0 +1,353 @@
+<template>
+  <div class="deal-x">
+    <van-nav-bar
+      :title="title"
+      left-text="返回"
+      left-arrow
+      @click-left="onClickLeft"
+    ></van-nav-bar>
+    <div class="userInfo">
+      <van-row
+        type="flex"
+        class="imageName"
+        justify="space-between"
+        align="center"
+      >
+        <div class="userImage">
+          <userImage
+            class="about-me__avatar"
+            :img_url="user_info.img_url"
+            :user_name="user_info.name"
+            width="1.12rem"
+            height="1.12rem"
+          ></userImage>
+          <div class="info">
+            <span
+              >{{ user_info.name
+              }}<van-icon
+                name="notes-o"
+                color="#E1B98B"
+                style="margin-left: .1rem;"
+            /></span>
+            <p>手机：{{ user_info.tel }}</p>
+          </div>
+        </div>
+        <div class="user_leave" @click="dealCourseNum">
+          <span>交易课程名额</span>
+        </div>
+      </van-row>
+    </div>
+    <div class="user_tabs">
+      <van-tabs v-model="active" @click="activeChange" animated title-active-color="#26A2FF">
+        <van-tab
+          v-for="(item, index) in activeList"
+          :key="index"
+          :title="item"
+        ></van-tab>
+      </van-tabs>
+    </div>
+    <div class="dealScroll">
+      <scroller :on-refresh="refresh" :isInitRefresh="false">
+        <div class="dealList" v-show="active == 0">
+          <courseList
+            :dataList="courseList"
+            :listType="2"
+            @dealComfirm="dealComfirm"
+          ></courseList>
+        </div>
+        <div class="dealRecordList" v-show="active == 1">
+          <div
+            class="recordLi"
+            v-for="(item, index) in recordList"
+            :key="index"
+          >
+            <div class="flex-name-num">
+              <p>{{ item.title }}</p>
+              <span
+                >{{ item.direction == "to" ? "-" : "+"
+                }}{{ item.dealNumber }}</span
+              >
+            </div>
+            <p>{{ item.beizhu }}</p>
+            <span>{{ item.create_time }}</span>
+          </div>
+        </div>
+      </scroller>
+    </div>
+  </div>
+</template>
+
+<script>
+import { isWxEnv } from "../utils";
+import Vue from "vue";
+import { Tab, Tabs } from "vant";
+import courseList from "../components/courseList";
+
+Vue.use(Tab);
+Vue.use(Tabs);
+export default {
+  name: "deal",
+  components: { courseList },
+  props: [],
+  data() {
+    return {
+      title: "交易",
+      activeList: ["待确认的交易", "已交易的记录"],
+      active: 0,
+      user_info: {
+        img_url: "",
+        id: "wx15451154555",
+        name: "新人",
+        tel: "15270803986",
+        site_count_max: true
+      },
+      courseList: [
+        {
+          title:
+            "大撒大声地大萨达大萨达撒大声地的撒旦撒旦撒打算打算大萨达萨达大萨达",
+          price: 598,
+          courseNum: 14,
+          url: "../../../assets/course.jpg",
+          direction: "to",
+          dealStatus: 1,
+          dealNumber: 60
+        },
+        {
+          title:
+            "大撒大声地大萨达大萨达撒大声地的撒旦撒旦撒打算打算大萨达萨达大萨达",
+          price: 598,
+          courseNum: 14,
+          url: "../../../assets/course.jpg",
+          direction: "from",
+          dealStatus: 1,
+          dealNumber: 35
+        }
+      ],
+      recordList: [
+        {
+          title: "出吧v发给别的发光飞碟",
+          beizhu: "但是反反复复毒贩夫妇",
+          direction: "to",
+          dealStatus: 1,
+          dealNumber: 60,
+          create_time: "2012-10-09"
+        },
+        {
+          title: "出吧v发给别的发光飞碟",
+          beizhu: "但是反反复复毒贩夫妇",
+          direction: "to",
+          dealStatus: 1,
+          dealNumber: 60,
+          create_time: "2012-10-09"
+        },
+        {
+          title: "出吧v发给别的发光飞碟",
+          beizhu: "但是反反复复毒贩夫妇",
+          direction: "to",
+          dealStatus: 1,
+          dealNumber: 60,
+          create_time: "2012-10-09"
+        },
+        {
+          title: "出吧v发给别的发光飞碟",
+          beizhu: "但是反反复复毒贩夫妇",
+          direction: "to",
+          dealStatus: 1,
+          dealNumber: 60,
+          create_time: "2012-10-09"
+        },
+        {
+          title: "出吧v发给别的发光飞碟",
+          beizhu: "但是反反复复毒贩夫妇",
+          direction: "to",
+          dealStatus: 1,
+          dealNumber: 60,
+          create_time: "2012-10-09"
+        }
+      ]
+    };
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    dealCourseNum(){},
+    init(){
+        console.log(this.$route)
+    },
+    dealComfirm(res) {
+      console.log(res);
+    },
+    refresh(done) {
+      setTimeout(() => {
+        done();
+      }, 1000);
+    },
+    activeChange(e) {
+      console.log(e);
+      let data = [
+        {
+          title:
+            "大撒大声地大萨达大萨达撒大声地的撒旦撒旦撒打算打算大萨达萨达大萨达",
+          price: 598,
+          courseNum: 14,
+          url: "../../../assets/course.jpg",
+          direction: "to",
+          dealStatus: 4,
+          dealNumber: 60
+        },
+        {
+          title:
+            "大撒大声地大萨达大萨达撒大声地的撒旦撒旦撒打算打算大萨达萨达大萨达",
+          price: 598,
+          courseNum: 14,
+          url: "../../../assets/course.jpg",
+          direction: "from",
+          dealStatus: 4,
+          dealNumber: 35
+        }
+      ];
+      setTimeout(() => {
+        if (e == 1) {
+          this.courseList = data;
+        }
+      }, 500);
+    },
+    toUrl(url, id) {
+      this.$router.push({
+        path: url,
+        params: id
+      });
+    },
+    //导航左侧返回
+    onClickLeft() {
+      this.$router.go(-1);
+    },
+    //获取用户数据
+    init() {
+      isWxEnv()
+        .then(() => {
+          this.user_info = JSON.parse(
+            localStorage.getItem("wx_user_info")
+          ).account;
+        })
+        .catch(err => {
+          console.log(err);
+        });
+    }
+  }
+};
+</script>
+<style scoped lang="scss">
+* {
+  margin: 0;
+  padding: 0;
+}
+.deal-x {
+  background-color: #efefef;
+  .userInfo {
+    padding: 0.24rem 0.32rem;
+    .userImage {
+      display: flex;
+      align-items: center;
+      .info {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin-left: 0.2rem;
+        span {
+          font-size: 0.32rem;
+          font-weight: 600;
+          color: #000;
+          line-height: 2;
+          display: block;
+        }
+        p {
+          font-size: 0.22rem;
+          color: #222;
+          line-height: 1;
+          display: block;
+        }
+      }
+    }
+    .user_leave {
+      padding: 0.15rem 0.3rem;
+      font-size: 0.26rem;
+      font-weight: 550;
+      color: #898989;
+      border: 1px solid #c9c3c0;
+      border-radius: 0.1rem;
+      line-height: 1.5;
+    }
+  }
+  .user_tabs {
+    padding: 0 0.2rem;
+    border-radius: 0.1rem;
+    position: relative;
+    &::after {
+      content: "";
+      width: 1px;
+      height: 60%;
+      position: absolute;
+      left: 50%;
+      top: 20%;
+      background-color: #898989;
+    }
+  }
+  .dealScroll {
+    height: calc(100vh - 4rem) !important;
+    padding: 0 0.2rem;
+    position: relative;
+    &::after {
+      content: "";
+      width: calc(100% - 0.2rem);
+      height: 1px;
+      position: absolute;
+      top: 0;
+      left: 0.1rem;
+      background-color: #efefef;
+    }
+    .dealList {
+      padding: 0 0.2rem;
+      border-radius: 0.1rem;
+    }
+    .dealRecordList {
+      padding: 0 0.2rem;
+      border-radius: 0.1rem;
+      margin-top: 0.1rem;
+      .recordLi {
+        background: #fff;
+        padding: 0 0.2rem;
+        &:not(:nth-last-child(1)) {
+          border-bottom: 1px solid #efefef;
+        }
+        .flex-name-num {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          & > p {
+            font-size: 0.32rem;
+            color: #000;
+            line-height: 2;
+          }
+          & > span {
+            font-size: 0.32rem;
+            color: #000;
+            line-height: 2;
+          }
+        }
+        & > p {
+          font-size: 0.28rem;
+          color: #666;
+          line-height: 2;
+        }
+        & > span {
+          font-size: 0.28rem;
+          color: #666;
+          line-height: 2;
+        }
+      }
+    }
+  }
+}
+</style>

src/view/course/user/team.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="team-x">
+    <van-nav-bar
+      class="left-text-bold"
+      :title="title"
+      left-text="返回"
+      :right-text="type==1?'近30天交易':''"
+      left-arrow
+      @click-left="onClickLeft"
+      @click-right="onClickRight"
+    ></van-nav-bar>
+    <Team :teamType="type"></Team>
+  </div>
+</template>
+
+<script>
+import Team from '../components/CourseTeam'
+export default {
+  name: "",
+  components: {Team},
+  props: {
+    
+  },
+  data() {
+    return {
+        type:null
+    };
+  },
+  computed: {
+    title(){
+        return this.type==1?'我的团队':'近30天交易'
+    },
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init(){
+        this.type = this.$route.params.id
+    },
+     //导航左侧返回
+     onClickLeft() {
+      this.$router.go(-1);
+    },
+    //导航右侧30天交易
+    onClickRight() {
+        this.$router.push({
+            path:'/courseTeam/2'
+        });
+    },
+  }
+};
+</script>
+<style scoped lang="scss"></style>

src/view/course/utils/index.js

@@ -0,0 +1,57 @@
+import { Toast, Notify } from 'vant'
+import Clipboard from "clipboard";
+import { getWxToken, setWxToken, openError } from "@/utils/auth";
+import { getIsIdentity, supremeAuthority, getIsWx, getTypes, getTypesName, getUserData, getEmployeeMap, getCache, setCache, removeCache, returnDeptName, getEmployeeMapItem, returnFh } from '@/utils/auth'
+//判断环境/登录状态
+export function isWxEnv() {
+    return new Promise((resolve, reject) => {
+        if (getWxToken()) {
+            resolve()
+        } else {
+            Toast("当前未授权微信信息");
+            reject(1)
+        }
+    })
+    // return new Promise((resolve, reject) => {
+    //     if (getIsWx()) {
+    //         if (getWxToken()) {
+    //             resolve()
+    //         } else {
+    //             doWeixinLogin();
+    //             reject(1)
+    //         }
+    //     } else {
+    //         Toast("当前不在微信环境中，请在微信中打开浏览");
+    //         reject(2)
+    //     }
+    // })
+}
+//请求微信授权
+function doWeixinLogin() {
+    if (getCache("isAndroid")) {
+        window.open(`${process.env.VUE_APP_WXURL}?marketing=1`, "_blank");
+    } else {
+        window.location.href = `${process.env.VUE_APP_WXURL}?marketing=1`;
+    }
+}
+export function copyLink(data, event) {
+    let that = this;
+    //这里是复制目标的类名
+    let clipboard = new Clipboard(event, {
+        text: function () {
+            return data;
+        }
+    });
+    clipboard.on("success", function (e) {
+        console.info("Action:", e.action);
+        console.info("Text:", e.text); //复制的文本内容
+        console.info("Trigger:", e.trigger); //节点
+        e.clearSelection(); //清除选中的文字的选择状态
+        that.$toast("身份ID复制成功~");
+    });
+
+    clipboard.on("error", function (e) {
+        console.error("Action:", e.action);
+        console.error("Trigger:", e.trigger);
+    });
+}