zm/sociology_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化（包含登录模块）

Browse Source
This commit is contained in:
始于初见
2024-03-29 17:37:48 +08:00
commit 1bcb13ce7a
1306 changed files with 152772 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
pages/extUI/list/chat.vue Normal file
View File

@@ -0,0 +1,176 @@
<template>
<view>
<uni-card :is-shadow="false" is-full>
<text class="uni-h6">此示例展示了聊天列表的使用场景。</text>
</uni-card>
<uni-section title="圆头像且不显示分割线" type="line">
<uni-list :border="false">
<uni-list-chat v-for="item in listData" :avatar-circle="true" :key="item.id" :title="item.author_name" :avatar="item.cover"
:note="item.title" :time="item.published_at" :clickable="false"></uni-list-chat>
</uni-list>
</uni-section>
<uni-section title="带圆点" type="line">
<uni-list>
<uni-list-chat v-for="item in listData" :key="item.id" :title="item.author_name" :avatar="item.cover" :note="item.title"
:time="item.published_at" :badge-text="item.text" :clickable="false" badge-positon="left" badge-text="dot"></uni-list-chat>
</uni-list>
</uni-section>
<uni-section title="自定义右侧内容" type="line">
<uni-list>
<uni-list-chat v-for="item in listData" :key="item.id" :title="item.author_name" :avatar="item.cover" :note="item.title"
badge-positon="left" :badge-text="item.text">
<view class="chat-custom-right">
<text class="chat-custom-text">刚刚</text>
<uni-icons type="star-filled" color="#999" size="18"></uni-icons>
</view>
</uni-list-chat>
</uni-list>
</uni-section>
<uni-section title="带通知角标的单头像聊天列表" type="line">
<uni-list>
<uni-list-chat v-for="item in listData" :key="item.id" :title="item.author_name" :avatar="item.cover" :note="item.title"
:time="item.published_at" :clickable="true" :badge-text="item.text" @click="onClick"></uni-list-chat>
</uni-list>
</uni-section>
<uni-section title="带通知角标的多头像聊天列表" type="line">
<uni-list>
<uni-list-chat v-for="(item,index) in listData" :key="item.id" :title="item.author_name" :avatar="item.cover" :note="item.title"
:time="item.published_at" :clickable="true" :avatarList="avatar(index+1)" :badge-text="item.text" @click="onClick"></uni-list-chat>
</uni-list>
</uni-section>
</view>
</template>
<script>
export default {
components: {},
data() {
return {
UNITS: {
'年': 31557600000,
'月': 2629800000,
'天': 86400000,
'小时': 3600000,
'分钟': 60000,
'秒': 1000
},
listData: [],
avatarList: [{
url: '/static/logo.png'
}, {
url: '/static/logo.png'
}, {
url: '/static/logo.png'
}]
}
},
onLoad() {
this.getList()
},
methods: {
onClick() {
uni.showToast({
title: '列表被点击'
})
},
avatar(count) {
let arr = []
this.avatarList.forEach((item, index) => {
if (index < count) {
arr.push(item)
}
})
return arr
},
getList() {
var data = {
column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
};
uni.request({
url: 'https://unidemo.dcloud.net.cn/api/news',
data: data,
success: data => {
if (data.statusCode == 200) {
let list = this.setTime(data.data);
list = this.reload ? list : this.listData.concat(list);
list.map(item => {
item.text = Math.floor(Math.random() * (1 - 20) + 20)
return item
})
this.listData = this.getRandomArrayElements(list, 3)
}
},
fail: (data, code) => {
console.log('fail' + JSON.stringify(data));
}
});
},
getRandomArrayElements(arr, count) {
var shuffled = arr.slice(0),
i = arr.length,
min = i - count,
temp, index;
while (i-- > min) {
index = Math.floor((i + 1) * Math.random());
temp = shuffled[index];
shuffled[index] = shuffled[i];
shuffled[i] = temp;
}
return shuffled.slice(min);
},
setTime(items) {
var newItems = [];
items.forEach(e => {
newItems.push({
author_name: e.author_name,
cover: e.cover,
id: e.id,
post_id: e.post_id,
published_at: this.format(e.published_at),
title: e.title
});
});
return newItems;
},
format(dateStr) {
var date = this.parse(dateStr)
var diff = Date.now() - date.getTime();
if (diff < this.UNITS['天']) {
return this.humanize(diff);
}
var _format = function(number) {
return (number < 10 ? ('0' + number) : number);
};
return date.getFullYear() + '-' + _format(date.getMonth() + 1) + '-' + _format(date.getDate()) + ' ' +
_format(date.getHours()) + ':' + _format(date.getMinutes());
},
parse(str) { //将"yyyy-mm-dd HH:MM:ss"格式的字符串，转化为一个Date对象
var a = str.split(/[^0-9]/);
return new Date(a[0], a[1] - 1, a[2], a[3], a[4], a[5]);
},
}
}
</script>
<style lang="scss" >
.chat-custom-right {
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
}
.chat-custom-text {
font-size: 12px;
color: #999;
}
</style>

164
pages/extUI/list/list.nvue Normal file
View File

@@ -0,0 +1,164 @@
<template>
<view class="container">
<uni-card :is-shadow="false" is-full>
<text class="uni-h6">列表组件可以在其中使用图标、略缩图或放置任何你想放的元素，使用场景如：导航菜单、列表、设置中心排版等</text>
</uni-card>
<uni-section title="基础用法" type="line">
<uni-list>
<uni-list-item title="列表文字" />
<uni-list-item title="列表文字" rightText="右侧文字" />
<uni-list-item title="列表文字" note="列表描述信息" rightText="右侧文字" />
</uni-list>
</uni-section>
<uni-section title="禁用列表" type="line">
<uni-list>
<uni-list-item :disabled="true" title="列表禁用状态" rightText="右侧文字" />
<uni-list-item :disabled="true" title="列表禁用状态" rightText="右侧文字" />
</uni-list>
</uni-section>
<uni-section title="显示右侧箭头" type="line">
<uni-list>
<uni-list-item showArrow title="列表文字" />
<uni-list-item showArrow title="列表文字" rightText="右侧文字" />
</uni-list>
</uni-section>
<uni-section title="开启点击反馈" type="line">
<uni-list>
<uni-list-item title="弹窗提示" clickable @click="onClick" />
<uni-list-item title="页面跳转" :to="`./chat`" @click="onClick" />
<uni-list-item title="关闭当前页面打开新页面" showArrow link="redirectTo" to="./chat" @click="onClick" />
<uni-list-item title="打开错误页面(查看控制台)" showArrow link="redirectTo" to="./chats" @click="onClick" />
</uni-list>
</uni-section>
<uni-section title="不显示分隔线" type="line">
<uni-list :border="false">
<uni-list-item title="列表文字" />
<uni-list-item :border="false" title="列表文字" note="列表描述信息" rightText="右侧文字" />
<uni-list-item :border="false" title="列表文字" note="列表描述信息" rightText="右侧文字" />
</uni-list>
</uni-section>
<uni-section title="分隔线通栏" type="line">
<uni-list border-full>
<uni-list-item title="列表文字" />
<uni-list-item title="列表文字" note="列表描述信息" rightText="右侧文字" />
<uni-list-item title="列表文字" note="列表描述信息" rightText="右侧文字" />
</uni-list>
</uni-section>
<uni-section title="文字溢出隐藏" type="line">
<uni-list>
<uni-list-item ellipsis="1" title="超长文字显示一行,以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字" />
<uni-list-item ellipsis="2" title="超长文字显示二行,以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字"
rightText="二行显示" />
<uni-list-item ellipsis="1" title="全部显示,以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字"
note="列表描述信息,下是测试文字,下是测试文字,下是测试文字,下是测试文字,下是测试文字,下是测试文字,下是测试文字" showArrow rightText="一行显示" />
<uni-list-item title="全部显示,以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字" showArrow rightText="全部" />
</uni-list>
</uni-section>
<uni-section title="显示图标或图片" type="line">
<uni-list>
<uni-list-item :show-extra-icon="true" showArrow :extra-icon="extraIcon" title="列表左侧带扩展图标" />
<uni-list-item title="列表左侧带略缩图" note="列表描述信息" showArrow
thumb="/static/c1.png"
thumb-size="sm" rightText="小图" />
<uni-list-item title="列表左侧带略缩图" note="列表描述信息" showArrow
thumb="https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
thumb-size="base" rightText="默认" />
<uni-list-item title="列表左侧带略缩图" note="列表描述信息" showArrow
thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
thumb-size="lg" rightText="大图" />
</uni-list>
</uni-section>
<uni-section title="使用插槽" type="line">
<uni-list>
<uni-list-item>
<template v-slot:body>
<view class="slot-box">
<text class="slot-text">使用 body 插槽</text>
</view>
</template>
</uni-list-item>
<uni-list-item title="自定义右侧插槽" note="列表描述信息" link>
<template v-slot:footer>
<image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
</template>
</uni-list-item>
<uni-list-item>
<template v-slot:header>
<view class="slot-box">
<image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
</view>
</template>
<template v-slot:body>
<text class="slot-box slot-text">自定义两侧插槽</text>
</template>
<template v-slot:footer>
<image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
</template>
</uni-list-item>
</uni-list>
</uni-section>
</view>
</template>
<script>
export default {
components: {},
data() {
return {
cover: 'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
avatar: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
extraIcon: {
color: '#4cd964',
size: '22',
type: 'gear-filled'
}
};
},
methods: {
onClick(e) {
console.log('执行click事件', e.data)
uni.showToast({
title: '点击反馈'
});
},
switchChange(e) {
uni.showToast({
title: 'change:' + e.value,
icon: 'none'
});
}
}
};
</script>
<style lang="scss">
.slot-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
}
.slot-image {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
margin-right: 10px;
width: 30px;
height: 30px;
}
.slot-text {
flex: 1;
font-size: 14px;
color: #4cd964;
margin-right: 10px;
}
</style>