Sākums Izpētīt Palīdzība
Reģistrēties Pierakstīties
shigongchen
/
ruoyi-vue-pro
1
0
Atdalīts 0
Faili Problēmas 0 Izmaiņu pieprasījumi 0 Vikivietne
Pārlūkot izejas kodu

1.静态页面: 首页 个人中心 登录 注册账号 忘记重置密码 2.引入vuex 加入http请求工具luch-request并设置请求和响应过滤器

sfmind 2 gadi atpakaļ
vecāks
9709f200c2
revīzija
7fd8e0dd6c
25 mainītis faili ar 1209 papildinājumiem un 53 dzēšanām
Dalītais skats Rādīt salīdzināšanas statistiku
  1. 7 0
      yudao-ui-app/.gitignore
  2. 4 7
      yudao-ui-app/App.vue
  3. 52 0
      yudao-ui-app/app.scss
  4. 7 0
      yudao-ui-app/common/api.js
  5. 3 0
      yudao-ui-app/common/config.js
  6. 7 0
      yudao-ui-app/common/mixin.js
  7. 2 0
      yudao-ui-app/common/props.js
  8. 1 1
      yudao-ui-app/index.html
  9. 14 16
      yudao-ui-app/main.js
  10. 27 2
      yudao-ui-app/pages.json
  11. 0 0
      yudao-ui-app/pages/cart/cart.vue
  12. 0 0
      yudao-ui-app/pages/category/category.vue
  13. 182 0
      yudao-ui-app/pages/forgot/forgot.vue
  14. 325 0
      yudao-ui-app/pages/index/index.vue
  15. 149 0
      yudao-ui-app/pages/login/login.vue
  16. 1 2
      yudao-ui-app/pages/profile/profile.vue
  17. 144 0
      yudao-ui-app/pages/register/register.vue
  18. 0 25
      yudao-ui-app/pages/user/user.nvue
  19. 145 0
      yudao-ui-app/pages/user/user.vue
  20. 26 0
      yudao-ui-app/store/index.js
  21. 59 0
      yudao-ui-app/uni_modules/uview-ui/components/u--text-price/u--text-price.vue
  22. 13 0
      yudao-ui-app/util/request/index.js
  23. 14 0
      yudao-ui-app/util/request/requestInterceptors.js
  24. 17 0
      yudao-ui-app/util/request/responseInterceptors.js
  25. 10 0
      yudao-ui-app/vue.config.js

+ 7 - 0
yudao-ui-app/.gitignore
Parādīt failu 

@@ -0,0 +1,7 @@
 
+/unpackage/dist/*
 
+/unpackage/cache/*
 
+/unpackage/release/*
 
+/node_modules/*
 
+/.idea/*
 
+/.hbuilderx/
 
+/.vscode/

+ 4 - 7
yudao-ui-app/App.vue
Parādīt failu 

@@ -15,11 +15,8 @@
 
 <style lang="scss">
 
   /* 引入uView基础样式 */
 
   @import "@/uni_modules/uview-ui/index.scss";
 
-	
-	/*每个页面公共css */
 
-  .container {
 
-    background-color: $uni-bg-color;
 
-    box-sizing: border-box;
 
-    height: 100%;
 
-  }
 
+
 
+  /*每个页面公共scss */
 
+  @import "app.scss";
 
+
 
 </style>

+ 52 - 0
yudao-ui-app/app.scss
Parādīt failu 

@@ -0,0 +1,52 @@
 
+/* 页面公共scss */
 
+.container {
 
+	padding-top: var(--status-bar-height);//uni-app提供了状态栏高度的css变量--status-bar-height
 
+	background-color: $uni-bg-color;
 
+	box-sizing: border-box;
 
+	height: 100%;
 
+}
 
+
 
+/* 布局间距 */
 
+.m-0-r {
 
+	margin: 0rpx;
 
+}
 
+
 
+.mtb-0-r {
 
+	margin-top: 0rpx;
 
+	margin-bottom: 0rpx;
 
+}
 
+
 
+.no-mlt {
 
+	margin-left: 0rpx;
 
+	margin-right: 0rpx;
 
+}
 
+
 
+.mtb-30-r {
 
+	margin-top: 30rpx;
 
+	margin-bottom: 30rpx;
 
+}
 
+
 
+.mlr-30-r {
 
+	margin-left: 30rpx;
 
+	margin-right: 30rpx;
 
+}
 
+
 
+.mt-20-r {margin-top: 20rpx;}
 
+.mt-30-r {margin-top: 30rpx;}
 
+.mt-40-r {margin-top: 40rpx;}
 
+.mt-50-r {margin-top: 50rpx;}
 
+
 
+.mb-20-r {margin-bottom: 20rpx;}
 
+.mb-30-r {margin-bottom: 30rpx;}
 
+.mb-40-r {margin-bottom: 40rpx;}
 
+.mb-50-r {margin-bottom: 50rpx;}
 
+
 
+.ml-20-r {margin-left: 20rpx;}
 
+.ml-30-r {margin-left: 30rpx;}
 
+.ml-40-r {margin-left: 40rpx;}
 
+.ml-50-r {margin-left: 50rpx;}
 
+
 
+.mr-20-r {margin-right: 20rpx;}
 
+.mr-30-r {margin-right: 30rpx;}
 
+.mr-40-r {margin-right: 40rpx;}
 
+.mr-50-r {margin-right: 50rpx;}

+ 7 - 0
yudao-ui-app/common/api.js
Parādīt failu 

@@ -0,0 +1,7 @@
 
+const { http } = uni.$u
 
+
 
+/* index */
 
+// 获取滚动图数据
 
+export const getBannerData = params => http.get('/api/index', params)
 
+// 获取滚动通知数据
 
+export const getNoticeData = params => http.get('/api/notice', params)

+ 3 - 0
yudao-ui-app/common/config.js
Parādīt failu 

@@ -0,0 +1,3 @@
 
+module.exports = {
 
+    baseUrl: 'http://192.168.3.199:8086'
 
+}

+ 7 - 0
yudao-ui-app/common/mixin.js
Parādīt failu 

@@ -0,0 +1,7 @@
 
+export default {
 
+    data() {
 
+        return {
 
+
 
+        }
 
+    }
 
+}

+ 2 - 0
yudao-ui-app/common/props.js
Parādīt failu 

@@ -0,0 +1,2 @@
 
+uni.$u.props.gap.bgColor = '#ffffff'
 
+uni.$u.props.gap.height = '10'

+ 1 - 1
yudao-ui-app/index.html
Parādīt failu 

@@ -3,7 +3,7 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <script>
 
-      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
 
+      let coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
 
         CSS.supports('top: constant(a)'))
 
       document.write(
 
         '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +

+ 14 - 16
yudao-ui-app/main.js
Parādīt failu 

@@ -1,26 +1,24 @@
 
+import Vue from 'vue'
 
 import App from './App'
 
 
-// #ifndef VUE3
 
-import Vue from 'vue'
 
+// vuex
 
+import store from './store'
 
+
 
 Vue.config.productionTip = false
 
+Vue.prototype.$store = store
 
 
-//引入并使用uView的JS库
 
+// 引入全局uView
 
 import uView from '@/uni_modules/uview-ui'
 
-Vue.use(uView)
 
 
 App.mpType = 'app'
 
+Vue.use(uView)
 
+
 
 const app = new Vue({
 
-    ...App
 
+	store,
 
+	...App
 
 })
 
-app.$mount()
 
-// #endif
 
 
-// #ifdef VUE3
 
-import { createSSRApp } from 'vue'
 
-export function createApp() {
 
-  const app = createSSRApp(App)
 
-  return {
 
-    app
 
-  }
 
-}
 
-// #endif
 
+// 引入请求封装
 
+require('./util/request/index')(app)
 
+
 
+app.$mount()

+ 27 - 2
yudao-ui-app/pages.json
Parādīt failu 

@@ -23,6 +23,30 @@
 
 			"style": {
 
 				"navigationBarTitleText": "我的"
 
 			}
 
+		},
 
+		{
 
+			"path": "pages/login/login",
 
+			"style": {
 
+				"navigationBarTitleText": "账号登录"
 
+			}
 
+		},
 
+		{
 
+			"path": "pages/register/register",
 
+			"style": {
 
+				"navigationBarTitleText": "注册账号"
 
+			}
 
+		},
 
+		{
 
+			"path": "pages/forgot/forgot",
 
+			"style": {
 
+				"navigationBarTitleText": "忘记密码"
 
+			}
 
+		},
 
+		{
 
+			"path": "pages/profile/profile",
 
+			"style": {
 
+				"navigationBarTitleText": "个人资料"
 
+			}
 
 		}
 
 	],
 
 	"tabBar": {
 
@@ -48,7 +72,7 @@
 
 				"selectedIconPath": "/static/images/tabbar/cart-active.png"
 
 			},
 
 			{
 
-				"pagePath": "pages/user/user.png",
 
+				"pagePath": "pages/user/user",
 
 				"text": "我的",
 
 				"iconPath": "/static/images/tabbar/user.png",
 
 				"selectedIconPath": "/static/images/tabbar/user-active.png"
 
@@ -56,7 +80,8 @@
 
 		]
 
 	},
 
 	"globalStyle": {
 
-		"navigationBarTextStyle": "black",
 
+		"navigationStyle": "custom",//取消默认导航栏
 
+		"navigationBarTextStyle": "white",
 
 		"navigationBarTitleText": "yudao-ui-app",
 
 		"navigationBarBackgroundColor": "#F8F8F8",
 
 		"backgroundColor": "#FFFFFF"

+ 0 - 0
yudao-ui-app/pages/cart/cart.nvue → yudao-ui-app/pages/cart/cart.vue
Parādīt failu


+ 0 - 0
yudao-ui-app/pages/category/category.nvue → yudao-ui-app/pages/category/category.vue
Parādīt failu


+ 182 - 0
yudao-ui-app/pages/forgot/forgot.vue
Parādīt failu 

@@ -0,0 +1,182 @@
 
+<template>
 
+  <view class="container">
 
+
 
+    <view class="unp-header">
 
+      <view class="unp-logo">
 
+        <u-avatar size="80" icon="github-circle-fill" fontSize="80"></u-avatar>
 
+      </view>
 
+    </view>
 
+
 
+    <view class="unp-box">
 
+      <u--form class="unp-form" labelPosition="left" :model="formData" :rules="rules" ref="form">
 
+        <u-form-item label="账号" prop="username" borderBottom ref="item-username">
 
+          <u-input type="text" maxlength="20" v-model="formData.username" clearable placeholder="账号由数字和字母组成" border="none" @change="handleUsernameChange"></u-input>
 
+        </u-form-item>
 
+
 
+        <u-gap height="20"></u-gap>
 
+
 
+        <u-form-item label="验证码" prop="code" labelWidth="80" borderBottom>
 
+          <u--input type="number" maxlength="6" v-model="formData.code" border="none" placeholder="请填写验证码"></u--input>
 
+          <u-button slot="right" @tap="getCode" :text="tips" type="success" size="mini" :disabled="codeDisabled"></u-button>
 
+          <u-code ref="uCode" @change="codeChange" seconds="60" @start="codeDisabled = true" @end="codeDisabled = false"></u-code>
 
+        </u-form-item>
 
+
 
+        <u-gap height="20"></u-gap>
 
+
 
+        <u-form-item label="密码" prop="password" borderBottom ref="item-password">
 
+          <u-input :type="inputType" maxlength="20" v-model="formData.password" placeholder="新密码由数字、字母和符号组成" border="none" @change="handlePasswordChange">
 
+            <template slot="suffix">
 
+              <u-icon v-if="inputType === 'password'" size="20" color="#666666" name="eye-fill" @click="inputType = 'text'"></u-icon>
 
+              <u-icon v-if="inputType === 'text'" size="20" color="#666666" name="eye-off" @click="inputType = 'password'"></u-icon>
 
+            </template>
 
+          </u-input>
 
+        </u-form-item>
 
+
 
+        <view class="lk-group">
 
+          <!-- 占位 -->
 
+        </view>
 
+
 
+        <u-button
 
+            type="error"
 
+            text="重置密码"
 
+            customStyle="margin-top: 50px"
 
+            @click="handleSubmit"
 
+        ></u-button>
 
+
 
+        <u-gap height="20"></u-gap>
 
+        <u-button type="info" text="返回" @click="navigateBack()"></u-button>
 
+
 
+      </u--form>
 
+
 
+
 
+    </view>
 
+
 
+  </view>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  data() {
 
+    return {
 
+      codeDisabled: false,
 
+      tips: '',
 
+      inputType: 'password',
 
+      formData: {
 
+        username: '',
 
+        code: '',
 
+        password: '',
 
+      },
 
+      rules: {
 
+        'username': {
 
+          type: 'string',
 
+          max: 20,
 
+          required: true,
 
+          message: '请输入您的账号',
 
+          trigger: ['blur', 'change']
 
+        },
 
+        'code': {
 
+          type: 'number',
 
+          max: 6,
 
+          required: true,
 
+          message: '请输入验证码',
 
+          trigger: ['blur', 'change']
 
+        },
 
+        'password': {
 
+          type: 'string',
 
+          max: 20,
 
+          required: true,
 
+          message: '请输入您的新密码',
 
+          trigger: ['blur', 'change']
 
+        }
 
+      }
 
+    }
 
+  },
 
+  onLoad() {
 
+
 
+  },
 
+  methods: {
 
+    handleUsernameChange(e){
 
+      let str = uni.$u.trim(e, 'all');
 
+      this.$nextTick(() => {
 
+        this.formData.username = str
 
+      })
 
+    },
 
+    handlePasswordChange(e){
 
+      let str = uni.$u.trim(e, 'all');
 
+      this.$nextTick(() => {
 
+        this.formData.password = str
 
+      })
 
+    },
 
+    codeChange(text) {
 
+      this.tips = text;
 
+    },
 
+    getCode() {
 
+      if (this.$refs.uCode.canGetCode) {
 
+        // 模拟向后端请求验证码
 
+        uni.showLoading({
 
+          title: '正在获取验证码'
 
+        })
 
+        setTimeout(() => {
 
+          uni.hideLoading();
 
+          // 这里此提示会被this.start()方法中的提示覆盖
 
+          uni.$u.toast('验证码已发送');
 
+          // 通知验证码组件内部开始倒计时
 
+          this.$refs.uCode.start();
 
+        }, 2000);
 
+      } else {
 
+        uni.$u.toast('倒计时结束后再发送');
 
+      }
 
+    },
 
+    handleSubmit() {
 
+      this.$refs.form.validate().then(res => {
 
+        uni.$u.toast('点击了重置密码')
 
+      }).catch(err => {
 
+
 
+      })
 
+    },
 
+    navigateBack() {
 
+      uni.navigateBack()
 
+    }
 
+  }
 
+}
 
+</script>
 
+
 
+<style lang="scss" scoped>
 
+
 
+.unp-header {
 
+  height: 400rpx;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  .unp-logo {
 
+    display: flex;
 
+    flex-direction: column;
 
+    align-items: center;
 
+    justify-content: center;
 
+  }
 
+}
 
+
 
+.unp-box {
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  justify-content: center;
 
+  .unp-form{
 
+    width: 560rpx;
 
+  }
 
+}
 
+
 
+.lk-group {
 
+  height: 40rpx;
 
+  margin-top: 40rpx;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: space-between;
 
+  font-size: 12rpx;
 
+
 
+  color: #3c9cff;
 
+  text-decoration: #3c9cff;
 
+}
 
+
 
+
 
+</style>

+ 325 - 0
yudao-ui-app/pages/index/index.vue
Parādīt failu 

@@ -0,0 +1,325 @@
 
+<template>
 
+  <view class="container">
 
+    <!--搜索栏-->
 
+    <u-sticky style="top: 0" offset-top="0">
 
+      <view class="search-wrap">
 
+        <u-search placeholder="搜索" disabled height="32" :show-action="false" @click="handleSearchClick"></u-search>
 
+      </view>
 
+    </u-sticky>
 
+
 
+    <!--轮播图-->
 
+    <u-swiper :list="swiperList" previousMargin="20" nextMargin="20" circular height="200" @change="e => current = e.current" :autoplay="true" @click="handleSwiperClick">
 
+      <view slot="indicator" class="indicator">
 
+        <view class="indicator__dot" v-for="(item, index) in swiperList" :key="index" :class="[index === current && 'indicator__dot--active']">
 
+        </view>
 
+      </view>
 
+    </u-swiper>
 
+
 
+    <!--宫格菜单按钮-->
 
+    <view class="mt-40-r mb-30-r">
 
+      <u-grid :border="false" col="4"><u-grid-item v-for="(item,index) in menuList" :key="index">
 
+        <u-icon :name="item.icon" :size="40"></u-icon>
 
+        <text class="grid-title">{{item.title}}</text>
 
+      </u-grid-item>
 
+      </u-grid>
 
+    </view>
 
+
 
+    <!--消息滚动栏-->
 
+    <u-notice-bar style="padding: 13px 12px" :text="noticeList" mode="link" direction="column" @click="click"></u-notice-bar>
 
+
 
+    <!--商品展示栏-->
 
+    <view>
 
+      <u-gap height="180" bgColor="#398ade"></u-gap>
 
+      <view class="prod-block">
 
+        <view class="bloc-header">
 
+          <text class="bloc-title">每日上新</text>
 
+          <text class="see-more">查看更多</text>
 
+        </view>
 
+        <u-grid class="prod-grid" :border="false" col="3">
 
+          <u-grid-item class="prod-item-box" v-for="(item,index) in productList" :key="index">
 
+            <view class="prod-item">
 
+              <u--image class="prod-image" width="230rpx" height="230rpx" :src="item"></u--image>
 
+              <view class="item-info">
 
+                <view class="info-text">
 
+                  <u--text :lines="2" size="14px" color="#333333" text="山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。"></u--text>
 
+                </view>
 
+                <view class="price-and-cart">
 
+                  <u--text-price color="red" size="12" integerSize="18" :text="233.33"></u--text-price>
 
+                  <u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon>
 
+                </view>
 
+              </view>
 
+            </view>
 
+          </u-grid-item>
 
+        </u-grid>
 
+      </view>
 
+    </view>
 
+
 
+    <view>
 
+      <view class="prod-block half">
 
+        <view class="bloc-header">
 
+          <text class="bloc-title">商品热卖</text>
 
+          <text class="more">更多 &gt;</text>
 
+        </view>
 
+        <u-grid class="prod-grid" :border="false" col="2">
 
+          <u-grid-item class="prod-item-box" v-for="(item,index) in productList" :key="index">
 
+            <view class="prod-item">
 
+              <u--image class="prod-image" width="345rpx" height="345rpx" :src="item"></u--image>
 
+              <view class="item-info">
 
+                <view class="info-text">
 
+                  <u--text :lines="1" size="14px" color="#333333" text="山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。"></u--text>
 
+                  <u--text :lines="1" size="12px" color="#939393" text="斯是陋室，惟吾德馨。"></u--text>
 
+                </view>
 
+                <view class="price-and-cart">
 
+                  <u--text-price color="red" size="12" integerSize="18" :text="233.33"></u--text-price>
 
+                  <u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon>
 
+                </view>
 
+              </view>
 
+            </view>
 
+          </u-grid-item>
 
+        </u-grid>
 
+      </view>
 
+    </view>
 
+
 
+    <view>
 
+      <view class="prod-block list">
 
+        <view class="bloc-header">
 
+          <text class="bloc-title">更多宝贝</text>
 
+          <text></text>
 
+        </view>
 
+
 
+        <u-list class="prod-list" @scrolltolower="scrolltolower">
 
+          <u-list-item v-for="(item, index) in productList" :key="index">
 
+            <view class="prod-item">
 
+              <u--image class="prod-image" width="210rpx" height="210rpx" :src="item"></u--image>
 
+              <view class="item-info">
 
+                <view class="info-text">
 
+                  <u--text :lines="2" size="14px" color="#333333" text="山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。"></u--text>
 
+                  <u--text :lines="1" size="12px" color="#939393" text="斯是陋室，惟吾德馨。"></u--text>
 
+                </view>
 
+                <view class="price-and-cart">
 
+                  <u--text-price color="red" size="12" integerSize="18" :text="233.33"></u--text-price>
 
+                  <u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon>
 
+                </view>
 
+              </view>
 
+            </view>
 
+          </u-list-item>
 
+        </u-list>
 
+
 
+      </view>
 
+    </view>
 
+    <u-gap height="5px"></u-gap>
 
+    <!--加载更多-->
 
+    <u-loadmore fontSize="32rpx" :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText"/>
 
+
 
+    <u-gap height="10px"></u-gap>
 
+  </view>
 
+</template>
 
+
 
+<script>
 
+import {getBannerData,getNoticeData} from "../../common/api";
 
+
 
+export default {
 
+  components: {
 
+
 
+  },
 
+  data() {
 
+    return {
 
+      current: 0,
 
+      currentNum: 0,
 
+      bannerList: [
 
+        'https://cdn.uviewui.com/uview/swiper/swiper3.png',
 
+        'https://cdn.uviewui.com/uview/swiper/swiper2.png',
 
+        'https://cdn.uviewui.com/uview/swiper/swiper1.png',],
 
+      menuList: [{icon: 'gift', title: '热门推荐'}, {icon: 'star', title: '收藏转发'}, {icon: 'thumb-up', title: '点赞投币'}, {icon: 'heart', title: '感谢支持'}],
 
+      noticeList:[
 
+        '寒雨连江夜入吴',
 
+        '平明送客楚山孤',
 
+        '洛阳亲友如相问',
 
+        '一片冰心在玉壶'
 
+      ],
 
+      productList: [
 
+        'https://cdn.uviewui.com/uview/album/1.jpg',
 
+        'https://cdn.uviewui.com/uview/album/2.jpg',
 
+        'https://cdn.uviewui.com/uview/album/3.jpg',
 
+        'https://cdn.uviewui.com/uview/album/4.jpg',
 
+        'https://cdn.uviewui.com/uview/album/5.jpg',
 
+      ],
 
+      status: 'nomore',
 
+      loadingText: '努力加载中...',
 
+      loadmoreText: '轻轻上拉',
 
+      nomoreText: '实在没有了...'
 
+    }
 
+  },
 
+  onLoad() {
 
+    //this.loadBannerData();
 
+    //this.loadNoticeData();
 
+  },
 
+  methods: {
 
+    loadBannerData() {
 
+      getBannerData().then(res => {
 
+        this.bannerList = res.data;
 
+      }).catch(err => {
 
+        //console.log(err)
 
+      })
 
+    },
 
+    loadNoticeData() {
 
+      getNoticeData().then(res => {
 
+        this.noticeList = res.data;
 
+      }).catch(err => {
 
+        //console.log(err)
 
+      })
 
+    },
 
+    handleSearchClick(e) {
 
+      console.log('监听点击准备跳转页面')
 
+    },
 
+    handleSwiperClick(index){
 
+      console.log('点击了图片索引值：',index)
 
+    }
 
+  },
 
+  computed: {
 
+    swiperList(){
 
+      return this.bannerList.map(item => {
 
+        if (item){
 
+          return item;
 
+        }
 
+      })
 
+    },
 
+    noticeTextList() {
 
+      return this.noticeList.map(item => {
 
+        if (item.title){
 
+          return item.title;
 
+        }
 
+      })
 
+    }
 
+  }
 
+}
 
+</script>
 
+
 
+<style lang="scss" scoped>
 
+
 
+.search-wrap {
 
+  background: #ffffff;
 
+  padding: 20rpx;
 
+}
 
+
 
+.indicator {
 
+  @include flex(row);
 
+  justify-content: center;
 
+
 
+  &__dot {
 
+    height: 15rpx;
 
+    width: 15rpx;
 
+    border-radius: 100rpx;
 
+    background-color: rgba(255, 255, 255, 0.35);
 
+    margin: 0 10rpx;
 
+    transition: background-color 0.3s;
 
+
 
+    &--active {
 
+      background-color: #ffffff;
 
+    }
 
+  }
 
+}
 
+
 
+.grid-title {
 
+  line-height: 50rpx;
 
+  font-size: 26rpx;
 
+}
 
+
 
+.prod-block {
 
+  margin-top: -160px;
 
+  .bloc-header {
 
+    display: flex;
 
+    flex-direction: row;
 
+    align-items: center;
 
+    justify-content: space-between;
 
+    padding: 10rpx 30rpx;
 
+
 
+    .bloc-title {
 
+      color: #ffffff;
 
+      font-size: 34rpx;
 
+    }
 
+    .see-more {
 
+      color: #ffffff;
 
+      background: #3c9cff;
 
+      padding: 0 30rpx;
 
+      height: 50rpx;
 
+      line-height: 50rpx;
 
+      border-radius: 50rpx;
 
+      font-size: 24rpx;
 
+    }
 
+  }
 
+
 
+  &.half, &.list {
 
+    margin-top: 0;
 
+    .bloc-header {
 
+      margin-top: 50rpx;
 
+      margin-bottom: 20rpx;
 
+      .bloc-title {
 
+        color: #333333;
 
+      }
 
+      .more {
 
+        font-size: 24rpx;
 
+      }
 
+    }
 
+  }
 
+
 
+  .prod-grid {
 
+    width: 730rpx;
 
+    margin: 0 auto;
 
+    .prod-item-box {
 
+      padding: 10rpx;
 
+      .prod-item {
 
+        background: #fff;
 
+        border-radius: 10rpx;
 
+        box-shadow: -1rpx 1rpx 2rpx #afd3f5, 1rpx 1rpx 0rpx #afd3f5;
 
+        justify-content: left;
 
+        /deep/ * {
 
+          border-radius: 10rpx 10rpx 0 0;
 
+        }
 
+        .item-info {
 
+          padding: 15rpx;
 
+          .info-text {
 
+            padding-bottom: 15rpx;
 
+          }
 
+          .price-and-cart {
 
+            display: flex;
 
+            justify-content: space-between;
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+.prod-list {
 
+  height: auto !important;
 
+
 
+  .prod-item {
 
+    padding: 20rpx;
 
+    background: #fff;
 
+    display: flex;
 
+    flex-direction: row;
 
+    justify-content: space-between;
 
+    border-bottom: 1rpx solid #f3f3f3;
 
+
 
+    .prod-image {
 
+      border-radius: 10rpx;
 
+      /deep/ * {
 
+        border-radius: 10rpx;
 
+      }
 
+    }
 
+
 
+    .item-info {
 
+      padding: 20rpx 30rpx;
 
+      .info-text {
 
+        padding-bottom: 15rpx;
 
+      }
 
+      .price-and-cart {
 
+        display: flex;
 
+        justify-content: space-between;
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+</style>

+ 149 - 0
yudao-ui-app/pages/login/login.vue
Parādīt failu 

@@ -0,0 +1,149 @@
 
+<template>
 
+	<view class="container">
 
+
 
+    <view class="unp-header">
 
+      <view class="unp-logo">
 
+        <u-avatar size="80" icon="github-circle-fill" fontSize="80"></u-avatar>
 
+      </view>
 
+    </view>
 
+
 
+    <view class="unp-box">
 
+      <u--form class="unp-form" labelPosition="left" :model="formData" :rules="rules" ref="form">
 
+        <u-form-item label="账号" prop="username" borderBottom ref="item-username">
 
+          <u-input type="text" maxlength="20" v-model="formData.username" clearable placeholder="账号由数字和字母组成" border="none" @change="handleUsernameChange"></u-input>
 
+        </u-form-item>
 
+
 
+        <u-gap height="20"></u-gap>
 
+
 
+        <u-form-item label="密码" prop="password" borderBottom ref="item-password">
 
+            <u-input :type="inputType" maxlength="20" v-model="formData.password" placeholder="密码由数字、字母和符号组成" border="none" @change="handlePasswordChange">
 
+              <template slot="suffix">
 
+              <u-icon v-if="inputType === 'password'" size="20" color="#666666" name="eye-fill" @click="inputType = 'text'"></u-icon>
 
+              <u-icon v-if="inputType === 'text'" size="20" color="#666666" name="eye-off" @click="inputType = 'password'"></u-icon>
 
+              </template>
 
+            </u-input>
 
+        </u-form-item>
 
+
 
+        <view class="lk-group">
 
+          <navigator url="/pages/register/register" hover-class="none">
 
+            <text class="register">注册账号</text>
 
+          </navigator>
 
+          <navigator url="/pages/forgot/forgot" hover-class="none">
 
+            <text class="forgot">忘记密码</text>
 
+          </navigator>
 
+        </view>
 
+
 
+        <u-button
 
+            type="primary"
 
+            text="登录"
 
+            customStyle="margin-top: 50px"
 
+            @click="handleSubmit"
 
+        ></u-button>
 
+
 
+        <u-gap height="20"></u-gap>
 
+        <u-button type="info" text="返回" @click="navigateBack()"></u-button>
 
+
 
+      </u--form>
 
+
 
+
 
+    </view>
 
+
 
+	</view>
 
+</template>
 
+
 
+<script>
 
+	export default {
 
+		data() {
 
+			return {
 
+        inputType: 'password',
 
+        formData: {
 
+          username: '',
 
+          password: '',
 
+        },
 
+        rules: {
 
+          'username': {
 
+            type: 'string',
 
+            max: 20,
 
+            required: true,
 
+            message: '请输入您的账号',
 
+            trigger: ['blur', 'change']
 
+          },
 
+          'password': {
 
+            type: 'string',
 
+            max: 20,
 
+            required: true,
 
+            message: '请输入您的密码',
 
+            trigger: ['blur', 'change']
 
+          }
 
+        }
 
+			}
 
+		},
 
+		onLoad() {
 
+
 
+		},
 
+		methods: {
 
+      handleUsernameChange(e){
 
+        let str = uni.$u.trim(e, 'all');
 
+        this.$nextTick(() => {
 
+          this.formData.username = str
 
+        })
 
+      },
 
+      handlePasswordChange(e){
 
+        let str = uni.$u.trim(e, 'all');
 
+        this.$nextTick(() => {
 
+          this.formData.password = str
 
+        })
 
+      },
 
+      handleSubmit() {
 
+        this.$refs.form.validate().then(res => {
 
+          uni.$u.toast('点击了登录')
 
+        }).catch(err => {
 
+
 
+        })
 
+      },
 
+      navigateBack() {
 
+        uni.navigateBack()
 
+      }
 
+		}
 
+	}
 
+</script>
 
+
 
+<style lang="scss" scoped>
 
+
 
+.unp-header {
 
+  height: 400rpx;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  .unp-logo {
 
+    display: flex;
 
+    flex-direction: column;
 
+    align-items: center;
 
+    justify-content: center;
 
+  }
 
+}
 
+
 
+.unp-box {
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  justify-content: center;
 
+  .unp-form{
 
+    width: 560rpx;
 
+  }
 
+}
 
+
 
+.lk-group {
 
+  height: 40rpx;
 
+  margin-top: 40rpx;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: space-between;
 
+  font-size: 12rpx;
 
+
 
+  color: #3c9cff;
 
+  text-decoration: #3c9cff;
 
+}
 
+
 
+
 
+</style>

+ 1 - 2
yudao-ui-app/pages/index/index.nvue → yudao-ui-app/pages/profile/profile.vue
Parādīt failu 

@@ -1,6 +1,6 @@
 
 <template>
 
 	<view class="container">
 
-
 
+个人资料
 
 	</view>
 
 </template>
 
 
@@ -21,5 +21,4 @@
 
 </script>
 
 
 <style lang="scss" scoped>
 
-
 
 </style>

+ 144 - 0
yudao-ui-app/pages/register/register.vue
Parādīt failu 

@@ -0,0 +1,144 @@
 
+<template>
 
+  <view class="container">
 
+
 
+    <view class="unp-header">
 
+      <view class="unp-logo">
 
+        <u-avatar size="80" icon="github-circle-fill" fontSize="80"></u-avatar>
 
+      </view>
 
+    </view>
 
+
 
+    <view class="unp-box">
 
+      <u--form class="unp-form" labelPosition="left" :model="formData" :rules="rules" ref="form">
 
+        <u-form-item label="账号" prop="username" borderBottom ref="item-username">
 
+          <u-input type="text" maxlength="20" v-model="formData.username" clearable placeholder="账号由数字和字母组成" border="none" @change="handleUsernameChange"></u-input>
 
+        </u-form-item>
 
+
 
+        <u-gap height="20"></u-gap>
 
+
 
+        <u-form-item label="密码" prop="password" borderBottom ref="item-password">
 
+          <u-input :type="inputType" maxlength="20" v-model="formData.password" placeholder="密码由数字、字母和符号组成" border="none" @change="handlePasswordChange">
 
+            <template slot="suffix">
 
+              <u-icon v-if="inputType === 'password'" size="20" color="#666666" name="eye-fill" @click="inputType = 'text'"></u-icon>
 
+              <u-icon v-if="inputType === 'text'" size="20" color="#666666" name="eye-off" @click="inputType = 'password'"></u-icon>
 
+            </template>
 
+          </u-input>
 
+        </u-form-item>
 
+
 
+        <view class="lk-group">
 
+        <!-- 占位 -->
 
+        </view>
 
+
 
+        <u-button
 
+            type="success"
 
+            text="注册账号"
 
+            customStyle="margin-top: 50px"
 
+            @click="handleSubmit"
 
+        ></u-button>
 
+
 
+        <u-gap height="20"></u-gap>
 
+        <u-button type="info" text="返回" @click="navigateBack()"></u-button>
 
+
 
+      </u--form>
 
+
 
+
 
+    </view>
 
+
 
+  </view>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  data() {
 
+    return {
 
+      inputType: 'password',
 
+      formData: {
 
+        username: '',
 
+        password: '',
 
+      },
 
+      rules: {
 
+        'username': {
 
+          type: 'string',
 
+          max: 20,
 
+          required: true,
 
+          message: '请输入您的账号',
 
+          trigger: ['blur', 'change']
 
+        },
 
+        'password': {
 
+          type: 'string',
 
+          max: 20,
 
+          required: true,
 
+          message: '请输入您的密码',
 
+          trigger: ['blur', 'change']
 
+        }
 
+      }
 
+    }
 
+  },
 
+  onLoad() {
 
+
 
+  },
 
+  methods: {
 
+    handleUsernameChange(e){
 
+      let str = uni.$u.trim(e, 'all');
 
+      this.$nextTick(() => {
 
+        this.formData.username = str
 
+      })
 
+    },
 
+    handlePasswordChange(e){
 
+      let str = uni.$u.trim(e, 'all');
 
+      this.$nextTick(() => {
 
+        this.formData.password = str
 
+      })
 
+    },
 
+    handleSubmit() {
 
+      this.$refs.form.validate().then(res => {
 
+        uni.$u.toast('点击了注册账号')
 
+      }).catch(err => {
 
+
 
+      })
 
+    },
 
+    navigateBack() {
 
+      uni.navigateBack()
 
+    }
 
+  }
 
+}
 
+</script>
 
+
 
+<style lang="scss" scoped>
 
+
 
+.unp-header {
 
+  height: 400rpx;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  .unp-logo {
 
+    display: flex;
 
+    flex-direction: column;
 
+    align-items: center;
 
+    justify-content: center;
 
+  }
 
+}
 
+
 
+.unp-box {
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  justify-content: center;
 
+  .unp-form{
 
+    width: 560rpx;
 
+  }
 
+}
 
+
 
+.lk-group {
 
+  height: 40rpx;
 
+  margin-top: 40rpx;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: space-between;
 
+  font-size: 12rpx;
 
+
 
+  color: #3c9cff;
 
+  text-decoration: #3c9cff;
 
+}
 
+
 
+
 
+</style>

+ 0 - 25
yudao-ui-app/pages/user/user.nvue
Parādīt failu 

@@ -1,25 +0,0 @@
 
-<template>
 
-	<view class="container">
 
-
 
-	</view>
 
-</template>
 
-
 
-<script>
 
-	export default {
 
-		data() {
 
-			return {
 
-				title: ''
 
-			}
 
-		},
 
-		onLoad() {
 
-
 
-		},
 
-		methods: {
 
-
 
-		}
 
-	}
 
-</script>
 
-
 
-<style lang="scss" scoped>
 
-
 
-</style>

+ 145 - 0
yudao-ui-app/pages/user/user.vue
Parādīt failu 

@@ -0,0 +1,145 @@
 
+<template>
 
+	<view class="container">
 
+    <view class="user-header">
 
+      <view class="user-info" @click="handleUserInfoClick">
 
+        <u-avatar size="80" :src="avatar"></u-avatar>
 
+        <text class="nick-name">{{nickName}}</text>
 
+      </view>
 
+    </view>
 
+
 
+    <u-gap height="10" bgColor="#f6f6f6"></u-gap>
 
+
 
+    <view>
 
+      <view class="order-header">
 
+        <text class="order-title">我的订单</text>
 
+        <view class="see-all">
 
+          <text>查看全部</text>
 
+          <u-icon name="arrow-right"></u-icon>
 
+        </view>
 
+      </view>
 
+
 
+      <view class="mt-40-r mb-40-r">
 
+        <u-grid :border="false" :col="orderStatusList.length"><u-grid-item v-for="(item,index) in orderStatusList" :key="index">
 
+          <u-icon :name="item.icon" :size="32"></u-icon>
 
+          <text class="grid-title">{{item.title}}</text>
 
+        </u-grid-item>
 
+        </u-grid>
 
+      </view>
 
+    </view>
 
+
 
+    <u-gap height="10" bgColor="#f6f6f6"></u-gap>
 
+    <view class="mt-20-r mb-20-r">
 
+      <u-grid :border="false" col="3"><u-grid-item v-for="(item,index) in statisticsList" :key="index">
 
+        <text class="grid-value">{{item.value}}</text>
 
+        <text class="grid-title">{{item.title}}</text>
 
+      </u-grid-item>
 
+      </u-grid>
 
+    </view>
 
+
 
+    <u-gap height="10" bgColor="#f6f6f6"></u-gap>
 
+
 
+    <u-cell-group class="fun-list">
 
+      <u-cell class="fun-item" :border="false" icon="gift" title="分销中心" isLink></u-cell>
 
+      <u-cell class="fun-item" :border="false" icon="tags" title="领券中心" isLink></u-cell>
 
+      <u-cell class="fun-item" :border="false" icon="coupon" title="我的优惠券" isLink></u-cell>
 
+      <u-cell class="fun-item" :border="false" icon="map" title="收获地址" isLink></u-cell>
 
+    </u-cell-group>
 
+
 
+    <u-button class="logout-btn" type="error" color="#ea322b" text="确定"></u-button>
 
+
 
+	</view>
 
+</template>
 
+
 
+<script>
 
+	export default {
 
+		data() {
 
+			return {
 
+        avatar:'',
 
+        nickName:'点击登录',
 
+        orderStatusList: [{icon: 'rmb-circle', title: '待支付'}, {icon: 'car', title: '代发货'}, {icon: 'order', title: '待收货'}, {icon: 'integral', title: '已完成'}],
 
+        statisticsList: [{value: '2', title: '我的收藏'}, {value: '3', title: '我的消息'}, {value: '3', title: '我的足迹'}]
 
+			}
 
+		},
 
+		onLoad() {
 
+
 
+		},
 
+		methods: {
 
+      handleUserInfoClick(){
 
+        if (!uni.getStorageSync('token')) {
 
+          uni.$u.route('/pages/login/login');
 
+        } else {
 
+          uni.$u.route('/pages/profile/profile');
 
+        }
 
+      }
 
+		}
 
+	}
 
+</script>
 
+
 
+<style lang="scss" scoped>
 
+.user-header {
 
+  height: 280rpx;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  .user-info {
 
+    display: flex;
 
+    flex-direction: column;
 
+    align-items: center;
 
+    justify-content: center;
 
+    .nick-name {
 
+      margin-top: 20rpx;
 
+      font-size: 32rpx;
 
+      font-weight: 700;
 
+    }
 
+  }
 
+}
 
+
 
+.order-header {
 
+  display: flex;
 
+  flex-direction: row;
 
+  align-items: center;
 
+  justify-content: space-between;
 
+  padding: 20rpx 30rpx;
 
+  border-bottom: 1rpx solid #f3f3f3;
 
+
 
+  .order-title {
 
+    color: #333333;
 
+    font-size: 34rpx;
 
+  }
 
+  .see-all {
 
+    height: 40rpx;
 
+    display: flex;
 
+    flex-direction: row;
 
+    align-items: center;
 
+    justify-content: right;
 
+    color: #666666;
 
+    font-size: 26rpx;
 
+  }
 
+}
 
+
 
+.grid-title {
 
+  line-height: 50rpx;
 
+  font-size: 26rpx;
 
+}
 
+
 
+.grid-value {
 
+  line-height: 50rpx;
 
+  font-size: 36rpx;
 
+  font-weight: 700;
 
+  color: #2b85e4;
 
+}
 
+
 
+.fun-list {
 
+  .fun-item {
 
+    padding-top: 10rpx;
 
+    padding-bottom: 10rpx;
 
+    border-bottom: 1rpx solid #f3f3f3;
 
+  }
 
+}
 
+
 
+.logout-btn {
 
+  margin-top: 60rpx;
 
+  width: 300rpx;
 
+}
 
+
 
+</style>

+ 26 - 0
yudao-ui-app/store/index.js
Parādīt failu 

@@ -0,0 +1,26 @@
 
+import Vue from 'vue'
 
+import Vuex from 'vuex'
 
+
 
+Vue.use(Vuex) // vue的插件机制
 
+
 
+// Vuex.Store 构造器选项
 
+const store = new Vuex.Store({
 
+    // 为了不和页面或组件的data中的造成混淆，state中的变量前面建议加上$符号
 
+    state: {
 
+        // 用户信息
 
+        $userInfo: {
 
+            id: ''
 
+        }
 
+    },
 
+    mutations: {
 
+
 
+    },
 
+    actions: {
 
+
 
+    },
 
+    getters:{
 
+
 
+    }
 
+})
 
+
 
+export default store

+ 59 - 0
yudao-ui-app/uni_modules/uview-ui/components/u--text-price/u--text-price.vue
Parādīt failu 

@@ -0,0 +1,59 @@
 
+<template>
 
+  <view class="u-text-price-wrap">
 
+    <uvText
 
+        class="u-text-price-item"
 
+        v-for="(item,index) in textArray"
 
+        :key="index"
 
+        :text="item"
 
+        :size="(index === 1 && integerSize) ? integerSize : size"
 
+        :color="color"
 
+    >
 
+    </uvText>
 
+  </view>
 
+</template>
 
+
 
+<script>
 
+/**
 
+ * 此组件存在只为简单的显示特定样式的价格数字
 
+ */
 
+import uvText from "../u-text/u-text.vue";
 
+import props from "../u-text/props.js";
 
+export default {
 
+  name: "u--text-price",
 
+  mixins: [uni.$u.mpMixin, props, uni.$u.mixin],
 
+  components: {
 
+    uvText,
 
+  },
 
+  props: {
 
+    //整形部分字体大小可单独定义
 
+    integerSize: {
 
+      type: [String, Number],
 
+      default: uni.$u.props.text.size
 
+    }
 
+  },
 
+  computed: {
 
+    textArray() {
 
+      let array = ['￥'];
 
+      if (!/^\d+(\.\d+)?$/.test(this.text)) {
 
+        uni.$u.error('组件<u--text-price :text="???" 此处参数应为金额数字');
 
+      } else {
 
+        let arr = parseFloat(this.text).toFixed(2).split('.');
 
+        array.push(arr[0]);
 
+        array.push('.' + arr[1]);
 
+      }
 
+      return array;
 
+    }
 
+  }
 
+};
 
+</script>
 
+<style>
 
+.u-text-price-wrap {
 
+  display: flex;
 
+  flex-direction: row;
 
+  justify-content: left;
 
+}
 
+
 
+.u-text-price-item{
 
+  flex: 0;
 
+}
 
+</style>

+ 13 - 0
yudao-ui-app/util/request/index.js
Parādīt failu 

@@ -0,0 +1,13 @@
 
+// 引入配置
 
+import config from '@/common/config'
 
+// 初始化请求配置
 
+uni.$u.http.setConfig((defaultConfig) => {
 
+    /* defaultConfig 为默认全局配置 */
 
+    defaultConfig.baseURL = config.baseUrl /* 根域名 */
 
+    return defaultConfig
 
+})
 
+
 
+module.exports = (vm) => {
 
+    require('./requestInterceptors')(vm)
 
+    require('./responseInterceptors')(vm)
 
+}

+ 14 - 0
yudao-ui-app/util/request/requestInterceptors.js
Parādīt failu 

@@ -0,0 +1,14 @@
 
+/**
 
+ * 请求拦截
 
+ * @param {Object} http
 
+ */
 
+module.exports = (vm) => {
 
+    uni.$u.http.interceptors.request.use((config) => { // 可使用async await 做异步操作
 
+        // 初始化请求拦截器时，会执行此方法，此时data为undefined，赋予默认{}
 
+        config.data = config.data || {}
 
+        // 可以在此通过vm引用vuex中的变量，具体值在vm.$store.state中
 
+        // console.log(vm.$store.state);
 
+        return config
 
+    }, (config) => // 可使用async await 做异步操作
 
+        Promise.reject(config))
 
+}

+ 17 - 0
yudao-ui-app/util/request/responseInterceptors.js
Parādīt failu 

@@ -0,0 +1,17 @@
 
+/**
 
+ * 响应拦截
 
+ * @param {Object} http
 
+ */
 
+module.exports = (vm) => {
 
+    uni.$u.http.interceptors.response.use((res) => {
 
+        /* 对响应成功做点什么 可使用async await 做异步操作*/
 
+        const data = res.data
 
+        /*
 
+         可以根据业务情况做相应的处理
 
+        */
 
+        return res
 
+    }, (err) => {
 
+        /*  对响应错误做点什么 （statusCode !== 200）*/
 
+        return Promise.reject(err)
 
+    })
 
+}

+ 10 - 0
yudao-ui-app/vue.config.js
Parādīt failu 

@@ -0,0 +1,10 @@
 
+module.exports = {
 
+    // 配置路径别名
 
+    configureWebpack: {
 
+        devServer: {
 
+            // 调试时允许内网穿透，让外网的人访问到本地调试的H5页面
 
+            disableHostCheck: true
 
+        }
 
+    }
 
+    // productionSourceMap: false,
 
+}