gir

src/App.vue

@@ -6,14 +6,14 @@
 </template>
 
 <script>
-import Tabber from './components/Tabber.vue'
+import Tabber from './components/Tabber.vue';
 
 export default {
   name: 'App',
   components: {
     Tabber
   }
-}
+};
 </script>
 
 <style>

src/components/Course.vue

@@ -1,9 +1,27 @@
 <template>
-  <h1>Course 课程管理</h1>
+  <div>
+    <van-cell-group v-for="(item, index) in courseList" :key="index">
+      <van-cell :title="item.name" icon="records" @click="handLogin()" is-link />
+    </van-cell-group>
+  </div>
 </template>
 
 <script>
-export default {}
+export default {
+  data() {
+    return {
+      courseList: [
+        { name: '课程阿斯达四方' },
+        { name: 'dgdgdgdfgfds' },
+        { name: '啊飒飒的给' },
+        { name: '昂贵的法国电视公司提供' },
+        { name: '认同感他如果' },
+        { name: '课程阿斯好友和用户运营达四方' },
+        { name: '肉体和肉体和人' }
+      ]
+    };
+  }
+};
 </script>
 
 <style lang="less" scoped>

src/components/StrongPhoto.vue

@@ -1,9 +1,27 @@
 <template>
-  <h1>StrongPhoto 精彩瞬间</h1>
+  <!-- <h1>StrongPhoto 精彩瞬间</h1> -->
+  <div>
+    <span v-for="(image, index) in imageList" :key="index">
+      <van-image width="200px" :src="image.a" />
+    </span>
+  </div>
 </template>
 
 <script>
-export default {}
+export default {
+  data() {
+    return {
+      imageList: [
+        { a: 'https://img.yzcdn.cn/vant/cat.jpeg' },
+        { a: 'https://img.yzcdn.cn/vant/cat.jpeg' },
+        { a: 'https://img.yzcdn.cn/vant/cat.jpeg' },
+        { a: 'https://img.yzcdn.cn/vant/cat.jpeg' },
+        { a: 'https://img.yzcdn.cn/vant/cat.jpeg' },
+        { a: 'https://img.yzcdn.cn/vant/cat.jpeg' }
+      ]
+    };
+  }
+};
 </script>
 
 <style lang="less" scoped>

src/components/UserCenter.vue

@@ -28,29 +28,32 @@ export default {
   data() {
     return {
       code: '' // 前端获取 code 传给后端调用相应接口
-    }
+    };
   },
   created() {
     // 从 window.location.href 中截取 code 并且赋值
-    if (window.location.href.indexOf('CSDN_state') !== -1) {
-      // 此方法仅供参考！！！
-      this.code = window.location.href.split('?')[1].split('=')[1].split('&')[0]
-      this.$store.commit('SET_USER_INFO', { code: this.code })
+    if (window.location.href.indexOf('Code_state') !== -1) {
+      this.code = window.location.href
+        .split('?')[1]
+        .split('=')[1]
+        .split('&')[0];
+      this.$store.commit('SET_USER_INFO', { code: this.code });
     }
 
     if (this.$store.state.user.code) {
       // 存在 code 直接调用接口
-      this.handGetUserInfo(this.code)
+      this.handGetUserInfo(this.code);
     }
   },
   methods: {
     handLogin() {
-      this.$store.commit('SET_USER_INFO', { code: this.code })
+      this.$router.push('/SetUser');
+      // this.$store.commit('SET_USER_INFO', { code: this.code })
 
       // 重定向地址重定到当前页面，在路径获取 code
       if (process.env.NODE_ENV === 'development') {
-        console.log(222)
-        return
+        console.log(222);
+        return;
       }
       /**
        * 获取 code
@@ -63,7 +66,7 @@ export default {
       //   }
       // }
 
-      const hrefUrl = window.location.href
+      const hrefUrl = window.location.href;
 
       // const originCode = localStorage.getItem('wxcode')
       // const queryCode = getCode()
@@ -78,14 +81,14 @@ export default {
 						&response_type=code
 						&scope=snsapi_userinfo
 						&state=Code_state#wechat_redirect
-					`
+					`;
       }
     },
     handGetUserInfo(code) {
       console.log(
         '🚀 ~ file: UserCenter.vue ~ line 44 ~ handGetUserInfo ~ code',
         code
-      )
+      );
       // 调用后端接口，参数为 code 剩下工作量交给后端即可
       // wxLogin({
       //   data: {
@@ -101,7 +104,7 @@ export default {
       // })
     }
   }
-}
+};
 </script>
 
 <style lang="less" scoped>

src/components/userPages/SetUser.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="setInfo">
+    <van-nav-bar title="修改个人信息" left-text="返回" left-arrow @click-left="onClickLeft" />
+    <van-form @submit="onSubmit">
+      <van-field
+        v-model="username"
+        name="username"
+        label="姓名"
+        placeholder="姓名"
+        :rules="[{ required: true, message: '请填写姓名' }]"
+      />
+      <van-field
+        v-model="phone"
+        type="number"
+        name="phone"
+        label="手机号"
+        placeholder="手机号"
+        :rules="[{ required: true, message: '请填写手机号码' }]"
+      />
+      <div style="margin: 20px; margin-top:3em;">
+        <van-button round block type="info" native-type="submit">提交</van-button>
+      </div>
+    </van-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      username: '',
+      phone: ''
+    };
+  },
+  methods: {
+    onClickLeft() {
+      this.$router.go(-1);
+    },
+    onSubmit(values) {
+      console.log('submit', values);
+      this.$toast.success('提示文案');
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.setInfo {
+  width: 100%;
+  height: 33%;
+  border-bottom-left-radius: 20px;
+  border-bottom-right-radius: 20px;
+  background-color: #fff;
+}
+</style>

src/main.js

@@ -1,13 +1,30 @@
 import Vue from 'vue'
 import App from './App.vue'
-import { Tabbar, TabbarItem, Button } from 'vant';
 import router from './router/index'//路由
 import store from './store';//状态管理
-import { Icon } from 'vant';
-import { Notify } from 'vant';
-
-import { Cell, CellGroup } from 'vant';
-
+import {
+  Cell, CellGroup,
+  Icon,
+  Notify,
+  Form,
+  Tabbar,
+  TabbarItem,
+  Button,
+  Field,
+  Toast,
+  Card,
+  NavBar,
+  Image, SwipeItem, Tag, Swipe
+} from 'vant';
+Vue.use(Swipe);
+Vue.use(Tag);
+Vue.use(NavBar);
+Vue.use(SwipeItem);
+Vue.use(Image);
+Vue.use(Toast);
+Vue.use(Card);
+Vue.use(Form);
+Vue.use(Field);
 Vue.use(Cell);
 Vue.use(CellGroup);
 Vue.use(Notify);

src/router/index.js

@@ -5,7 +5,7 @@ import Router from 'vue-router'
 import Course from '../components/Course.vue'//课程
 import StrongPhoto from '../components/StrongPhoto.vue'
 import UserCenter from '../components/UserCenter.vue'
-
+import SetUser from '../components/userPages/SetUser.vue'
 // // import Login from '../Login.vue'
 
 
@@ -48,11 +48,23 @@ export default new Router({
       meta: {
         requireAuth: false //是否登陆
       }
+    },
+
+    // 修改个人信息
+    {
+      path: '/SetUser',
+      name: 'SetUser',
+      component: SetUser,
+      meta: {
+        requireAuth: true //是否登陆
+      }
     }
 
 
 
 
+
+
   ]
 })
 

src/util/api.js

@@ -0,0 +1 @@
+import request from "./request";

src/util/request.js

@@ -13,7 +13,7 @@ import store from '../store'
 
 export default function (url, params, methodType = 'GET') {
   return new Promise((resolve, reject) => {
-    const { personId, phone, appid, totalScore } = store.state.user
+    // const { personId, phone, appid, totalScore } = store.state.user
     // const timestamp = new Date().valueOf()
     // const sign = md5(appid + personId + phone + timestamp)
 

yarn.lock

@@ -1456,11 +1456,6 @@
   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
-"@vue/devtools-api@^6.0.0-beta.11":
-  version "6.0.12"
-  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.12.tgz#7b57cce215ae9f37a86984633b3aa3d595aa5b46"
-  integrity sha512-iO/4FIezHKXhiDBdKySCvJVh8/mZPxHpiQrTy+PXVqJZgpTPTdHy4q8GXulaY+UKEagdkBb0onxNQZ0LNiqVhw==
-
 "@vue/preload-webpack-plugin@^1.1.0":
   version "1.1.2"
   resolved "https://registry.npmmirror.com/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz#ceb924b4ecb3b9c43871c7a429a02f8423e621ab"
@@ -8367,12 +8362,10 @@ vue@^2.6.11:
   resolved "https://registry.npmmirror.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
   integrity sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==
 
-vuex@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/vuex/-/vuex-4.0.2.tgz#f896dbd5bf2a0e963f00c67e9b610de749ccacc9"
-  integrity sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==
-  dependencies:
-    "@vue/devtools-api" "^6.0.0-beta.11"
+vuex@^3.6.2:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
+  integrity sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==
 
 watchpack-chokidar2@^2.0.1:
   version "2.0.1"