接口对接
This commit is contained in:
仲么了
76
common/api/feedback.js
Normal file
76
common/api/feedback.js
Normal file
@@ -0,0 +1,76 @@
|
|||||||
|
import request from '../js/request';
|
||||||
|
import config from '../js/config';
|
||||||
|
/**
|
||||||
|
* 添加反馈
|
||||||
|
* @param {*} params {description: '', files: '', title: 1，type: 1，user_id:12}
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export function addFeedBack(params) {
|
||||||
|
return request({
|
||||||
|
url: '/feedback/addFeedBack',
|
||||||
|
method: 'post',
|
||||||
|
data: params,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 问题详情
|
||||||
|
* @param {*} id
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export function queryFeedBackDetail(id) {
|
||||||
|
return request({
|
||||||
|
url: '/feedback/queryFeedBackDetail',
|
||||||
|
method: 'post',
|
||||||
|
data: {
|
||||||
|
id,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 问题列表
|
||||||
|
export function queryFeedBackPage(params) {
|
||||||
|
return request({
|
||||||
|
url: '/feedback/queryFeedBackPage',
|
||||||
|
method: 'post',
|
||||||
|
data: {
|
||||||
|
currentPage: 1,
|
||||||
|
pageSize: 20,
|
||||||
|
status: '',
|
||||||
|
type: '',
|
||||||
|
userId: uni.getStorageSync('userInfo').id,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 添加反馈聊天
|
||||||
|
*
|
||||||
|
* @param {*} params {chatContent: '', id: 12, user_id: 1}
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export function AddFeedbackChat(params) {
|
||||||
|
return request({
|
||||||
|
url: '/feedbackChat/AddFeedbackChat',
|
||||||
|
method: 'post',
|
||||||
|
data: params,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新反馈聊天状态
|
||||||
|
* @param {*} params {
|
||||||
|
"id": "2e47078c0f59a4a612655bb3bbaed617",
|
||||||
|
"userId": "12"
|
||||||
|
}
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export function updateChatStatus(params) {
|
||||||
|
return request({
|
||||||
|
url: '/feedbackChat/updateChatStatus',
|
||||||
|
method: 'post',
|
||||||
|
data: params,
|
||||||
|
});
|
||||||
|
}
|
||||||
@@ -1,6 +1,7 @@
|
|||||||
{
|
{
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"html2canvas": "^1.4.1",
|
"html2canvas": "^1.4.1",
|
||||||
"mqtt": "3.0.0"
|
"mqtt": "3.0.0",
|
||||||
|
"pinyin-pro": "^3.13.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -22,6 +22,8 @@
|
|||||||
</Cn-grid>
|
</Cn-grid>
|
||||||
</view>
|
</view>
|
||||||
<view class="nav">
|
<view class="nav">
|
||||||
|
<view class="nav-menu" :class="{ 'nav-menu-active': select.projectName }" @click="showDrawer">{{
|
||||||
|
select.projectName || '工程' }} </view>
|
||||||
<picker @change="projectNameChange" :value="select.projectNameIndex" :range="projectList" range-key="text">
|
<picker @change="projectNameChange" :value="select.projectNameIndex" :range="projectList" range-key="text">
|
||||||
<view class="nav-menu" :class="{ 'nav-menu-active': select.projectName }">{{
|
<view class="nav-menu" :class="{ 'nav-menu-active': select.projectName }">{{
|
||||||
select.projectName || '项目' }} </view>
|
select.projectName || '项目' }} </view>
|
||||||
@@ -38,11 +40,16 @@
|
|||||||
</uni-card>
|
</uni-card>
|
||||||
<uni-load-more status="nomore"></uni-load-more>
|
<uni-load-more status="nomore"></uni-load-more>
|
||||||
</view>
|
</view>
|
||||||
|
<uni-drawer ref="showRight" mode="right" :mask-click="false" :width="375">
|
||||||
|
<uni-indexed-list :options="gcListFilter" :showSelect="false" @click="closeDrawer"></uni-indexed-list>
|
||||||
|
</uni-drawer>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
import { pinyin } from 'pinyin-pro';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
loading: false,
|
loading: false,
|
||||||
userInfo: {},
|
userInfo: {},
|
||||||
@@ -124,11 +131,94 @@ export default {
|
|||||||
type: '监测',
|
type: '监测',
|
||||||
project: 'XXX项目3'
|
project: 'XXX项目3'
|
||||||
}
|
}
|
||||||
|
],
|
||||||
|
gcList: [
|
||||||
|
'南京灿能',
|
||||||
|
'南京灿能',
|
||||||
|
'南京灿能',
|
||||||
|
'南京灿能',
|
||||||
|
'南京灿能',
|
||||||
|
'北京灿能',
|
||||||
|
'北京灿能',
|
||||||
|
'北京灿能',
|
||||||
|
'北京灿能',
|
||||||
|
'北京灿能',
|
||||||
|
'上海灿能',
|
||||||
|
'上海灿能',
|
||||||
|
'上海灿能',
|
||||||
|
'上海灿能',
|
||||||
|
'上海灿能',
|
||||||
|
'上海灿能',
|
||||||
|
'广州灿能',
|
||||||
|
'广州灿能',
|
||||||
|
'广州灿能',
|
||||||
|
'广州灿能',
|
||||||
|
'广州灿能',
|
||||||
|
'深圳灿能',
|
||||||
|
'深圳灿能',
|
||||||
|
'深圳灿能',
|
||||||
|
'深圳灿能',
|
||||||
|
'深圳灿能',
|
||||||
|
'杭州灿能',
|
||||||
|
'杭州灿能',
|
||||||
|
'杭州灿能',
|
||||||
|
'杭州灿能',
|
||||||
|
'杭州灿能',
|
||||||
|
'杭州灿能',
|
||||||
|
'杭州灿能',
|
||||||
|
'苏州灿能',
|
||||||
|
'苏州灿能',
|
||||||
|
'苏州灿能',
|
||||||
|
'苏州灿能',
|
||||||
|
'苏州灿能',
|
||||||
|
'苏州灿能',
|
||||||
|
'苏州灿能',
|
||||||
|
'苏州灿能',
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
deviceListFilter () {
|
gcListFilter() {
|
||||||
|
// [{
|
||||||
|
// "letter": "A",
|
||||||
|
// "data": [
|
||||||
|
// "阿克苏机场",
|
||||||
|
// "阿拉山口机场",
|
||||||
|
// "阿勒泰机场",
|
||||||
|
// "阿里昆莎机场",
|
||||||
|
// "安庆天柱山机场",
|
||||||
|
// "澳门国际机场"
|
||||||
|
// ]
|
||||||
|
// }, {
|
||||||
|
// "letter": "B",
|
||||||
|
// "data": [
|
||||||
|
// "保山机场",
|
||||||
|
// "包头机场",
|
||||||
|
// "北海福成机场",
|
||||||
|
// "北京南苑机场",
|
||||||
|
// "北京首都国际机场"
|
||||||
|
// ]
|
||||||
|
// }]
|
||||||
|
|
||||||
|
let result = []
|
||||||
|
this.gcList.forEach(item => {
|
||||||
|
let arr = pinyin(item[0], { toneType: 'none', type: 'array' })
|
||||||
|
let letter = arr[0][0].toUpperCase()
|
||||||
|
console.log(letter);
|
||||||
|
let index = result.findIndex(item => item.letter === letter)
|
||||||
|
if (index === -1) {
|
||||||
|
result.push({
|
||||||
|
letter,
|
||||||
|
data: [item]
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
result[index].data.push(item)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return result
|
||||||
|
|
||||||
|
},
|
||||||
|
deviceListFilter() {
|
||||||
return this.deviceList.filter(item => {
|
return this.deviceList.filter(item => {
|
||||||
if (this.select.projectName) {
|
if (this.select.projectName) {
|
||||||
return item.project === this.select.projectName
|
return item.project === this.select.projectName
|
||||||
@@ -141,8 +231,14 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
submitFeedBack () { uni.navigateTo({ url: '/pages/home/feedback' }) },
|
showDrawer() {
|
||||||
projectTypeChange (e) {
|
this.$refs.showRight.open();
|
||||||
|
},
|
||||||
|
closeDrawer() {
|
||||||
|
this.$refs.showRight.close();
|
||||||
|
},
|
||||||
|
submitFeedBack() { uni.navigateTo({ url: '/pages/home/feedback' }) },
|
||||||
|
projectTypeChange(e) {
|
||||||
// 重置name
|
// 重置name
|
||||||
this.select.projectName = ''
|
this.select.projectName = ''
|
||||||
this.select.projectNameIndex = 0
|
this.select.projectNameIndex = 0
|
||||||
@@ -156,7 +252,7 @@ export default {
|
|||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
projectNameChange (e) {
|
projectNameChange(e) {
|
||||||
console.log(e);
|
console.log(e);
|
||||||
// 重置type
|
// 重置type
|
||||||
this.select.projectType = ''
|
this.select.projectType = ''
|
||||||
@@ -169,7 +265,7 @@ export default {
|
|||||||
}
|
}
|
||||||
this.select.projectName = this.projectList[e.detail.value].text
|
this.select.projectName = this.projectList[e.detail.value].text
|
||||||
},
|
},
|
||||||
registerDevice () {
|
registerDevice() {
|
||||||
uni.showModal({
|
uni.showModal({
|
||||||
title: '提示',
|
title: '提示',
|
||||||
content: '请选择设备类型',
|
content: '请选择设备类型',
|
||||||
@@ -189,15 +285,15 @@ export default {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
registerGateway () {
|
registerGateway() {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pages/gateway/new'
|
url: '/pages/gateway/new'
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
navMenuClick (index) {
|
navMenuClick(index) {
|
||||||
this.navMenuActive = index
|
this.navMenuActive = index
|
||||||
},
|
},
|
||||||
jump (item) {
|
jump(item) {
|
||||||
if (item.name.indexOf('APF') > -1) {
|
if (item.name.indexOf('APF') > -1) {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pages/device/APF/detail'
|
url: '/pages/device/APF/detail'
|
||||||
@@ -209,7 +305,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted() {
|
||||||
this.userInfo = uni.getStorageSync('userInfo')
|
this.userInfo = uni.getStorageSync('userInfo')
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
// 获取nav高度
|
// 获取nav高度
|
||||||
|
|||||||
6
pnpm-lock.yaml
generated
6
pnpm-lock.yaml
generated
@@ -3,10 +3,12 @@ lockfileVersion: 5.4
|
|||||||
specifiers:
|
specifiers:
|
||||||
html2canvas: ^1.4.1
|
html2canvas: ^1.4.1
|
||||||
mqtt: 3.0.0
|
mqtt: 3.0.0
|
||||||
|
pinyin-pro: ^3.13.2
|
||||||
|
|
||||||
dependencies:
|
dependencies:
|
||||||
html2canvas: 1.4.1
|
html2canvas: 1.4.1
|
||||||
mqtt: 3.0.0
|
mqtt: 3.0.0
|
||||||
|
pinyin-pro: 3.13.2
|
||||||
|
|
||||||
packages:
|
packages:
|
||||||
|
|
||||||
@@ -402,6 +404,10 @@ packages:
|
|||||||
engines: {node: '>=0.10.0'}
|
engines: {node: '>=0.10.0'}
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
|
/pinyin-pro/3.13.2:
|
||||||
|
resolution: {integrity: sha512-DKz04M0PkrongGyJW7GU+iNB2jInwLcP1p5+w0gu0hz2PtF8q+GTC1GDW731wyhm+q7PGoyMuY3sLONLTqi6mg==}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/process-nextick-args/2.0.1:
|
/process-nextick-args/2.0.1:
|
||||||
resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
|
resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
|
||||||
dev: false
|
dev: false
|
||||||
|
|||||||
17
uni_modules/uni-indexed-list/changelog.md
Normal file
17
uni_modules/uni-indexed-list/changelog.md
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
## 1.2.1（2021-11-22）
|
||||||
|
- 修复 vue3中某些scss变量无法找到的问题
|
||||||
|
## 1.2.0（2021-11-19）
|
||||||
|
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
|
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-indexed-list](https://uniapp.dcloud.io/component/uniui/uni-indexed-list)
|
||||||
|
## 1.1.0（2021-07-30）
|
||||||
|
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||||
|
## 1.0.11（2021-05-12）
|
||||||
|
- 新增 组件示例地址
|
||||||
|
## 1.0.10（2021-04-21）
|
||||||
|
- 优化 添加依赖 uni-icons, 导入后自动下载依赖
|
||||||
|
## 1.0.9（2021-02-05）
|
||||||
|
- 优化 组件引用关系，通过uni_modules引用组件
|
||||||
|
|
||||||
|
## 1.0.8（2021-02-05）
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
|
- 新增 支持 PC 端
|
||||||
@@ -0,0 +1,144 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view v-if="loaded || list.itemIndex < 15" class="uni-indexed-list__title-wrapper">
|
||||||
|
<text v-if="list.items && list.items.length > 0" class="uni-indexed-list__title">{{ list.key }}</text>
|
||||||
|
</view>
|
||||||
|
<view v-if="(loaded || list.itemIndex < 15) && list.items && list.items.length > 0" class="uni-indexed-list__list">
|
||||||
|
<view v-for="(item, index) in list.items" :key="index" class="uni-indexed-list__item" hover-class="uni-indexed-list__item--hover">
|
||||||
|
<view class="uni-indexed-list__item-container" @click="onClick(idx, index)">
|
||||||
|
<view class="uni-indexed-list__item-border" :class="{'uni-indexed-list__item-border--last':index===list.items.length-1}">
|
||||||
|
<view v-if="showSelect" style="margin-right: 20rpx;">
|
||||||
|
<uni-icons :type="item.checked ? 'checkbox-filled' : 'circle'" :color="item.checked ? '#007aff' : '#C0C0C0'" size="24" />
|
||||||
|
</view>
|
||||||
|
<text class="uni-indexed-list__item-content">{{ item.name }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'UniIndexedList',
|
||||||
|
emits:['itemClick'],
|
||||||
|
props: {
|
||||||
|
loaded: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
idx: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
type: Object,
|
||||||
|
default () {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showSelect: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onClick(idx, index) {
|
||||||
|
this.$emit("itemClick", {
|
||||||
|
idx,
|
||||||
|
index
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.uni-indexed-list__list {
|
||||||
|
background-color: $uni-bg-color;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
border-top-style: solid;
|
||||||
|
border-top-width: 1px;
|
||||||
|
border-top-color: #DEDEDE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-indexed-list__item {
|
||||||
|
font-size: 14px;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex: 1;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-indexed-list__item-container {
|
||||||
|
padding-left: 15px;
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: pointer;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-indexed-list__item-border {
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
height: 50px;
|
||||||
|
padding: 25px;
|
||||||
|
padding-left: 0;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
border-bottom-color: #DEDEDE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-indexed-list__item-border--last {
|
||||||
|
border-bottom-width: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-indexed-list__item-content {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #191919;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-indexed-list {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-indexed-list__title-wrapper {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
/* #endif */
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-indexed-list__title {
|
||||||
|
padding: 6px 12px;
|
||||||
|
line-height: 24px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,367 @@
|
|||||||
|
<template>
|
||||||
|
<view class="uni-indexed-list" ref="list" id="list">
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
<list class="uni-indexed-list__scroll" scrollable="true" show-scrollbar="false">
|
||||||
|
<cell v-for="(list, idx) in lists" :key="idx" :ref="'uni-indexed-list-' + idx">
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifndef APP-NVUE -->
|
||||||
|
<scroll-view :scroll-into-view="scrollViewId" class="uni-indexed-list__scroll" scroll-y>
|
||||||
|
<view v-for="(list, idx) in lists" :key="idx" :id="'uni-indexed-list-' + idx">
|
||||||
|
<!-- #endif -->
|
||||||
|
<indexed-list-item :list="list" :loaded="loaded" :idx="idx" :showSelect="showSelect"
|
||||||
|
@itemClick="onClick"></indexed-list-item>
|
||||||
|
<!-- #ifndef APP-NVUE -->
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
</cell>
|
||||||
|
</list>
|
||||||
|
<!-- #endif -->
|
||||||
|
<view class="uni-indexed-list__menu" @touchstart="touchStart" @touchmove.stop.prevent="touchMove"
|
||||||
|
@touchend="touchEnd" @mousedown.stop="mousedown" @mousemove.stop.prevent="mousemove"
|
||||||
|
@mouseleave.stop="mouseleave">
|
||||||
|
<view v-for="(list, key) in lists" :key="key" class="uni-indexed-list__menu-item"
|
||||||
|
:class="touchmoveIndex == key ? 'uni-indexed-list__menu--active' : ''">
|
||||||
|
<text class="uni-indexed-list__menu-text"
|
||||||
|
:class="touchmoveIndex == key ? 'uni-indexed-list__menu-text--active' : ''">{{ list.key }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="touchmove" class="uni-indexed-list__alert-wrapper">
|
||||||
|
<text class="uni-indexed-list__alert">{{ lists[touchmoveIndex].key }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import indexedListItem from './uni-indexed-list-item.vue'
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
const dom = weex.requireModule('dom');
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
function throttle(func, delay) {
|
||||||
|
var prev = Date.now();
|
||||||
|
return function() {
|
||||||
|
var context = this;
|
||||||
|
var args = arguments;
|
||||||
|
var now = Date.now();
|
||||||
|
if (now - prev >= delay) {
|
||||||
|
func.apply(context, args);
|
||||||
|
prev = Date.now();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function touchMove(e) {
|
||||||
|
let pageY = e.touches[0].pageY
|
||||||
|
let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
|
||||||
|
if (this.touchmoveIndex === index) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
let item = this.lists[index]
|
||||||
|
if (item) {
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
this.scrollViewId = 'uni-indexed-list-' + index
|
||||||
|
this.touchmoveIndex = index
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
dom.scrollToElement(this.$refs['uni-indexed-list-' + index][0], {
|
||||||
|
animated: false
|
||||||
|
})
|
||||||
|
this.touchmoveIndex = index
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const throttleTouchMove = throttle(touchMove, 40)
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
/**
|
||||||
|
* IndexedList 索引列表
|
||||||
|
* @description 用于展示索引列表
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=375
|
||||||
|
* @property {Boolean} showSelect = [true|false] 展示模式
|
||||||
|
* @value true 展示模式
|
||||||
|
* @value false 选择模式
|
||||||
|
* @property {Object} options 索引列表需要的数据对象
|
||||||
|
* @event {Function} click 点击列表事件 ，返回当前选择项的事件对象
|
||||||
|
* @example <uni-indexed-list options="" showSelect="false" @click=""></uni-indexed-list>
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'UniIndexedList',
|
||||||
|
components: {
|
||||||
|
indexedListItem
|
||||||
|
},
|
||||||
|
emits: ['click'],
|
||||||
|
props: {
|
||||||
|
options: {
|
||||||
|
type: Array,
|
||||||
|
default () {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showSelect: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
lists: [],
|
||||||
|
winHeight: 0,
|
||||||
|
itemHeight: 0,
|
||||||
|
winOffsetY: 0,
|
||||||
|
touchmove: false,
|
||||||
|
touchmoveIndex: -1,
|
||||||
|
scrollViewId: '',
|
||||||
|
touchmovable: true,
|
||||||
|
loaded: false,
|
||||||
|
isPC: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
options: {
|
||||||
|
handler: function() {
|
||||||
|
this.setList()
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// #ifdef H5
|
||||||
|
this.isPC = this.IsPC()
|
||||||
|
// #endif
|
||||||
|
setTimeout(() => {
|
||||||
|
this.setList()
|
||||||
|
}, 50)
|
||||||
|
setTimeout(() => {
|
||||||
|
this.loaded = true
|
||||||
|
}, 300);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setList() {
|
||||||
|
let index = 0;
|
||||||
|
this.lists = []
|
||||||
|
this.options.forEach((value, index) => {
|
||||||
|
if (value.data.length === 0) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
let indexBefore = index
|
||||||
|
let items = value.data.map(item => {
|
||||||
|
let obj = {}
|
||||||
|
obj['key'] = value.letter
|
||||||
|
obj['name'] = item
|
||||||
|
obj['itemIndex'] = index
|
||||||
|
index++
|
||||||
|
obj.checked = item.checked ? item.checked : false
|
||||||
|
return obj
|
||||||
|
})
|
||||||
|
this.lists.push({
|
||||||
|
title: value.letter,
|
||||||
|
key: value.letter,
|
||||||
|
items: items,
|
||||||
|
itemIndex: indexBefore
|
||||||
|
})
|
||||||
|
})
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
uni.createSelectorQuery()
|
||||||
|
.in(this)
|
||||||
|
.select('#list')
|
||||||
|
.boundingClientRect()
|
||||||
|
.exec(ret => {
|
||||||
|
this.winOffsetY = ret[0].top
|
||||||
|
this.winHeight = ret[0].height
|
||||||
|
this.itemHeight = this.winHeight / this.lists.length
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
dom.getComponentRect(this.$refs['list'], (res) => {
|
||||||
|
this.winOffsetY = res.size.top
|
||||||
|
this.winHeight = res.size.height
|
||||||
|
this.itemHeight = this.winHeight / this.lists.length
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
touchStart(e) {
|
||||||
|
this.touchmove = true
|
||||||
|
let pageY = this.isPC ? e.pageY : e.touches[0].pageY
|
||||||
|
let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
|
||||||
|
let item = this.lists[index]
|
||||||
|
if (item) {
|
||||||
|
this.scrollViewId = 'uni-indexed-list-' + index
|
||||||
|
this.touchmoveIndex = index
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
dom.scrollToElement(this.$refs['uni-indexed-list-' + index][0], {
|
||||||
|
animated: false
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
},
|
||||||
|
touchMove(e) {
|
||||||
|
// #ifndef APP-PLUS
|
||||||
|
let pageY = this.isPC ? e.pageY : e.touches[0].pageY
|
||||||
|
let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
|
||||||
|
if (this.touchmoveIndex === index) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
let item = this.lists[index]
|
||||||
|
if (item) {
|
||||||
|
this.scrollViewId = 'uni-indexed-list-' + index
|
||||||
|
this.touchmoveIndex = index
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
throttleTouchMove.call(this, e)
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
touchEnd() {
|
||||||
|
this.touchmove = false
|
||||||
|
// this.touchmoveIndex = -1
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 兼容 PC @tian
|
||||||
|
*/
|
||||||
|
|
||||||
|
mousedown(e) {
|
||||||
|
if (!this.isPC) return
|
||||||
|
this.touchStart(e)
|
||||||
|
},
|
||||||
|
mousemove(e) {
|
||||||
|
if (!this.isPC) return
|
||||||
|
this.touchMove(e)
|
||||||
|
},
|
||||||
|
mouseleave(e) {
|
||||||
|
if (!this.isPC) return
|
||||||
|
this.touchEnd(e)
|
||||||
|
},
|
||||||
|
|
||||||
|
// #ifdef H5
|
||||||
|
IsPC() {
|
||||||
|
var userAgentInfo = navigator.userAgent;
|
||||||
|
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
|
||||||
|
var flag = true;
|
||||||
|
for (let v = 0; v < Agents.length - 1; v++) {
|
||||||
|
if (userAgentInfo.indexOf(Agents[v]) > 0) {
|
||||||
|
flag = false;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return flag;
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
|
||||||
|
onClick(e) {
|
||||||
|
let {
|
||||||
|
idx,
|
||||||
|
index
|
||||||
|
} = e
|
||||||
|
let obj = {}
|
||||||
|
for (let key in this.lists[idx].items[index]) {
|
||||||
|
obj[key] = this.lists[idx].items[index][key]
|
||||||
|
}
|
||||||
|
let select = []
|
||||||
|
if (this.showSelect) {
|
||||||
|
this.lists[idx].items[index].checked = !this.lists[idx].items[index].checked
|
||||||
|
this.lists.forEach((value, idx) => {
|
||||||
|
value.items.forEach((item, index) => {
|
||||||
|
if (item.checked) {
|
||||||
|
let obj = {}
|
||||||
|
for (let key in this.lists[idx].items[index]) {
|
||||||
|
obj[key] = this.lists[idx].items[index][key]
|
||||||
|
}
|
||||||
|
select.push(obj)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.$emit('click', {
|
||||||
|
item: obj,
|
||||||
|
select: select
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.uni-indexed-list {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-indexed-list__scroll {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-indexed-list__menu {
|
||||||
|
width: 24px;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-indexed-list__menu-item {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex: 1;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: pointer;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-indexed-list__menu-text {
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-indexed-list__menu--active {
|
||||||
|
// background-color: rgb(200, 200, 200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-indexed-list__menu--active {}
|
||||||
|
|
||||||
|
.uni-indexed-list__menu-text--active {
|
||||||
|
border-radius: 16px;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
line-height: 16px;
|
||||||
|
background-color: #007aff;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-indexed-list__alert-wrapper {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-indexed-list__alert {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 80px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 80px;
|
||||||
|
font-size: 35px;
|
||||||
|
color: #fff;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
89
uni_modules/uni-indexed-list/package.json
Normal file
89
uni_modules/uni-indexed-list/package.json
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
{
|
||||||
|
"id": "uni-indexed-list",
|
||||||
|
"displayName": "uni-indexed-list 索引列表",
|
||||||
|
"version": "1.2.1",
|
||||||
|
"description": "索引列表组件，右侧带索引的列表，方便快速定位到具体内容，通常用于城市/机场选择等场景",
|
||||||
|
"keywords": [
|
||||||
|
"uni-ui",
|
||||||
|
"索引列表",
|
||||||
|
"索引",
|
||||||
|
"列表"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": ""
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"前端组件",
|
||||||
|
"通用组件"
|
||||||
|
],
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [
|
||||||
|
"uni-scss",
|
||||||
|
"uni-icons"
|
||||||
|
],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
11
uni_modules/uni-indexed-list/readme.md
Normal file
11
uni_modules/uni-indexed-list/readme.md
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
|
||||||
|
|
||||||
|
## IndexedList 索引列表
|
||||||
|
> **组件名：uni-indexed-list**
|
||||||
|
> 代码块： `uIndexedList`
|
||||||
|
|
||||||
|
|
||||||
|
用于展示索引列表。
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-indexed-list)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
Reference in New Issue
Block a user