调整自定义插件、代码风格化
This commit is contained in:
sfmind
parent
cfcc0aa6dd
commit
9e69f6e6c2
|
|
@ -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
|
||||
|
|
@ -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>
|
||||
|
|
@ -1,24 +1,17 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
|
||||
</view>
|
||||
<view class="container"> </view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: ''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: ''
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<view class="container">
|
||||
<view class="search-wrap">
|
||||
<u-search placeholder="搜索" disabled height="32" :show-action="false" @click="handleSearchClick"></u-search>
|
||||
</view>
|
||||
<view class="category-box">
|
||||
<view class="box-left">
|
||||
<u-list @scrolltolower="scrolltolower">
|
||||
<u-list-item class="category-item" v-for="(item, index) in categoryList" :key="index">
|
||||
<view class="item-title" :class="index === currentIndex ? 'active' : ''" @click="handleCategoryClick(index)">
|
||||
<text>{{item.name}}</text>
|
||||
<u-list-item class="category-item" v-for="(item, index) in categoryList" :key="item.id">
|
||||
<view class="item-title" :class="{ active: currentIndex === index }" @click="handleCategoryClick(index)">
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
</u-list-item>
|
||||
</u-list>
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
</view>
|
||||
<view>
|
||||
<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)">
|
||||
<u--image class="prod-image" width="140rpx" height="140rpx" :src="item.image"></u--image>
|
||||
<view class="item-info">
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
<u--text :lines="1" size="12px" color="#939393" :text="item.desc"></u--text>
|
||||
</view>
|
||||
<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>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -39,144 +39,151 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UText from "../../uni_modules/uview-ui/components/u-text/u-text";
|
||||
export default {
|
||||
components: {UText},
|
||||
data() {
|
||||
return {
|
||||
currentIndex: 0,
|
||||
categoryList: [
|
||||
{
|
||||
id: 1,
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
||||
name: '关注'
|
||||
}, {
|
||||
id: 1,
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
||||
name: '推荐'
|
||||
}, {
|
||||
id: 1,
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
||||
name: '电影'
|
||||
}, {
|
||||
id: 1,
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
||||
name: '科技'
|
||||
}, {
|
||||
id: 1,
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
||||
name: '音乐'
|
||||
}, {
|
||||
id: 1,
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
||||
name: '美食'
|
||||
}, {
|
||||
id: 1,
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
||||
name: '文化'
|
||||
}, {
|
||||
id: 1,
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
||||
name: '财经'
|
||||
}, {
|
||||
id: 1,
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
||||
name: '手工'
|
||||
}],
|
||||
productList: [
|
||||
{
|
||||
id: 1,
|
||||
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 查询下分类商品
|
||||
import UText from '../../uni_modules/uview-ui/components/u-text/u-text'
|
||||
export default {
|
||||
components: { UText },
|
||||
data() {
|
||||
return {
|
||||
currentIndex: 0,
|
||||
categoryList: [
|
||||
{
|
||||
id: 1,
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
||||
name: '关注'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
||||
name: '推荐'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
||||
name: '电影'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
||||
name: '科技'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
||||
name: '音乐'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
||||
name: '美食'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
||||
name: '文化'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
||||
name: '财经'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
||||
name: '手工'
|
||||
}
|
||||
},
|
||||
handleProdItemClick(productId){
|
||||
uni.$u.route('/pages/product/product', {
|
||||
productId: productId
|
||||
});
|
||||
],
|
||||
productList: [
|
||||
{
|
||||
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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.search-wrap {
|
||||
background: $custom-bg-color;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.category-box{
|
||||
.category-box {
|
||||
display: flex;
|
||||
.box-left{
|
||||
.box-left {
|
||||
width: 180rpx;
|
||||
padding-top: 20rpx;
|
||||
border-right: $custom-border-style;
|
||||
.category-item{
|
||||
.category-item {
|
||||
border-bottom: $custom-border-style;
|
||||
padding: 20rpx 0;
|
||||
.item-title{
|
||||
.item-title {
|
||||
padding-left: 30rpx;
|
||||
font-size: 30rpx;
|
||||
&.active{
|
||||
&.active {
|
||||
border-left: 6rpx solid $u-primary;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.box-right{
|
||||
.box-right {
|
||||
width: 550rpx;
|
||||
padding-right: 20rpx;
|
||||
.category-image{
|
||||
.category-image {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
|
|
@ -186,9 +193,7 @@
|
|||
.prod-item {
|
||||
padding: 10rpx 20rpx;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
@include flex-space-between;
|
||||
border-bottom: $custom-border-style;
|
||||
|
||||
.prod-image {
|
||||
|
|
@ -206,8 +211,7 @@
|
|||
padding-bottom: 10rpx;
|
||||
}
|
||||
.price-and-cart {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@include flex-space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
|
||||
<view class="unp-header">
|
||||
<view class="unp-logo">
|
||||
<u-avatar size="80" icon="github-circle-fill" fontSize="80"></u-avatar>
|
||||
|
|
@ -36,21 +35,12 @@
|
|||
<!-- 占位 -->
|
||||
</view>
|
||||
|
||||
<u-button
|
||||
type="error"
|
||||
text="重置密码"
|
||||
customStyle="margin-top: 50px"
|
||||
@click="handleSubmit"
|
||||
></u-button>
|
||||
<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>
|
||||
|
||||
|
|
@ -64,24 +54,24 @@ export default {
|
|||
formData: {
|
||||
username: '',
|
||||
code: '',
|
||||
password: '',
|
||||
password: ''
|
||||
},
|
||||
rules: {
|
||||
'username': {
|
||||
username: {
|
||||
type: 'string',
|
||||
max: 20,
|
||||
required: true,
|
||||
message: '请输入您的账号',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
'code': {
|
||||
code: {
|
||||
type: 'number',
|
||||
max: 6,
|
||||
required: true,
|
||||
message: '请输入验证码',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
'password': {
|
||||
password: {
|
||||
type: 'string',
|
||||
max: 20,
|
||||
required: true,
|
||||
|
|
@ -91,24 +81,22 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
handleUsernameChange(e){
|
||||
let str = uni.$u.trim(e, 'all');
|
||||
handleUsernameChange(e) {
|
||||
let str = uni.$u.trim(e, 'all')
|
||||
this.$nextTick(() => {
|
||||
this.formData.username = str
|
||||
})
|
||||
},
|
||||
handlePasswordChange(e){
|
||||
let str = uni.$u.trim(e, 'all');
|
||||
handlePasswordChange(e) {
|
||||
let str = uni.$u.trim(e, 'all')
|
||||
this.$nextTick(() => {
|
||||
this.formData.password = str
|
||||
})
|
||||
},
|
||||
codeChange(text) {
|
||||
this.tips = text;
|
||||
this.tips = text
|
||||
},
|
||||
getCode() {
|
||||
if (this.$refs.uCode.canGetCode) {
|
||||
|
|
@ -117,22 +105,23 @@ export default {
|
|||
title: '正在获取验证码'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
uni.hideLoading()
|
||||
// 这里此提示会被this.start()方法中的提示覆盖
|
||||
uni.$u.toast('验证码已发送');
|
||||
uni.$u.toast('验证码已发送')
|
||||
// 通知验证码组件内部开始倒计时
|
||||
this.$refs.uCode.start();
|
||||
}, 2000);
|
||||
this.$refs.uCode.start()
|
||||
}, 2000)
|
||||
} else {
|
||||
uni.$u.toast('倒计时结束后再发送');
|
||||
uni.$u.toast('倒计时结束后再发送')
|
||||
}
|
||||
},
|
||||
handleSubmit() {
|
||||
this.$refs.form.validate().then(res => {
|
||||
uni.$u.toast('点击了重置密码')
|
||||
}).catch(err => {
|
||||
|
||||
})
|
||||
this.$refs.form
|
||||
.validate()
|
||||
.then(res => {
|
||||
uni.$u.toast('点击了重置密码')
|
||||
})
|
||||
.catch(err => {})
|
||||
},
|
||||
navigateBack() {
|
||||
uni.navigateBack()
|
||||
|
|
@ -142,26 +131,17 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.unp-header {
|
||||
height: 400rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include flex-center;
|
||||
.unp-logo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include flex-center;
|
||||
}
|
||||
}
|
||||
|
||||
.unp-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.unp-form{
|
||||
@include flex-center(column);
|
||||
.unp-form {
|
||||
width: 560rpx;
|
||||
}
|
||||
}
|
||||
|
|
@ -169,14 +149,10 @@ export default {
|
|||
.lk-group {
|
||||
height: 40rpx;
|
||||
margin-top: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@include flex-space-between;
|
||||
font-size: 12rpx;
|
||||
|
||||
color: $u-primary;
|
||||
text-decoration: $u-primary;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,20 +8,20 @@
|
|||
</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 class="indicator__dot" v-for="(item, index) in swiperList" :key="index" :class="[index === current && 'indicator__dot--active']">
|
||||
</view>
|
||||
<view class="indicator__dot" v-for="(item, index) in swiperList" :key="index" :class="[index === current && 'indicator__dot--active']"> </view>
|
||||
</view>
|
||||
</u-swiper>
|
||||
|
||||
<u-gap height="20px"></u-gap>
|
||||
|
||||
<!--宫格菜单按钮-->
|
||||
<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 :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>
|
||||
|
||||
<u-gap height="15px"></u-gap>
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
<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">
|
||||
<u-grid-item class="prod-item-box" v-for="(item, index) in productList" :key="item.id">
|
||||
<view class="prod-item" @click="handleProdItemClick(item.id)">
|
||||
<u--image class="prod-image" width="230rpx" height="230rpx" :src="item.image"></u--image>
|
||||
<view class="item-info">
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
<u--text :lines="2" size="14px" color="#333333" :text="item.title"></u--text>
|
||||
</view>
|
||||
<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>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
<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">
|
||||
<u-grid-item class="prod-item-box" v-for="(item, index) in productList" :key="item.id">
|
||||
<view class="prod-item" @click="handleProdItemClick(item.id)">
|
||||
<u--image class="prod-image" width="345rpx" height="345rpx" :src="item.image"></u--image>
|
||||
<view class="item-info">
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
<u--text :lines="1" size="12px" color="#939393" :text="item.desc"></u--text>
|
||||
</view>
|
||||
<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>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -90,7 +90,7 @@
|
|||
</view>
|
||||
|
||||
<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)">
|
||||
<u--image class="prod-image" width="210rpx" height="210rpx" :src="item.image"></u--image>
|
||||
<view class="item-info">
|
||||
|
|
@ -100,46 +100,40 @@
|
|||
<u--text class="info-desc" :lines="2" size="12px" color="#939393" :text="item.desc"></u--text>
|
||||
</view>
|
||||
<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>
|
||||
</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-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";
|
||||
import { getBannerData, getNoticeData } from '../../common/api'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
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:[
|
||||
'寒雨连江夜入吴',
|
||||
'平明送客楚山孤',
|
||||
'洛阳亲友如相问',
|
||||
'一片冰心在玉壶'
|
||||
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: [
|
||||
{
|
||||
id: 1,
|
||||
|
|
@ -189,43 +183,47 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
loadBannerData() {
|
||||
getBannerData().then(res => {
|
||||
this.bannerList = res.data;
|
||||
}).catch(err => {
|
||||
//console.log(err)
|
||||
})
|
||||
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)
|
||||
})
|
||||
getNoticeData()
|
||||
.then(res => {
|
||||
this.noticeList = res.data
|
||||
})
|
||||
.catch(err => {
|
||||
//console.log(err)
|
||||
})
|
||||
},
|
||||
handleSearchClick(e) {
|
||||
console.log('监听点击准备跳转页面')
|
||||
},
|
||||
handleSwiperClick(index){
|
||||
console.log('点击了图片索引值：',index)
|
||||
handleSwiperClick(index) {
|
||||
console.log('点击了图片索引值：', index)
|
||||
},
|
||||
handleProdItemClick(productId){
|
||||
handleProdItemClick(productId) {
|
||||
uni.$u.route('/pages/product/product', {
|
||||
productId: productId
|
||||
});
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
swiperList(){
|
||||
swiperList() {
|
||||
return this.bannerList.map(item => {
|
||||
if (item){
|
||||
return item;
|
||||
if (item) {
|
||||
return item
|
||||
}
|
||||
})
|
||||
},
|
||||
noticeTextList() {
|
||||
return this.noticeList.map(item => {
|
||||
if (item.title){
|
||||
return item.title;
|
||||
if (item.title) {
|
||||
return item.title
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -234,7 +232,6 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.search-wrap {
|
||||
background: $custom-bg-color;
|
||||
padding: 20rpx;
|
||||
|
|
@ -266,10 +263,7 @@ export default {
|
|||
.prod-block {
|
||||
margin-top: -160px;
|
||||
.bloc-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@include flex-space-between;
|
||||
padding: 10rpx 30rpx;
|
||||
|
||||
.bloc-title {
|
||||
|
|
@ -287,7 +281,8 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
&.half, &.list {
|
||||
&.half,
|
||||
&.list {
|
||||
margin-top: 0;
|
||||
.bloc-header {
|
||||
margin-top: 50rpx;
|
||||
|
|
@ -321,8 +316,7 @@ export default {
|
|||
padding-bottom: 10rpx;
|
||||
}
|
||||
.price-and-cart {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@include flex-space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -336,9 +330,7 @@ export default {
|
|||
.prod-item {
|
||||
padding: 20rpx;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
@include flex-space-between;
|
||||
border-bottom: $custom-border-style;
|
||||
|
||||
.prod-image {
|
||||
|
|
@ -356,11 +348,9 @@ export default {
|
|||
padding-bottom: 10rpx;
|
||||
}
|
||||
.price-and-cart {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@include flex-space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
|
||||
<view class="container">
|
||||
<view class="unp-header">
|
||||
<view class="unp-logo">
|
||||
<u-avatar size="80" icon="github-circle-fill" fontSize="80"></u-avatar>
|
||||
|
|
@ -23,12 +22,12 @@
|
|||
<u-gap height="20"></u-gap>
|
||||
|
||||
<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">
|
||||
<template slot="suffix">
|
||||
<u-input :type="inputType" maxlength="16" v-model="formData.password" placeholder="请填写密码" border="none">
|
||||
<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>
|
||||
</template>
|
||||
</u-input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item v-else label="验证码" prop="code" labelWidth="60" borderBottom>
|
||||
|
|
@ -41,170 +40,160 @@
|
|||
|
||||
<u-gap height="20"></u-gap>
|
||||
<u-button type="info" text="返回" @click="navigateBack()"></u-button>
|
||||
|
||||
</u--form>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {passwordLogin,sendSmsCode,smsLogin} from "../../common/api";
|
||||
import { passwordLogin, sendSmsCode, smsLogin } from '../../common/api'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
//租户ID
|
||||
agent: 1,
|
||||
currentModeIndex: 0,
|
||||
loginModeList: ['密码登录', '验证码登录'],
|
||||
inputType: 'password',
|
||||
codeDisabled: false,
|
||||
codeTips: '',
|
||||
formData: {
|
||||
mobile: '15601691234',
|
||||
password: '',
|
||||
code: ''
|
||||
},
|
||||
rules: {
|
||||
'mobile': [
|
||||
{
|
||||
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,
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
//租户ID
|
||||
agent: 1,
|
||||
currentModeIndex: 0,
|
||||
loginModeList: ['密码登录', '验证码登录'],
|
||||
inputType: 'password',
|
||||
codeDisabled: false,
|
||||
codeTips: '',
|
||||
formData: {
|
||||
mobile: '15601691234',
|
||||
password: '',
|
||||
code: ''
|
||||
},
|
||||
rules: {
|
||||
mobile: [
|
||||
{
|
||||
type: 'integer',
|
||||
required: true,
|
||||
message: '密码长度4-16位密码',
|
||||
message: '请填写手机号',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
'code': {
|
||||
type: 'integer',
|
||||
len: 4,
|
||||
required: true,
|
||||
message: '请填写4位验证码',
|
||||
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,
|
||||
message: '密码长度4-16位密码',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
code: {
|
||||
type: 'integer',
|
||||
len: 4,
|
||||
required: true,
|
||||
message: '请填写4位验证码',
|
||||
trigger: ['blur', 'change']
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},onReady(){
|
||||
// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
|
||||
this.$refs.form.setRules(this.rules)
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
onReady() {
|
||||
// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
|
||||
this.$refs.form.setRules(this.rules)
|
||||
},
|
||||
methods: {
|
||||
handleModeChange(index) {
|
||||
if (index !== this.currentModeIndex) {
|
||||
this.currentModeIndex = index
|
||||
this.$refs.form.clearValidate()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleModeChange(index) {
|
||||
if (index !== this.currentModeIndex){
|
||||
this.currentModeIndex = index;
|
||||
this.$refs.form.clearValidate();
|
||||
}
|
||||
},
|
||||
codeChange(text) {
|
||||
this.codeTips = text;
|
||||
},
|
||||
getCode() {
|
||||
const mobile = this.formData.mobile;
|
||||
if (!mobile) {
|
||||
uni.$u.toast('请填写手机号');
|
||||
} else if (!uni.$u.test.mobile(mobile)){
|
||||
uni.$u.toast('手机号格式不正确');
|
||||
} else if (this.$refs.uCode.canGetCode) {
|
||||
// 模拟向后端请求验证码
|
||||
uni.showLoading({
|
||||
title: '正在获取验证码'
|
||||
});
|
||||
codeChange(text) {
|
||||
this.codeTips = text
|
||||
},
|
||||
getCode() {
|
||||
const mobile = this.formData.mobile
|
||||
if (!mobile) {
|
||||
uni.$u.toast('请填写手机号')
|
||||
} else if (!uni.$u.test.mobile(mobile)) {
|
||||
uni.$u.toast('手机号格式不正确')
|
||||
} else if (this.$refs.uCode.canGetCode) {
|
||||
// 模拟向后端请求验证码
|
||||
uni.showLoading({
|
||||
title: '正在获取验证码'
|
||||
})
|
||||
|
||||
//scene:1登陆获取验证码场景
|
||||
sendSmsCode({agent: 1, mobile:mobile, scene:1 }).then(res => {
|
||||
//scene:1登陆获取验证码场景
|
||||
sendSmsCode({ agent: 1, mobile: mobile, scene: 1 })
|
||||
.then(res => {
|
||||
//console.log(res)
|
||||
uni.hideLoading();
|
||||
if (res.data.code === 0){
|
||||
uni.hideLoading()
|
||||
if (res.data.code === 0) {
|
||||
// 这里此提示会被this.start()方法中的提示覆盖
|
||||
uni.$u.toast('验证码已发送');
|
||||
uni.$u.toast('验证码已发送')
|
||||
// 通知验证码组件内部开始倒计时
|
||||
this.$refs.uCode.start();
|
||||
this.$refs.uCode.start()
|
||||
} else {
|
||||
uni.$u.toast(res.data.msg);
|
||||
uni.$u.toast(res.data.msg)
|
||||
}
|
||||
}).catch(err => {
|
||||
uni.$u.toast('服务器接口请求异常');
|
||||
})
|
||||
} else {
|
||||
uni.$u.toast('倒计时结束后再发送');
|
||||
}
|
||||
},
|
||||
handleSubmit() {
|
||||
this.$refs.form.validate().then(res => {
|
||||
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('登录成功');
|
||||
.catch(err => {
|
||||
uni.$u.toast('服务器接口请求异常')
|
||||
})
|
||||
} else {
|
||||
uni.$u.toast('倒计时结束后再发送')
|
||||
}
|
||||
},
|
||||
handleSubmit() {
|
||||
this.$refs.form.validate().then(res => {
|
||||
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
|
||||
} else {
|
||||
uni.$u.toast(res.data.msg);
|
||||
uni.$u.toast(res.data.msg)
|
||||
// TODO 登录失败
|
||||
}
|
||||
}).catch(err => {
|
||||
uni.$u.toast('服务器接口请求异常');
|
||||
}
|
||||
})
|
||||
} else if (this.currentModeIndex === 1) {
|
||||
smsLogin({agent: 1, mobile:this.formData.mobile, code:this.formData.code})
|
||||
}
|
||||
})
|
||||
},
|
||||
navigateBack() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
}
|
||||
.catch(err => {
|
||||
uni.$u.toast('服务器接口请求异常')
|
||||
})
|
||||
} else if (this.currentModeIndex === 1) {
|
||||
smsLogin({ agent: 1, mobile: this.formData.mobile, code: this.formData.code })
|
||||
}
|
||||
})
|
||||
},
|
||||
navigateBack() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.unp-header {
|
||||
height: 400rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include flex-center;
|
||||
.unp-logo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include flex-center(column);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.unp-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include flex-center(column);
|
||||
|
||||
.mode-section{
|
||||
.mode-section {
|
||||
width: 560rpx;
|
||||
}
|
||||
.unp-form{
|
||||
.unp-form {
|
||||
width: 560rpx;
|
||||
}
|
||||
}
|
||||
|
|
@ -212,14 +201,10 @@ import {passwordLogin,sendSmsCode,smsLogin} from "../../common/api";
|
|||
.lk-group {
|
||||
height: 40rpx;
|
||||
margin-top: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@include flex-space-between;
|
||||
font-size: 12rpx;
|
||||
|
||||
color: $u-primary;
|
||||
text-decoration: $u-primary;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,17 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
个人资料
|
||||
</view>
|
||||
<view class="container"> 个人资料 </view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: ''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: ''
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
|
||||
<view class="unp-header">
|
||||
<view class="unp-logo">
|
||||
<u-avatar size="80" icon="github-circle-fill" fontSize="80"></u-avatar>
|
||||
|
|
@ -25,24 +24,15 @@
|
|||
</u-form-item>
|
||||
|
||||
<view class="lk-group">
|
||||
<!-- 占位 -->
|
||||
<!-- 占位 -->
|
||||
</view>
|
||||
|
||||
<u-button
|
||||
type="success"
|
||||
text="注册账号"
|
||||
customStyle="margin-top: 50px"
|
||||
@click="handleSubmit"
|
||||
></u-button>
|
||||
<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>
|
||||
|
||||
|
|
@ -53,17 +43,17 @@ export default {
|
|||
inputType: 'password',
|
||||
formData: {
|
||||
username: '',
|
||||
password: '',
|
||||
password: ''
|
||||
},
|
||||
rules: {
|
||||
'username': {
|
||||
username: {
|
||||
type: 'string',
|
||||
max: 20,
|
||||
required: true,
|
||||
message: '请输入您的账号',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
'password': {
|
||||
password: {
|
||||
type: 'string',
|
||||
max: 20,
|
||||
required: true,
|
||||
|
|
@ -73,28 +63,27 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
handleUsernameChange(e){
|
||||
let str = uni.$u.trim(e, 'all');
|
||||
handleUsernameChange(e) {
|
||||
let str = uni.$u.trim(e, 'all')
|
||||
this.$nextTick(() => {
|
||||
this.formData.username = str
|
||||
})
|
||||
},
|
||||
handlePasswordChange(e){
|
||||
let str = uni.$u.trim(e, 'all');
|
||||
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 => {
|
||||
|
||||
})
|
||||
this.$refs.form
|
||||
.validate()
|
||||
.then(res => {
|
||||
uni.$u.toast('点击了注册账号')
|
||||
})
|
||||
.catch(err => {})
|
||||
},
|
||||
navigateBack() {
|
||||
uni.navigateBack()
|
||||
|
|
@ -104,41 +93,28 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.unp-header {
|
||||
height: 400rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include flex-center;
|
||||
.unp-logo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include flex-center;
|
||||
}
|
||||
}
|
||||
|
||||
.unp-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.unp-form{
|
||||
@include flex-center;
|
||||
.unp-form {
|
||||
width: 560rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.lk-group {
|
||||
@include flex-space-between;
|
||||
height: 40rpx;
|
||||
margin-top: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 12rpx;
|
||||
|
||||
color: $u-primary;
|
||||
text-decoration: $u-primary;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<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>
|
||||
<text class="nick-name">{{ nickName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
|
@ -19,10 +19,11 @@
|
|||
</view>
|
||||
|
||||
<view class="order-status-box">
|
||||
<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 :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>
|
||||
|
|
@ -30,10 +31,11 @@
|
|||
<u-gap height="10" bgColor="#f3f3f3"></u-gap>
|
||||
|
||||
<view class="stat-box">
|
||||
<u-grid :border="false" col="3"><u-grid-item v-for="(item,index) in statList" :key="index">
|
||||
<text class="grid-value">{{item.value}}</text>
|
||||
<text class="grid-title">{{item.title}}</text>
|
||||
</u-grid-item>
|
||||
<u-grid :border="false" col="3"
|
||||
><u-grid-item v-for="(item, index) in statList" :key="index">
|
||||
<text class="grid-value">{{ item.value }}</text>
|
||||
<text class="grid-title">{{ item.title }}</text>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
|
||||
|
|
@ -47,47 +49,48 @@
|
|||
</u-cell-group>
|
||||
|
||||
<u-button class="logout-btn" type="error" color="#ea322b" text="确定"></u-button>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
avatar:'',
|
||||
nickName:'点击登录',
|
||||
orderStatusList: [{icon: 'rmb-circle', title: '待支付'}, {icon: 'car', title: '代发货'}, {icon: 'order', title: '待收货'}, {icon: 'integral', title: '已完成'}],
|
||||
statList: [{value: '2', title: '我的收藏'}, {value: '3', title: '我的消息'}, {value: '3', title: '我的足迹'}]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
handleUserInfoClick(){
|
||||
// TODO 判断是否已经登录逻辑
|
||||
if (!uni.getStorageSync('token')) {
|
||||
uni.$u.route('/pages/login/login');
|
||||
} else {
|
||||
uni.$u.route('/pages/profile/profile');
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
avatar: '',
|
||||
nickName: '点击登录',
|
||||
orderStatusList: [
|
||||
{ icon: 'rmb-circle', title: '待支付' },
|
||||
{ icon: 'car', title: '代发货' },
|
||||
{ icon: 'order', title: '待收货' },
|
||||
{ icon: 'integral', title: '已完成' }
|
||||
],
|
||||
statList: [
|
||||
{ value: '2', title: '我的收藏' },
|
||||
{ value: '3', title: '我的消息' },
|
||||
{ value: '3', title: '我的足迹' }
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
handleUserInfoClick() {
|
||||
// TODO 判断是否已经登录逻辑
|
||||
if (!uni.getStorageSync('token')) {
|
||||
uni.$u.route('/pages/login/login')
|
||||
} else {
|
||||
uni.$u.route('/pages/profile/profile')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-header {
|
||||
@include flex-center(column);
|
||||
height: 280rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include flex-center(column);
|
||||
.nick-name {
|
||||
margin-top: 20rpx;
|
||||
font-size: 32rpx;
|
||||
|
|
@ -97,10 +100,7 @@
|
|||
}
|
||||
|
||||
.order-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@include flex-space-between;
|
||||
padding: 20rpx 30rpx;
|
||||
border-bottom: $custom-border-style;
|
||||
|
||||
|
|
@ -110,10 +110,7 @@
|
|||
}
|
||||
.see-all {
|
||||
height: 40rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: right;
|
||||
@include flex-right;
|
||||
color: #666666;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
|
@ -151,5 +148,4 @@
|
|||
margin-top: 60rpx;
|
||||
width: 300rpx;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -22,3 +22,39 @@ $custom-bg-color: #ffffff;
|
|||
|
||||
/* 边框样式 */
|
||||
$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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue