53 changed files with 4204 additions and 1394 deletions
@ -0,0 +1,16 @@ |
|||||
|
{ // 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": [{ |
||||
|
"app-plus" : |
||||
|
{ |
||||
|
"launchtype" : "local" |
||||
|
}, |
||||
|
"default" : |
||||
|
{ |
||||
|
"launchtype" : "local" |
||||
|
}, |
||||
|
"type" : "uniCloud" |
||||
|
} |
||||
|
] |
||||
|
} |
||||
@ -0,0 +1,98 @@ |
|||||
|
<template> |
||||
|
<view class="container"> |
||||
|
<view class="introduce-section"> |
||||
|
<text class="title">{{ info.params }}</text> |
||||
|
|
||||
|
<view class="bot-row"> |
||||
|
<text>{{ info.code }}</text> |
||||
|
<text>{{ info.ctime | formatCreateTime }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="c-list"> |
||||
|
<text >{{ info.content }}</text> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Api from '@/common/api'; |
||||
|
import { |
||||
|
formatDate |
||||
|
} from '@/common/date'; |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
info: { |
||||
|
|
||||
|
} |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
async onLoad() { |
||||
|
|
||||
|
// 别问我啥意思。这是官方文档提供的 |
||||
|
this.page = this.getOpenerEventChannel(); |
||||
|
// 你可以在这里直接接受，这里不是$on |
||||
|
this.page.on('sendTestValue', (data) => { |
||||
|
// 这是data 就是上个页面传递的对象了 |
||||
|
console.log("消息", data) |
||||
|
this.info = data.info |
||||
|
}) |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
filters: { |
||||
|
formatCreateTime(time) { |
||||
|
let date = new Date(time); |
||||
|
return formatDate(date, 'MM-dd') |
||||
|
}, |
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
page { |
||||
|
background: $page-color-base; |
||||
|
} |
||||
|
|
||||
|
/* 标题简介 */ |
||||
|
.introduce-section { |
||||
|
background: #fff; |
||||
|
padding: 20upx 30upx; |
||||
|
|
||||
|
.title { |
||||
|
font-size: 32upx; |
||||
|
color: $font-color-dark; |
||||
|
height: 50upx; |
||||
|
line-height: 50upx; |
||||
|
} |
||||
|
|
||||
|
.bot-row { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
height: 50upx; |
||||
|
font-size: $font-sm; |
||||
|
color: $font-color-light; |
||||
|
|
||||
|
text { |
||||
|
flex: 1; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.c-list { |
||||
|
display: flex; |
||||
|
margin-top: 10px; |
||||
|
height: 850px; |
||||
|
padding: 10rpx; |
||||
|
background-color: #fff; |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,296 @@ |
|||||
|
<template> |
||||
|
<view class="content"> |
||||
|
<view class="goods-list"> |
||||
|
<view v-for="(item, index) in goodsList" :key="index" class="goods-item"> |
||||
|
<view class="listcard" @click="navToDetailPage(item)"> |
||||
|
<view class="listcard-image"> |
||||
|
<image :src="item.code=='交易物流'?pic1:pic2" mode="aspectFill"></image> |
||||
|
</view> |
||||
|
<view class="listcard-content"> |
||||
|
<view class="listcard-content_title"> |
||||
|
<text>{{item.code}}</text> |
||||
|
<text class="text2">{{item.ctime | formatCreateTime }}</text> |
||||
|
</view> |
||||
|
<text class="listcard-content_title_text">{{item.params}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- <uni-load-more :status="loadingType"></uni-load-more> --> |
||||
|
</view> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Api from '@/common/api'; |
||||
|
import { |
||||
|
formatDate |
||||
|
} from '@/common/date'; |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
pageNum: 1, |
||||
|
pic2: "https://desk-fd.zol-img.com.cn/t_s960x600c5/g1/M0B/03/06/ChMljl402K6IOTZbAARWayFg6S4AAQJPwFhuRIABFaD752.jpg", |
||||
|
pic1: "https://ts1.cn.mm.bing.net/th/id/R-C.2ce48cd4a70b48403a56e9ea8c710355?rik=tU9CL%2fR0TMLEYA&riu=http%3a%2f%2fwww.kutoo8.com%2fupload%2fimage%2f63051471%2f4_1920x1080.jpg&ehk=wZm6BwD%2b8TIDXmqxTntxftDP8IzjD8g3hhI6bEwdb54%3d&risl=&pid=ImgRaw&r=0", |
||||
|
goodsList: [ |
||||
|
// { |
||||
|
// title: "交易物流", |
||||
|
// pic: "https://desk-fd.zol-img.com.cn/t_s960x600c5/g1/M0B/03/06/ChMljl402K6IOTZbAARWayFg6S4AAQJPwFhuRIABFaD752.jpg", |
||||
|
// createTime: "02-12", |
||||
|
// content: "您的订单商品已经到取货点，请在7日内取出。", |
||||
|
// }, |
||||
|
// { |
||||
|
// title: "云链助手", |
||||
|
// pic: "https://ts1.cn.mm.bing.net/th/id/R-C.2ce48cd4a70b48403a56e9ea8c710355?rik=tU9CL%2fR0TMLEYA&riu=http%3a%2f%2fwww.kutoo8.com%2fupload%2fimage%2f63051471%2f4_1920x1080.jpg&ehk=wZm6BwD%2b8TIDXmqxTntxftDP8IzjD8g3hhI6bEwdb54%3d&risl=&pid=ImgRaw&r=0", |
||||
|
// createTime: "01-10", |
||||
|
// content: "春天已经至，已到施肥时间。", |
||||
|
// } |
||||
|
] |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
onLoad(options) { |
||||
|
// #ifdef H5 |
||||
|
this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px'; |
||||
|
// #endif |
||||
|
|
||||
|
// this.loadData(); |
||||
|
}, |
||||
|
onShow() { |
||||
|
this.loadData(); |
||||
|
}, |
||||
|
onPageScroll(e) { |
||||
|
//兼容iOS端下拉时顶部漂移 |
||||
|
// if (e.scrollTop >= 0) { |
||||
|
// this.headerPosition = 'fixed'; |
||||
|
// } else { |
||||
|
// this.headerPosition = 'absolute'; |
||||
|
// } |
||||
|
}, |
||||
|
//下拉刷新 |
||||
|
onPullDownRefresh() { |
||||
|
this.pageNum = this.pageNum + 1; |
||||
|
this.loadData('refresh'); |
||||
|
}, |
||||
|
//加载更多 |
||||
|
onReachBottom() { |
||||
|
this.pageNum = this.pageNum + 1; |
||||
|
this.loadData(); |
||||
|
}, |
||||
|
filters: { |
||||
|
formatCreateTime(time) { |
||||
|
let date = new Date(time); |
||||
|
return formatDate(date, 'MM-dd') |
||||
|
}, |
||||
|
}, |
||||
|
methods: { |
||||
|
//加载商品 ，带下拉刷新和上滑加载 |
||||
|
async loadData(type = 'add', loading) { |
||||
|
//没有更多直接返回 |
||||
|
if (type === 'add') { |
||||
|
if (this.loadingType === 'nomore') { |
||||
|
return; |
||||
|
} |
||||
|
this.loadingType = 'loading'; |
||||
|
} else { |
||||
|
this.loadingType = 'more'; |
||||
|
} |
||||
|
let params = {}; |
||||
|
|
||||
|
|
||||
|
let list = await Api.apiCall('get', Api.member.mesList, params); |
||||
|
console.log("消息列表", list) |
||||
|
this.goodsList = list; |
||||
|
// let goodsList = await this.$api.json('goodsList'); |
||||
|
// if (type === 'refresh') { |
||||
|
// this.goodsList = []; |
||||
|
// } |
||||
|
|
||||
|
// this.goodsList = this.goodsList.concat(goodsList); |
||||
|
|
||||
|
//判断是否还有下一页，有是more 没有是nomore(测试数据判断大于20就没有了) |
||||
|
this.loadingType = this.goodsList.length > list.total ? 'nomore' : 'more'; |
||||
|
if (type === 'refresh') { |
||||
|
if (loading == 1) { |
||||
|
uni.hideLoading(); |
||||
|
} else { |
||||
|
uni.stopPullDownRefresh(); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
//详情 |
||||
|
navToDetailPage(item) { |
||||
|
console.log("消息>>>>", item) |
||||
|
//测试数据没有写id，用title代替 |
||||
|
// let id = item.id; |
||||
|
uni.navigateTo({ |
||||
|
url: '/pages/index/messageDetail', |
||||
|
// 版本2.8.9+ 支持 |
||||
|
success: (res) => { |
||||
|
// 和上面其实没差什么,但是这种方式是可以的 这里不是$emit |
||||
|
res.eventChannel.emit('sendTestValue', { |
||||
|
info: item |
||||
|
}) |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
stopPrevent() {} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
page, |
||||
|
.content { |
||||
|
background: $page-color-base; |
||||
|
} |
||||
|
|
||||
|
.listcard { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 10px; |
||||
|
margin: 15px; |
||||
|
border-radius: 5px; |
||||
|
box-shadow: 0 0 5px 1px rgba($color:#000000, $alpha:0.1); |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
.listcard-image { |
||||
|
flex-shrink: 0; |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
border-radius: 5px; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
image { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.listcard-content { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
padding-left: 10px; |
||||
|
width: 100%; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.listcard-content_title { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
font-size: 14px; |
||||
|
color: #333; |
||||
|
font-weight: 400; |
||||
|
line-height: 1.2; |
||||
|
position: relative; |
||||
|
|
||||
|
text { |
||||
|
font-size: 22px; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp: 1; |
||||
|
-webkit-box-orient: vertical; |
||||
|
} |
||||
|
|
||||
|
.text2 { |
||||
|
color: #999; |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.listcard-content_title_text { |
||||
|
margin-top: 5px; |
||||
|
font-size: 18px; |
||||
|
color: #999; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp: 1; |
||||
|
-webkit-box-orient: vertical; |
||||
|
} |
||||
|
|
||||
|
.listcard-content_des { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
font-size: 12px; |
||||
|
|
||||
|
.listcard-content_des-label { |
||||
|
display: flex; |
||||
|
|
||||
|
.listcard-content_des-label-item { |
||||
|
padding: 0 5px; |
||||
|
margin-right: 5px; |
||||
|
border-radius: 15px; |
||||
|
color: #f00; |
||||
|
border: 1px #f00 solid; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.listcard-content_des-browe { |
||||
|
color: #999; |
||||
|
font-size: 15px; |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.mode-column { |
||||
|
.list-content { |
||||
|
width: 100%; |
||||
|
padding-left: 0; |
||||
|
} |
||||
|
|
||||
|
.listcard-image { |
||||
|
display: flex; |
||||
|
margin-top: 10px; |
||||
|
width: 100%; |
||||
|
height: 80px; |
||||
|
|
||||
|
.listcard-image_item { |
||||
|
margin-left: 10px; |
||||
|
width: 100%; |
||||
|
border-radius: 5px; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
&:first-child { |
||||
|
margin-left: 0; |
||||
|
} |
||||
|
|
||||
|
image { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.listcard-content_des { |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.mode-image { |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.listcard-image { |
||||
|
width: 100%; |
||||
|
height: 100px; |
||||
|
} |
||||
|
|
||||
|
.listcard-content { |
||||
|
padding-left: 0; |
||||
|
margin-top: 10px; |
||||
|
|
||||
|
.listcard-content_des { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
File diff suppressed because it is too large
@ -0,0 +1,232 @@ |
|||||
|
<template> |
||||
|
<view class="content"> |
||||
|
|
||||
|
<view class="row b-b"> |
||||
|
<text class="tit">联系人</text> |
||||
|
<input class="input" type="text" v-model="addressData.name" placeholder="收货人姓名" |
||||
|
placeholder-class="placeholder" /> |
||||
|
</view> |
||||
|
<view class="row b-b"> |
||||
|
<text class="tit">手机号</text> |
||||
|
<input class="input" type="number" maxlength="11" v-model="addressData.phoneNumber" placeholder="收货人手机号码" |
||||
|
placeholder-class="placeholder" /> |
||||
|
</view> |
||||
|
|
||||
|
<view class="row b-b"> |
||||
|
<text class="tit">城市</text> |
||||
|
<input placeholder="请选择城市" disabled="true" |
||||
|
:value="addressData.province + ' ' + addressData.city + ' ' + addressData.region" |
||||
|
@click="lotusAddressData.visible = true" class="input"> |
||||
|
<lotus-address v-on:choseVal="choseValue" :lotusAddressData="lotusAddressData"></lotus-address> |
||||
|
</input> |
||||
|
<text class="yticon icon-shouhuodizhi"></text> |
||||
|
</view> |
||||
|
<view class="row b-b"> |
||||
|
<text class="tit">地图:</text> |
||||
|
|
||||
|
|
||||
|
<input class="input" @click="openMap()" type="text" value="" v-model="mapAddressName" |
||||
|
placeholder="在地图上搜索并选择地址" disabled="true" /> |
||||
|
<text class="yticon icon-shouhuodizhi"></text> |
||||
|
|
||||
|
</view> |
||||
|
<view class="row b-b"> |
||||
|
<text class="tit">详细</text> |
||||
|
<input class="input" type="text" v-model="addressData.detailAddress" placeholder="街道、楼号、门牌" |
||||
|
placeholder-class="placeholder" /> |
||||
|
</view> |
||||
|
|
||||
|
<view class="row default-row"> |
||||
|
<text class="tit">设为默认</text> |
||||
|
<switch :checked="addressData.defaultStatus" color="#fa436a" @change="switchChange" /> |
||||
|
</view> |
||||
|
<button class="add-btn" @click="confirm">提交</button> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Api from '@/common/api'; |
||||
|
import lotusAddress from "@/components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue" |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
mapAddressName: '', |
||||
|
addressData: { |
||||
|
name: '', |
||||
|
phoneNumber: '', |
||||
|
province: '', |
||||
|
city: '', |
||||
|
region: '', |
||||
|
detailAddress: '', |
||||
|
defaultStatus: 0, |
||||
|
def: false |
||||
|
}, |
||||
|
lotusAddressData: { |
||||
|
visible: false, |
||||
|
provinceName: '', |
||||
|
cityName: '', |
||||
|
townName: '', |
||||
|
}, |
||||
|
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
let title = '新增收货地址'; |
||||
|
if (option.type === 'edit') { |
||||
|
title = '编辑收货地址' |
||||
|
this.addressData = JSON.parse(option.data) |
||||
|
} |
||||
|
this.manageType = option.type; |
||||
|
uni.setNavigationBarTitle({ |
||||
|
title |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
switchChange(e) { |
||||
|
this.addressData.defaultStatus = e.detail.value ? 1 : 0 |
||||
|
this.addressData.def = e.detail.value |
||||
|
}, |
||||
|
openMap() { |
||||
|
var _this = this; |
||||
|
uni.chooseLocation({ |
||||
|
|
||||
|
success: function(res) { |
||||
|
console.log('res', res); |
||||
|
|
||||
|
_this.addressData.latitude = res.latitude; |
||||
|
_this.addressData.longitude = res.longitude; |
||||
|
_this.mapAddressName = res.address + res.name; |
||||
|
_this.addressData.detailAddress = res.address + res.name; |
||||
|
console.log('经度：' + res.longitude); |
||||
|
console.log('详细地址：' + res.address); |
||||
|
console.log('纬度：' + res.latitude); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
}, |
||||
|
choseValue(res) { |
||||
|
//res数据源包括已选省市区与省市区code |
||||
|
this.lotusAddressData.visible = false; //visible为显示与关闭组件标识true显示false隐藏 |
||||
|
if (res.isChose) { |
||||
|
console.log(res) |
||||
|
this.lotusAddressData.provinceName = res.provice; //省 |
||||
|
this.lotusAddressData.cityName = res.city; //市 |
||||
|
this.lotusAddressData.townName = res.town; //区 |
||||
|
|
||||
|
//赋值到addressData |
||||
|
this.addressData.province = res.provice |
||||
|
this.addressData.city = res.city |
||||
|
this.addressData.region = res.town |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
//提交 |
||||
|
async confirm() { |
||||
|
const that = this |
||||
|
let data = this.addressData; |
||||
|
if (!data.name) { |
||||
|
this.$api.msg('请填写收货人姓名'); |
||||
|
return; |
||||
|
} |
||||
|
if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.phoneNumber)) { |
||||
|
that.$api.msg('请输入正确的手机号码'); |
||||
|
return |
||||
|
} |
||||
|
if (!data.province) { |
||||
|
that.$api.msg('请选择省市区'); |
||||
|
return |
||||
|
} |
||||
|
if (!data.city) { |
||||
|
that.$api.msg('请选择二级城市') |
||||
|
return |
||||
|
} |
||||
|
if (!data.region) { |
||||
|
that.$api.msg('请选择三级区或县') |
||||
|
return |
||||
|
} |
||||
|
if (!data.detailAddress) { |
||||
|
that.$api.msg('请输入详细地址'); |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
let data1 = await Api.apiCall('post', Api.goods.addressSave, that.addressData); |
||||
|
if (data1) { |
||||
|
this.$api.msg(`保存成功`); |
||||
|
setTimeout(() => { |
||||
|
uni.navigateBack({ |
||||
|
delta: 1 |
||||
|
}) |
||||
|
|
||||
|
}, 800); |
||||
|
} else { |
||||
|
this.$api.msg(`保存失败`); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
}, |
||||
|
components: { |
||||
|
"lotus-address": lotusAddress |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
page { |
||||
|
background: $page-color-base; |
||||
|
padding-top: 16upx; |
||||
|
} |
||||
|
|
||||
|
.row { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
position: relative; |
||||
|
padding: 0 30upx; |
||||
|
height: 110upx; |
||||
|
background: #fff; |
||||
|
|
||||
|
.tit { |
||||
|
flex-shrink: 0; |
||||
|
width: 120upx; |
||||
|
font-size: 30upx; |
||||
|
color: $font-color-dark; |
||||
|
} |
||||
|
|
||||
|
.input { |
||||
|
flex: 1; |
||||
|
font-size: 30upx; |
||||
|
color: $font-color-dark; |
||||
|
} |
||||
|
|
||||
|
.icon-shouhuodizhi { |
||||
|
font-size: 36upx; |
||||
|
color: $font-color-light; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.default-row { |
||||
|
margin-top: 16upx; |
||||
|
|
||||
|
.tit { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
switch { |
||||
|
transform: translateX(16upx) scale(.9); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.add-btn { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 690upx; |
||||
|
height: 80upx; |
||||
|
margin: 60upx auto; |
||||
|
font-size: $font-lg; |
||||
|
color: #fff; |
||||
|
background-color: $base-color; |
||||
|
border-radius: 10upx; |
||||
|
box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4); |
||||
|
} |
||||
|
</style> |
||||
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 39 KiB |
|
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 54 KiB |
|
Before Width: | Height: | Size: 4.9 MiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 12 KiB |
@ -0,0 +1,33 @@ |
|||||
|
## 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,502 @@ |
|||||
|
<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">{{current}}</view> |
||||
|
<view v-else class="uni-select__input-text uni-select__input-placeholder">{{typePlaceholder}}</view> |
||||
|
<uni-icons v-if="current && clear && !disabled" type="clear" color="#c0c4cc" size="24" @click="clearVal" /> |
||||
|
<uni-icons v-else :type="showSelector? 'top' : 'bottom'" size="14" color="#999" /> |
||||
|
</view> |
||||
|
<view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" /> |
||||
|
<view class="uni-select__selector" v-if="showSelector"> |
||||
|
<view class="uni-popper__arrow"></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 是否禁用 |
||||
|
* @event {Function} change 选中发生变化触发 |
||||
|
*/ |
||||
|
|
||||
|
export default { |
||||
|
name: "uni-stat-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: '' |
||||
|
}, |
||||
|
}, |
||||
|
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 |
||||
|
} |
||||
|
}, |
||||
|
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('change', val) |
||||
|
this.$emit('input', val) |
||||
|
this.$emit('update:modelValue', 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; |
||||
|
cursor: pointer; |
||||
|
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: 25px; |
||||
|
font-weight: bold; |
||||
|
color: $uni-base-color; |
||||
|
margin: auto 0; |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
|
||||
|
.uni-select { |
||||
|
font-size: 25px; |
||||
|
// 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: 25px; |
||||
|
// 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: 25x; |
||||
|
height: 22px; |
||||
|
line-height: 22px; |
||||
|
} |
||||
|
|
||||
|
.uni-select__input-plac { |
||||
|
font-size: 25px; |
||||
|
color: $uni-secondary-color; |
||||
|
} |
||||
|
|
||||
|
.uni-select__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: 3; |
||||
|
padding: 4px 0; |
||||
|
} |
||||
|
|
||||
|
.uni-select__selector-scroll { |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
max-height: 500px; |
||||
|
box-sizing: border-box; |
||||
|
/* #endif */ |
||||
|
} |
||||
|
|
||||
|
.uni-select__selector-empty, |
||||
|
.uni-select__selector-item { |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
display: flex; |
||||
|
cursor: pointer; |
||||
|
/* #endif */ |
||||
|
line-height: 55px; |
||||
|
font-size: 25px; |
||||
|
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, |
||||
|
.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-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: 25px; |
||||
|
} |
||||
|
|
||||
|
.uni-select--mask { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
left: 0; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,85 @@ |
|||||
|
{ |
||||
|
"id": "uni-data-select", |
||||
|
"displayName": "uni-data-select 下拉框选择器", |
||||
|
"version": "1.0.5", |
||||
|
"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" |
||||
|
}, |
||||
|
"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,19 @@ |
|||||
|
## 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": "沒有更多數據了" |
||||
|
} |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,86 @@ |
|||||
|
{ |
||||
|
"id": "uni-load-more", |
||||
|
"displayName": "uni-load-more 加载更多", |
||||
|
"version": "1.3.3", |
||||
|
"description": "LoadMore 组件，常用在列表里面，做滚动加载使用。", |
||||
|
"keywords": [ |
||||
|
"uni-ui", |
||||
|
"uniui", |
||||
|
"加载更多", |
||||
|
"load-more" |
||||
|
], |
||||
|
"repository": "https://github.com/dcloudio/uni-ui", |
||||
|
"engines": { |
||||
|
"HBuilderX": "" |
||||
|
}, |
||||
|
"directories": { |
||||
|
"example": "../../temps/example_temps" |
||||
|
}, |
||||
|
"dcloudext": { |
||||
|
"category": [ |
||||
|
"前端组件", |
||||
|
"通用组件" |
||||
|
], |
||||
|
"sale": { |
||||
|
"regular": { |
||||
|
"price": "0.00" |
||||
|
}, |
||||
|
"sourcecode": { |
||||
|
"price": "0.00" |
||||
|
} |
||||
|
}, |
||||
|
"contact": { |
||||
|
"qq": "" |
||||
|
}, |
||||
|
"declaration": { |
||||
|
"ads": "无", |
||||
|
"data": "无", |
||||
|
"permissions": "无" |
||||
|
}, |
||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" |
||||
|
}, |
||||
|
"uni_modules": { |
||||
|
"dependencies": ["uni-scss"], |
||||
|
"encrypt": [], |
||||
|
"platforms": { |
||||
|
"cloud": { |
||||
|
"tcb": "y", |
||||
|
"aliyun": "y" |
||||
|
}, |
||||
|
"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 |
||||
|
|
||||
|
|
||||
@ -0,0 +1,8 @@ |
|||||
|
## 1.0.3（2022-01-21） |
||||
|
- 优化 组件示例 |
||||
|
## 1.0.2（2021-11-22） |
||||
|
- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题 |
||||
|
## 1.0.1（2021-11-22） |
||||
|
- 修复 vue3中scss语法兼容问题 |
||||
|
## 1.0.0（2021-11-18） |
||||
|
- init |
||||
@ -0,0 +1 @@ |
|||||
|
@import './styles/index.scss'; |
||||
@ -0,0 +1,82 @@ |
|||||
|
{ |
||||
|
"id": "uni-scss", |
||||
|
"displayName": "uni-scss 辅助样式", |
||||
|
"version": "1.0.3", |
||||
|
"description": "uni-sass是uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。", |
||||
|
"keywords": [ |
||||
|
"uni-scss", |
||||
|
"uni-ui", |
||||
|
"辅助样式" |
||||
|
], |
||||
|
"repository": "https://github.com/dcloudio/uni-ui", |
||||
|
"engines": { |
||||
|
"HBuilderX": "^3.1.0" |
||||
|
}, |
||||
|
"dcloudext": { |
||||
|
"category": [ |
||||
|
"JS SDK", |
||||
|
"通用 SDK" |
||||
|
], |
||||
|
"sale": { |
||||
|
"regular": { |
||||
|
"price": "0.00" |
||||
|
}, |
||||
|
"sourcecode": { |
||||
|
"price": "0.00" |
||||
|
} |
||||
|
}, |
||||
|
"contact": { |
||||
|
"qq": "" |
||||
|
}, |
||||
|
"declaration": { |
||||
|
"ads": "无", |
||||
|
"data": "无", |
||||
|
"permissions": "无" |
||||
|
}, |
||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" |
||||
|
}, |
||||
|
"uni_modules": { |
||||
|
"dependencies": [], |
||||
|
"encrypt": [], |
||||
|
"platforms": { |
||||
|
"cloud": { |
||||
|
"tcb": "y", |
||||
|
"aliyun": "y" |
||||
|
}, |
||||
|
"client": { |
||||
|
"App": { |
||||
|
"app-vue": "y", |
||||
|
"app-nvue": "u" |
||||
|
}, |
||||
|
"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" |
||||
|
}, |
||||
|
"快应用": { |
||||
|
"华为": "n", |
||||
|
"联盟": "n" |
||||
|
}, |
||||
|
"Vue": { |
||||
|
"vue2": "y", |
||||
|
"vue3": "y" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,4 @@ |
|||||
|
`uni-sass` 是 `uni-ui`提供的一套全局样式 ，通过一些简单的类名和`sass`变量，实现简单的页面布局操作，比如颜色、边距、圆角等。 |
||||
|
|
||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass) |
||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 |
||||
@ -0,0 +1,7 @@ |
|||||
|
@import './setting/_variables.scss'; |
||||
|
@import './setting/_border.scss'; |
||||
|
@import './setting/_color.scss'; |
||||
|
@import './setting/_space.scss'; |
||||
|
@import './setting/_radius.scss'; |
||||
|
@import './setting/_text.scss'; |
||||
|
@import './setting/_styles.scss'; |
||||
@ -0,0 +1,3 @@ |
|||||
|
.uni-border { |
||||
|
border: 1px $uni-border-1 solid; |
||||
|
} |
||||
@ -0,0 +1,66 @@ |
|||||
|
|
||||
|
// TODO 暂时不需要 class ，需要用户使用变量实现 ，如果使用类名其实并不推荐 |
||||
|
// @mixin get-styles($k,$c) { |
||||
|
// @if $k == size or $k == weight{ |
||||
|
// font-#{$k}:#{$c} |
||||
|
// }@else{ |
||||
|
// #{$k}:#{$c} |
||||
|
// } |
||||
|
// } |
||||
|
$uni-ui-color:( |
||||
|
// 主色 |
||||
|
primary: $uni-primary, |
||||
|
primary-disable: $uni-primary-disable, |
||||
|
primary-light: $uni-primary-light, |
||||
|
// 辅助色 |
||||
|
success: $uni-success, |
||||
|
success-disable: $uni-success-disable, |
||||
|
success-light: $uni-success-light, |
||||
|
warning: $uni-warning, |
||||
|
warning-disable: $uni-warning-disable, |
||||
|
warning-light: $uni-warning-light, |
||||
|
error: $uni-error, |
||||
|
error-disable: $uni-error-disable, |
||||
|
error-light: $uni-error-light, |
||||
|
info: $uni-info, |
||||
|
info-disable: $uni-info-disable, |
||||
|
info-light: $uni-info-light, |
||||
|
// 中性色 |
||||
|
main-color: $uni-main-color, |
||||
|
base-color: $uni-base-color, |
||||
|
secondary-color: $uni-secondary-color, |
||||
|
extra-color: $uni-extra-color, |
||||
|
// 背景色 |
||||
|
bg-color: $uni-bg-color, |
||||
|
// 边框颜色 |
||||
|
border-1: $uni-border-1, |
||||
|
border-2: $uni-border-2, |
||||
|
border-3: $uni-border-3, |
||||
|
border-4: $uni-border-4, |
||||
|
// 黑色 |
||||
|
black:$uni-black, |
||||
|
// 白色 |
||||
|
white:$uni-white, |
||||
|
// 透明 |
||||
|
transparent:$uni-transparent |
||||
|
) !default; |
||||
|
@each $key, $child in $uni-ui-color { |
||||
|
.uni-#{"" + $key} { |
||||
|
color: $child; |
||||
|
} |
||||
|
.uni-#{"" + $key}-bg { |
||||
|
background-color: $child; |
||||
|
} |
||||
|
} |
||||
|
.uni-shadow-sm { |
||||
|
box-shadow: $uni-shadow-sm; |
||||
|
} |
||||
|
.uni-shadow-base { |
||||
|
box-shadow: $uni-shadow-base; |
||||
|
} |
||||
|
.uni-shadow-lg { |
||||
|
box-shadow: $uni-shadow-lg; |
||||
|
} |
||||
|
.uni-mask { |
||||
|
background-color:$uni-mask; |
||||
|
} |
||||
@ -0,0 +1,55 @@ |
|||||
|
@mixin radius($r,$d:null ,$important: false){ |
||||
|
$radius-value:map-get($uni-radius, $r) if($important, !important, null); |
||||
|
// Key exists within the $uni-radius variable |
||||
|
@if (map-has-key($uni-radius, $r) and $d){ |
||||
|
@if $d == t { |
||||
|
border-top-left-radius:$radius-value; |
||||
|
border-top-right-radius:$radius-value; |
||||
|
}@else if $d == r { |
||||
|
border-top-right-radius:$radius-value; |
||||
|
border-bottom-right-radius:$radius-value; |
||||
|
}@else if $d == b { |
||||
|
border-bottom-left-radius:$radius-value; |
||||
|
border-bottom-right-radius:$radius-value; |
||||
|
}@else if $d == l { |
||||
|
border-top-left-radius:$radius-value; |
||||
|
border-bottom-left-radius:$radius-value; |
||||
|
}@else if $d == tl { |
||||
|
border-top-left-radius:$radius-value; |
||||
|
}@else if $d == tr { |
||||
|
border-top-right-radius:$radius-value; |
||||
|
}@else if $d == br { |
||||
|
border-bottom-right-radius:$radius-value; |
||||
|
}@else if $d == bl { |
||||
|
border-bottom-left-radius:$radius-value; |
||||
|
} |
||||
|
}@else{ |
||||
|
border-radius:$radius-value; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@each $key, $child in $uni-radius { |
||||
|
@if($key){ |
||||
|
.uni-radius-#{"" + $key} { |
||||
|
@include radius($key) |
||||
|
} |
||||
|
}@else{ |
||||
|
.uni-radius { |
||||
|
@include radius($key) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@each $direction in t, r, b, l,tl, tr, br, bl { |
||||
|
@each $key, $child in $uni-radius { |
||||
|
@if($key){ |
||||
|
.uni-radius-#{"" + $direction}-#{"" + $key} { |
||||
|
@include radius($key,$direction,false) |
||||
|
} |
||||
|
}@else{ |
||||
|
.uni-radius-#{$direction} { |
||||
|
@include radius($key,$direction,false) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,56 @@ |
|||||
|
|
||||
|
@mixin fn($space,$direction,$size,$n) { |
||||
|
@if $n { |
||||
|
#{$space}-#{$direction}: #{$size*$uni-space-root}px |
||||
|
} @else { |
||||
|
#{$space}-#{$direction}: #{-$size*$uni-space-root}px |
||||
|
} |
||||
|
} |
||||
|
@mixin get-styles($direction,$i,$space,$n){ |
||||
|
@if $direction == t { |
||||
|
@include fn($space, top,$i,$n); |
||||
|
} |
||||
|
@if $direction == r { |
||||
|
@include fn($space, right,$i,$n); |
||||
|
} |
||||
|
@if $direction == b { |
||||
|
@include fn($space, bottom,$i,$n); |
||||
|
} |
||||
|
@if $direction == l { |
||||
|
@include fn($space, left,$i,$n); |
||||
|
} |
||||
|
@if $direction == x { |
||||
|
@include fn($space, left,$i,$n); |
||||
|
@include fn($space, right,$i,$n); |
||||
|
} |
||||
|
@if $direction == y { |
||||
|
@include fn($space, top,$i,$n); |
||||
|
@include fn($space, bottom,$i,$n); |
||||
|
} |
||||
|
@if $direction == a { |
||||
|
@if $n { |
||||
|
#{$space}:#{$i*$uni-space-root}px; |
||||
|
} @else { |
||||
|
#{$space}:#{-$i*$uni-space-root}px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@each $orientation in m,p { |
||||
|
$space: margin; |
||||
|
@if $orientation == m { |
||||
|
$space: margin; |
||||
|
} @else { |
||||
|
$space: padding; |
||||
|
} |
||||
|
@for $i from 0 through 16 { |
||||
|
@each $direction in t, r, b, l, x, y, a { |
||||
|
.uni-#{$orientation}#{$direction}-#{$i} { |
||||
|
@include get-styles($direction,$i,$space,true); |
||||
|
} |
||||
|
.uni-#{$orientation}#{$direction}-n#{$i} { |
||||
|
@include get-styles($direction,$i,$space,false); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,167 @@ |
|||||
|
/* #ifndef APP-NVUE */ |
||||
|
|
||||
|
$-color-white:#fff; |
||||
|
$-color-black:#000; |
||||
|
@mixin base-style($color) { |
||||
|
color: #fff; |
||||
|
background-color: $color; |
||||
|
border-color: mix($-color-black, $color, 8%); |
||||
|
&:not([hover-class]):active { |
||||
|
background: mix($-color-black, $color, 10%); |
||||
|
border-color: mix($-color-black, $color, 20%); |
||||
|
color: $-color-white; |
||||
|
outline: none; |
||||
|
} |
||||
|
} |
||||
|
@mixin is-color($color) { |
||||
|
@include base-style($color); |
||||
|
&[loading] { |
||||
|
@include base-style($color); |
||||
|
&::before { |
||||
|
margin-right:5px; |
||||
|
} |
||||
|
} |
||||
|
&[disabled] { |
||||
|
&, |
||||
|
&[loading], |
||||
|
&:not([hover-class]):active { |
||||
|
color: $-color-white; |
||||
|
border-color: mix(darken($color,10%), $-color-white); |
||||
|
background-color: mix($color, $-color-white); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
@mixin base-plain-style($color) { |
||||
|
color:$color; |
||||
|
background-color: mix($-color-white, $color, 90%); |
||||
|
border-color: mix($-color-white, $color, 70%); |
||||
|
&:not([hover-class]):active { |
||||
|
background: mix($-color-white, $color, 80%); |
||||
|
color: $color; |
||||
|
outline: none; |
||||
|
border-color: mix($-color-white, $color, 50%); |
||||
|
} |
||||
|
} |
||||
|
@mixin is-plain($color){ |
||||
|
&[plain] { |
||||
|
@include base-plain-style($color); |
||||
|
&[loading] { |
||||
|
@include base-plain-style($color); |
||||
|
&::before { |
||||
|
margin-right:5px; |
||||
|
} |
||||
|
} |
||||
|
&[disabled] { |
||||
|
&, |
||||
|
&:active { |
||||
|
color: mix($-color-white, $color, 40%); |
||||
|
background-color: mix($-color-white, $color, 90%); |
||||
|
border-color: mix($-color-white, $color, 80%); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.uni-btn { |
||||
|
margin: 5px; |
||||
|
color: #393939; |
||||
|
border:1px solid #ccc; |
||||
|
font-size: 16px; |
||||
|
font-weight: 200; |
||||
|
background-color: #F9F9F9; |
||||
|
// TODO 暂时处理边框隐藏一边的问题 |
||||
|
overflow: visible; |
||||
|
&::after{ |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
&:not([type]),&[type=default] { |
||||
|
color: #999; |
||||
|
&[loading] { |
||||
|
background: none; |
||||
|
&::before { |
||||
|
margin-right:5px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
&[disabled]{ |
||||
|
color: mix($-color-white, #999, 60%); |
||||
|
&, |
||||
|
&[loading], |
||||
|
&:active { |
||||
|
color: mix($-color-white, #999, 60%); |
||||
|
background-color: mix($-color-white,$-color-black , 98%); |
||||
|
border-color: mix($-color-white, #999, 85%); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&[plain] { |
||||
|
color: #999; |
||||
|
background: none; |
||||
|
border-color: $uni-border-1; |
||||
|
&:not([hover-class]):active { |
||||
|
background: none; |
||||
|
color: mix($-color-white, $-color-black, 80%); |
||||
|
border-color: mix($-color-white, $-color-black, 90%); |
||||
|
outline: none; |
||||
|
} |
||||
|
&[disabled]{ |
||||
|
&, |
||||
|
&[loading], |
||||
|
&:active { |
||||
|
background: none; |
||||
|
color: mix($-color-white, #999, 60%); |
||||
|
border-color: mix($-color-white, #999, 85%); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&:not([hover-class]):active { |
||||
|
color: mix($-color-white, $-color-black, 50%); |
||||
|
} |
||||
|
|
||||
|
&[size=mini] { |
||||
|
font-size: 16px; |
||||
|
font-weight: 200; |
||||
|
border-radius: 8px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
&.uni-btn-small { |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
&.uni-btn-mini { |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
&.uni-btn-radius { |
||||
|
border-radius: 999px; |
||||
|
} |
||||
|
&[type=primary] { |
||||
|
@include is-color($uni-primary); |
||||
|
@include is-plain($uni-primary) |
||||
|
} |
||||
|
&[type=success] { |
||||
|
@include is-color($uni-success); |
||||
|
@include is-plain($uni-success) |
||||
|
} |
||||
|
&[type=error] { |
||||
|
@include is-color($uni-error); |
||||
|
@include is-plain($uni-error) |
||||
|
} |
||||
|
&[type=warning] { |
||||
|
@include is-color($uni-warning); |
||||
|
@include is-plain($uni-warning) |
||||
|
} |
||||
|
&[type=info] { |
||||
|
@include is-color($uni-info); |
||||
|
@include is-plain($uni-info) |
||||
|
} |
||||
|
} |
||||
|
/* #endif */ |
||||
@ -0,0 +1,24 @@ |
|||||
|
@mixin get-styles($k,$c) { |
||||
|
@if $k == size or $k == weight{ |
||||
|
font-#{$k}:#{$c} |
||||
|
}@else{ |
||||
|
#{$k}:#{$c} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@each $key, $child in $uni-headings { |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
.uni-#{$key} { |
||||
|
@each $k, $c in $child { |
||||
|
@include get-styles($k,$c) |
||||
|
} |
||||
|
} |
||||
|
/* #endif */ |
||||
|
/* #ifdef APP-NVUE */ |
||||
|
.container .uni-#{$key} { |
||||
|
@each $k, $c in $child { |
||||
|
@include get-styles($k,$c) |
||||
|
} |
||||
|
} |
||||
|
/* #endif */ |
||||
|
} |
||||
@ -0,0 +1,146 @@ |
|||||
|
// @use "sass:math"; |
||||
|
@import '../tools/functions.scss'; |
||||
|
// 间距基础倍数 |
||||
|
$uni-space-root: 2 !default; |
||||
|
// 边框半径默认值 |
||||
|
$uni-radius-root:5px !default; |
||||
|
$uni-radius: () !default; |
||||
|
// 边框半径断点 |
||||
|
$uni-radius: map-deep-merge( |
||||
|
( |
||||
|
0: 0, |
||||
|
// TODO 当前版本暂时不支持 sm 属性 |
||||
|
// 'sm': math.div($uni-radius-root, 2), |
||||
|
null: $uni-radius-root, |
||||
|
'lg': $uni-radius-root * 2, |
||||
|
'xl': $uni-radius-root * 6, |
||||
|
'pill': 9999px, |
||||
|
'circle': 50% |
||||
|
), |
||||
|
$uni-radius |
||||
|
); |
||||
|
// 字体家族 |
||||
|
$body-font-family: 'Roboto', sans-serif !default; |
||||
|
// 文本 |
||||
|
$heading-font-family: $body-font-family !default; |
||||
|
$uni-headings: () !default; |
||||
|
$letterSpacing: -0.01562em; |
||||
|
$uni-headings: map-deep-merge( |
||||
|
( |
||||
|
'h1': ( |
||||
|
size: 32px, |
||||
|
weight: 300, |
||||
|
line-height: 50px, |
||||
|
// letter-spacing:-0.01562em |
||||
|
), |
||||
|
'h2': ( |
||||
|
size: 28px, |
||||
|
weight: 300, |
||||
|
line-height: 40px, |
||||
|
// letter-spacing: -0.00833em |
||||
|
), |
||||
|
'h3': ( |
||||
|
size: 24px, |
||||
|
weight: 400, |
||||
|
line-height: 32px, |
||||
|
// letter-spacing: normal |
||||
|
), |
||||
|
'h4': ( |
||||
|
size: 20px, |
||||
|
weight: 400, |
||||
|
line-height: 30px, |
||||
|
// letter-spacing: 0.00735em |
||||
|
), |
||||
|
'h5': ( |
||||
|
size: 16px, |
||||
|
weight: 400, |
||||
|
line-height: 24px, |
||||
|
// letter-spacing: normal |
||||
|
), |
||||
|
'h6': ( |
||||
|
size: 14px, |
||||
|
weight: 500, |
||||
|
line-height: 18px, |
||||
|
// letter-spacing: 0.0125em |
||||
|
), |
||||
|
'subtitle': ( |
||||
|
size: 12px, |
||||
|
weight: 400, |
||||
|
line-height: 20px, |
||||
|
// letter-spacing: 0.00937em |
||||
|
), |
||||
|
'body': ( |
||||
|
font-size: 14px, |
||||
|
font-weight: 400, |
||||
|
line-height: 22px, |
||||
|
// letter-spacing: 0.03125em |
||||
|
), |
||||
|
'caption': ( |
||||
|
'size': 12px, |
||||
|
'weight': 400, |
||||
|
'line-height': 20px, |
||||
|
// 'letter-spacing': 0.03333em, |
||||
|
// 'text-transform': false |
||||
|
) |
||||
|
), |
||||
|
$uni-headings |
||||
|
); |
||||
|
|
||||
|
|
||||
|
|
||||
|
// 主色 |
||||
|
$uni-primary: #2979ff !default; |
||||
|
$uni-primary-disable:lighten($uni-primary,20%) !default; |
||||
|
$uni-primary-light: lighten($uni-primary,25%) !default; |
||||
|
|
||||
|
// 辅助色 |
||||
|
// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。 |
||||
|
$uni-success: #18bc37 !default; |
||||
|
$uni-success-disable:lighten($uni-success,20%) !default; |
||||
|
$uni-success-light: lighten($uni-success,25%) !default; |
||||
|
|
||||
|
$uni-warning: #f3a73f !default; |
||||
|
$uni-warning-disable:lighten($uni-warning,20%) !default; |
||||
|
$uni-warning-light: lighten($uni-warning,25%) !default; |
||||
|
|
||||
|
$uni-error: #e43d33 !default; |
||||
|
$uni-error-disable:lighten($uni-error,20%) !default; |
||||
|
$uni-error-light: lighten($uni-error,25%) !default; |
||||
|
|
||||
|
$uni-info: #8f939c !default; |
||||
|
$uni-info-disable:lighten($uni-info,20%) !default; |
||||
|
$uni-info-light: lighten($uni-info,25%) !default; |
||||
|
|
||||
|
// 中性色 |
||||
|
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。 |
||||
|
$uni-main-color: #3a3a3a !default; // 主要文字 |
||||
|
$uni-base-color: #6a6a6a !default; // 常规文字 |
||||
|
$uni-secondary-color: #909399 !default; // 次要文字 |
||||
|
$uni-extra-color: #c7c7c7 !default; // 辅助说明 |
||||
|
|
||||
|
// 边框颜色 |
||||
|
$uni-border-1: #F0F0F0 !default; |
||||
|
$uni-border-2: #EDEDED !default; |
||||
|
$uni-border-3: #DCDCDC !default; |
||||
|
$uni-border-4: #B9B9B9 !default; |
||||
|
|
||||
|
// 常规色 |
||||
|
$uni-black: #000000 !default; |
||||
|
$uni-white: #ffffff !default; |
||||
|
$uni-transparent: rgba($color: #000000, $alpha: 0) !default; |
||||
|
|
||||
|
// 背景色 |
||||
|
$uni-bg-color: #f7f7f7 !default; |
||||
|
|
||||
|
/* 水平间距 */ |
||||
|
$uni-spacing-sm: 8px !default; |
||||
|
$uni-spacing-base: 15px !default; |
||||
|
$uni-spacing-lg: 30px !default; |
||||
|
|
||||
|
// 阴影 |
||||
|
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default; |
||||
|
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default; |
||||
|
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default; |
||||
|
|
||||
|
// 蒙版 |
||||
|
$uni-mask: rgba($color: #000000, $alpha: 0.4) !default; |
||||
@ -0,0 +1,19 @@ |
|||||
|
// 合并 map |
||||
|
@function map-deep-merge($parent-map, $child-map){ |
||||
|
$result: $parent-map; |
||||
|
@each $key, $child in $child-map { |
||||
|
$parent-has-key: map-has-key($result, $key); |
||||
|
$parent-value: map-get($result, $key); |
||||
|
$parent-type: type-of($parent-value); |
||||
|
$child-type: type-of($child); |
||||
|
$parent-is-map: $parent-type == map; |
||||
|
$child-is-map: $child-type == map; |
||||
|
|
||||
|
@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){ |
||||
|
$result: map-merge($result, ( $key: $child )); |
||||
|
}@else { |
||||
|
$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) )); |
||||
|
} |
||||
|
} |
||||
|
@return $result; |
||||
|
}; |
||||
@ -0,0 +1,31 @@ |
|||||
|
// 间距基础倍数 |
||||
|
$uni-space-root: 2; |
||||
|
// 边框半径默认值 |
||||
|
$uni-radius-root:5px; |
||||
|
// 主色 |
||||
|
$uni-primary: #2979ff; |
||||
|
// 辅助色 |
||||
|
$uni-success: #4cd964; |
||||
|
// 警告色 |
||||
|
$uni-warning: #f0ad4e; |
||||
|
// 错误色 |
||||
|
$uni-error: #dd524d; |
||||
|
// 描述色 |
||||
|
$uni-info: #909399; |
||||
|
// 中性色 |
||||
|
$uni-main-color: #303133; |
||||
|
$uni-base-color: #606266; |
||||
|
$uni-secondary-color: #909399; |
||||
|
$uni-extra-color: #C0C4CC; |
||||
|
// 背景色 |
||||
|
$uni-bg-color: #f5f5f5; |
||||
|
// 边框颜色 |
||||
|
$uni-border-1: #DCDFE6; |
||||
|
$uni-border-2: #E4E7ED; |
||||
|
$uni-border-3: #EBEEF5; |
||||
|
$uni-border-4: #F2F6FC; |
||||
|
|
||||
|
// 常规色 |
||||
|
$uni-black: #000000; |
||||
|
$uni-white: #ffffff; |
||||
|
$uni-transparent: rgba($color: #000000, $alpha: 0); |
||||
@ -0,0 +1,62 @@ |
|||||
|
@import './styles/setting/_variables.scss'; |
||||
|
// 间距基础倍数 |
||||
|
$uni-space-root: 2; |
||||
|
// 边框半径默认值 |
||||
|
$uni-radius-root:5px; |
||||
|
|
||||
|
// 主色 |
||||
|
$uni-primary: #2979ff; |
||||
|
$uni-primary-disable:mix(#fff,$uni-primary,50%); |
||||
|
$uni-primary-light: mix(#fff,$uni-primary,80%); |
||||
|
|
||||
|
// 辅助色 |
||||
|
// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。 |
||||
|
$uni-success: #18bc37; |
||||
|
$uni-success-disable:mix(#fff,$uni-success,50%); |
||||
|
$uni-success-light: mix(#fff,$uni-success,80%); |
||||
|
|
||||
|
$uni-warning: #f3a73f; |
||||
|
$uni-warning-disable:mix(#fff,$uni-warning,50%); |
||||
|
$uni-warning-light: mix(#fff,$uni-warning,80%); |
||||
|
|
||||
|
$uni-error: #e43d33; |
||||
|
$uni-error-disable:mix(#fff,$uni-error,50%); |
||||
|
$uni-error-light: mix(#fff,$uni-error,80%); |
||||
|
|
||||
|
$uni-info: #8f939c; |
||||
|
$uni-info-disable:mix(#fff,$uni-info,50%); |
||||
|
$uni-info-light: mix(#fff,$uni-info,80%); |
||||
|
|
||||
|
// 中性色 |
||||
|
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。 |
||||
|
$uni-main-color: #3a3a3a; // 主要文字 |
||||
|
$uni-base-color: #6a6a6a; // 常规文字 |
||||
|
$uni-secondary-color: #909399; // 次要文字 |
||||
|
$uni-extra-color: #c7c7c7; // 辅助说明 |
||||
|
|
||||
|
// 边框颜色 |
||||
|
$uni-border-1: #F0F0F0; |
||||
|
$uni-border-2: #EDEDED; |
||||
|
$uni-border-3: #DCDCDC; |
||||
|
$uni-border-4: #B9B9B9; |
||||
|
|
||||
|
// 常规色 |
||||
|
$uni-black: #000000; |
||||
|
$uni-white: #ffffff; |
||||
|
$uni-transparent: rgba($color: #000000, $alpha: 0); |
||||
|
|
||||
|
// 背景色 |
||||
|
$uni-bg-color: #f7f7f7; |
||||
|
|
||||
|
/* 水平间距 */ |
||||
|
$uni-spacing-sm: 8px; |
||||
|
$uni-spacing-base: 15px; |
||||
|
$uni-spacing-lg: 30px; |
||||
|
|
||||
|
// 阴影 |
||||
|
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5); |
||||
|
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2); |
||||
|
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5); |
||||
|
|
||||
|
// 蒙版 |
||||
|
$uni-mask: rgba($color: #000000, $alpha: 0.4); |
||||
Loading…
Reference in new issue