Commit 7fd8e0dd6c341759fcbb8ad62552328ac6c11509
1 parent
9709f200
1.静态页面: 首页 个人中心 登录 注册账号 忘记重置密码 2.引入vuex 加入http请求工具luch-request并设置请求和响应过滤器
Showing
25 changed files
with
1209 additions
and
53 deletions
yudao-ui-app/.gitignore
0 → 100644
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
yudao-ui-app/common/config.js
0 → 100644
yudao-ui-app/common/mixin.js
0 → 100644
yudao-ui-app/common/props.js
0 → 100644
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">更多 ></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
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 |