| @ -1,125 +0,0 @@ | |||||
| <template> | |||||
| <!-- <view class="navbar" | |||||
| :style="{backgroundColor : bgColor}"> --> | |||||
| <view class="title" | |||||
| :style="{backgroundColor : bgColor}"> | |||||
| <view class="left"> | |||||
| <uv-icon name="arrow-left" | |||||
| v-if="leftClick" | |||||
| @click="$emit('leftClick')" | |||||
| color="#333" size="46rpx"></uv-icon> | |||||
| </view> | |||||
| <view>{{ title }}</view> | |||||
| <view class="icon"> | |||||
| <uv-icon name="search" | |||||
| v-if="isSearch" | |||||
| color="#333" size="58rpx"></uv-icon> | |||||
| <uv-icon name="plus-circle" color="#333" | |||||
| v-if="isPlus" | |||||
| @click="plusCircleShow = true" | |||||
| size="46rpx" style="margin-left: 30rpx;"></uv-icon> | |||||
| <view v-if="moreClick" style="margin-left: 30rpx;"> | |||||
| <uv-icon name="more-dot-fill" color="#333" | |||||
| v-if="!moreText" | |||||
| @click="moreClick()" | |||||
| size="46rpx"></uv-icon> | |||||
| <view v-else @click="moreClick" | |||||
| style="font-weight: 400;font-size: 30rpx;"> | |||||
| {{ moreText }} | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!-- </view> --> | |||||
| </template> | |||||
| <script> | |||||
| export default { | |||||
| name:"navbar", | |||||
| props : { | |||||
| title : { | |||||
| type : String, | |||||
| default : '' | |||||
| }, | |||||
| leftClick : { | |||||
| type : Boolean, | |||||
| }, | |||||
| moreClick : { | |||||
| type : Function, | |||||
| }, | |||||
| isSearch : { | |||||
| type : Boolean, | |||||
| default : false, | |||||
| }, | |||||
| isPlus : { | |||||
| type : Boolean, | |||||
| default : false, | |||||
| }, | |||||
| moreText : { | |||||
| }, | |||||
| bgColor : { | |||||
| default : '#fff' | |||||
| } | |||||
| }, | |||||
| created() { | |||||
| }, | |||||
| beforeDestroy() { | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| }; | |||||
| }, | |||||
| methods : { | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| // .navbar{ | |||||
| // width: 100%; | |||||
| // height: 120rpx; | |||||
| // padding-top: var(--status-bar-height); | |||||
| // } | |||||
| .title{ | |||||
| position: sticky; | |||||
| top: 0; | |||||
| left: 0; | |||||
| padding-top: calc(var(--status-bar-height) + 20rpx); | |||||
| width: 100%; | |||||
| height: 100rpx; | |||||
| background-color: #fff; | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| font-size: 32rpx; | |||||
| align-items: center; | |||||
| z-index: 99999; | |||||
| .left{ | |||||
| position: absolute; | |||||
| left: 40rpx; | |||||
| display: flex; | |||||
| justify-content: flex-start; | |||||
| } | |||||
| .icon{ | |||||
| position: absolute; | |||||
| right: 40rpx; | |||||
| display: flex; | |||||
| justify-content: flex-end; | |||||
| } | |||||
| } | |||||
| @keyframes fade-in { | |||||
| 0% { | |||||
| opacity: 0; | |||||
| } | |||||
| 100% { | |||||
| opacity: 1; | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @ -1,45 +0,0 @@ | |||||
| <template> | |||||
| <view class="configPopup"> | |||||
| <uv-popup ref="popup" :round="30" :customStyle="{height: '50vh'}"> | |||||
| <view class="content"> | |||||
| <uv-parse :content="content"></uv-parse> | |||||
| </view> | |||||
| </uv-popup> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| import { mapState } from 'vuex' | |||||
| export default { | |||||
| name: 'configPoup', | |||||
| data() { | |||||
| return { | |||||
| content : '' | |||||
| } | |||||
| }, | |||||
| onShow(){ | |||||
| }, | |||||
| methods: { | |||||
| //打开配置信息菜单 | |||||
| open(key){ | |||||
| this.content = this.configList[key] | |||||
| this.$refs.popup.open('bottom'); | |||||
| } | |||||
| }, | |||||
| computed : { | |||||
| ...mapState(['configList']) | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .configPopup { | |||||
| .content{ | |||||
| padding: 30rpx 20rpx; | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @ -0,0 +1,105 @@ | |||||
| <!-- 打卡 --> | |||||
| <template> | |||||
| <view class="punch-card"> | |||||
| <!-- 自定义导航栏 --> | |||||
| <uni-nav-bar dark :fixed="true" shadow background-color="var(--main-color)" status-bar left-icon="left" | |||||
| title="打卡" @clickLeft="toHuman" /> | |||||
| <!-- 打卡图片 --> | |||||
| <view class="card-image"> | |||||
| <image src="@/static/logo.png" mode="widthFix"></image> | |||||
| </view> | |||||
| <!-- 打卡详情 --> | |||||
| <view class="card-detail"> | |||||
| <view class="card-detail-item"> | |||||
| <uni-icons type="info-filled" size="25" color="#707070"></uni-icons> | |||||
| <view class="time">2024-12-12 12:12:12</view> | |||||
| </view> | |||||
| <view class="card-detail-item"> | |||||
| <uni-icons type="location-filled" size="25" color="#707070"></uni-icons> | |||||
| <view class="address">长沙市雨花区德思勤城市广场</view> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 提交打卡 --> | |||||
| <div @click="photo" class="btn"> | |||||
| 提交打卡 | |||||
| </div> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| export default { | |||||
| name: "punchCard", | |||||
| data() { | |||||
| return { | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| // 返回人脸识别 | |||||
| toHuman() { | |||||
| uni.navigateTo({ | |||||
| url: "/pages/human/human" | |||||
| }) | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .punch-card { | |||||
| // 打卡图片 | |||||
| .card-image { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| margin: 30rpx 0rpx; | |||||
| image { | |||||
| width: 90%; | |||||
| border-radius: 30rpx; | |||||
| } | |||||
| } | |||||
| // 打卡详情 | |||||
| .card-detail { | |||||
| width: 90%; | |||||
| margin: 30rpx auto; | |||||
| .card-detail-item { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| margin-top: 10rpx; | |||||
| .time, | |||||
| .address { | |||||
| font-size: 30rpx; | |||||
| color: #707070; | |||||
| box-sizing: border-box; | |||||
| padding-left: 20rpx; | |||||
| display: -webkit-box; | |||||
| -webkit-box-orient: vertical; | |||||
| -webkit-line-clamp: 2; | |||||
| overflow: hidden; | |||||
| text-overflow: ellipsis; | |||||
| } | |||||
| } | |||||
| } | |||||
| // 提交打卡 | |||||
| .btn { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| width: 83%; | |||||
| background: $main-color; | |||||
| color: white; | |||||
| height: 100rpx; | |||||
| border-radius: 50rpx; | |||||
| margin: 120rpx auto 0rpx auto; | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @ -0,0 +1,144 @@ | |||||
| <template> | |||||
| <view class="team"> | |||||
| <!-- logo --> | |||||
| <div class="logo"> | |||||
| 打卡系统 | |||||
| </div> | |||||
| <!-- 标题 --> | |||||
| <view class="login-title">工程项目打卡系统</view> | |||||
| <!-- 团队选择表单 --> | |||||
| <view class="team-form"> | |||||
| <view class="team-form-item"> | |||||
| <view class="title">团队</view> | |||||
| <view class="select"> | |||||
| <uni-data-select v-model="value" :localdata="range" :clear="false"></uni-data-select> | |||||
| </view> | |||||
| </view> | |||||
| <view class="team-form-item"> | |||||
| <view class="title">姓名</view> | |||||
| <view class="name-input"> | |||||
| <input type="text" placeholder="请输入姓名" /> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 提交审核 --> | |||||
| <div @click="submit" class="btn"> | |||||
| 提交审核 | |||||
| </div> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| export default { | |||||
| name: "Team", | |||||
| data() { | |||||
| return { | |||||
| value: 0, | |||||
| range: [{ | |||||
| value: 0, | |||||
| text: "高新区项目一队代理商的领导" | |||||
| }, | |||||
| { | |||||
| value: 1, | |||||
| text: "望城区项目二队" | |||||
| }, | |||||
| { | |||||
| value: 2, | |||||
| text: "雨花区项目一队" | |||||
| }, | |||||
| ], | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| submit() { | |||||
| uni.navigateTo({ | |||||
| url: "/pages/index/index" | |||||
| }) | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .team { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| min-height: 100vh; | |||||
| background: white; | |||||
| // logo | |||||
| .logo { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| padding: 20rpx 0rpx; | |||||
| width: 40%; | |||||
| color: white; | |||||
| background: linear-gradient(180deg, #4C9EEA, #6DB9FF); | |||||
| border-radius: 45rpx 13rpx 45rpx 13rpx; | |||||
| font-size: 60rpx; | |||||
| } | |||||
| // 标题 | |||||
| .login-title { | |||||
| font-size: 40rpx; | |||||
| font-weight: bold; | |||||
| margin: 20rpx 0rpx; | |||||
| } | |||||
| // 团队选择表单 | |||||
| .team-form { | |||||
| width: 83%; | |||||
| margin: 30rpx auto; | |||||
| .team-form-item { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: space-between; | |||||
| border-bottom: 1px solid #CBCBCB; | |||||
| margin: 30rpx 0rpx; | |||||
| &:nth-child(2) { | |||||
| margin-top: 50rpx; | |||||
| } | |||||
| .title {} | |||||
| .select, | |||||
| .name-input { | |||||
| display: flex; | |||||
| justify-content: flex-end; | |||||
| width: 40%; | |||||
| font-size: 32rpx; | |||||
| input { | |||||
| width: 100%; | |||||
| } | |||||
| } | |||||
| &::v-deep .uni-select { | |||||
| border: none; | |||||
| padding: 0rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| // 提交审核 | |||||
| .btn { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| width: 83%; | |||||
| background: $main-color; | |||||
| color: white; | |||||
| height: 100rpx; | |||||
| border-radius: 50rpx; | |||||
| margin: 120rpx auto 0rpx auto; | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @ -1,121 +0,0 @@ | |||||
| <template> | |||||
| <div class="login"> | |||||
| <!-- logo --> | |||||
| <div class="logo"> | |||||
| 打卡系统 | |||||
| </div> | |||||
| <!-- 标题 --> | |||||
| <view class="login-title">工程项目打卡系统</view> | |||||
| <!-- 登录按钮 --> | |||||
| <view @click="login" class="login-btn"> | |||||
| <uni-icons type="weixin" size="30" color="#fff"></uni-icons> | |||||
| <text class="wx">微信登录</text> | |||||
| </view> | |||||
| <!-- 隐私政策 --> | |||||
| <view class="privacy"> | |||||
| <uv-radio-group> | |||||
| <uv-checkbox-group v-model="consent"> | |||||
| <uv-checkbox :size="30" shape="circle" active-color="#05C160" :name="privacy"></uv-checkbox> | |||||
| </uv-checkbox-group> | |||||
| 已同意<text class="privacy-title">《隐私政策》</text> | |||||
| <text class="privacy-title">《服务条款》</text> | |||||
| </uv-radio-group> | |||||
| </view> | |||||
| <!-- 隐私政策弹框 --> | |||||
| <PrivacyAgreementPoup></PrivacyAgreementPoup> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import PrivacyAgreementPoup from '@/components/PrivacyAgreementPoup/PrivacyAgreementPoup.vue' | |||||
| export default { | |||||
| name : "Login", | |||||
| components : { PrivacyAgreementPoup }, | |||||
| data() { | |||||
| return { | |||||
| consent : [] | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| login() { | |||||
| if(this.consent.length <= 0){ | |||||
| return uni.showToast({ | |||||
| icon: "none", | |||||
| title: "请勾选隐私协议" | |||||
| }) | |||||
| } | |||||
| uni.navigateTo({ | |||||
| url: "/pages/login/wxUserInfo" | |||||
| }) | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .login { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| min-height: 100vh; | |||||
| background: white; | |||||
| // logo | |||||
| .logo { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| padding: 20rpx 0rpx; | |||||
| width: 40%; | |||||
| color: white; | |||||
| background: linear-gradient(180deg, #4C9EEA, #6DB9FF); | |||||
| border-radius: 45rpx 13rpx 45rpx 13rpx; | |||||
| font-size: 60rpx; | |||||
| } | |||||
| // 标题 | |||||
| .login-title { | |||||
| font-size: 40rpx; | |||||
| font-weight: bold; | |||||
| margin: 20rpx 0rpx; | |||||
| } | |||||
| //登录按钮 | |||||
| .login-btn { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| width: 70%; | |||||
| background: #05C160; | |||||
| height: 90rpx; | |||||
| border-radius: 45rpx; | |||||
| color: white; | |||||
| margin-top: 200rpx; | |||||
| .wx { | |||||
| margin-left: 10rpx; | |||||
| } | |||||
| } | |||||
| //隐私政策 | |||||
| .privacy { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| margin-top: 20rpx; | |||||
| &::v-deep .uv-checkbox-group { | |||||
| align-items: center !important; | |||||
| justify-content: center !important; | |||||
| flex-wrap : nowrap !important; | |||||
| } | |||||
| .privacy-title { | |||||
| color: #05C160; | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @ -1,169 +0,0 @@ | |||||
| <!-- 用户信息 --> | |||||
| <template> | |||||
| <view class="login"> | |||||
| <!-- logo --> | |||||
| <div class="logo"> | |||||
| 打卡系统 | |||||
| </div> | |||||
| <!-- 标题 --> | |||||
| <view class="login-title">工程项目打卡系统</view> | |||||
| <view class="title"> | |||||
| 申请获取你的头像、昵称 | |||||
| </view> | |||||
| <button class="chooseAvatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"> | |||||
| <view class="line"> | |||||
| <view class=""> | |||||
| 头像 | |||||
| </view> | |||||
| <view class=""> | |||||
| <image :src="userInfo.headImage" v-if="userInfo.headImage" | |||||
| style="width: 70rpx;height: 70rpx;border-radius: 50%;" mode="widthFix"></image> | |||||
| <!-- <image src="@/static/login/logo.png" v-else style="width: 70rpx;height: 70rpx;border-radius: 50%;" mode="widthFix"></image> --> | |||||
| </view> | |||||
| </view> | |||||
| </button> | |||||
| <view class="line"> | |||||
| <view class=""> | |||||
| 昵称 | |||||
| </view> | |||||
| <view class=""> | |||||
| <input type="nickname" placeholder="请输入昵称" style="text-align: right;" id="nickName" | |||||
| v-model="userInfo.nickName" /> | |||||
| </view> | |||||
| </view> | |||||
| <view class="btn" @click="submit"> | |||||
| 确认 | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| userInfo: { | |||||
| headImage: '../static/login/user.png', //设置了一个本地默认头像 | |||||
| nickName: '', | |||||
| name: '' | |||||
| } | |||||
| }; | |||||
| }, | |||||
| onShow() {}, | |||||
| computed: {}, | |||||
| methods: { | |||||
| onChooseAvatar(res) { | |||||
| let self = this | |||||
| self.$Oss.ossUpload(res.target.avatarUrl) | |||||
| .then(url => { | |||||
| self.userInfo.headImage = url | |||||
| }) | |||||
| }, | |||||
| submit() { | |||||
| let self = this | |||||
| uni.createSelectorQuery().in(this) | |||||
| .select("#nickName") | |||||
| .fields({ | |||||
| properties: ["value"], | |||||
| }) | |||||
| .exec((res) => { | |||||
| const nickName = res?.[0]?.value | |||||
| self.userInfo.nickName = nickName | |||||
| self.userInfo.name = nickName | |||||
| if (self.$utils.verificationAll(self.userInfo, { | |||||
| headImage: '请选择头像', | |||||
| nickName: '请填写昵称', | |||||
| })) { | |||||
| return | |||||
| } | |||||
| // self.$api('updateInfo', self.userInfo, res => { | |||||
| // if (res.code == 200) { | |||||
| // this.replushUserInfo() | |||||
| // uni.switchTab({ | |||||
| // url: '/pages/repair/repair' | |||||
| // }) | |||||
| // } | |||||
| // }) | |||||
| uni.reLaunch({ | |||||
| url: "/pages/index/index" | |||||
| }) | |||||
| }) | |||||
| }, | |||||
| //刷新存放在vuex的用户信息 | |||||
| replushUserInfo() { | |||||
| this.$api('getUserInfo', res => { | |||||
| if (res.code == 200) { | |||||
| this.$store.commit('setUserInfo', res.result) | |||||
| } | |||||
| }) | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .login { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| height: 100vh; | |||||
| // logo | |||||
| .logo { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| padding: 20rpx 0rpx; | |||||
| width: 40%; | |||||
| color: white; | |||||
| background: linear-gradient(180deg, #4C9EEA, #6DB9FF); | |||||
| border-radius: 45rpx 13rpx 45rpx 13rpx; | |||||
| font-size: 60rpx; | |||||
| } | |||||
| // 标题 | |||||
| .login-title { | |||||
| font-size: 40rpx; | |||||
| font-weight: bold; | |||||
| margin: 20rpx 0rpx; | |||||
| } | |||||
| .line { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| align-items: center; | |||||
| width: 80%; | |||||
| border-bottom: 1px solid #00000023; | |||||
| padding: 30rpx 0; | |||||
| margin: 0 auto; | |||||
| } | |||||
| .chooseAvatar { | |||||
| width: 100%; | |||||
| padding: 0; | |||||
| margin: 0; | |||||
| margin-top: 10vh; | |||||
| border: none; | |||||
| } | |||||
| .btn { | |||||
| // background: $uni-linear-gradient-btn-color; | |||||
| background: $main-color; | |||||
| color: #fff; | |||||
| width: 80%; | |||||
| padding: 30rpx 0; | |||||
| border-radius: 100rpx; | |||||
| text-align: center; | |||||
| margin-top: 10vh; | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @ -1,42 +0,0 @@ | |||||
| <!-- 实名认证 --> | |||||
| <template> | |||||
| <view class="autonym"> | |||||
| <!-- 用户信息 --> | |||||
| <div class="user-info"> | |||||
| <image class="user-bg" src="@/static/image/center/center-bg.png" mode="widthFix"></image> | |||||
| </div> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| export default { | |||||
| name: "Autonym", | |||||
| data() { | |||||
| return { | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| toCenter() { | |||||
| uni.navigateTo({ | |||||
| url: "/pages/index/center" | |||||
| }) | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .autonym { | |||||
| // 用户信息 | |||||
| .user-info { | |||||
| .user-bg { | |||||
| width: 750rpx; | |||||
| position: absolute; | |||||
| left: 0; | |||||
| top: 0; | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @ -1,291 +0,0 @@ | |||||
| <!-- 签到记录 --> | |||||
| <template> | |||||
| <view class="record"> | |||||
| <!-- 自定义导航栏 --> | |||||
| <uni-nav-bar | |||||
| dark | |||||
| :fixed="true" | |||||
| shadow | |||||
| background-color="var(--main-color)" | |||||
| status-bar | |||||
| left-icon="left" | |||||
| title="签到记录" | |||||
| @clickLeft="$utils.navigateBack" /> | |||||
| <!-- 签到日历 --> | |||||
| <view class="sign-calendar main"> | |||||
| <view class="sign-user-info"> | |||||
| <image class="user-img" src="@/static/logo.png" mode="widthFix"></image> | |||||
| <view class="base"> | |||||
| <view class="name">李知意</view> | |||||
| <view class="project">高新区项目一队项目1</view> | |||||
| </view> | |||||
| </view> | |||||
| <view> | |||||
| <view class="calendar-top"> | |||||
| <view class="current-time"> | |||||
| <view class="year">{{ year }}</view> | |||||
| <view class="time">{{ monthDay }}</view> | |||||
| </view> | |||||
| <view class="calendar-desc"> | |||||
| <view class="calendar-desc-item">正常</view> | |||||
| <view class="calendar-desc-item">缺卡</view> | |||||
| <view class="calendar-desc-item">未打卡</view> | |||||
| </view> | |||||
| </view> | |||||
| <uni-calendar class="uni-calendar--hook" :selected="selected" showMonth /> | |||||
| <view class="desc"> | |||||
| <view style="width: 100%;justify-content: flex-start;margin-top: 30rpx;" class="calendar-desc"> | |||||
| <view style="margin: 0rpx 45rpx;" class="calendar-desc-item">正常:<text>5</text></view> | |||||
| <view style="margin: 0rpx 45rpx;" class="calendar-desc-item">缺卡:<text>3</text></view> | |||||
| <view style="margin: 0rpx 45rpx;" class="calendar-desc-item">未打卡:<text>2</text></view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 今日打卡详情 --> | |||||
| <view class="today-detail main"> | |||||
| <view class="today-detail-title">今日打卡详情</view> | |||||
| <uv-steps current="8" direction="column" dot> | |||||
| <uv-steps-item v-for="item in 10" :key="item"> | |||||
| <template #title> | |||||
| <view class="today-detail-main"> | |||||
| <image src="@/static/image/center/center-bg.png" mode="widthFix"></image> | |||||
| <view class="sign-detail"> | |||||
| <view class="time">2024-10-09 8:30</view> | |||||
| <view class="address">长沙市雨花区德思勤城市广场</view> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| </uv-steps-item> | |||||
| </uv-steps> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| /** | |||||
| * 获取任意时间 | |||||
| */ | |||||
| function getDate(date, AddDayCount = 0) { | |||||
| if (!date) { | |||||
| date = new Date() | |||||
| } | |||||
| if (typeof date !== 'object') { | |||||
| date = date.replace(/-/g, '/') | |||||
| } | |||||
| const dd = new Date(date) | |||||
| dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期 | |||||
| const y = dd.getFullYear() | |||||
| const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期,不足10补0 | |||||
| const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号,不足10补0 | |||||
| return { | |||||
| fullDate: y + '-' + m + '-' + d, | |||||
| year: y, | |||||
| month: m, | |||||
| date: d, | |||||
| day: dd.getDay() | |||||
| } | |||||
| } | |||||
| export default { | |||||
| name: "Record", | |||||
| data() { | |||||
| return { | |||||
| year: '', //年 | |||||
| monthDay: '', //月日 | |||||
| selected: [{ //info为1:正常 2:缺卡 3:未打卡 | |||||
| date: getDate(new Date(), -3).fullDate, | |||||
| info: 3 | |||||
| }, | |||||
| { | |||||
| date: getDate(new Date(), -2).fullDate, | |||||
| info: 2 | |||||
| }, | |||||
| { | |||||
| date: getDate(new Date(), -1).fullDate, | |||||
| info: 1 | |||||
| } | |||||
| ] | |||||
| } | |||||
| }, | |||||
| onShow() { | |||||
| this.getCurrentTime() | |||||
| }, | |||||
| methods: { | |||||
| //获取打卡日期 | |||||
| getCurrentTime() { | |||||
| let currentDate = new Date(); | |||||
| this.year = currentDate.getFullYear(); | |||||
| let currentMonth = currentDate.getMonth() + 1; | |||||
| let currentDay = currentDate.getDate(); | |||||
| this.monthDay = | |||||
| `${currentMonth < 10 ? "0" + currentMonth : currentMonth}.${currentDay < 10 ? "0" + currentDay : currentDay}` | |||||
| }, | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .record { | |||||
| min-height: 100vh; | |||||
| background: #E4E4E4; | |||||
| padding-bottom: 100rpx; | |||||
| .main { | |||||
| width: 95%; | |||||
| margin: 0rpx auto; | |||||
| } | |||||
| // 签到日历 | |||||
| .sign-calendar { | |||||
| background: white; | |||||
| border-radius: 15rpx; | |||||
| overflow: hidden; | |||||
| margin-top: 30rpx; | |||||
| box-sizing: border-box; | |||||
| padding: 25rpx 15rpx; | |||||
| .sign-user-info { | |||||
| display: flex; | |||||
| flex-wrap: wrap; | |||||
| border-bottom: 2rpx solid #ccc; | |||||
| padding: 15rpx 0rpx; | |||||
| .user-img { | |||||
| width: 150rpx; | |||||
| height: 150rpx; | |||||
| } | |||||
| .base { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: space-between; | |||||
| box-sizing: border-box; | |||||
| padding: 25rpx 0rpx 25rpx 15rpx; | |||||
| width: calc(100% - 150rpx); | |||||
| .name { | |||||
| font-size: 36rpx; | |||||
| } | |||||
| .project { | |||||
| font-size: 30rpx; | |||||
| color: #959595; | |||||
| } | |||||
| } | |||||
| } | |||||
| .calendar-top , .desc { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: space-between; | |||||
| padding: 15rpx 0rpx 20rpx 0rpx; | |||||
| .current-time { | |||||
| display: flex; | |||||
| font-size: 32rpx; | |||||
| font-weight: bold; | |||||
| width: 35%; | |||||
| .year { | |||||
| margin-right: 15rpx; | |||||
| } | |||||
| .time {} | |||||
| } | |||||
| .calendar-desc { | |||||
| display: flex; | |||||
| justify-content: flex-end; | |||||
| width: 65%; | |||||
| color: #707070; | |||||
| .calendar-desc-item { | |||||
| position: relative; | |||||
| margin: 0rpx 35rpx; | |||||
| &::before { | |||||
| position: absolute; | |||||
| top: 10rpx; | |||||
| left: -25rpx; | |||||
| display: block; | |||||
| content: ""; | |||||
| width: 20rpx; | |||||
| height: 20rpx; | |||||
| border-radius: 50%; | |||||
| background: #11FF00; | |||||
| } | |||||
| &:nth-child(1) { | |||||
| &::before { | |||||
| background: #11FF00; | |||||
| } | |||||
| } | |||||
| &:nth-child(2) { | |||||
| &::before { | |||||
| background: #F97D00; | |||||
| } | |||||
| } | |||||
| &:nth-child(3) { | |||||
| &::before { | |||||
| background: #FF0000; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| // 修改日历样式 | |||||
| &::v-deep .uni-calendar__header { | |||||
| display: none !important; | |||||
| } | |||||
| &::v-deep .uni-calendar-item__weeks-box { | |||||
| border-radius: 50% !important; | |||||
| } | |||||
| &::v-deep .uni-calendar-item--isDay { | |||||
| background-color: $main-color !important; | |||||
| } | |||||
| &::v-deep .uni-calendar-item--checked { | |||||
| background-color: $main-color !important; | |||||
| } | |||||
| } | |||||
| // 今日打卡详情 | |||||
| .today-detail { | |||||
| border-radius: 15rpx; | |||||
| background: white; | |||||
| margin-top: 35rpx; | |||||
| box-sizing: border-box; | |||||
| padding: 25rpx 15rpx; | |||||
| overflow: hidden; | |||||
| .today-detail-title { | |||||
| font-size: 32rpx; | |||||
| font-weight: bold; | |||||
| } | |||||
| .today-detail-main { | |||||
| display: flex; | |||||
| box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, .1); | |||||
| margin: 15rpx 0rpx; | |||||
| box-sizing: border-box; | |||||
| padding: 20rpx 15rpx; | |||||
| image { | |||||
| width: 30%; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @ -0,0 +1,17 @@ | |||||
| ## 1.0.2(2024-09-21) | |||||
| - 新增 clearAble属性 | |||||
| ## 1.0.1(2021-11-23) | |||||
| - 优化 label、label-width 属性 | |||||
| ## 1.0.0(2021-11-19) | |||||
| - 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) | |||||
| - 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-combox](https://uniapp.dcloud.io/component/uniui/uni-combox) | |||||
| ## 0.1.0(2021-07-30) | |||||
| - 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) | |||||
| ## 0.0.6(2021-05-12) | |||||
| - 新增 组件示例地址 | |||||
| ## 0.0.5(2021-04-21) | |||||
| - 优化 添加依赖 uni-icons, 导入后自动下载依赖 | |||||
| ## 0.0.4(2021-02-05) | |||||
| - 优化 组件引用关系,通过uni_modules引用组件 | |||||
| ## 0.0.3(2021-02-04) | |||||
| - 调整为uni_modules目录规范 | |||||
| @ -0,0 +1,284 @@ | |||||
| <template> | |||||
| <view class="uni-combox" :class="border ? '' : 'uni-combox__no-border'"> | |||||
| <view v-if="label" class="uni-combox__label" :style="labelStyle"> | |||||
| <text>{{label}}</text> | |||||
| </view> | |||||
| <view class="uni-combox__input-box"> | |||||
| <input class="uni-combox__input" type="text" :placeholder="placeholder" placeholder-class="uni-combox__input-plac" | |||||
| v-model="inputVal" @input="onInput" @focus="onFocus" @blur="onBlur" /> | |||||
| <uni-icons v-if="!inputVal || !clearAble" :type="showSelector? 'top' : 'bottom'" size="14" color="#999" @click="toggleSelector"> | |||||
| </uni-icons> | |||||
| <uni-icons v-if="inputVal && clearAble" type="clear" size="24" color="#999" @click="clean"> | |||||
| </uni-icons> | |||||
| </view> | |||||
| <view class="uni-combox__selector" v-if="showSelector"> | |||||
| <view class="uni-popper__arrow"></view> | |||||
| <scroll-view scroll-y="true" class="uni-combox__selector-scroll"> | |||||
| <view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0"> | |||||
| <text>{{emptyTips}}</text> | |||||
| </view> | |||||
| <view class="uni-combox__selector-item" v-for="(item,index) in filterCandidates" :key="index" | |||||
| @click="onSelectorClick(index)"> | |||||
| <text>{{item}}</text> | |||||
| </view> | |||||
| </scroll-view> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| /** | |||||
| * Combox 组合输入框 | |||||
| * @description 组合输入框一般用于既可以输入也可以选择的场景 | |||||
| * @tutorial https://ext.dcloud.net.cn/plugin?id=1261 | |||||
| * @property {String} label 左侧文字 | |||||
| * @property {String} labelWidth 左侧内容宽度 | |||||
| * @property {String} placeholder 输入框占位符 | |||||
| * @property {Array} candidates 候选项列表 | |||||
| * @property {String} emptyTips 筛选结果为空时显示的文字 | |||||
| * @property {String} value 组合框的值 | |||||
| */ | |||||
| export default { | |||||
| name: 'uniCombox', | |||||
| emits: ['input', 'update:modelValue'], | |||||
| props: { | |||||
| clearAble: { | |||||
| type: Boolean, | |||||
| default: false | |||||
| }, | |||||
| border: { | |||||
| type: Boolean, | |||||
| default: true | |||||
| }, | |||||
| label: { | |||||
| type: String, | |||||
| default: '' | |||||
| }, | |||||
| labelWidth: { | |||||
| type: String, | |||||
| default: 'auto' | |||||
| }, | |||||
| placeholder: { | |||||
| type: String, | |||||
| default: '' | |||||
| }, | |||||
| candidates: { | |||||
| type: Array, | |||||
| default () { | |||||
| return [] | |||||
| } | |||||
| }, | |||||
| emptyTips: { | |||||
| type: String, | |||||
| default: '无匹配项' | |||||
| }, | |||||
| // #ifndef VUE3 | |||||
| value: { | |||||
| type: [String, Number], | |||||
| default: '' | |||||
| }, | |||||
| // #endif | |||||
| // #ifdef VUE3 | |||||
| modelValue: { | |||||
| type: [String, Number], | |||||
| default: '' | |||||
| }, | |||||
| // #endif | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| showSelector: false, | |||||
| inputVal: '' | |||||
| } | |||||
| }, | |||||
| computed: { | |||||
| labelStyle() { | |||||
| if (this.labelWidth === 'auto') { | |||||
| return "" | |||||
| } | |||||
| return `width: ${this.labelWidth}` | |||||
| }, | |||||
| filterCandidates() { | |||||
| return this.candidates.filter((item) => { | |||||
| return item.toString().indexOf(this.inputVal) > -1 | |||||
| }) | |||||
| }, | |||||
| filterCandidatesLength() { | |||||
| return this.filterCandidates.length | |||||
| } | |||||
| }, | |||||
| watch: { | |||||
| // #ifndef VUE3 | |||||
| value: { | |||||
| handler(newVal) { | |||||
| this.inputVal = newVal | |||||
| }, | |||||
| immediate: true | |||||
| }, | |||||
| // #endif | |||||
| // #ifdef VUE3 | |||||
| modelValue: { | |||||
| handler(newVal) { | |||||
| this.inputVal = newVal | |||||
| }, | |||||
| immediate: true | |||||
| }, | |||||
| // #endif | |||||
| }, | |||||
| methods: { | |||||
| toggleSelector() { | |||||
| this.showSelector = !this.showSelector | |||||
| }, | |||||
| onFocus() { | |||||
| this.showSelector = true | |||||
| }, | |||||
| onBlur() { | |||||
| setTimeout(() => { | |||||
| this.showSelector = false | |||||
| }, 153) | |||||
| }, | |||||
| onSelectorClick(index) { | |||||
| this.inputVal = this.filterCandidates[index] | |||||
| this.showSelector = false | |||||
| this.$emit('input', this.inputVal) | |||||
| this.$emit('update:modelValue', this.inputVal) | |||||
| }, | |||||
| onInput() { | |||||
| setTimeout(() => { | |||||
| this.$emit('input', this.inputVal) | |||||
| this.$emit('update:modelValue', this.inputVal) | |||||
| }) | |||||
| }, | |||||
| clean() { | |||||
| this.inputVal = '' | |||||
| this.onInput() | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .uni-combox { | |||||
| font-size: 14px; | |||||
| border: 1px solid #DCDFE6; | |||||
| border-radius: 4px; | |||||
| padding: 6px 10px; | |||||
| position: relative; | |||||
| /* #ifndef APP-NVUE */ | |||||
| display: flex; | |||||
| /* #endif */ | |||||
| // height: 40px; | |||||
| flex-direction: row; | |||||
| align-items: center; | |||||
| // border-bottom: solid 1px #DDDDDD; | |||||
| } | |||||
| .uni-combox__label { | |||||
| font-size: 16px; | |||||
| line-height: 22px; | |||||
| padding-right: 10px; | |||||
| color: #999999; | |||||
| } | |||||
| .uni-combox__input-box { | |||||
| position: relative; | |||||
| /* #ifndef APP-NVUE */ | |||||
| display: flex; | |||||
| /* #endif */ | |||||
| flex: 1; | |||||
| flex-direction: row; | |||||
| align-items: center; | |||||
| } | |||||
| .uni-combox__input { | |||||
| flex: 1; | |||||
| font-size: 14px; | |||||
| height: 22px; | |||||
| line-height: 22px; | |||||
| } | |||||
| .uni-combox__input-plac { | |||||
| font-size: 14px; | |||||
| color: #999; | |||||
| } | |||||
| .uni-combox__selector { | |||||
| /* #ifndef APP-NVUE */ | |||||
| box-sizing: border-box; | |||||
| /* #endif */ | |||||
| position: absolute; | |||||
| top: calc(100% + 12px); | |||||
| left: 0; | |||||
| width: 100%; | |||||
| background-color: #FFFFFF; | |||||
| border: 1px solid #EBEEF5; | |||||
| border-radius: 6px; | |||||
| box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); | |||||
| z-index: 2; | |||||
| padding: 4px 0; | |||||
| } | |||||
| .uni-combox__selector-scroll { | |||||
| /* #ifndef APP-NVUE */ | |||||
| max-height: 200px; | |||||
| box-sizing: border-box; | |||||
| /* #endif */ | |||||
| } | |||||
| .uni-combox__selector-empty, | |||||
| .uni-combox__selector-item { | |||||
| /* #ifndef APP-NVUE */ | |||||
| display: flex; | |||||
| cursor: pointer; | |||||
| /* #endif */ | |||||
| line-height: 36px; | |||||
| font-size: 14px; | |||||
| text-align: center; | |||||
| // border-bottom: solid 1px #DDDDDD; | |||||
| padding: 0px 10px; | |||||
| } | |||||
| .uni-combox__selector-item:hover { | |||||
| background-color: #f9f9f9; | |||||
| } | |||||
| .uni-combox__selector-empty:last-child, | |||||
| .uni-combox__selector-item:last-child { | |||||
| /* #ifndef APP-NVUE */ | |||||
| border-bottom: none; | |||||
| /* #endif */ | |||||
| } | |||||
| // picker 弹出层通用的指示小三角 | |||||
| .uni-popper__arrow, | |||||
| .uni-popper__arrow::after { | |||||
| position: absolute; | |||||
| display: block; | |||||
| width: 0; | |||||
| height: 0; | |||||
| border-color: transparent; | |||||
| border-style: solid; | |||||
| border-width: 6px; | |||||
| } | |||||
| .uni-popper__arrow { | |||||
| filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)); | |||||
| top: -6px; | |||||
| left: 10%; | |||||
| margin-right: 3px; | |||||
| border-top-width: 0; | |||||
| border-bottom-color: #EBEEF5; | |||||
| } | |||||
| .uni-popper__arrow::after { | |||||
| content: " "; | |||||
| top: 1px; | |||||
| margin-left: -6px; | |||||
| border-top-width: 0; | |||||
| border-bottom-color: #fff; | |||||
| } | |||||
| .uni-combox__no-border { | |||||
| border: none; | |||||
| } | |||||
| </style> | |||||
| @ -0,0 +1,88 @@ | |||||
| { | |||||
| "id": "uni-combox", | |||||
| "displayName": "uni-combox 组合框", | |||||
| "version": "1.0.2", | |||||
| "description": "可以选择也可以输入的表单项 ", | |||||
| "keywords": [ | |||||
| "uni-ui", | |||||
| "uniui", | |||||
| "combox", | |||||
| "组合框", | |||||
| "select" | |||||
| ], | |||||
| "repository": "https://github.com/dcloudio/uni-ui", | |||||
| "engines": { | |||||
| "HBuilderX": "" | |||||
| }, | |||||
| "directories": { | |||||
| "example": "../../temps/example_temps" | |||||
| }, | |||||
| "dcloudext": { | |||||
| "sale": { | |||||
| "regular": { | |||||
| "price": "0.00" | |||||
| }, | |||||
| "sourcecode": { | |||||
| "price": "0.00" | |||||
| } | |||||
| }, | |||||
| "contact": { | |||||
| "qq": "" | |||||
| }, | |||||
| "declaration": { | |||||
| "ads": "无", | |||||
| "data": "无", | |||||
| "permissions": "无" | |||||
| }, | |||||
| "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", | |||||
| "type": "component-vue" | |||||
| }, | |||||
| "uni_modules": { | |||||
| "dependencies": [ | |||||
| "uni-scss", | |||||
| "uni-icons" | |||||
| ], | |||||
| "encrypt": [], | |||||
| "platforms": { | |||||
| "cloud": { | |||||
| "tcb": "y", | |||||
| "aliyun": "y", | |||||
| "alipay": "n" | |||||
| }, | |||||
| "client": { | |||||
| "App": { | |||||
| "app-vue": "y", | |||||
| "app-nvue": "n" | |||||
| }, | |||||
| "H5-mobile": { | |||||
| "Safari": "y", | |||||
| "Android Browser": "y", | |||||
| "微信浏览器(Android)": "y", | |||||
| "QQ浏览器(Android)": "y" | |||||
| }, | |||||
| "H5-pc": { | |||||
| "Chrome": "y", | |||||
| "IE": "y", | |||||
| "Edge": "y", | |||||
| "Firefox": "y", | |||||
| "Safari": "y" | |||||
| }, | |||||
| "小程序": { | |||||
| "微信": "y", | |||||
| "阿里": "y", | |||||
| "百度": "y", | |||||
| "字节跳动": "y", | |||||
| "QQ": "y" | |||||
| }, | |||||
| "快应用": { | |||||
| "华为": "u", | |||||
| "联盟": "u" | |||||
| }, | |||||
| "Vue": { | |||||
| "vue2": "y", | |||||
| "vue3": "y" | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| @ -0,0 +1,11 @@ | |||||
| ## Combox 组合框 | |||||
| > **组件名:uni-combox** | |||||
| > 代码块: `uCombox` | |||||
| 组合框组件。 | |||||
| ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-combox) | |||||
| #### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839 | |||||
| @ -0,0 +1,39 @@ | |||||
| ## 1.0.8(2024-03-28) | |||||
| - 修复 在vue2下:style动态绑定导致编译失败的bug | |||||
| ## 1.0.7(2024-01-20) | |||||
| - 修复 长文本回显超过容器的bug,超过容器部分显示省略号 | |||||
| ## 1.0.6(2023-04-12) | |||||
| - 修复 微信小程序点击时会改变背景颜色的 bug | |||||
| ## 1.0.5(2023-02-03) | |||||
| - 修复 禁用时会显示清空按钮 | |||||
| ## 1.0.4(2023-02-02) | |||||
| - 优化 查询条件短期内多次变更只查询最后一次变更后的结果 | |||||
| - 调整 内部缓存键名调整为 uni-data-select-lastSelectedValue | |||||
| ## 1.0.3(2023-01-16) | |||||
| - 修复 不关联服务空间报错的问题 | |||||
| ## 1.0.2(2023-01-14) | |||||
| - 新增 属性 `format` 可用于格式化显示选项内容 | |||||
| ## 1.0.1(2022-12-06) | |||||
| - 修复 当where变化时,数据不会自动更新的问题 | |||||
| ## 0.1.9(2022-09-05) | |||||
| - 修复 微信小程序下拉框出现后选择会点击到蒙板后面的输入框 | |||||
| ## 0.1.8(2022-08-29) | |||||
| - 修复 点击的位置不准确 | |||||
| ## 0.1.7(2022-08-12) | |||||
| - 新增 支持 disabled 属性 | |||||
| ## 0.1.6(2022-07-06) | |||||
| - 修复 pc端宽度异常的bug | |||||
| ## 0.1.5 | |||||
| - 修复 pc端宽度异常的bug | |||||
| ## 0.1.4(2022-07-05) | |||||
| - 优化 显示样式 | |||||
| ## 0.1.3(2022-06-02) | |||||
| - 修复 localdata 赋值不生效的 bug | |||||
| - 新增 支持 uni.scss 修改颜色 | |||||
| - 新增 支持选项禁用(数据选项设置 disabled: true 即禁用) | |||||
| ## 0.1.2(2022-05-08) | |||||
| - 修复 当 value 为 0 时选择不生效的 bug | |||||
| ## 0.1.1(2022-05-07) | |||||
| - 新增 记住上次的选项(仅 collection 存在时有效) | |||||
| ## 0.1.0(2022-04-22) | |||||
| - 初始化 | |||||
| @ -0,0 +1,562 @@ | |||||
| <template> | |||||
| <view class="uni-stat__select"> | |||||
| <span v-if="label" class="uni-label-text hide-on-phone">{{label + ':'}}</span> | |||||
| <view class="uni-stat-box" :class="{'uni-stat__actived': current}"> | |||||
| <view class="uni-select" :class="{'uni-select--disabled':disabled}"> | |||||
| <view class="uni-select__input-box" @click="toggleSelector"> | |||||
| <view v-if="current" class="uni-select__input-text">{{textShow}}</view> | |||||
| <view v-else class="uni-select__input-text uni-select__input-placeholder">{{typePlaceholder}}</view> | |||||
| <view v-if="current && clear && !disabled" @click.stop="clearVal"> | |||||
| <uni-icons type="clear" color="#c0c4cc" size="24" /> | |||||
| </view> | |||||
| <view v-else> | |||||
| <uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" /> | |||||
| </view> | |||||
| </view> | |||||
| <view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" /> | |||||
| <view class="uni-select__selector" :style="getOffsetByPlacement" v-if="showSelector"> | |||||
| <view :class="placement=='bottom'?'uni-popper__arrow_bottom':'uni-popper__arrow_top'"></view> | |||||
| <scroll-view scroll-y="true" class="uni-select__selector-scroll"> | |||||
| <view class="uni-select__selector-empty" v-if="mixinDatacomResData.length === 0"> | |||||
| <text>{{emptyTips}}</text> | |||||
| </view> | |||||
| <view v-else class="uni-select__selector-item" v-for="(item,index) in mixinDatacomResData" :key="index" | |||||
| @click="change(item)"> | |||||
| <text :class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</text> | |||||
| </view> | |||||
| </scroll-view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| /** | |||||
| * DataChecklist 数据选择器 | |||||
| * @description 通过数据渲染的下拉框组件 | |||||
| * @tutorial https://uniapp.dcloud.io/component/uniui/uni-data-select | |||||
| * @property {String} value 默认值 | |||||
| * @property {Array} localdata 本地数据 ,格式 [{text:'',value:''}] | |||||
| * @property {Boolean} clear 是否可以清空已选项 | |||||
| * @property {Boolean} emptyText 没有数据时显示的文字 ,本地数据无效 | |||||
| * @property {String} label 左侧标题 | |||||
| * @property {String} placeholder 输入框的提示文字 | |||||
| * @property {Boolean} disabled 是否禁用 | |||||
| * @property {String} placement 弹出位置 | |||||
| * @value top 顶部弹出 | |||||
| * @value bottom 底部弹出(default) | |||||
| * @event {Function} change 选中发生变化触发 | |||||
| */ | |||||
| export default { | |||||
| name: "uni-data-select", | |||||
| mixins: [uniCloud.mixinDatacom || {}], | |||||
| props: { | |||||
| localdata: { | |||||
| type: Array, | |||||
| default () { | |||||
| return [] | |||||
| } | |||||
| }, | |||||
| value: { | |||||
| type: [String, Number], | |||||
| default: '' | |||||
| }, | |||||
| modelValue: { | |||||
| type: [String, Number], | |||||
| default: '' | |||||
| }, | |||||
| label: { | |||||
| type: String, | |||||
| default: '' | |||||
| }, | |||||
| placeholder: { | |||||
| type: String, | |||||
| default: '请选择' | |||||
| }, | |||||
| emptyTips: { | |||||
| type: String, | |||||
| default: '无选项' | |||||
| }, | |||||
| clear: { | |||||
| type: Boolean, | |||||
| default: true | |||||
| }, | |||||
| defItem: { | |||||
| type: Number, | |||||
| default: 0 | |||||
| }, | |||||
| disabled: { | |||||
| type: Boolean, | |||||
| default: false | |||||
| }, | |||||
| // 格式化输出 用法 field="_id as value, version as text, uni_platform as label" format="{label} - {text}" | |||||
| format: { | |||||
| type: String, | |||||
| default: '' | |||||
| }, | |||||
| placement: { | |||||
| type: String, | |||||
| default: 'bottom' | |||||
| } | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| showSelector: false, | |||||
| current: '', | |||||
| mixinDatacomResData: [], | |||||
| apps: [], | |||||
| channels: [], | |||||
| cacheKey: "uni-data-select-lastSelectedValue", | |||||
| }; | |||||
| }, | |||||
| created() { | |||||
| this.debounceGet = this.debounce(() => { | |||||
| this.query(); | |||||
| }, 300); | |||||
| if (this.collection && !this.localdata.length) { | |||||
| this.debounceGet(); | |||||
| } | |||||
| }, | |||||
| computed: { | |||||
| typePlaceholder() { | |||||
| const text = { | |||||
| 'opendb-stat-app-versions': '版本', | |||||
| 'opendb-app-channels': '渠道', | |||||
| 'opendb-app-list': '应用' | |||||
| } | |||||
| const common = this.placeholder | |||||
| const placeholder = text[this.collection] | |||||
| return placeholder ? | |||||
| common + placeholder : | |||||
| common | |||||
| }, | |||||
| valueCom() { | |||||
| // #ifdef VUE3 | |||||
| return this.modelValue; | |||||
| // #endif | |||||
| // #ifndef VUE3 | |||||
| return this.value; | |||||
| // #endif | |||||
| }, | |||||
| textShow() { | |||||
| // 长文本显示 | |||||
| let text = this.current; | |||||
| if (text.length > 10) { | |||||
| return text.slice(0, 25) + '...'; | |||||
| } | |||||
| return text; | |||||
| }, | |||||
| getOffsetByPlacement() { | |||||
| switch (this.placement) { | |||||
| case 'top': | |||||
| return "bottom:calc(100% + 12px);"; | |||||
| case 'bottom': | |||||
| return "top:calc(100% + 12px);"; | |||||
| } | |||||
| } | |||||
| }, | |||||
| watch: { | |||||
| localdata: { | |||||
| immediate: true, | |||||
| handler(val, old) { | |||||
| if (Array.isArray(val) && old !== val) { | |||||
| this.mixinDatacomResData = val | |||||
| } | |||||
| } | |||||
| }, | |||||
| valueCom(val, old) { | |||||
| this.initDefVal() | |||||
| }, | |||||
| mixinDatacomResData: { | |||||
| immediate: true, | |||||
| handler(val) { | |||||
| if (val.length) { | |||||
| this.initDefVal() | |||||
| } | |||||
| } | |||||
| }, | |||||
| }, | |||||
| methods: { | |||||
| debounce(fn, time = 100) { | |||||
| let timer = null | |||||
| return function(...args) { | |||||
| if (timer) clearTimeout(timer) | |||||
| timer = setTimeout(() => { | |||||
| fn.apply(this, args) | |||||
| }, time) | |||||
| } | |||||
| }, | |||||
| // 执行数据库查询 | |||||
| query() { | |||||
| this.mixinDatacomEasyGet(); | |||||
| }, | |||||
| // 监听查询条件变更事件 | |||||
| onMixinDatacomPropsChange() { | |||||
| if (this.collection) { | |||||
| this.debounceGet(); | |||||
| } | |||||
| }, | |||||
| initDefVal() { | |||||
| let defValue = '' | |||||
| if ((this.valueCom || this.valueCom === 0) && !this.isDisabled(this.valueCom)) { | |||||
| defValue = this.valueCom | |||||
| } else { | |||||
| let strogeValue | |||||
| if (this.collection) { | |||||
| strogeValue = this.getCache() | |||||
| } | |||||
| if (strogeValue || strogeValue === 0) { | |||||
| defValue = strogeValue | |||||
| } else { | |||||
| let defItem = '' | |||||
| if (this.defItem > 0 && this.defItem <= this.mixinDatacomResData.length) { | |||||
| defItem = this.mixinDatacomResData[this.defItem - 1].value | |||||
| } | |||||
| defValue = defItem | |||||
| } | |||||
| if (defValue || defValue === 0) { | |||||
| this.emit(defValue) | |||||
| } | |||||
| } | |||||
| const def = this.mixinDatacomResData.find(item => item.value === defValue) | |||||
| this.current = def ? this.formatItemName(def) : '' | |||||
| }, | |||||
| /** | |||||
| * @param {[String, Number]} value | |||||
| * 判断用户给的 value 是否同时为禁用状态 | |||||
| */ | |||||
| isDisabled(value) { | |||||
| let isDisabled = false; | |||||
| this.mixinDatacomResData.forEach(item => { | |||||
| if (item.value === value) { | |||||
| isDisabled = item.disable | |||||
| } | |||||
| }) | |||||
| return isDisabled; | |||||
| }, | |||||
| clearVal() { | |||||
| this.emit('') | |||||
| if (this.collection) { | |||||
| this.removeCache() | |||||
| } | |||||
| }, | |||||
| change(item) { | |||||
| if (!item.disable) { | |||||
| this.showSelector = false | |||||
| this.current = this.formatItemName(item) | |||||
| this.emit(item.value) | |||||
| } | |||||
| }, | |||||
| emit(val) { | |||||
| this.$emit('input', val) | |||||
| this.$emit('update:modelValue', val) | |||||
| this.$emit('change', val) | |||||
| if (this.collection) { | |||||
| this.setCache(val); | |||||
| } | |||||
| }, | |||||
| toggleSelector() { | |||||
| if (this.disabled) { | |||||
| return | |||||
| } | |||||
| this.showSelector = !this.showSelector | |||||
| }, | |||||
| formatItemName(item) { | |||||
| let { | |||||
| text, | |||||
| value, | |||||
| channel_code | |||||
| } = item | |||||
| channel_code = channel_code ? `(${channel_code})` : '' | |||||
| if (this.format) { | |||||
| // 格式化输出 | |||||
| let str = ""; | |||||
| str = this.format; | |||||
| for (let key in item) { | |||||
| str = str.replace(new RegExp(`{${key}}`, "g"), item[key]); | |||||
| } | |||||
| return str; | |||||
| } else { | |||||
| return this.collection.indexOf('app-list') > 0 ? | |||||
| `${text}(${value})` : | |||||
| ( | |||||
| text ? | |||||
| text : | |||||
| `未命名${channel_code}` | |||||
| ) | |||||
| } | |||||
| }, | |||||
| // 获取当前加载的数据 | |||||
| getLoadData() { | |||||
| return this.mixinDatacomResData; | |||||
| }, | |||||
| // 获取当前缓存key | |||||
| getCurrentCacheKey() { | |||||
| return this.collection; | |||||
| }, | |||||
| // 获取缓存 | |||||
| getCache(name = this.getCurrentCacheKey()) { | |||||
| let cacheData = uni.getStorageSync(this.cacheKey) || {}; | |||||
| return cacheData[name]; | |||||
| }, | |||||
| // 设置缓存 | |||||
| setCache(value, name = this.getCurrentCacheKey()) { | |||||
| let cacheData = uni.getStorageSync(this.cacheKey) || {}; | |||||
| cacheData[name] = value; | |||||
| uni.setStorageSync(this.cacheKey, cacheData); | |||||
| }, | |||||
| // 删除缓存 | |||||
| removeCache(name = this.getCurrentCacheKey()) { | |||||
| let cacheData = uni.getStorageSync(this.cacheKey) || {}; | |||||
| delete cacheData[name]; | |||||
| uni.setStorageSync(this.cacheKey, cacheData); | |||||
| }, | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss"> | |||||
| $uni-base-color: #6a6a6a !default; | |||||
| $uni-main-color: #333 !default; | |||||
| $uni-secondary-color: #909399 !default; | |||||
| $uni-border-3: #e5e5e5; | |||||
| /* #ifndef APP-NVUE */ | |||||
| @media screen and (max-width: 500px) { | |||||
| .hide-on-phone { | |||||
| display: none; | |||||
| } | |||||
| } | |||||
| /* #endif */ | |||||
| .uni-stat__select { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| // padding: 15px; | |||||
| /* #ifdef H5 */ | |||||
| cursor: pointer; | |||||
| /* #endif */ | |||||
| width: 100%; | |||||
| flex: 1; | |||||
| box-sizing: border-box; | |||||
| } | |||||
| .uni-stat-box { | |||||
| width: 100%; | |||||
| flex: 1; | |||||
| } | |||||
| .uni-stat__actived { | |||||
| width: 100%; | |||||
| flex: 1; | |||||
| // outline: 1px solid #2979ff; | |||||
| } | |||||
| .uni-label-text { | |||||
| font-size: 14px; | |||||
| font-weight: bold; | |||||
| color: $uni-base-color; | |||||
| margin: auto 0; | |||||
| margin-right: 5px; | |||||
| } | |||||
| .uni-select { | |||||
| font-size: 14px; | |||||
| border: 1px solid $uni-border-3; | |||||
| box-sizing: border-box; | |||||
| border-radius: 4px; | |||||
| padding: 0 5px; | |||||
| padding-left: 10px; | |||||
| position: relative; | |||||
| /* #ifndef APP-NVUE */ | |||||
| display: flex; | |||||
| user-select: none; | |||||
| /* #endif */ | |||||
| flex-direction: row; | |||||
| align-items: center; | |||||
| border-bottom: solid 1px $uni-border-3; | |||||
| width: 100%; | |||||
| flex: 1; | |||||
| height: 35px; | |||||
| &--disabled { | |||||
| background-color: #f5f7fa; | |||||
| cursor: not-allowed; | |||||
| } | |||||
| } | |||||
| .uni-select__label { | |||||
| font-size: 16px; | |||||
| // line-height: 22px; | |||||
| height: 35px; | |||||
| padding-right: 10px; | |||||
| color: $uni-secondary-color; | |||||
| } | |||||
| .uni-select__input-box { | |||||
| height: 35px; | |||||
| position: relative; | |||||
| /* #ifndef APP-NVUE */ | |||||
| display: flex; | |||||
| /* #endif */ | |||||
| flex: 1; | |||||
| flex-direction: row; | |||||
| align-items: center; | |||||
| } | |||||
| .uni-select__input { | |||||
| flex: 1; | |||||
| font-size: 14px; | |||||
| height: 22px; | |||||
| line-height: 22px; | |||||
| } | |||||
| .uni-select__input-plac { | |||||
| font-size: 14px; | |||||
| color: $uni-secondary-color; | |||||
| } | |||||
| .uni-select__selector { | |||||
| /* #ifndef APP-NVUE */ | |||||
| box-sizing: border-box; | |||||
| /* #endif */ | |||||
| position: absolute; | |||||
| left: 0; | |||||
| width: 100%; | |||||
| background-color: #FFFFFF; | |||||
| border: 1px solid #EBEEF5; | |||||
| border-radius: 6px; | |||||
| box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); | |||||
| z-index: 3; | |||||
| padding: 4px 0; | |||||
| } | |||||
| .uni-select__selector-scroll { | |||||
| /* #ifndef APP-NVUE */ | |||||
| max-height: 200px; | |||||
| box-sizing: border-box; | |||||
| /* #endif */ | |||||
| } | |||||
| /* #ifdef H5 */ | |||||
| @media (min-width: 768px) { | |||||
| .uni-select__selector-scroll { | |||||
| max-height: 600px; | |||||
| } | |||||
| } | |||||
| /* #endif */ | |||||
| .uni-select__selector-empty, | |||||
| .uni-select__selector-item { | |||||
| /* #ifndef APP-NVUE */ | |||||
| display: flex; | |||||
| cursor: pointer; | |||||
| /* #endif */ | |||||
| line-height: 35px; | |||||
| font-size: 14px; | |||||
| text-align: center; | |||||
| /* border-bottom: solid 1px $uni-border-3; */ | |||||
| padding: 0px 10px; | |||||
| } | |||||
| .uni-select__selector-item:hover { | |||||
| background-color: #f9f9f9; | |||||
| } | |||||
| .uni-select__selector-empty:last-child, | |||||
| .uni-select__selector-item:last-child { | |||||
| /* #ifndef APP-NVUE */ | |||||
| border-bottom: none; | |||||
| /* #endif */ | |||||
| } | |||||
| .uni-select__selector__disabled { | |||||
| opacity: 0.4; | |||||
| cursor: default; | |||||
| } | |||||
| /* picker 弹出层通用的指示小三角 */ | |||||
| .uni-popper__arrow_bottom, | |||||
| .uni-popper__arrow_bottom::after, | |||||
| .uni-popper__arrow_top, | |||||
| .uni-popper__arrow_top::after, | |||||
| { | |||||
| position: absolute; | |||||
| display: block; | |||||
| width: 0; | |||||
| height: 0; | |||||
| border-color: transparent; | |||||
| border-style: solid; | |||||
| border-width: 6px; | |||||
| } | |||||
| .uni-popper__arrow_bottom { | |||||
| filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)); | |||||
| top: -6px; | |||||
| left: 10%; | |||||
| margin-right: 3px; | |||||
| border-top-width: 0; | |||||
| border-bottom-color: #EBEEF5; | |||||
| } | |||||
| .uni-popper__arrow_bottom::after { | |||||
| content: " "; | |||||
| top: 1px; | |||||
| margin-left: -6px; | |||||
| border-top-width: 0; | |||||
| border-bottom-color: #fff; | |||||
| } | |||||
| .uni-popper__arrow_top { | |||||
| filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)); | |||||
| bottom: -6px; | |||||
| left: 10%; | |||||
| margin-right: 3px; | |||||
| border-bottom-width: 0; | |||||
| border-top-color: #EBEEF5; | |||||
| } | |||||
| .uni-popper__arrow_top::after { | |||||
| content: " "; | |||||
| bottom: 1px; | |||||
| margin-left: -6px; | |||||
| border-bottom-width: 0; | |||||
| border-top-color: #fff; | |||||
| } | |||||
| .uni-select__input-text { | |||||
| // width: 280px; | |||||
| width: 100%; | |||||
| color: $uni-main-color; | |||||
| white-space: nowrap; | |||||
| text-overflow: ellipsis; | |||||
| -o-text-overflow: ellipsis; | |||||
| overflow: hidden; | |||||
| } | |||||
| .uni-select__input-placeholder { | |||||
| color: $uni-base-color; | |||||
| font-size: 12px; | |||||
| } | |||||
| .uni-select--mask { | |||||
| position: fixed; | |||||
| top: 0; | |||||
| bottom: 0; | |||||
| right: 0; | |||||
| left: 0; | |||||
| z-index: 2; | |||||
| } | |||||
| </style> | |||||
| @ -0,0 +1,86 @@ | |||||
| { | |||||
| "id": "uni-data-select", | |||||
| "displayName": "uni-data-select 下拉框选择器", | |||||
| "version": "1.0.8", | |||||
| "description": "通过数据驱动的下拉框选择器", | |||||
| "keywords": [ | |||||
| "uni-ui", | |||||
| "select", | |||||
| "uni-data-select", | |||||
| "下拉框", | |||||
| "下拉选" | |||||
| ], | |||||
| "repository": "https://github.com/dcloudio/uni-ui", | |||||
| "engines": { | |||||
| "HBuilderX": "^3.1.1" | |||||
| }, | |||||
| "directories": { | |||||
| "example": "../../temps/example_temps" | |||||
| }, | |||||
| "dcloudext": { | |||||
| "sale": { | |||||
| "regular": { | |||||
| "price": "0.00" | |||||
| }, | |||||
| "sourcecode": { | |||||
| "price": "0.00" | |||||
| } | |||||
| }, | |||||
| "contact": { | |||||
| "qq": "" | |||||
| }, | |||||
| "declaration": { | |||||
| "ads": "无", | |||||
| "data": "无", | |||||
| "permissions": "无" | |||||
| }, | |||||
| "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", | |||||
| "type": "component-vue" | |||||
| }, | |||||
| "uni_modules": { | |||||
| "dependencies": ["uni-load-more"], | |||||
| "encrypt": [], | |||||
| "platforms": { | |||||
| "cloud": { | |||||
| "tcb": "y", | |||||
| "aliyun": "y", | |||||
| "alipay": "n" | |||||
| }, | |||||
| "client": { | |||||
| "App": { | |||||
| "app-vue": "u", | |||||
| "app-nvue": "n" | |||||
| }, | |||||
| "H5-mobile": { | |||||
| "Safari": "y", | |||||
| "Android Browser": "y", | |||||
| "微信浏览器(Android)": "y", | |||||
| "QQ浏览器(Android)": "y" | |||||
| }, | |||||
| "H5-pc": { | |||||
| "Chrome": "y", | |||||
| "IE": "y", | |||||
| "Edge": "y", | |||||
| "Firefox": "y", | |||||
| "Safari": "y" | |||||
| }, | |||||
| "小程序": { | |||||
| "微信": "y", | |||||
| "阿里": "u", | |||||
| "百度": "u", | |||||
| "字节跳动": "u", | |||||
| "QQ": "u", | |||||
| "京东": "u" | |||||
| }, | |||||
| "快应用": { | |||||
| "华为": "u", | |||||
| "联盟": "u" | |||||
| }, | |||||
| "Vue": { | |||||
| "vue2": "y", | |||||
| "vue3": "y" | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| @ -0,0 +1,8 @@ | |||||
| ## DataSelect 下拉框选择器 | |||||
| > **组件名:uni-data-select** | |||||
| > 代码块: `uDataSelect` | |||||
| 当选项过多时,使用下拉菜单展示并选择内容 | |||||
| ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-data-select) | |||||
| #### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839 | |||||
| @ -0,0 +1,25 @@ | |||||
| ## 1.3.6(2024-10-15) | |||||
| - 修复 微信小程序中的getSystemInfo警告 | |||||
| ## 1.3.5(2024-10-12) | |||||
| - 修复 微信小程序中的getSystemInfo警告 | |||||
| ## 1.3.4(2024-10-12) | |||||
| - 修复 微信小程序中的getSystemInfo警告 | |||||
| ## 1.3.3(2022-01-20) | |||||
| - 新增 showText属性 ,是否显示文本 | |||||
| ## 1.3.2(2022-01-19) | |||||
| - 修复 nvue 平台下不显示文本的bug | |||||
| ## 1.3.1(2022-01-19) | |||||
| - 修复 微信小程序平台样式选择器报警告的问题 | |||||
| ## 1.3.0(2021-11-19) | |||||
| - 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) | |||||
| - 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-load-more](https://uniapp.dcloud.io/component/uniui/uni-load-more) | |||||
| ## 1.2.1(2021-08-24) | |||||
| - 新增 支持国际化 | |||||
| ## 1.2.0(2021-07-30) | |||||
| - 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) | |||||
| ## 1.1.8(2021-05-12) | |||||
| - 新增 组件示例地址 | |||||
| ## 1.1.7(2021-03-30) | |||||
| - 修复 uni-load-more 在首页使用时,h5 平台报 'uni is not defined' 的 bug | |||||
| ## 1.1.6(2021-02-05) | |||||
| - 调整为uni_modules目录规范 | |||||
| @ -0,0 +1,5 @@ | |||||
| { | |||||
| "uni-load-more.contentdown": "Pull up to show more", | |||||
| "uni-load-more.contentrefresh": "loading...", | |||||
| "uni-load-more.contentnomore": "No more data" | |||||
| } | |||||
| @ -0,0 +1,8 @@ | |||||
| import en from './en.json' | |||||
| import zhHans from './zh-Hans.json' | |||||
| import zhHant from './zh-Hant.json' | |||||
| export default { | |||||
| en, | |||||
| 'zh-Hans': zhHans, | |||||
| 'zh-Hant': zhHant | |||||
| } | |||||
| @ -0,0 +1,5 @@ | |||||
| { | |||||
| "uni-load-more.contentdown": "上拉显示更多", | |||||
| "uni-load-more.contentrefresh": "正在加载...", | |||||
| "uni-load-more.contentnomore": "没有更多数据了" | |||||
| } | |||||
| @ -0,0 +1,5 @@ | |||||
| { | |||||
| "uni-load-more.contentdown": "上拉顯示更多", | |||||
| "uni-load-more.contentrefresh": "正在加載...", | |||||
| "uni-load-more.contentnomore": "沒有更多數據了" | |||||
| } | |||||
| @ -0,0 +1,84 @@ | |||||
| { | |||||
| "id": "uni-load-more", | |||||
| "displayName": "uni-load-more 加载更多", | |||||
| "version": "1.3.6", | |||||
| "description": "LoadMore 组件,常用在列表里面,做滚动加载使用。", | |||||
| "keywords": [ | |||||
| "uni-ui", | |||||
| "uniui", | |||||
| "加载更多", | |||||
| "load-more" | |||||
| ], | |||||
| "repository": "https://github.com/dcloudio/uni-ui", | |||||
| "engines": { | |||||
| "HBuilderX": "" | |||||
| }, | |||||
| "directories": { | |||||
| "example": "../../temps/example_temps" | |||||
| }, | |||||
| "dcloudext": { | |||||
| "sale": { | |||||
| "regular": { | |||||
| "price": "0.00" | |||||
| }, | |||||
| "sourcecode": { | |||||
| "price": "0.00" | |||||
| } | |||||
| }, | |||||
| "contact": { | |||||
| "qq": "" | |||||
| }, | |||||
| "declaration": { | |||||
| "ads": "无", | |||||
| "data": "无", | |||||
| "permissions": "无" | |||||
| }, | |||||
| "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", | |||||
| "type": "component-vue" | |||||
| }, | |||||
| "uni_modules": { | |||||
| "dependencies": ["uni-scss"], | |||||
| "encrypt": [], | |||||
| "platforms": { | |||||
| "cloud": { | |||||
| "tcb": "y", | |||||
| "aliyun": "y", | |||||
| "alipay": "n" | |||||
| }, | |||||
| "client": { | |||||
| "App": { | |||||
| "app-vue": "y", | |||||
| "app-nvue": "y" | |||||
| }, | |||||
| "H5-mobile": { | |||||
| "Safari": "y", | |||||
| "Android Browser": "y", | |||||
| "微信浏览器(Android)": "y", | |||||
| "QQ浏览器(Android)": "y" | |||||
| }, | |||||
| "H5-pc": { | |||||
| "Chrome": "y", | |||||
| "IE": "y", | |||||
| "Edge": "y", | |||||
| "Firefox": "y", | |||||
| "Safari": "y" | |||||
| }, | |||||
| "小程序": { | |||||
| "微信": "y", | |||||
| "阿里": "y", | |||||
| "百度": "y", | |||||
| "字节跳动": "y", | |||||
| "QQ": "y" | |||||
| }, | |||||
| "快应用": { | |||||
| "华为": "u", | |||||
| "联盟": "u" | |||||
| }, | |||||
| "Vue": { | |||||
| "vue2": "y", | |||||
| "vue3": "y" | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| @ -0,0 +1,14 @@ | |||||
| ### LoadMore 加载更多 | |||||
| > **组件名:uni-load-more** | |||||
| > 代码块: `uLoadMore` | |||||
| 用于列表中,做滚动加载使用,展示 loading 的各种状态。 | |||||
| ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-load-more) | |||||
| #### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839 | |||||