111

src/App.vue

@@ -1,3 +1,11 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-01-25 11:32:04
+ * @LastEditTime: 2021-03-18 11:10:09
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \rebatedine-mini\src\App.vue
+-->
 <script>
 import { getSystemConfig } from '@/api/app'
 export default {
@@ -16,6 +24,8 @@ export default {
       const { code, data } = await getSystemConfig()
       if (code === 200) {
         this.$store.state.ossImgResize = data.oss_img_resize
+        this.$store.state.enable_commission = data.enable_commission
+        this.$store.state.commission_banner = data.commission_banner
       }
     }
   }
@@ -23,13 +33,13 @@ export default {
 </script>
 
 <style lang="scss">
-  /*每个页面公共css */
-  @import "uview-ui/index.scss";
-  page {
-    min-height: 100vh;
-    font-size: 24px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    color: $u-main-color;
-    background-color: $bg-color;
-  }
+/*每个页面公共css */
+@import 'uview-ui/index.scss';
+page {
+  min-height: 100vh;
+  font-size: 24px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  color: $u-main-color;
+  background-color: $bg-color;
+}
 </style>

src/api/request.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-01-25 11:32:04
- * @LastEditTime: 2021-03-08 21:22:17
+ * @LastEditTime: 2021-03-18 15:56:19
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \rebatedine-mini\src\api\request.js
@@ -14,9 +14,10 @@ import { USER_TOKEN } from '../store/storageKeys'
 
 export default {
   config: {
+    // baseUrl: 'https://apitest.qcbwc.cn/bwc/',
     baseUrl:
       process.env.NODE_ENV === 'development1'
-        ? 'http://localhost:18333/'
+        ? 'http://192.168.12.252:18333/'
         : 'https://api.qcbwc.cn/',
     data: '',
     header: {

src/components/feed.vue

@@ -0,0 +1,57 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-03-18 11:33:39
+ * @LastEditTime: 2021-03-18 15:47:04
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \rebatedine-mini\src\components\feed.vue
+-->
+<template>
+  <view class="feed">
+    <image :src="imageUrl"
+           class="avatar"></image>
+    <view class="feed-container">
+      <text class="content">111111</text>
+    </view>
+  </view>
+</template>
+<script>
+export default {
+  props: {
+    imageUrl: {
+      default: '~@/static/icon/avatar.png'
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.feed {
+  // width: 308rpx;
+  height: 50rpx;
+  position: relative;
+  .avatar {
+    position: absolute;
+    width: 50rpx;
+    height: 50rpx;
+    border-radius: 25rpx;
+    z-index: 100;
+    background-image: url(~@/static/icon/avatar.png);
+    background-size: 100%;
+  }
+  .feed-container {
+    width: fit-content;
+    padding-right: 25rpx;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 25rpx 25rpx 25rpx 25rpx;
+    display: flex;
+    align-items: center;
+    color: #fff;
+    font-weight: 400;
+    .content {
+      margin-left: 58rpx;
+      font-size: 22rpx;
+    }
+  }
+}
+</style>

src/pages.json

@@ -51,6 +51,39 @@
       ]
     },
     {
+      "root": "pagesSub/commission",
+      "pages": [
+        {
+          "path": "invite",
+          "style": {
+            "navigationBarTitleText": "邀请好友，赚现金"
+          }
+        },
+        {
+          "path": "commission",
+          "style": {
+            "navigationBarTitleText": "我的返利金"
+          }
+        },
+        {
+          "path": "commissionRecord",
+          "style": {
+            "navigationBarTitleText": "分佣查看"
+          }
+        },
+        {
+          "path": "commissionApply",
+          "style": {
+            "navigationBarTitleText": "提现"
+          }
+        },
+        {
+          "path": "commissionConfirm",
+          "style": { "navigationBarTitleText": "提现" }
+        }
+      ]
+    },
+    {
       "root": "pagesSub/my",
       "pages": [
         {

src/pages/my.vue

@@ -19,12 +19,27 @@
         </view>
       </block>
     </view>
+    <view class="commission">
+      <view class="left">
+        <image src="~@/static/icon/icon_commission.png"
+               class="icon"></image>
+        <text class="title">可返金额</text>
+      </view>
+      <view class="right">
+        <text class="right-flag">￥</text>
+        <text class="right-money">199</text>
+      </view>
+    </view>
+    <image class="banner"
+           :src="bannerUrl"
+           @click="jumpToCommission"></image>
+    <view class="divider"></view>
     <view class="item-list">
-      <view class="item u-flex u-border-bottom"
-            @click="toDetail(1)">
-        <view class="icon-wh icon-problem"></view>
-        <view class="u-font-28 ml-28 u-flex-1 title">常见问题</view>
-        <view class="jiantou-wh icon-jiantou "></view>
+      <view class="item u-flex"
+            @click="toDetail(3)">
+        <view class="icon-wh icon-order"></view>
+        <view class="u-font-28 ml-28 u-flex-1 title">我的订单</view>
+        <view class="jiantou-wh icon-jiantou"></view>
       </view>
       <view class="item u-flex u-border-bottom"
             @click="toDetail(2)">
@@ -38,11 +53,11 @@
         <view class="u-font-28 ml-28 u-flex-1 title">联系客服</view>
         <view class="jiantou-wh icon-jiantou "></view>
       </view>
-      <view class="item u-flex"
-            @click="toDetail(3)">
-        <view class="icon-wh icon-order"></view>
-        <view class="u-font-28 ml-28 u-flex-1 title">订单</view>
-        <view class="jiantou-wh icon-jiantou"></view>
+      <view class="item u-flex u-border-bottom"
+            @click="toDetail(1)">
+        <view class="icon-wh icon-problem"></view>
+        <view class="u-font-28 ml-28 u-flex-1 title">常见问题</view>
+        <view class="jiantou-wh icon-jiantou "></view>
       </view>
     </view>
   </view>
@@ -56,6 +71,9 @@ export default {
   computed: {
     userInfo () {
       return this.$store.state.userInfo
+    },
+    bannerUrl () {
+      return this.$store.state.commission_banner
     }
   },
   methods: {
@@ -86,6 +104,15 @@ export default {
         url: '/pagesSub/other/login'
       })
     },
+    jumpToCommission () {
+      if (this.userInfo) {
+        uni.navigateTo({ url: '/pagesSub/commission/invite' })
+      } else {
+        uni.navigateTo({
+          url: '/pagesSub/other/login'
+        })
+      }
+    },
     // 个人信息
     toUserDetail () {
       uni.navigateTo({
@@ -97,6 +124,59 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.divider {
+  height: 16rpx;
+  background-color: #f4f5f9;
+}
+
+.commission {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 90%;
+  margin-left: 5%;
+  box-shadow: 0px 0px 20rpx 2rpx rgba(0, 0, 0, 0.06);
+  border-radius: 40rpx;
+  height: 100rpx;
+  padding: 0 40rpx 0 40rpx;
+  margin-bottom: 40rpx;
+  .left {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    .icon {
+      width: 44rpx;
+      height: 48rpx;
+    }
+    .title {
+      margin-left: 14rpx;
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #111;
+    }
+  }
+  .right {
+    color: #ff6632;
+    &-flag {
+      bottom: 0;
+      font-size: 24rpx;
+      font-weight: 600;
+    }
+    &-money {
+      bottom: 0;
+      font-size: 36rpx;
+      font-weight: 600;
+    }
+  }
+}
+
+.banner {
+  height: 170rpx;
+  width: 90%;
+  margin-left: 5%;
+  margin-bottom: 40rpx;
+}
 .pensonal {
   width: 750px;
   background: #fff;

src/pagesSub/commission/commission.vue

@@ -0,0 +1,187 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-03-18 13:14:13
+ * @LastEditTime: 2021-03-18 15:44:36
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \rebatedine-mini\src\pagesSub\commission\commission.vue
+-->
+<template>
+  <view class="commission-main">
+    <network-error />
+    <view class="commission">
+      <view class="commission-top">
+        <view class="commission-top-top"
+              @click="jumpToCommissionRecord">
+          <text class="label">分佣查看</text>
+          <image class="icon"
+                 src="~@/static/icon/jiantou.png"></image>
+        </view>
+        <view class="commission-top-middle">
+          <image src="~@/static/icon/icon_money.png"
+                 class="icon"></image>
+          <text class="label">0.00</text>
+        </view>
+        <text class="commission-top-tips">提现金额将在提现后，工作日隔天到账</text>
+        <button class="commission-top-button"
+                @click="jumpToApply">提 现</button>
+      </view>
+      <u-gap height="20"></u-gap>
+      <view class="commission-bottom">
+        <view>
+          <u-tabs-swiper ref="uTabs"
+                         :list="list"
+                         :current="current"
+                         @change="tabsChange"
+                         :is-scroll="false"
+                         active-color="#212121"
+                         inactive-color="#AAAAAA"
+                         font-size="28"
+                         swiperWidth="750"></u-tabs-swiper>
+        </view>
+        <swiper :current="swiperCurrent"
+                @transition="transition"
+                @animationfinish="animationfinish">
+          <swiper-item class="swiper-item"
+                       v-for="(item, index) in list"
+                       :key="index">
+            <apply-list></apply-list>
+          </swiper-item>
+        </swiper>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import ApplyList from './components/ApplyList.vue'
+export default {
+  components: { ApplyList },
+  data () {
+    return {
+      current: 0,
+      swiperCurrent: 0,
+      list: [
+        { name: '已申请' },
+        { name: '打款中' },
+        { name: '已打款' },
+        {
+          name: '已拒绝'
+        }]
+    }
+  },
+  methods: {
+    jumpToApply () {
+      uni.navigateTo({
+        url: '/pagesSub/commission/commissionApply'
+      })
+    },
+    jumpToCommissionRecord () {
+      uni.navigateTo({
+        url: '/pagesSub/commission/commissionRecord'
+      })
+    },
+    // tabs通知swiper切换
+    tabsChange (index) {
+      this.swiperCurrent = index
+    },
+    // swiper-item左右移动，通知tabs的滑块跟随移动
+    transition (e) {
+      const dx = e.detail.dx
+      this.$refs.uTabs.setDx(dx)
+    },
+    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
+    // swiper滑动结束，分别设置tabs和swiper的状态
+    animationfinish (e) {
+      const current = e.detail.current
+      this.$refs.uTabs.setFinishCurrent(current)
+      this.swiperCurrent = current
+      this.current = current
+    },
+    // scroll-view到底部加载更多
+    onreachBottom () {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.commission-main {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.commission {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  &-top {
+    display: flex;
+    padding: 40rpx;
+    background-color: white;
+    flex-direction: column;
+    &-top {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      .label {
+        color: #212121;
+        font-size: 24rpx;
+        font-weight: 400;
+      }
+      .icon {
+        width: 16rpx;
+        height: 16rpx;
+        margin-left: 4rpx;
+      }
+    }
+    &-middle {
+      display: flex;
+      justify-content: center;
+      align-items: flex-end;
+      .icon {
+        width: 28rpx;
+        height: 28rpx;
+      }
+      .label {
+        font-size: 96rpx;
+        color: #212121;
+        margin-bottom: -24rpx;
+        margin-left: 4rpx;
+      }
+    }
+    &-tips {
+      margin-top: 36rpx;
+      font-size: 22rpx;
+      color: #767778;
+      text-align: center;
+    }
+    &-button {
+      margin-top: 56rpx;
+      height: 88rpx;
+      line-height: 88rpx;
+      background: #ff6632;
+      border-radius: 44px;
+      color: #ffffff;
+      font-size: 32rpx;
+      width: 90%;
+    }
+  }
+  &-bottom {
+    flex: 1;
+    .scroll-content {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.commission-bottom {
+  swiper {
+    height: calc(100% - 80rpx);
+  }
+}
+</style>

src/pagesSub/commission/commissionApply.vue

@@ -0,0 +1,87 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-03-18 15:02:07
+ * @LastEditTime: 2021-03-18 15:45:31
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \rebatedine-mini\src\pagesSub\commission\commissionApply.vue
+-->
+<template>
+  <view class="main">
+    <network-error />
+    <view class="content">
+      <text class="content-title">提现金额</text>
+      <view class="content-input">
+        <text class="content-input-flag">¥</text>
+        <input type="number"
+               class="content-input-input" />
+      </view>
+      <view class="content-divider"></view>
+      <text class="content-tips">可提现金额5元</text>
+    </view>
+    <button class="button"
+            @click="onConfirm">工作日隔天到账，确认提现</button>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    onConfirm () {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+  padding: 32rpx;
+  margin-top: 16rpx;
+  background-color: white;
+  &-title {
+    font-size: 32rpx;
+    color: #212121;
+    font-weight: 600;
+  }
+  &-input {
+    margin-top: 48rpx;
+    display: flex;
+    color: #111111;
+    align-items: flex-end;
+    &-flag {
+      color: #212121;
+      font-size: 60rpx;
+      font-weight: 500;
+    }
+    &-input {
+      font-size: 92rpx;
+      font-weight: 500;
+      line-height: 92rpx;
+      height: 92rpx;
+      margin-bottom: 4rpx;
+      margin-left: 16rpx;
+    }
+  }
+  &-divider {
+    height: 2rpx;
+    width: 100%;
+    background-color: #eaebec;
+    margin-top: 24rpx;
+    margin-bottom: 22rpx;
+  }
+  &-tips {
+    font-size: 28rpx;
+    color: #767778;
+  }
+}
+.button {
+  margin: 56rpx 40rpx 0 40rpx;
+  height: 88rpx;
+  background: #ff6632;
+  border-radius: 44rpx;
+  font-size: 32rpx;
+  color: white;
+  font-weight: 400;
+}
+</style>

src/pagesSub/commission/commissionConfirm.vue

@@ -0,0 +1,68 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-03-18 15:26:54
+ * @LastEditTime: 2021-03-18 15:40:31
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \rebatedine-mini\src\pagesSub\commission\commissionConfirm.vue
+-->
+<template>
+  <view class="main">
+    <network-error />
+    <view class="content">
+      <image class="success"
+             src="~@/static/icon/icon_success.png">
+      </image>
+      <text class="tips">提现申请成功</text>
+      <button class="button"
+              @click="goHome">回到首页</button>
+    </view>
+  </view>
+</template>
+<script>
+export default {
+  methods: {
+    goHome () {
+      uni.switchTab({
+        url: '/pages/index'
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.content {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: white;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  .success {
+    margin-top: 116rpx;
+    width: 132rpx;
+    height: 132rpx;
+  }
+
+  .tips {
+    margin-top: 40rpx;
+    font-size: 40rpx;
+    font-weight: 600;
+    color: #111111;
+    text-align: center;
+  }
+
+  .button {
+    margin-top: 116rpx;
+    width: 320rpx;
+    height: 88rpx;
+    line-height: 88rpx;
+    font-size: 28rpx;
+    color: #111111;
+    background: #ffffff;
+    border-radius: 44rpx;
+    border: 1px solid #d3d4d5;
+  }
+}
+</style>

src/pagesSub/commission/commissionRecord.vue

@@ -0,0 +1,85 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-03-18 14:43:45
+ * @LastEditTime: 2021-03-18 15:01:03
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \rebatedine-mini\src\pagesSub\commission\commissionRecord.vue
+-->
+<template>
+  <view class="main">
+    <network-error />
+    <scroll-view class="list">
+      <view v-for="(item,index) in list"
+            :key="index"
+            class="item">
+        <view class="item-content">
+          <view class="item-content-left">
+            <image class="avatar"
+                   :src="item.head_url"></image>
+            <text class="name">{{item.nick_name}}</text>
+          </view>
+          <text class="time">{{item.created_at}}</text>
+        </view>
+        <view class="gap"></view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      list: [{
+        created_at: '2020-11-30 23:11:11',
+        nick_name: 'Grace'
+      }, {
+        created_at: '2020-11-30 23:11:11',
+        nick_name: 'Grace'
+      }]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.list {
+  width: 100%;
+  height: 100%;
+}
+.item {
+  background-color: white;
+  &-content {
+    padding: 32rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    &-left {
+      display: flex;
+      align-items: center;
+      .avatar {
+        background-image: url(~@/static/icon/avatar.png);
+        background-size: 100%;
+        width: 72rpx;
+        height: 72rpx;
+      }
+      .name {
+        font-size: 30rpx;
+        color: #212121;
+        font-weight: 400;
+        margin-left: 16rpx;
+      }
+    }
+    .time {
+      font-size: 22rpx;
+      color: #767778;
+      font-weight: 400;
+    }
+  }
+  .gap {
+    height: 2rpx;
+    width: 100%;
+    background-color: #eaebec;
+    margin-left: 32rpx;
+  }
+}
+</style>

src/pagesSub/commission/components/ApplyList.vue

@@ -0,0 +1,97 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-03-18 14:08:34
+ * @LastEditTime: 2021-03-18 15:01:30
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \rebatedine-mini\src\pagesSub\commission\components\ApplyList.vue
+-->
+<template>
+  <scroll-view class="apply-list"
+               scroll-y
+               @scrolltolower="onreachBottom">
+    <view v-for="(item,index) in list"
+          :key="index"
+          class="item">
+      <view class="item-content">
+        <view class="item-left">
+          <text class="name">提现</text>
+          <text class="time">{{item.created_at}}</text>
+        </view>
+        <text class="amount">-{{(item.amount/100).toFixed(2)}}</text>
+      </view>
+      <view class="gap"></view>
+    </view>
+  </scroll-view>
+</template>
+<script>
+export default {
+  props: {
+    type: {
+      default: 1
+    }
+  },
+  data () {
+    return {
+      list: [{
+        amount: 1000,
+        created_at: '2021-11-30 23:11:11'
+      }, {
+        amount: 1000,
+        created_at: '2021-11-30 23:11:11'
+      }, {
+        amount: 1000,
+        created_at: '2021-11-30 23:11:11'
+      }]
+    }
+  },
+  methods: {
+    // scroll-view到底部加载更多
+    onreachBottom () {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.apply-list {
+  width: 100%;
+  height: 100%;
+  .item {
+    background-color: white;
+    &-content {
+      padding: 32rpx;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .item-left {
+        display: flex;
+        flex-direction: column;
+        .name {
+          color: #212121;
+          font-size: 28rpx;
+          font-weight: 400;
+        }
+        .time {
+          color: #767778;
+          font-size: 22rpx;
+          font-weight: 400;
+          margin-top: 8rpx;
+        }
+      }
+      .amount {
+        color: #111111;
+        font-size: 32rpx;
+        font-weight: 600;
+      }
+    }
+    .gap {
+      height: 2rpx;
+      width: 100%;
+      background-color: #eaebec;
+      margin-left: 32rpx;
+    }
+  }
+}
+</style>

src/pagesSub/commission/invite.vue

@@ -0,0 +1,219 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-03-18 11:16:06
+ * @LastEditTime: 2021-03-18 15:43:42
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \rebatedine-mini\src\pagesSub\commission\invite.vue
+-->
+<template>
+  <view class="main">
+    <network-error />
+    <view class="top">
+      <feed class="top-feed"></feed>
+      <view class="container">
+        <button class="button">立即邀请</button>
+        <button class="button-disable">面对面扫码 敬请期待</button>
+      </view>
+    </view>
+    <view class="middle">
+      <view class="middle-top">
+        <view class="middle-top-left">
+          <view class="middle-top-left-top">
+            <text class="number">0</text>
+            <text class="unit">元</text>
+          </view>
+          <text class="tips">累计收益</text>
+        </view>
+        <view class="middle-top-right">
+          <view class="middle-top-right-top">
+            <text class="number">0</text>
+            <text class="unit">位</text>
+          </view>
+          <text class="tips">成功邀请</text>
+        </view>
+      </view>
+      <view class="middle-middle">
+        <view class="middle-middle-button">
+          <text class="text">立即邀请好友</text>
+          <image class="icon"
+                 src="~@/static/icon/icon_commission_go.png"></image>
+        </view>
+        <view class="middle-middle-money"
+              @click="jumpToCommission">
+          <image class="icon"
+                 src="~@/static/icon/icon_commission_book.png"></image>
+          <text class="text">查看返利金</text>
+        </view>
+      </view>
+    </view>
+    <image mode="widthFix"
+           class="award-info"
+           :src="awardUrl"></image>
+  </view>
+</template>
+
+<script>
+import Feed from '../../components/feed'
+export default {
+  components: {
+    Feed
+  },
+  methods: {
+    jumpToCommission () {
+      uni.navigateTo({
+        url: '/pagesSub/commission/commission'
+      })
+    }
+  },
+  computed: {
+    awardUrl () {
+      return 'https://image.qcbwc.cn/background/invite_bottom.png?t=' + new Date().getTime()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  height: 1354rpx;
+  background-image: url('https://image.qcbwc.cn/background/invite_top.png');
+  background-size: 100%;
+  .top-feed {
+    width: 100%;
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    margin-top: 274rpx;
+  }
+  .container {
+    width: 100%;
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 956rpx;
+    .button {
+      height: 88rpx;
+      width: 65%;
+      background: linear-gradient(
+        180deg,
+        #fcf9c7 0%,
+        #fcd890 52%,
+        #fdbb61 100%
+      );
+      box-shadow: 0px 4rpx 20rpx 0px rgba(141, 14, 33, 0.31);
+      border-radius: 44rpx;
+      margin-bottom: 32rpx;
+      font-size: 32rpx;
+      color: #e40c0c;
+      font-weight: 600;
+    }
+    .button-disable {
+      height: 88rpx;
+      width: 65%;
+      border-radius: 44rpx;
+      margin-bottom: 32rpx;
+      font-size: 32rpx;
+      font-weight: 600;
+      background: #d3d4d5;
+      box-shadow: 0px 4rpx 20rpx 0px rgba(141, 14, 33, 0.31);
+      border-radius: 44rpx;
+      color: #767778;
+      font-weight: 600;
+    }
+  }
+}
+.middle {
+  height: 624rpx;
+  background-image: url('https://image.qcbwc.cn/background/invite_middle.png');
+  background-size: 100%;
+  &-top {
+    position: absolute;
+    display: flex;
+    width: 100%;
+    margin-top: 130rpx;
+    &-left,
+    &-right {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      &-top {
+        display: flex;
+        justify-content: center;
+        align-items: flex-end;
+        color: #ed2701;
+        .number {
+          font-size: 80rpx;
+        }
+        .unit {
+          margin-bottom: 14rpx;
+          font-size: 28rpx;
+          margin-left: 4rpx;
+        }
+      }
+
+      .tips {
+        font-size: 28rpx;
+        color: #98999a;
+        font-weight: 400;
+      }
+    }
+  }
+  &-middle {
+    position: absolute;
+    margin-top: 404rpx;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    &-button {
+      display: flex;
+      width: 65%;
+      height: 88rpx;
+      justify-content: center;
+      align-items: center;
+      background: linear-gradient(
+        180deg,
+        #ff6160 0%,
+        #ff2b39 52%,
+        #ff0823 100%
+      );
+      box-shadow: 0px 4rpx 20rpx 0px rgba(141, 14, 33, 0.31);
+      border-radius: 44rpx;
+      .text {
+        font-size: 32rpx;
+        color: #fcebc6;
+      }
+      .icon {
+        width: 36rpx;
+        height: 36rpx;
+        margin-left: 12rpx;
+      }
+    }
+
+    &-money {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 40rpx;
+      .icon {
+        width: 24rpx;
+        height: 24rpx;
+        margin-right: 8rpx;
+      }
+      .text {
+        color: #ff6632;
+        font-size: 24rpx;
+        font-weight: 400;
+      }
+    }
+  }
+}
+.award-info {
+  width: 100%;
+}
+</style>

src/store/index.js

@@ -9,6 +9,8 @@ const store = new Vuex.Store({
   state: {
     imgPrefix: 'https://image.qcbwc.cn/',
     ossImgResize: {},
+    enable_commission: false,
+    commission_banner: 'https://image.qcbwc.cn/banner/commission-banner.png',
     openid: uni.getStorageSync(storageKeys.OPENIDID) || '', // 微信code换取openid
     userInfo: uni.getStorageSync(storageKeys.USER_INFO) || {}, // 用户信息
     cateId: '',
@@ -54,7 +56,7 @@ const store = new Vuex.Store({
   actions: {
     async getUserInfo ({ commit, state, dispatch }) {
       return new Promise(async resolve => {
-        const sessionInfo = await new Promise(resolve => {
+        await new Promise(resolve => {
           uni.checkSession({
             success: res => resolve(res),
             fail: err => {