p38192567
/
ruoyi-vue-pro1
mirror of https://gitee.com/zhijiantianya/ruoyi-vue-pro.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

调整自定义插件、代码风格化

This commit is contained in:
sfmind 2022-04-16 22:04:02 +08:00
parent cfcc0aa6dd
commit 9e69f6e6c2
12 changed files with 528 additions and 563 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
yudao-ui-app/.editorconfig Normal file
View File

@ -0,0 +1,22 @@
# 告诉EditorConfig插件，这是根文件，不用继续往上查找
root = true
# 匹配全部文件
[*]
# 设置字符集
charset = utf-8
# 缩进风格，可选space、tab
indent_style = space
# 缩进的空格数
indent_size = 2
# 结尾换行符，可选lf、cr、crlf
end_of_line = lf
# 在文件结尾插入新行
insert_final_newline = true
# 删除一行中的前后空格
trim_trailing_whitespace = true
# 匹配md结尾的文件
[*.md]
insert_final_newline = false
trim_trailing_whitespace = false

54
yudao-ui-app/components/custom-text-price/custom-text-price.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<view class="u-text-price-wrap">
<text v-for="(item, index) in textArray" :key="index" :style="{ 'font-size': (index === 1 ? integerSize : size) + 'px', 'color': color }">
{{ item }}
</text>
</view>
</template>
<script>
/**
* 此组件存在只为简单的显示特定样式的(人名币)价格数字
*/
export default {
name: 'custom-text-price',
components: {},
props: {
price: {
type: [String, Number],
default: '0.00'
},
color: {
type: String,
default: '#333333'
},
//字体大小
size: {
type: [String, Number],
default: 15
},
//整形部分字体大小可单独定义
intSize: {
type: [String, Number],
default: 15
}
},
computed: {
textArray() {
let array = ['￥']
if (!/^\d+(\.\d+)?$/.test(this.price)) {
console.error('组件<custom-text-price :text="???" 此处参数应为金额数字')
} else {
let arr = parseFloat(this.price).toFixed(2).split('.')
array.push(arr[0])
array.push('.' + arr[1])
}
return array
},
integerSize() {
return this.intSize ? this.intSize : this.size
}
}
}
</script>
<style></style>

29
yudao-ui-app/pages/cart/cart.vue
View File

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

244
yudao-ui-app/pages/category/category.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<view class="container"> <view class="container">
<view class="search-wrap"> <view class="search-wrap">
<u-search placeholder="搜索" disabled height="32" :show-action="false" @click="handleSearchClick"></u-search> <u-search placeholder="搜索" disabled height="32" :show-action="false" @click="handleSearchClick"></u-search>
</view> </view>
<view class="category-box"> <view class="category-box">
<view class="box-left"> <view class="box-left">
<u-list @scrolltolower="scrolltolower"> <u-list @scrolltolower="scrolltolower">
<u-list-item class="category-item" v-for="(item, index) in categoryList" :key="index"> <u-list-item class="category-item" v-for="(item, index) in categoryList" :key="item.id">
<view class="item-title" :class="index === currentIndex ? 'active' : ''" @click="handleCategoryClick(index)"> <view class="item-title" :class="{ active: currentIndex === index }" @click="handleCategoryClick(index)">
<text>{{item.name}}</text> <text>{{ item.name }}</text>
</view> </view>
</u-list-item> </u-list-item>
</u-list> </u-list>
@ -19,7 +19,7 @@
</view> </view>
<view> <view>
<u-list class="prod-list" @scrolltolower="scrolltolower"> <u-list class="prod-list" @scrolltolower="scrolltolower">
<u-list-item v-for="(item, index) in productList" :key="index"> <u-list-item v-for="(item, index) in productList" :key="item.id">
<view class="prod-item" @click="handleProdItemClick(item.id)"> <view class="prod-item" @click="handleProdItemClick(item.id)">
<u--image class="prod-image" width="140rpx" height="140rpx" :src="item.image"></u--image> <u--image class="prod-image" width="140rpx" height="140rpx" :src="item.image"></u--image>
<view class="item-info"> <view class="item-info">
@ -29,7 +29,7 @@
<u--text :lines="1" size="12px" color="#939393" :text="item.desc"></u--text> <u--text :lines="1" size="12px" color="#939393" :text="item.desc"></u--text>
</view> </view>
<view class="price-and-cart"> <view class="price-and-cart">
<u--text-price color="red" size="12" intSize="18" :text="item.price"></u--text-price> <custom-text-price color="red" size="12" intSize="18" :price="item.price"></custom-text-price>
<u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon> <u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon>
</view> </view>
</view> </view>
@ -39,144 +39,151 @@
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import UText from "../../uni_modules/uview-ui/components/u-text/u-text"; import UText from '../../uni_modules/uview-ui/components/u-text/u-text'
export default { export default {
components: {UText}, components: { UText },
data() { data() {
return { return {
currentIndex: 0, currentIndex: 0,
categoryList: [ categoryList: [
{ {
id: 1, id: 1,
image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png', image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
name: '关注' name: '关注'
}, { },
id: 1, {
image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png', id: 2,
name: '推荐' image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
}, { name: '推荐'
id: 1, },
image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png', {
name: '电影' id: 3,
}, { image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
id: 1, name: '电影'
image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png', },
name: '科技' {
}, { id: 4,
id: 1, image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png', name: '科技'
name: '音乐' },
}, { {
id: 1, id: 5,
image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png', image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
name: '美食' name: '音乐'
}, { },
id: 1, {
image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png', id: 6,
name: '文化' image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
}, { name: '美食'
id: 1, },
image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png', {
name: '财经' id: 7,
}, { image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
id: 1, name: '文化'
image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png', },
name: '手工' {
}], id: 8,
productList: [ image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
{ name: '财经'
id: 1, },
image: 'https://cdn.uviewui.com/uview/album/1.jpg', {
title: '山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。', id: 9,
desc: '山不在于高，有了神仙就会有名气。水不在于深，有了龙就会有灵气。这是简陋的房子，只是我品德好就感觉不到简陋了。', image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
price: '13.00' name: '手工'
},
{
id: 2,
image: 'https://cdn.uviewui.com/uview/album/2.jpg',
title: '商品222',
desc: '',
price: '23.00'
},
{
id: 3,
image: 'https://cdn.uviewui.com/uview/album/3.jpg',
title: '商品333',
desc: '商品描述信息2',
price: '33.00'
},
{
id: 4,
image: 'https://cdn.uviewui.com/uview/album/4.jpg',
title: '商品444',
desc: '商品描述信息4',
price: '43.00'
},
{
id: 5,
image: 'https://cdn.uviewui.com/uview/album/5.jpg',
title: '商品555',
desc: '商品描述信息5',
price: '53.00'
}
]
}
},
onLoad() {
},
methods: {
handleSearchClick(e) {
console.log('监听点击准备跳转页面')
},
handleCategoryClick(index){
if (this.currentIndex !== index) {
this.currentIndex = index;
// TODO 查询下分类商品
} }
}, ],
handleProdItemClick(productId){ productList: [
uni.$u.route('/pages/product/product', { {
productId: productId id: 0,
}); image: 'https://cdn.uviewui.com/uview/album/1.jpg',
title: '山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。',
desc: '山不在于高，有了神仙就会有名气。水不在于深，有了龙就会有灵气。这是简陋的房子，只是我品德好就感觉不到简陋了。',
price: '13.00'
},
{
id: 2,
image: 'https://cdn.uviewui.com/uview/album/2.jpg',
title: '商品222',
desc: '',
price: '23.00'
},
{
id: 3,
image: 'https://cdn.uviewui.com/uview/album/3.jpg',
title: '商品333',
desc: '商品描述信息2',
price: '33.00'
},
{
id: 4,
image: 'https://cdn.uviewui.com/uview/album/4.jpg',
title: '商品444',
desc: '商品描述信息4',
price: '43.00'
},
{
id: 5,
image: 'https://cdn.uviewui.com/uview/album/5.jpg',
title: '商品555',
desc: '商品描述信息5',
price: '53.00'
}
]
}
},
onLoad() {},
methods: {
handleSearchClick(e) {
console.log('监听点击准备跳转页面')
},
handleCategoryClick(index) {
if (this.currentIndex !== index) {
this.currentIndex = index
// TODO 查询下分类商品
} }
} },
} handleProdItemClick(productId) {
uni.$u.route('/pages/product/product', {
productId: productId
})
}
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.search-wrap { .search-wrap {
background: $custom-bg-color; background: $custom-bg-color;
padding: 20rpx; padding: 20rpx;
} }
.category-box{ .category-box {
display: flex; display: flex;
.box-left{ .box-left {
width: 180rpx; width: 180rpx;
padding-top: 20rpx; padding-top: 20rpx;
border-right: $custom-border-style; border-right: $custom-border-style;
.category-item{ .category-item {
border-bottom: $custom-border-style; border-bottom: $custom-border-style;
padding: 20rpx 0; padding: 20rpx 0;
.item-title{ .item-title {
padding-left: 30rpx; padding-left: 30rpx;
font-size: 30rpx; font-size: 30rpx;
&.active{ &.active {
border-left: 6rpx solid $u-primary; border-left: 6rpx solid $u-primary;
font-weight: 700; font-weight: 700;
} }
} }
} }
} }
.box-right{ .box-right {
width: 550rpx; width: 550rpx;
padding-right: 20rpx; padding-right: 20rpx;
.category-image{ .category-image {
padding: 20rpx; padding: 20rpx;
} }
@ -186,9 +193,7 @@
.prod-item { .prod-item {
padding: 10rpx 20rpx; padding: 10rpx 20rpx;
background: #fff; background: #fff;
display: flex; @include flex-space-between;
flex-direction: row;
justify-content: space-between;
border-bottom: $custom-border-style; border-bottom: $custom-border-style;
.prod-image { .prod-image {
@ -206,8 +211,7 @@
padding-bottom: 10rpx; padding-bottom: 10rpx;
} }
.price-and-cart { .price-and-cart {
display: flex; @include flex-space-between;
justify-content: space-between;
} }
} }
} }

78
yudao-ui-app/pages/forgot/forgot.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<view class="container"> <view class="container">
<view class="unp-header"> <view class="unp-header">
<view class="unp-logo"> <view class="unp-logo">
<u-avatar size="80" icon="github-circle-fill" fontSize="80"></u-avatar> <u-avatar size="80" icon="github-circle-fill" fontSize="80"></u-avatar>
@ -36,21 +35,12 @@
<!-- 占位 --> <!-- 占位 -->
</view> </view>
<u-button <u-button type="error" text="重置密码" customStyle="margin-top: 50px" @click="handleSubmit"></u-button>
type="error"
text="重置密码"
customStyle="margin-top: 50px"
@click="handleSubmit"
></u-button>
<u-gap height="20"></u-gap> <u-gap height="20"></u-gap>
<u-button type="info" text="返回" @click="navigateBack()"></u-button> <u-button type="info" text="返回" @click="navigateBack()"></u-button>
</u--form> </u--form>
</view> </view>
</view> </view>
</template> </template>
@ -64,24 +54,24 @@ export default {
formData: { formData: {
username: '', username: '',
code: '', code: '',
password: '', password: ''
}, },
rules: { rules: {
'username': { username: {
type: 'string', type: 'string',
max: 20, max: 20,
required: true, required: true,
message: '请输入您的账号', message: '请输入您的账号',
trigger: ['blur', 'change'] trigger: ['blur', 'change']
}, },
'code': { code: {
type: 'number', type: 'number',
max: 6, max: 6,
required: true, required: true,
message: '请输入验证码', message: '请输入验证码',
trigger: ['blur', 'change'] trigger: ['blur', 'change']
}, },
'password': { password: {
type: 'string', type: 'string',
max: 20, max: 20,
required: true, required: true,
@ -91,24 +81,22 @@ export default {
} }
} }
}, },
onLoad() { onLoad() {},
},
methods: { methods: {
handleUsernameChange(e){ handleUsernameChange(e) {
let str = uni.$u.trim(e, 'all'); let str = uni.$u.trim(e, 'all')
this.$nextTick(() => { this.$nextTick(() => {
this.formData.username = str this.formData.username = str
}) })
}, },
handlePasswordChange(e){ handlePasswordChange(e) {
let str = uni.$u.trim(e, 'all'); let str = uni.$u.trim(e, 'all')
this.$nextTick(() => { this.$nextTick(() => {
this.formData.password = str this.formData.password = str
}) })
}, },
codeChange(text) { codeChange(text) {
this.tips = text; this.tips = text
}, },
getCode() { getCode() {
if (this.$refs.uCode.canGetCode) { if (this.$refs.uCode.canGetCode) {
@ -117,22 +105,23 @@ export default {
title: '正在获取验证码' title: '正在获取验证码'
}) })
setTimeout(() => { setTimeout(() => {
uni.hideLoading(); uni.hideLoading()
// 这里此提示会被this.start()方法中的提示覆盖 // 这里此提示会被this.start()方法中的提示覆盖
uni.$u.toast('验证码已发送'); uni.$u.toast('验证码已发送')
// 通知验证码组件内部开始倒计时 // 通知验证码组件内部开始倒计时
this.$refs.uCode.start(); this.$refs.uCode.start()
}, 2000); }, 2000)
} else { } else {
uni.$u.toast('倒计时结束后再发送'); uni.$u.toast('倒计时结束后再发送')
} }
}, },
handleSubmit() { handleSubmit() {
this.$refs.form.validate().then(res => { this.$refs.form
uni.$u.toast('点击了重置密码') .validate()
}).catch(err => { .then(res => {
uni.$u.toast('点击了重置密码')
}) })
.catch(err => {})
}, },
navigateBack() { navigateBack() {
uni.navigateBack() uni.navigateBack()
@ -142,26 +131,17 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.unp-header { .unp-header {
height: 400rpx; height: 400rpx;
display: flex; @include flex-center;
align-items: center;
justify-content: center;
.unp-logo { .unp-logo {
display: flex; @include flex-center;
flex-direction: column;
align-items: center;
justify-content: center;
} }
} }
.unp-box { .unp-box {
display: flex; @include flex-center(column);
flex-direction: column; .unp-form {
align-items: center;
justify-content: center;
.unp-form{
width: 560rpx; width: 560rpx;
} }
} }
@ -169,14 +149,10 @@ export default {
.lk-group { .lk-group {
height: 40rpx; height: 40rpx;
margin-top: 40rpx; margin-top: 40rpx;
display: flex; @include flex-space-between;
align-items: center;
justify-content: space-between;
font-size: 12rpx; font-size: 12rpx;
color: $u-primary; color: $u-primary;
text-decoration: $u-primary; text-decoration: $u-primary;
} }
</style> </style>

114
yudao-ui-app/pages/index/index.vue
View File

@ -8,20 +8,20 @@
</u-sticky> </u-sticky>
<!--轮播图--> <!--轮播图-->
<u-swiper :list="swiperList" previousMargin="20" nextMargin="20" circular height="200" @change="e => current = e.current" :autoplay="true" @click="handleSwiperClick"> <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 slot="indicator" class="indicator">
<view class="indicator__dot" v-for="(item, index) in swiperList" :key="index" :class="[index === current && 'indicator__dot--active']"> <view class="indicator__dot" v-for="(item, index) in swiperList" :key="index" :class="[index === current && 'indicator__dot--active']"> </view>
</view>
</view> </view>
</u-swiper> </u-swiper>
<u-gap height="20px"></u-gap> <u-gap height="20px"></u-gap>
<!--宫格菜单按钮--> <!--宫格菜单按钮-->
<u-grid :border="false" col="4"><u-grid-item v-for="(item,index) in menuList" :key="index"> <u-grid :border="false" col="4"
<u-icon :name="item.icon" :size="40"></u-icon> ><u-grid-item v-for="(item, index) in menuList" :key="index">
<text class="grid-title">{{item.title}}</text> <u-icon :name="item.icon" :size="40"></u-icon>
</u-grid-item> <text class="grid-title">{{ item.title }}</text>
</u-grid-item>
</u-grid> </u-grid>
<u-gap height="15px"></u-gap> <u-gap height="15px"></u-gap>
@ -38,7 +38,7 @@
<text class="see-more">查看更多</text> <text class="see-more">查看更多</text>
</view> </view>
<u-grid class="prod-grid" :border="false" col="3"> <u-grid class="prod-grid" :border="false" col="3">
<u-grid-item class="prod-item-box" v-for="(item,index) in productList" :key="index"> <u-grid-item class="prod-item-box" v-for="(item, index) in productList" :key="item.id">
<view class="prod-item" @click="handleProdItemClick(item.id)"> <view class="prod-item" @click="handleProdItemClick(item.id)">
<u--image class="prod-image" width="230rpx" height="230rpx" :src="item.image"></u--image> <u--image class="prod-image" width="230rpx" height="230rpx" :src="item.image"></u--image>
<view class="item-info"> <view class="item-info">
@ -46,7 +46,7 @@
<u--text :lines="2" size="14px" color="#333333" :text="item.title"></u--text> <u--text :lines="2" size="14px" color="#333333" :text="item.title"></u--text>
</view> </view>
<view class="price-and-cart"> <view class="price-and-cart">
<u--text-price color="red" size="12" intSize="18" :text="item.price"></u--text-price> <custom-text-price color="red" size="12" intSize="18" :price="item.price"></custom-text-price>
<u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon> <u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon>
</view> </view>
</view> </view>
@ -63,7 +63,7 @@
<text class="more">更多 &gt;</text> <text class="more">更多 &gt;</text>
</view> </view>
<u-grid class="prod-grid" :border="false" col="2"> <u-grid class="prod-grid" :border="false" col="2">
<u-grid-item class="prod-item-box" v-for="(item,index) in productList" :key="index"> <u-grid-item class="prod-item-box" v-for="(item, index) in productList" :key="item.id">
<view class="prod-item" @click="handleProdItemClick(item.id)"> <view class="prod-item" @click="handleProdItemClick(item.id)">
<u--image class="prod-image" width="345rpx" height="345rpx" :src="item.image"></u--image> <u--image class="prod-image" width="345rpx" height="345rpx" :src="item.image"></u--image>
<view class="item-info"> <view class="item-info">
@ -72,7 +72,7 @@
<u--text :lines="1" size="12px" color="#939393" :text="item.desc"></u--text> <u--text :lines="1" size="12px" color="#939393" :text="item.desc"></u--text>
</view> </view>
<view class="price-and-cart"> <view class="price-and-cart">
<u--text-price color="red" size="12" intSize="18" :text="item.price"></u--text-price> <custom-text-price color="red" size="12" intSize="18" :price="item.price"></custom-text-price>
<u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon> <u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon>
</view> </view>
</view> </view>
@ -90,7 +90,7 @@
</view> </view>
<u-list class="prod-list" @scrolltolower="scrolltolower"> <u-list class="prod-list" @scrolltolower="scrolltolower">
<u-list-item v-for="(item, index) in productList" :key="index"> <u-list-item v-for="(item, index) in productList" :key="item.id">
<view class="prod-item" @click="handleProdItemClick(item.id)"> <view class="prod-item" @click="handleProdItemClick(item.id)">
<u--image class="prod-image" width="210rpx" height="210rpx" :src="item.image"></u--image> <u--image class="prod-image" width="210rpx" height="210rpx" :src="item.image"></u--image>
<view class="item-info"> <view class="item-info">
@ -100,46 +100,40 @@
<u--text class="info-desc" :lines="2" size="12px" color="#939393" :text="item.desc"></u--text> <u--text class="info-desc" :lines="2" size="12px" color="#939393" :text="item.desc"></u--text>
</view> </view>
<view class="price-and-cart"> <view class="price-and-cart">
<u--text-price color="red" size="12" intSize="18" :text="item.price"></u--text-price> <custom-text-price color="red" size="12" intSize="18" :price="item.price"></custom-text-price>
<u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon> <u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon>
</view> </view>
</view> </view>
</view> </view>
</u-list-item> </u-list-item>
</u-list> </u-list>
</view> </view>
</view> </view>
<u-gap height="5px"></u-gap> <u-gap height="5px"></u-gap>
<!--加载更多--> <!--加载更多-->
<u-loadmore fontSize="32rpx" :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText"/> <u-loadmore fontSize="32rpx" :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
<u-gap height="10px"></u-gap> <u-gap height="10px"></u-gap>
</view> </view>
</template> </template>
<script> <script>
import {getBannerData,getNoticeData} from "../../common/api"; import { getBannerData, getNoticeData } from '../../common/api'
export default { export default {
components: { components: {},
},
data() { data() {
return { return {
current: 0, current: 0,
currentNum: 0, currentNum: 0,
bannerList: [ 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'],
'https://cdn.uviewui.com/uview/swiper/swiper3.png', menuList: [
'https://cdn.uviewui.com/uview/swiper/swiper2.png', { icon: 'gift', title: '热门推荐' },
'https://cdn.uviewui.com/uview/swiper/swiper1.png',], { icon: 'star', title: '收藏转发' },
menuList: [{icon: 'gift', title: '热门推荐'}, {icon: 'star', title: '收藏转发'}, {icon: 'thumb-up', title: '点赞投币'}, {icon: 'heart', title: '感谢支持'}], { icon: 'thumb-up', title: '点赞投币' },
noticeList:[ { icon: 'heart', title: '感谢支持' }
'寒雨连江夜入吴',
'平明送客楚山孤',
'洛阳亲友如相问',
'一片冰心在玉壶'
], ],
noticeList: ['寒雨连江夜入吴', '平明送客楚山孤', '洛阳亲友如相问', '一片冰心在玉壶'],
productList: [ productList: [
{ {
id: 1, id: 1,
@ -189,43 +183,47 @@ export default {
}, },
methods: { methods: {
loadBannerData() { loadBannerData() {
getBannerData().then(res => { getBannerData()
this.bannerList = res.data; .then(res => {
}).catch(err => { this.bannerList = res.data
//console.log(err) })
}) .catch(err => {
//console.log(err)
})
}, },
loadNoticeData() { loadNoticeData() {
getNoticeData().then(res => { getNoticeData()
this.noticeList = res.data; .then(res => {
}).catch(err => { this.noticeList = res.data
//console.log(err) })
}) .catch(err => {
//console.log(err)
})
}, },
handleSearchClick(e) { handleSearchClick(e) {
console.log('监听点击准备跳转页面') console.log('监听点击准备跳转页面')
}, },
handleSwiperClick(index){ handleSwiperClick(index) {
console.log('点击了图片索引值：',index) console.log('点击了图片索引值：', index)
}, },
handleProdItemClick(productId){ handleProdItemClick(productId) {
uni.$u.route('/pages/product/product', { uni.$u.route('/pages/product/product', {
productId: productId productId: productId
}); })
} }
}, },
computed: { computed: {
swiperList(){ swiperList() {
return this.bannerList.map(item => { return this.bannerList.map(item => {
if (item){ if (item) {
return item; return item
} }
}) })
}, },
noticeTextList() { noticeTextList() {
return this.noticeList.map(item => { return this.noticeList.map(item => {
if (item.title){ if (item.title) {
return item.title; return item.title
} }
}) })
} }
@ -234,7 +232,6 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.search-wrap { .search-wrap {
background: $custom-bg-color; background: $custom-bg-color;
padding: 20rpx; padding: 20rpx;
@ -266,10 +263,7 @@ export default {
.prod-block { .prod-block {
margin-top: -160px; margin-top: -160px;
.bloc-header { .bloc-header {
display: flex; @include flex-space-between;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 10rpx 30rpx; padding: 10rpx 30rpx;
.bloc-title { .bloc-title {
@ -287,7 +281,8 @@ export default {
} }
} }
&.half, &.list { &.half,
&.list {
margin-top: 0; margin-top: 0;
.bloc-header { .bloc-header {
margin-top: 50rpx; margin-top: 50rpx;
@ -321,8 +316,7 @@ export default {
padding-bottom: 10rpx; padding-bottom: 10rpx;
} }
.price-and-cart { .price-and-cart {
display: flex; @include flex-space-between;
justify-content: space-between;
} }
} }
} }
@ -336,9 +330,7 @@ export default {
.prod-item { .prod-item {
padding: 20rpx; padding: 20rpx;
background: #fff; background: #fff;
display: flex; @include flex-space-between;
flex-direction: row;
justify-content: space-between;
border-bottom: $custom-border-style; border-bottom: $custom-border-style;
.prod-image { .prod-image {
@ -356,11 +348,9 @@ export default {
padding-bottom: 10rpx; padding-bottom: 10rpx;
} }
.price-and-cart { .price-and-cart {
display: flex; @include flex-space-between;
justify-content: space-between;
} }
} }
} }
} }
</style> </style>

263
yudao-ui-app/pages/login/login.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<view class="container"> <view class="container">
<view class="unp-header"> <view class="unp-header">
<view class="unp-logo"> <view class="unp-logo">
<u-avatar size="80" icon="github-circle-fill" fontSize="80"></u-avatar> <u-avatar size="80" icon="github-circle-fill" fontSize="80"></u-avatar>
@ -23,12 +22,12 @@
<u-gap height="20"></u-gap> <u-gap height="20"></u-gap>
<u-form-item v-if="currentModeIndex === 0" label="密码" prop="password" labelWidth="60" borderBottom ref="item-password"> <u-form-item v-if="currentModeIndex === 0" label="密码" prop="password" labelWidth="60" borderBottom ref="item-password">
<u-input :type="inputType" maxlength="16" v-model="formData.password" placeholder="请填写密码" border="none"> <u-input :type="inputType" maxlength="16" v-model="formData.password" placeholder="请填写密码" border="none">
<template slot="suffix"> <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 === '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> <u-icon v-if="inputType === 'text'" size="20" color="#666666" name="eye-off" @click="inputType = 'password'"></u-icon>
</template> </template>
</u-input> </u-input>
</u-form-item> </u-form-item>
<u-form-item v-else label="验证码" prop="code" labelWidth="60" borderBottom> <u-form-item v-else label="验证码" prop="code" labelWidth="60" borderBottom>
@ -41,170 +40,160 @@
<u-gap height="20"></u-gap> <u-gap height="20"></u-gap>
<u-button type="info" text="返回" @click="navigateBack()"></u-button> <u-button type="info" text="返回" @click="navigateBack()"></u-button>
</u--form> </u--form>
</view> </view>
</view>
</view>
</template> </template>
<script> <script>
import {passwordLogin,sendSmsCode,smsLogin} from "../../common/api"; import { passwordLogin, sendSmsCode, smsLogin } from '../../common/api'
export default { export default {
data() { data() {
return { return {
//租户ID //租户ID
agent: 1, agent: 1,
currentModeIndex: 0, currentModeIndex: 0,
loginModeList: ['密码登录', '验证码登录'], loginModeList: ['密码登录', '验证码登录'],
inputType: 'password', inputType: 'password',
codeDisabled: false, codeDisabled: false,
codeTips: '', codeTips: '',
formData: { formData: {
mobile: '15601691234', mobile: '15601691234',
password: '', password: '',
code: '' code: ''
}, },
rules: { rules: {
'mobile': [ mobile: [
{ {
type: 'integer', type: 'integer',
required: true,
message: '请填写手机号',
trigger: ['blur', 'change']
},
{
// 自定义验证函数，见上说明
validator: (rule, value, callback) => {
// 上面有说，返回true表示校验通过，返回false表示不通过
// uni.$u.test.mobile()就是返回true或者false的
return uni.$u.test.mobile(value);
},
message: '手机号码不正确',
// 触发器可以同时用blur和change
trigger: ['change','blur'],
}
],
'password': {
type: 'string',
min: 4,
max: 16,
required: true, required: true,
message: '密码长度4-16位密码', message: '请填写手机号',
trigger: ['blur', 'change'] trigger: ['blur', 'change']
}, },
'code': { {
type: 'integer', // 自定义验证函数，见上说明
len: 4, validator: (rule, value, callback) => {
required: true, // 上面有说，返回true表示校验通过，返回false表示不通过
message: '请填写4位验证码', // uni.$u.test.mobile()就是返回true或者false的
trigger: ['blur', 'change'] return uni.$u.test.mobile(value)
},
message: '手机号码不正确',
// 触发器可以同时用blur和change
trigger: ['change', 'blur']
} }
],
password: {
type: 'string',
min: 4,
max: 16,
required: true,
message: '密码长度4-16位密码',
trigger: ['blur', 'change']
},
code: {
type: 'integer',
len: 4,
required: true,
message: '请填写4位验证码',
trigger: ['blur', 'change']
} }
} }
}, }
onLoad() { },
onLoad() {},
},onReady(){ onReady() {
// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则 // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
this.$refs.form.setRules(this.rules) this.$refs.form.setRules(this.rules)
},
methods: {
handleModeChange(index) {
if (index !== this.currentModeIndex) {
this.currentModeIndex = index
this.$refs.form.clearValidate()
}
}, },
methods: { codeChange(text) {
handleModeChange(index) { this.codeTips = text
if (index !== this.currentModeIndex){ },
this.currentModeIndex = index; getCode() {
this.$refs.form.clearValidate(); const mobile = this.formData.mobile
} if (!mobile) {
}, uni.$u.toast('请填写手机号')
codeChange(text) { } else if (!uni.$u.test.mobile(mobile)) {
this.codeTips = text; uni.$u.toast('手机号格式不正确')
}, } else if (this.$refs.uCode.canGetCode) {
getCode() { // 模拟向后端请求验证码
const mobile = this.formData.mobile; uni.showLoading({
if (!mobile) { title: '正在获取验证码'
uni.$u.toast('请填写手机号'); })
} else if (!uni.$u.test.mobile(mobile)){
uni.$u.toast('手机号格式不正确');
} else if (this.$refs.uCode.canGetCode) {
// 模拟向后端请求验证码
uni.showLoading({
title: '正在获取验证码'
});
//scene:1登陆获取验证码场景 //scene:1登陆获取验证码场景
sendSmsCode({agent: 1, mobile:mobile, scene:1 }).then(res => { sendSmsCode({ agent: 1, mobile: mobile, scene: 1 })
.then(res => {
//console.log(res) //console.log(res)
uni.hideLoading(); uni.hideLoading()
if (res.data.code === 0){ if (res.data.code === 0) {
// 这里此提示会被this.start()方法中的提示覆盖 // 这里此提示会被this.start()方法中的提示覆盖
uni.$u.toast('验证码已发送'); uni.$u.toast('验证码已发送')
// 通知验证码组件内部开始倒计时 // 通知验证码组件内部开始倒计时
this.$refs.uCode.start(); this.$refs.uCode.start()
} else { } else {
uni.$u.toast(res.data.msg); uni.$u.toast(res.data.msg)
} }
}).catch(err => {
uni.$u.toast('服务器接口请求异常');
}) })
} else { .catch(err => {
uni.$u.toast('倒计时结束后再发送'); uni.$u.toast('服务器接口请求异常')
} })
}, } else {
handleSubmit() { uni.$u.toast('倒计时结束后再发送')
this.$refs.form.validate().then(res => { }
uni.$u.toast('登录'); },
if (this.currentModeIndex === 0){ handleSubmit() {
passwordLogin({agent: 1, mobile:this.formData.mobile, password:this.formData.password}).then(res => { this.$refs.form.validate().then(res => {
if (res.data.code === 0){ uni.$u.toast('登录')
uni.$u.toast('登录成功'); if (this.currentModeIndex === 0) {
passwordLogin({ agent: 1, mobile: this.formData.mobile, password: this.formData.password })
.then(res => {
if (res.data.code === 0) {
uni.$u.toast('登录成功')
// TODO 登录成功，保存toke // TODO 登录成功，保存toke
} else { } else {
uni.$u.toast(res.data.msg); uni.$u.toast(res.data.msg)
// TODO 登录失败 // TODO 登录失败
} }
}).catch(err => {
uni.$u.toast('服务器接口请求异常');
}) })
} else if (this.currentModeIndex === 1) { .catch(err => {
smsLogin({agent: 1, mobile:this.formData.mobile, code:this.formData.code}) uni.$u.toast('服务器接口请求异常')
} })
}) } else if (this.currentModeIndex === 1) {
}, smsLogin({ agent: 1, mobile: this.formData.mobile, code: this.formData.code })
navigateBack() { }
uni.navigateBack() })
} },
} navigateBack() {
} uni.navigateBack()
}
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.unp-header { .unp-header {
height: 400rpx; height: 400rpx;
display: flex; @include flex-center;
align-items: center;
justify-content: center;
.unp-logo { .unp-logo {
display: flex; @include flex-center(column);
flex-direction: column;
align-items: center;
justify-content: center;
} }
} }
.unp-box { .unp-box {
display: flex; @include flex-center(column);
flex-direction: column;
align-items: center;
justify-content: center;
.mode-section{ .mode-section {
width: 560rpx; width: 560rpx;
} }
.unp-form{ .unp-form {
width: 560rpx; width: 560rpx;
} }
} }
@ -212,14 +201,10 @@ import {passwordLogin,sendSmsCode,smsLogin} from "../../common/api";
.lk-group { .lk-group {
height: 40rpx; height: 40rpx;
margin-top: 40rpx; margin-top: 40rpx;
display: flex; @include flex-space-between;
align-items: center;
justify-content: space-between;
font-size: 12rpx; font-size: 12rpx;
color: $u-primary; color: $u-primary;
text-decoration: $u-primary; text-decoration: $u-primary;
} }
</style> </style>

29
yudao-ui-app/pages/profile/profile.vue
View File

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

66
yudao-ui-app/pages/register/register.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<view class="container"> <view class="container">
<view class="unp-header"> <view class="unp-header">
<view class="unp-logo"> <view class="unp-logo">
<u-avatar size="80" icon="github-circle-fill" fontSize="80"></u-avatar> <u-avatar size="80" icon="github-circle-fill" fontSize="80"></u-avatar>
@ -25,24 +24,15 @@
</u-form-item> </u-form-item>
<view class="lk-group"> <view class="lk-group">
<!-- 占位 --> <!-- 占位 -->
</view> </view>
<u-button <u-button type="success" text="注册账号" customStyle="margin-top: 50px" @click="handleSubmit"></u-button>
type="success"
text="注册账号"
customStyle="margin-top: 50px"
@click="handleSubmit"
></u-button>
<u-gap height="20"></u-gap> <u-gap height="20"></u-gap>
<u-button type="info" text="返回" @click="navigateBack()"></u-button> <u-button type="info" text="返回" @click="navigateBack()"></u-button>
</u--form> </u--form>
</view> </view>
</view> </view>
</template> </template>
@ -53,17 +43,17 @@ export default {
inputType: 'password', inputType: 'password',
formData: { formData: {
username: '', username: '',
password: '', password: ''
}, },
rules: { rules: {
'username': { username: {
type: 'string', type: 'string',
max: 20, max: 20,
required: true, required: true,
message: '请输入您的账号', message: '请输入您的账号',
trigger: ['blur', 'change'] trigger: ['blur', 'change']
}, },
'password': { password: {
type: 'string', type: 'string',
max: 20, max: 20,
required: true, required: true,
@ -73,28 +63,27 @@ export default {
} }
} }
}, },
onLoad() { onLoad() {},
},
methods: { methods: {
handleUsernameChange(e){ handleUsernameChange(e) {
let str = uni.$u.trim(e, 'all'); let str = uni.$u.trim(e, 'all')
this.$nextTick(() => { this.$nextTick(() => {
this.formData.username = str this.formData.username = str
}) })
}, },
handlePasswordChange(e){ handlePasswordChange(e) {
let str = uni.$u.trim(e, 'all'); let str = uni.$u.trim(e, 'all')
this.$nextTick(() => { this.$nextTick(() => {
this.formData.password = str this.formData.password = str
}) })
}, },
handleSubmit() { handleSubmit() {
this.$refs.form.validate().then(res => { this.$refs.form
uni.$u.toast('点击了注册账号') .validate()
}).catch(err => { .then(res => {
uni.$u.toast('点击了注册账号')
}) })
.catch(err => {})
}, },
navigateBack() { navigateBack() {
uni.navigateBack() uni.navigateBack()
@ -104,41 +93,28 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.unp-header { .unp-header {
height: 400rpx; height: 400rpx;
display: flex; @include flex-center;
align-items: center;
justify-content: center;
.unp-logo { .unp-logo {
display: flex; @include flex-center;
flex-direction: column;
align-items: center;
justify-content: center;
} }
} }
.unp-box { .unp-box {
display: flex; @include flex-center;
flex-direction: column; .unp-form {
align-items: center;
justify-content: center;
.unp-form{
width: 560rpx; width: 560rpx;
} }
} }
.lk-group { .lk-group {
@include flex-space-between;
height: 40rpx; height: 40rpx;
margin-top: 40rpx; margin-top: 40rpx;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12rpx; font-size: 12rpx;
color: $u-primary; color: $u-primary;
text-decoration: $u-primary; text-decoration: $u-primary;
} }
</style> </style>

96
yudao-ui-app/pages/user/user.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<view class="container"> <view class="container">
<view class="user-header"> <view class="user-header">
<view class="user-info" @click="handleUserInfoClick"> <view class="user-info" @click="handleUserInfoClick">
<u-avatar size="80" :src="avatar"></u-avatar> <u-avatar size="80" :src="avatar"></u-avatar>
<text class="nick-name">{{nickName}}</text> <text class="nick-name">{{ nickName }}</text>
</view> </view>
</view> </view>
@ -19,10 +19,11 @@
</view> </view>
<view class="order-status-box"> <view class="order-status-box">
<u-grid :border="false" :col="orderStatusList.length"><u-grid-item v-for="(item,index) in orderStatusList" :key="index"> <u-grid :border="false" :col="orderStatusList.length"
<u-icon :name="item.icon" :size="32"></u-icon> ><u-grid-item v-for="(item, index) in orderStatusList" :key="index">
<text class="grid-title">{{item.title}}</text> <u-icon :name="item.icon" :size="32"></u-icon>
</u-grid-item> <text class="grid-title">{{ item.title }}</text>
</u-grid-item>
</u-grid> </u-grid>
</view> </view>
</view> </view>
@ -30,10 +31,11 @@
<u-gap height="10" bgColor="#f3f3f3"></u-gap> <u-gap height="10" bgColor="#f3f3f3"></u-gap>
<view class="stat-box"> <view class="stat-box">
<u-grid :border="false" col="3"><u-grid-item v-for="(item,index) in statList" :key="index"> <u-grid :border="false" col="3"
<text class="grid-value">{{item.value}}</text> ><u-grid-item v-for="(item, index) in statList" :key="index">
<text class="grid-title">{{item.title}}</text> <text class="grid-value">{{ item.value }}</text>
</u-grid-item> <text class="grid-title">{{ item.title }}</text>
</u-grid-item>
</u-grid> </u-grid>
</view> </view>
@ -47,47 +49,48 @@
</u-cell-group> </u-cell-group>
<u-button class="logout-btn" type="error" color="#ea322b" text="确定"></u-button> <u-button class="logout-btn" type="error" color="#ea322b" text="确定"></u-button>
</view>
</view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
avatar:'', avatar: '',
nickName:'点击登录', nickName: '点击登录',
orderStatusList: [{icon: 'rmb-circle', title: '待支付'}, {icon: 'car', title: '代发货'}, {icon: 'order', title: '待收货'}, {icon: 'integral', title: '已完成'}], orderStatusList: [
statList: [{value: '2', title: '我的收藏'}, {value: '3', title: '我的消息'}, {value: '3', title: '我的足迹'}] { icon: 'rmb-circle', title: '待支付' },
} { icon: 'car', title: '代发货' },
}, { icon: 'order', title: '待收货' },
onLoad() { { icon: 'integral', title: '已完成' }
],
}, statList: [
methods: { { value: '2', title: '我的收藏' },
handleUserInfoClick(){ { value: '3', title: '我的消息' },
// TODO 判断是否已经登录逻辑 { value: '3', title: '我的足迹' }
if (!uni.getStorageSync('token')) { ]
uni.$u.route('/pages/login/login'); }
} else { },
uni.$u.route('/pages/profile/profile'); onLoad() {},
} methods: {
handleUserInfoClick() {
// TODO 判断是否已经登录逻辑
if (!uni.getStorageSync('token')) {
uni.$u.route('/pages/login/login')
} else {
uni.$u.route('/pages/profile/profile')
} }
} }
} }
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.user-header { .user-header {
@include flex-center(column);
height: 280rpx; height: 280rpx;
display: flex;
align-items: center;
justify-content: center;
.user-info { .user-info {
display: flex; @include flex-center(column);
flex-direction: column;
align-items: center;
justify-content: center;
.nick-name { .nick-name {
margin-top: 20rpx; margin-top: 20rpx;
font-size: 32rpx; font-size: 32rpx;
@ -97,10 +100,7 @@
} }
.order-header { .order-header {
display: flex; @include flex-space-between;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 20rpx 30rpx; padding: 20rpx 30rpx;
border-bottom: $custom-border-style; border-bottom: $custom-border-style;
@ -110,10 +110,7 @@
} }
.see-all { .see-all {
height: 40rpx; height: 40rpx;
display: flex; @include flex-right;
flex-direction: row;
align-items: center;
justify-content: right;
color: #666666; color: #666666;
font-size: 26rpx; font-size: 26rpx;
} }
@ -151,5 +148,4 @@
margin-top: 60rpx; margin-top: 60rpx;
width: 300rpx; width: 300rpx;
} }
</style> </style>

36
yudao-ui-app/uni.scss
View File

@ -22,3 +22,39 @@ $custom-bg-color: #ffffff;
/* 边框样式 */ /* 边框样式 */
$custom-border-style: 1rpx solid #f3f3f3; $custom-border-style: 1rpx solid #f3f3f3;
@mixin flex-left($direction: row) {
display: flex;
flex-direction: $direction;
align-items: center;
justify-content: left;
}
@mixin flex-right($direction: row) {
display: flex;
flex-direction: $direction;
align-items: center;
justify-content: right;
}
@mixin flex-center($direction: row) {
display: flex;
flex-direction: $direction;
align-items: center;
justify-content: center;
}
@mixin flex-space-between($direction: row) {
display: flex;
flex-direction: $direction;
align-items: center;
justify-content: space-between;
}
@mixin flex-space-around($direction: row) {
display: flex;
flex-direction: $direction;
align-items: center;
justify-content: space-around;
}

60
yudao-ui-app/uni_modules/uview-ui/components/u--text-price/u--text-price.vue
View File

@ -1,60 +0,0 @@
<template>
<view class="u-text-price-wrap">
<text
v-for="(item,index) in textArray"
:key="index"
:style="{'font-size': (index === 1 ? integerSize : size) + 'px', 'color': color}"
>
{{item}}
</text>
</view>
</template>
<script>
/**
* 此组件存在只为简单的显示特定样式的(人名币)价格数字
*/
export default {
name: "u--text-price",
components: {
},
props: {
text: {
type: String,
default: '0.00'
},
color: {
type: String,
default: '#333333'
},
//字体大小
size: {
type: [String, Number],
default: uni.$u.props.text.size
},
//整形部分字体大小可单独定义
intSize: {
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;
},
integerSize() {
return this.intSize ? this.intSize : this.size
}
}
};
</script>
<style>
</style>