wxc
5 months ago
18 changed files with 393 additions and 297 deletions
@ -1,129 +1,2 @@
|
||||
# hello-uniapp |
||||
|
||||
`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/) |
||||
|
||||
# supervision-uniapp |
||||
移动督察APP |
||||
|
||||
@ -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