XiXingWL/AnHanNET-UniAPP
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

注释

Browse Source
This commit is contained in:
xixingwl
2023-02-04 08:50:14 +08:00
commit 98cfbb0b77
89 changed files with 9508 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

267
pages/tabbar/home/home.vue Normal file
View File

@@ -0,0 +1,267 @@
<template>
<view class="warp">
<uni-search-bar @confirm="search" v-model="searchValue" @input="input" clearButton="always" cancelButton="none"
@clear="scan">
<template v-slot:clearIcon>
<uni-icons color="#999999" size="18" type="scan" />
</template>
</uni-search-bar>
<!-- 个人中心页方格列表数据 -->
<view class="Grid">
<view class="Grid-Item" v-for="item in List" :key="item.id">
<view class="GSimg">
<image class="Image" :src="item.img"></image>
</view>
<view class="GStitle">{{ item.title }}</view>
</view>
</view>
<view class="MsgList">
<view class="MlSon" v-for="item in List1" :key="item.id">
<view class="MlSonvBox">
<view class="SonOfImg">
<image class="Img" :src="item.img"></image>
</view>
<view class="SonOfName">
<view class="SNTop">
{{item.title}}
</view>
<view class="SNBom">
<view class="SBleft">
左边信息
</view>
<view class="SBright">
右边信息
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
searchValue: '123123',
List: [{
id: 1,
img: '../../../static/logo.png',
title: '九宫格布局1'
},
{
id: 2,
img: '../../../static/logo.png',
title: '九宫格布局2'
},
{
id: 3,
img: '../../../static/logo.png',
title: '九宫格布局3'
},
{
id: 4,
img: '../../../static/logo.png',
title: '九宫格布局4'
}
],
List1: [{
id: 1,
img: '../../../static/logo.png',
title: "这是标题超出两行的部分会被作为省略号隐藏，您也可以根据需求将其设为超出一行隐藏",
msg: "这是提示信息"
},
{
id: 2,
img: '../../../static/logo.png',
title: "这是标题超出部分会被作为省略号隐藏",
msg: "这是提示信息"
},
{
id: 2,
img: '../../../static/logo.png',
title: "这是标题超出部分会被作为省略号隐藏",
msg: "这是提示信息"
},
{
id: 2,
img: '../../../static/logo.png',
title: "这是标题超出部分会被作为省略号隐藏",
msg: "这是提示信息"
},
{
id: 2,
img: '../../../static/logo.png',
title: "这是标题超出部分会被作为省略号隐藏",
msg: "这是提示信息"
},
{
id: 2,
img: '../../../static/logo.png',
title: "这是标题超出部分会被作为省略号隐藏",
msg: "这是提示信息"
},
{
id: 2,
img: '../../../static/logo.png',
title: "这是标题超出部分会被作为省略号隐藏",
msg: "这是提示信息"
},
]
}
},
onLoad() {
//this.$ajax('index')
},
methods: {
search(res) {
uni.showToast({
title: '搜索：' + res.value,
icon: 'none'
})
},
input(res) {
console.log('----input:', res)
},
scan(res) {
// #ifndef H5
uni.scanCode({
success: function(res) {
console.log('条码类型：' + res.scanType);
console.log('条码内容：' + res.result);
},
fail: function() {
},
complete: function() {
}
});
// #endif
},
},
onBackPress() {
// #ifdef APP-PLUS
plus.key.hideSoftKeybord();
// #endif
}
}
</script>
<style lang="scss">
.Grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
background: #f7f7f7;
padding: 10rpx 15rpx;
.Grid-Item {
width: 25%;
text-align: center;
border: 1rpx solid #ccc;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: column;
align-items: center;
padding-top: 15rpx;
padding-bottom: 15rpx;
.GSimg {
width: 96rpx;
height: 96rpx;
.Image {
width: 96rpx;
height: 96rpx;
}
}
.GStitle {
width: 100%;
height: 34rpx;
line-height: 34rpx;
color: #06121e;
font-size: 24rpx;
margin-top: 20rpx;
}
}
}
$max:100%;
.MsgList {
width: 92%;
margin-left: 4%;
max-width: 690rpx;
height: auto;
.MlSon {
border-radius: 12rpx;
.MlSonvBox {
padding: 24rpx 32rpx;
height: 168rpx;
display: flex;
justify-content: space-around;
background: #fff;
border: 1px solid red;
margin-top: 10px;
.SonOfImg {
border: 1px solid red;
width: 164rpx;
height: $max;
border-radius: 12rpx;
overflow: hidden;
.Img {
width: $max;
height: $max;
}
}
.SonOfName {
width: 428rpx;
height: $max;
.SNTop {
//这部分是标题 我将其设置为超出两行隐藏掉您可根据需求设置为一行
width: $max;
height: 88rpx;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 44rpx;
color: #06121E;
font-size: 28rpx;
}
.SNBom {
width: $max;
height: 34rpx;
line-height: 34rpx;
font-size: 24rpx;
display: flex;
justify-content: space-between;
margin-top: 18rpx;
.SBleft {
//这里预留了底部左右信息的样式处理
}
.SBright {}
}
}
}
}
}
</style>

189
pages/tabbar/my/my.vue Normal file
View File

@@ -0,0 +1,189 @@
<template>
<view>
<page-head title="view"></page-head>
<view class="warp" style="margin: 10rpx 15rpx;">
<view class="user" style="">
<image class="user-avatar" mode="aspectFit" src="../../../static/logo.png"></image>
<view class="user-info">
<h2> 用户昵称 </h2>
<text> UID 1234567897 </text>
<text> 用户昵称</text>
</view>
</view>
<view style="padding: 10rpx;"></view>
<view class="Grid">
<view class="Grid-Item">
<view class="Grid-Item-1">
<view class="GSimg">
<image class="Image" src="../../../static/logo.png"></image>
</view>
<view class="GStitle">测试功能</view>
</view>
</view>
<view class="Grid-Item">
<view class="Grid-Item-1">
<view class="GSimg">
<image class="Image" src="../../../static/logo.png"></image>
</view>
<view class="GStitle">测试功能</view>
</view>
</view>
<view class="Grid-Item">
<view class="Grid-Item-1">
<view class="GSimg">
<image class="Image" src="../../../static/logo.png"></image>
</view>
<view class="GStitle">测试功能</view>
</view>
</view>
<view class="Grid-Item">
<view class="Grid-Item-1">
<view class="GSimg">
<image class="Image" src="../../../static/logo.png"></image>
</view>
<view class="GStitle">测试功能</view>
</view>
</view>
</view>
<view style="padding: 10rpx;"></view>
<uni-list style="">
<uni-list-item title="列表左侧带略缩图"
thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
thumb-size="sm" rightText="右侧文字" showArrow></uni-list-item>
<uni-list-item :showExtraIcon="true" :extraIcon="{color: '#4cd964',size: '25',type: 'gear'}"
title="列表左侧带扩展图标" clickable showArrow>
</uni-list-item>
<uni-list-item :showExtraIcon="true" :extraIcon="{color: '#4cd964',size: '25',type: 'gear'}"
title="列表左侧带扩展图标" clickable showArrow>
</uni-list-item>
<uni-list-item :showExtraIcon="true" :extraIcon="{color: '#4cd964',size: '25',type: 'gear'}"
title="列表左侧带扩展图标" clickable showArrow>
</uni-list-item>
</uni-list>
<view style="padding: 10rpx;"></view>
<uni-list>
<uni-list-item title="列表左侧带略缩图"
thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
thumb-size="sm" rightText="右侧文字" showArrow></uni-list-item>
<uni-list-item :showExtraIcon="true" :extraIcon="{color: '#4cd964',size: '25',type: 'gear'}" title="设置"
clickable showArrow>
</uni-list-item>
<uni-list-item :showExtraIcon="true" :extraIcon="{color: '#4cd964',size: '25',type: 'info'}" title="关于"
clickable showArrow>
</uni-list-item>
<uni-list-item :showExtraIcon="true" :extraIcon="{color: '#ff0000',size: '25',type: 'back'}" title="退出"
clickable showArrow>
</uni-list-item>
</uni-list>
</view>
</view>
</template>
<script>
import {mapState,mapGetters} from 'vuex'
export default {
computed: {
...mapState({
text: state => state.moduleA.text,
timestamp: state => state.moduleB.timestamp
}),
...mapGetters({
isLogin: 'userIsLogin'
})
},
data() {
return {}
},
onLoad(){
if (! this.isLogin) {
uni.redirectTo({
url:"/pages/login/login"
})
}
},
methods: {
},
onBackPress() {
// #ifdef APP-PLUS
plus.key.hideSoftKeybord();
// #endif
}
}
</script>
<style lang="scss">
.user {
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
padding-top: 180rpx;
padding-left: 15rpx;
padding-bottom:25rpx;
.user-avatar {
width: 138rpx;
height: 138rpx;
border-radius: 50%;
}
.user-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 45rpx;
}
}
.Grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
background: #f7f7f7;
.Grid-Item {
width: 25%;
.Grid-Item-1 {
margin-left: 10rpx;
margin-right: 10rpx;
text-align: center;
border: 1rpx solid #efeded;
border-radius: 25rpx;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
flex-direction: column;
align-items: center;
padding-top: 20rpx;
padding-bottom: 5rpx;
background-color: #fff;
}
.GSimg {
width: 96rpx;
height: 96rpx;
.Image {
width: 96rpx;
height: 96rpx;
}
}
.GStitle {
width: 100%;
height: 34rpx;
line-height: 34rpx;
color: #06121e;
font-size: 24rpx;
margin-top: 10rpx;
}
}
}
</style>