Commit cedbc6e4 by zhongqm

init

parents
Showing with 4875 additions and 0 deletions
{ // launch.json 配置了启动调试时相关设置,configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
// launchtype项可配置值为local或remote, local代表前端连本地云函数,remote代表前端连云端云函数
"version": "0.0",
"configurations": [{
"default" :
{
"launchtype" : "local"
},
"mp-weixin" :
{
"launchtype" : "local"
},
"type" : "uniCloud"
}
]
}
// prettier 规则文档
// https://prettier.io/docs/en/options.html#print-width
module.exports = {
printWidth: 900,
tabWidth: 2,
useTabs: false,
singleQuote: true,
semi: false,
endOfLine: 'auto',
trailingComma: 'none',
bracketSpacing: true,
bracketLine: false,
arrowFunctionParentheses: 'always',
jsxBracketSameLine: false
}
<script>
export default {
onLaunch: function () {},
onShow: function () {},
onHide: function () {}
}
</script>
<style lang="scss">
/*每个页面公共css */
@import '@/uni_modules/uview-ui/index.scss';
@import '@/styles/reset.scss';
@import '@/styles/layout.scss';
@import '@/styles/uview.scss';
@import '@/themes/base.scss';
@import '@/themes/theme.scss';
</style>
MIT License
Copyright (c) 2021 www.uviewui.com
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
<p align="center">
<img alt="logo" src="https://uviewui.com/common/logo.png" width="120" height="120" style="margin-bottom: 10px;">
</p>
<h3 align="center" style="margin: 30px 0 30px;font-weight: bold;font-size:40px;">uView 2.0</h3>
<h3 align="center">多平台快速开发的UI框架</h3>
[![stars](https://img.shields.io/github/stars/umicro/uView2.0?style=flat-square&logo=GitHub)](https://github.com/umicro/uView2.0)
[![forks](https://img.shields.io/github/forks/umicro/uView2.0?style=flat-square&logo=GitHub)](https://github.com/umicro/uView2.0)
[![issues](https://img.shields.io/github/issues/umicro/uView2.0?style=flat-square&logo=GitHub)](https://github.com/umicro/uView2.0/issues)
[![Website](https://img.shields.io/badge/uView-up-blue?style=flat-square)](https://uviewui.com)
[![release](https://img.shields.io/github/v/release/umicro/uView2.0?style=flat-square)](https://gitee.com/umicro/uView2.0/releases)
[![license](https://img.shields.io/github/license/umicro/uView2.0?style=flat-square)](https://en.wikipedia.org/wiki/MIT_License)
## 说明
uView UI,是[uni-app](https://uniapp.dcloud.io/)全面兼容nvue的uni-app生态框架,全面的组件和便捷的工具会让您信手拈来,如鱼得水
## [官方文档:https://uviewui.com](https://uviewui.com)
### 官方1群:1042987248(已满)
### 官方2群:249718512(已满)
### 官方3群:1129077272(已满)
### 官方4群:1084514613(已满)
### 官方5群:863820668(已满)
### 官方6群:745721078(已满)
### 官方7群:627867855(已满)
### 官方8群:496409492(已满)
### 官方9群:828504448(已满)
### 官方10群:232041042(已满)
### 官方11群:364463526(已满)
### [点击加12群交流反馈:229707069](https://jq.qq.com/?_wv=1027&k=k7L9eaoi)
## 特性
- 全面兼容nvue,原生渲染,高性能
- 兼容安卓,iOS,微信小程序,H5,QQ小程序,百度小程序,支付宝小程序,头条小程序
- 60+精选组件,功能丰富,多端兼容,让您快速集成,开箱即用
- 众多贴心的JS利器,让您飞镖在手,召之即来,百步穿杨
- 众多的常用页面和布局,让您专注逻辑,事半功倍
- 详尽的文档支持,现代化的演示效果
- 按需引入,精简打包体积
## 预览
您可以通过**微信**扫码,查看最佳的演示效果。
<br>
<br>
<img src="https://uviewui.com/common/weixin_mini_qrcode.png" width="220" height="220" >
## 链接
- [官方文档](https://www.uviewui.com/)
- [更新日志](https://www.uviewui.com/components/changelog.html)
- [升级指南](https://www.uviewui.com/components/changeGuide.html)
- [关于我们](https://www.uviewui.com/cooperation/about.html)
## 交流反馈
欢迎加入我们的QQ群交流反馈:[点此跳转](https://www.uviewui.com/components/addQQGroup.html)
## 关于PR
> 我们非常乐意接受各位的优质PR,但在此之前我希望您了解uView2.0是一个需要兼容多个平台的(小程序、h5、ios app、android app)包括nvue页面、vue页面。
> 所以希望在您修复bug并提交之前尽可能的去这些平台测试一下兼容性。最好能携带测试截图以方便审核。非常感谢!
## 安装
#### **下载地址** —— [https://ext.dcloud.net.cn/plugin?id=1593](https://ext.dcloud.net.cn/plugin?id=1593)
## 快速上手
请通过[官网安装文档](https://www.uviewui.com/components/install.html)了解更详细的内容
## 使用方法
配置easycom规则后,自动按需引入,无需`import`组件,直接引用即可。
```html
<template>
<u-button text="按钮"></u-button>
</template>
```
请通过[快速上手](https://v2.uviewui.com/components/quickstart.html)了解更详细的内容
## 捐赠uView的研发
uView文档内容和框架源码全部开源免费,如果您认为uView帮到了您的开发工作,您可以捐赠uView的研发工作,捐赠无门槛,哪怕是一杯可乐也好(相信这比打赏主播更有意义)。
<img src="https://uviewui.com/common/wechat.png" width="220" >
<img style="margin-left: 100px;" src="https://uviewui.com/common/alipay.png" width="220" >
## 版权信息
uView遵循[MIT](https://en.wikipedia.org/wiki/MIT_License)开源协议,意味着您无需支付任何费用,也无需授权,即可将uView应用到您的产品中。
File mode changed
import config from '@/config/config.js'
import request from '@/utils/request/request.js'
import config from '@/config/config.js'
import request from '@/utils/request/request.js'
export function userLoginToken(data) {
const result = request({
url: 'ma/user/' + config.appId + '/login/token',
method: 'post',
data: data
})
console.log('userLoginToken')
console.log(result)
return result
}
export function userGetMiniProgramPhone(data) {
data.appId = config.appId
data.openId = uni.getStorageSync('openId')
data.sessionKey = uni.getStorageSync('sessionKey')
return request({
url: 'ma/user/' + config.appId + '/getMiniProgramPhone',
method: 'post',
data: data,
header: {
Authorization: 'bearer ' + uni.getStorageSync('accessToken')
}
})
}
export function userGetMiniProgramUserInfo(data) {
data.appId = config.appId
data.openId = uni.getStorageSync('openId')
data.sessionKey = uni.getStorageSync('sessionKey')
return request({
url: 'ma/user/' + config.appId + '/getMiniProgramUserInfo',
method: 'post',
data: data,
header: {
Authorization: 'bearer ' + uni.getStorageSync('accessToken')
}
})
}
<template>
<view class="nav-wrap">
<view class="nav-title">
<u--image :showLoading="true" src="https://cdn.uviewui.com/uview/common/logo.png" width="70px"
height="70px" />
<view class="nav-info">
<view class="nav-info__title" @tap="jumpToWx">
<text class="nav-info__title__text">uView {{version}}</text>
<!-- #ifdef MP-WEIXIN -->
<!-- uni-app不支持text内部的text组件的tap事件,所以放到外部响应tap -->
<text class="nav-info__title__jump">查看1.x演示</text>
<!-- #endif -->
</view>
<text class="nav-slogan">多平台快速开发的UI框架</text>
</view>
</view>
<text class="nav-desc">{{desc}}</text>
</view>
</template>
<script>
export default {
props: {
desc: String,
title: String,
},
data() {
return {
version: uni.$u.config.v
}
},
methods: {
jumpToWx() {
// #ifdef MP-WEIXIN
uni.navigateToMiniProgram({
appId: 'wx3be833c4a263e0c2'
})
// #endif
}
},
}
</script>
<style lang="scss" scoped>
.nav-wrap {
padding: 15px;
position: relative;
}
.lang {
position: absolute;
top: 15px;
right: 15px;
}
.nav-title {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
.nav-info {
margin-left: 15px;
&__title {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
&__text {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
color: $u-main-color;
font-size: 25px;
font-weight: bold;
text-align: left;
}
&__jump {
font-size: 12px;
color: $u-primary;
font-weight: normal;
margin-left: 20px;
}
}
}
.logo {
width: 70px;
height: 70px;
/* #ifndef APP-NVUE */
height: auto;
/* #endif */
}
.nav-slogan {
color: $u-tips-color;
font-size: 14px;
}
.nav-desc {
margin-top: 10px;
font-size: 14px;
color: $u-content-color;
line-height: 20px;
}
</style>
// 重构日期:2022-04
const config = {
env: 'development', // prod - 生产 | development - 开发
appId: appId,
domain: '', // 域名
urlBase: '', // 请求地址
urlUpload: '', // 上传地址
urlRes: '', // 资源地址
other: {}
}
const wxConfig = __wxConfig
const appId = wxConfig.accountInfo.appId
console.log('__wxConfig', wxConfig)
switch (appId) {
// 正式环境 appId
case 'wx3221d70c396f69fb':
config.env = 'prod'
config.appId = appId
config.domain = 'https://minzhisheng.mynatapp.cc'
config.urlBase = 'http://139.159.137.113:9080/api/'
config.urlUpload = ''
config.urlRes = ''
config.other.clientId = 'oauth'
config.other.clientSecret = 'b1e34c71-3e25-4db4-9c93-2b5a0bf95fe9'
break
// 开发环境 appId
case 'wx098587f9a9a5c69f':
config.env = 'development'
config.appId = appId
config.domain = 'https://minzhisheng.mynatapp.cc'
config.urlBase = 'http://139.159.137.113:9080/api/'
config.urlUpload = ''
config.urlRes = ''
config.other.clientId = 'oauth'
config.other.clientSecret = 'b1e34c71-3e25-4db4-9c93-2b5a0bf95fe9'
break
default:
console.error('[env] appId not match')
}
uni.setStorageSync('config', config)
export default config
import Vue from 'vue'
import App from './App'
import mixin from '@/mixin/mixin.js'
import mixinShare from '@/uni_modules/uview-ui/libs/mixin/mpShare.js'
// vuex
import store from './store'
// 引入全局uView
import uView from '@/uni_modules/uview-ui'
// import mixin from './common/mixin'
Vue.prototype.$store = store
Vue.config.productionTip = false
App.mpType = 'app'
Vue.use(uView)
// #ifdef MP
Vue.mixin(mixin)
// 引入uView对小程序分享的mixin封装
Vue.mixin(mixinShare)
// #endif
const app = new Vue({
store,
...App
})
app.$mount()
{
"name" : "互联网医院",
"appid" : "",
"description" : "多平台快速开发的UI框架",
"versionName" : "1.0.0",
"versionCode" : 1,
"transformPx" : false,
"app-plus" : {
"optimization" : {
"subPackages" : true
},
"safearea" : {
"bottom" : {
"offset" : "none"
}
},
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
},
"usingComponents" : true,
"nvueCompiler" : "uni-app",
"compilerVersion" : 3,
"modules" : {
"Webview-x5" : {}
},
"distribute" : {
"android" : {
"permissions" : [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
],
"abiFilters" : [ "armeabi-v7a", "arm64-v8a" ]
},
"ios" : {
"idfa" : false
},
"sdkConfigs" : {
"ad" : {}
},
"icons" : {
"android" : {
"hdpi" : "unpackage/res/icons/72x72.png",
"xhdpi" : "unpackage/res/icons/96x96.png",
"xxhdpi" : "unpackage/res/icons/144x144.png",
"xxxhdpi" : "unpackage/res/icons/192x192.png"
},
"ios" : {
"appstore" : "unpackage/res/icons/1024x1024.png",
"ipad" : {
"app" : "unpackage/res/icons/76x76.png",
"app@2x" : "unpackage/res/icons/152x152.png",
"notification" : "unpackage/res/icons/20x20.png",
"notification@2x" : "unpackage/res/icons/40x40.png",
"proapp@2x" : "unpackage/res/icons/167x167.png",
"settings" : "unpackage/res/icons/29x29.png",
"settings@2x" : "unpackage/res/icons/58x58.png",
"spotlight" : "unpackage/res/icons/40x40.png",
"spotlight@2x" : "unpackage/res/icons/80x80.png"
},
"iphone" : {
"app@2x" : "unpackage/res/icons/120x120.png",
"app@3x" : "unpackage/res/icons/180x180.png",
"notification@2x" : "unpackage/res/icons/40x40.png",
"notification@3x" : "unpackage/res/icons/60x60.png",
"settings@2x" : "unpackage/res/icons/58x58.png",
"settings@3x" : "unpackage/res/icons/87x87.png",
"spotlight@2x" : "unpackage/res/icons/80x80.png",
"spotlight@3x" : "unpackage/res/icons/120x120.png"
}
}
}
}
},
"quickapp" : {},
"mp-weixin" : {
"appid" : "wx098587f9a9a5c69f",
"setting" : {
"urlCheck" : false,
"es6" : false,
"minified" : false,
"postcss" : false
},
"optimization" : {
"subPackages" : true
},
"usingComponents" : true
},
"mp-alipay" : {
"usingComponents" : true,
"component2" : true
},
"mp-qq" : {
"optimization" : {
"subPackages" : true
},
"appid" : "15646153"
},
"mp-baidu" : {
"usingComponents" : true,
"appid" : ""
},
"mp-toutiao" : {
"usingComponents" : true,
"appid" : ""
},
"h5" : {
"template" : "template.h5.html",
"router" : {
"mode" : "history",
"base" : ""
},
"optimization" : {
"treeShaking" : {
"enable" : false
}
},
"title" : "uView UI",
"sdkConfigs" : {
"maps" : {
"qqmap" : {
"key" : ""
}
}
},
"domain" : ""
}
}
export default {
data() {
return {
dataReady: false
}
},
methods: {
onNavbarLeftClick() {
uni.navigateBack()
}
}
}
{
"id": "uview-ui",
"scripts": {
"test": "eslint . --fix"
},
"dependencies": {},
"devDependencies": {
"eslint": "^8.2.0",
"eslint-config-airbnb": "^19.0.0"
}
}
{
"pages": [
{ "path": "pages/doctor/home", "style": {} },
{ "path": "pages/doctor/location", "style": {} },
{ "path": "pages/service/home", "style": {} },
{ "path": "pages/curriculum/home", "style": {} },
{ "path": "pages/mine/home", "style": {} },
{ "path": "pages/login/login", "style": {} }
],
"subPackages": [],
"globalStyle": {
"navigationStyle": "custom",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uView",
"navigationBarBackgroundColor": "#FFFFFF",
"backgroundColor": "#FFFFFF"
}
}
<template>
<view class="container">
<u-navbar title="找课程" :placeholder="true"></u-navbar>
<view class="main">
<view>
<u--image width="750rpx" height="130rpx" :src="require('@/assets/doctor-help.png')"></u--image>
</view>
<view class="flex row content-between items-center mt30">
<view class="drug card flex content-center items-center">
<text>急速配药</text>
</view>
<view class="flex column content-between items-center">
<view class="consultation card">
<text>图文问诊</text>
</view>
<view class="prescription card">
<text>复诊续方</text>
</view>
</view>
</view>
<view class="mt30">
<u--image width="750rpx" height="160rpx" :src="require('@/assets/doctor-propaganda.png')"></u--image>
</view>
<view class="menu mt30">
<u--image width="750rpx" height="310rpx" :src="require('@/assets/doctor-menu.png')"></u--image>
</view>
<!-- 平台优选 -->
<view class="rcommd card mt30">
<view class="flex row content-between items-center">
<text>视频课程</text>
<view class="flex items-center">
<text class="font-20">查看更多</text>
<u-icon name="arrow-right" size="20" color="#c2ced8"></u-icon>
</view>
</view>
<view class="mt30">
<view class="roll-list-short roll-list flex row content-start">
<template v-for="(item, index) in rcommdList">
<view class="roll-item" :key="index"> </view>
</template>
<view class="roll-item-last"></view>
</view>
</view>
</view>
<!-- 找医院、找医生 -->
<view class="rcommd card mt30">
<view class="flex row content-between items-center">
<text>健康资讯</text>
<view class="flex items-center">
<text class="font-20">查看更多</text>
<u-icon name="arrow-right" size="20" color="#c2ced8"></u-icon>
</view>
</view>
<view class="tabs-box">
<u-tabs :list="tabList" :scrollable="true"></u-tabs>
</view>
<view class="mt30">
<view class="roll-list-short roll-list flex row content-start">
<template v-for="(item, index) in rcommdList">
<view class="roll-item" :key="index"> </view>
</template>
<view class="roll-item-last"></view>
</view>
</view>
</view>
</view>
<u-tabbar value="curriculum" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
<u-tabbar-item text="找医生" name="doctor" icon="home" @click="tabbarItem"></u-tabbar-item>
<u-tabbar-item text="找服务" name="service" icon="photo" @click="tabbarItem"></u-tabbar-item>
<u-tabbar-item text="找课程" name="curriculum" icon="play-right" @click="tabbarItem"></u-tabbar-item>
<u-tabbar-item text="个人中心" name="mine" icon="account" @click="tabbarItem"></u-tabbar-item>
</u-tabbar>
</view>
</template>
<script>
export default {
data() {
return {
rcommdList: [1, 2, 3, 4, 5, 6, 7, 8],
tabList: [{ name: '全部' }, { name: '资讯' }, { name: '保健' }, { name: '女性健康' }, { name: '儿童' }, { name: '产后' }, { name: '其他' }]
}
},
onShow() {},
methods: {
tabbarItem(itemName) {
console.log(itemName)
uni.navigateTo({ url: '/pages/' + itemName + '/home' })
}
}
}
</script>
<style lang="scss" scoped>
.container {
background: #004bb9;
}
.search-box {
width: 750rpx;
padding: 30rpx;
}
.search-input {
width: 600rpx;
}
.main {
padding: 30rpx 0 0 0;
border-radius: 30rpx 30rpx 0 0;
background: #f5f5f9;
}
.rcommd {
width: 750rpx;
padding: 30rpx;
background: #ffffff;
}
.tabs-box {
max-width: 750rpx;
}
.roll-list {
width: 750rpx;
overflow-x: scroll;
}
.roll-item {
position: relative;
display: inline-block;
min-width: 200rpx;
height: 200rpx;
margin: 0 20rpx 0 0;
border-radius: 10rpx;
overflow: hidden;
background: #808080;
box-shadow: 0 16rpx 20rpx 0 rgba(0, 0, 0, 0.05);
}
.roll-item-last {
min-width: 1px;
margin: 0 0 0 -1px;
}
</style>
<template>
<view class="container">
<u-navbar title="医生主页" :placeholder="true"></u-navbar>
<view class="main"> </view>
</view>
</template>
<script>
export default {
data() {
return {}
},
onShow() {},
methods: {
tabbarItem(itemName) {
console.log(itemName)
uni.navigateTo({ url: '/pages/' + itemName + '/home' })
}
}
}
</script>
<style lang="scss" scoped></style>
<template>
<view class="container">
<u-navbar title="医生主页" :placeholder="true"></u-navbar>
<view class="main"> </view>
</view>
</template>
<script>
export default {
data() {
return {}
},
onShow() {},
methods: {
tabbarItem(itemName) {
console.log(itemName)
uni.navigateTo({ url: '/pages/' + itemName + '/home' })
}
}
}
</script>
<style lang="scss" scoped></style>
<template>
<view class="container">
<u-navbar title="医生主页" :placeholder="true"></u-navbar>
<view class="main"> </view>
</view>
</template>
<script>
export default {
data() {
return {}
},
onShow() {},
methods: {
tabbarItem(itemName) {
console.log(itemName)
uni.navigateTo({ url: '/pages/' + itemName + '/home' })
}
}
}
</script>
<style lang="scss" scoped></style>
<template>
<view class="container">
<u-navbar title="医生主页" :placeholder="true"></u-navbar>
<view class="main"> </view>
</view>
</template>
<script>
export default {
data() {
return {}
},
onShow() {},
methods: {
tabbarItem(itemName) {
console.log(itemName)
uni.navigateTo({ url: '/pages/' + itemName + '/home' })
}
}
}
</script>
<style lang="scss" scoped></style>
<template>
<view class="container">
<u-navbar title="医生主页" :placeholder="true"></u-navbar>
<view class="main"> </view>
</view>
</template>
<script>
export default {
data() {
return {}
},
onShow() {},
methods: {
tabbarItem(itemName) {
console.log(itemName)
uni.navigateTo({ url: '/pages/' + itemName + '/home' })
}
}
}
</script>
<style lang="scss" scoped></style>
<template>
<view class="container">
<u-navbar title="医生主页" :placeholder="true"></u-navbar>
<view class="main"> </view>
</view>
</template>
<script>
export default {
data() {
return {}
},
onShow() {},
methods: {
tabbarItem(itemName) {
console.log(itemName)
uni.navigateTo({ url: '/pages/' + itemName + '/home' })
}
}
}
</script>
<style lang="scss" scoped></style>
<template>
<view class="container">
<u-navbar title="医生主页" :placeholder="true"></u-navbar>
<view class="main"> </view>
</view>
</template>
<script>
export default {
data() {
return {}
},
onShow() {},
methods: {
tabbarItem(itemName) {
console.log(itemName)
uni.navigateTo({ url: '/pages/' + itemName + '/home' })
}
}
}
</script>
<style lang="scss" scoped></style>
<template>
<view class="container">
<u-navbar title="医生主页" :placeholder="true"></u-navbar>
<view class="main"> </view>
</view>
</template>
<script>
export default {
data() {
return {}
},
onShow() {},
methods: {
tabbarItem(itemName) {
console.log(itemName)
uni.navigateTo({ url: '/pages/' + itemName + '/home' })
}
}
}
</script>
<style lang="scss" scoped></style>
<template>
<view class="container">
<u-navbar title="医生主页" :placeholder="true"></u-navbar>
<view class="main"> </view>
</view>
</template>
<script>
export default {
data() {
return {}
},
onShow() {},
methods: {
tabbarItem(itemName) {
console.log(itemName)
uni.navigateTo({ url: '/pages/' + itemName + '/home' })
}
}
}
</script>
<style lang="scss" scoped></style>
<template>
<view class="container">
<u-navbar title="医生主页" :placeholder="true"></u-navbar>
<view class="main"> </view>
</view>
</template>
<script>
export default {
data() {
return {}
},
onShow() {},
methods: {
tabbarItem(itemName) {
console.log(itemName)
uni.navigateTo({ url: '/pages/' + itemName + '/home' })
}
}
}
</script>
<style lang="scss" scoped></style>
<template>
<view class="container">
<u-navbar title="找医生" :placeholder="true"></u-navbar>
<!-- 搜索 -->
<view class="search-box flex row content-center">
<view class="search-input flex row items-center">
<u-search v-model="search.text" placeholder="搜医院、医生、科室、产品" actionText="搜索" :showAction="false" bgColor="#ffffff"></u-search>
</view>
<u-icon name="chat" size="40" color="#ffffff" @click="toLocation"></u-icon>
</view>
<view class="main">
<view>
<u--image width="750rpx" height="130rpx" :src="require('@/assets/doctor-help.png')"></u--image>
</view>
<view class="flex row content-between items-center mt30">
<view class="drug card flex content-center items-center">
<text>急速配药</text>
</view>
<view class="flex column content-between items-center">
<view class="consultation card">
<text>图文问诊</text>
</view>
<view class="prescription card">
<text>复诊续方</text>
</view>
</view>
</view>
<view class="mt30">
<u--image width="750rpx" height="160rpx" :src="require('@/assets/doctor-propaganda.png')"></u--image>
</view>
<view class="menu mt30">
<u--image width="750rpx" height="310rpx" :src="require('@/assets/doctor-menu.png')"></u--image>
</view>
<!-- 平台优选 -->
<view class="rcommd card mt30">
<view class="flex row content-between items-center">
<text>平台优选</text>
<view class="flex items-center">
<text class="font-20">查看更多</text>
<u-icon name="arrow-right" size="20" color="#c2ced8"></u-icon>
</view>
</view>
<view class="mt30">
<view class="roll-list-short roll-list flex row content-start">
<template v-for="(item, index) in rcommdList">
<view class="roll-item" :key="index"> </view>
</template>
<view class="roll-item-last"></view>
</view>
</view>
</view>
<!-- 找医院、找医生 -->
<view class="rcommd card mt30">
<view class="flex row content-between items-center">
<u-tabs :list="[{ name: '找医院' }, { name: '找医生' }]"></u-tabs>
<view class="flex items-center">
<text class="font-20">查看更多</text>
<u-icon name="arrow-right" size="20" color="#c2ced8"></u-icon>
</view>
</view>
<view class="mt30">
<view class="roll-list-short roll-list flex row content-start">
<template v-for="(item, index) in rcommdList">
<view class="roll-item" :key="index"> </view>
</template>
<view class="roll-item-last"></view>
</view>
</view>
</view>
</view>
<u-tabbar value="doctor" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
<u-tabbar-item text="找医生" name="doctor" icon="home" @click="tabbarItem"></u-tabbar-item>
<u-tabbar-item text="找服务" name="service" icon="photo" @click="tabbarItem"></u-tabbar-item>
<u-tabbar-item text="找课程" name="curriculum" icon="play-right" @click="tabbarItem"></u-tabbar-item>
<u-tabbar-item text="个人中心" name="mine" icon="account" @click="tabbarItem"></u-tabbar-item>
</u-tabbar>
</view>
</template>
<script>
export default {
data() {
return {
search: {
text: ''
},
rcommdList: [1, 2, 3, 4, 5, 6, 7, 8]
}
},
onShow() {},
methods: {
toLocation() {
uni.navigateTo({ url: '/pages/doctor/location' })
},
tabbarItem(itemName) {
console.log(itemName)
uni.navigateTo({ url: '/pages/' + itemName + '/home' })
}
}
}
</script>
<style lang="scss" scoped>
.container {
background: #004bb9;
}
.search-box {
width: 750rpx;
padding: 30rpx;
}
.search-input {
width: 600rpx;
}
.main {
padding: 30rpx 0 0 0;
border-radius: 30rpx 30rpx 0 0;
background: #f5f5f9;
}
.drug {
width: 330rpx;
height: 300rpx;
margin: 0 0 0 30rpx;
}
.consultation {
width: 340rpx;
height: 150rpx;
margin: 0 30rpx 30rpx 0;
}
.prescription {
width: 340rpx;
height: 150rpx;
margin: 0 30rpx 0 0;
}
.rcommd {
width: 750rpx;
padding: 30rpx;
background: #ffffff;
}
.roll-list {
width: 750rpx;
overflow-x: scroll;
}
.roll-item {
position: relative;
display: inline-block;
min-width: 200rpx;
height: 200rpx;
margin: 0 20rpx 0 0;
border-radius: 10rpx;
overflow: hidden;
background: #808080;
box-shadow: 0 16rpx 20rpx 0 rgba(0, 0, 0, 0.05);
}
.roll-item-last {
min-width: 1px;
margin: 0 0 0 -1px;
}
</style>
<template>
<view class="container">
<u-navbar title="选择所在城市" :placeholder="true"></u-navbar>
<!-- 搜索 -->
<view class="search-box flex row content-center">
<view class="search-input flex row items-center">
<u-search v-model="search.text" placeholder="搜医院、医生、科室、产品" actionText="搜索" :showAction="false" bgColor="#ffffff"></u-search>
</view>
</view>
<view class="main">
<u-index-list :index-list="indexList">
<template v-for="(item, index) in itemArr">
<u-index-anchor :text="indexList[index]" :key="index"></u-index-anchor>
<u-index-item :key="index">
<u-index-anchor :text="indexList[index]"></u-index-anchor>
<view class="list-cell" v-for="(cell, index) in item" :key="index"> {{ cell }} </view>
</u-index-item>
</template>
</u-index-list>
</view>
</view>
</template>
<script>
export default {
data() {
return {
search: {
text: ''
},
indexList: ['A', 'B', 'C', 'A', 'B', 'C', 'A', 'B', 'C', 'A', 'B', 'C'],
itemArr: [
['列表A1', '列表A2', '列表A3'],
['列表B1', '列表B2', '列表B3'],
['列表C1', '列表C2', '列表C3'],
['列表B1', '列表B2', '列表B3'],
['列表B1', '列表B2', '列表B3'],
['列表B1', '列表B2', '列表B3'],
['列表B1', '列表B2', '列表B3'],
['列表B1', '列表B2', '列表B3'],
['列表B1', '列表B2', '列表B3'],
['列表B1', '列表B2', '列表B3'],
['列表B1', '列表B2', '列表B3'],
['列表B1', '列表B2', '列表B3']
]
}
},
onShow() {},
methods: {
tabbarItem(itemName) {
console.log(itemName)
uni.navigateTo({ url: '/pages/' + itemName + '/home' })
}
}
}
</script>
<style lang="scss" scoped>
.container {
background: #004bb9;
}
.search-box {
width: 750rpx;
padding: 30rpx;
}
.search-input {
width: 690rpx;
}
.main {
padding: 30rpx 0 0 0;
border-radius: 30rpx 30rpx 0 0;
background: #f5f5f9;
}
</style>
<template>
<view class="container">
<u-navbar title="账号授权" back-text="返回" :placeholder="true" @leftClick="onNavbarLeftClick"></u-navbar>
<u-button type="primary" text="授权登录" @click="onLogin"></u-button>
<u-button type="primary" text="获取信息" @click="onGetUserProfile"></u-button>
<u-button type="primary" text="获取手机" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber"></u-button>
</view>
</template>
<script>
import { userLoginToken, userGetMiniProgramPhone, userGetMiniProgramUserInfo } from '@/api/user.js'
export default {
data() {
return {}
},
onLoad() {},
onShow() {
uni.hideLoading()
},
methods: {
onLogin() {
wx.login({
success: async (result) => {
const response = await userLoginToken({
code: result.code
})
console.log('onLogin response')
console.log(response)
// 返回数据结构
// accessToken: "b2402ddf-61e4-4d07-bd1b-f22ef0fd3050"
// expiresIn: 6858
// openId: "oKJUK41TAcesZDVGf8o_Fv1EHlIg"
// refreshToken: "b2bcc403-466f-40dc-9cf8-1f626abe97ee"
// scope: "all,read,write"
// sessionKey: "the/PDm51uVkj2jR4j9rCg=="
// tokenType: "bearer"
// unionId: "ojbkR1KJEKZvEDFb1lUD97Q0aAfc"
const responseData = response.data
uni.setStorageSync('accessToken', responseData.accessToken)
uni.setStorageSync('refreshToken', responseData.refreshToken)
uni.setStorageSync('sessionKey', responseData.sessionKey)
uni.setStorageSync('openId', responseData.openId)
}
})
},
onGetUserProfile() {
wx.getUserProfile({
desc: '用于完善会员资料',
success: async (result) => {
const response = await userGetMiniProgramUserInfo({
encryptedData: result.encryptedData,
iv: result.iv,
rawData: result.rawData,
signature: result.signature
})
console.log('onGetUserProfile')
console.log(response)
}
})
},
// 获取手机号
async onGetPhoneNumber(event) {
const result = event.detail
const response = await userGetMiniProgramPhone({
encryptedData: result.encryptedData,
iv: result.iv
})
console.log('onGetPhoneNumber')
console.log(response)
}
}
}
</script>
<style lang="scss" scoped></style>
<template>
<view class="container">
<u-navbar title="个人中心" :placeholder="true"></u-navbar>
<view class="user flex row items-center">
<!-- 未登录状态 -->
<template v-if="!userInfo.isLogin">
<u--image width="140rpx" height="140rpx" :src="userInfo.avatar"></u--image>
<view class="flex row items-center" @click="toLogin">
<button class="flex row content-center items-center fs36 fw800 cff">未登录</button>
</view>
</template>
<!-- 登录状态 -->
<template v-if="userInfo.isLogin">
<u--image width="140rpx" height="140rpx" :src="userInfo.avatar"></u--image>
<view class="user-info flex column content-center">
<text class="fs36 fw800 cff line-1">{{ userInfo.name }}</text>
</view>
</template>
<!-- 我的积分 -->
<view class="user-operation flex row content-end fgrow">
<view class="mr12 column content-center items-center" @click="onShowMemberScan">
<text class="mt8 fs20 fw400 cff">就诊人管理</text>
</view>
</view>
</view>
<view class="main">
<!-- 平台优选 -->
<view class="rcommd card mt30">
<view class="flex row content-between items-center">
<text>我的订单</text>
<view class="flex items-center">
<text class="font-20">查看更多</text>
<u-icon name="arrow-right" size="20" color="#c2ced8"></u-icon>
</view>
</view>
<view class="mt30">
<view class="menu mt30">
<u--image width="750rpx" height="310rpx" :src="require('@/assets/doctor-menu.png')"></u--image>
</view>
</view>
</view>
<view class="menu flex row content-between items-center mt30">
<view class="menu-item card flex content-center items-center">
<text>急速配药</text>
</view>
<view class="menu-item card flex content-center items-center">
<text>图文问诊</text>
</view>
</view>
<view class="menu mt30">
<u--image width="750rpx" height="310rpx" :src="require('@/assets/doctor-menu.png')"></u--image>
</view>
<!-- 平台优选 -->
<view class="rcommd card mt30">
<view class="flex row content-between items-center">
<text>常用工具</text>
<view class="flex items-center">
<text class="font-20">查看更多</text>
<u-icon name="arrow-right" size="20" color="#c2ced8"></u-icon>
</view>
</view>
<view class="mt30">
<view class="menu mt30">
<u--image width="750rpx" height="310rpx" :src="require('@/assets/doctor-menu.png')"></u--image>
</view>
</view>
</view>
<!-- 平台优选 -->
<view class="rcommd card mt30">
<view class="flex row content-between items-center">
<text>其他</text>
<view class="flex items-center">
<text class="font-20">查看更多</text>
<u-icon name="arrow-right" size="20" color="#c2ced8"></u-icon>
</view>
</view>
<view class="mt30">
<view class="menu mt30">
<u--image width="750rpx" height="310rpx" :src="require('@/assets/doctor-menu.png')"></u--image>
</view>
</view>
</view>
</view>
<u-tabbar value="mine" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
<u-tabbar-item text="找医生" name="doctor" icon="home" @click="tabbarItem"></u-tabbar-item>
<u-tabbar-item text="找服务" name="service" icon="photo" @click="tabbarItem"></u-tabbar-item>
<u-tabbar-item text="找课程" name="curriculum" icon="play-right" @click="tabbarItem"></u-tabbar-item>
<u-tabbar-item text="个人中心" name="mine" icon="account" @click="tabbarItem"></u-tabbar-item>
</u-tabbar>
</view>
</template>
<script>
import { userLoginToken } from '@/api/user.js'
export default {
data() {
return {
bgiHeight: 440,
isStructureColorWhite: true,
userInfo: {
isLogin: false,
avatar: 'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJvtOnIichicsXLvEcq7aeYlkmhiayibSwn4XN0TO9gul0MqEAET46Gh6s76uNZ9QaP1vh3mjwqAbcibBg/132',
name: 'asd'
},
mallInfo: { city: '', id: '', name: '', address: '' },
quantity: { integral: 0, gift: 0, coupon: 0 },
showSignIn: false,
showMemberCode: false
}
},
onShow() {},
methods: {
toLogin() {
uni.navigateTo({ url: '/pages/login/login' })
},
tabbarItem(itemName) {
uni.navigateTo({ url: '/pages/' + itemName + '/home' })
}
}
}
</script>
<style lang="scss" scoped>
.container {
background: #004bb9;
}
/* 用户信息 */
.user {
width: 750rpx;
margin: 38rpx 0 0 0;
padding: 0 40rpx;
}
.user-avatar {
width: 80rpx;
height: 80rpx;
margin: 0 24rpx 0 0;
border-radius: 50%;
}
.user-info {
max-width: 400rpx;
}
.user-level > image {
width: 108rpx;
height: 32rpx;
margin: 6rpx 0 0 0;
}
.user-operation {
flex-grow: 1;
text-align: center;
}
.main {
margin: 60rpx 0 0 0;
padding: 30rpx 0 0 0;
border-radius: 30rpx 30rpx 0 0;
background: #f5f5f9;
}
.rcommd {
width: 750rpx;
padding: 30rpx 0;
background: #ffffff;
}
.menu-item {
width: 330rpx;
height: 140rpx;
}
</style>
<template>
<view class="container">
<u-navbar title="个人中心" :placeholder="true"></u-navbar>
<view class="user flex row items-center">
<!-- 未登录状态 -->
<template v-if="!userInfo.isLogin">
<u--image width="140rpx" height="140rpx" :src="userInfo.avatar"></u--image>
<view class="flex row items-center" @click="toLogin">
<button class="flex row content-center items-center fs36 fw800 cff">未登录</button>
</view>
</template>
<!-- 登录状态 -->
<template v-if="userInfo.isLogin">
<u--image width="140rpx" height="140rpx" :src="userInfo.avatar"></u--image>
<view class="user-info flex column content-center">
<text class="fs36 fw800 cff line-1">{{ userInfo.name }}</text>
</view>
</template>
<!-- 我的积分 -->
<view class="user-operation flex row content-end fgrow">
<view class="mr12 column content-center items-center" @click="onShowMemberScan">
<text class="mt8 fs20 fw400 cff">就诊人管理</text>
</view>
</view>
</view>
<view class="main">
<!-- 平台优选 -->
<view class="rcommd card mt30">
<view class="flex row content-between items-center">
<text>我的订单</text>
<view class="flex items-center">
<text class="font-20">查看更多</text>
<u-icon name="arrow-right" size="20" color="#c2ced8"></u-icon>
</view>
</view>
<view class="mt30">
<view class="menu mt30">
<u--image width="750rpx" height="310rpx" :src="require('@/assets/doctor-menu.png')"></u--image>
</view>
</view>
</view>
<view class="menu flex row content-between items-center mt30">
<view class="menu-item card flex content-center items-center">
<text>急速配药</text>
</view>
<view class="menu-item card flex content-center items-center">
<text>图文问诊</text>
</view>
</view>
<view class="menu mt30">
<u--image width="750rpx" height="310rpx" :src="require('@/assets/doctor-menu.png')"></u--image>
</view>
<!-- 平台优选 -->
<view class="rcommd card mt30">
<view class="flex row content-between items-center">
<text>常用工具</text>
<view class="flex items-center">
<text class="font-20">查看更多</text>
<u-icon name="arrow-right" size="20" color="#c2ced8"></u-icon>
</view>
</view>
<view class="mt30">
<view class="menu mt30">
<u--image width="750rpx" height="310rpx" :src="require('@/assets/doctor-menu.png')"></u--image>
</view>
</view>
</view>
<!-- 平台优选 -->
<view class="rcommd card mt30">
<view class="flex row content-between items-center">
<text>其他</text>
<view class="flex items-center">
<text class="font-20">查看更多</text>
<u-icon name="arrow-right" size="20" color="#c2ced8"></u-icon>
</view>
</view>
<view class="mt30">
<view class="menu mt30">
<u--image width="750rpx" height="310rpx" :src="require('@/assets/doctor-menu.png')"></u--image>
</view>
</view>
</view>
</view>
<u-tabbar value="mine" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
<u-tabbar-item text="找医生" name="doctor" icon="home" @click="tabbarItem"></u-tabbar-item>
<u-tabbar-item text="找服务" name="service" icon="photo" @click="tabbarItem"></u-tabbar-item>
<u-tabbar-item text="找课程" name="curriculum" icon="play-right" @click="tabbarItem"></u-tabbar-item>
<u-tabbar-item text="个人中心" name="mine" icon="account" @click="tabbarItem"></u-tabbar-item>
</u-tabbar>
</view>
</template>
<script>
import { userLoginToken } from '@/api/user.js'
export default {
data() {
return {
bgiHeight: 440,
isStructureColorWhite: true,
userInfo: {
isLogin: false,
avatar: 'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJvtOnIichicsXLvEcq7aeYlkmhiayibSwn4XN0TO9gul0MqEAET46Gh6s76uNZ9QaP1vh3mjwqAbcibBg/132',
name: 'asd'
},
mallInfo: { city: '', id: '', name: '', address: '' },
quantity: { integral: 0, gift: 0, coupon: 0 },
showSignIn: false,
showMemberCode: false
}
},
onShow() {},
methods: {
toLogin() {
uni.navigateTo({ url: '/pages/login/login' })
},
tabbarItem(itemName) {
uni.navigateTo({ url: '/pages/' + itemName + '/home' })
}
}
}
</script>
<style lang="scss" scoped>
.container {
background: #004bb9;
}
/* 用户信息 */
.user {
width: 750rpx;
margin: 38rpx 0 0 0;
padding: 0 40rpx;
}
.user-avatar {
width: 80rpx;
height: 80rpx;
margin: 0 24rpx 0 0;
border-radius: 50%;
}
.user-info {
max-width: 400rpx;
}
.user-level > image {
width: 108rpx;
height: 32rpx;
margin: 6rpx 0 0 0;
}
.user-operation {
flex-grow: 1;
text-align: center;
}
.main {
margin: 60rpx 0 0 0;
padding: 30rpx 0 0 0;
border-radius: 30rpx 30rpx 0 0;
background: #f5f5f9;
}
.rcommd {
width: 750rpx;
padding: 30rpx 0;
background: #ffffff;
}
.menu-item {
width: 330rpx;
height: 140rpx;
}
</style>
<template>
<view class="container">
<u-navbar title="个人中心" :placeholder="true"></u-navbar>
<view class="user flex row items-center">
<!-- 未登录状态 -->
<template v-if="!userInfo.isLogin">
<u--image width="140rpx" height="140rpx" :src="userInfo.avatar"></u--image>
<view class="flex row items-center" @click="toLogin">
<button class="flex row content-center items-center fs36 fw800 cff">未登录</button>
</view>
</template>
<!-- 登录状态 -->
<template v-if="userInfo.isLogin">
<u--image width="140rpx" height="140rpx" :src="userInfo.avatar"></u--image>
<view class="user-info flex column content-center">
<text class="fs36 fw800 cff line-1">{{ userInfo.name }}</text>
</view>
</template>
<!-- 我的积分 -->
<view class="user-operation flex row content-end fgrow">
<view class="mr12 column content-center items-center" @click="onShowMemberScan">
<text class="mt8 fs20 fw400 cff">就诊人管理</text>
</view>
</view>
</view>
<view class="main">
<!-- 平台优选 -->
<view class="rcommd card mt30">
<view class="flex row content-between items-center">
<text>我的订单</text>
<view class="flex items-center">
<text class="font-20">查看更多</text>
<u-icon name="arrow-right" size="20" color="#c2ced8"></u-icon>
</view>
</view>
<view class="mt30">
<view class="menu mt30">
<u--image width="750rpx" height="310rpx" :src="require('@/assets/doctor-menu.png')"></u--image>
</view>
</view>
</view>
<view class="menu flex row content-between items-center mt30">
<view class="menu-item card flex content-center items-center">
<text>急速配药</text>
</view>
<view class="menu-item card flex content-center items-center">
<text>图文问诊</text>
</view>
</view>
<view class="menu mt30">
<u--image width="750rpx" height="310rpx" :src="require('@/assets/doctor-menu.png')"></u--image>
</view>
<!-- 平台优选 -->
<view class="rcommd card mt30">
<view class="flex row content-between items-center">
<text>常用工具</text>
<view class="flex items-center">
<text class="font-20">查看更多</text>
<u-icon name="arrow-right" size="20" color="#c2ced8"></u-icon>
</view>
</view>
<view class="mt30">
<view class="menu mt30">
<u--image width="750rpx" height="310rpx" :src="require('@/assets/doctor-menu.png')"></u--image>
</view>
</view>
</view>
<!-- 平台优选 -->
<view class="rcommd card mt30">
<view class="flex row content-between items-center">
<text>其他</text>
<view class="flex items-center">
<text class="font-20">查看更多</text>
<u-icon name="arrow-right" size="20" color="#c2ced8"></u-icon>
</view>
</view>
<view class="mt30">
<view class="menu mt30">
<u--image width="750rpx" height="310rpx" :src="require('@/assets/doctor-menu.png')"></u--image>
</view>
</view>
</view>
</view>
<u-tabbar value="mine" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
<u-tabbar-item text="找医生" name="doctor" icon="home" @click="tabbarItem"></u-tabbar-item>
<u-tabbar-item text="找服务" name="service" icon="photo" @click="tabbarItem"></u-tabbar-item>
<u-tabbar-item text="找课程" name="curriculum" icon="play-right" @click="tabbarItem"></u-tabbar-item>
<u-tabbar-item text="个人中心" name="mine" icon="account" @click="tabbarItem"></u-tabbar-item>
</u-tabbar>
</view>
</template>
<script>
import { userLoginToken } from '@/api/user.js'
export default {
data() {
return {
bgiHeight: 440,
isStructureColorWhite: true,
userInfo: {
isLogin: false,
avatar: 'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJvtOnIichicsXLvEcq7aeYlkmhiayibSwn4XN0TO9gul0MqEAET46Gh6s76uNZ9QaP1vh3mjwqAbcibBg/132',
name: 'asd'
},
mallInfo: { city: '', id: '', name: '', address: '' },
quantity: { integral: 0, gift: 0, coupon: 0 },
showSignIn: false,
showMemberCode: false
}
},
onShow() {},
methods: {
toLogin() {
uni.navigateTo({ url: '/pages/login/login' })
},
tabbarItem(itemName) {
uni.navigateTo({ url: '/pages/' + itemName + '/home' })
}
}
}
</script>
<style lang="scss" scoped>
.container {
background: #004bb9;
}
/* 用户信息 */
.user {
width: 750rpx;
margin: 38rpx 0 0 0;
padding: 0 40rpx;
}
.user-avatar {
width: 80rpx;
height: 80rpx;
margin: 0 24rpx 0 0;
border-radius: 50%;
}
.user-info {
max-width: 400rpx;
}
.user-level > image {
width: 108rpx;
height: 32rpx;
margin: 6rpx 0 0 0;
}
.user-operation {
flex-grow: 1;
text-align: center;
}
.main {
margin: 60rpx 0 0 0;
padding: 30rpx 0 0 0;
border-radius: 30rpx 30rpx 0 0;
background: #f5f5f9;
}
.rcommd {
width: 750rpx;
padding: 30rpx 0;
background: #ffffff;
}
.menu-item {
width: 330rpx;
height: 140rpx;
}
</style>
<template>
<view class="container">
<u-navbar title="个人中心" :placeholder="true"></u-navbar>
<view class="user flex row items-center">
<!-- 未登录状态 -->
<template v-if="!userInfo.isLogin">
<u--image width="140rpx" height="140rpx" :src="userInfo.avatar"></u--image>
<view class="flex row items-center" @click="toLogin">
<button class="flex row content-center items-center fs36 fw800 cff">未登录</button>
</view>
</template>
<!-- 登录状态 -->
<template v-if="userInfo.isLogin">
<u--image width="140rpx" height="140rpx" :src="userInfo.avatar"></u--image>
<view class="user-info flex column content-center">
<text class="fs36 fw800 cff line-1">{{ userInfo.name }}</text>
</view>
</template>
<!-- 我的积分 -->
<view class="user-operation flex row content-end fgrow">
<view class="mr12 column content-center items-center" @click="onShowMemberScan">
<text class="mt8 fs20 fw400 cff">就诊人管理</text>
</view>
</view>
</view>
<view class="main">
<!-- 平台优选 -->
<view class="rcommd card mt30">
<view class="flex row content-between items-center">
<text>我的订单</text>
<view class="flex items-center">
<text class="font-20">查看更多</text>
<u-icon name="arrow-right" size="20" color="#c2ced8"></u-icon>
</view>
</view>
<view class="mt30">
<view class="menu mt30">
<u--image width="750rpx" height="310rpx" :src="require('@/assets/doctor-menu.png')"></u--image>
</view>
</view>
</view>
<view class="menu flex row content-between items-center mt30">
<view class="menu-item card flex content-center items-center">
<text>急速配药</text>
</view>
<view class="menu-item card flex content-center items-center">
<text>图文问诊</text>
</view>
</view>
<view class="menu mt30">
<u--image width="750rpx" height="310rpx" :src="require('@/assets/doctor-menu.png')"></u--image>
</view>
<!-- 平台优选 -->
<view class="rcommd card mt30">
<view class="flex row content-between items-center">
<text>常用工具</text>
<view class="flex items-center">
<text class="font-20">查看更多</text>
<u-icon name="arrow-right" size="20" color="#c2ced8"></u-icon>
</view>
</view>
<view class="mt30">
<view class="menu mt30">
<u--image width="750rpx" height="310rpx" :src="require('@/assets/doctor-menu.png')"></u--image>
</view>
</view>
</view>
<!-- 平台优选 -->
<view class="rcommd card mt30">
<view class="flex row content-between items-center">
<text>其他</text>
<view class="flex items-center">
<text class="font-20">查看更多</text>
<u-icon name="arrow-right" size="20" color="#c2ced8"></u-icon>
</view>
</view>
<view class="mt30">
<view class="menu mt30">
<u--image width="750rpx" height="310rpx" :src="require('@/assets/doctor-menu.png')"></u--image>
</view>
</view>
</view>
</view>
<u-tabbar value="mine" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
<u-tabbar-item text="找医生" name="doctor" icon="home" @click="tabbarItem"></u-tabbar-item>
<u-tabbar-item text="找服务" name="service" icon="photo" @click="tabbarItem"></u-tabbar-item>
<u-tabbar-item text="找课程" name="curriculum" icon="play-right" @click="tabbarItem"></u-tabbar-item>
<u-tabbar-item text="个人中心" name="mine" icon="account" @click="tabbarItem"></u-tabbar-item>
</u-tabbar>
</view>
</template>
<script>
import { userLoginToken } from '@/api/user.js'
export default {
data() {
return {
bgiHeight: 440,
isStructureColorWhite: true,
userInfo: {
isLogin: false,
avatar: 'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJvtOnIichicsXLvEcq7aeYlkmhiayibSwn4XN0TO9gul0MqEAET46Gh6s76uNZ9QaP1vh3mjwqAbcibBg/132',
name: 'asd'
},
mallInfo: { city: '', id: '', name: '', address: '' },
quantity: { integral: 0, gift: 0, coupon: 0 },
showSignIn: false,
showMemberCode: false
}
},
onShow() {},
methods: {
toLogin() {
uni.navigateTo({ url: '/pages/login/login' })
},
tabbarItem(itemName) {
uni.navigateTo({ url: '/pages/' + itemName + '/home' })
}
}
}
</script>
<style lang="scss" scoped>
.container {
background: #004bb9;
}
/* 用户信息 */
.user {
width: 750rpx;
margin: 38rpx 0 0 0;
padding: 0 40rpx;
}
.user-avatar {
width: 80rpx;
height: 80rpx;
margin: 0 24rpx 0 0;
border-radius: 50%;
}
.user-info {
max-width: 400rpx;
}
.user-level > image {
width: 108rpx;
height: 32rpx;
margin: 6rpx 0 0 0;
}
.user-operation {
flex-grow: 1;
text-align: center;
}
.main {
margin: 60rpx 0 0 0;
padding: 30rpx 0 0 0;
border-radius: 30rpx 30rpx 0 0;
background: #f5f5f9;
}
.rcommd {
width: 750rpx;
padding: 30rpx 0;
background: #ffffff;
}
.menu-item {
width: 330rpx;
height: 140rpx;
}
</style>
<template>
<view class="container">
<u-navbar title="医生主页" :placeholder="true"></u-navbar>
<view class="main"> </view>
</view>
</template>
<script>
export default {
data() {
return {}
},
onShow() {},
methods: {
tabbarItem(itemName) {
console.log(itemName)
uni.navigateTo({ url: '/pages/' + itemName + '/home' })
}
}
}
</script>
<style lang="scss" scoped></style>
<template>
<view class="container">
<u-navbar title="医生主页" :placeholder="true"></u-navbar>
<view class="main"> </view>
</view>
</template>
<script>
export default {
data() {
return {}
},
onShow() {},
methods: {
tabbarItem(itemName) {
console.log(itemName)
uni.navigateTo({ url: '/pages/' + itemName + '/home' })
}
}
}
</script>
<style lang="scss" scoped></style>
<template>
<view class="container">
<u-navbar title="医生主页" :placeholder="true"></u-navbar>
<view class="main"> </view>
</view>
</template>
<script>
export default {
data() {
return {}
},
onShow() {},
methods: {
tabbarItem(itemName) {
console.log(itemName)
uni.navigateTo({ url: '/pages/' + itemName + '/home' })
}
}
}
</script>
<style lang="scss" scoped></style>
<template>
<view class="container">
<u-navbar title="医生主页" :placeholder="true"></u-navbar>
<view class="main"> </view>
</view>
</template>
<script>
export default {
data() {
return {}
},
onShow() {},
methods: {
tabbarItem(itemName) {
console.log(itemName)
uni.navigateTo({ url: '/pages/' + itemName + '/home' })
}
}
}
</script>
<style lang="scss" scoped></style>
<template>
<view class="container">
<u-navbar title="找服务" :placeholder="true"></u-navbar>
<!-- 搜索 -->
<view class="search-box flex row content-center">
<view class="search-input flex row items-center">
<u-search v-model="search.text" placeholder="搜产品、服务" actionText="搜索" :showAction="false" bgColor="#ffffff"></u-search>
</view>
<u-icon name="chat" size="40" color="#ffffff"></u-icon>
<u-icon name="chat" size="40" color="#ffffff"></u-icon>
<u-icon name="chat" size="40" color="#ffffff"></u-icon>
</view>
<view class="main">
<view>
<u--image width="750rpx" height="160rpx" :src="require('@/assets/doctor-propaganda.png')"></u--image>
</view>
<view class="menu">
<view class="menu-item card menu-item-row">
<u-icon name="chat" size="40" color="#ffffff"></u-icon>
<text>急速配药</text>
</view>
<view class="menu-item card">
<u-icon name="chat" size="40" color="#ffffff"></u-icon>
<text>急速配药</text>
</view>
<view class="menu-item card">
<u-icon name="chat" size="40" color="#ffffff"></u-icon>
<text>急速配药</text>
</view>
<view class="menu-item card">
<u-icon name="chat" size="40" color="#ffffff"></u-icon>
<text>急速配药</text>
</view>
<view class="menu-item card">
<u-icon name="chat" size="40" color="#ffffff"></u-icon>
<text>急速配药</text>
</view>
</view>
<view>
<u--image width="750rpx" height="130rpx" :src="require('@/assets/service-other.png')"></u--image>
</view>
<!-- 限时专场、体验专区、餐饮专区 -->
<view class="rcommd card mt30">
<view class="flex row content-between items-center">
<u-tabs :list="[{ name: '限时专场' }, { name: '体验专区' }, { name: '餐饮专区' }]"></u-tabs>
<view class="flex items-center">
<text class="font-20">查看更多</text>
<u-icon name="arrow-right" size="20" color="#c2ced8"></u-icon>
</view>
</view>
<view class="mt30">
<u-list @scrolltolower="scrolltolower">
<u-list-item v-for="(item, index) in rcommdList" :key="index">
<u-cell :title="`列表长度-${index + 1}`">
<u-avatar slot="icon" shape="square" size="35" :src="item.url" customStyle="margin: -3px 5px -3px 0"></u-avatar>
</u-cell>
</u-list-item>
</u-list>
</view>
</view>
</view>
<u-tabbar value="service" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
<u-tabbar-item text="找医生" name="doctor" icon="home" @click="tabbarItem"></u-tabbar-item>
<u-tabbar-item text="找服务" name="service" icon="photo" @click="tabbarItem"></u-tabbar-item>
<u-tabbar-item text="找课程" name="curriculum" icon="play-right" @click="tabbarItem"></u-tabbar-item>
<u-tabbar-item text="个人中心" name="mine" icon="account" @click="tabbarItem"></u-tabbar-item>
</u-tabbar>
</view>
</template>
<script>
export default {
data() {
return {
rcommdList: [1, 2, 3],
urls: ['https://cdn.uviewui.com/uview/album/1.jpg', 'https://cdn.uviewui.com/uview/album/2.jpg', 'https://cdn.uviewui.com/uview/album/3.jpg', 'https://cdn.uviewui.com/uview/album/4.jpg', 'https://cdn.uviewui.com/uview/album/5.jpg', 'https://cdn.uviewui.com/uview/album/6.jpg', 'https://cdn.uviewui.com/uview/album/7.jpg', 'https://cdn.uviewui.com/uview/album/8.jpg', 'https://cdn.uviewui.com/uview/album/9.jpg', 'https://cdn.uviewui.com/uview/album/10.jpg']
}
},
onShow() {},
methods: {
tabbarItem(itemName) {
console.log(itemName)
uni.navigateTo({ url: '/pages/' + itemName + '/home' })
}
}
}
</script>
<style lang="scss" scoped>
.container {
background: #004bb9;
}
.search-box {
width: 750rpx;
padding: 30rpx;
}
.search-input {
width: 490rpx;
}
.main {
padding: 30rpx 0 0 0;
border-radius: 30rpx 30rpx 0 0;
background: #f5f5f9;
}
.menu {
display: grid;
grid-template-columns: 240rpx 200rpx 200rpx;
grid-gap: 20rpx;
grid-template-rows: 130rpx 130rpx;
width: 750rpx;
margin: 30rpx 0;
padding: 0 30rpx;
}
.menu-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #289efa;
}
.menu-item-row {
grid-row-start: 1;
grid-row-end: 3;
}
</style>
<template>
<view class="container">
<u-navbar title="医生主页" :placeholder="true"></u-navbar>
<view class="main"> </view>
</view>
</template>
<script>
export default {
data() {
return {}
},
onShow() {},
methods: {
tabbarItem(itemName) {
console.log(itemName)
uni.navigateTo({ url: '/pages/' + itemName + '/home' })
}
}
}
</script>
<style lang="scss" scoped></style>
<template>
<view class="container">
<u-navbar title="医生主页" :placeholder="true"></u-navbar>
<view class="main"> </view>
</view>
</template>
<script>
export default {
data() {
return {}
},
onShow() {},
methods: {
tabbarItem(itemName) {
console.log(itemName)
uni.navigateTo({ url: '/pages/' + itemName + '/home' })
}
}
}
</script>
<style lang="scss" scoped></style>
<template>
<view class="container">
<u-navbar title="医生主页" :placeholder="true"></u-navbar>
<view class="main"> </view>
</view>
</template>
<script>
export default {
data() {
return {}
},
onShow() {},
methods: {
tabbarItem(itemName) {
console.log(itemName)
uni.navigateTo({ url: '/pages/' + itemName + '/home' })
}
}
}
</script>
<style lang="scss" scoped></style>
'use strict'
// 等待初始化完毕
document.addEventListener('UniAppJSBridgeReady', () => {
document.body.onclick = function () {
return uni.postMessage({
data: {
action: 'onClick'
}
})
}
uni.postMessage({
data: {
action: 'onJSBridgeReady'
}
})
})
let options
let medias = []
/**
* @description 获取标签的所有属性
* @param {Element} ele
*/
function getAttrs(ele) {
const attrs = Object.create(null)
for (let i = ele.attributes.length; i--;) {
attrs[ele.attributes[i].name] = ele.attributes[i].value
}
return attrs
}
/**
* @description 图片加载出错
*/
function onImgError() {
if (options[1]) {
this.src = options[1]
this.onerror = null
} // 取消监听点击
this.onclick = null
this.ontouchstart = null
uni.postMessage({
data: {
action: 'onError',
source: 'img',
attrs: getAttrs(this)
}
})
}
/**
* @description 创建 dom 结构
* @param {object[]} nodes 节点数组
* @param {Element} parent 父节点
* @param {string} namespace 命名空间
*/
function createDom(nodes, parent, namespace) {
const _loop = function _loop(i) {
const node = nodes[i]
let ele = void 0
if (!node.type || node.type == 'node') {
let { name } = node // svg 需要设置 namespace
if (name == 'svg') namespace = 'http://www.w3.org/2000/svg'
if (name == 'html' || name == 'body') name = 'div' // 创建标签
if (!namespace) ele = document.createElement(name); else ele = document.createElementNS(namespace, name) // 设置属性
for (const item in node.attrs) {
ele.setAttribute(item, node.attrs[item])
} // 递归创建子节点
if (node.children) createDom(node.children, ele, namespace) // 处理图片
if (name == 'img') {
if (!ele.src && ele.getAttribute('data-src')) ele.src = ele.getAttribute('data-src')
if (!node.attrs.ignore) {
// 监听图片点击事件
ele.onclick = function (e) {
e.stopPropagation()
uni.postMessage({
data: {
action: 'onImgTap',
attrs: getAttrs(this)
}
})
}
}
if (options[2]) {
image = new Image()
image.src = ele.src
ele.src = options[2]
image.onload = function () {
ele.src = this.src
}
image.onerror = function () {
ele.onerror()
}
}
ele.onerror = onImgError
} // 处理链接
else if (name == 'a') {
ele.addEventListener('click', function (e) {
e.stopPropagation()
e.preventDefault() // 阻止默认跳转
const href = this.getAttribute('href')
let offset
if (href && href[0] == '#') offset = (document.getElementById(href.substr(1)) || {}).offsetTop
uni.postMessage({
data: {
action: 'onLinkTap',
attrs: getAttrs(this),
offset
}
})
}, true)
} // 处理音视频
else if (name == 'video' || name == 'audio') {
medias.push(ele)
if (!node.attrs.autoplay) {
if (!node.attrs.controls) ele.setAttribute('controls', 'true') // 空白图占位
if (!node.attrs.poster) ele.setAttribute('poster', "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'/>")
}
if (options[3]) {
ele.onplay = function () {
for (let _i = 0; _i < medias.length; _i++) {
if (medias[_i] != this) medias[_i].pause()
}
}
}
ele.onerror = function () {
uni.postMessage({
data: {
action: 'onError',
source: name,
attrs: getAttrs(this)
}
})
}
} // 处理表格
else if (name == 'table' && options[4] && !ele.style.cssText.includes('inline')) {
const div = document.createElement('div')
div.style.overflow = 'auto'
div.appendChild(ele)
ele = div
} else if (name == 'svg') namespace = void 0
} else ele = document.createTextNode(node.text.replace(/&amp;/g, '&'))
parent.appendChild(ele)
}
for (let i = 0; i < nodes.length; i++) {
var image
_loop(i)
}
} // 设置 html 内容
window.setContent = function (nodes, opts, append) {
const ele = document.getElementById('content') // 背景颜色
if (opts[0]) document.body.bgColor = opts[0] // 长按复制
if (!opts[5]) ele.style.userSelect = 'none'
if (!append) {
ele.innerHTML = '' // 不追加则先清空
medias = []
}
options = opts
const fragment = document.createDocumentFragment()
createDom(nodes, fragment)
ele.appendChild(fragment) // 触发事件
let height = ele.scrollHeight
uni.postMessage({
data: {
action: 'onLoad',
height
}
})
clearInterval(window.timer)
let ready = false
window.timer = setInterval(() => {
if (ele.scrollHeight != height) {
height = ele.scrollHeight
uni.postMessage({
data: {
action: 'onHeightChange',
height
}
})
} else if (!ready) {
ready = true
uni.postMessage({
data: {
action: 'onReady'
}
})
}
}, 350)
} // 回收计时器
window.onunload = function () {
clearInterval(window.timer)
}
!(function (e, n) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = n() : typeof define === 'function' && define.amd ? define(n) : (e = e || self).uni = n() }(this, (() => {
'use strict'
try { const e = {}; Object.defineProperty(e, 'passive', { get() { !0 } }), window.addEventListener('test-passive', null, e) } catch (e) {} const n = Object.prototype.hasOwnProperty; function t(e, t) { return n.call(e, t) } const i = []; const a = function (e, n) { const t = { options: { timestamp: +new Date() }, name: e, arg: n }; if (window.__dcloud_weex_postMessage || window.__dcloud_weex_) { if (e === 'postMessage') { const a = { data: [n] }; return window.__dcloud_weex_postMessage ? window.__dcloud_weex_postMessage(a) : window.__dcloud_weex_.postMessage(JSON.stringify(a)) } const o = { type: 'WEB_INVOKE_APPSERVICE', args: { data: t, webviewIds: i } }; window.__dcloud_weex_postMessage ? window.__dcloud_weex_postMessageToService(o) : window.__dcloud_weex_.postMessageToService(JSON.stringify(o)) } if (!window.plus) return window.parent.postMessage({ type: 'WEB_INVOKE_APPSERVICE', data: t, pageId: '' }, '*'); if (i.length === 0) { const r = plus.webview.currentWebview(); if (!r) throw new Error('plus.webview.currentWebview() is undefined'); const d = r.parent(); let s = ''; s = d ? d.id : r.id, i.push(s) } if (plus.webview.getWebviewById('__uniapp__service'))plus.webview.postMessageToUniNView({ type: 'WEB_INVOKE_APPSERVICE', args: { data: t, webviewIds: i } }, '__uniapp__service'); else { const w = JSON.stringify(t); plus.webview.getLaunchWebview().evalJS('UniPlusBridge.subscribeHandler("'.concat('WEB_INVOKE_APPSERVICE', '",').concat(w, ',').concat(JSON.stringify(i), ');')) } }; const o = {
navigateTo() { const e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}; const n = e.url; a('navigateTo', { url: encodeURI(n) }) }, navigateBack() { const e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}; const n = e.delta; a('navigateBack', { delta: parseInt(n) || 1 }) }, switchTab() { const e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}; const n = e.url; a('switchTab', { url: encodeURI(n) }) }, reLaunch() { const e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}; const n = e.url; a('reLaunch', { url: encodeURI(n) }) }, redirectTo() { const e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}; const n = e.url; a('redirectTo', { url: encodeURI(n) }) }, getEnv(e) { window.plus ? e({ plus: !0 }) : e({ h5: !0 }) }, postMessage() { const e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}; a('postMessage', e.data || {}) }
}; const r = /uni-app/i.test(navigator.userAgent); const d = /Html5Plus/i.test(navigator.userAgent); const s = /complete|loaded|interactive/; const w = window.my && navigator.userAgent.indexOf('AlipayClient') > -1; const u = window.swan && window.swan.webView && /swan/i.test(navigator.userAgent); const c = window.qq && window.qq.miniProgram && /QQ/i.test(navigator.userAgent) && /miniProgram/i.test(navigator.userAgent); const g = window.tt && window.tt.miniProgram && /toutiaomicroapp/i.test(navigator.userAgent); const v = window.wx && window.wx.miniProgram && /micromessenger/i.test(navigator.userAgent) && /miniProgram/i.test(navigator.userAgent); const p = window.qa && /quickapp/i.test(navigator.userAgent); for (var l, _ = function () { window.UniAppJSBridge = !0, document.dispatchEvent(new CustomEvent('UniAppJSBridgeReady', { bubbles: !0, cancelable: !0 })) }, f = [function (e) { if (r || d) return window.__dcloud_weex_postMessage || window.__dcloud_weex_ ? document.addEventListener('DOMContentLoaded', e) : window.plus && s.test(document.readyState) ? setTimeout(e, 0) : document.addEventListener('plusready', e), o }, function (e) { if (v) return window.WeixinJSBridge && window.WeixinJSBridge.invoke ? setTimeout(e, 0) : document.addEventListener('WeixinJSBridgeReady', e), window.wx.miniProgram }, function (e) { if (c) return window.QQJSBridge && window.QQJSBridge.invoke ? setTimeout(e, 0) : document.addEventListener('QQJSBridgeReady', e), window.qq.miniProgram }, function (e) {
if (w) {
document.addEventListener('DOMContentLoaded', e); const n = window.my; return {
navigateTo: n.navigateTo, navigateBack: n.navigateBack, switchTab: n.switchTab, reLaunch: n.reLaunch, redirectTo: n.redirectTo, postMessage: n.postMessage, getEnv: n.getEnv
}
}
}, function (e) { if (u) return document.addEventListener('DOMContentLoaded', e), window.swan.webView }, function (e) { if (g) return document.addEventListener('DOMContentLoaded', e), window.tt.miniProgram }, function (e) {
if (p) {
window.QaJSBridge && window.QaJSBridge.invoke ? setTimeout(e, 0) : document.addEventListener('QaJSBridgeReady', e); const n = window.qa; return {
navigateTo: n.navigateTo, navigateBack: n.navigateBack, switchTab: n.switchTab, reLaunch: n.reLaunch, redirectTo: n.redirectTo, postMessage: n.postMessage, getEnv: n.getEnv
}
}
}, function (e) { return document.addEventListener('DOMContentLoaded', e), o }], m = 0; m < f.length && !(l = f[m](_)); m++);l || (l = {}); const E = typeof uni !== 'undefined' ? uni : {}; if (!E.navigateTo) for (const b in l)t(l, b) && (E[b] = l[b]); return E.webView = l, E
})))
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><style>body,html{width:100%;height:100%;overflow:hidden}body{margin:0}video{width:300px;height:225px}img{max-width:100%;-webkit-touch-callout:none}@keyframes show{0%{opacity:0}100%{opacity:1}}</style></head><body><div id="content"></div><script type="text/javascript" src="./js/uni.webview.min.js"></script><script type="text/javascript" src="./js/handler.js"></script></body>
\ No newline at end of file
No preview for this file type
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) // vue的插件机制
// Vuex.Store 构造器选项
const store = new Vuex.Store({
// 为了不和页面或组件的data中的造成混淆,state中的变量前面建议加上$符号
state: {
// 用户信息
$userInfo: {
id: 1
}
}
})
export default store
/* flex */
.flex { display: flex; }
.row { flex-direction: row; }
.column { flex-direction: column; }
.content-start { justify-content: flex-start; }
.content-center { justify-content: center; }
.content-end { justify-content: flex-end; }
.content-between { justify-content: space-between; }
.content-around { justify-content: space-around; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.flex-grow { flex-grow: 1; }
.flex-wrap { flex-wrap: wrap; }
/* 文本对齐 */
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
/* 文本省略 */
.text-ellipsis-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-ellipsis-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: break-all; }
.text-ellipsis-3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; word-break: break-all; }
/* margin */
.mt2 { margin-top: 2rpx; }
.mt4 { margin-top: 4rpx; }
.mt6 { margin-top: 6rpx; }
.mt8 { margin-top: 8rpx; }
.mt10 { margin-top: 10rpx; }
.mt12 { margin-top: 12rpx; }
.mt14 { margin-top: 14rpx; }
.mt16 { margin-top: 16rpx; }
.mt18 { margin-top: 18rpx; }
.mt20 { margin-top: 20rpx; }
.mt22 { margin-top: 22rpx; }
.mt24 { margin-top: 24rpx; }
.mt26 { margin-top: 26rpx; }
.mt28 { margin-top: 28rpx; }
.mt30 { margin-top: 30rpx; }
.mt32 { margin-top: 32rpx; }
.mt34 { margin-top: 34rpx; }
.mt36 { margin-top: 36rpx; }
.mt38 { margin-top: 38rpx; }
.mt40 { margin-top: 40rpx; }
.mt42 { margin-top: 42rpx; }
.mt44 { margin-top: 44rpx; }
.mt46 { margin-top: 46rpx; }
.mt48 { margin-top: 48rpx; }
.mt50 { margin-top: 50rpx; }
.mt80 { margin-top: 80rpx; }
.mr2 { margin-right: 2rpx; }
.mr4 { margin-right: 4rpx; }
.mr6 { margin-right: 6rpx; }
.mr8 { margin-right: 8rpx; }
.mr10 { margin-right: 10rpx; }
.mr12 { margin-right: 12rpx; }
.mr14 { margin-right: 14rpx; }
.mr16 { margin-right: 16rpx; }
.mr18 { margin-right: 18rpx; }
.mr20 { margin-right: 20rpx; }
.mr22 { margin-right: 22rpx; }
.mr24 { margin-right: 24rpx; }
.mr26 { margin-right: 26rpx; }
.mr28 { margin-right: 28rpx; }
.mr30 { margin-right: 30rpx; }
.mr32 { margin-right: 32rpx; }
.mr34 { margin-right: 34rpx; }
.mr36 { margin-right: 36rpx; }
.mr38 { margin-right: 38rpx; }
.mr40 { margin-right: 40rpx; }
.mr42 { margin-right: 42rpx; }
.mr44 { margin-right: 44rpx; }
.mr46 { margin-right: 46rpx; }
.mr48 { margin-right: 48rpx; }
.mr50 { margin-right: 50rpx; }
.mb2 { margin-bottom: 2rpx; }
.mb4 { margin-bottom: 4rpx; }
.mb6 { margin-bottom: 6rpx; }
.mb8 { margin-bottom: 8rpx; }
.mb10 { margin-bottom: 10rpx; }
.mb12 { margin-bottom: 12rpx; }
.mb14 { margin-bottom: 14rpx; }
.mb16 { margin-bottom: 16rpx; }
.mb18 { margin-bottom: 18rpx; }
.mb20 { margin-bottom: 20rpx; }
.mb22 { margin-bottom: 22rpx; }
.mb24 { margin-bottom: 24rpx; }
.mb26 { margin-bottom: 26rpx; }
.mb28 { margin-bottom: 28rpx; }
.mb30 { margin-bottom: 30rpx; }
.mb32 { margin-bottom: 32rpx; }
.mb34 { margin-bottom: 34rpx; }
.mb36 { margin-bottom: 36rpx; }
.mb38 { margin-bottom: 38rpx; }
.mb40 { margin-bottom: 40rpx; }
.mb42 { margin-bottom: 42rpx; }
.mb44 { margin-bottom: 44rpx; }
.mb46 { margin-bottom: 46rpx; }
.mb48 { margin-bottom: 48rpx; }
.mb50 { margin-bottom: 50rpx; }
.ml2 { margin-left: 2rpx; }
.ml4 { margin-left: 4rpx; }
.ml6 { margin-left: 6rpx; }
.ml8 { margin-left: 8rpx; }
.ml10 { margin-left: 10rpx; }
.ml12 { margin-left: 12rpx; }
.ml14 { margin-left: 14rpx; }
.ml16 { margin-left: 16rpx; }
.ml18 { margin-left: 18rpx; }
.ml20 { margin-left: 20rpx; }
.ml22 { margin-left: 22rpx; }
.ml24 { margin-left: 24rpx; }
.ml26 { margin-left: 26rpx; }
.ml28 { margin-left: 28rpx; }
.ml30 { margin-left: 30rpx; }
.ml32 { margin-left: 32rpx; }
.ml34 { margin-left: 34rpx; }
.ml36 { margin-left: 36rpx; }
.ml38 { margin-left: 38rpx; }
.ml40 { margin-left: 40rpx; }
.ml42 { margin-left: 42rpx; }
.ml44 { margin-left: 44rpx; }
.ml46 { margin-left: 46rpx; }
.ml48 { margin-left: 48rpx; }
.ml50 { margin-left: 50rpx; }
/* padding */
.pt2 { padding-top: 2rpx; }
.pt4 { padding-top: 4rpx; }
.pt6 { padding-top: 6rpx; }
.pt8 { padding-top: 8rpx; }
.pt10 { padding-top: 10rpx; }
.pt12 { padding-top: 12rpx; }
.pt14 { padding-top: 14rpx; }
.pt16 { padding-top: 16rpx; }
.pt18 { padding-top: 18rpx; }
.pt20 { padding-top: 20rpx; }
.pt22 { padding-top: 22rpx; }
.pt24 { padding-top: 24rpx; }
.pt26 { padding-top: 26rpx; }
.pt28 { padding-top: 28rpx; }
.pt30 { padding-top: 30rpx; }
.pt32 { padding-top: 32rpx; }
.pt34 { padding-top: 34rpx; }
.pt36 { padding-top: 36rpx; }
.pt38 { padding-top: 38rpx; }
.pt40 { padding-top: 40rpx; }
.pt42 { padding-top: 42rpx; }
.pt44 { padding-top: 44rpx; }
.pt46 { padding-top: 46rpx; }
.pt48 { padding-top: 48rpx; }
.pt50 { padding-top: 50rpx; }
.pr2 { padding-right: 2rpx; }
.pr4 { padding-right: 4rpx; }
.pr6 { padding-right: 6rpx; }
.pr8 { padding-right: 8rpx; }
.pr10 { padding-right: 10rpx; }
.pr12 { padding-right: 12rpx; }
.pr14 { padding-right: 14rpx; }
.pr16 { padding-right: 16rpx; }
.pr18 { padding-right: 18rpx; }
.pr20 { padding-right: 20rpx; }
.pr22 { padding-right: 22rpx; }
.pr24 { padding-right: 24rpx; }
.pr26 { padding-right: 26rpx; }
.pr28 { padding-right: 28rpx; }
.pr30 { padding-right: 30rpx; }
.pr32 { padding-right: 32rpx; }
.pr34 { padding-right: 34rpx; }
.pr36 { padding-right: 36rpx; }
.pr38 { padding-right: 38rpx; }
.pr40 { padding-right: 40rpx; }
.pr42 { padding-right: 42rpx; }
.pr44 { padding-right: 44rpx; }
.pr46 { padding-right: 46rpx; }
.pr48 { padding-right: 48rpx; }
.pr50 { padding-right: 50rpx; }
.pb2 { padding-bottom: 2rpx; }
.pb4 { padding-bottom: 4rpx; }
.pb6 { padding-bottom: 6rpx; }
.pb8 { padding-bottom: 8rpx; }
.pb10 { padding-bottom: 10rpx; }
.pb12 { padding-bottom: 12rpx; }
.pb14 { padding-bottom: 14rpx; }
.pb16 { padding-bottom: 16rpx; }
.pb18 { padding-bottom: 18rpx; }
.pb20 { padding-bottom: 20rpx; }
.pb22 { padding-bottom: 22rpx; }
.pb24 { padding-bottom: 24rpx; }
.pb26 { padding-bottom: 26rpx; }
.pb28 { padding-bottom: 28rpx; }
.pb30 { padding-bottom: 30rpx; }
.pb32 { padding-bottom: 32rpx; }
.pb34 { padding-bottom: 34rpx; }
.pb36 { padding-bottom: 36rpx; }
.pb38 { padding-bottom: 38rpx; }
.pb40 { padding-bottom: 40rpx; }
.pb42 { padding-bottom: 42rpx; }
.pb44 { padding-bottom: 44rpx; }
.pb46 { padding-bottom: 46rpx; }
.pb48 { padding-bottom: 48rpx; }
.pb50 { padding-bottom: 50rpx; }
.pl2 { padding-left: 2rpx; }
.pl4 { padding-left: 4rpx; }
.pl6 { padding-left: 6rpx; }
.pl8 { padding-left: 8rpx; }
.pl10 { padding-left: 10rpx; }
.pl12 { padding-left: 12rpx; }
.pl14 { padding-left: 14rpx; }
.pl16 { padding-left: 16rpx; }
.pl18 { padding-left: 18rpx; }
.pl20 { padding-left: 20rpx; }
.pl22 { padding-left: 22rpx; }
.pl24 { padding-left: 24rpx; }
.pl26 { padding-left: 26rpx; }
.pl28 { padding-left: 28rpx; }
.pl30 { padding-left: 30rpx; }
.pl32 { padding-left: 32rpx; }
.pl34 { padding-left: 34rpx; }
.pl36 { padding-left: 36rpx; }
.pl38 { padding-left: 38rpx; }
.pl40 { padding-left: 40rpx; }
.pl42 { padding-left: 42rpx; }
.pl44 { padding-left: 44rpx; }
.pl46 { padding-left: 46rpx; }
.pl48 { padding-left: 48rpx; }
.pl50 { padding-left: 50rpx; }
\ No newline at end of file
page,
view,
text,
input,
image,
canvas,
button,
picker,
picker-view,
scroll-view,
textarea {
box-sizing: border-box !important;
margin: 0;
padding: 0;
}
button { border-radius: 0; background: rgba(0, 0, 0, 0); }
button::after { border: none; }
::-webkit-scrollbar { display: none; }
File mode changed
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="shortcut icon" type="image/x-icon" href="https://cdn.uviewui.com/uview/common/favicon.ico">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<!-- 正式发布的时候使用,开发期间不启用。↓ -->
<script src="/static/common/js/touch-emulator.js"></script>
<script>
TouchEmulator();
</script>
<style>
::-webkit-scrollbar{
display: none;
}
</style>
<!-- 正式发布的时候使用,开发期间不启用。↑ -->
<script>
document.addEventListener('DOMContentLoaded', function() {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
})
</script>
<link rel="stylesheet" href="<%= BASE_URL %>static/index.css" />
</head>
<body>
<!-- 该文件为 H5 平台的模板 HTML,并非应用入口。 -->
<!-- 请勿在此文件编写页面代码或直接运行此文件。 -->
<!-- 详见文档:https://uniapp.dcloud.io/collocation/manifest?id=h5-template -->
<noscript>
<strong>本站点必须要开启JavaScript才能运行</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script>
/*BAIDU_STAT*/
</script>
</body>
</html>
.container {
min-height: 100vh;
}
.page-loading {
opacity: 0;
}
.page-ready {
opacity: 100;
}
.card {
border-radius: 30rpx;
background: #FFFFFF;
}
\ No newline at end of file
/* 字体颜色灰度 0% - 100% */
.color-00 { color: #000000; }
.color-0d { color: #0d0d0d; }
.color-1a { color: #1a1a1a; }
.color-26 { color: #262626; }
.color-33 { color: #333333; }
.color-40 { color: #404040; }
.color-4d { color: #4d4d4d; }
.color-59 { color: #595959; }
.color-66 { color: #666666; }
.color-73 { color: #737373; }
.color-80 { color: #808080; }
.color-8c { color: #8c8c8c; }
.color-99 { color: #999999; }
.color-a6 { color: #a6a6a6; }
.color-b3 { color: #b3b3b3; }
.color-bf { color: #bfbfbf; }
.color-cc { color: #cccccc; }
.color-d9 { color: #d9d9d9; }
.color-e5 { color: #e5e5e5; }
.color-f2 { color: #f2f2f2; }
.color-ff { color: #ffffff; }
/* 字体颜色主题 */
.color-eb { color: #EB0B0E; }
/* 字体大小 */
.font-14 { font-size: 14rpx; line-height: 24rpx; }
.font-16 { font-size: 16rpx; line-height: 26rpx; }
.font-18 { font-size: 18rpx; line-height: 28rpx; }
.font-20 { font-size: 20rpx; line-height: 30rpx; }
.font-22 { font-size: 22rpx; line-height: 32rpx; }
.font-24 { font-size: 24rpx; line-height: 34rpx; }
.font-26 { font-size: 26rpx; line-height: 36rpx; }
.font-28 { font-size: 28rpx; line-height: 38rpx; }
.font-30 { font-size: 30rpx; line-height: 40rpx; }
.font-32 { font-size: 32rpx; line-height: 42rpx; }
.font-34 { font-size: 34rpx; line-height: 44rpx; }
.font-36 { font-size: 36rpx; line-height: 46rpx; }
.font-38 { font-size: 38rpx; line-height: 48rpx; }
.font-40 { font-size: 40rpx; line-height: 50rpx; }
.font-42 { font-size: 42rpx; line-height: 52rpx; }
.font-44 { font-size: 44rpx; line-height: 54rpx; }
.font-46 { font-size: 46rpx; line-height: 56rpx; }
.font-48 { font-size: 48rpx; line-height: 58rpx; }
.font-50 { font-size: 50rpx; line-height: 60rpx; }
/* 字体字重 */
.weight-100 { font-weight: 100; }
.weight-200 { font-weight: 200; }
.weight-300 { font-weight: 300; }
.weight-400 { font-weight: 400; }
.weight-600 { font-weight: 500; }
.weight-600 { font-weight: 600; }
.weight-700 { font-weight: 700; }
.weight-800 { font-weight: 800; }
/* 图标大小 */
.icon-14 { width: 14rpx; min-width: 14rpx; height: 14rpx; min-height: 14rpx; }
.icon-16 { width: 16rpx; min-width: 16rpx; height: 16rpx; min-height: 16rpx; }
.icon-18 { width: 18rpx; min-width: 18rpx; height: 18rpx; min-height: 18rpx; }
.icon-20 { width: 20rpx; min-width: 20rpx; height: 20rpx; min-height: 20rpx; }
.icon-22 { width: 22rpx; min-width: 22rpx; height: 22rpx; min-height: 22rpx; }
.icon-24 { width: 24rpx; min-width: 24rpx; height: 24rpx; min-height: 24rpx; }
.icon-26 { width: 26rpx; min-width: 26rpx; height: 26rpx; min-height: 26rpx; }
.icon-28 { width: 28rpx; min-width: 28rpx; height: 28rpx; min-height: 28rpx; }
.icon-30 { width: 30rpx; min-width: 30rpx; height: 30rpx; min-height: 30rpx; }
.icon-32 { width: 32rpx; min-width: 32rpx; height: 32rpx; min-height: 32rpx; }
.icon-34 { width: 34rpx; min-width: 34rpx; height: 34rpx; min-height: 34rpx; }
.icon-36 { width: 36rpx; min-width: 36rpx; height: 36rpx; min-height: 36rpx; }
.icon-38 { width: 38rpx; min-width: 38rpx; height: 38rpx; min-height: 38rpx; }
.icon-40 { width: 40rpx; min-width: 40rpx; height: 40rpx; min-height: 40rpx; }
.icon-42 { width: 42rpx; min-width: 42rpx; height: 42rpx; min-height: 42rpx; }
.icon-44 { width: 44rpx; min-width: 44rpx; height: 44rpx; min-height: 44rpx; }
.icon-46 { width: 46rpx; min-width: 46rpx; height: 46rpx; min-height: 46rpx; }
.icon-48 { width: 48rpx; min-width: 48rpx; height: 48rpx; min-height: 48rpx; }
.icon-50 { width: 50rpx; min-width: 50rpx; height: 50rpx; min-height: 50rpx; }
/* 开发样式 */
.tt { outline: 1rpx red solid; }
\ No newline at end of file
// 基础依赖函数
/**
* @function 是否空数据
* @param { any } value 需要判断的数据
* @returns { boolean }
*/
export function isEmpty(value: any) {
if (['', null, undefined].includes(value)) {
return true
}
const type = dataType(value)
switch (type) {
case 'string':
return false
case 'object':
return !Object.keys(value).length
case 'array':
return !value.length
}
console.error('[tools] function isEmpty')
console.error('value -> ' + JSON.stringify(value))
return false
}
/**
* @function 返回数据类型
* @description
* @param { any } value 需要判断的数据
* @returns { string }
*/
export function dataType(value: any): string {
// objectType 的数值范围:
// [object Null]
// [object Undefined]
// [object String]
// [object Number]
// [object Boolean]
// [object Function]
// [object Date]
// [object Array]
// [object Object]
// [object RegExp]
const objectType = Object.prototype.toString.call(value).toLowerCase()
const regExp = objectType.match(/[a-z]+/gi)
if (regExp) {
return regExp[1]
}
console.error('[tools] dataType')
console.error('value -> ' + value)
return 'unknown'
}
export function urlQuery(url: string) {
const query = decodeURIComponent(url)
}
interface treeNode {
id: string
parent: string
children?: Array<treeNode>
[propName: string]: any
}
interface treeNodeMap {
[propName: string]: any
}
/**
* @function 树节点数组转树结构
* @param { Array } arrayData
* @returns { Array }
*/
export function arrayToTreeByMap(arrayData: Array<treeNode>): Array<treeNode> {
// 生成节点 map 对象
const nodeMap: treeNodeMap = {}
arrayData.map((item: treeNode, index: number) => {
nodeMap[item.id] = item
})
const treeRootList: Array<treeNode> = []
for (let i = 0, l = arrayData.length; i < l; i++) {
const node: treeNode = arrayData[i]
const nodeParent: treeNode = nodeMap[node.parent]
if (nodeParent) {
nodeParent.children ? nodeParent.children.push(node) : (nodeParent.children = [node])
} else {
treeRootList.push(node)
}
}
return treeRootList
}
/**
* @function 树节点数组转树结构
* @param { Array } arrayData
* @param { string } parentId
* @returns { Array }
*/
export function arrayToTreeByParentId(arrayData: Array<treeNode>, parentId: string | number): Array<treeNode> {
const childList: Array<treeNode> = []
arrayData.forEach((item: treeNode, index: number) => {
if (item.parent === parentId) {
item.children = arrayToTreeByParentId(arrayData, item.id)
childList.push(item)
}
})
return childList
}
/**
* 下方引入的为uView UI的集成样式文件,为scss预处理器,其中包含了一些"u-"开头的自定义变量
* 使用的时候,请将下面的一行复制到您的uniapp项目根目录的uni.scss中即可
* uView自定义的css类名和scss变量,均以"u-"开头,不会造成冲突,请放心使用
*/
@import '@/uni_modules/uview-ui/theme.scss';
MIT License
Copyright (c) 2020 www.uviewui.com
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
\ No newline at end of file
<p align="center">
<img alt="logo" src="https://uviewui.com/common/logo.png" width="120" height="120" style="margin-bottom: 10px;">
</p>
<h3 align="center" style="margin: 30px 0 30px;font-weight: bold;font-size:40px;">uView</h3>
<h3 align="center">多平台快速开发的UI框架</h3>
## 说明
uView UI,是[uni-app](https://uniapp.dcloud.io/)生态优秀的UI框架,全面的组件和便捷的工具会让您信手拈来,如鱼得水
## 特性
- 兼容安卓,iOS,微信小程序,H5,QQ小程序,百度小程序,支付宝小程序,头条小程序
- 60+精选组件,功能丰富,多端兼容,让您快速集成,开箱即用
- 众多贴心的JS利器,让您飞镖在手,召之即来,百步穿杨
- 众多的常用页面和布局,让您专注逻辑,事半功倍
- 详尽的文档支持,现代化的演示效果
- 按需引入,精简打包体积
## 安装
```bash
# npm方式安装,插件市场导入无需执行此命令
npm i uview-ui
```
## 快速上手
1. `main.js`引入uView库
```js
// main.js
import uView from 'uview-ui';
Vue.use(uView);
```
2. `App.vue`引入基础样式(注意style标签需声明scss属性支持)
```css
/* App.vue */
<style lang="scss">
@import "uview-ui/index.scss";
</style>
```
3. `uni.scss`引入全局scss变量文件
```css
/* uni.scss */
@import "uview-ui/theme.scss";
```
4. `pages.json`配置easycom规则(按需引入)
```js
// pages.json
{
"easycom": {
// npm安装的方式不需要前面的"@/",下载安装的方式需要"@/"
// npm安装方式
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
// 下载安装方式
// "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
```
请通过[快速上手](https://www.uviewui.com/components/quickstart.html)了解更详细的内容
## 使用方法
配置easycom规则后,自动按需引入,无需`import`组件,直接引用即可。
```html
<template>
<u-button text="按钮"></u-button>
</template>
```
请通过[快速上手](https://www.uviewui.com/components/quickstart.html)了解更详细的内容
## 链接
- [官方文档](https://www.uviewui.com/)
- [更新日志](https://www.www.uviewui.com/components/changelog.html)
- [升级指南](https://www.uviewui.com/components/changelog.html)
- [关于我们](https://www.uviewui.com/cooperation/about.html)
## 预览
您可以通过**微信**扫码,查看最佳的演示效果。
<br>
<br>
<img src="https://uviewui.com/common/weixin_mini_qrcode.png" width="220" height="220" >
## 捐赠uView的研发
uView文档和源码全部开源免费,如果您认为uView帮到了您的开发工作,您可以捐赠uView的研发工作,捐赠无门槛,哪怕是一杯可乐也好(相信这比打赏主播更有意义)。
<img src="https://uviewui.com/common/alipay.png" width="220" ><img style="margin-left: 100px;" src="https://uviewui.com/common/wechat.png" width="220" >
## 版权信息
uView遵循[MIT](https://en.wikipedia.org/wiki/MIT_License)开源协议,意味着您无需支付任何费用,也无需授权,即可将uView应用到您的产品中。
<template>
<uvForm
ref="uForm"
:model="model"
:rules="rules"
:errorType="errorType"
:borderBottom="borderBottom"
:labelPosition="labelPosition"
:labelWidth="labelWidth"
:labelAlign="labelAlign"
:labelStyle="labelStyle"
:customStyle="customStyle"
>
<slot />
</uvForm>
</template>
<script>
/**
* 此组件存在的理由是,在nvue下,u-form被uni-app官方占用了,u-form在nvue中相当于form组件
* 所以在nvue下,取名为u--form,内部其实还是u-form.vue,只不过做一层中转
*/
import uvForm from '../u-form/u-form.vue';
import props from '../u-form/props.js'
export default {
// #ifdef MP-WEIXIN
name: 'u-form',
// #endif
// #ifndef MP-WEIXIN
name: 'u--form',
// #endif
mixins: [uni.$u.mpMixin, props, uni.$u.mixin],
components: {
uvForm
},
created() {
this.children = []
},
methods: {
// 手动设置校验的规则,如果规则中有函数的话,微信小程序中会过滤掉,所以只能手动调用设置规则
setRules(rules) {
this.$refs.uForm.setRules(rules)
},
validate() {
/**
* 在微信小程序中,通过this.$parent拿到的父组件是u--form,而不是其内嵌的u-form
* 导致在u-form组件中,拿不到对应的children数组,从而校验无效,所以这里每次调用u-form组件中的
* 对应方法的时候,在小程序中都先将u--form的children赋值给u-form中的children
*/
// #ifdef MP-WEIXIN
this.setMpData()
// #endif
return this.$refs.uForm.validate()
},
validateField(value, callback) {
// #ifdef MP-WEIXIN
this.setMpData()
// #endif
return this.$refs.uForm.validateField(value, callback)
},
resetFields() {
// #ifdef MP-WEIXIN
this.setMpData()
// #endif
return this.$refs.uForm.resetFields()
},
clearValidate(props) {
// #ifdef MP-WEIXIN
this.setMpData()
// #endif
return this.$refs.uForm.clearValidate(props)
},
setMpData() {
this.$refs.uForm.children = this.children
}
},
}
</script>
<template>
<uvImage
:src="src"
:mode="mode"
:width="width"
:height="height"
:shape="shape"
:radius="radius"
:lazyLoad="lazyLoad"
:showMenuByLongpress="showMenuByLongpress"
:loadingIcon="loadingIcon"
:errorIcon="errorIcon"
:showLoading="showLoading"
:showError="showError"
:fade="fade"
:webp="webp"
:duration="duration"
:bgColor="bgColor"
:customStyle="customStyle"
@click="$emit('click')"
@error="$emit('error')"
@load="$emit('load')"
>
<template v-slot:loading>
<slot name="loading"></slot>
</template>
<template v-slot:error>
<slot name="error"></slot>
</template>
</uvImage>
</template>
<script>
/**
* 此组件存在的理由是,在nvue下,u-image被uni-app官方占用了,u-image在nvue中相当于image组件
* 所以在nvue下,取名为u--image,内部其实还是u-iamge.vue,只不过做一层中转
*/
import uvImage from '../u-image/u-image.vue';
import props from '../u-image/props.js';
export default {
name: 'u--image',
mixins: [uni.$u.mpMixin, props, uni.$u.mixin],
components: {
uvImage
},
}
</script>
\ No newline at end of file
<template>
<uvInput
:value="value"
:type="type"
:fixed="fixed"
:disabled="disabled"
:disabledColor="disabledColor"
:clearable="clearable"
:password="password"
:maxlength="maxlength"
:placeholder="placeholder"
:placeholderClass="placeholderClass"
:placeholderStyle="placeholderStyle"
:showWordLimit="showWordLimit"
:confirmType="confirmType"
:confirmHold="confirmHold"
:holdKeyboard="holdKeyboard"
:focus="focus"
:autoBlur="autoBlur"
:disableDefaultPadding="disableDefaultPadding"
:cursor="cursor"
:cursorSpacing="cursorSpacing"
:selectionStart="selectionStart"
:selectionEnd="selectionEnd"
:adjustPosition="adjustPosition"
:inputAlign="inputAlign"
:fontSize="fontSize"
:color="color"
:prefixIcon="prefixIcon"
:suffixIcon="suffixIcon"
:suffixIconStyle="suffixIconStyle"
:prefixIconStyle="prefixIconStyle"
:border="border"
:readonly="readonly"
:shape="shape"
:customStyle="customStyle"
:formatter="formatter"
@focus="$emit('focus')"
@blur="$emit('blur')"
@keyboardheightchange="$emit('keyboardheightchange')"
@change="e => $emit('change', e)"
@input="e => $emit('input', e)"
@confirm="e => $emit('confirm', e)"
@clear="$emit('clear')"
@click="$emit('click')"
>
<!-- #ifdef MP -->
<slot name="prefix"></slot>
<slot name="suffix"></slot>
<!-- #endif -->
<!-- #ifndef MP -->
<slot name="prefix" slot="prefix"></slot>
<slot name="suffix" slot="suffix"></slot>
<!-- #endif -->
</uvInput>
</template>
<script>
/**
* 此组件存在的理由是,在nvue下,u-input被uni-app官方占用了,u-input在nvue中相当于input组件
* 所以在nvue下,取名为u--input,内部其实还是u-input.vue,只不过做一层中转
*/
import uvInput from '../u-input/u-input.vue';
import props from '../u-input/props.js'
export default {
name: 'u--input',
mixins: [uni.$u.mpMixin, props, uni.$u.mixin],
components: {
uvInput
},
}
</script>
\ No newline at end of file
<template>
<uvText
:type="type"
:show="show"
:text="text"
:prefixIcon="prefixIcon"
:suffixIcon="suffixIcon"
:mode="mode"
:href="href"
:format="format"
:call="call"
:openType="openType"
:bold="bold"
:block="block"
:lines="lines"
:color="color"
:decoration="decoration"
:size="size"
:iconStyle="iconStyle"
:margin="margin"
:lineHeight="lineHeight"
:align="align"
:wordWrap="wordWrap"
:customStyle="customStyle"
@click="$emit('click')"
></uvText>
</template>
<script>
/**
* 此组件存在的理由是,在nvue下,u-text被uni-app官方占用了,u-text在nvue中相当于input组件
* 所以在nvue下,取名为u--input,内部其实还是u-text.vue,只不过做一层中转
* 不使用v-bind="$attrs",而是分开独立写传参,是因为微信小程序不支持此写法
*/
import uvText from "../u-text/u-text.vue";
import props from "../u-text/props.js";
export default {
name: "u--text",
mixins: [uni.$u.mpMixin, props, uni.$u.mixin],
components: {
uvText,
},
};
</script>
<template>
<uvTextarea
:value="value"
:placeholder="placeholder"
:height="height"
:confirmType="confirmType"
:disabled="disabled"
:count="count"
:focus="focus"
:autoHeight="autoHeight"
:fixed="fixed"
:cursorSpacing="cursorSpacing"
:cursor="cursor"
:showConfirmBar="showConfirmBar"
:selectionStart="selectionStart"
:selectionEnd="selectionEnd"
:adjustPosition="adjustPosition"
:disableDefaultPadding="disableDefaultPadding"
:holdKeyboard="holdKeyboard"
:maxlength="maxlength"
:border="border"
:customStyle="customStyle"
:formatter="formatter"
@focus="e => $emit('focus')"
@blur="e => $emit('blur')"
@linechange="e => $emit('linechange', e)"
@confirm="e => $emit('confirm')"
@input="e => $emit('input', e)"
@keyboardheightchange="e => $emit('keyboardheightchange')"
></uvTextarea>
</template>
<script>
/**
* 此组件存在的理由是,在nvue下,u--textarea被uni-app官方占用了,u-textarea在nvue中相当于textarea组件
* 所以在nvue下,取名为u--textarea,内部其实还是u-textarea.vue,只不过做一层中转
*/
import uvTextarea from '../u-textarea/u-textarea.vue';
import props from '../u-textarea/props.js'
export default {
name: 'u--textarea',
mixins: [uni.$u.mpMixin, props, uni.$u.mixin],
components: {
uvTextarea
},
}
</script>
export default {
props: {
// 操作菜单是否展示 (默认false)
show: {
type: Boolean,
default: uni.$u.props.actionSheet.show
},
// 标题
title: {
type: String,
default: uni.$u.props.actionSheet.title
},
// 选项上方的描述信息
description: {
type: String,
default: uni.$u.props.actionSheet.description
},
// 数据
actions: {
type: Array,
default: uni.$u.props.actionSheet.actions
},
// 取消按钮的文字,不为空时显示按钮
cancelText: {
type: String,
default: uni.$u.props.actionSheet.cancelText
},
// 点击某个菜单项时是否关闭弹窗
closeOnClickAction: {
type: Boolean,
default: uni.$u.props.actionSheet.closeOnClickAction
},
// 处理底部安全区(默认true)
safeAreaInsetBottom: {
type: Boolean,
default: uni.$u.props.actionSheet.safeAreaInsetBottom
},
// 小程序的打开方式
openType: {
type: String,
default: uni.$u.props.actionSheet.openType
},
// 点击遮罩是否允许关闭 (默认true)
closeOnClickOverlay: {
type: Boolean,
default: uni.$u.props.actionSheet.closeOnClickOverlay
},
// 圆角值
round: {
type: [Boolean, String, Number],
default: uni.$u.props.actionSheet.round
}
}
}
<template>
<u-popup
:show="show"
mode="bottom"
@close="closeHandler"
:safeAreaInsetBottom="safeAreaInsetBottom"
:round="round"
>
<view class="u-action-sheet">
<view
class="u-action-sheet__header"
v-if="title"
>
<text class="u-action-sheet__header__title u-line-1">{{title}}</text>
<view
class="u-action-sheet__header__icon-wrap"
@tap.stop="cancel"
>
<u-icon
name="close"
size="17"
color="#c8c9cc"
bold
></u-icon>
</view>
</view>
<text
class="u-action-sheet__description"
:style="[{
marginTop: `${title && description ? 0 : '18px'}`
}]"
v-if="description"
>{{description}}</text>
<slot>
<u-line v-if="description"></u-line>
<view class="u-action-sheet__item-wrap">
<template v-for="(item, index) in actions">
<!-- #ifdef MP -->
<button
:key="index"
class="u-reset-button"
:openType="item.openType"
@getuserinfo="onGetUserInfo"
@contact="onContact"
@getphonenumber="onGetPhoneNumber"
@error="onError"
@launchapp="onLaunchApp"
@opensetting="onOpenSetting"
:lang="lang"
:session-from="sessionFrom"
:send-message-title="sendMessageTitle"
:send-message-path="sendMessagePath"
:send-message-img="sendMessageImg"
:show-message-card="showMessageCard"
:app-parameter="appParameter"
@tap="selectHandler(index)"
:hover-class="!item.disabled && !item.loading ? 'u-action-sheet--hover' : ''"
>
<!-- #endif -->
<view
class="u-action-sheet__item-wrap__item"
@tap.stop="selectHandler(index)"
:hover-class="!item.disabled && !item.loading ? 'u-action-sheet--hover' : ''"
:hover-stay-time="150"
>
<template v-if="!item.loading">
<text
class="u-action-sheet__item-wrap__item__name"
:style="[itemStyle(index)]"
>{{ item.name }}</text>
<text
v-if="item.subname"
class="u-action-sheet__item-wrap__item__subname"
>{{ item.subname }}</text>
</template>
<u-loading-icon
v-else
custom-class="van-action-sheet__loading"
size="18"
mode="circle"
/>
</view>
<!-- #ifdef MP -->
</button>
<!-- #endif -->
<u-line v-if="index !== actions.length - 1"></u-line>
</template>
</view>
</slot>
<u-gap
bgColor="#eaeaec"
height="6"
v-if="cancelText"
></u-gap>
<view hover-class="u-action-sheet--hover">
<text
@touchmove.stop.prevent
:hover-stay-time="150"
v-if="cancelText"
class="u-action-sheet__cancel-text"
@tap="cancel"
>{{cancelText}}</text>
</view>
</view>
</u-popup>
</template>
<script>
import openType from '../../libs/mixin/openType'
import button from '../../libs/mixin/button'
import props from './props.js';
/**
* ActionSheet 操作菜单
* @description 本组件用于从底部弹出一个操作菜单,供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI,配置更加灵活,所有平台都表现一致。
* @tutorial https://www.uviewui.com/components/actionSheet.html
*
* @property {Boolean} show 操作菜单是否展示 (默认 false )
* @property {String} title 操作菜单标题
* @property {String} description 选项上方的描述信息
* @property {Array<Object>} actions 按钮的文字数组,见官方文档示例
* @property {String} cancelText 取消按钮的提示文字,不为空时显示按钮
* @property {Boolean} closeOnClickAction 点击某个菜单项时是否关闭弹窗 (默认 true )
* @property {Boolean} safeAreaInsetBottom 处理底部安全区 (默认 true )
* @property {String} openType 小程序的打开方式 (contact | launchApp | getUserInfo | openSetting |getPhoneNumber |error )
* @property {Boolean} closeOnClickOverlay 点击遮罩是否允许关闭 (默认 true )
* @property {Number|String} round 圆角值,默认无圆角 (默认 0 )
* @property {String} lang 指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文
* @property {String} sessionFrom 会话来源,openType="contact"时有效
* @property {String} sendMessageTitle 会话内消息卡片标题,openType="contact"时有效
* @property {String} sendMessagePath 会话内消息卡片点击跳转小程序路径,openType="contact"时有效
* @property {String} sendMessageImg 会话内消息卡片图片,openType="contact"时有效
* @property {Boolean} showMessageCard 是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示"可能要发送的小程序"提示,用户点击后可以快速发送小程序消息,openType="contact"时有效 (默认 false )
* @property {String} appParameter 打开 APP 时,向 APP 传递的参数,openType=launchApp 时有效
*
* @event {Function} select 点击ActionSheet列表项时触发
* @event {Function} close 点击取消按钮时触发
* @event {Function} getuserinfo 用户点击该按钮时,会返回获取到的用户信息,回调的 detail 数据与 wx.getUserInfo 返回的一致,openType="getUserInfo"时有效
* @event {Function} contact 客服消息回调,openType="contact"时有效
* @event {Function} getphonenumber 获取用户手机号回调,openType="getPhoneNumber"时有效
* @event {Function} error 当使用开放能力时,发生错误的回调,openType="error"时有效
* @event {Function} launchapp 打开 APP 成功的回调,openType="launchApp"时有效
* @event {Function} opensetting 在打开授权设置页后回调,openType="openSetting"时有效
* @example <u-action-sheet :actions="list" :title="title" :show="show"></u-action-sheet>
*/
export default {
name: "u-action-sheet",
// 一些props参数和methods方法,通过mixin混入,因为其他文件也会用到
mixins: [openType, button, uni.$u.mixin, props],
data() {
return {
}
},
computed: {
// 操作项目的样式
itemStyle() {
return (index) => {
let style = {};
if (this.actions[index].color) style.color = this.actions[index].color
if (this.actions[index].fontSize) style.fontSize = uni.$u.addUnit(this.actions[index].fontSize)
// 选项被禁用的样式
if (this.actions[index].disabled) style.color = '#c0c4cc'
return style;
}
},
},
methods: {
closeHandler() {
// 允许点击遮罩关闭时,才发出close事件
if(this.closeOnClickOverlay) {
this.$emit('close')
}
},
// 点击取消按钮
cancel() {
this.$emit('close')
},
selectHandler(index) {
const item = this.actions[index]
if (item && !item.disabled && !item.loading) {
this.$emit('select', item)
if (this.closeOnClickAction) {
this.$emit('close')
}
}
},
}
}
</script>
<style lang="scss" scoped>
@import "../../libs/css/components.scss";
$u-action-sheet-reset-button-width:100% !default;
$u-action-sheet-title-font-size: 16px !default;
$u-action-sheet-title-padding: 12px 30px !default;
$u-action-sheet-title-color: $u-main-color !default;
$u-action-sheet-header-icon-wrap-right:15px !default;
$u-action-sheet-header-icon-wrap-top:15px !default;
$u-action-sheet-description-font-size:13px !default;
$u-action-sheet-description-color:14px !default;
$u-action-sheet-description-margin: 18px 15px !default;
$u-action-sheet-item-wrap-item-padding:15px !default;
$u-action-sheet-item-wrap-name-font-size:16px !default;
$u-action-sheet-item-wrap-subname-font-size:13px !default;
$u-action-sheet-item-wrap-subname-color: #c0c4cc !default;
$u-action-sheet-item-wrap-subname-margin-top:10px !default;
$u-action-sheet-cancel-text-font-size:16px !default;
$u-action-sheet-cancel-text-color:$u-content-color !default;
$u-action-sheet-cancel-text-font-size:15px !default;
$u-action-sheet-cancel-text-hover-background-color:rgb(242, 243, 245) !default;
.u-reset-button {
width: $u-action-sheet-reset-button-width;
}
.u-action-sheet {
text-align: center;
&__header {
position: relative;
padding: $u-action-sheet-title-padding;
&__title {
font-size: $u-action-sheet-title-font-size;
color: $u-action-sheet-title-color;
font-weight: bold;
text-align: center;
}
&__icon-wrap {
position: absolute;
right: $u-action-sheet-header-icon-wrap-right;
top: $u-action-sheet-header-icon-wrap-top;
}
}
&__description {
font-size: $u-action-sheet-description-font-size;
color: $u-tips-color;
margin: $u-action-sheet-description-margin;
text-align: center;
}
&__item-wrap {
&__item {
padding: $u-action-sheet-item-wrap-item-padding;
@include flex;
align-items: center;
justify-content: center;
flex-direction: column;
&__name {
font-size: $u-action-sheet-item-wrap-name-font-size;
color: $u-main-color;
text-align: center;
}
&__subname {
font-size: $u-action-sheet-item-wrap-subname-font-size;
color: $u-action-sheet-item-wrap-subname-color;
margin-top: $u-action-sheet-item-wrap-subname-margin-top;
text-align: center;
}
}
}
&__cancel-text {
font-size: $u-action-sheet-cancel-text-font-size;
color: $u-action-sheet-cancel-text-color;
text-align: center;
padding: $u-action-sheet-cancel-text-font-size;
}
&--hover {
background-color: $u-action-sheet-cancel-text-hover-background-color;
}
}
</style>
export default {
props: {
// 图片地址,Array<String>|Array<Object>形式
urls: {
type: Array,
default: uni.$u.props.album.urls
},
// 指定从数组的对象元素中读取哪个属性作为图片地址
keyName: {
type: String,
default: uni.$u.props.album.keyName
},
// 单图时,图片长边的长度
singleSize: {
type: [String, Number],
default: uni.$u.props.album.singleSize
},
// 多图时,图片边长
multipleSize: {
type: [String, Number],
default: uni.$u.props.album.multipleSize
},
// 多图时,图片水平和垂直之间的间隔
space: {
type: [String, Number],
default: uni.$u.props.album.space
},
// 单图时,图片缩放裁剪的模式
singleMode: {
type: String,
default: uni.$u.props.album.singleMode
},
// 多图时,图片缩放裁剪的模式
multipleMode: {
type: String,
default: uni.$u.props.album.multipleMode
},
// 最多展示的图片数量,超出时最后一个位置将会显示剩余图片数量
maxCount: {
type: [String, Number],
default: uni.$u.props.album.maxCount
},
// 是否可以预览图片
previewFullImage: {
type: Boolean,
default: uni.$u.props.album.previewFullImage
},
// 每行展示图片数量,如设置,singleSize和multipleSize将会无效
rowCount: {
type: [String, Number],
default: uni.$u.props.album.rowCount
},
// 超出maxCount时是否显示查看更多的提示
showMore: {
type: Boolean,
default: uni.$u.props.album.showMore
}
}
}
export default {
props: {
// 显示文字
title: {
type: String,
default: uni.$u.props.alert.title
},
// 主题,success/warning/info/error
type: {
type: String,
default: uni.$u.props.alert.type
},
// 辅助性文字
description: {
type: String,
default: uni.$u.props.alert.description
},
// 是否可关闭
closable: {
type: Boolean,
default: uni.$u.props.alert.closable
},
// 是否显示图标
showIcon: {
type: Boolean,
default: uni.$u.props.alert.showIcon
},
// 浅或深色调,light-浅色,dark-深色
effect: {
type: String,
default: uni.$u.props.alert.effect
},
// 文字是否居中
center: {
type: Boolean,
default: uni.$u.props.alert.center
},
// 字体大小
fontSize: {
type: [String, Number],
default: uni.$u.props.alert.fontSize
}
}
}
<template>
<u-transition
mode="fade"
:show="show"
>
<view
class="u-alert"
:class="[`u-alert--${type}--${effect}`]"
@tap.stop="clickHandler"
:style="[$u.addStyle(customStyle)]"
>
<view
class="u-alert__icon"
v-if="showIcon"
>
<u-icon
:name="iconName"
size="18"
:color="iconColor"
></u-icon>
</view>
<view
class="u-alert__content"
:style="[{
paddingRight: closable ? '20px' : 0
}]"
>
<text
class="u-alert__content__title"
v-if="title"
:style="[{
fontSize: $u.addUnit(fontSize),
textAlign: center ? 'center' : 'left'
}]"
:class="[effect === 'dark' ? 'u-alert__text--dark' : `u-alert__text--${type}--light`]"
>{{ title }}</text>
<text
class="u-alert__content__desc"
v-if="description"
:style="[{
fontSize: $u.addUnit(fontSize),
textAlign: center ? 'center' : 'left'
}]"
:class="[effect === 'dark' ? 'u-alert__text--dark' : `u-alert__text--${type}--light`]"
>{{ description }}</text>
</view>
<view
class="u-alert__close"
v-if="closable"
@tap.stop="closeHandler"
>
<u-icon
name="close"
:color="iconColor"
size="15"
></u-icon>
</view>
</view>
</u-transition>
</template>
<script>
import props from './props.js';
/**
* Alert 警告提示
* @description 警告提示,展现需要关注的信息。
* @tutorial https://www.uviewui.com/components/alertTips.html
*
* @property {String} title 显示的文字
* @property {String} type 使用预设的颜色 (默认 'warning' )
* @property {String} description 辅助性文字,颜色比title浅一点,字号也小一点,可选
* @property {Boolean} closable 关闭按钮(默认为叉号icon图标) (默认 false )
* @property {Boolean} showIcon 是否显示左边的辅助图标 ( 默认 false )
* @property {String} effect 多图时,图片缩放裁剪的模式 (默认 'light' )
* @property {Boolean} center 文字是否居中 (默认 false )
* @property {String | Number} fontSize 字体大小 (默认 14 )
* @property {Object} customStyle 定义需要用到的外部样式
* @event {Function} click 点击组件时触发
* @example <u-alert :title="title" type = "warning" :closable="closable" :description = "description"></u-alert>
*/
export default {
name: 'u-alert',
mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
data() {
return {
show: true
}
},
computed: {
iconColor() {
return this.effect === 'light' ? this.type : '#fff'
},
// 不同主题对应不同的图标
iconName() {
switch (this.type) {
case 'success':
return 'checkmark-circle-fill';
break;
case 'error':
return 'close-circle-fill';
break;
case 'warning':
return 'error-circle-fill';
break;
case 'info':
return 'info-circle-fill';
break;
case 'primary':
return 'more-circle-fill';
break;
default:
return 'error-circle-fill';
}
}
},
methods: {
// 点击内容
clickHandler() {
this.$emit('click')
},
// 点击关闭按钮
closeHandler() {
this.show = false
}
}
}
</script>
<style lang="scss" scoped>
@import "../../libs/css/components.scss";
.u-alert {
position: relative;
background-color: $u-primary;
padding: 8px 10px;
@include flex(row);
align-items: center;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
&--primary--dark {
background-color: $u-primary;
}
&--primary--light {
background-color: #ecf5ff;
}
&--error--dark {
background-color: $u-error;
}
&--error--light {
background-color: #FEF0F0;
}
&--success--dark {
background-color: $u-success;
}
&--success--light {
background-color: #f5fff0;
}
&--warning--dark {
background-color: $u-warning;
}
&--warning--light {
background-color: #FDF6EC;
}
&--info--dark {
background-color: $u-info;
}
&--info--light {
background-color: #f4f4f5;
}
&__icon {
margin-right: 5px;
}
&__content {
@include flex(column);
flex: 1;
&__title {
color: $u-main-color;
font-size: 14px;
font-weight: bold;
color: #fff;
margin-bottom: 2px;
}
&__desc {
color: $u-main-color;
font-size: 14px;
flex-wrap: wrap;
color: #fff;
}
}
&__title--dark,
&__desc--dark {
color: #FFFFFF;
}
&__text--primary--light,
&__text--primary--light {
color: $u-primary;
}
&__text--success--light,
&__text--success--light {
color: $u-success;
}
&__text--warning--light,
&__text--warning--light {
color: $u-warning;
}
&__text--error--light,
&__text--error--light {
color: $u-error;
}
&__text--info--light,
&__text--info--light {
color: $u-info;
}
&__close {
position: absolute;
top: 11px;
right: 10px;
}
}
</style>
export default {
props: {
// 头像图片组
urls: {
type: Array,
default: uni.$u.props.avatarGroup.urls
},
// 最多展示的头像数量
maxCount: {
type: [String, Number],
default: uni.$u.props.avatarGroup.maxCount
},
// 头像形状
shape: {
type: String,
default: uni.$u.props.avatarGroup.shape
},
// 图片裁剪模式
mode: {
type: String,
default: uni.$u.props.avatarGroup.mode
},
// 超出maxCount时是否显示查看更多的提示
showMore: {
type: Boolean,
default: uni.$u.props.avatarGroup.showMore
},
// 头像大小
size: {
type: [String, Number],
default: uni.$u.props.avatarGroup.size
},
// 指定从数组的对象元素中读取哪个属性作为图片地址
keyName: {
type: String,
default: uni.$u.props.avatarGroup.keyName
},
// 头像之间的遮挡比例
gap: {
type: [String, Number],
validator(value) {
return value >= 0 && value <= 1
},
default: uni.$u.props.avatarGroup.gap
},
// 需额外显示的值
extraValue: {
type: [Number, String],
default: uni.$u.props.avatarGroup.extraValue
}
}
}
<template>
<view class="u-avatar-group">
<view
class="u-avatar-group__item"
v-for="(item, index) in showUrl"
:key="index"
:style="{
marginLeft: index === 0 ? 0 : $u.addUnit(-size * gap)
}"
>
<u-avatar
:size="size"
:shape="shape"
:mode="mode"
:src="$u.test.object(item) ? keyName && item[keyName] || item.url : item"
></u-avatar>
<view
class="u-avatar-group__item__show-more"
v-if="showMore && index === showUrl.length - 1 && (urls.length > maxCount || extraValue > 0)"
@tap="clickHandler"
>
<u--text
color="#ffffff"
:size="size * 0.4"
:text="`+${extraValue || urls.length - showUrl.length}`"
align="center"
customStyle="justify-content: center"
></u--text>
</view>
</view>
</view>
</template>
<script>
import props from './props.js';
/**
* AvatarGroup 头像组
* @description 本组件一般用于展示头像的地方,如个人中心,或者评论列表页的用户头像展示等场所。
* @tutorial https://www.uviewui.com/components/avatar.html
*
* @property {Array} urls 头像图片组 (默认 [] )
* @property {String | Number} maxCount 最多展示的头像数量 ( 默认 5 )
* @property {String} shape 头像形状( 'circle' (默认) | 'square' )
* @property {String} mode 图片裁剪模式(默认 'scaleToFill' )
* @property {Boolean} showMore 超出maxCount时是否显示查看更多的提示 (默认 true )
* @property {String | Number} size 头像大小 (默认 40 )
* @property {String} keyName 指定从数组的对象元素中读取哪个属性作为图片地址
* @property {String | Number} gap 头像之间的遮挡比例(0.4代表遮挡40%) (默认 0.5 )
* @property {String | Number} extraValue 需额外显示的值
* @event {Function} showMore 头像组更多点击
* @example <u-avatar-group:urls="urls" size="35" gap="0.4" ></u-avatar-group:urls=>
*/
export default {
name: 'u-avatar-group',
mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
data() {
return {
}
},
computed: {
showUrl() {
return this.urls.slice(0, this.maxCount)
}
},
methods: {
clickHandler() {
this.$emit('showMore')
}
},
}
</script>
<style lang="scss" scoped>
@import "../../libs/css/components.scss";
.u-avatar-group {
@include flex;
&__item {
margin-left: -10px;
position: relative;
&--no-indent {
// 如果你想质疑作者不会使用:first-child,说明你太年轻,因为nvue不支持
margin-left: 0;
}
&__show-more {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.3);
@include flex;
align-items: center;
justify-content: center;
border-radius: 100px;
}
}
}
</style>
export default {
props: {
// 头像图片路径(不能为相对路径)
src: {
type: String,
default: uni.$u.props.avatar.src
},
// 头像形状,circle-圆形,square-方形
shape: {
type: String,
default: uni.$u.props.avatar.shape
},
// 头像尺寸
size: {
type: [String, Number],
default: uni.$u.props.avatar.size
},
// 裁剪模式
mode: {
type: String,
default: uni.$u.props.avatar.mode
},
// 显示的文字
text: {
type: String,
default: uni.$u.props.avatar.text
},
// 背景色
bgColor: {
type: String,
default: uni.$u.props.avatar.bgColor
},
// 文字颜色
color: {
type: String,
default: uni.$u.props.avatar.color
},
// 文字大小
fontSize: {
type: [String, Number],
default: uni.$u.props.avatar.fontSize
},
// 显示的图标
icon: {
type: String,
default: uni.$u.props.avatar.icon
},
// 显示小程序头像,只对百度,微信,QQ小程序有效
mpAvatar: {
type: Boolean,
default: uni.$u.props.avatar.mpAvatar
},
// 是否使用随机背景色
randomBgColor: {
type: Boolean,
default: uni.$u.props.avatar.randomBgColor
},
// 加载失败的默认头像(组件有内置默认图片)
defaultUrl: {
type: String,
default: uni.$u.props.avatar.defaultUrl
},
// 如果配置了randomBgColor为true,且配置了此值,则从默认的背景色数组中取出对应索引的颜色值,取值0-19之间
colorIndex: {
type: [String, Number],
// 校验参数规则,索引在0-19之间
validator(n) {
return uni.$u.test.range(n, [0, 19]) || n === ''
},
default: uni.$u.props.avatar.colorIndex
},
// 组件标识符
name: {
type: String,
default: uni.$u.props.avatar.name
}
}
}
<template>
<view
class="u-avatar"
:class="[`u-avatar--${shape}`]"
:style="[{
backgroundColor: (text || icon) ? (randomBgColor ? colors[colorIndex !== '' ? colorIndex : $u.random(0, 19)] : bgColor) : 'transparent',
width: $u.addUnit(size),
height: $u.addUnit(size),
}, $u.addStyle(customStyle)]"
@tap="clickHandler"
>
<slot>
<!-- #ifdef MP-WEIXIN || MP-QQ || MP-BAIDU -->
<open-data
v-if="mpAvatar && allowMp"
type="userAvatarUrl"
:style="[{
width: $u.addUnit(size),
height: $u.addUnit(size)
}]"
/>
<!-- #endif -->
<!-- #ifndef MP-WEIXIN && MP-QQ && MP-BAIDU -->
<template v-if="mpAvatar && allowMp"></template>
<!-- #endif -->
<u-icon
v-else-if="icon"
:name="icon"
:size="fontSize"
:color="color"
></u-icon>
<u--text
v-else-if="text"
:text="text"
:size="fontSize"
:color="color"
align="center"
customStyle="justify-content: center"
></u--text>
<image
class="u-avatar__image"
v-else
:class="[`u-avatar__image--${shape}`]"
:src="avatarUrl || defaultUrl"
:mode="mode"
@error="errorHandler"
:style="[{
width: $u.addUnit(size),
height: $u.addUnit(size)
}]"
></image>
</slot>
</view>
</template>
<script>
import props from './props.js';
const base64Avatar =
"data:image/jpg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjREMEQwRkY0RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjREMEQwRkY1RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEQwRDBGRjJGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEQwRDBGRjNGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8fAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCADIAMgDAREAAhEBAxEB/8QAcQABAQEAAwEBAAAAAAAAAAAAAAUEAQMGAgcBAQAAAAAAAAAAAAAAAAAAAAAQAAIBAwICBgkDBQAAAAAAAAABAhEDBCEFMVFBYXGREiKBscHRMkJSEyOh4XLxYjNDFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A/fAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHbHFyZ/Dam+yLA+Z2L0Pjtyj2poD4AAAAAAAAAAAAAAAAAAAAAAAAKWFs9y6lcvvwQeqj8z9wFaziY1n/HbUX9XF97A7QAGXI23EvJ1goyfzR0YEfN269jeZ+a03pNe0DIAAAAAAAAAAAAAAAAAAAACvtO3RcVkXlWutuL9YFYAAAAAOJRjKLjJVi9GmB5/csH/mu1h/in8PU+QGMAAAAAAAAAAAAAAAAAAaMDG/6MmMH8C80+xAelSSVFolwQAAAAAAAHVlWI37ErUulaPk+hgeYnCUJuElSUXRrrQHAAAAAAAAAAAAAAAAABa2Oz4bM7r4zdF2ICmAAAAAAAAAg7zZ8GX41wuJP0rRgYAAAAAAAAAAAAAAAAAD0m2R8ODaXU33tsDSAAAAAAAAAlb9HyWZcnJd9PcBHAAAAAAAAAAAAAAAAAPS7e64Vn+KA0AAAAAAAAAJm+v8Ftf3ewCKAAAAAAAAAAAAAAAAAX9muqeGo9NttP06+0DcAAAAAAAAAjb7dTu2ra+VOT9P8AQCWAAAAAAAAAAAAAAAAAUNmyPt5Ltv4bui/kuAF0AAAAAAADiUlGLlJ0SVW+oDzOXfd/Ind6JPRdS0QHSAAAAAAAAAAAAAAAAAE2nVaNcGB6Lbs6OTao9LsF51z60BrAAAAAABJ3jOVHjW3r/sa9QEgAAAAAAAAAAAAAAAAAAAPu1duWriuW34ZR4MC9hbnZyEoy8l36XwfYBsAAADaSq9EuLAlZ+7xSdrGdW9Hc5dgEdtt1erfFgAAAAAAAAAAAAAAAAADVjbblX6NR8MH80tEBRs7HYivyzlN8lovaBPzduvY0m6eK10TXtAyAarO55lpJK54orolr+4GqO/Xaea1FvqbXvA+Z77kNeW3GPbV+4DJfzcm/pcm3H6Vou5AdAFLC2ed2Pjv1txa8sV8T6wOL+yZEKu1JXFy4MDBOE4ScZxcZLinoB8gAAAAAAAAAAAB242LeyJ+C3GvN9C7QLmJtePYpKS+5c+p8F2IDYAANJqj1T4oCfk7Nj3G5Wn9qXJax7gJ93Z82D8sVNc4v30A6Xg5i42Z+iLfqARwcyT0sz9MWvWBps7LlTf5Grce9/oBTxdtxseklHxT+uWr9AGoAB138ezfj4bsFJdD6V2MCPm7RdtJzs1uW1xXzL3gTgAAAAAAAAADRhYc8q74I6RWs5ckB6GxYtWLat21SK731sDsAAAAAAAAAAAAAAAASt021NO/YjrxuQXT1oCOAAAAAAABzGLlJRSq26JAelwsWONYjbXxcZvmwO8AAAAAAAAAAAAAAAAAAef3TEWPkVivx3NY9T6UBiAAAAAABo2+VmGXblddIJ8eivRUD0oAAAAAAAAAAAAAAAAAAAYt4tKeFKVNYNSXfRgefAAAAAAAAr7VuSSWPedKaW5v1MCsAAAAAAAAAAAAAAAAAAIe6bj96Ts2n+JPzSXzP3ATgAAAAAAAAFbbt1UUrOQ9FpC4/UwK6aaqtU+DAAAAAAAAAAAAAAA4lKMIuUmoxWrb4ARNx3R3q2rLpa4Sl0y/YCcAAAAAAAAAAANmFud7G8r89r6X0dgFvGzLGRGtuWvTF6NAdwAAAAAAAAAAAy5W442PVN+K59EePp5ARMvOv5MvO6QXCC4AZwAAAAAAAAAAAAAcxlKLUotprg1owN+PvORborq+7Hnwl3gUbO74VzRydt8pKn68ANcJwmqwkpLmnUDkAAAAfNy9atqtyagut0AxXt5xIV8Fbj6lRd7Am5G65V6qUvtwfyx94GMAAAAAAAAAAAAAAAAAAAOU2nVOj5gdsc3LiqRvTpyqwOxbnnrhdfpSfrQB7pnv/AGvuS9gHXPMy5/Fem1yq0v0A6W29XqwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAf//Z";
/**
* Avatar 头像
* @description 本组件一般用于展示头像的地方,如个人中心,或者评论列表页的用户头像展示等场所。
* @tutorial https://www.uviewui.com/components/avatar.html
*
* @property {String} src 头像路径,如加载失败,将会显示默认头像(不能为相对路径)
* @property {String} shape 头像形状 ( circle (默认) | square)
* @property {String | Number} size 头像尺寸,可以为指定字符串(large, default, mini),或者数值 (默认 40 )
* @property {String} mode 头像图片的裁剪类型,与uni的image组件的mode参数一致,如效果达不到需求,可尝试传widthFix值 (默认 'scaleToFill' )
* @property {String} text 用文字替代图片,级别优先于src
* @property {String} bgColor 背景颜色,一般显示文字时用 (默认 '#c0c4cc' )
* @property {String} color 文字颜色 (默认 '#ffffff' )
* @property {String | Number} fontSize 文字大小 (默认 18 )
* @property {String} icon 显示的图标
* @property {Boolean} mpAvatar 显示小程序头像,只对百度,微信,QQ小程序有效 (默认 false )
* @property {Boolean} randomBgColor 是否使用随机背景色 (默认 false )
* @property {String} defaultUrl 加载失败的默认头像(组件有内置默认图片)
* @property {String | Number} colorIndex 如果配置了randomBgColor为true,且配置了此值,则从默认的背景色数组中取出对应索引的颜色值,取值0-19之间
* @property {String} name 组件标识符 (默认 'level' )
* @property {Object} customStyle 定义需要用到的外部样式
*
* @event {Function} click 点击组件时触发 index: 用户传递的标识符
* @example <u-avatar :src="src" mode="square"></u-avatar>
*/
export default {
name: 'u-avatar',
mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
data() {
return {
// 如果配置randomBgColor参数为true,在图标或者文字的模式下,会随机从中取出一个颜色值当做背景色
colors: ['#ffb34b', '#f2bba9', '#f7a196', '#f18080', '#88a867', '#bfbf39', '#89c152', '#94d554', '#f19ec2',
'#afaae4', '#e1b0df', '#c38cc1', '#72dcdc', '#9acdcb', '#77b1cc', '#448aca', '#86cefa', '#98d1ee',
'#73d1f1',
'#80a7dc'
],
avatarUrl: this.src,
allowMp: false
}
},
watch: {
// 监听头像src的变化,赋值给内部的avatarUrl变量,因为图片加载失败时,需要修改图片的src为默认值
// 而组件内部不能直接修改props的值,所以需要一个中间变量
src: {
immediate: true,
handler(newVal) {
this.avatarUrl = newVal
// 如果没有传src,则主动触发error事件,用于显示默认的头像,否则src为''空字符等的时候,会无内容展示
if(!newVal) {
this.errorHandler()
}
}
}
},
computed: {
imageStyle() {
const style = {}
return style
}
},
created() {
this.init()
},
methods: {
init() {
// 目前只有这几个小程序平台具有open-data标签
// 其他平台可以通过uni.getUserInfo类似接口获取信息,但是需要弹窗授权(首次),不合符组件逻辑
// 故目前自动获取小程序头像只支持这几个平台
// #ifdef MP-WEIXIN || MP-QQ || MP-BAIDU
this.allowMp = true
// #endif
},
// 判断传入的name属性,是否图片路径,只要带有"/"均认为是图片形式
isImg() {
return this.src.indexOf('/') !== -1
},
// 图片加载时失败时触发
errorHandler() {
this.avatarUrl = this.defaultUrl || base64Avatar
},
clickHandler() {
this.$emit('click', this.name)
}
}
}
</script>
<style lang="scss" scoped>
@import "../../libs/css/components.scss";
.u-avatar {
@include flex;
align-items: center;
justify-content: center;
&--circle {
border-radius: 100px;
}
&--square {
border-radius: 4px;
}
&__image {
&--circle {
border-radius: 100px;
}
&--square {
border-radius: 4px;
}
}
}
</style>
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment