mirror of
https://gitee.com/huangge1199_admin/vue-pro.git
synced 2024-11-27 01:32:03 +08:00
1.静态页面: 首页 个人中心 登录 注册账号 忘记重置密码 2.引入vuex 加入http请求工具luch-request并设置请求和响应过滤器
This commit is contained in:
sfmind
parent
9709f200c2
commit
7fd8e0dd6c
7
yudao-ui-app/.gitignore
vendored
Normal file
7
yudao-ui-app/.gitignore
vendored
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
/unpackage/dist/*
|
||||||
|
/unpackage/cache/*
|
||||||
|
/unpackage/release/*
|
||||||
|
/node_modules/*
|
||||||
|
/.idea/*
|
||||||
|
/.hbuilderx/
|
||||||
|
/.vscode/
|
||||||
@ -16,10 +16,7 @@
|
|||||||
/* 引入uView基础样式 */
|
/* 引入uView基础样式 */
|
||||||
@import "@/uni_modules/uview-ui/index.scss";
|
@import "@/uni_modules/uview-ui/index.scss";
|
||||||
|
|
||||||
/*每个页面公共css */
|
/*每个页面公共scss */
|
||||||
.container {
|
@import "app.scss";
|
||||||
background-color: $uni-bg-color;
|
|
||||||
box-sizing: border-box;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
52
yudao-ui-app/app.scss
Normal file
52
yudao-ui-app/app.scss
Normal file
@ -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
yudao-ui-app/common/api.js
Normal file
7
yudao-ui-app/common/api.js
Normal file
@ -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
yudao-ui-app/common/config.js
Normal file
3
yudao-ui-app/common/config.js
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
module.exports = {
|
||||||
|
baseUrl: 'http://192.168.3.199:8086'
|
||||||
|
}
|
||||||
7
yudao-ui-app/common/mixin.js
Normal file
7
yudao-ui-app/common/mixin.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
2
yudao-ui-app/common/props.js
Normal file
2
yudao-ui-app/common/props.js
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
uni.$u.props.gap.bgColor = '#ffffff'
|
||||||
|
uni.$u.props.gap.height = '10'
|
||||||
@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<script>
|
<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)'))
|
CSS.supports('top: constant(a)'))
|
||||||
document.write(
|
document.write(
|
||||||
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
|
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
|
||||||
|
|||||||
@ -1,26 +1,24 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
import App from './App'
|
import App from './App'
|
||||||
|
|
||||||
// #ifndef VUE3
|
// vuex
|
||||||
import Vue from 'vue'
|
import store from './store'
|
||||||
Vue.config.productionTip = false
|
|
||||||
|
|
||||||
//引入并使用uView的JS库
|
Vue.config.productionTip = false
|
||||||
|
Vue.prototype.$store = store
|
||||||
|
|
||||||
|
// 引入全局uView
|
||||||
import uView from '@/uni_modules/uview-ui'
|
import uView from '@/uni_modules/uview-ui'
|
||||||
Vue.use(uView)
|
|
||||||
|
|
||||||
App.mpType = 'app'
|
App.mpType = 'app'
|
||||||
|
Vue.use(uView)
|
||||||
|
|
||||||
const app = new Vue({
|
const app = new Vue({
|
||||||
|
store,
|
||||||
...App
|
...App
|
||||||
})
|
})
|
||||||
app.$mount()
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
// #ifdef VUE3
|
// 引入请求封装
|
||||||
import { createSSRApp } from 'vue'
|
require('./util/request/index')(app)
|
||||||
export function createApp() {
|
|
||||||
const app = createSSRApp(App)
|
app.$mount()
|
||||||
return {
|
|
||||||
app
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
|
|||||||
@ -23,6 +23,30 @@
|
|||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "我的"
|
"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": {
|
"tabBar": {
|
||||||
@ -48,7 +72,7 @@
|
|||||||
"selectedIconPath": "/static/images/tabbar/cart-active.png"
|
"selectedIconPath": "/static/images/tabbar/cart-active.png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"pagePath": "pages/user/user.png",
|
"pagePath": "pages/user/user",
|
||||||
"text": "我的",
|
"text": "我的",
|
||||||
"iconPath": "/static/images/tabbar/user.png",
|
"iconPath": "/static/images/tabbar/user.png",
|
||||||
"selectedIconPath": "/static/images/tabbar/user-active.png"
|
"selectedIconPath": "/static/images/tabbar/user-active.png"
|
||||||
@ -56,7 +80,8 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"globalStyle": {
|
"globalStyle": {
|
||||||
"navigationBarTextStyle": "black",
|
"navigationStyle": "custom",//取消默认导航栏
|
||||||
|
"navigationBarTextStyle": "white",
|
||||||
"navigationBarTitleText": "yudao-ui-app",
|
"navigationBarTitleText": "yudao-ui-app",
|
||||||
"navigationBarBackgroundColor": "#F8F8F8",
|
"navigationBarBackgroundColor": "#F8F8F8",
|
||||||
"backgroundColor": "#FFFFFF"
|
"backgroundColor": "#FFFFFF"
|
||||||
|
|||||||
182
yudao-ui-app/pages/forgot/forgot.vue
Normal file
182
yudao-ui-app/pages/forgot/forgot.vue
Normal file
@ -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
yudao-ui-app/pages/index/index.vue
Normal file
325
yudao-ui-app/pages/index/index.vue
Normal file
@ -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">更多 ></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
yudao-ui-app/pages/login/login.vue
Normal file
149
yudao-ui-app/pages/login/login.vue
Normal file
@ -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,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
|
个人资料
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -21,5 +21,4 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
144
yudao-ui-app/pages/register/register.vue
Normal file
144
yudao-ui-app/pages/register/register.vue
Normal file
@ -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>
|
||||||
@ -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
yudao-ui-app/pages/user/user.vue
Normal file
145
yudao-ui-app/pages/user/user.vue
Normal file
@ -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
yudao-ui-app/store/index.js
Normal file
26
yudao-ui-app/store/index.js
Normal file
@ -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
|
||||||
@ -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
yudao-ui-app/util/request/index.js
Normal file
13
yudao-ui-app/util/request/index.js
Normal file
@ -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
yudao-ui-app/util/request/requestInterceptors.js
Normal file
14
yudao-ui-app/util/request/requestInterceptors.js
Normal file
@ -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
yudao-ui-app/util/request/responseInterceptors.js
Normal file
17
yudao-ui-app/util/request/responseInterceptors.js
Normal file
@ -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
yudao-ui-app/vue.config.js
Normal file
10
yudao-ui-app/vue.config.js
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
module.exports = {
|
||||||
|
// 配置路径别名
|
||||||
|
configureWebpack: {
|
||||||
|
devServer: {
|
||||||
|
// 调试时允许内网穿透，让外网的人访问到本地调试的H5页面
|
||||||
|
disableHostCheck: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// productionSourceMap: false,
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user