添加首页个人中心内容

src/app.json

@@ -9,36 +9,5 @@
     "navigationBarBackgroundColor": "#4B3AB0",
     "navigationBarTitleText": "水母星球",
     "navigationBarTextStyle": "white"
-  },
-  "tabBar": {
-    "color": "#999",
-    "backgroundColor": "#fafafa",
-    "selectedColor": "#333",
-    "borderStyle": "white",
-
-    "list": [{
-      "text": "首页",
-      "pagePath": "pages/index/main",
-      "iconPath": "static/tabs/home.png",
-      "selectedIconPath": "static/tabs/home-active.png"
-    }, {
-      "text": "订单",
-      "pagePath": "pages/logs/main",
-      "iconPath": "static/tabs/orders.png",
-      "selectedIconPath": "static/tabs/orders-active.png"
-    }],
-
-    "items": [{
-      "name": "首页",
-      "pagePath": "pages/index/main",
-      "icon": "static/tabs/home.png",
-      "activeIcon": "static/tabs/home-active.png"
-    }, {
-      "name": "订单",
-      "pagePath": "pages/logs/main",
-      "icon": "static/tabs/orders.png",
-      "activeIcon": "static/tabs/orders-active.png"
-    }],
-    "position": "bottom"
   }
 }

src/components/banner.vue

@@ -13,7 +13,7 @@ export default {
 
 <style>
 #banner_container{
-  position: absolute;
+  position: relative;
   width: 100%;
   z-index: 1;
 }

src/components/index/device.vue

@@ -0,0 +1,77 @@
+<template>
+  <div id="device_container">
+    <div class="device">
+      <div class="head">
+        <div>
+          <div class="line"></div>
+          <div class="title">我的设备</div>
+        </div>
+      </div>
+      <div class="connect_box">
+        <van-row>
+          <van-col span="12">
+            <view>1.打开手机蓝牙</view>
+            <view>2.长按头环侧面按钮启动头环</view>
+            <view>3.点击扫码开始连接</view>
+          </van-col>
+
+          <van-col span="12">
+            <view class="ring_2">
+              <view class="ring_3">
+                <img src="https://img.shuimuai.com/lanyashuimu.png" class="connect_img"/>
+              </view>
+            </view>
+          </van-col>
+        </van-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "device"
+}
+</script>
+
+<style scoped>
+#device_container {
+  position: relative;
+  top: -60px;
+}
+
+.head .line {
+  width: 4px;
+  height: 14px;
+  background-color: #5d4db8;
+  margin-right: 7px;
+}
+
+.head view {
+  display: flex;
+  justify-self: start;
+  align-items: center;
+}
+
+.ring_2 {
+  width: 199px;
+  height: 203px;
+  background: rgba(93, 77, 184, 0);
+  border: 2px solid #F7F7F7;
+  opacity: 0.43;
+  border-radius: 50%;
+}
+
+.ring_3 {
+  width: 158px;
+  height: 158px;
+  background: rgba(93, 77, 184, 0);
+  border: 3px solid #F6F6F6;
+  opacity: 0.54;
+  border-radius: 50%;
+}
+.connect_img{
+  width: 35px;
+  height: 30px;
+}
+</style>

src/components/index/login.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="index_login_container">
+  <div id="index_login_container" class="animation-slide-right">
     <view class="solid-bottom text-xl padding text-center">
       <text class=" text-bold title_color">欢迎来到水母星球！</text>
     </view>
@@ -9,18 +9,28 @@
     </div>
 
     <div class="text-center padding">
-      <button class="cu-btn lg cu-btn-primary text-white text-center">开始体验</button>
+      <button class="cu-btn lg cu-btn-primary text-white text-center" @click="to_scan">开始体验</button>
     </div>
     <view class="text-center text-xs">
       <text class="text-gray">如果您在我们的实体店，请在店员的指导下链接脑环</text>
     </view>
-    <view class="text-center text-lg padding">
+    <view class="text-center text-lg padding" @click="to_regist">
       <text class="text-gray under_line">账号登录</text>
     </view>
   </div>
 </template>
 <script>
-
+  export default {
+    name:"login_container",
+    methods:{
+      to_regist(){
+        this.$emit('changeStatus','regist')
+      },
+      to_scan(){
+        this.$emit('to_scan','scan')
+      }
+    }
+  }
 </script>
 <style>
 

src/components/index/personal.vue

@@ -0,0 +1,112 @@
+<template>
+  <div id="personal">
+<!--    用户信息-->
+    <div class="userinfo">
+      <van-row class="padding">
+        <van-col span="3" offset="2">
+          <view class="cu-avatar radius lg" :style="'background-image:url('+userinfo.avatar+');'"></view>
+        </van-col>
+        <van-col span="12" offset="1">
+          <div class="flex flex-direction align-start justify-start">
+            <div>
+              <text class="text-black text-bold">{{ userinfo.user_name }}</text>
+            </div>
+            <div class="flex justify-between align-center">
+              <button class="cu-btn sm round level_btn">普通会员</button>
+              <view class="text-xs padding-left">有效期至 2020.11.11</view>
+            </div>
+          </div>
+        </van-col>
+        <van-col span="5">
+          <view class="text-">
+            <text class="cuIcon-people"></text>
+            <text class="under_line">会员中心</text>
+          </view>
+        </van-col>
+      </van-row>
+      <van-row class="padding">
+        <van-col span="4" class="lg" offset="2">
+          <text class="cuIcon-selection"></text>
+          积分:
+        </van-col>
+        <van-col span="8">
+          <text class="text-white text-bold text-xxl jifen">{{ userinfo.experience }}</text>
+        </van-col>
+      </van-row>
+      <van-row>
+        <van-col span="6" offset="2">
+          <div class="flex flex-direction align-center">
+
+          <text class="text-xxl">720</text>
+          <text class="font-sm">可用时长（分钟）</text>
+          </div>
+        </van-col>
+        <van-col span="6" offset="2">
+          <div class="flex flex-direction align-center">
+
+          <text class="text-xxl">6</text>
+          <text class="font-sm">优惠券/码</text>
+          </div>
+        </van-col>
+        <van-col span="6" offset="2">
+          <div class="flex flex-direction align-center">
+
+            <text class="text-xxl">2</text>
+            <text class="font-sm">次卡</text>
+          </div>
+        </van-col>
+      </van-row>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "personal",
+  data() {
+    return {
+      userinfo: {
+        avatar: 'https://img.shuimuai.com/weixintouxiang.png',
+        user_name: "小疯兔屁屁",
+        phone: "15627202057",
+        experience: "16824",
+        playtime: "20",
+        validity_time: "0",
+        coupon: "0",
+        level: 0
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.userinfo {
+  background-image: url("https://img.shuimuai.com/huiyuankadiban.png");
+  background-position: center;
+  background-size: 100% 100%;
+  width: 95%;
+  height: 181px;
+  margin: 0px auto;
+
+}
+
+#personal {
+  width: 100%;
+  position: relative;
+  top: -60px;
+  z-index: 3;
+}
+
+.level_btn {
+  background-color: #E3A000;
+}
+
+.jifen {
+  position: absolute;
+  top: 73px;
+}
+.font-sm{
+  font-size: 10px;
+}
+</style>

src/components/index/regist.vue

@@ -1,6 +1,7 @@
 <template>
-  <div id="index_login_container">
+  <div id="index_login_container" class="animation-slide-right">
     <view class="solid-bottom text-xl padding text-center">
+      <img class="back regist_back_btn" @click="goIndex" src="https://img.shuimuai.com/fanhui.png"/>
       <text class=" text-bold title_color">注册会员</text>
     </view>
     <view class="text-df text-center slogen">请输入手机号码，以便更好的享受我们的服务</view>
@@ -8,7 +9,7 @@
       <form action="">
         <view class="cu-form-group">
           <view class="title">手机号码</view>
-          <input placeholder="请输入手机号" name="input"></input>
+          <input placeholder="请输入手机号" v-model="phone"/>
           <view class="cu-capsule radius">
             <view class='cu-tag bg-blue '>
               +86
@@ -20,8 +21,8 @@
         </view>
         <view class="cu-form-group">
           <view class="title">验证码</view>
-          <input placeholder="请输入验证码" name="input"></input>
-          <button class='cu-btn bg-primary text-white shadow'>获取验证码</button>
+          <input placeholder="请输入验证码" name="input"/>
+          <button class='cu-btn bg-primary text-white shadow' @click="get_verify_code">获取验证码</button>
         </view>
       </form>
     </div>
@@ -39,10 +40,43 @@
 
 <script>
 export default {
-  name: "regist"
+  name: "regist",
+  data(){
+    return {
+      phone:""
+    }
+  },
+  methods: {
+    //跳转到首页
+    goIndex() {
+      this.$emit('changeStatus', 'login')
+    },
+    //获取验证码
+    get_verify_code(){
+      let $this = this;
+      let $params = {
+        phone:$this.phone
+      }
+      $this.$fly.post('user/get-code',$params).then((res)=>{
+        let $data = res.data;
+        if (!res.code){
+          console.log($data)
+        }
+      });
+    },
+    //微信授权登录
+    wechat_login(){
+
+    }
+  }
 }
 </script>
 
 <style scoped>
-
+.regist_back_btn {
+  width: 22px;
+  height: 20px;
+  position: absolute;
+  left: 20px;;
+}
 </style>

src/components/index/scan.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="index_login_container">
+  <div id="index_login_container" class="animation-slide-right">
     <view class="solid-bottom text-xl padding text-center">
       <text class=" text-bold title_color">欢迎来到水母星球！</text>
     </view>
@@ -23,6 +23,9 @@
     methods:{
       open_scan(){
         wx.scanCode()
+      },
+      toLogin(){
+        this.$emit('changeStatus','login')
       }
     }
   }

src/main.js

@@ -3,9 +3,10 @@ import App from './App'
 import Fly from 'flyio/dist/npm/wx'
 
 var fly = new Fly()
-fly.config.baseURL = "https://testapi.shuimuai.com"
+fly.config.baseURL = "https://testapi.shuimuai.com/"
 fly.config.headers = {
-  access_token:11
+  access_token:11,
+  'Content-Type':'multipart/form-data; boundary=AaB03x'
 }
 Vue.prototype.$fly = fly
 Vue.config.productionTip = false

src/pages/index/index.css

@@ -1,9 +1,9 @@
 .login_card {
-  height: 400px;
+  height: 410px;
   background-color: #ffffff;
   position: relative;
   z-index: 3;
-  top: 170px;
+  top: -100px;
   margin: 0px 10px;
   background-image: url('https://img.shuimuai.com/shuimugongzhu.png');
   background-position: center;
@@ -43,10 +43,11 @@
 
 /* 功能服务 */
 .service {
-  position: relative;
+  position: absolute;
   width: 100%;
   padding: 5px 7px 35px;
   margin-top: 20px;
+  top: 560px;
 }
 
 .service .content {
@@ -73,5 +74,5 @@
 }
 
 .cu-form-group {
-  background-color: rgba(255,255,255,0);
+  background-color: rgba(255, 255, 255, 0);
 }

src/pages/index/index.vue

@@ -2,30 +2,36 @@
   <div id="container">
     <!--    banner模块-->
     <banner></banner>
-    <!--    登录窗口模块-->
-    <div class="login_card">
+    <!--    未登录 登录窗口模块-->
+    <div class="login_card" v-if="!is_login">
       <!--      登录窗口-->
-      <!--      <login_container></login_container>-->
+      <login_container v-if="status == 'login'" @changeStatus="change_status"
+                       @to_scan="change_status"></login_container>
       <!--      扫码窗口-->
-      <scan_container></scan_container>
+      <scan_container v-if="status == 'scan'" @changeStatus='change_status'></scan_container>
       <!--      注册窗口-->
-      <!--      <regist_container></regist_container>-->
+      <regist_container v-if="status == 'regist'" @changeStatus='change_status'></regist_container>
 
     </div>
+    <!--    登陆后 的个人首页-->
+    <div class="personal_card" v-if="is_login">
+      <personal_container></personal_container>
+      <device_container></device_container>
+    </div>
     <div class="service">
-        <div class="head">
-          <div>
-            <div class="line"></div>
-            <div class="title">功能服务</div>
-          </div>
-        </div>
-        <div class="content">
-          <img src="https://img.shuimuai.com/chongzhizhongxin.png"></img>
-          <img src="https://img.shuimuai.com/shebeiguanli.png"></img>
-          <img src="https://img.shuimuai.com/chongzhizhongxin.png"></img>
-          <img src="https://img.shuimuai.com/shebeiguanli.png"></img>
+      <div class="head">
+        <div>
+          <div class="line"></div>
+          <div class="title">功能服务</div>
         </div>
       </div>
+      <div class="content">
+        <img src="https://img.shuimuai.com/chongzhizhongxin.png"></img>
+        <img src="https://img.shuimuai.com/shebeiguanli.png"></img>
+        <img src="https://img.shuimuai.com/chongzhizhongxin.png"></img>
+        <img src="https://img.shuimuai.com/shebeiguanli.png"></img>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -34,18 +40,28 @@ import banner from '@/components/banner'
 import login_container from '@/components/index/login'
 import scan_container from '@/components/index/scan'
 import regist_container from '@/components/index/regist'
+import personal_container from "@/components/index/personal";
+import device_container from "@/components/index/device";
 
 
 export default {
   name: "index_container",
   components: {
-    banner, login_container, scan_container, regist_container
+    banner, login_container, scan_container, regist_container, personal_container, device_container
   },
   data() {
-    return {}
+    return {
+      // 三种状态 扫码scan 注册regist 登录login
+      status: "regist",
+      is_login: true
+    }
   },
   methods: {
     get_init_data() {
+    },
+    //切换到扫码
+    change_status($status) {
+      this.status = $status
     }
   },
   mounted() {

src/pages/index/main.json

@@ -0,0 +1,6 @@
+{
+  "usingComponents": {
+    "van-row": "../../static/vant/row/index",
+    "van-col": "../../static/vant/col/index"
+  }
+}