parent
c033fc6361
commit
1695a4c4d4
20 changed files with 1138 additions and 567 deletions
@ -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 |
||||||
@ -1,95 +0,0 @@ |
|||||||
<template> |
|
||||||
<view class="container"> |
|
||||||
<uni-card :is-shadow="false" :border="false" padding="0" is-full> |
|
||||||
<view class="form"> |
|
||||||
<view class="line"> |
|
||||||
<uni-data-checkbox v-model="myVal" :localdata="checkList" @change="myChange"></uni-data-checkbox> |
|
||||||
<text>我的邮箱</text> |
|
||||||
<uni-easyinput v-model="email" disabled /> |
|
||||||
<view class="bind" @click="$util.to('../email/email')">绑定</view> |
|
||||||
</view> |
|
||||||
<view class="line"> |
|
||||||
<uni-data-checkbox v-model="otherVal" :localdata="checkList" @change="otherChange"></uni-data-checkbox> |
|
||||||
<text>其他邮箱</text> |
|
||||||
<uni-easyinput v-model="otherEmail" placeholder="请输入其他邮箱" /> |
|
||||||
</view> |
|
||||||
<button type="primary" @click="submit">确认</button> |
|
||||||
</view> |
|
||||||
</uni-card> |
|
||||||
</view> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import { mailFileSend } from '@/apis/modules/parner.js' |
|
||||||
import { my } from '@/apis/modules/parner.js' |
|
||||||
export default { |
|
||||||
data() { |
|
||||||
return { |
|
||||||
email: '', |
|
||||||
otherEmail: '', |
|
||||||
myVal: 1, |
|
||||||
otherVal: '', |
|
||||||
checkList: [{ |
|
||||||
text: '', |
|
||||||
value: 1 |
|
||||||
}], |
|
||||||
} |
|
||||||
}, |
|
||||||
onShow() { |
|
||||||
this.getInfo() |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
// 获取个人信息 |
|
||||||
getInfo() { |
|
||||||
const team = uni.getStorageSync('team') |
|
||||||
my({ |
|
||||||
partnerId: team.partnerId, |
|
||||||
teamId: team.teamId |
|
||||||
}).then(({ my }) => { |
|
||||||
this.email = my.info.email |
|
||||||
}).catch(e => {}) |
|
||||||
}, |
|
||||||
myChange(e) { |
|
||||||
this.otherVal = '' |
|
||||||
}, |
|
||||||
otherChange(e) { |
|
||||||
this.myVal = '' |
|
||||||
}, |
|
||||||
// 提交 |
|
||||||
submit() { |
|
||||||
const { otherEmail } = this |
|
||||||
if (this.myVal && !this.email) return this.$util.errMsg('请选择其他邮箱！') |
|
||||||
if (this.otherVal && !otherEmail) return this.$util.errMsg('请输入邮箱！') |
|
||||||
const data = uni.getStorageSync('files') |
|
||||||
data.mail = this.myVal ? this.email : otherEmail |
|
||||||
mailFileSend(data).then(res => { |
|
||||||
this.$util.sucMsg('发送成功！') |
|
||||||
setTimeout(() => { |
|
||||||
uni.navigateBack() |
|
||||||
}, 1000) |
|
||||||
}).catch(e => {}) |
|
||||||
}, |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped lang="scss"> |
|
||||||
.form { |
|
||||||
padding: 15px; |
|
||||||
background-color: #fff; |
|
||||||
} |
|
||||||
.line { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
margin-bottom: 15px; |
|
||||||
text { |
|
||||||
margin: 0 10px 0 -20px; |
|
||||||
} |
|
||||||
} |
|
||||||
.bind { |
|
||||||
margin-left: 20rpx; |
|
||||||
font-size: 26rpx; |
|
||||||
color: #1f83ff; |
|
||||||
white-space: nowrap; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -0,0 +1,119 @@ |
|||||||
|
<template> |
||||||
|
<view class="page"> |
||||||
|
<template v-if="list.length"> |
||||||
|
<ul class="list"> |
||||||
|
<li v-for="item in list" @change="checkChange(item)"> |
||||||
|
<view class="left"> |
||||||
|
<image class="avatar" :src="item.userAvatars || require('@/static/image/avatar.png')" mode=""></image> |
||||||
|
<view class="info"> |
||||||
|
<view class="name">{{ item.userName }}</view> |
||||||
|
<view class="org">{{ item.schoolName }}</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<uni-icons v-if="curAccount === item.id" type="checkbox" size="30" color="#007EFF"></uni-icons> |
||||||
|
<uni-icons v-else type="circle" size="30" color="#e2e2e2"></uni-icons> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
<view class="add" @click="addAccount"> |
||||||
|
<view class="icon"> |
||||||
|
<uni-icons type="plusempty" size="20" color="#afafaf"></uni-icons> |
||||||
|
</view> |
||||||
|
<text>添加新账号</text> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { searchAllAccountsByPhone, switchAccounts } from '@/apis/modules/user.js' |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
openid: uni.getStorageSync('openid'), |
||||||
|
curAccount: '', |
||||||
|
list: [], |
||||||
|
checkList: [{ |
||||||
|
text: '', |
||||||
|
value: 1 |
||||||
|
}], |
||||||
|
} |
||||||
|
}, |
||||||
|
onShow() { |
||||||
|
this.getList() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
async getList() { |
||||||
|
const res = await searchAllAccountsByPhone({ |
||||||
|
platformId: 1 |
||||||
|
}) |
||||||
|
this.curAccount = +res.accountId |
||||||
|
this.list = res.data |
||||||
|
}, |
||||||
|
// 切换账号 |
||||||
|
async checkChange(e) { |
||||||
|
const { data } = await switchAccounts({ |
||||||
|
id: e.id, |
||||||
|
openid: this.openid, |
||||||
|
platformId: 1 |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 添加账号 |
||||||
|
addAccount() { |
||||||
|
this.$util.to(`../reg/reg?openid=${this.openid}&phone=`) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
.page { |
||||||
|
min-height: 100%; |
||||||
|
padding: 30rpx; |
||||||
|
background-color: #fff; |
||||||
|
} |
||||||
|
.list { |
||||||
|
li { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 30rpx; |
||||||
|
} |
||||||
|
.left { |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.avatar { |
||||||
|
width: 80rpx; |
||||||
|
height: 80rpx; |
||||||
|
margin-right: 20rpx; |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
.name { |
||||||
|
margin-bottom: 6rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
.org { |
||||||
|
font-size: 28rpx; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
} |
||||||
|
.add { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
padding: 30rpx 0; |
||||||
|
.icon { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
width: 80rpx; |
||||||
|
height: 80rpx; |
||||||
|
background-color: #f5f5f5; |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
text { |
||||||
|
margin-left: 20rpx; |
||||||
|
font-size: 28rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue