wxc
7 months ago
18 changed files with 393 additions and 297 deletions
@ -1,129 +1,2 @@ |
|||||||
# hello-uniapp |
# supervision-uniapp |
||||||
|
移动督察APP |
||||||
`uni-app`框架示例，一套代码，同时发行到iOS、Android、H5、小程序等多个平台，请使用手机在下方扫码快速体验`uni-app`的强大功能。[官方文档](https://uniapp.dcloud.net.cn/) |
|
||||||
|
|
||||||
## 快速上手 |
|
||||||
hello-uniapp 示例工程可以通过两种方式创建， 一种是 HBuilderX, 配套 IDE，集成开发；另一种是 CLI 创建；推荐前者。 |
|
||||||
### 通过 HBuilderX 可视化界面创建（推荐） |
|
||||||
|
|
||||||
可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。 |
|
||||||
|
|
||||||
开始之前，开发者需先下载安装如下工具： |
|
||||||
|
|
||||||
- HBuilderX：[官方IDE下载地址](https://www.dcloud.io/hbuilderx.html) |
|
||||||
|
|
||||||
HBuilderX是通用的前端开发工具，但为`uni-app`做了特别强化，请下载App开发版。 |
|
||||||
|
|
||||||
由于截图在 github 不便浏览，参见官方文档 [HBuilderX 可视化界面创建](https://uniapp.dcloud.net.cn/quickstart?id=_1-%e9%80%9a%e8%bf%87-hbuilderx-%e5%8f%af%e8%a7%86%e5%8c%96%e7%95%8c%e9%9d%a2) |
|
||||||
|
|
||||||
### 通过 vue-cli 创建 |
|
||||||
|
|
||||||
``` |
|
||||||
npm install -g @vue/cli |
|
||||||
``` |
|
||||||
|
|
||||||
#### 创建uni-app |
|
||||||
|
|
||||||
**使用正式版**（对应HBuilderX最新正式版） |
|
||||||
|
|
||||||
``` |
|
||||||
vue create -p dcloudio/uni-preset-vue my-project |
|
||||||
``` |
|
||||||
|
|
||||||
**使用alpha版**（对应HBuilderX最新alpha版） |
|
||||||
|
|
||||||
``` |
|
||||||
vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project |
|
||||||
``` |
|
||||||
|
|
||||||
此时，会提示选择项目模板，选择 `hello uni-app` 项目模板，如下所示： |
|
||||||
|
|
||||||
<div> |
|
||||||
<img src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/h5-cli-01.png" width="300"> |
|
||||||
</div> |
|
||||||
|
|
||||||
创建好后，进入项目目录 |
|
||||||
``` |
|
||||||
cd my-project |
|
||||||
``` |
|
||||||
|
|
||||||
执行该命令运行到 h5 端 |
|
||||||
``` |
|
||||||
npm run dev:h5 |
|
||||||
``` |
|
||||||
|
|
||||||
欢迎提 issues，推荐到[官方社区](https://ask.dcloud.net.cn/explore/)提问。 |
|
||||||
|
|
||||||
## 扫码体验 |
|
||||||
|
|
||||||
<div class="quick"> |
|
||||||
<p>一套代码编到10个平台，这不是梦想。眼见为实，扫描10个二维码，亲自体验最全面的跨平台效果！</p> |
|
||||||
<div style="display: flex;"> |
|
||||||
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view"> |
|
||||||
<div class="barcode-img-box"> |
|
||||||
<img src="https://web-assets.dcloud.net.cn/unidoc/zh/uni-android.png" width="160" /> |
|
||||||
</div> |
|
||||||
<b>Android版</b> |
|
||||||
</a> |
|
||||||
<a href="https://itunes.apple.com/cn/app/hello-uni-app/id1417078253?mt=8" target="_blank" class="clear-style barcode-view"> |
|
||||||
<div class="barcode-img-box"> |
|
||||||
<img src="https://web-assets.dcloud.net.cn/unidoc/zh/uni-h5.png" width="160" /> |
|
||||||
</div> |
|
||||||
<b>iOS版</b> |
|
||||||
</a> |
|
||||||
<a href="https://hellouniapp.dcloud.net.cn/" target="_blank" class="clear-style barcode-view"> |
|
||||||
<div class="barcode-img-box"> |
|
||||||
<img src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/uni-h5-hosting-qr.png" width="160" /> |
|
||||||
</div> |
|
||||||
<b>H5版</b> |
|
||||||
</a> |
|
||||||
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view"> |
|
||||||
<div class="barcode-img-box"><img src="//img.cdn.aliyun.dcloud.net.cn/guide/uniapp/gh_33446d7f7a26_430.jpg" width="160" /></div> |
|
||||||
<b>微信小程序版</b> |
|
||||||
</a> |
|
||||||
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view"> |
|
||||||
<div class="barcode-img-box"><img src="https://web-assets.dcloud.net.cn/unidoc/zh/alipay1.png" width="160" /></div> |
|
||||||
<b>支付宝小程序版</b> |
|
||||||
</a> |
|
||||||
</div> |
|
||||||
<div class="flex-img-group-view" style="margin-top: 20px;"> |
|
||||||
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view"> |
|
||||||
<div class="barcode-img-box"><img src="https://web-assets.dcloud.net.cn/unidoc/zh/baidu-uniapp.png" width="160" /></div> |
|
||||||
<b>百度小程序版</b> |
|
||||||
</a> |
|
||||||
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view"> |
|
||||||
<div class="barcode-img-box"> |
|
||||||
<img src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/mp-toutiao.png" width="160" /> |
|
||||||
</div> |
|
||||||
<b>字节跳动小程序版</b> |
|
||||||
</a> |
|
||||||
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view"> |
|
||||||
<div class="barcode-img-box"> |
|
||||||
<img src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/hello-uni-qq.png" width="160" /> |
|
||||||
</div> |
|
||||||
<b>QQ小程序版</b> |
|
||||||
</a> |
|
||||||
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view"> |
|
||||||
<div class="barcode-img-box"> |
|
||||||
<img src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/hello-uni-qa-union.png" width="160" /> |
|
||||||
</div> |
|
||||||
<b>快应用</b> |
|
||||||
</a> |
|
||||||
<a href="https://so.mp.360.cn/mp.html?appid=qh4j181qqtru354st6" target="_blank" class="clear-style barcode-view"> |
|
||||||
<div class="barcode-img-box"> |
|
||||||
<img src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/hello-uni-mp-360-qr.png" width="160" /> |
|
||||||
</div> |
|
||||||
<b>360小程序</b> |
|
||||||
</a> |
|
||||||
</div> |
|
||||||
<p> |
|
||||||
<em>注：某些平台不能提交简单demo，故补充了一些其他功能；hello uni-app示例代码可从[github](https://github.com/dcloudio/hello-uniapp)获取</em></br> |
|
||||||
<em>快应用仅支持 vivo 、oppo、华为</em></br> |
|
||||||
<em>360小程序仅 windows平台支持，需要在360浏览器中打开</em></br> |
|
||||||
</p> |
|
||||||
</div> |
|
||||||
|
|
||||||
`uni-app`官网文档详见[https://uniapp.dcloud.io](https://uniapp.dcloud.io) |
|
||||||
|
|
||||||
更多uni-app的模板、示例详见[插件市场](https://ext.dcloud.net.cn/) |
|
||||||
|
|
||||||
|
|||||||
@ -0,0 +1,230 @@ |
|||||||
|
<template> |
||||||
|
<view class="flex search"> |
||||||
|
<view class="search-item flex justify-center" :search="searchFlag"> |
||||||
|
<view class="search-item-conent"> |
||||||
|
<uni-easyinput prefixIcon="search" type="text" placeholder="搜索" :inputBorder="false" v-model="query.thingDesc" @focus="searchFlag = true" /> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="search-item flex justify-center" v-if="!searchFlag" @tap="showPopup"> |
||||||
|
<view :class="filterFlag ? 'search-item-conent active': 'search-item-conent'"> |
||||||
|
<uni-icons customPrefix="customicons" type="filter" size="20" color="#666" /> |
||||||
|
<view>筛选</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view v-else> |
||||||
|
<view class="cancel-btn" @tap="cancleSearch">取消</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view> |
||||||
|
<view class="flex gap-16 task-item card" v-for="item in todos" @tap="open(item)" > |
||||||
|
<view> |
||||||
|
<image src="../../static/icon/ic_question.png" style="width: 44px; height: 44px"></image> |
||||||
|
</view> |
||||||
|
<view style="width: calc(100% - 60px)"> |
||||||
|
<view class="flex justify-between header"> |
||||||
|
<view class="title">{{ item.problemSources }}</view> |
||||||
|
<view class="date">{{ item.createTime }}</view> |
||||||
|
</view> |
||||||
|
<view> |
||||||
|
<view class="row"> |
||||||
|
<view class="col col-24"> |
||||||
|
<view class="label">业务类别：</view> |
||||||
|
<view class="content">{{ item.businessTypeName }}</view> |
||||||
|
</view> |
||||||
|
<view class="col col-24"> |
||||||
|
<view class="label">涉及单位：</view> |
||||||
|
<view class="content">{{ item.involveDepartName }}</view> |
||||||
|
</view> |
||||||
|
<view class="col col-24"> |
||||||
|
<view class="label">问题内容：</view> |
||||||
|
<view class="content">{{ item.thingDesc }}</view> |
||||||
|
</view> |
||||||
|
<view class="col col-24"> |
||||||
|
<view class="label">涉嫌问题：</view> |
||||||
|
<view class="content">{{ getDictLabelByArray(suspectProblems, item.involveProblem) || '/' }}</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view style="color: #555;" v-if="item.flowKey === 'completed'">已办结</view> |
||||||
|
<view style="color: #FF0000;" v-else>{{ getFlowLable(item.flowKey) }}</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
<empty v-if="todos.length === 0" /> |
||||||
|
</view> |
||||||
|
|
||||||
|
<uni-popup ref="filterPopupRef" type="top"> |
||||||
|
<view class="popup-container"> |
||||||
|
<view class="popup-header"> |
||||||
|
<view>全部筛选</view> |
||||||
|
<uni-icons type="closeempty" class="close-btn" @tap="closePopup"></uni-icons> |
||||||
|
</view> |
||||||
|
<view class="popup-body"> |
||||||
|
<view class="filter-container"> |
||||||
|
<view class="filter-label mt-10">业务类型</view> |
||||||
|
<filter-radio :data="businessTypes" v-model="query.businessTypeCode" :prop="{text: 'dictLabel', value: 'dictValue'}" @change="search" /> |
||||||
|
<view class="filter-label mt-10">办理状态</view> |
||||||
|
<filter-radio :data="processingStatus" v-model="query.processingStatus" :prop="{text: 'dictLabel', value: 'dictValue'}" @change="search" /> |
||||||
|
|
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="footer col-24 flex gap-8"> |
||||||
|
<button class="col-12" @tap="reset">重置</button> |
||||||
|
<button type="primary" @tap="handleSearch" class="col-12">完成</button> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</uni-popup> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import { listNegativeTodo } from '@/api/negative' |
||||||
|
import { getDictLabelByArray } from '@/common/util' |
||||||
|
import { getDictOptions } from '@/common/dict' |
||||||
|
|
||||||
|
let _this; |
||||||
|
let oldTasks = [] |
||||||
|
export default { |
||||||
|
inheritAttrs: false, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
tabOptions: [ |
||||||
|
{ |
||||||
|
text: '我的待办（0）', |
||||||
|
value: 'todo' |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: '我的已办（0）', |
||||||
|
value: 'done' |
||||||
|
} |
||||||
|
], |
||||||
|
query: { |
||||||
|
size: 100, |
||||||
|
current: 1 |
||||||
|
}, |
||||||
|
todos: [], |
||||||
|
searchFlag: false, |
||||||
|
filterFlag: false, |
||||||
|
loading: false |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
setup() { |
||||||
|
const suspectProblems = getDictOptions('suspectProblem'); |
||||||
|
const processingStatus = getDictOptions('processingStatus'); |
||||||
|
const businessTypes = getDictOptions('businessType') |
||||||
|
return { |
||||||
|
suspectProblems, |
||||||
|
processingStatus, |
||||||
|
businessTypes, |
||||||
|
getDictLabelByArray |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
searchFlag(val) { |
||||||
|
if (val) { |
||||||
|
oldTasks = this.todos; |
||||||
|
this.todos = [] |
||||||
|
} else { |
||||||
|
this.todos = oldTasks |
||||||
|
} |
||||||
|
}, |
||||||
|
'query.thingDesc': function(val) { |
||||||
|
if (_this.searchFlag && val) { |
||||||
|
_this.getList() |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
onLoad() { |
||||||
|
_this = this; |
||||||
|
}, |
||||||
|
onShow() { |
||||||
|
this.getList() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
open(item) { |
||||||
|
uni.navigateTo({ |
||||||
|
url: `/pages/negative/action?id=${item.negativeId}&workId=${item.workId}` |
||||||
|
}); |
||||||
|
}, |
||||||
|
getFlowLable(flowKey) { |
||||||
|
const signFlows = ['second_sign'] |
||||||
|
if (signFlows.indexOf(flowKey) > -1) { |
||||||
|
return '待签收' |
||||||
|
} |
||||||
|
const distributeFlows = ['first_distribute', 'second_distribute'] |
||||||
|
if (distributeFlows.indexOf(flowKey) > -1) { |
||||||
|
return '待下发' |
||||||
|
} |
||||||
|
const verifyFlows = ['verify'] |
||||||
|
if (verifyFlows.indexOf(flowKey) > -1) { |
||||||
|
return '核查办理' |
||||||
|
} |
||||||
|
const approveFlows = ['second_approve'] |
||||||
|
if (approveFlows.indexOf(flowKey) > -1) { |
||||||
|
return '待审批' |
||||||
|
} |
||||||
|
return '' |
||||||
|
}, |
||||||
|
async getList() { |
||||||
|
this.loading = true |
||||||
|
uni.showLoading({ |
||||||
|
title: '数据加载中' |
||||||
|
}); |
||||||
|
listNegativeTodo(this.query).then(data => { |
||||||
|
this.todos = data.records |
||||||
|
this.loading = false |
||||||
|
uni.hideLoading(); |
||||||
|
}) |
||||||
|
}, |
||||||
|
cancleSearch() { |
||||||
|
this.searchFlag = false |
||||||
|
this.query.taskName = '' |
||||||
|
}, |
||||||
|
showPopup() { |
||||||
|
this.$refs.filterPopupRef.open() |
||||||
|
}, |
||||||
|
closePopup() { |
||||||
|
this.$refs.filterPopupRef.close() |
||||||
|
}, |
||||||
|
search() { |
||||||
|
if (this.query.businessTypeCode || this.query.processingStatus) { |
||||||
|
this.filterFlag = true |
||||||
|
} else { |
||||||
|
this.filterFlag = false |
||||||
|
} |
||||||
|
this.getList() |
||||||
|
}, |
||||||
|
handleSearch() { |
||||||
|
this.search() |
||||||
|
this.closePopup() |
||||||
|
}, |
||||||
|
reset() { |
||||||
|
this.filterFlag = false |
||||||
|
this.query = { |
||||||
|
size: 100, |
||||||
|
current: 1 |
||||||
|
} |
||||||
|
this.getList() |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.task-item { |
||||||
|
.header { |
||||||
|
margin-bottom: 12rpx; |
||||||
|
|
||||||
|
.title { |
||||||
|
font-size: 28rpx; |
||||||
|
line-height: 40rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.date { |
||||||
|
font-size: 24rpx; |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
Loading…
Reference in new issue