分享获佣金活动静态页面开发

pages/activity/invite-user/components/InvitePagination.vue

@@ -65,15 +65,19 @@ export default {
   content: "\e660";
 }
 .pagination-wrap{
+  line-height: 26px;
   display: flex;
   flex-wrap: nowrap;
   justify-content: flex-end;
   align-items: center;
 
   .left,.right{
-    width: 17.52px;
-    height: 17.52px;
+    width: 17.5px;
+    height: 26px;
     font-size: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
  .page-num{

pages/activity/invite-user/components/WxPopTpis.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="pop"><span></span><img src="~/assets/image/activity/invite-user/invite-new-user/wx-pop-tpis.png" alt="请在浏览器中打开"></div>
+</template>
+
+<script>
+export default {
+  name: 'NonWxPopTips',
+}
+</script>
+
+<style lang="scss" scoped>
+.pop {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgba(0,0,0,.7);
+  z-index: 999;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  overflow: hidden;
+}
+</style>

pages/activity/invite-user/invite-new-user.vue

@@ -4,12 +4,14 @@
       <!-- nav right -->
       <img @click="onRightHandle" src="~assets/image/activity/invite-user/invite-new-user/nav-right.png" alt="">
     </template>
+    <!-- 微信环境提示浏览器打开 -->
+    <WxPopTpis v-if="isWeChatBrowser" />
 
     <!-- container -->
-    <div class="invite-container">
-      <div class="share-btn mb-8" @click="shareHandle">
-        分享赚佣金
-      </div>
+    <div v-else class="invite-container">
+      <!-- 分享按钮 -->
+      <v-btn @click="shareHandle" class="share-btn mb-8" rounded />
+
       <div class="day-statistics mb-3">今日邀请注册人数：1000</div>
 
       <div class="user-main pt-3 pr-3 pb-3 pl-3 mb-3">
@@ -69,6 +71,7 @@
       <!-- 分享弹窗 -->
       <SharePopup ref="sharePopup" />
     </div>
+    
   </layout>
 </template>
 
@@ -82,6 +85,7 @@ import RecordList from './components/RecordList';
 import InvitePagination from './components/InvitePagination';
 import BuyRecordList from './components/BuyRecordList';
 import SharePopup from './components/SharePopup';
+import WxPopTpis from './components/WxPopTpis';
 
 export default {
   auth: false,
@@ -89,7 +93,7 @@ export default {
   head: {
     title: '邀请好友得现金',
   },
-  components: { layout, layoutBack, RecordList, InvitePagination, BuyRecordList, SharePopup },
+  components: { layout, layoutBack, RecordList, InvitePagination, BuyRecordList, SharePopup, WxPopTpis },
   data() {
     return {
       activeTab: 0,
@@ -190,7 +194,7 @@ export default {
         //   statusColor: '#FF505C',
         // }
         ],
-        total: 0,
+        total: 1,
       },{
         title: '购买记录',
         query: {
@@ -238,7 +242,7 @@ export default {
           status: '30.00',
           statusColor: '#FF505C',
         },],
-        total: 0,
+        total: 1,
       },{
         title: '提现记录',
         query: {
@@ -250,6 +254,12 @@ export default {
       }],
     }
   },
+  computed: {
+    // 是否为微信浏览器环境
+    isWeChatBrowser() {
+      return this.$userAgent.isWx;
+    }
+  },
   methods: {
     // nav right菜单点击事件
     onRightHandle() {
@@ -309,7 +319,12 @@ $-bg-yellow: rgb(255, 253, 241);
 
   .share-btn {
     height: 56px;
-    background: #FF505C;
+    background-color: #FF505C;
+    background-image: url('~/assets/image/activity/invite-user/invite-new-user/share-to-earn-commission.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-origin: padding-box;
   }
 
   .day-statistics{
@@ -409,7 +424,7 @@ $-bg-yellow: rgb(255, 253, 241);
   }
 
   .record-wrap{
-    height: 276px;
+    min-height: 220px;
     background-color: $-bg-yellow;
     border-radius:  $-radeus-12;
     overflow: hidden;

pages/activity/invite-user/invite-passive-user.vue

@@ -1,60 +1,74 @@
 <template>
-  <div class="padssive ">
-    <div>
-      <div class="bright-wrap">
-        <div class="bright-item mb-6"></div>
-        <div class="bright-item mb-6"></div>
-        <div class="bright-item"></div>
-        <div class="bright-item"></div>
-      </div>
-
-      <div class="input-wrap">
-        <div class="input-cell">
-          <div class="input-cell-label">
-            <span class="required">*</span><span class="label-name">手机号</span>
-          </div>
-          <div class="input-cell-value">
-            <input class="input" v-model.trim="value" type="text" placeholder="请输入11位手机号" />
-          </div>
-          <div class="input-error-msg">手机号码不正确，请重新输入!</div>
+  <div>
+    <!-- 微信环境提示浏览器打开 -->
+    <WxPopTpis v-if="isWeChatBrowser" />
+    
+    <div class="padssive">
+      <div>
+        <div class="bright-wrap">
+          <div class="bright-item mb-6"></div>
+          <div class="bright-item mb-6"></div>
+          <div class="bright-item"></div>
+          <div class="bright-item"></div>
         </div>
 
-        <div class="input-cell">
-          <div class="input-cell-label">
-            <span class="required">*</span><span class="label-name">短信验证</span>
-          </div>
-          <div class="code-cell">
+        <div class="input-wrap">
+          <div class="input-cell">
+            <div class="input-cell-label">
+              <span class="required">*</span><span class="label-name">手机号</span>
+            </div>
             <div class="input-cell-value">
-              <input class="input" v-model.trim="value" type="text" placeholder="请输入验证码" />
+              <input class="input" v-model.trim="value" type="number" placeholder="请输入11位手机号" />
             </div>
-            <div class="get-code ml-2">获取验证码</div>
+            <div class="input-error-msg">手机号码不正确，请重新输入!</div>
+          </div>
+
+          <div class="input-cell">
+            <div class="input-cell-label">
+              <span class="required">*</span><span class="label-name">短信验证</span>
+            </div>
+            <div class="code-cell">
+              <div class="input-cell-value">
+                <input class="input" v-model.trim="value" type="number" placeholder="请输入验证码" />
+              </div>
+              <div class="get-code ml-2">获取验证码</div>
+            </div>
+            <div class="input-error-msg">手机号码不正确，请重新输入!</div>
+          </div>
+          <div class="req-btn-wrap">
+            <van-button class="mb-3" type="primary" round block color="#435EFB" text="注册并下载APP" />
           </div>
-          <div class="input-error-msg">手机号码不正确，请重新输入!</div>
-        </div>
-        <div class="req-btn-wrap">
-          <van-button class="mb-3" type="primary" round block color="#435EFB" text="注册并下载APP" />
-        </div>
 
-        <div class="tips">
-          通过登录即可完成注册，成为我们的新用户，登录后表示同意双子星云手机服务协议
+          <div class="tips">
+            通过登录即可完成注册，成为我们的新用户，登录后表示同意双子星云手机服务协议
+          </div>
         </div>
       </div>
     </div>
-  </div>
+</div>
 </template>
 
 <script>
+import WxPopTpis from './components/WxPopTpis';
+
 export default {
   auth: false,
   name: 'InvitePassiveUser',
   head: {
     title: '受邀验证',
   },
+  components: { WxPopTpis },
   data() {
     return {
       value: ''
     }
-  }
+  },
+  computed: {
+    // 是否为微信浏览器环境
+    isWeChatBrowser() {
+      return this.$userAgent.isWx;
+    }
+  },
 }
 </script>