静态页面

.eslintrc.js

@@ -1,24 +1,21 @@
 // https://eslint.org/docs/user-guide/configuring
-
 module.exports = {
   root: true,
   parserOptions: {
     parser: 'babel-eslint'
   },
   env: {
-    browser: true,
+    browser: true
   },
   extends: [
     // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
     // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
-    'plugin:vue/essential', 
+    'plugin:vue/essential',
     // https://github.com/standard/standard/blob/master/docs/RULES-en.md
     'standard'
   ],
   // required to lint *.vue files
-  plugins: [
-    'vue'
-  ],
+  plugins: ['vue'],
   // add your custom rules here
   rules: {
     // allow async-await
@@ -26,4 +23,4 @@ module.exports = {
     // allow debugger during development
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
   }
-}
+}

config/index.js

@@ -11,6 +11,16 @@ module.exports = {
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
     proxyTable: {
+      '/api': {
+        target: 'http://123.57.65.31:9004',
+        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
+        pathRewrite: { '^/api': '/api' }
+      }
+      // '/api': {
+      //   target: 'https://app.xnsport.cn',
+      //   changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
+      //   pathRewrite: { '^/api': '/api' }
+      // }
       // '/api': {
       //   target: 'http://114.67.101.226:8080',
       //   changeOrigin: false, // 如果接口跨域，需要进行这个参数配置

package-lock.json

@@ -2585,6 +2585,11 @@
       "integrity": "sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I=",
       "dev": true
     },
+    "charenc": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
+      "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc="
+    },
     "check-types": {
       "version": "7.4.0",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-7.4.0.tgz",
@@ -3347,6 +3352,11 @@
         "which": "^1.2.9"
       }
     },
+    "crypt": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
+      "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs="
+    },
     "crypto-browserify": {
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
@@ -8414,6 +8424,16 @@
       "integrity": "sha1-izqsWIuKZuSXXjzepn97sylgH6w=",
       "dev": true
     },
+    "md5": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
+      "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
+      "requires": {
+        "charenc": "0.0.2",
+        "crypt": "0.0.2",
+        "is-buffer": "~1.1.6"
+      }
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",

package.json

@@ -17,6 +17,7 @@
     "axios": "^0.18.0",
     "exports-loader": "^0.7.0",
     "js-md5": "^0.7.3",
+    "md5": "^2.3.0",
     "script-loader": "^0.7.2",
     "vant": "^2.10.3",
     "vue": "^2.5.2",

src/components/common/MainPageContainer/index.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="components MainPageContainer flex-v">
+
+    <!-- 头部 -->
+    <div class="MainHeaderPadding" v-if="ShowMainHeader" :style="{height: `${MainPaddingTop}px`}"></div>
+    <div class="MainHeader flex-h" v-if="ShowMainHeader">
+      <a class="MainBack iconfont iconjiantouleft" v-if="ShowMainHeaderBack" @click="$router.back(-1)"></a>
+      <span class="MainTitle">
+        <span @click="MainTitleClick()">{{MainHeaderTitle}}</span>
+        <a class="iconfont iconjiantoudown" @click="MainTitleClick()" v-if="ShowMainTitleIcon"></a>
+      </span>
+      <a class="MainHeaderMore" v-if="ShowMainHeaderMore" @click="MainHeaderMoreClick">
+        <span>{{MainHeaderMoreText}}</span>
+        <i class="iconfont" v-if="MainHeaderMoreIcon !== ''" :class="MainHeaderMoreIcon"></i>
+      </a>
+    </div>
+
+    <!-- 内容 -->
+    <div class="MainBody flex-item">
+      <div>
+        <slot></slot>
+      </div>
+    </div>
+
+    <!-- tabbar -->
+    <div class="TabBar flex-h" :style="{paddingBottom: `${MainPaddingBottom}px`}" v-if="ShowMainTabBar">
+      <div class="flex-item" v-for="(item, index) in MainTabBar" :key="index">
+        <router-link :to="{name: item.router}" :class="{'active': item.id === MainTabBarActiveId}">
+          <i class="iconfont" :class="item.icon"></i>
+          <span>{{item.name}}</span>
+        </router-link>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+/*
+  页面名称：
+*/
+import md5 from 'js-md5'
+import { mapActions, mapMutations, createNamespacedHelpers } from 'vuex'
+const { mapState: mapUserState, mapActions: mapUserActions } = createNamespacedHelpers('user')
+export default {
+  name: 'MainPageContainer',
+  props: {
+    ShowMainHeaderMore: {
+      default: false,
+      type: Boolean
+    },
+    ShowMainHeaderRight: { // 显隐头部右边选项
+      default: false,
+      type: Boolean
+    },
+    MainHeaderMoreIcon: { // 头部右边选项图标
+      default: null,
+      type: String
+    },
+    MainHeaderMoreText: { // 头部右边选项文本
+      default: null,
+      type: String
+    },
+    MainHeaderMoreClick: { // 头部右边选项点击事件
+      default: () => { },
+      type: Function
+    },
+    MainTitleClick: { // 页面标题点击事件
+      default: () => { },
+      type: Function
+    },
+    ShowMainTitleIcon: { // 显隐页面标题箭头图标
+      default: false,
+      type: Boolean
+    },
+    ShowMainHeaderBack: { // 显隐头部返回按钮
+      default: false,
+      type: Boolean
+    },
+    MainTabBar: { // tabbar列表
+      default: () => {
+        return [
+          { name: '彩单管理', icon: 'iconcaidanguanli', id: 1, router: 'CaiDanGuanLi' },
+          { name: '彩民管理', icon: 'iconyonghuguanli', id: 2, router: 'CaiMinGuanLi' },
+          { name: '个人中心', icon: 'icongerenzhongxin', id: 3, router: 'WoDe' }
+        ]
+      },
+      type: Array
+    },
+    MainTabBarActiveId: { // tabbar选中id
+      default: null,
+      type: Number
+    },
+    ShowMainHeader: { // 显隐页面头部
+      default: false,
+      type: Boolean
+    },
+    ShowMainTabBar: { // 显隐页面tabbar
+      default: false,
+      type: Boolean
+    },
+    MainPaddingTop: { // 页面padding-top（不与系统顶部时间栏重叠）
+      default: null,
+      type: Number
+    },
+    MainPaddingBottom: { // 页面padding-bottom（不与系统底部返回栏重叠）
+      default: null,
+      type: Number
+    },
+    MainHeaderTitle: { // 页面title
+      default: null,
+      type: String
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    ...mapUserState({
+      UserInfo: x => x.UserInfo // 用户信息
+    })
+  },
+  components: {
+  },
+  created () {
+    this.Init()
+  },
+  mounted () {
+    this.$nextTick(() => {
+    })
+  },
+  methods: {
+    ...mapActions([
+      ''
+    ]),
+    ...mapMutations([
+      ''
+    ]),
+    ...mapUserActions([
+      'SignIn'
+    ]),
+    Init () { // 初始化
+      if (this.UserInfo === null) {
+        if (window.localStorage.niucaiadminname && window.localStorage.niucaiadminpassword) {
+          this.SignIn({ data: { password: md5(window.localStorage.niucaiadminpassword), userName: window.localStorage.niucaiadminname } }).then(() => { // 登录
+            if (this.UserInfo === null) {
+              // this.$router.push({ name: 'SignIn' })
+            } else {
+              this.$emit('UserInfoChange')
+            }
+          }).catch(() => {
+            // this.$router.push({ name: 'SignIn' })
+          })
+        } else {
+          // this.$router.push({ name: 'SignIn' })
+        }
+      }
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/common/MainPageContainer/page.scss

@@ -0,0 +1,108 @@
+.components.MainPageContainer {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  > .MainHeaderPadding {
+    position: relative;
+    overflow: hidden;
+    background: #d91d36;
+  }
+  > .MainHeader {
+    position: relative;
+    overflow: hidden;
+    background: #d91d36;
+    > .MainTitle {
+      width: 100%;
+      display: block;
+      text-align: center;
+      height: 0.4rem;
+      white-space: nowrap;
+      position: relative;
+      z-index: 1;
+      > * {
+        display: inline-block;
+        vertical-align: middle;
+        line-height: 0.4rem;
+        font-size: 0.17rem;
+        color: #fff;
+      }
+    }
+    > a {
+      display: inline-block;
+      position: absolute;
+      z-index: 2;
+      color: #fff;
+      &.MainBack {
+        font-size: 0.18rem;
+        line-height: 0.4rem;
+        top: 0;
+        left: 0.15rem;
+      }
+      &.MainHeaderMore {
+        right: 0.15rem;
+        top: 0;
+        font-size: 0;
+        white-space: nowrap;
+        > span {
+          font-size: 0.12rem;
+          line-height: 0.4rem;
+          height: 0.4rem;
+          display: inline-block;
+          vertical-align: middle;
+          color: #fff;
+        }
+        > i {
+          font-size: 0.16rem;
+          line-height: 0.22rem;
+          display: inline-block;
+          vertical-align: middle;
+          color: #fff;
+          width: 0.22rem;
+          text-align: center;
+          background: rgba(255, 255, 255, 0.3);
+          border-radius: 100%;
+          margin-left: 0.05rem;
+        }
+      }
+    }
+  }
+  >.MainBody {
+    position: relative;
+    overflow: hidden;
+    >div {
+      position: absolute;
+      left: 0;
+      width: 100%;
+      top: 0;
+      bottom: 0;
+    }
+  }
+  > .TabBar {
+    align-items: center;
+    border-top: 0.01rem solid #f7f7f7;
+    > div {
+      text-align: center;
+      font-size: 0;
+      > a {
+        display: inline-block;
+        padding: 0.05rem 0;
+        &.active {
+          > * {
+            color: #d91d36;
+          }
+        }
+        > * {
+          display: block;
+          line-height: 0.2rem;
+          text-align: center;
+          font-size: 0.13rem;
+          color: #656565;
+        }
+        > i {
+          font-size: 0.2rem;
+        }
+      }
+    }
+  }
+}

src/pages/index.vue

@@ -1,40 +1,10 @@
 <template>
-  <div class="MainPage flex-v">
-
-    <!-- 头部 -->
-    <div class="MainHeaderPadding" v-if="ShowMainHeader" :style="{height: `${MainPaddingTop}px`}"></div>
-    <div class="MainHeader flex-h" v-if="ShowMainHeader">
-      <a class="MainBack iconfont iconjiantouleft" v-if="ShowMainHeaderBack" @click="$router.back(-1)"></a>
-      <span class="MainTitle">
-        <span @click="MainTitleClick()">{{MainHeaderTitle}}</span>
-        <a class="iconfont iconjiantoudown" @click="MainTitleClick()" v-if="ShowMainTitleIcon"></a>
-      </span>
-      <a class="MainHeaderMore" v-if="ShowMainHeaderMore" @click="MainHeaderMoreClick">
-        <span>{{MainHeaderMoreText}}</span>
-        <i class="iconfont" v-if="MainHeaderMoreIcon !== ''" :class="MainHeaderMoreIcon"></i>
-      </a>
-    </div>
-
-    <!-- 内容 -->
-    <div class="MainBody flex-item">
-      <router-view></router-view>
-    </div>
-
-    <!-- tabbar -->
-    <div class="TabBar flex-h" :style="{paddingBottom: `${MainPaddingBottom}px`}" v-if="ShowMainTabBar">
-      <div class="flex-item" v-for="(item, index) in MainTabBar" :key="index">
-        <router-link :to="{name: item.router}" :class="{'active': item.id === MainTabBarActiveId}">
-          <i class="iconfont" :class="item.icon"></i>
-          <span>{{item.name}}</span>
-        </router-link>
-      </div>
-    </div>
-
+  <div class="MainPage">
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
-import { mapState, mapMutations } from 'vuex'
 export default {
   name: '',
   data () {
@@ -42,36 +12,16 @@ export default {
     }
   },
   computed: {
-    ...mapState({
-      ShowMainHeaderMore: x => x.ShowMainHeaderMore, // 显隐页面头部更多按钮
-      MainHeaderMoreText: x => x.MainHeaderMoreText, // 页面头部更多按钮文案
-      MainHeaderMoreIcon: x => x.MainHeaderMoreIcon, // 页面头部更多按钮图标
-      MainHeaderMoreClick: x => x.MainHeaderMoreClick, // 页面头部更多按钮点击事件
-      MainTitleClick: x => x.MainTitleClick, // 页面标题点击事件
-      ShowMainTitleIcon: x => x.ShowMainTitleIcon, // 显隐页面标题箭头图标
-      ShowMainHeaderBack: x => x.ShowMainHeaderBack, // 显隐头部返回按钮
-      MainTabBar: x => x.MainTabBar, // tabbar列表
-      MainTabBarActiveId: x => x.MainTabBarActiveId, // tabbar索引值
-      ShowMainHeader: x => x.ShowMainHeader, // 显隐页面头部
-      ShowMainTabBar: x => x.ShowMainTabBar, // 显隐页面tabbar
-      MainPaddingTop: x => x.MainPaddingTop, // 页面padding-top（不与系统顶部时间栏重叠）
-      MainPaddingBottom: x => x.MainPaddingBottom, // 页面padding-bottom（不与系统底部返回栏重叠）
-      MainHeaderTitle: x => x.MainHeaderTitle // 页面title
-    })
   },
   components: {
   },
   created () {
-    this.EditMainData({ name: 'MainPaddingBottom', value: 10 })
   },
   mounted () {
     this.$nextTick(() => {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData'
-    ])
   }
 }
 </script>

src/pages/index/ShouYe/index.vue

@@ -1,61 +1,63 @@
 <template>
-  <div class="Page flex-v">
+  <div class="Page">
+    <MainPageContainer :MainHeaderTitle="`订单管理`" :MainTabBarActiveId="1" :ShowMainHeader="true" :ShowMainTabBar="true" :ShowMainHeaderMore="true" :MainHeaderMoreIcon="`icondaojishi`" :MainHeaderMoreText="`全部彩种`" :MainHeaderMoreClick="() => { $router.push({ name: 'DingDanChaXun' }) }">
+      <div class="PageContainer flex-v">
+        <a class="flex-h">
+          <i class="iconfont icontongzhi"></i>
+          <span class="flex-item">关于彩民端提示风险问题的通知</span>
+          <i class="iconfont iconguanbi"></i>
+        </a>
 
-    <a class="flex-h">
-      <i class="iconfont icontongzhi"></i>
-      <span class="flex-item">关于彩民端提示风险问题的通知</span>
-      <i class="iconfont iconguanbi"></i>
-    </a>
-
-    <!-- 内容 -->
-    <div class="flex-item">
-      <div>
-        <div class="Content">
-          <scroller :on-refresh="Refresh">
-            <div class="Container">
-              <ul>
-                <li v-for="(item, index) in 15" :key="index">
-                  <div class="Res">
-                    <div class="Num flex-h">
-                      <div class="Icon">
-                        <img src="../../../assets/img/icon5.png" class="centerLabel contain" alt="">
+        <!-- 内容 -->
+        <div class="flex-item">
+          <div>
+            <div class="Content">
+              <scroller :on-refresh="Refresh">
+                <div class="Container">
+                  <ul>
+                    <li v-for="(item, index) in 15" :key="index">
+                      <div class="Res">
+                        <div class="Num flex-h">
+                          <div class="Icon">
+                            <img src="../../../assets/img/icon5.png" class="centerLabel contain" alt="">
+                          </div>
+                          <span>双色球</span>
+                          <div class="flex-item">
+                            <ul>
+                              <li>01</li>
+                              <li>01</li>
+                              <li>01</li>
+                              <li>01</li>
+                              <li>01</li>
+                              <li class="active">01</li>
+                              <li class="active">01</li>
+                            </ul>
+                          </div>
+                        </div>
+                        <div class="Count flex-h">
+                          <span class="flex-item"><em>1</em>注<em>1</em>倍<em>2.00</em>元</span>
+                          <span>第202076期</span>
+                          <span>2020-08-14 18:43:22</span>
+                        </div>
                       </div>
-                      <span>双色球</span>
-                      <div class="flex-item">
-                        <ul>
-                          <li>01</li>
-                          <li>01</li>
-                          <li>01</li>
-                          <li>01</li>
-                          <li>01</li>
-                          <li class="active">01</li>
-                          <li class="active">01</li>
-                        </ul>
+                      <div class="Time flex-h">
+                        <span class="flex-item">截止时间：04:49:26</span>
+                        <router-link :to="{ name: 'DingDanXiangQing' }">查看详情</router-link>
                       </div>
-                    </div>
-                    <div class="Count flex-h">
-                      <span class="flex-item"><em>1</em>注<em>1</em>倍<em>2.00</em>元</span>
-                      <span>第202076期</span>
-                      <span>2020-08-14 18:43:22</span>
-                    </div>
-                  </div>
-                  <div class="Time flex-h">
-                    <span class="flex-item">截止时间：04:49:26</span>
-                    <router-link :to="{ name: 'DingDanXiangQing' }">查看详情</router-link>
-                  </div>
-                </li>
-              </ul>
+                    </li>
+                  </ul>
+                </div>
+              </scroller>
             </div>
-          </scroller>
+          </div>
         </div>
       </div>
-    </div>
-
+    </MainPageContainer>
   </div>
 </template>
 
 <script>
-import { mapMutations } from 'vuex'
+import MainPageContainer from '../../../components/common/MainPageContainer'
 export default {
   name: 'index',
   data () {
@@ -65,31 +67,15 @@ export default {
   computed: {
   },
   components: {
+    MainPageContainer
   },
   created () {
-    this.EditMainData([ // 配置页面框架数据
-      { name: 'MainHeaderMoreIcon', value: 'icondaojishi' },
-      { name: 'MainHeaderMoreText', value: '全部彩种' },
-      { name: 'ShowMainHeaderMore', value: true },
-      { name: 'MainHeaderMoreClick', value: () => { this.$router.push({ name: 'DingDanChaXun' }) } },
-      { name: 'MainTitleClick', value: () => { } },
-      { name: 'MainHeaderTextColor', value: '#fff' },
-      { name: 'ShowMainTitleIcon', value: false },
-      { name: 'ShowMainHeader', value: true },
-      { name: 'ShowMainTabBar', value: true },
-      { name: 'MainHeaderTitle', value: '订单管理' },
-      { name: 'MainTabBarActiveId', value: 1 },
-      { name: 'ShowMainHeaderBack', value: false }
-    ])
   },
   mounted () {
     this.$nextTick(() => {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData' // 配置页面框架数据
-    ]),
     Refresh (done) { // 页面下拉刷新
       window.setTimeout(() => {
         done()

src/pages/index/ShouYe/page.scss

@@ -1,136 +1,142 @@
 .Page {
-  > a.flex-h {
-    align-items: center;
-    border-bottom: 0.01rem solid #f7f7f7;
-    padding: 0 0.15rem;
-    > i {
-      font-size: 0.15rem;
-      color: #999;
-      &:first-child {
+  .PageContainer {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    > a.flex-h {
+      align-items: center;
+      border-bottom: 0.01rem solid #f7f7f7;
+      padding: 0 0.15rem;
+      > i {
+        font-size: 0.15rem;
+        color: #999;
+        &:first-child {
+          color: #d91d36;
+        }
+      }
+      > span {
+        font-size: 0.1rem;
+        line-height: 0.28rem;
         color: #d91d36;
+        margin-left: 0.05rem;
       }
     }
-    > span {
-      font-size: 0.1rem;
-      line-height: 0.28rem;
-      color: #d91d36;
-      margin-left: 0.05rem;
-    }
-  }
-  > .flex-item {
-    position: relative;
-    > div {
-      width: 100%;
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
-      > .Content {
+    > .flex-item {
+      position: relative;
+      > div {
         width: 100%;
-        height: 100%;
-        position: relative;
-        overflow: hidden;
-        z-index: 2;
-        .Container {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        > .Content {
+          width: 100%;
+          height: 100%;
           position: relative;
-          padding: 0 0.15rem;
-          > ul {
+          overflow: hidden;
+          z-index: 2;
+          .Container {
             position: relative;
-            overflow: visible;
-            > li {
-              background: #fff;
-              border-radius: 0.06rem;
+            padding: 0 0.15rem;
+            > ul {
               position: relative;
-              box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
-              margin-bottom: 0.15rem;
-              &:first-child {
-                margin-top: 0.15rem;
-              }
-              > .Res {
+              overflow: visible;
+              > li {
+                background: #fff;
+                border-radius: 0.06rem;
                 position: relative;
-                border-bottom: 0.01rem solid #f7f7f7;
-                padding: 0.15rem;
-                > div.Num {
-                  align-items: center;
-                  > .Icon {
-                    width: 0.4rem;
-                    height: 0.4rem;
-                    position: relative;
-                    overflow: hidden;
-                    margin-right: 0.1rem;
-                  }
-                  > span {
-                    width: 0.55rem;
-                    font-size: 0.16rem;
-                    font-weight: bold;
-                    line-height: 0.2rem;
-                    margin-right: 0.1rem;
+                box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
+                margin-bottom: 0.15rem;
+                &:first-child {
+                  margin-top: 0.15rem;
+                }
+                > .Res {
+                  position: relative;
+                  border-bottom: 0.01rem solid #f7f7f7;
+                  padding: 0.15rem;
+                  > div.Num {
+                    align-items: center;
+                    > .Icon {
+                      width: 0.4rem;
+                      height: 0.4rem;
+                      position: relative;
+                      overflow: hidden;
+                      margin-right: 0.1rem;
+                    }
+                    > span {
+                      width: 0.55rem;
+                      font-size: 0.16rem;
+                      font-weight: bold;
+                      line-height: 0.2rem;
+                      margin-right: 0.1rem;
+                    }
+                    > .flex-item {
+                      > ul {
+                        width: 100%;
+                        font-size: 0;
+                        white-space: nowrap;
+                        > li {
+                          display: inline-block;
+                          vertical-align: middle;
+                          font-size: 0.1rem;
+                          color: #fff;
+                          width: 0.2rem;
+                          height: 0.2rem;
+                          line-height: 0.2rem;
+                          border-radius: 100%;
+                          text-align: center;
+                          background: #d91d36;
+                          margin-right: 0.05rem;
+                          &.active {
+                            background: #1b40c5;
+                          }
+                        }
+                      }
+                    }
                   }
-                  > .flex-item {
-                    > ul {
-                      width: 100%;
-                      font-size: 0;
+                  > div.Count {
+                    align-items: center;
+                    margin-top: 0.05rem;
+                    > span {
+                      font-size: 0.1rem;
+                      color: #999;
+                      line-height: 0.2rem;
                       white-space: nowrap;
-                      > li {
-                        display: inline-block;
-                        vertical-align: middle;
-                        font-size: 0.1rem;
-                        color: #fff;
-                        width: 0.2rem;
-                        height: 0.2rem;
-                        line-height: 0.2rem;
-                        border-radius: 100%;
-                        text-align: center;
-                        background: #d91d36;
-                        margin-right: 0.05rem;
-                        &.active {
-                          background: #1b40c5;
-                        }
+                      > em {
+                        color: #d91d36;
+                        font-size: 0.12rem;
+                        font-weight: bold;
+                      }
+                      &:first-child {
+                        margin-left: 0.5rem;
+                        font-size: 0.12rem;
+                        color: #333;
+                        font-weight: bold;
+                      }
+                      &:last-child {
+                        margin-left: 0.25rem;
                       }
                     }
                   }
                 }
-                > div.Count {
+                > .Time {
                   align-items: center;
-                  margin-top: 0.05rem;
+                  padding: 0.1rem 0.15rem;
                   > span {
-                    font-size: 0.1rem;
-                    color: #999;
+                    font-size: 0.12rem;
+                    color: #666;
                     line-height: 0.2rem;
-                    white-space: nowrap;
-                    > em {
-                      color: #d91d36;
-                      font-size: 0.12rem;
-                      font-weight: bold;
-                    }
-                    &:first-child {
-                      margin-left: 0.5rem;
-                      font-size: 0.12rem;
-                      color: #333;
-                      font-weight: bold;
-                    }
-                    &:last-child {
-                      margin-left: 0.25rem;
-                    }
                   }
-                }
-              }
-              > .Time {
-                align-items: center;
-                padding: 0.1rem 0.15rem;
-                > span {
-                  font-size: 0.12rem;
-                  color: #666;
-                  line-height: 0.2rem;
-                }
-                > a {
-                  font-size: 0.12rem;
-                  width: 0.8rem;
-                  border: 0.01rem solid #d91d36;
-                  border-radius: 0.04rem;
-                  line-height: 0.28rem;
-                  text-align: center;
-                  color: #d91d36;
+                  > a {
+                    font-size: 0.12rem;
+                    width: 0.8rem;
+                    border: 0.01rem solid #d91d36;
+                    border-radius: 0.04rem;
+                    line-height: 0.28rem;
+                    text-align: center;
+                    color: #d91d36;
+                  }
                 }
               }
             }

src/pages/page.scss

@@ -3,95 +3,4 @@
   height: 100%;
   position: relative;
   overflow: hidden;
-  > .MainHeaderPadding {
-    position: relative;
-    overflow: hidden;
-    background: #d91d36;
-  }
-  > .MainHeader {
-    position: relative;
-    overflow: hidden;
-    background: #d91d36;
-    > .MainTitle {
-      width: 100%;
-      display: block;
-      text-align: center;
-      height: 0.4rem;
-      white-space: nowrap;
-      position: relative;
-      z-index: 1;
-      > * {
-        display: inline-block;
-        vertical-align: middle;
-        line-height: 0.4rem;
-        font-size: 0.17rem;
-        color: #fff;
-      }
-    }
-    > a {
-      display: inline-block;
-      position: absolute;
-      z-index: 2;
-      color: #fff;
-      &.MainBack {
-        font-size: 0.18rem;
-        line-height: 0.4rem;
-        top: 0;
-        left: 0.15rem;
-      }
-      &.MainHeaderMore {
-        right: 0.15rem;
-        top: 0;
-        font-size: 0;
-        white-space: nowrap;
-        > span {
-          font-size: 0.12rem;
-          line-height: 0.4rem;
-          height: 0.4rem;
-          display: inline-block;
-          vertical-align: middle;
-          color: #fff;
-        }
-        > i {
-          font-size: 0.16rem;
-          line-height: 0.22rem;
-          display: inline-block;
-          vertical-align: middle;
-          color: #fff;
-          width: 0.22rem;
-          text-align: center;
-          background: rgba(255, 255, 255, 0.3);
-          border-radius: 100%;
-          margin-left: 0.05rem;
-        }
-      }
-    }
-  }
-  > .TabBar {
-    align-items: center;
-    border-top: 0.01rem solid #f7f7f7;
-    > div {
-      text-align: center;
-      font-size: 0;
-      > a {
-        display: inline-block;
-        padding: 0.05rem 0;
-        &.active {
-          > * {
-            color: #d91d36;
-          }
-        }
-        > * {
-          display: block;
-          line-height: 0.2rem;
-          text-align: center;
-          font-size: 0.13rem;
-          color: #656565;
-        }
-        > i {
-          font-size: 0.2rem;
-        }
-      }
-    }
-  }
 }

src/store/user/index.js

@@ -1,6 +1,6 @@
 
-// import Api from '../../util/Api'
-// import ToolClass from '../../util/PublicMethod'
+import Api from '../../util/Api'
+import ToolClass from '../../util/PublicMethod'
 export default {
   namespaced: true,
   state: {
@@ -36,7 +36,18 @@ export default {
     }
   },
   mutations: {
+    UpdateUserInfo (state, data) { // 更新用户信息
+      state.UserInfo = data || null
+    },
+    EmptyUserInfo (state) { // 清空用户信息
+      state.UserInfo = null
+    }
   },
   actions: {
+    SignIn (context, payload) { // 登录
+      return new Promise((resolve, reject) => {
+        ToolClass.Axios(resolve, reject, Api.SignIn, context, payload, 1000, 'UpdateUserInfo')
+      })
+    }
   }
 }

src/util/Api.js

@@ -2,9 +2,9 @@
 const prefix = process.env.NODE_ENV === 'production' ? '' : '/api'
 
 const $api = {
-  ModifyDailyStatus: { // 修改动态状态
+  SignIn: { // 登录
     method: 'post',
-    url: `${prefix}/business/daily/modifyStatus`
+    url: `${prefix}/shop/login`
   }
 }