Commit 7fd8e0dd6c341759fcbb8ad62552328ac6c11509

Authored by sfmind
1 parent 9709f200

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

yudao-ui-app/.gitignore 0 → 100644
  1 +/unpackage/dist/*
  2 +/unpackage/cache/*
  3 +/unpackage/release/*
  4 +/node_modules/*
  5 +/.idea/*
  6 +/.hbuilderx/
  7 +/.vscode/
yudao-ui-app/App.vue
@@ -15,11 +15,8 @@ @@ -15,11 +15,8 @@
15 <style lang="scss"> 15 <style lang="scss">
16 /* 引入uView基础样式 */ 16 /* 引入uView基础样式 */
17 @import "@/uni_modules/uview-ui/index.scss"; 17 @import "@/uni_modules/uview-ui/index.scss";
18 -  
19 - /*每个页面公共css */  
20 - .container {  
21 - background-color: $uni-bg-color;  
22 - box-sizing: border-box;  
23 - height: 100%;  
24 - } 18 +
  19 + /*每个页面公共scss */
  20 + @import "app.scss";
  21 +
25 </style> 22 </style>
yudao-ui-app/app.scss 0 → 100644
  1 +/* 页面公共scss */
  2 +.container {
  3 + padding-top: var(--status-bar-height);//uni-app提供了状态栏高度的css变量--status-bar-height
  4 + background-color: $uni-bg-color;
  5 + box-sizing: border-box;
  6 + height: 100%;
  7 +}
  8 +
  9 +/* 布局间距 */
  10 +.m-0-r {
  11 + margin: 0rpx;
  12 +}
  13 +
  14 +.mtb-0-r {
  15 + margin-top: 0rpx;
  16 + margin-bottom: 0rpx;
  17 +}
  18 +
  19 +.no-mlt {
  20 + margin-left: 0rpx;
  21 + margin-right: 0rpx;
  22 +}
  23 +
  24 +.mtb-30-r {
  25 + margin-top: 30rpx;
  26 + margin-bottom: 30rpx;
  27 +}
  28 +
  29 +.mlr-30-r {
  30 + margin-left: 30rpx;
  31 + margin-right: 30rpx;
  32 +}
  33 +
  34 +.mt-20-r {margin-top: 20rpx;}
  35 +.mt-30-r {margin-top: 30rpx;}
  36 +.mt-40-r {margin-top: 40rpx;}
  37 +.mt-50-r {margin-top: 50rpx;}
  38 +
  39 +.mb-20-r {margin-bottom: 20rpx;}
  40 +.mb-30-r {margin-bottom: 30rpx;}
  41 +.mb-40-r {margin-bottom: 40rpx;}
  42 +.mb-50-r {margin-bottom: 50rpx;}
  43 +
  44 +.ml-20-r {margin-left: 20rpx;}
  45 +.ml-30-r {margin-left: 30rpx;}
  46 +.ml-40-r {margin-left: 40rpx;}
  47 +.ml-50-r {margin-left: 50rpx;}
  48 +
  49 +.mr-20-r {margin-right: 20rpx;}
  50 +.mr-30-r {margin-right: 30rpx;}
  51 +.mr-40-r {margin-right: 40rpx;}
  52 +.mr-50-r {margin-right: 50rpx;}
yudao-ui-app/common/api.js 0 → 100644
  1 +const { http } = uni.$u
  2 +
  3 +/* index */
  4 +// 获取滚动图数据
  5 +export const getBannerData = params => http.get('/api/index', params)
  6 +// 获取滚动通知数据
  7 +export const getNoticeData = params => http.get('/api/notice', params)
yudao-ui-app/common/config.js 0 → 100644
  1 +module.exports = {
  2 + baseUrl: 'http://192.168.3.199:8086'
  3 +}
yudao-ui-app/common/mixin.js 0 → 100644
  1 +export default {
  2 + data() {
  3 + return {
  4 +
  5 + }
  6 + }
  7 +}
yudao-ui-app/common/props.js 0 → 100644
  1 +uni.$u.props.gap.bgColor = '#ffffff'
  2 +uni.$u.props.gap.height = '10'
yudao-ui-app/index.html
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
3 <head> 3 <head>
4 <meta charset="UTF-8" /> 4 <meta charset="UTF-8" />
5 <script> 5 <script>
6 - var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || 6 + let coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
7 CSS.supports('top: constant(a)')) 7 CSS.supports('top: constant(a)'))
8 document.write( 8 document.write(
9 '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + 9 '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
yudao-ui-app/main.js
  1 +import Vue from 'vue'
1 import App from './App' 2 import App from './App'
2 3
3 -// #ifndef VUE3  
4 -import Vue from 'vue' 4 +// vuex
  5 +import store from './store'
  6 +
5 Vue.config.productionTip = false 7 Vue.config.productionTip = false
  8 +Vue.prototype.$store = store
6 9
7 -//引入并使用uView的JS库 10 +// 引入全局uView
8 import uView from '@/uni_modules/uview-ui' 11 import uView from '@/uni_modules/uview-ui'
9 -Vue.use(uView)  
10 12
11 App.mpType = 'app' 13 App.mpType = 'app'
  14 +Vue.use(uView)
  15 +
12 const app = new Vue({ 16 const app = new Vue({
13 - ...App 17 + store,
  18 + ...App
14 }) 19 })
15 -app.$mount()  
16 -// #endif  
17 20
18 -// #ifdef VUE3  
19 -import { createSSRApp } from 'vue'  
20 -export function createApp() {  
21 - const app = createSSRApp(App)  
22 - return {  
23 - app  
24 - }  
25 -}  
26 -// #endif  
27 \ No newline at end of file 21 \ No newline at end of file
  22 +// 引入请求封装
  23 +require('./util/request/index')(app)
  24 +
  25 +app.$mount()
yudao-ui-app/pages.json
@@ -23,6 +23,30 @@ @@ -23,6 +23,30 @@
23 "style": { 23 "style": {
24 "navigationBarTitleText": "我的" 24 "navigationBarTitleText": "我的"
25 } 25 }
  26 + },
  27 + {
  28 + "path": "pages/login/login",
  29 + "style": {
  30 + "navigationBarTitleText": "账号登录"
  31 + }
  32 + },
  33 + {
  34 + "path": "pages/register/register",
  35 + "style": {
  36 + "navigationBarTitleText": "注册账号"
  37 + }
  38 + },
  39 + {
  40 + "path": "pages/forgot/forgot",
  41 + "style": {
  42 + "navigationBarTitleText": "忘记密码"
  43 + }
  44 + },
  45 + {
  46 + "path": "pages/profile/profile",
  47 + "style": {
  48 + "navigationBarTitleText": "个人资料"
  49 + }
26 } 50 }
27 ], 51 ],
28 "tabBar": { 52 "tabBar": {
@@ -48,7 +72,7 @@ @@ -48,7 +72,7 @@
48 "selectedIconPath": "/static/images/tabbar/cart-active.png" 72 "selectedIconPath": "/static/images/tabbar/cart-active.png"
49 }, 73 },
50 { 74 {
51 - "pagePath": "pages/user/user.png", 75 + "pagePath": "pages/user/user",
52 "text": "我的", 76 "text": "我的",
53 "iconPath": "/static/images/tabbar/user.png", 77 "iconPath": "/static/images/tabbar/user.png",
54 "selectedIconPath": "/static/images/tabbar/user-active.png" 78 "selectedIconPath": "/static/images/tabbar/user-active.png"
@@ -56,7 +80,8 @@ @@ -56,7 +80,8 @@
56 ] 80 ]
57 }, 81 },
58 "globalStyle": { 82 "globalStyle": {
59 - "navigationBarTextStyle": "black", 83 + "navigationStyle": "custom",//取消默认导航栏
  84 + "navigationBarTextStyle": "white",
60 "navigationBarTitleText": "yudao-ui-app", 85 "navigationBarTitleText": "yudao-ui-app",
61 "navigationBarBackgroundColor": "#F8F8F8", 86 "navigationBarBackgroundColor": "#F8F8F8",
62 "backgroundColor": "#FFFFFF" 87 "backgroundColor": "#FFFFFF"
yudao-ui-app/pages/cart/cart.nvue renamed to yudao-ui-app/pages/cart/cart.vue
yudao-ui-app/pages/category/category.nvue renamed to yudao-ui-app/pages/category/category.vue
yudao-ui-app/pages/forgot/forgot.vue 0 → 100644
  1 +<template>
  2 + <view class="container">
  3 +
  4 + <view class="unp-header">
  5 + <view class="unp-logo">
  6 + <u-avatar size="80" icon="github-circle-fill" fontSize="80"></u-avatar>
  7 + </view>
  8 + </view>
  9 +
  10 + <view class="unp-box">
  11 + <u--form class="unp-form" labelPosition="left" :model="formData" :rules="rules" ref="form">
  12 + <u-form-item label="账号" prop="username" borderBottom ref="item-username">
  13 + <u-input type="text" maxlength="20" v-model="formData.username" clearable placeholder="账号由数字和字母组成" border="none" @change="handleUsernameChange"></u-input>
  14 + </u-form-item>
  15 +
  16 + <u-gap height="20"></u-gap>
  17 +
  18 + <u-form-item label="验证码" prop="code" labelWidth="80" borderBottom>
  19 + <u--input type="number" maxlength="6" v-model="formData.code" border="none" placeholder="请填写验证码"></u--input>
  20 + <u-button slot="right" @tap="getCode" :text="tips" type="success" size="mini" :disabled="codeDisabled"></u-button>
  21 + <u-code ref="uCode" @change="codeChange" seconds="60" @start="codeDisabled = true" @end="codeDisabled = false"></u-code>
  22 + </u-form-item>
  23 +
  24 + <u-gap height="20"></u-gap>
  25 +
  26 + <u-form-item label="密码" prop="password" borderBottom ref="item-password">
  27 + <u-input :type="inputType" maxlength="20" v-model="formData.password" placeholder="新密码由数字、字母和符号组成" border="none" @change="handlePasswordChange">
  28 + <template slot="suffix">
  29 + <u-icon v-if="inputType === 'password'" size="20" color="#666666" name="eye-fill" @click="inputType = 'text'"></u-icon>
  30 + <u-icon v-if="inputType === 'text'" size="20" color="#666666" name="eye-off" @click="inputType = 'password'"></u-icon>
  31 + </template>
  32 + </u-input>
  33 + </u-form-item>
  34 +
  35 + <view class="lk-group">
  36 + <!-- 占位 -->
  37 + </view>
  38 +
  39 + <u-button
  40 + type="error"
  41 + text="重置密码"
  42 + customStyle="margin-top: 50px"
  43 + @click="handleSubmit"
  44 + ></u-button>
  45 +
  46 + <u-gap height="20"></u-gap>
  47 + <u-button type="info" text="返回" @click="navigateBack()"></u-button>
  48 +
  49 + </u--form>
  50 +
  51 +
  52 + </view>
  53 +
  54 + </view>
  55 +</template>
  56 +
  57 +<script>
  58 +export default {
  59 + data() {
  60 + return {
  61 + codeDisabled: false,
  62 + tips: '',
  63 + inputType: 'password',
  64 + formData: {
  65 + username: '',
  66 + code: '',
  67 + password: '',
  68 + },
  69 + rules: {
  70 + 'username': {
  71 + type: 'string',
  72 + max: 20,
  73 + required: true,
  74 + message: '请输入您的账号',
  75 + trigger: ['blur', 'change']
  76 + },
  77 + 'code': {
  78 + type: 'number',
  79 + max: 6,
  80 + required: true,
  81 + message: '请输入验证码',
  82 + trigger: ['blur', 'change']
  83 + },
  84 + 'password': {
  85 + type: 'string',
  86 + max: 20,
  87 + required: true,
  88 + message: '请输入您的新密码',
  89 + trigger: ['blur', 'change']
  90 + }
  91 + }
  92 + }
  93 + },
  94 + onLoad() {
  95 +
  96 + },
  97 + methods: {
  98 + handleUsernameChange(e){
  99 + let str = uni.$u.trim(e, 'all');
  100 + this.$nextTick(() => {
  101 + this.formData.username = str
  102 + })
  103 + },
  104 + handlePasswordChange(e){
  105 + let str = uni.$u.trim(e, 'all');
  106 + this.$nextTick(() => {
  107 + this.formData.password = str
  108 + })
  109 + },
  110 + codeChange(text) {
  111 + this.tips = text;
  112 + },
  113 + getCode() {
  114 + if (this.$refs.uCode.canGetCode) {
  115 + // 模拟向后端请求验证码
  116 + uni.showLoading({
  117 + title: '正在获取验证码'
  118 + })
  119 + setTimeout(() => {
  120 + uni.hideLoading();
  121 + // 这里此提示会被this.start()方法中的提示覆盖
  122 + uni.$u.toast('验证码已发送');
  123 + // 通知验证码组件内部开始倒计时
  124 + this.$refs.uCode.start();
  125 + }, 2000);
  126 + } else {
  127 + uni.$u.toast('倒计时结束后再发送');
  128 + }
  129 + },
  130 + handleSubmit() {
  131 + this.$refs.form.validate().then(res => {
  132 + uni.$u.toast('点击了重置密码')
  133 + }).catch(err => {
  134 +
  135 + })
  136 + },
  137 + navigateBack() {
  138 + uni.navigateBack()
  139 + }
  140 + }
  141 +}
  142 +</script>
  143 +
  144 +<style lang="scss" scoped>
  145 +
  146 +.unp-header {
  147 + height: 400rpx;
  148 + display: flex;
  149 + align-items: center;
  150 + justify-content: center;
  151 + .unp-logo {
  152 + display: flex;
  153 + flex-direction: column;
  154 + align-items: center;
  155 + justify-content: center;
  156 + }
  157 +}
  158 +
  159 +.unp-box {
  160 + display: flex;
  161 + flex-direction: column;
  162 + align-items: center;
  163 + justify-content: center;
  164 + .unp-form{
  165 + width: 560rpx;
  166 + }
  167 +}
  168 +
  169 +.lk-group {
  170 + height: 40rpx;
  171 + margin-top: 40rpx;
  172 + display: flex;
  173 + align-items: center;
  174 + justify-content: space-between;
  175 + font-size: 12rpx;
  176 +
  177 + color: #3c9cff;
  178 + text-decoration: #3c9cff;
  179 +}
  180 +
  181 +
  182 +</style>
yudao-ui-app/pages/index/index.vue 0 → 100644
  1 +<template>
  2 + <view class="container">
  3 + <!--搜索栏-->
  4 + <u-sticky style="top: 0" offset-top="0">
  5 + <view class="search-wrap">
  6 + <u-search placeholder="搜索" disabled height="32" :show-action="false" @click="handleSearchClick"></u-search>
  7 + </view>
  8 + </u-sticky>
  9 +
  10 + <!--轮播图-->
  11 + <u-swiper :list="swiperList" previousMargin="20" nextMargin="20" circular height="200" @change="e => current = e.current" :autoplay="true" @click="handleSwiperClick">
  12 + <view slot="indicator" class="indicator">
  13 + <view class="indicator__dot" v-for="(item, index) in swiperList" :key="index" :class="[index === current && 'indicator__dot--active']">
  14 + </view>
  15 + </view>
  16 + </u-swiper>
  17 +
  18 + <!--宫格菜单按钮-->
  19 + <view class="mt-40-r mb-30-r">
  20 + <u-grid :border="false" col="4"><u-grid-item v-for="(item,index) in menuList" :key="index">
  21 + <u-icon :name="item.icon" :size="40"></u-icon>
  22 + <text class="grid-title">{{item.title}}</text>
  23 + </u-grid-item>
  24 + </u-grid>
  25 + </view>
  26 +
  27 + <!--消息滚动栏-->
  28 + <u-notice-bar style="padding: 13px 12px" :text="noticeList" mode="link" direction="column" @click="click"></u-notice-bar>
  29 +
  30 + <!--商品展示栏-->
  31 + <view>
  32 + <u-gap height="180" bgColor="#398ade"></u-gap>
  33 + <view class="prod-block">
  34 + <view class="bloc-header">
  35 + <text class="bloc-title">每日上新</text>
  36 + <text class="see-more">查看更多</text>
  37 + </view>
  38 + <u-grid class="prod-grid" :border="false" col="3">
  39 + <u-grid-item class="prod-item-box" v-for="(item,index) in productList" :key="index">
  40 + <view class="prod-item">
  41 + <u--image class="prod-image" width="230rpx" height="230rpx" :src="item"></u--image>
  42 + <view class="item-info">
  43 + <view class="info-text">
  44 + <u--text :lines="2" size="14px" color="#333333" text="山不在高,有仙则名。水不在深,有龙则灵。斯是陋室,惟吾德馨。"></u--text>
  45 + </view>
  46 + <view class="price-and-cart">
  47 + <u--text-price color="red" size="12" integerSize="18" :text="233.33"></u--text-price>
  48 + <u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon>
  49 + </view>
  50 + </view>
  51 + </view>
  52 + </u-grid-item>
  53 + </u-grid>
  54 + </view>
  55 + </view>
  56 +
  57 + <view>
  58 + <view class="prod-block half">
  59 + <view class="bloc-header">
  60 + <text class="bloc-title">商品热卖</text>
  61 + <text class="more">更多 &gt;</text>
  62 + </view>
  63 + <u-grid class="prod-grid" :border="false" col="2">
  64 + <u-grid-item class="prod-item-box" v-for="(item,index) in productList" :key="index">
  65 + <view class="prod-item">
  66 + <u--image class="prod-image" width="345rpx" height="345rpx" :src="item"></u--image>
  67 + <view class="item-info">
  68 + <view class="info-text">
  69 + <u--text :lines="1" size="14px" color="#333333" text="山不在高,有仙则名。水不在深,有龙则灵。斯是陋室,惟吾德馨。"></u--text>
  70 + <u--text :lines="1" size="12px" color="#939393" text="斯是陋室,惟吾德馨。"></u--text>
  71 + </view>
  72 + <view class="price-and-cart">
  73 + <u--text-price color="red" size="12" integerSize="18" :text="233.33"></u--text-price>
  74 + <u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon>
  75 + </view>
  76 + </view>
  77 + </view>
  78 + </u-grid-item>
  79 + </u-grid>
  80 + </view>
  81 + </view>
  82 +
  83 + <view>
  84 + <view class="prod-block list">
  85 + <view class="bloc-header">
  86 + <text class="bloc-title">更多宝贝</text>
  87 + <text></text>
  88 + </view>
  89 +
  90 + <u-list class="prod-list" @scrolltolower="scrolltolower">
  91 + <u-list-item v-for="(item, index) in productList" :key="index">
  92 + <view class="prod-item">
  93 + <u--image class="prod-image" width="210rpx" height="210rpx" :src="item"></u--image>
  94 + <view class="item-info">
  95 + <view class="info-text">
  96 + <u--text :lines="2" size="14px" color="#333333" text="山不在高,有仙则名。水不在深,有龙则灵。斯是陋室,惟吾德馨。"></u--text>
  97 + <u--text :lines="1" size="12px" color="#939393" text="斯是陋室,惟吾德馨。"></u--text>
  98 + </view>
  99 + <view class="price-and-cart">
  100 + <u--text-price color="red" size="12" integerSize="18" :text="233.33"></u--text-price>
  101 + <u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon>
  102 + </view>
  103 + </view>
  104 + </view>
  105 + </u-list-item>
  106 + </u-list>
  107 +
  108 + </view>
  109 + </view>
  110 + <u-gap height="5px"></u-gap>
  111 + <!--加载更多-->
  112 + <u-loadmore fontSize="32rpx" :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText"/>
  113 +
  114 + <u-gap height="10px"></u-gap>
  115 + </view>
  116 +</template>
  117 +
  118 +<script>
  119 +import {getBannerData,getNoticeData} from "../../common/api";
  120 +
  121 +export default {
  122 + components: {
  123 +
  124 + },
  125 + data() {
  126 + return {
  127 + current: 0,
  128 + currentNum: 0,
  129 + bannerList: [
  130 + 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
  131 + 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
  132 + 'https://cdn.uviewui.com/uview/swiper/swiper1.png',],
  133 + menuList: [{icon: 'gift', title: '热门推荐'}, {icon: 'star', title: '收藏转发'}, {icon: 'thumb-up', title: '点赞投币'}, {icon: 'heart', title: '感谢支持'}],
  134 + noticeList:[
  135 + '寒雨连江夜入吴',
  136 + '平明送客楚山孤',
  137 + '洛阳亲友如相问',
  138 + '一片冰心在玉壶'
  139 + ],
  140 + productList: [
  141 + 'https://cdn.uviewui.com/uview/album/1.jpg',
  142 + 'https://cdn.uviewui.com/uview/album/2.jpg',
  143 + 'https://cdn.uviewui.com/uview/album/3.jpg',
  144 + 'https://cdn.uviewui.com/uview/album/4.jpg',
  145 + 'https://cdn.uviewui.com/uview/album/5.jpg',
  146 + ],
  147 + status: 'nomore',
  148 + loadingText: '努力加载中...',
  149 + loadmoreText: '轻轻上拉',
  150 + nomoreText: '实在没有了...'
  151 + }
  152 + },
  153 + onLoad() {
  154 + //this.loadBannerData();
  155 + //this.loadNoticeData();
  156 + },
  157 + methods: {
  158 + loadBannerData() {
  159 + getBannerData().then(res => {
  160 + this.bannerList = res.data;
  161 + }).catch(err => {
  162 + //console.log(err)
  163 + })
  164 + },
  165 + loadNoticeData() {
  166 + getNoticeData().then(res => {
  167 + this.noticeList = res.data;
  168 + }).catch(err => {
  169 + //console.log(err)
  170 + })
  171 + },
  172 + handleSearchClick(e) {
  173 + console.log('监听点击准备跳转页面')
  174 + },
  175 + handleSwiperClick(index){
  176 + console.log('点击了图片索引值:',index)
  177 + }
  178 + },
  179 + computed: {
  180 + swiperList(){
  181 + return this.bannerList.map(item => {
  182 + if (item){
  183 + return item;
  184 + }
  185 + })
  186 + },
  187 + noticeTextList() {
  188 + return this.noticeList.map(item => {
  189 + if (item.title){
  190 + return item.title;
  191 + }
  192 + })
  193 + }
  194 + }
  195 +}
  196 +</script>
  197 +
  198 +<style lang="scss" scoped>
  199 +
  200 +.search-wrap {
  201 + background: #ffffff;
  202 + padding: 20rpx;
  203 +}
  204 +
  205 +.indicator {
  206 + @include flex(row);
  207 + justify-content: center;
  208 +
  209 + &__dot {
  210 + height: 15rpx;
  211 + width: 15rpx;
  212 + border-radius: 100rpx;
  213 + background-color: rgba(255, 255, 255, 0.35);
  214 + margin: 0 10rpx;
  215 + transition: background-color 0.3s;
  216 +
  217 + &--active {
  218 + background-color: #ffffff;
  219 + }
  220 + }
  221 +}
  222 +
  223 +.grid-title {
  224 + line-height: 50rpx;
  225 + font-size: 26rpx;
  226 +}
  227 +
  228 +.prod-block {
  229 + margin-top: -160px;
  230 + .bloc-header {
  231 + display: flex;
  232 + flex-direction: row;
  233 + align-items: center;
  234 + justify-content: space-between;
  235 + padding: 10rpx 30rpx;
  236 +
  237 + .bloc-title {
  238 + color: #ffffff;
  239 + font-size: 34rpx;
  240 + }
  241 + .see-more {
  242 + color: #ffffff;
  243 + background: #3c9cff;
  244 + padding: 0 30rpx;
  245 + height: 50rpx;
  246 + line-height: 50rpx;
  247 + border-radius: 50rpx;
  248 + font-size: 24rpx;
  249 + }
  250 + }
  251 +
  252 + &.half, &.list {
  253 + margin-top: 0;
  254 + .bloc-header {
  255 + margin-top: 50rpx;
  256 + margin-bottom: 20rpx;
  257 + .bloc-title {
  258 + color: #333333;
  259 + }
  260 + .more {
  261 + font-size: 24rpx;
  262 + }
  263 + }
  264 + }
  265 +
  266 + .prod-grid {
  267 + width: 730rpx;
  268 + margin: 0 auto;
  269 + .prod-item-box {
  270 + padding: 10rpx;
  271 + .prod-item {
  272 + background: #fff;
  273 + border-radius: 10rpx;
  274 + box-shadow: -1rpx 1rpx 2rpx #afd3f5, 1rpx 1rpx 0rpx #afd3f5;
  275 + justify-content: left;
  276 + /deep/ * {
  277 + border-radius: 10rpx 10rpx 0 0;
  278 + }
  279 + .item-info {
  280 + padding: 15rpx;
  281 + .info-text {
  282 + padding-bottom: 15rpx;
  283 + }
  284 + .price-and-cart {
  285 + display: flex;
  286 + justify-content: space-between;
  287 + }
  288 + }
  289 + }
  290 + }
  291 + }
  292 +}
  293 +
  294 +.prod-list {
  295 + height: auto !important;
  296 +
  297 + .prod-item {
  298 + padding: 20rpx;
  299 + background: #fff;
  300 + display: flex;
  301 + flex-direction: row;
  302 + justify-content: space-between;
  303 + border-bottom: 1rpx solid #f3f3f3;
  304 +
  305 + .prod-image {
  306 + border-radius: 10rpx;
  307 + /deep/ * {
  308 + border-radius: 10rpx;
  309 + }
  310 + }
  311 +
  312 + .item-info {
  313 + padding: 20rpx 30rpx;
  314 + .info-text {
  315 + padding-bottom: 15rpx;
  316 + }
  317 + .price-and-cart {
  318 + display: flex;
  319 + justify-content: space-between;
  320 + }
  321 + }
  322 + }
  323 +}
  324 +
  325 +</style>
yudao-ui-app/pages/login/login.vue 0 → 100644
  1 +<template>
  2 + <view class="container">
  3 +
  4 + <view class="unp-header">
  5 + <view class="unp-logo">
  6 + <u-avatar size="80" icon="github-circle-fill" fontSize="80"></u-avatar>
  7 + </view>
  8 + </view>
  9 +
  10 + <view class="unp-box">
  11 + <u--form class="unp-form" labelPosition="left" :model="formData" :rules="rules" ref="form">
  12 + <u-form-item label="账号" prop="username" borderBottom ref="item-username">
  13 + <u-input type="text" maxlength="20" v-model="formData.username" clearable placeholder="账号由数字和字母组成" border="none" @change="handleUsernameChange"></u-input>
  14 + </u-form-item>
  15 +
  16 + <u-gap height="20"></u-gap>
  17 +
  18 + <u-form-item label="密码" prop="password" borderBottom ref="item-password">
  19 + <u-input :type="inputType" maxlength="20" v-model="formData.password" placeholder="密码由数字、字母和符号组成" border="none" @change="handlePasswordChange">
  20 + <template slot="suffix">
  21 + <u-icon v-if="inputType === 'password'" size="20" color="#666666" name="eye-fill" @click="inputType = 'text'"></u-icon>
  22 + <u-icon v-if="inputType === 'text'" size="20" color="#666666" name="eye-off" @click="inputType = 'password'"></u-icon>
  23 + </template>
  24 + </u-input>
  25 + </u-form-item>
  26 +
  27 + <view class="lk-group">
  28 + <navigator url="/pages/register/register" hover-class="none">
  29 + <text class="register">注册账号</text>
  30 + </navigator>
  31 + <navigator url="/pages/forgot/forgot" hover-class="none">
  32 + <text class="forgot">忘记密码</text>
  33 + </navigator>
  34 + </view>
  35 +
  36 + <u-button
  37 + type="primary"
  38 + text="登录"
  39 + customStyle="margin-top: 50px"
  40 + @click="handleSubmit"
  41 + ></u-button>
  42 +
  43 + <u-gap height="20"></u-gap>
  44 + <u-button type="info" text="返回" @click="navigateBack()"></u-button>
  45 +
  46 + </u--form>
  47 +
  48 +
  49 + </view>
  50 +
  51 + </view>
  52 +</template>
  53 +
  54 +<script>
  55 + export default {
  56 + data() {
  57 + return {
  58 + inputType: 'password',
  59 + formData: {
  60 + username: '',
  61 + password: '',
  62 + },
  63 + rules: {
  64 + 'username': {
  65 + type: 'string',
  66 + max: 20,
  67 + required: true,
  68 + message: '请输入您的账号',
  69 + trigger: ['blur', 'change']
  70 + },
  71 + 'password': {
  72 + type: 'string',
  73 + max: 20,
  74 + required: true,
  75 + message: '请输入您的密码',
  76 + trigger: ['blur', 'change']
  77 + }
  78 + }
  79 + }
  80 + },
  81 + onLoad() {
  82 +
  83 + },
  84 + methods: {
  85 + handleUsernameChange(e){
  86 + let str = uni.$u.trim(e, 'all');
  87 + this.$nextTick(() => {
  88 + this.formData.username = str
  89 + })
  90 + },
  91 + handlePasswordChange(e){
  92 + let str = uni.$u.trim(e, 'all');
  93 + this.$nextTick(() => {
  94 + this.formData.password = str
  95 + })
  96 + },
  97 + handleSubmit() {
  98 + this.$refs.form.validate().then(res => {
  99 + uni.$u.toast('点击了登录')
  100 + }).catch(err => {
  101 +
  102 + })
  103 + },
  104 + navigateBack() {
  105 + uni.navigateBack()
  106 + }
  107 + }
  108 + }
  109 +</script>
  110 +
  111 +<style lang="scss" scoped>
  112 +
  113 +.unp-header {
  114 + height: 400rpx;
  115 + display: flex;
  116 + align-items: center;
  117 + justify-content: center;
  118 + .unp-logo {
  119 + display: flex;
  120 + flex-direction: column;
  121 + align-items: center;
  122 + justify-content: center;
  123 + }
  124 +}
  125 +
  126 +.unp-box {
  127 + display: flex;
  128 + flex-direction: column;
  129 + align-items: center;
  130 + justify-content: center;
  131 + .unp-form{
  132 + width: 560rpx;
  133 + }
  134 +}
  135 +
  136 +.lk-group {
  137 + height: 40rpx;
  138 + margin-top: 40rpx;
  139 + display: flex;
  140 + align-items: center;
  141 + justify-content: space-between;
  142 + font-size: 12rpx;
  143 +
  144 + color: #3c9cff;
  145 + text-decoration: #3c9cff;
  146 +}
  147 +
  148 +
  149 +</style>
yudao-ui-app/pages/index/index.nvue renamed to yudao-ui-app/pages/profile/profile.vue
1 <template> 1 <template>
2 <view class="container"> 2 <view class="container">
3 - 3 +个人资料
4 </view> 4 </view>
5 </template> 5 </template>
6 6
@@ -21,5 +21,4 @@ @@ -21,5 +21,4 @@
21 </script> 21 </script>
22 22
23 <style lang="scss" scoped> 23 <style lang="scss" scoped>
24 -  
25 </style> 24 </style>
yudao-ui-app/pages/register/register.vue 0 → 100644
  1 +<template>
  2 + <view class="container">
  3 +
  4 + <view class="unp-header">
  5 + <view class="unp-logo">
  6 + <u-avatar size="80" icon="github-circle-fill" fontSize="80"></u-avatar>
  7 + </view>
  8 + </view>
  9 +
  10 + <view class="unp-box">
  11 + <u--form class="unp-form" labelPosition="left" :model="formData" :rules="rules" ref="form">
  12 + <u-form-item label="账号" prop="username" borderBottom ref="item-username">
  13 + <u-input type="text" maxlength="20" v-model="formData.username" clearable placeholder="账号由数字和字母组成" border="none" @change="handleUsernameChange"></u-input>
  14 + </u-form-item>
  15 +
  16 + <u-gap height="20"></u-gap>
  17 +
  18 + <u-form-item label="密码" prop="password" borderBottom ref="item-password">
  19 + <u-input :type="inputType" maxlength="20" v-model="formData.password" placeholder="密码由数字、字母和符号组成" border="none" @change="handlePasswordChange">
  20 + <template slot="suffix">
  21 + <u-icon v-if="inputType === 'password'" size="20" color="#666666" name="eye-fill" @click="inputType = 'text'"></u-icon>
  22 + <u-icon v-if="inputType === 'text'" size="20" color="#666666" name="eye-off" @click="inputType = 'password'"></u-icon>
  23 + </template>
  24 + </u-input>
  25 + </u-form-item>
  26 +
  27 + <view class="lk-group">
  28 + <!-- 占位 -->
  29 + </view>
  30 +
  31 + <u-button
  32 + type="success"
  33 + text="注册账号"
  34 + customStyle="margin-top: 50px"
  35 + @click="handleSubmit"
  36 + ></u-button>
  37 +
  38 + <u-gap height="20"></u-gap>
  39 + <u-button type="info" text="返回" @click="navigateBack()"></u-button>
  40 +
  41 + </u--form>
  42 +
  43 +
  44 + </view>
  45 +
  46 + </view>
  47 +</template>
  48 +
  49 +<script>
  50 +export default {
  51 + data() {
  52 + return {
  53 + inputType: 'password',
  54 + formData: {
  55 + username: '',
  56 + password: '',
  57 + },
  58 + rules: {
  59 + 'username': {
  60 + type: 'string',
  61 + max: 20,
  62 + required: true,
  63 + message: '请输入您的账号',
  64 + trigger: ['blur', 'change']
  65 + },
  66 + 'password': {
  67 + type: 'string',
  68 + max: 20,
  69 + required: true,
  70 + message: '请输入您的密码',
  71 + trigger: ['blur', 'change']
  72 + }
  73 + }
  74 + }
  75 + },
  76 + onLoad() {
  77 +
  78 + },
  79 + methods: {
  80 + handleUsernameChange(e){
  81 + let str = uni.$u.trim(e, 'all');
  82 + this.$nextTick(() => {
  83 + this.formData.username = str
  84 + })
  85 + },
  86 + handlePasswordChange(e){
  87 + let str = uni.$u.trim(e, 'all');
  88 + this.$nextTick(() => {
  89 + this.formData.password = str
  90 + })
  91 + },
  92 + handleSubmit() {
  93 + this.$refs.form.validate().then(res => {
  94 + uni.$u.toast('点击了注册账号')
  95 + }).catch(err => {
  96 +
  97 + })
  98 + },
  99 + navigateBack() {
  100 + uni.navigateBack()
  101 + }
  102 + }
  103 +}
  104 +</script>
  105 +
  106 +<style lang="scss" scoped>
  107 +
  108 +.unp-header {
  109 + height: 400rpx;
  110 + display: flex;
  111 + align-items: center;
  112 + justify-content: center;
  113 + .unp-logo {
  114 + display: flex;
  115 + flex-direction: column;
  116 + align-items: center;
  117 + justify-content: center;
  118 + }
  119 +}
  120 +
  121 +.unp-box {
  122 + display: flex;
  123 + flex-direction: column;
  124 + align-items: center;
  125 + justify-content: center;
  126 + .unp-form{
  127 + width: 560rpx;
  128 + }
  129 +}
  130 +
  131 +.lk-group {
  132 + height: 40rpx;
  133 + margin-top: 40rpx;
  134 + display: flex;
  135 + align-items: center;
  136 + justify-content: space-between;
  137 + font-size: 12rpx;
  138 +
  139 + color: #3c9cff;
  140 + text-decoration: #3c9cff;
  141 +}
  142 +
  143 +
  144 +</style>
yudao-ui-app/pages/user/user.nvue deleted
1 -<template>  
2 - <view class="container">  
3 -  
4 - </view>  
5 -</template>  
6 -  
7 -<script>  
8 - export default {  
9 - data() {  
10 - return {  
11 - title: ''  
12 - }  
13 - },  
14 - onLoad() {  
15 -  
16 - },  
17 - methods: {  
18 -  
19 - }  
20 - }  
21 -</script>  
22 -  
23 -<style lang="scss" scoped>  
24 -  
25 -</style>  
yudao-ui-app/pages/user/user.vue 0 → 100644
  1 +<template>
  2 + <view class="container">
  3 + <view class="user-header">
  4 + <view class="user-info" @click="handleUserInfoClick">
  5 + <u-avatar size="80" :src="avatar"></u-avatar>
  6 + <text class="nick-name">{{nickName}}</text>
  7 + </view>
  8 + </view>
  9 +
  10 + <u-gap height="10" bgColor="#f6f6f6"></u-gap>
  11 +
  12 + <view>
  13 + <view class="order-header">
  14 + <text class="order-title">我的订单</text>
  15 + <view class="see-all">
  16 + <text>查看全部</text>
  17 + <u-icon name="arrow-right"></u-icon>
  18 + </view>
  19 + </view>
  20 +
  21 + <view class="mt-40-r mb-40-r">
  22 + <u-grid :border="false" :col="orderStatusList.length"><u-grid-item v-for="(item,index) in orderStatusList" :key="index">
  23 + <u-icon :name="item.icon" :size="32"></u-icon>
  24 + <text class="grid-title">{{item.title}}</text>
  25 + </u-grid-item>
  26 + </u-grid>
  27 + </view>
  28 + </view>
  29 +
  30 + <u-gap height="10" bgColor="#f6f6f6"></u-gap>
  31 + <view class="mt-20-r mb-20-r">
  32 + <u-grid :border="false" col="3"><u-grid-item v-for="(item,index) in statisticsList" :key="index">
  33 + <text class="grid-value">{{item.value}}</text>
  34 + <text class="grid-title">{{item.title}}</text>
  35 + </u-grid-item>
  36 + </u-grid>
  37 + </view>
  38 +
  39 + <u-gap height="10" bgColor="#f6f6f6"></u-gap>
  40 +
  41 + <u-cell-group class="fun-list">
  42 + <u-cell class="fun-item" :border="false" icon="gift" title="分销中心" isLink></u-cell>
  43 + <u-cell class="fun-item" :border="false" icon="tags" title="领券中心" isLink></u-cell>
  44 + <u-cell class="fun-item" :border="false" icon="coupon" title="我的优惠券" isLink></u-cell>
  45 + <u-cell class="fun-item" :border="false" icon="map" title="收获地址" isLink></u-cell>
  46 + </u-cell-group>
  47 +
  48 + <u-button class="logout-btn" type="error" color="#ea322b" text="确定"></u-button>
  49 +
  50 + </view>
  51 +</template>
  52 +
  53 +<script>
  54 + export default {
  55 + data() {
  56 + return {
  57 + avatar:'',
  58 + nickName:'点击登录',
  59 + orderStatusList: [{icon: 'rmb-circle', title: '待支付'}, {icon: 'car', title: '代发货'}, {icon: 'order', title: '待收货'}, {icon: 'integral', title: '已完成'}],
  60 + statisticsList: [{value: '2', title: '我的收藏'}, {value: '3', title: '我的消息'}, {value: '3', title: '我的足迹'}]
  61 + }
  62 + },
  63 + onLoad() {
  64 +
  65 + },
  66 + methods: {
  67 + handleUserInfoClick(){
  68 + if (!uni.getStorageSync('token')) {
  69 + uni.$u.route('/pages/login/login');
  70 + } else {
  71 + uni.$u.route('/pages/profile/profile');
  72 + }
  73 + }
  74 + }
  75 + }
  76 +</script>
  77 +
  78 +<style lang="scss" scoped>
  79 +.user-header {
  80 + height: 280rpx;
  81 + display: flex;
  82 + align-items: center;
  83 + justify-content: center;
  84 + .user-info {
  85 + display: flex;
  86 + flex-direction: column;
  87 + align-items: center;
  88 + justify-content: center;
  89 + .nick-name {
  90 + margin-top: 20rpx;
  91 + font-size: 32rpx;
  92 + font-weight: 700;
  93 + }
  94 + }
  95 +}
  96 +
  97 +.order-header {
  98 + display: flex;
  99 + flex-direction: row;
  100 + align-items: center;
  101 + justify-content: space-between;
  102 + padding: 20rpx 30rpx;
  103 + border-bottom: 1rpx solid #f3f3f3;
  104 +
  105 + .order-title {
  106 + color: #333333;
  107 + font-size: 34rpx;
  108 + }
  109 + .see-all {
  110 + height: 40rpx;
  111 + display: flex;
  112 + flex-direction: row;
  113 + align-items: center;
  114 + justify-content: right;
  115 + color: #666666;
  116 + font-size: 26rpx;
  117 + }
  118 +}
  119 +
  120 +.grid-title {
  121 + line-height: 50rpx;
  122 + font-size: 26rpx;
  123 +}
  124 +
  125 +.grid-value {
  126 + line-height: 50rpx;
  127 + font-size: 36rpx;
  128 + font-weight: 700;
  129 + color: #2b85e4;
  130 +}
  131 +
  132 +.fun-list {
  133 + .fun-item {
  134 + padding-top: 10rpx;
  135 + padding-bottom: 10rpx;
  136 + border-bottom: 1rpx solid #f3f3f3;
  137 + }
  138 +}
  139 +
  140 +.logout-btn {
  141 + margin-top: 60rpx;
  142 + width: 300rpx;
  143 +}
  144 +
  145 +</style>
yudao-ui-app/store/index.js 0 → 100644
  1 +import Vue from 'vue'
  2 +import Vuex from 'vuex'
  3 +
  4 +Vue.use(Vuex) // vue的插件机制
  5 +
  6 +// Vuex.Store 构造器选项
  7 +const store = new Vuex.Store({
  8 + // 为了不和页面或组件的data中的造成混淆,state中的变量前面建议加上$符号
  9 + state: {
  10 + // 用户信息
  11 + $userInfo: {
  12 + id: ''
  13 + }
  14 + },
  15 + mutations: {
  16 +
  17 + },
  18 + actions: {
  19 +
  20 + },
  21 + getters:{
  22 +
  23 + }
  24 +})
  25 +
  26 +export default store
yudao-ui-app/uni_modules/uview-ui/components/u--text-price/u--text-price.vue 0 → 100644
  1 +<template>
  2 + <view class="u-text-price-wrap">
  3 + <uvText
  4 + class="u-text-price-item"
  5 + v-for="(item,index) in textArray"
  6 + :key="index"
  7 + :text="item"
  8 + :size="(index === 1 && integerSize) ? integerSize : size"
  9 + :color="color"
  10 + >
  11 + </uvText>
  12 + </view>
  13 +</template>
  14 +
  15 +<script>
  16 +/**
  17 + * 此组件存在只为简单的显示特定样式的价格数字
  18 + */
  19 +import uvText from "../u-text/u-text.vue";
  20 +import props from "../u-text/props.js";
  21 +export default {
  22 + name: "u--text-price",
  23 + mixins: [uni.$u.mpMixin, props, uni.$u.mixin],
  24 + components: {
  25 + uvText,
  26 + },
  27 + props: {
  28 + //整形部分字体大小可单独定义
  29 + integerSize: {
  30 + type: [String, Number],
  31 + default: uni.$u.props.text.size
  32 + }
  33 + },
  34 + computed: {
  35 + textArray() {
  36 + let array = ['¥'];
  37 + if (!/^\d+(\.\d+)?$/.test(this.text)) {
  38 + uni.$u.error('组件<u--text-price :text="???" 此处参数应为金额数字');
  39 + } else {
  40 + let arr = parseFloat(this.text).toFixed(2).split('.');
  41 + array.push(arr[0]);
  42 + array.push('.' + arr[1]);
  43 + }
  44 + return array;
  45 + }
  46 + }
  47 +};
  48 +</script>
  49 +<style>
  50 +.u-text-price-wrap {
  51 + display: flex;
  52 + flex-direction: row;
  53 + justify-content: left;
  54 +}
  55 +
  56 +.u-text-price-item{
  57 + flex: 0;
  58 +}
  59 +</style>
0 \ No newline at end of file 60 \ No newline at end of file
yudao-ui-app/util/request/index.js 0 → 100644
  1 +// 引入配置
  2 +import config from '@/common/config'
  3 +// 初始化请求配置
  4 +uni.$u.http.setConfig((defaultConfig) => {
  5 + /* defaultConfig 为默认全局配置 */
  6 + defaultConfig.baseURL = config.baseUrl /* 根域名 */
  7 + return defaultConfig
  8 +})
  9 +
  10 +module.exports = (vm) => {
  11 + require('./requestInterceptors')(vm)
  12 + require('./responseInterceptors')(vm)
  13 +}
yudao-ui-app/util/request/requestInterceptors.js 0 → 100644
  1 +/**
  2 + * 请求拦截
  3 + * @param {Object} http
  4 + */
  5 +module.exports = (vm) => {
  6 + uni.$u.http.interceptors.request.use((config) => { // 可使用async await 做异步操作
  7 + // 初始化请求拦截器时,会执行此方法,此时data为undefined,赋予默认{}
  8 + config.data = config.data || {}
  9 + // 可以在此通过vm引用vuex中的变量,具体值在vm.$store.state中
  10 + // console.log(vm.$store.state);
  11 + return config
  12 + }, (config) => // 可使用async await 做异步操作
  13 + Promise.reject(config))
  14 +}
yudao-ui-app/util/request/responseInterceptors.js 0 → 100644
  1 +/**
  2 + * 响应拦截
  3 + * @param {Object} http
  4 + */
  5 +module.exports = (vm) => {
  6 + uni.$u.http.interceptors.response.use((res) => {
  7 + /* 对响应成功做点什么 可使用async await 做异步操作*/
  8 + const data = res.data
  9 + /*
  10 + 可以根据业务情况做相应的处理
  11 + */
  12 + return res
  13 + }, (err) => {
  14 + /* 对响应错误做点什么 (statusCode !== 200)*/
  15 + return Promise.reject(err)
  16 + })
  17 +}
0 \ No newline at end of file 18 \ No newline at end of file
yudao-ui-app/vue.config.js 0 → 100644
  1 +module.exports = {
  2 + // 配置路径别名
  3 + configureWebpack: {
  4 + devServer: {
  5 + // 调试时允许内网穿透,让外网的人访问到本地调试的H5页面
  6 + disableHostCheck: true
  7 + }
  8 + }
  9 + // productionSourceMap: false,
  10 +}