qniao
/
paper-shopkeeper-app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'devlop' of http://git.qniao.cn/dengxiongfei/paper-shopkeeper-app into devlop

devlop
邓雄飞 4 years ago
parent
dd1b98ce96 e39602078a
commit
5b4ec1b570
43 changed files with 5433 additions and 2948 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 29
      apis/trade.js
  2. 35
      pages.json
  3. 121
      pages/add-paper/index.vue
  4. 2
      pages/client-detail/basic-information.vue
  5. 528
      pages/mall/index.vue
  6. 464
      pages/my-offer/index.vue
  7. 577
      pages/quotation-details/index.vue
  8. 1386
      pages/submit-quotation/index.vue
  9. 85
      pages/switching-mall/index.vue
  10. 2
      pages/trade/index.vue
  11. 471
      pages/trade/orderList.vue
  12. 570
      pages/trade/quotationList.vue
  13. BIN
      static/imgs/trade/camera.png
  14. 39
      uni_modules/uni-data-checkbox/changelog.md
  15. 817
      uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue
  16. 87
      uni_modules/uni-data-checkbox/package.json
  17. 18
      uni_modules/uni-data-checkbox/readme.md
  18. 17
      uni_modules/uni-fab/changelog.md
  19. 475
      uni_modules/uni-fab/components/uni-fab/uni-fab.vue
  20. 87
      uni_modules/uni-fab/package.json
  21. 9
      uni_modules/uni-fab/readme.md
  22. 128
      uni_modules/uni-icons/components/uni-icons/uni-icons.vue
  23. 20
      uni_modules/uni-load-more/changelog.md
  24. 2
      uni_modules/uni-load-more/components/uni-load-more/i18n/en.json
  25. 14
      uni_modules/uni-load-more/components/uni-load-more/i18n/index.js
  26. 2
      uni_modules/uni-load-more/components/uni-load-more/i18n/zh-Hans.json
  27. 2
      uni_modules/uni-load-more/components/uni-load-more/i18n/zh-Hant.json
  28. 788
      uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue
  29. 170
      uni_modules/uni-load-more/package.json
  30. 8
      uni_modules/uni-scss/changelog.md
  31. 2
      uni_modules/uni-scss/index.scss
  32. 164
      uni_modules/uni-scss/package.json
  33. 14
      uni_modules/uni-scss/styles/index.scss
  34. 4
      uni_modules/uni-scss/styles/setting/_border.scss
  35. 132
      uni_modules/uni-scss/styles/setting/_color.scss
  36. 110
      uni_modules/uni-scss/styles/setting/_radius.scss
  37. 110
      uni_modules/uni-scss/styles/setting/_space.scss
  38. 334
      uni_modules/uni-scss/styles/setting/_styles.scss
  39. 48
      uni_modules/uni-scss/styles/setting/_text.scss
  40. 286
      uni_modules/uni-scss/styles/setting/_variables.scss
  41. 38
      uni_modules/uni-scss/styles/tools/functions.scss
  42. 62
      uni_modules/uni-scss/theme.scss
  43. 124
      uni_modules/uni-scss/variables.scss

29
apis/trade.js
View File

@ -19,5 +19,34 @@ export function gettradingHallList(data) {
}, },
{ hideLoading: true } { hideLoading: true }
) )
}
// 我的报价
export function getMyreplyList(data) {
return http.get(
{
url: '/base-paper-trading/get/my-reply-list',
data
},
{ hideLoading: true }
)
}
// 提交报价
export function updataEnquiryReply(data) {
return http.post({
url: '/base-paper-trading/update/enquiry-reply',
data
})
}
// 获取报价详情
export function enquiryReplyDetail(data) {
return http.get(
{
url: '/base-paper-trading/get/enquiry-reply-detail/'+data,
},
{ hideLoading: true }
)
} }

35
pages.json
View File

@ -130,7 +130,8 @@
{ {
"path": "pages/my-offer/index", "path": "pages/my-offer/index",
"style": { "style": {
"navigationBarTitleText": "我的报价",
"navigationBarTitleText": "我的报价",
"navigationStyle": "custom",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
}, },
@ -142,7 +143,37 @@
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
} }
],
,{
"path" : "pages/quotation-details/index",
"style" :
{
"navigationBarTitleText": "报价详情",
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/switching-mall/index",
"style" :
{
"navigationBarTitleText": "切换商城",
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/add-paper/index",
"style" :
{
"navigationBarTitleText": "添加纸品",
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
}
],
"globalStyle": { "globalStyle": {
"navigationBarTextStyle": "black", "navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app", "navigationBarTitleText": "uni-app",

121
pages/add-paper/index.vue
View File

@ -0,0 +1,121 @@
<template>
<view class="add-paper">
<view>
<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="">
<view class="add-paper-title">{{title}}</view>
<view slot="left"></view>
<view slot="right"></view>
</uni-nav-bar>
</view>
<view class="">
<view class="add-paper-list">
<view >
<text class="add-paper-start">*</text>
<text class="add-paper-text">纸品名称</text>
</view>
<view class="add-paper-input">
<uni-easyinput :placeholderStyle='placeholderStyle' :inputBorder="false" v-model="value" placeholder="请输入纸品名称"></uni-easyinput>
</view>
</view>
<view class="add-paper-border"></view>
<view class="add-paper-list">
<view >
<text class="add-paper-start">*</text>
<text class="add-paper-text">纸厂信息</text>
</view>
<view class="add-paper-input">
<uni-easyinput :placeholderStyle='placeholderStyle' :inputBorder="false" v-model="value" placeholder="请输入纸厂信息"></uni-easyinput>
</view>
</view>
<view class="add-paper-border"></view>
<view class="add-paper-list">
<view >
<text class="add-paper-start">*</text>
<text class="add-paper-text">品牌信息</text>
</view>
<view class="add-paper-input">
<uni-easyinput :placeholderStyle='placeholderStyle' :inputBorder="false" v-model="value" placeholder="请输入纸品品牌名称"></uni-easyinput>
</view>
</view>
<view class="add-paper-border"></view>
<view class="add-paper-list">
<view >
<text class="add-paper-start">*</text>
<text class="add-paper-text">纸种信息</text>
</view>
<view class="add-paper-input">
<uni-easyinput :placeholderStyle='placeholderStyle' :inputBorder="false" v-model="value" placeholder="请输入纸品名称"></uni-easyinput>
</view>
</view>
<view class="add-paper-border"></view>
<view class="add-paper-list">
<view >
<text class="add-paper-start">*</text>
<text class="add-paper-text">是否主营</text>
</view>
<view>
<uni-data-checkbox v-model="radio" :localdata="range" @change="change"></uni-data-checkbox>
</view>
</view>
</view>
</view>
</template>s
<script>
import { back, go2 } from '@/utils/hook.js'
export default {
data() {
return {
title:'添加纸品',
value:'',
radio:0,
range: [{"value": 0,"text": "是" },{"value": 1,"text": "否"}],
placeholderStyle:'text-align: right;'
}
},
methods: {
back,
}
}
</script>
<style lang="scss">
.add-paper{
.add-paper-title {
width: 100%;
font-size: 36rpx;
color: #000000;
letter-spacing: 0;
text-align: center;
font-weight: 500;
}
.add-paper-list{
height: 88rpx;
background: #FFFFFF;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 32rpx;
padding-right: 32rpx;
}
.add-paper-text{
font-size: 28rpx;
color: #000000;
letter-spacing: 0;
font-weight: 400;
}
.add-paper-start{
font-size: 28rpx;
color: #F5222D;
letter-spacing: 0;
font-weight: 400;
}
.add-paper-input{
width: 40%;
}
.add-paper-border{
border-bottom: 2rpx solid #D8D8D8;
margin-left: 16px;
}
}
</style>

2
pages/client-detail/basic-information.vue
View File

@ -292,7 +292,7 @@ export default {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
height: 88rpx; height: 88rpx;
line-height: 88rpx;
line-height: 88rpx;
border-bottom: 2rpx solid #dddddd; border-bottom: 2rpx solid #dddddd;
padding: 0rpx 32rpx; padding: 0rpx 32rpx;

528
pages/mall/index.vue
View File

@ -1,254 +1,276 @@
<template>
<view class="warpper">
<uni-nav-bar>
<view slot="left" class="left-title">纸商城</view>
<view slot="right" class="right-title">分享</view>
</uni-nav-bar>
<scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #FFFFFF;">
<view class="top-box">
<view class="">
<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image>
</view>
<view class="center">
<view class="title">
东莞市隆兴纸业有限公司
</view>
<view class="desc">
全部商品 39 &nbsp; | &nbsp;上新 9
</view>
</view>
<view class="right">
<view class="cut">
切换商城
<image class="cut-icon" src="/static/imgs/mall/cut-icon.png" mode=""></image>
</view>
<view class="set">
设置
</view>
</view>
</view>
<uGap></uGap>
<view v-for="(item,index) in 6" :key="index">
<view class="content">
<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image>
<view class="">
<view class="title">
<view class="">
金蝶蓝白卡
</view>
<view class="">
<image class="icon" :src="1 === 1 ? '/static/imgs/mall/grounding-icon.png' : '/static/imgs/mall/sold-out-icon.png'" mode=""></image>
</view>
</view>
<view class="sub-title">
金桂/白卡纸/金蝶蓝
</view>
<view class="desc">
克重(价格)：200(3900) 235(3900) 255(390
0)255(390
</view>
</view>
</view>
<view class="other">
<view class="time">
5分钟前
</view>
<view class="btn">
<view class="">
编辑
</view>
<view class="divide"></view>
<view class="">
下架
</view>
</view>
</view>
<uGap></uGap>
</view>
</scroll-list>
</view>
</template>
<script>
import uGap from '@/components/u-gap/u-gap.vue'
export default {
components: { uGap },
data() {
return {
option: {
size: 10,
auto: true,
emptyText: '暂无数据~',
background: '#F7F8FA',
disabled: false
}
}
},
methods: {
downCallback() {},
upCallback() {}
}
}
</script>
<style lang="scss">
.warpper {
width: 750rpx;
.left-title {
font-size: 40rpx;
color: #000000;
letter-spacing: 0;
font-weight: 500;
}
.right-title {
font-size: 28rpx;
color: #007aff;
text-align: right;
font-weight: 500;
}
.top-box {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
height: 180rpx;
background: url('/static/imgs/mall/zsc-bg-icon.png') no-repeat;
background-size: 100%;
.image {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
}
.right {
width: 140rpx;
}
.center {
position: relative;
left: -20rpx;
}
.title {
font-size: 34rpx;
color: #FFFFFF;
letter-spacing: 2rpx;
font-weight: 600;
margin-bottom: 12rpx;
}
.desc {
opacity: 0.75;
font-size: 28rpx;
color: #FFFFFF;
letter-spacing: 0;
font-weight: 500;
padding-right: 32rpx;
}
.cut {
display: flex;
align-items: center;
font-size: 24rpx;
color: #FFFFFF;
letter-spacing: 0;
text-align: center;
font-weight: 400;
.cut-icon {
width: 29.42rpx;
height: 26.67rpx;
margin-left: 10rpx;
}
}
.set {
opacity: 0.75;
font-size: 28rpx;
color: #FFFFFF;
letter-spacing: 0;
font-weight: 500;
position: relative;
top: 39rpx;
left: 60rpx;
}
}
.content {
background: #FFFFFF;
border-bottom: 2rpx solid #DDDDDD;
display: flex;
flex-direction: row;
padding: 24rpx 0rpx 24rpx 32rpx;
.image {
width: 100rpx;
height: 100rpx;
flex: 0 0 100rpx;
margin-right: 18rpx;
}
.title {
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 32rpx;
color: #333333;
letter-spacing: 0;
font-weight: 500;
.icon {
position: relative;
top: -22rpx;
width: 150rpx;
height: 50rpx;
}
}
.sub-title {
position: relative;
font-size: 28rpx;
color: #333333;
letter-spacing: 0;
font-weight: 400;
top: -4rpx;
}
.desc {
font-size: 28rpx;
color: #555555;
letter-spacing: 0;
font-weight: 400;
padding-top: 10rpx;
line-height: 1.4;
}
}
.other {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 80rpx;
background: #FFFFFF;
padding: 0rpx 32rpx;
.time {
font-size: 28rpx;
color: #888888;
letter-spacing: 0;
font-weight: 400;
}
.btn {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-size: 28rpx;
color: #007AFF;
letter-spacing: 0;
text-align: right;
font-weight: 400;
}
.divide {
width: 2rpx;
height: 32rpx;
background: #d8d8d8;
margin: 0 32rpx;
}
.icon {
width: 24rpx;
height: 24rpx;
margin-left: 6rpx;
}
}
}
<template>
<view class="warpper">
<uni-nav-bar>
<view slot="left" class="left-title">纸商城</view>
<view slot="right" class="right-title">分享</view>
</uni-nav-bar>
<scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #FFFFFF;">
<view class="top-box">
<view class=""><image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image></view>
<view class="center">
<view class="title">东莞市隆兴纸业有限公司</view>
<view class="desc">全部商品 39 &nbsp; | &nbsp;上新 9</view>
</view>
<view class="right">
<view class="cut" @click="checkMall()">
切换商城
<image class="cut-icon" src="/static/imgs/mall/cut-icon.png" mode=""></image>
</view>
<view class="set">设置</view>
</view>
</view>
<uGap></uGap>
<view v-for="(item, index) in 6" :key="index">
<view class="content">
<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image>
<view class="">
<view class="title">
<view class="">金蝶蓝白卡</view>
<view class="">
<image class="icon" :src="1 === 1 ? '/static/imgs/mall/grounding-icon.png' : '/static/imgs/mall/sold-out-icon.png'" mode=""></image>
</view>
</view>
<view class="sub-title">金桂/白卡纸/金蝶蓝</view>
<view class="desc">克重(价格)：200(3900) 235(3900) 255(390 0)255(390</view>
</view>
</view>
<view class="other">
<view class="time">5分钟前</view>
<view class="btn">
<view class="">编辑</view>
<view class="divide"></view>
<view class="">下架</view>
</view>
</view>
<uGap></uGap>
</view>
</scroll-list>
<view>
<view class="offer-prices" @click="nativeTo()">
<image class="my-image" src="../../static/imgs/trade/camera.png" mode=""></image>
</view>
</view>
</view>
</template>
<script>
import uGap from '@/components/u-gap/u-gap.vue'
import { back, go2 } from '@/utils/hook.js'
export default {
components: { uGap },
data() {
return {
option: {
size: 10,
auto: true,
emptyText: '暂无数据~',
background: '#F7F8FA',
disabled: false
},
pattern: {
backgroundColor: '#007AFF',
buttonColor: '#007AFF'
},
content: [],
horizontal: 'right',
vertical: 'bottom',
direction: 'vertical'
}
},
methods: {
back,
downCallback() {},
upCallback() {},
// 切换商城按钮
checkMall() {
go2('switching-mall')
},
// 按钮点击事件
nativeTo() {
go2('add-paper')
}
}
}
</script>
<style lang="scss">
.warpper {
width: 750rpx;
.left-title {
font-size: 40rpx;
color: #000000;
letter-spacing: 0;
font-weight: 500;
}
.right-title {
font-size: 28rpx;
color: #007aff;
text-align: right;
font-weight: 500;
}
.top-box {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
height: 180rpx;
background: url('/static/imgs/mall/zsc-bg-icon.png') no-repeat;
background-size: 100%;
.image {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
}
.right {
width: 140rpx;
}
.center {
position: relative;
left: -20rpx;
}
.title {
font-size: 34rpx;
color: #ffffff;
letter-spacing: 2rpx;
font-weight: 600;
margin-bottom: 12rpx;
}
.desc {
opacity: 0.75;
font-size: 28rpx;
color: #ffffff;
letter-spacing: 0;
font-weight: 500;
padding-right: 32rpx;
}
.cut {
display: flex;
align-items: center;
font-size: 24rpx;
color: #ffffff;
letter-spacing: 0;
text-align: center;
font-weight: 400;
.cut-icon {
width: 29.42rpx;
height: 26.67rpx;
margin-left: 10rpx;
}
}
.set {
opacity: 0.75;
font-size: 28rpx;
color: #ffffff;
letter-spacing: 0;
font-weight: 500;
position: relative;
top: 39rpx;
left: 60rpx;
}
}
.content {
background: #ffffff;
border-bottom: 2rpx solid #dddddd;
display: flex;
flex-direction: row;
padding: 24rpx 0rpx 24rpx 32rpx;
.image {
width: 100rpx;
height: 100rpx;
flex: 0 0 100rpx;
margin-right: 18rpx;
}
.title {
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 32rpx;
color: #333333;
letter-spacing: 0;
font-weight: 500;
.icon {
position: relative;
top: -22rpx;
width: 150rpx;
height: 50rpx;
}
}
.sub-title {
position: relative;
font-size: 28rpx;
color: #333333;
letter-spacing: 0;
font-weight: 400;
top: -4rpx;
}
.desc {
font-size: 28rpx;
color: #555555;
letter-spacing: 0;
font-weight: 400;
padding-top: 10rpx;
line-height: 1.4;
}
}
.other {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 80rpx;
background: #ffffff;
padding: 0rpx 32rpx;
.time {
font-size: 28rpx;
color: #888888;
letter-spacing: 0;
font-weight: 400;
}
.btn {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-size: 28rpx;
color: #007aff;
letter-spacing: 0;
text-align: right;
font-weight: 400;
}
.divide {
width: 2rpx;
height: 32rpx;
background: #d8d8d8;
margin: 0 32rpx;
}
.icon {
width: 24rpx;
height: 24rpx;
margin-left: 6rpx;
}
}
.offer-prices {
position: absolute;
z-index: 9999;
right: 32rpx;
bottom: 122rpx;
background-color: #007AFF;
border-radius: 50%;
padding: 10rpx;
text-align: center;
width: 110rpx;
height: 110rpx;
border: 2rpx solid #f9f9f9;
box-shadow: 0rpx 4rpx 34rpx 0rpx rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.my-image {
width: 100rpx;
height: 100rpx;
}
}
</style> </style>

464
pages/my-offer/index.vue
View File

@ -1,224 +1,242 @@
<template>
<view class="my-offer">
<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="我的报价"></uni-nav-bar>
<scroll-list style="touch-action: none" ref="orderRef" :option="orderOption" @load="orderUp" @refresh="orderDown">
<view v-for="(items,index) in orderData" :key="index">
<view class="list-border list-title-line">
<text class="list-title">广州民族印刷有限公司</text>
<text class="list-title-Subtitle">{{ items.orderStatus }}</text>
</view>
<view class="list-border list-info-line" v-for="(item, index) in items.orderItemList" :key="index">
<view class="list-info" :class="index===items.orderItemList.length?'list-border':''">
<view class="">
<!-- <image class="list-image" :src="item.productImg" mode=""></image> -->
<image class="list-image" src="../../static/logo.png" mode="">
</view>
<view class="list-info-contant">
<view class="list-info-title">{{ item.brandName }}{{ item.categoryName }}</view>
<view class="list-info-text">
{{ item.categoryName }}/{{ item.brandName }}/{{ item.gramWeight }}g/{{ item.length }}*{{ item.width }}/{{ item.pieceQuantity }}张
</view>
</view>
</view>
</view>
<view class="list-border list-bottom-contant">
<view>
<text class="list-time">三分钟前</text>
<text class="list-title-Subtitle">¥{{ items.totalOfferPrice }}</text>
</view>
</view>
<uGap></uGap>
</view>
</scroll-list>
</view>
</template>
<script>
import { back, go2 } from '@/utils/hook.js'
import uGap from '@/components/u-gap/u-gap.vue'
import scrollList from '@/components/scroll-list/scroll-list.vue'
import { getEnterpriseList, gettradingHallList } from '@/apis/trade'
export default {
// props: {
// queryOrderData: {
// type: Object,
// default: () => {}
// }
// },
components: {
uGap
},
data() {
return {
orderPagination: {
pageNum: 0, // 初始会执行一次下拉加载
pageSize: 10
},
orderData: [],
controlCurrent:0,
controlItems: ['全部', '待确认', '待发货', '已完成'],
orderOption: {
size: 10,
auto: true,
emptyText: '暂无报价信息~',
background: '#F7F8FA',
fontSize: '40rpx'
},
orderParams: {
cooperationState: 0,
latitude: 23.12616,
longitude: 113.38466,
km: 5
}
}
},
watch: {
// queryOrderData(value) {
// console.log('value', value)
// },
orderParams: {
handler(val) {
this.getTradingQurty()
},
deep: true
}
},
onLoad(option) {
if (option) {
option.latitude && (this.params.latitude = option.latitude)
option.longitude && (this.params.longitude = option.longitude)
option.km && (this.params.km = option.km)
}
this.getTradingQurty()
},
methods: {
back,
// 获取订单列表
getTradingQurty() {
return new Promise((resolve, reject) => {
gettradingHallList({ ...this.orderParams, ...this.orderPagination })
.then(res => {
if (res) {
if (this.orderPagination.pageNum == 1) {
this.orderData = res.records
} else {
this.orderData = this.orderData.concat(res.records)
}
resolve({ list: this.orderData, total: res.total })
}
})
.catch(err => {
reject(err)
})
})
},
//订单分页
orderUp(page) {
this.orderPagination.pageNum++
this.getTradingQurty()
.then(({ list, total }) => {
this.$refs.orderRef.loadSuccess({ list, total })
})
.catch(() => {
this.$refs.orderRef.loadFail()
})
},
//订单分页
orderDown() {
this.orderPagination.pageNum = 1
this.getTradingQurty()
.then(({ list, total }) => {
this.$refs.orderRef.refreshSuccess({ list, total })
})
.catch(() => {
this.$refs.orderRef.refreshFail()
})
},
//分段器点击事件
onClickItem(value) {
console.log(value)
}
}
}
</script>
<style lang="scss">
.my-offer {
margin-bottom: 0rpx;
.list-border {
// border-top: 1px solid #dddddd;
border-bottom: 2rpx solid #dddddd;
}
.list-title-line {
line-height: 88rpx;
padding-left: 48rpx;
background: #FFFFFF;
}
.list-title {
font-family: PingFangSC-Semibold;
font-size: 30rpx;
color: #000000;
letter-spacing: 0;
font-weight: 600;
}
.list-title-Subtitle {
font-family: PingFangSC-Medium;
font-size: 30rpx;
color: #ff5368;
letter-spacing: 0;
text-align: right;
font-weight: 500;
float: right;
margin-right: 32rpx;
}
.list-info-line {
padding-left: 48rpx;
line-height: 70rpx;
background: #FFFFFF;
}
.list-info-contant {
margin-left: 48rpx;
}
.list-info-title {
font-family: PingFangSC-Medium;
font-size: 30rpx;
color: #333333;
letter-spacing: 0;
text-align: left;
font-weight: 550;
}
.list-info-text {
font-family: PingFangSC-Regular;
font-size: 26rpx;
color: #888888;
letter-spacing: 0;
text-align: left;
line-height: 64rpx;
font-weight: 400;
}
.list-image {
width: 100rpx;
height: 100rpx;
margin-top: 20rpx;
}
.list-info {
display: flex;
}
.list-bottom-contant {
line-height: 70rpx;
padding-left: 48rpx;
width: 750rpx;
height: 80rpx;
background: #FFFFFF;
}
.list-time{
font-family: PingFangSC-Regular;
font-size: 26rpx;
color: #888888;
letter-spacing: 0;
line-height: 64rpx;
font-weight: 400;
}
}
<template>
<view class="my-offer">
<view>
<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="">
<view class="my-offer-title">我的报价</view>
<view slot="left"></view>
<view slot="right"></view>
</uni-nav-bar>
</view>
<scroll-list style="touch-action: none" ref="orderRef" :option="orderOption" @load="orderUp" @refresh="orderDown">
<view v-for="(items, index) in orderData" :key="index" @click="myPriceInfo(items)">
<view class="list-border list-title-line">
<text class="list-title">广州民族印刷有限公司</text>
<text class="list-title-Subtitle">{{ controlItems[items.orderStatus - 1] }}</text>
</view>
<view class="list-border list-info-line" v-for="(item, index) in items.orderItemList" :key="index">
<view class="list-info" :class="index === items.orderItemList.length ? 'list-border' : ''">
<view class=""><image class="list-image" src="../../static/logo.png"></image></view>
<view class="list-info-contant">
<view class="list-info-title">{{ item.brandName }}{{ item.categoryName }}</view>
<view class="list-info-text">
<text>{{ item.categoryName }}/{{ item.brandName }}/</text>
<text>{{ item.gramWeight }}g/{{ item.length }}*{{ item.width }}/{{ item.pieceQuantity }}张</text>
</view>
</view>
</view>
</view>
<view class="list-border list-bottom-contant">
<view><text class="list-time">三分钟前</text></view>
<view class="">
<text class="list-title-Subtitle">¥{{ items.totalOfferPrice }}</text>
</view>
</view>
<uGap></uGap>
</view>
</scroll-list>
</view>
</template>
<script>
import { back, go2 } from '@/utils/hook.js'
import uGap from '@/components/u-gap/u-gap.vue'
import scrollList from '@/components/scroll-list/scroll-list.vue'
import { getMyreplyList } from '@/apis/trade.js'
export default {
// props: {
// queryOrderData: {
// type: Object,
// default: () => {}
// }
// },
components: {
uGap
},
data() {
return {
orderPagination: {
pageNum: 0, // 初始会执行一次下拉加载
pageSize: 10
},
orderData: [
{"id":"638458876659896320","totalOfferPrice":10,"orderItemList":[{"id":"123456","productName":"交易大厅-订单商品","pieceQuantity":0,"productImg":null,"gramWeight":"300","width":"1024","length":"789","brandName":"丽盈","categoryName":"白卡纸"}],"deliveryDay":null,"orderStatus":3}
],
controlCurrent: 0,
controlItems: ['待付款', '待发货', '待收货', '已完成', '已关闭'],
orderOption: {
size: 10,
auto: true,
emptyText: '暂无报价信息~',
background: '#F7F8FA',
fontSize: '40rpx'
},
orderParams: {
cooperationState: 0,
latitude: 23.12616,
longitude: 113.38466,
km: 5
}
}
},
filters: {},
watch: {
orderParams: {
handler(val) {
this.getMyreplyListQuery()
},
deep: true
}
},
onLoad(option) {
if (option) {
option.latitude && (this.params.latitude = option.latitude)
option.longitude && (this.params.longitude = option.longitude)
option.km && (this.params.km = option.km)
}
this.getMyreplyListQuery()
},
methods: {
back,
// 获取我的报价
getMyreplyListQuery() {
return new Promise((resolve, reject) => {
getMyreplyList({ ...this.orderParams, ...this.orderPagination })
.then(res => {
if (res) {
if (this.orderPagination.pageNum == 1) {
this.orderData = res.records
} else {
this.orderData = this.orderData.concat(res.records)
}
resolve({ list: this.orderData, total: res.total })
}
})
.catch(err => {
reject(err)
})
})
},
//订单分页
orderUp(page) {
this.orderPagination.pageNum++
this.getMyreplyListQuery()
.then(({ list, total }) => {
this.$refs.orderRef.loadSuccess({ list, total })
})
.catch(() => {
this.$refs.orderRef.loadFail()
})
},
//订单分页
orderDown() {
this.orderPagination.pageNum = 1
this.getMyreplyListQuery()
.then(({ list, total }) => {
this.$refs.orderRef.refreshSuccess({ list, total })
})
.catch(() => {
this.$refs.orderRef.refreshFail()
})
},
//跳转我的报价详情
myPriceInfo(item) {
console.log(item)
uni.navigateTo({
url: '/pages/quotation-details/index'
})
}
}
}
</script>
<style lang="scss">
.my-offer {
margin-bottom: 0rpx;
.list-border {
// border-top: 1px solid #dddddd;
border-bottom: 2rpx solid #dddddd;
}
.list-title-line {
line-height: 88rpx;
padding-left: 48rpx;
background: #ffffff;
}
.my-offer-title {
width: 100%;
font-family: PingFangSC-Medium;
font-size: 36rpx;
color: #000000;
letter-spacing: 0;
text-align: center;
font-weight: 500;
}
.list-title {
font-family: PingFangSC-Semibold;
font-size: 30rpx;
color: #000000;
letter-spacing: 0;
font-weight: 600;
}
.list-title-Subtitle {
font-family: PingFangSC-Medium;
font-size: 30rpx;
color: #ff5368;
letter-spacing: 0;
text-align: right;
font-weight: 500;
float: right;
margin-right: 32rpx;
}
.list-info-line {
padding-left: 48rpx;
line-height: 70rpx;
background: #ffffff;
}
.list-info-contant {
margin-left: 48rpx;
}
.list-info-title {
font-family: PingFangSC-Medium;
font-size: 30rpx;
color: #333333;
letter-spacing: 0;
text-align: left;
font-weight: 550;
}
.list-info-text {
font-family: PingFangSC-Regular;
font-size: 26rpx;
color: #888888;
letter-spacing: 0;
text-align: left;
line-height: 64rpx;
font-weight: 400;
}
.list-image {
width: 100rpx;
height: 100rpx;
margin-top: 20rpx;
}
.list-info {
display: flex;
}
.list-bottom-contant {
align-items: center;
padding-left: 48rpx;
height: 80rpx;
background: #ffffff;
display: flex;
justify-content: space-between;
}
.list-time {
font-family: PingFangSC-Regular;
font-size: 26rpx;
color: #888888;
letter-spacing: 0;
line-height: 64rpx;
font-weight: 400;
}
}
</style> </style>

577
pages/quotation-details/index.vue
View File

@ -0,0 +1,577 @@
<template>
<view class="quotation-details">
<view>
<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="">
<view class="submit-title">报价详情</view>
<view slot="left"></view>
<view slot="right" class="edit-price" @click="editPrice()">修改报价</view>
</uni-nav-bar>
</view>
<view class="submit-main">
<view>
<text class="submit-main-title">交货要求</text>
<text class="price-tips">已报价</text>
</view>
<view>
<text class="submit-main-subTitle">询价客户：</text>
<text class="submit-main-subContant">{{ upDataObj.belongEnterpriseName }}</text>
</view>
<view>
<text class="submit-main-subTitle">交货区域：</text>
<text class="submit-main-subContant">{{ upDataObj.deliveryArea }}</text>
</view>
<view>
<text class="submit-main-subTitle">交货时间：</text>
<text class="submit-main-subContant">{{ upDataObj.deliveryDay }}</text>
</view>
</view>
<uGap></uGap>
<view class="submit-contant" v-for="(items, index) in upDataObj.itemList" :key="index">
<view class="submit-contant-head">
<view class="submit-contant-title">{{ items.brandName }}|{{ items.gramWeight }}|{{ items.length }}*{{ items.width }}|{{ items.quantity }}</view>
</view>
<view class="submit-contant-body">
<view class="">
<text class="submit-contant-body-title">重量(吨)：</text>
<text class="submit-contant-body-subtitle">1.6544</text>
</view>
<view>
<text class="submit-contant-body-title">单价(元/吨)：</text>
<text class="submit-contant-body-subtitle">{{ items.unitFee }}</text>
</view>
<view>
<text class="submit-contant-body-title">小计(元)：</text>
<text class="submit-contant-body-subtitle">{{ items.totalPrice }}</text>
</view>
<view class="submit-contant-body-input">
<uni-easyinput :disabled="true" maxlength="100" class="submit-contant-body-inputClass" v-model="value" placeholder="请输入内容"></uni-easyinput>
</view>
</view>
</view>
<view class="submit-contant-order">
<view class="">
<text class="submit-contant-order-title">其他费用：</text>
<text class="submit-contant-order-subtitle">¥ 80.00</text>
</view>
<view class="">
<text class="submit-contant-order-title">合计：</text>
<text class="submit-contant-order-money">¥ 13800.32</text>
</view>
</view>
<uGap></uGap>
<view class="submit-contant-time">
<view class="">
<text class="submit-contant-time-title">有效时间：</text>
<text class="submit-contant-time-title">24小时</text>
</view>
</view>
<uGap></uGap>
<view class="submit-contant-remark">
<view class="submit-contant-remark-title">
<text>报价备注:</text>
<text>29号5点前能送达。</text>
</view>
</view>
<view class="tips"><text>注：禁止偷克重、抵纸换纸，否则将被平台严厉处罚！包括但不限于账号禁用。</text></view>
</view>
</template>
<script>
import { back, go2 } from '@/utils/hook.js'
import qnHeader from '@/components/qn-header/qn-header.vue'
import uGap from '@/components/u-gap/u-gap.vue'
import { enquiryReplyDetail } from '@/apis/trade.js'
export default {
components: {
qnHeader,
uGap
},
data() {
return {
value: '',
visible: true,
title: 'picker-view',
upDataObj:{
belongEnterpriseName:'东莞市隆兴纸业有限公司',
deliveryArea:'广东省/广州市/天河区',
deliveryDay:'2021/12/29 12:30',
enquiryValidTime:[12,11,10],
itemList:[
{
brandName:'丽品白卡',
categoryName:"",
gramWeight:'200g',
length:'787',
quantity:'5000张',
width:'1092',
unitFee:'1000',
totalPrice:'1202'
},
{
brandName:'丽品白卡',
categoryName:"",
gramWeight:'200g',
length:'787',
quantity:'5000张',
width:'1092',
unitFee:'1000',
totalPrice:'1202'
}
]
},
}
},
methods: {
back,
// 获取详情
getDetail(id){
this.enquiryReplyDetail(id)
.then(({ list, total }) => {
this.$refs.orderRef.loadSuccess({ list, total })
})
.catch(() => {
this.$refs.orderRef.loadFail()
})
},
// 商品操作按钮
commodityModify(item) {
console.log(111)
this.$refs.popup.open('bottom')
},
// 单价操作按钮
priceModify() {
this.$refs.popupPrice.open('bottom')
},
// 事件设置
resetTime() {
this.$refs.popupTime.open('bottom')
},
// 事件选择change事件
bindChange(e) {
console.log(e.detail.value)
},
close() {
this.$refs.popup.close()
this.$refs.popupPrice.close()
},
// 纸张选择下拉change事件
onchange(e) {
console.log(e)
this.pickerValue = e.detail.value
},
// 时间设置取消
pickerCancel() {
this.$refs.popupTime.close()
},
// 时间设置确认
pickerSure() {
this.$refs.popupTime.close()
},
// 修改报价按钮
editPrice(){
var params= {
title:"修改报价"
}
go2('submit-quotation', params)
},
}
}
</script>
<style lang="scss">
.picker-view {
width: 750rpx;
height: 600rpx;
margin-top: 20rpx;
}
.item {
height: 50rpx;
align-items: center;
justify-content: center;
text-align: center;
padding-top: 30rpx;
}
.quotation-details {
.submit-title {
width: 100%;
font-family: PingFangSC-Medium;
font-size: 36rpx;
color: #000000;
letter-spacing: 0;
text-align: center;
font-weight: 500;
}
.submit-main {
width: 750rpx;
height: 260rpx;
padding: 24rpx 0rpx 0rpx 32rpx;
line-height: 52rpx;
background: #ffffff;
.submit-main-title {
font-family: PingFangSC-Medium;
font-size: 30rpx;
color: #000000;
letter-spacing: 0;
font-weight: 500;
}
.submit-main-subTitle {
font-family: PingFangSC-Regular;
font-size: 28rpx;
color: #888888;
letter-spacing: 0;
font-weight: 400;
}
.submit-main-subContant {
font-family: PingFangSC-Regular;
font-size: 28rpx;
color: #333333;
letter-spacing: 0;
font-weight: 400;
}
}
.submit-deadline {
width: 750rpx;
height: 75rpx;
background: #f4f9fc;
box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(100, 101, 102, 0.12);
display: flex;
justify-content: center;
.submit-text {
font-family: PingFangSC-Medium;
font-size: 28rpx;
color: rgba(0, 0, 0, 0.5);
letter-spacing: 0;
font-weight: 500;
margin-top: 22rpx;
width: 130rpx;
}
.submit-time {
width: 40rpx;
height: 40rpx;
background: #ee0a24;
border-radius: 8rpx;
margin-top: 20rpx;
text-align: center;
}
.submit-time-text {
font-family: PingFangSC-Semibold;
font-size: 24rpx;
color: #ffffff;
text-align: center;
line-height: 32rpx;
font-weight: 600;
}
.sbumit-colon {
width: 24rpx;
height: 32rpx;
font-family: PingFangSC-Regular;
font-size: 24rpx;
color: #ee0a24;
text-align: center;
line-height: 32rpx;
font-weight: 400;
margin-top: 20rpx;
}
}
.submit-contant {
background-color: #ffffff;
// height: 368rpx;
border-bottom: 2rpx solid #dddddd;
padding-bottom: 20rpx;
.submit-contant-head {
line-height: 90rpx;
width: 750rpx;
height: 90rpx;
border-bottom: 2rpx dashed #d8d8d8;
display: flex;
justify-content: space-between;
}
.submit-contant-title {
font-family: PingFangSC-Semibold;
font-size: 30rpx;
color: rgba(0, 0, 0, 0.75);
letter-spacing: 0;
text-align: left;
font-weight: 600;
padding: 0rpx 0rpx 0rpx 32rpx;
}
.submit-contant-body {
line-height: 68rpx;
padding-left: 32rpx;
.submit-contant-body-title {
font-family: PingFangSC-Regular;
font-size: 28rpx;
color: #555555;
letter-spacing: 0;
font-weight: 400;
}
.submit-contant-body-subtitle {
font-family: PingFangSC-Regular;
font-size: 28rpx;
color: #555555;
letter-spacing: 0;
font-weight: 400;
float: right;
margin-right: 32rpx;
}
.submit-contant-body-input {
margin-right: 32rpx;
}
.submit-contant-body-inputClass {
background-color: #f7f8fa;
}
}
}
.submit-contant-order {
width: 750rpx;
height: 90rpx;
line-height: 90rpx;
background: #ffffff;
display: flex;
padding-left: 32rpx;
padding-right: 32rpx;
justify-content: space-between;
.submit-contant-order-title {
width: 140rpx;
height: 40rpx;
font-family: PingFangSC-Regular;
font-size: 28rpx;
color: rgba(0, 0, 0, 0.5);
font-weight: 400;
}
.submit-contant-order-subtitle {
width: 101rpx;
height: 40rpx;
font-family: PingFangSC-Regular;
font-size: 28rpx;
color: rgba(0, 0, 0, 0.5);
letter-spacing: 0;
text-align: left;
font-weight: 400;
}
.submit-contant-order-money {
width: 172rpx;
height: 42rpx;
font-family: PingFangSC-Semibold;
font-size: 40rpx;
color: #f5222d;
letter-spacing: 0;
line-height: 42rpx;
font-weight: 600;
}
}
.submit-contant-time {
width: 750rpx;
height: 88rpx;
background: #ffffff;
line-height: 88rpx;
display: flex;
padding-left: 32rpx;
padding-right: 32rpx;
justify-content: space-between;
.submit-contant-time-title {
width: 230rpx;
height: 40rpx;
font-size: 28rpx;
color: #000000;
letter-spacing: 0;
font-weight: 400;
}
.submit-contant-time-subtitle {
width: 56rpx;
height: 40rpx;
font-size: 28rpx;
color: #007aff;
letter-spacing: 0;
text-align: right;
font-weight: 500;
cursor: pointer;
}
}
.submit-contant-remark {
width: 750rpx;
height: 88rpx;
background: #ffffff;
.submit-contant-remark-title {
font-family: PingFangSC-Regular;
font-size: 30rpx;
color: #000000;
letter-spacing: 0;
font-weight: 400;
padding: 28rpx 0rpx 0rpx 32rpx;
}
.submit-contant-remark-input {
background: #f7f8fa;
border-radius: 20rpx;
margin: 10rpx 32rpx 32rpx 32rpx;
width: 686rpx;
}
}
.submit-btnBg {
width: 750rpx;
height: 120rx;
background: #ffffff;
box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(100, 101, 102, 0.12);
padding: 12rpx 32rpx 12rpx 32rpx;
}
.submit-btn {
width: 686rpx;
height: 96rpx;
background: #007aff;
border-radius: 10rpx;
}
.submit-image {
width: 24.38rpx;
height: 20.38rpx;
margin-right: 32rpx;
cursor: pointer;
}
.submit-image-price {
width: 24.38rpx;
height: 20.38rpx;
margin-left: 14rpx;
cursor: pointer;
}
.submit-popup {
width: 750rpx;
height: 960rpx;
background: #ffffff;
border-top-right-radius: 2rpx;
border-top-left-radius: 2rpx;
padding: 20rpx 32rpx 0rpx 32rpx;
// line-height: 124rpx;
.submit-popup-input {
background-color: #f5f5f5;
}
.submit-popup-close {
display: flex;
justify-content: space-between;
}
.submit-popup-close-image {
width: 24.38rpx;
height: 20.38rpx;
cursor: pointer;
}
.submit-popup-title {
font-size: 30rpx;
color: rgba(0, 0, 0, 0.85);
letter-spacing: 0;
text-align: left;
font-weight: 400;
}
.submit-popup-specifications {
width: 320rpx;
}
.submit-popup-x {
font-size: 32rpx;
color: rgba(0, 0, 0, 0.85);
font-weight: 400;
}
.submit-line {
border-bottom: 2rpx solid #d8d8d8;
padding-bottom: 32rpx;
height: 194rpx;
line-height: 72rpx;
}
.submit-number-box {
margin-top: 24rpx;
}
.submit-number-text {
font-size: 24rpx;
color: rgba(0, 0, 0, 0.5);
font-weight: 400;
}
.submit-number-line {
line-height: 40rpx;
}
.submit-number-btn {
position: absolute;
bottom: 20rpx;
}
.submit-price {
line-height: 72rpx;
}
.submit-price-total {
display: flex;
justify-content: flex-end;
margin-top: 20rpx;
}
.submit-price-total-text {
font-size: 40rpx;
color: #f5222d;
letter-spacing: 0;
line-height: 42rpx;
font-weight: 600;
}
.submit-price-text {
font-size: 28rpx;
color: rgba(0, 0, 0, 0.85);
text-align: right;
font-weight: 400;
line-height: 40rpx;
}
.submit-price-subTitle {
margin-left: 20rpx;
}
}
.submit-check-time {
background-color: #ffffff;
padding: 28rpx 32rpx 0px 28rpx;
.submit-check-flex {
display: flex;
justify-content: space-between;
}
.submit-check-title {
font-size: 32rpx;
color: #323233;
text-align: center;
line-height: 44rpx;
font-weight: 500;
}
.submit-check-cancel {
font-size: 28rpx;
color: #969799;
line-height: 40rpx;
font-weight: 400;
cursor: pointer;
}
.submit-check-sure {
font-size: 28rpx;
color: #007aff;
line-height: 40rpx;
font-weight: 400;
cursor: pointer;
}
.submit-check-text {
font-size: 36rpx;
color: #323233;
line-height: 48rpx;
font-weight: 500;
}
}
.tips {
font-size: 24rpx;
color: #f5222d;
font-weight: 400;
padding: 32rpx;
line-height: 42rpx;
}
.edit-price{
font-size: 28rpx;
color: #007AFF;
text-align: right;
line-height: 40prx;
font-weight: 500;
}
.price-tips{
font-size: 30rpx;
color: #FF5368;
letter-spacing: 0;
text-align: right;
font-weight: 500;
float: right;
padding-right: 32rpx;
}
}
</style>

1386
pages/submit-quotation/index.vue
File diff suppressed because it is too large
View File

85
pages/switching-mall/index.vue
View File

@ -0,0 +1,85 @@
<template>
<view class="check-mall">
<view>
<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="">
<view class="check-mall-title">切换商城</view>
<view slot="left"></view>
<view slot="right"></view>
</uni-nav-bar>
</view>
<view class="" v-for="(item,index) in 5" :key="index" @click="checkCompany(item)">
<uni-list>
<uni-list-item>
<!-- 自定义 header -->
<view slot="header" class="slot-box"><image class="slot-image check-mall-image" src="/static/logo.png" mode="widthFix"></image></view>
<!-- 自定义 body -->
<view slot="body" class="slot-box check-mall-text">
<view class="check-mall-text-textTitle"><text>东莞市隆兴纸业有限公司</text></view>
<view class="check-mall-text-textSubTitle"><text>全部商品39</text></view>
</view>
<view v-if="index === 2" slot="footer" class="slot-box check-mall-sure"><icon type="success_no_circle" size="26" /></view>
</uni-list-item>
</uni-list>
</view>
</view>
</template>
<script>
import { back, go2 } from '@/utils/hook.js'
export default {
data() {
return {
companyData:[],
}
},
methods: {
back,
// 选择切换企业
checkCompany(){
go2('mall')
},
}
}
</script>
<style lang="scss">
.check-mall {
.check-mall-title {
width: 100%;
font-size: 36rpx;
color: #000000;
letter-spacing: 0;
text-align: center;
font-weight: 500;
}
.check-mall-image {
width: 100rpx;
height: 100rpx;
border-radius: 50rpx;
}
.check-mall-text {
line-height: 60rpx;
margin-left: 20rpx;
width: 75%;
}
.check-mall-textTitle {
font-size: 30rpx;
color: #333333;
letter-spacing: 0;
font-weight: 500;
}
.check-mall-text-textSubTitle {
font-size: 26rpx;
color: #888888;
letter-spacing: 0;
text-align: left;
line-height: 32rpx;
font-weight: 400;
}
.check-mall-sure {
padding-top: 20rpx;
}
}
</style>

2
pages/trade/index.vue
View File

@ -28,7 +28,7 @@ import notLogged from '@/components/not-logged/not-logged.vue'
import scrollList from '@/components/scroll-list/scroll-list.vue' import scrollList from '@/components/scroll-list/scroll-list.vue'
import quotationList from './quotationList.vue' import quotationList from './quotationList.vue'
import orderList from './orderList.vue' import orderList from './orderList.vue'
import { getEnterpriseList, gettradingHallList } from '@/apis/trade'
import { gettradingHallList } from '@/apis/trade'
export default { export default {
components: { notLogged, scrollList, quotationList, orderList }, components: { notLogged, scrollList, quotationList, orderList },
data() { data() {

471
pages/trade/orderList.vue
View File

@ -1,233 +1,238 @@
<template>
<view class="order-list">
<uni-segmented-control :current="controlCurrent" :values="controlItems" @clickItem="onClickItem" styleType="text" activeColor="#007AFF"></uni-segmented-control>
<scroll-list style="touch-action: none" ref="orderRef" :option="orderOption" @load="orderUp" @refresh="orderDown">
<view v-for="(items, index) in orderData" :key="index">
<view class="list-border list-title-line">
<text class="list-title">广州民族印刷有限公司</text>
<text class="list-title-Subtitle">{{ items.orderStatus }}</text>
</view>
<view class="list-border list-info-line" v-for="(item, index) in items.orderItemList" :key="index">
<view class="list-info " :class="index===items.orderItemList.length?'list-border':''">
<view class="">
<!-- <image class="list-image" :src="item.productImg" mode=""></image> -->
<image class="list-image" src="../../static/logo.png" mode="">
</view>
<view class="list-info-contant">
<view class="list-info-title">{{ item.brandName }}{{ item.categoryName }}</view>
<view class="list-info-text">
{{ item.categoryName }}/{{ item.brandName }}/{{ item.gramWeight }}g/{{ item.length }}*{{ item.width }}/{{ item.pieceQuantity }}张
</view>
</view>
</view>
</view>
<view class="list-border list-bottom-contant">
<view>
<text class="list-bottom-contant-text">交货时间：</text>
<text class="list-bottom-contant-subtext">{{ items.deliveryDay }}天</text>
<text class="list-title-Subtitle">¥{{ items.totalOfferPrice }}</text>
</view>
</view>
<uGap></uGap>
</view>
</scroll-list>
</view>
</template>
<script>
import uGap from '@/components/u-gap/u-gap.vue'
import scrollList from '@/components/scroll-list/scroll-list.vue'
import { getEnterpriseList, gettradingHallList } from '@/apis/trade'
export default {
// props: {
// queryOrderData: {
// type: Object,
// default: () => {}
// }
// },
components: {
uGap
},
data() {
return {
orderPagination: {
pageNum: 0, // 初始会执行一次下拉加载
pageSize: 10
},
orderData: [],
controlCurrent: 0,
controlItems: ['全部', '待确认', '待发货', '已完成'],
orderOption: {
size: 10,
auto: true,
emptyText: '暂无报价信息~',
background: '#F7F8FA',
fontSize: '40rpx'
},
orderParams: {
cooperationState: 0,
latitude: 23.12616,
longitude: 113.38466,
km: 5
}
}
},
watch: {
// queryOrderData(value) {
// console.log('value', value)
// },
orderParams: {
handler(val) {
this.getTradingQurty()
},
deep: true
}
},
onLoad(option) {
if (option) {
option.latitude && (this.params.latitude = option.latitude)
option.longitude && (this.params.longitude = option.longitude)
option.km && (this.params.km = option.km)
}
this.getTradingQurty()
},
methods: {
// 获取订单列表
getTradingQurty() {
return new Promise((resolve, reject) => {
gettradingHallList({ ...this.orderParams, ...this.orderPagination })
.then(res => {
if (res) {
if (this.orderPagination.pageNum == 1) {
this.orderData = res.records
} else {
this.orderData = this.orderData.concat(res.records)
}
resolve({ list: this.orderData, total: res.total })
}
})
.catch(err => {
reject(err)
})
})
},
//订单分页
orderUp(page) {
this.orderPagination.pageNum++
this.getTradingQurty()
.then(({ list, total }) => {
this.$refs.orderRef.loadSuccess({ list, total })
})
.catch(() => {
this.$refs.orderRef.loadFail()
})
},
//订单分页
orderDown() {
this.orderPagination.pageNum = 1
this.getTradingQurty()
.then(({ list, total }) => {
this.$refs.orderRef.refreshSuccess({ list, total })
})
.catch(() => {
this.$refs.orderRef.refreshFail()
})
},
//分段器点击事件
onClickItem(value) {
console.log(value)
}
}
}
</script>
<style lang="scss">
.order-list {
margin-bottom: 0px;
background: #FFFFFF;
.list-border {
border-bottom: 2rpx solid #dddddd;
}
.list-title-line {
line-height: 88rpx;
padding-left: 48rpx;
width: 750rpx;
height: 88rpx;
background: #FFFFFF;
}
.list-title {
font-family: PingFangSC-Semibold;
font-size: 30rpx;
color: #000000;
letter-spacing: 0;
font-weight: 600;
}
.list-title-Subtitle {
font-family: PingFangSC-Medium;
font-size: 30rpx;
color: #ff5368;
letter-spacing: 0;
text-align: right;
font-weight: 500;
float: right;
margin-right: 32rpx;
}
.list-info-line {
padding-left: 48rpx;
line-height: 70rpx;
// width: 750rpx;
// height: 88rpx;
background: #FFFFFF;
}
.list-info-contant {
margin-left: 48rpx;
}
.list-info-title {
font-family: PingFangSC-Medium;
font-size: 30rpx;
color: #333333;
letter-spacing: 0;
text-align: left;
font-weight: 550;
}
.list-info-text {
font-family: PingFangSC-Regular;
font-size: 26rpx;
color: #888888;
letter-spacing: 0;
text-align: left;
line-height: 64rpx;
font-weight: 400;
}
.list-image {
width: 100rpx;
height: 100rpx;
margin-top: 20rpx;
}
.list-info {
display: flex;
}
.list-bottom-contant {
line-height: 70rpx;
padding-left: 48rpx;
width: 750rpx;
height: 80rpx;
background: #FFFFFF;
.list-bottom-contant-text{
font-size: 26rpx;
color: #888888;
letter-spacing: 0;
line-height: 32rpx;
font-weight: 400;
}
.list-bottom-contant-subtext{
font-size: 26rpx;
color: #333333;
letter-spacing: 0;
line-height: 32rpx;
font-weight: 400;
}
}
}
</style>
<template>
<view class="order-list">
<uni-segmented-control :current="controlCurrent" :values="controlItems" @clickItem="onClickItem" styleType="text" activeColor="#007AFF"></uni-segmented-control>
<scroll-list style="touch-action: none" ref="orderRef" :option="orderOption" @load="orderUp" @refresh="orderDown">
<view v-for="(items, index) in orderData" :key="index">
<view class="list-border list-title-line">
<text class="list-title">广州民族印刷有限公司</text>
<text class="list-title-Subtitle">{{controlItems[items.orderStatus-1] }}</text>
</view>
<view class="list-border list-info-line" v-for="(item, index) in items.orderItemList" :key="index">
<view class="list-info " :class="index===items.orderItemList.length?'list-border':''">
<view class="">
<!-- <image class="list-image" :src="item.productImg" mode=""></image> -->
<image class="list-image" src="../../static/logo.png" mode="">
</view>
<view class="list-info-contant">
<view class="list-info-title">{{ item.brandName }}{{ item.categoryName }}</view>
<view class="list-info-text">
{{ item.categoryName }}/{{ item.brandName }}/{{ item.gramWeight }}g/{{ item.length }}*{{ item.width }}/{{ item.pieceQuantity }}张
</view>
</view>
</view>
</view>
<view class="list-border list-bottom-contant">
<view>
<text class="list-bottom-contant-text">交货时间：</text>
<text class="list-bottom-contant-subtext">{{ items.deliveryDay }}天</text>
</view>
<view>
<text class="list-title-Subtitle">¥{{ items.totalOfferPrice }}</text>
</view>
</view>
<uGap></uGap>
</view>
</scroll-list>
</view>
</template>
<script>
import uGap from '@/components/u-gap/u-gap.vue'
import scrollList from '@/components/scroll-list/scroll-list.vue'
import { gettradingHallList } from '@/apis/trade'
export default {
// props: {
// queryOrderData: {
// type: Object,
// default: () => {}
// }
// },
components: {
uGap
},
data() {
return {
orderPagination: {
pageNum: 0, // 初始会执行一次下拉加载
pageSize: 10
},
orderData: [],
controlCurrent: 0,
controlItems: ['全部', '待确认', '待发货', '已完成'],
orderOption: {
size: 10,
auto: true,
emptyText: '暂无报价信息~',
background: '#F7F8FA',
fontSize: '40rpx'
},
orderParams: {
cooperationState: 0,
latitude: 23.12616,
longitude: 113.38466,
km: 5
}
}
},
watch: {
// queryOrderData(value) {
// console.log('value', value)
// },
orderParams: {
handler(val) {
this.getTradingQurty()
},
deep: true
}
},
onLoad(option) {
if (option) {
option.latitude && (this.params.latitude = option.latitude)
option.longitude && (this.params.longitude = option.longitude)
option.km && (this.params.km = option.km)
}
this.getTradingQurty()
},
methods: {
// 获取订单列表
getTradingQurty() {
return new Promise((resolve, reject) => {
gettradingHallList({ ...this.orderParams, ...this.orderPagination })
.then(res => {
if (res) {
if (this.orderPagination.pageNum == 1) {
this.orderData = res.records
} else {
this.orderData = this.orderData.concat(res.records)
}
resolve({ list: this.orderData, total: res.total })
}
})
.catch(err => {
reject(err)
})
})
},
//订单分页
orderUp(page) {
this.orderPagination.pageNum++
this.getTradingQurty()
.then(({ list, total }) => {
this.$refs.orderRef.loadSuccess({ list, total })
})
.catch(() => {
this.$refs.orderRef.loadFail()
})
},
//订单分页
orderDown() {
this.orderPagination.pageNum = 1
this.getTradingQurty()
.then(({ list, total }) => {
this.$refs.orderRef.refreshSuccess({ list, total })
})
.catch(() => {
this.$refs.orderRef.refreshFail()
})
},
//分段器点击事件
onClickItem(value) {
console.log(value)
}
}
}
</script>
<style lang="scss">
.order-list {
margin-bottom: 0px;
background: #FFFFFF;
.list-border {
border-bottom: 2rpx solid #dddddd;
}
.list-title-line {
line-height: 88rpx;
padding-left: 48rpx;
width: 750rpx;
height: 88rpx;
background: #FFFFFF;
}
.list-title {
font-family: PingFangSC-Semibold;
font-size: 30rpx;
color: #000000;
letter-spacing: 0;
font-weight: 600;
}
.list-title-Subtitle {
font-family: PingFangSC-Medium;
font-size: 30rpx;
color: #ff5368;
letter-spacing: 0;
text-align: right;
font-weight: 500;
float: right;
margin-right: 32rpx;
}
.list-info-line {
padding-left: 48rpx;
line-height: 70rpx;
// width: 750rpx;
// height: 88rpx;
background: #FFFFFF;
}
.list-info-contant {
margin-left: 48rpx;
}
.list-info-title {
font-family: PingFangSC-Medium;
font-size: 30rpx;
color: #333333;
letter-spacing: 0;
text-align: left;
font-weight: 550;
}
.list-info-text {
font-family: PingFangSC-Regular;
font-size: 26rpx;
color: #888888;
letter-spacing: 0;
text-align: left;
line-height: 64rpx;
font-weight: 400;
}
.list-image {
width: 100rpx;
height: 100rpx;
margin-top: 20rpx;
}
.list-info {
display: flex;
}
.list-bottom-contant {
// line-height: 70rpx;
align-items: center;
padding-left: 48rpx;
width: 750rpx;
height: 80rpx;
background: #FFFFFF;
display: flex;
justify-content: space-between;
.list-bottom-contant-text{
font-size: 26rpx;
color: #888888;
letter-spacing: 0;
line-height: 32rpx;
font-weight: 400;
}
.list-bottom-contant-subtext{
font-size: 26rpx;
color: #333333;
letter-spacing: 0;
line-height: 32rpx;
font-weight: 400;
}
}
}
</style>

570
pages/trade/quotationList.vue
View File

@ -1,289 +1,283 @@
<template>
<view class="quotation-list">
<scroll-list ref="quotationRef" :option="option" @load="quotationUp" @refresh="quotationDown">
<view v-for="(item,index) in quotationData" :key="index">
<view class="list-border list-title-line">
<text class="list-title">广州民族印刷有限公司</text>
<text class="list-title-Subtitle">待报价</text>
</view>
<view class="list-border list-info-line">
<view class="list-info list-border">
<view class=""><image class="list-image" src="../../static/logo.png" mode=""></image></view>
<view class="list-info-contant">
<view class="list-info-title">金蝶蓝白卡</view>
<view class="list-info-text">白卡纸/金蝶蓝/350g/787*1092/2200张</view>
</view>
</view>
<view class="list-info">
<view class=""><image class="list-image" src="../../static/logo.png" mode=""></image></view>
<view class="list-info-contant">
<view class="list-info-title">金蝶蓝白卡</view>
<view class="list-info-text">白卡纸/金蝶蓝/350g/787*1092/2200张</view>
</view>
</view>
</view>
<view class="list-border list-bottom-contant">
<view>
<text>交货时间：</text>
<text>3天</text>
</view>
<view>
<text>交货区域：</text>
<text>3天</text>
</view>
<view class="offer-class">
<view class="offer-width">
<text>报价截止：</text>
<text>3天</text>
</view>
<view>
<button type="primary" class="offer-btn" @click="offerClick()">报价</button>
</view>
</view>
</view>
<uGap></uGap>
</view>
</scroll-list>
<view>
<view class="offer-prices" @click="nativeTo()">
<image class="my-image" src="../../static/imgs/trade/myPrice.png" mode=""></image>
<view class="my-price">
我的报价
</view>
</view>
</view>
</view>
</template>
<script>
import { getEnterpriseList, gettradingHallList } from '@/apis/trade'
import uGap from '@/components/u-gap/u-gap.vue'
export default {
props: {
queryData: {
type: Object,
default: () => {}
}
},
components: {
uGap
},
data() {
return {
option: {
size: 10,
auto: true,
emptyText: '暂无报价信息~',
background: '#F7F8FA',
fontSize: '40rpx'
},
params: {
cooperationState: 0,
latitude: 23.12616,
longitude: 113.38466,
km: 5
},
pagination: {
pageNum: 0, // 初始会执行一次下拉加载
pageSize: 10
},
quotationData:[]
}
},
watch: {
params: {
handler(val) {
this.getQuotationQurty()
},
deep: true
},
},
onLoad(option) {
if (option) {
option.latitude && (this.params.latitude = option.latitude)
option.longitude && (this.params.longitude = option.longitude)
option.km && (this.params.km = option.km)
}
this.getQuotationQurty()
},
methods: {
// 获取报价列表
getQuotationQurty() {
return new Promise((resolve, reject) => {
getEnterpriseList({ ...this.params, ...this.pagination })
.then(res => {
if (res) {
if (this.pagination.pageNum == 1) {
// this.quotationData = res.records
this.quotationData = []
this.quotationData = [{ name: '111', id: '222' }, { name: '111', id: '222' }]
} else {
this.quotationData = this.quotationData.concat(res.records)
}
console.log('this.quotationData', res)
resolve({ list: this.quotationData, total: res.total })
}
})
.catch(err => {
reject(err)
})
})
},
//报价分页
quotationUp(page) {
this.pagination.pageNum++
this.getQuotationQurty()
.then(({ list, total }) => {
this.$refs.quotationRef.loadSuccess({ list, total })
})
.catch(() => {
this.$refs.quotationRef.loadFail()
})
},
//报价分页
quotationDown() {
this.pagination.pageNum = 1
this.getQuotationQurty()
.then(({ list, total }) => {
this.$refs.quotationRef.refreshSuccess({ list, total })
})
.catch(() => {
this.$refs.quotationRef.refreshFail()
})
},
// 报价按钮事件
offerClick(){
uni.navigateTo({
url: '../submit-quotation/index'
});
},
// 我的报价页面跳转事件
nativeTo(){
console.log(11)
uni.navigateTo({
url: '../my-offer/index'
});
},
}
}
</script>
<style lang="scss">
.quotation-list {
margin-bottom: 0rpx;
.list-border {
// border-top: 1px solid #dddddd;
border-bottom: 2rpx solid #dddddd;
}
.list-title-line {
line-height: 88rpx;
padding-left: 48rpx;
background: #FFFFFF;
}
.list-title {
font-family: PingFangSC-Semibold;
font-size: 30rpx;
color: #000000;
letter-spacing: 0;
font-weight: 600;
}
.list-title-Subtitle {
font-family: PingFangSC-Medium;
font-size: 30rpx;
color: #ff5368;
letter-spacing: 0;
text-align: right;
font-weight: 500;
float: right;
margin-right: 32rpx;
}
.list-info-line {
padding-left: 48rpx;
line-height: 70rpx;
background: #FFFFFF;
}
.list-info-contant {
margin-left: 48rpx;
background: #FFFFFF;
}
.list-info-title {
font-family: PingFangSC-Medium;
font-size: 30rpx;
color: #333333;
letter-spacing: 0;
text-align: left;
font-weight: 550;
}
.list-info-text {
font-family: PingFangSC-Regular;
font-size: 26rpx;
color: #888888;
letter-spacing: 0;
text-align: left;
line-height: 64rpx;
font-weight: 400;
}
.list-image {
width: 100rpx;
height: 100rpx;
margin-top: 20rpx;
}
.list-info {
display: flex;
}
.list-bottom-contant {
line-height: 70rpx;
padding-left: 48rpx;
padding-bottom: 48rpx;
background: #FFFFFF;
}
.my-image {
width: 32rpx;
height: 32rpx;
}
.my-price {
font-family: PingFangSC-Medium;
font-size: 18rpx;
color: #007AFF;
text-align: center;
font-weight: 500;
white-space: nowrap;
padding: 6rpx;
}
.offer-class{
display: flex;
}
.offer-btn{
width: 150rpx;
height: 64rpx;
background: #007AFF;
border: 2rpx solid #007AFF;
border-radius: 8rpx;
line-height: 60rpx;
}
.offer-width{
width: 70%;
}
.offer-prices{
position: absolute;
z-index: 9999;
right: 32rpx;
bottom: 122rpx;
background-color: #ffffff;
border-radius: 50%;
padding: 10rpx;
text-align: center;
width: 110rpx;
height: 110rpx;
border: 2rpx solid #F9F9F9;
box-shadow: 0rpx 4rpx 34rpx 0rpx rgba(0,0,0,0.2);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
<template>
<view class="quotation-list">
<scroll-list ref="quotationRef" :option="option" @load="quotationUp" @refresh="quotationDown">
<view v-for="(item, index) in quotationData" :key="index">
<view class="list-border list-title-line">
<text class="list-title">广州民族印刷有限公司</text>
<text class="list-title-Subtitle">待报价</text>
</view>
<view class="list-border list-info-line">
<view class="list-info list-border">
<view class=""><image class="list-image" src="../../static/logo.png" mode=""></image></view>
<view class="list-info-contant">
<view class="list-info-title">金蝶蓝白卡</view>
<view class="list-info-text">白卡纸/金蝶蓝/350g/787*1092/2200张</view>
</view>
</view>
<view class="list-info">
<view class=""><image class="list-image" src="../../static/logo.png" mode=""></image></view>
<view class="list-info-contant">
<view class="list-info-title">金蝶蓝白卡</view>
<view class="list-info-text">白卡纸/金蝶蓝/350g/787*1092/2200张</view>
</view>
</view>
</view>
<view class="list-border list-bottom-contant">
<view>
<text>交货时间：</text>
<text>3天</text>
</view>
<view>
<text>交货区域：</text>
<text>3天</text>
</view>
<view class="offer-class">
<view class="offer-width">
<text>报价截止：</text>
<text>3天</text>
</view>
<view><button type="primary" class="offer-btn" @click="offerClick()">报价</button></view>
</view>
</view>
<uGap></uGap>
</view>
</scroll-list>
<view>
<view class="offer-prices" @click="nativeTo()">
<image class="my-image" src="../../static/imgs/trade/myPrice.png" mode=""></image>
<view class="my-price">我的报价</view>
</view>
</view>
</view>
</template>
<script>
import { getEnterpriseList } from '@/apis/trade'
import { back, go2 } from '@/utils/hook.js'
import uGap from '@/components/u-gap/u-gap.vue'
export default {
props: {
queryData: {
type: Object,
default: () => {}
}
},
components: {
uGap
},
data() {
return {
option: {
size: 10,
auto: true,
emptyText: '暂无报价信息~',
background: '#F7F8FA',
fontSize: '40rpx'
},
params: {
cooperationState: 0,
latitude: 23.12616,
longitude: 113.38466,
km: 5
},
pagination: {
pageNum: 0, // 初始会执行一次下拉加载
pageSize: 10
},
quotationData: []
}
},
watch: {
params: {
handler(val) {
this.getQuotationQurty()
},
deep: true
}
},
onLoad(option) {
if (option) {
option.latitude && (this.params.latitude = option.latitude)
option.longitude && (this.params.longitude = option.longitude)
option.km && (this.params.km = option.km)
}
this.getQuotationQurty()
},
methods: {
// 获取报价列表
getQuotationQurty() {
return new Promise((resolve, reject) => {
getEnterpriseList({ ...this.params, ...this.pagination })
.then(res => {
if (res) {
if (this.pagination.pageNum == 1) {
// this.quotationData = res.records
this.quotationData = []
this.quotationData = [{ name: '111', id: '222' }, { name: '111', id: '222' }]
} else {
this.quotationData = this.quotationData.concat(res.records)
}
console.log('this.quotationData', res)
resolve({ list: this.quotationData, total: res.total })
}
})
.catch(err => {
reject(err)
})
})
},
//报价分页
quotationUp(page) {
this.pagination.pageNum++
this.getQuotationQurty()
.then(({ list, total }) => {
this.$refs.quotationRef.loadSuccess({ list, total })
})
.catch(() => {
this.$refs.quotationRef.loadFail()
})
},
//报价分页
quotationDown() {
this.pagination.pageNum = 1
this.getQuotationQurty()
.then(({ list, total }) => {
this.$refs.quotationRef.refreshSuccess({ list, total })
})
.catch(() => {
this.$refs.quotationRef.refreshFail()
})
},
// 报价按钮事件
offerClick() {
var params = {
title: '提交报价'
}
go2('submit-quotation', params)
},
// 我的报价页面跳转事件
nativeTo() {
go2('my-offer')
}
}
}
</script>
<style lang="scss">
.quotation-list {
margin-bottom: 0rpx;
.list-border {
// border-top: 1px solid #dddddd;
border-bottom: 2rpx solid #dddddd;
}
.list-title-line {
line-height: 88rpx;
padding-left: 48rpx;
background: #ffffff;
}
.list-title {
font-family: PingFangSC-Semibold;
font-size: 30rpx;
color: #000000;
letter-spacing: 0;
font-weight: 600;
}
.list-title-Subtitle {
font-family: PingFangSC-Medium;
font-size: 30rpx;
color: #ff5368;
letter-spacing: 0;
text-align: right;
font-weight: 500;
float: right;
margin-right: 32rpx;
}
.list-info-line {
padding-left: 48rpx;
line-height: 70rpx;
background: #ffffff;
}
.list-info-contant {
margin-left: 48rpx;
background: #ffffff;
}
.list-info-title {
font-family: PingFangSC-Medium;
font-size: 30rpx;
color: #333333;
letter-spacing: 0;
text-align: left;
font-weight: 550;
}
.list-info-text {
font-family: PingFangSC-Regular;
font-size: 26rpx;
color: #888888;
letter-spacing: 0;
text-align: left;
line-height: 64rpx;
font-weight: 400;
}
.list-image {
width: 100rpx;
height: 100rpx;
margin-top: 20rpx;
}
.list-info {
display: flex;
}
.list-bottom-contant {
line-height: 70rpx;
padding-left: 48rpx;
padding-bottom: 48rpx;
background: #ffffff;
}
.my-image {
width: 32rpx;
height: 32rpx;
}
.my-price {
font-family: PingFangSC-Medium;
font-size: 18rpx;
color: #007aff;
text-align: center;
font-weight: 500;
white-space: nowrap;
padding: 6rpx;
}
.offer-class {
display: flex;
}
.offer-btn {
width: 150rpx;
height: 64rpx;
background: #007aff;
border: 2rpx solid #007aff;
border-radius: 8rpx;
line-height: 60rpx;
}
.offer-width {
width: 70%;
}
.offer-prices {
position: absolute;
z-index: 9999;
right: 32rpx;
bottom: 122rpx;
background-color: #ffffff;
border-radius: 50%;
padding: 10rpx;
text-align: center;
width: 110rpx;
height: 110rpx;
border: 2rpx solid #f9f9f9;
box-shadow: 0rpx 4rpx 34rpx 0rpx rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
</style> </style>

BIN
static/imgs/trade/camera.png
View File

Before After
Width: 100  |  Height: 100  |  Size: 4.6 KiB

39
uni_modules/uni-data-checkbox/changelog.md
View File

@ -0,0 +1,39 @@
## 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-data-checkbox](https://uniapp.dcloud.io/component/uniui/uni-data-checkbox)
## 0.2.5（2021-08-23）
- 修复 在uni-forms中 modelValue 中不存在当前字段，当前字段必填写也不参与校验的问题
## 0.2.4（2021-08-17）
- 修复 单选 list 模式下 ，icon 为 left 时，选中图标不显示的问题
## 0.2.3（2021-08-11）
- 修复 在 uni-forms 中重置表单，错误信息无法清除的问题
## 0.2.2（2021-07-30）
- 优化 在uni-forms组件，与label不对齐的问题
## 0.2.1（2021-07-27）
- 修复 单选默认值为0不能选中的Bug
## 0.2.0（2021-07-13）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 0.1.11（2021-07-06）
- 优化 删除无用日志
## 0.1.10（2021-07-05）
- 修复 由 0.1.9 引起的非 nvue 端图标不显示的问题
## 0.1.9（2021-07-05）
- 修复 nvue 黑框样式问题
## 0.1.8（2021-06-28）
- 修复 selectedTextColor 属性不生效的Bug
## 0.1.7（2021-06-02）
- 新增 map 属性，可以方便映射text/value属性
## 0.1.6（2021-05-26）
- 修复 不关联服务空间的情况下组件报错的Bug
## 0.1.5（2021-05-12）
- 新增 组件示例地址
## 0.1.4（2021-04-09）
- 修复 nvue 下无法选中的问题
## 0.1.3（2021-03-22）
- 新增 disabled属性
## 0.1.2（2021-02-24）
- 优化 默认颜色显示
## 0.1.1（2021-02-24）
- 新增 支持nvue
## 0.1.0（2021-02-18）
- “暂无数据”显示居中

817
uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue
View File

@ -0,0 +1,817 @@
<template>
<view class="uni-data-checklist" :style="{'margin-top':isTop+'px'}">
<template v-if="!isLocal">
<view class="uni-data-loading">
<uni-load-more v-if="!mixinDatacomErrorMessage" status="loading" iconType="snow" :iconSize="18" :content-text="contentText"></uni-load-more>
<text v-else>{{mixinDatacomErrorMessage}}</text>
</view>
</template>
<template v-else>
<checkbox-group v-if="multiple" class="checklist-group" :class="{'is-list':mode==='list' || wrap}" @change="chagne">
<label class="checklist-box" :class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']"
:style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index">
<checkbox class="hidden" hidden :disabled="disabled || !!item.disabled" :value="item[map.value]+''" :checked="item.selected" />
<view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="checkbox__inner" :style="item.styleIcon">
<view class="checkbox__inner-icon"></view>
</view>
<view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
<text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
<view v-if="mode === 'list' && icon === 'right'" class="checkobx__list" :style="item.styleBackgroud"></view>
</view>
</label>
</checkbox-group>
<radio-group v-else class="checklist-group" :class="{'is-list':mode==='list','is-wrap':wrap}" @change="chagne">
<!-- -->
<label class="checklist-box" :class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']"
:style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index">
<radio class="hidden" hidden :disabled="disabled || item.disabled" :value="item[map.value]+''" :checked="item.selected" />
<view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="radio__inner"
:style="item.styleBackgroud">
<view class="radio__inner-icon" :style="item.styleIcon"></view>
</view>
<view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
<text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
<view v-if="mode === 'list' && icon === 'right'" :style="item.styleRightIcon" class="checkobx__list"></view>
</view>
</label>
</radio-group>
</template>
</view>
</template>
<script>
/**
* DataChecklist 数据选择器
* @description 通过数据渲染 checkbox 和 radio
* @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
* @property {String} mode = [default| list | button | tag] 显示模式
* @value default 默认横排模式
* @value list 列表模式
* @value button 按钮模式
* @value tag 标签模式
* @property {Boolean} multiple = [true|false] 是否多选
* @property {Array|String|Number} value 默认值
* @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}]
* @property {Number|String} min 最小选择个数 ，multiple为true时生效
* @property {Number|String} max 最大选择个数 ，multiple为true时生效
* @property {Boolean} wrap 是否换行显示
* @property {String} icon = [left|right] list 列表模式下icon显示位置
* @property {Boolean} selectedColor 选中颜色
* @property {Boolean} emptyText 没有数据时显示的文字 ，本地数据无效
* @property {Boolean} selectedTextColor 选中文本颜色，如不填写则自动显示
* @property {Object} map 字段映射， 默认 map={text:'text',value:'value'}
* @value left 左侧显示
* @value right 右侧显示
* @event {Function} change 选中发生变化触发
*/
export default {
name: 'uniDataChecklist',
mixins: [uniCloud.mixinDatacom || {}],
emits:['input','update:modelValue','change'],
props: {
mode: {
type: String,
default: 'default'
},
multiple: {
type: Boolean,
default: false
},
value: {
type: [Array, String, Number],
default () {
return ''
}
},
// TODO vue3
modelValue: {
type: [Array, String, Number],
default() {
return '';
}
},
localdata: {
type: Array,
default () {
return []
}
},
min: {
type: [Number, String],
default: ''
},
max: {
type: [Number, String],
default: ''
},
wrap: {
type: Boolean,
default: false
},
icon: {
type: String,
default: 'left'
},
selectedColor: {
type: String,
default: ''
},
selectedTextColor: {
type: String,
default: ''
},
emptyText:{
type: String,
default: '暂无数据'
},
disabled:{
type: Boolean,
default: false
},
map:{
type: Object,
default(){
return {
text:'text',
value:'value'
}
}
}
},
watch: {
localdata: {
handler(newVal) {
this.range = newVal
this.dataList = this.getDataList(this.getSelectedValue(newVal))
},
deep: true
},
mixinDatacomResData(newVal) {
this.range = newVal
this.dataList = this.getDataList(this.getSelectedValue(newVal))
},
value(newVal) {
this.dataList = this.getDataList(newVal)
// fix by mehaotian is_reset 在 uni-forms 中定义
if(!this.is_reset){
this.is_reset = false
this.formItem && this.formItem.setValue(newVal)
}
},
modelValue(newVal) {
this.dataList = this.getDataList(newVal);
if(!this.is_reset){
this.is_reset = false
this.formItem && this.formItem.setValue(newVal)
}
}
},
data() {
return {
dataList: [],
range: [],
contentText: {
contentdown: '查看更多',
contentrefresh: '加载中',
contentnomore: '没有更多'
},
isLocal:true,
styles: {
selectedColor: '#2979ff',
selectedTextColor: '#666',
},
isTop:0
};
},
computed:{
dataValue(){
if(this.value === '')return this.modelValue
if(this.modelValue === '') return this.value
return this.value
}
},
created() {
this.form = this.getForm('uniForms')
this.formItem = this.getForm('uniFormsItem')
// this.formItem && this.formItem.setValue(this.value)
if (this.formItem) {
this.isTop = 6
if (this.formItem.name) {
// 如果存在name添加默认值,否则formData 中不存在这个字段不校验
if(!this.is_reset){
this.is_reset = false
this.formItem.setValue(this.dataValue)
}
this.rename = this.formItem.name
this.form.inputChildrens.push(this)
}
}
if (this.localdata && this.localdata.length !== 0) {
this.isLocal = true
this.range = this.localdata
this.dataList = this.getDataList(this.getSelectedValue(this.range))
} else {
if (this.collection) {
this.isLocal = false
this.loadData()
}
}
},
methods: {
loadData() {
this.mixinDatacomGet().then(res=>{
this.mixinDatacomResData = res.result.data
if(this.mixinDatacomResData.length === 0){
this.isLocal = false
this.mixinDatacomErrorMessage = this.emptyText
}else{
this.isLocal = true
}
}).catch(err=>{
this.mixinDatacomErrorMessage = err.message
})
},
/**
* 获取父元素实例
*/
getForm(name = 'uniForms') {
let parent = this.$parent;
let parentName = parent.$options.name;
while (parentName !== name) {
parent = parent.$parent;
if (!parent) return false
parentName = parent.$options.name;
}
return parent;
},
chagne(e) {
const values = e.detail.value
let detail = {
value: [],
data: []
}
if (this.multiple) {
this.range.forEach(item => {
if (values.includes(item[this.map.value] + '')) {
detail.value.push(item[this.map.value])
detail.data.push(item)
}
})
} else {
const range = this.range.find(item => (item[this.map.value] + '') === values)
if (range) {
detail = {
value: range[this.map.value],
data: range
}
}
}
this.formItem && this.formItem.setValue(detail.value)
// TODO 兼容 vue2
this.$emit('input', detail.value);
// // TOTO 兼容 vue3
this.$emit('update:modelValue', detail.value);
this.$emit('change', {
detail
})
if (this.multiple) {
// 如果 v-model 没有绑定 ，则走内部逻辑
// if (this.value.length === 0) {
this.dataList = this.getDataList(detail.value, true)
// }
} else {
this.dataList = this.getDataList(detail.value)
}
},
/**
* 获取渲染的新数组
* @param {Object} value 选中内容
*/
getDataList(value) {
// 解除引用关系，破坏原引用关系，避免污染源数据
let dataList = JSON.parse(JSON.stringify(this.range))
let list = []
if (this.multiple) {
if (!Array.isArray(value)) {
value = []
}
}
dataList.forEach((item, index) => {
item.disabled = item.disable || item.disabled || false
if (this.multiple) {
if (value.length > 0) {
let have = value.find(val => val === item[this.map.value])
item.selected = have !== undefined
} else {
item.selected = false
}
} else {
item.selected = value === item[this.map.value]
}
list.push(item)
})
return this.setRange(list)
},
/**
* 处理最大最小值
* @param {Object} list
*/
setRange(list) {
let selectList = list.filter(item => item.selected)
let min = Number(this.min) || 0
let max = Number(this.max) || ''
list.forEach((item, index) => {
if (this.multiple) {
if (selectList.length <= min) {
let have = selectList.find(val => val[this.map.value] === item[this.map.value])
if (have !== undefined) {
item.disabled = true
}
}
if (selectList.length >= max && max !== '') {
let have = selectList.find(val => val[this.map.value] === item[this.map.value])
if (have === undefined) {
item.disabled = true
}
}
}
this.setStyles(item, index)
list[index] = item
})
return list
},
/**
* 设置 class
* @param {Object} item
* @param {Object} index
*/
setStyles(item, index) {
// 设置自定义样式
item.styleBackgroud = this.setStyleBackgroud(item)
item.styleIcon = this.setStyleIcon(item)
item.styleIconText = this.setStyleIconText(item)
item.styleRightIcon = this.setStyleRightIcon(item)
},
/**
* 获取选中值
* @param {Object} range
*/
getSelectedValue(range) {
if (!this.multiple) return this.dataValue
let selectedArr = []
range.forEach((item) => {
if (item.selected) {
selectedArr.push(item[this.map.value])
}
})
return this.dataValue.length > 0 ? this.dataValue : selectedArr
},
/**
* 设置背景样式
*/
setStyleBackgroud(item) {
let styles = {}
let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
if (this.mode !== 'list') {
styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
}
if (this.mode === 'tag') {
styles['background-color'] = item.selected? selectedColor:'#f5f5f5'
}
let classles = ''
for (let i in styles) {
classles += `${i}:${styles[i]};`
}
return classles
},
setStyleIcon(item) {
let styles = {}
let classles = ''
let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
styles['background-color'] = item.selected?selectedColor:'#fff'
styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
if(!item.selected && item.disabled){
styles['background-color'] = '#F2F6FC'
styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
}
for (let i in styles) {
classles += `${i}:${styles[i]};`
}
return classles
},
setStyleIconText(item) {
let styles = {}
let classles = ''
let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
if (this.mode === 'tag') {
styles.color = item.selected?(this.selectedTextColor?this.selectedTextColor:'#fff'):'#666'
} else {
styles.color = item.selected?(this.selectedTextColor?this.selectedTextColor:selectedColor):'#666'
}
if(!item.selected && item.disabled){
styles.color = '#999'
}
for (let i in styles) {
classles += `${i}:${styles[i]};`
}
return classles
},
setStyleRightIcon(item) {
let styles = {}
let classles = ''
if (this.mode === 'list') {
styles['border-color'] = item.selected?this.styles.selectedColor:'#DCDFE6'
}
for (let i in styles) {
classles += `${i}:${styles[i]};`
}
return classles
}
}
}
</script>
<style lang="scss">
$checked-color: #2979ff;
$border-color: #DCDFE6;
$disable:0.4;
@mixin flex {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
}
.uni-data-loading {
@include flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 36px;
padding-left: 10px;
color: #999;
}
.uni-data-checklist {
position: relative;
z-index: 0;
flex: 1;
// 多选样式
.checklist-group {
@include flex;
flex-direction: row;
flex-wrap: wrap;
&.is-list {
flex-direction: column;
}
.checklist-box {
@include flex;
flex-direction: row;
align-items: center;
position: relative;
margin: 5px 0;
margin-right: 25px;
.hidden {
position: absolute;
opacity: 0;
}
// 文字样式
.checklist-content {
@include flex;
flex: 1;
flex-direction: row;
align-items: center;
justify-content: space-between;
.checklist-text {
font-size: 14px;
color: #666;
margin-left: 5px;
line-height: 14px;
}
.checkobx__list {
border-right-width: 1px;
border-right-color: #007aff;
border-right-style: solid;
border-bottom-width:1px;
border-bottom-color: #007aff;
border-bottom-style: solid;
height: 12px;
width: 6px;
left: -5px;
transform-origin: center;
transform: rotate(45deg);
opacity: 0;
}
}
// 多选样式
.checkbox__inner {
/* #ifndef APP-NVUE */
flex-shrink: 0;
box-sizing: border-box;
/* #endif */
position: relative;
width: 16px;
height: 16px;
border: 1px solid $border-color;
border-radius: 4px;
background-color: #fff;
z-index: 1;
.checkbox__inner-icon {
position: absolute;
/* #ifdef APP-NVUE */
top: 2px;
/* #endif */
/* #ifndef APP-NVUE */
top: 1px;
/* #endif */
left: 5px;
height: 8px;
width: 4px;
border-right-width: 1px;
border-right-color: #fff;
border-right-style: solid;
border-bottom-width:1px ;
border-bottom-color: #fff;
border-bottom-style: solid;
opacity: 0;
transform-origin: center;
transform: rotate(40deg);
}
}
// 单选样式
.radio__inner {
@include flex;
/* #ifndef APP-NVUE */
flex-shrink: 0;
box-sizing: border-box;
/* #endif */
justify-content: center;
align-items: center;
position: relative;
width: 16px;
height: 16px;
border: 1px solid $border-color;
border-radius: 16px;
background-color: #fff;
z-index: 1;
.radio__inner-icon {
width: 8px;
height: 8px;
border-radius: 10px;
opacity: 0;
}
}
// 默认样式
&.is--default {
// 禁用
&.is-disable {
/* #ifdef H5 */
cursor: not-allowed;
/* #endif */
.checkbox__inner {
background-color: #F2F6FC;
border-color: $border-color;
/* #ifdef H5 */
cursor: not-allowed;
/* #endif */
}
.radio__inner {
background-color: #F2F6FC;
border-color: $border-color;
}
.checklist-text {
color: #999;
}
}
// 选中
&.is-checked {
.checkbox__inner {
border-color: $checked-color;
background-color: $checked-color;
.checkbox__inner-icon {
opacity: 1;
transform: rotate(45deg);
}
}
.radio__inner {
border-color: $checked-color;
.radio__inner-icon {
opacity: 1;
background-color: $checked-color;
}
}
.checklist-text {
color: $checked-color;
}
// 选中禁用
&.is-disable {
.checkbox__inner {
opacity: $disable;
}
.checklist-text {
opacity: $disable;
}
.radio__inner {
opacity: $disable;
}
}
}
}
// 按钮样式
&.is--button {
margin-right: 10px;
padding: 5px 10px;
border: 1px $border-color solid;
border-radius: 3px;
transition: border-color 0.2s;
// 禁用
&.is-disable {
/* #ifdef H5 */
cursor: not-allowed;
/* #endif */
border: 1px #eee solid;
opacity: $disable;
.checkbox__inner {
background-color: #F2F6FC;
border-color: $border-color;
/* #ifdef H5 */
cursor: not-allowed;
/* #endif */
}
.radio__inner {
background-color: #F2F6FC;
border-color: $border-color;
/* #ifdef H5 */
cursor: not-allowed;
/* #endif */
}
.checklist-text {
color: #999;
}
}
&.is-checked {
border-color: $checked-color;
.checkbox__inner {
border-color: $checked-color;
background-color: $checked-color;
.checkbox__inner-icon {
opacity: 1;
transform: rotate(45deg);
}
}
.radio__inner {
border-color: $checked-color;
.radio__inner-icon {
opacity: 1;
background-color: $checked-color;
}
}
.checklist-text {
color: $checked-color;
}
// 选中禁用
&.is-disable {
opacity: $disable;
}
}
}
// 标签样式
&.is--tag {
margin-right: 10px;
padding: 5px 10px;
border: 1px $border-color solid;
border-radius: 3px;
background-color: #f5f5f5;
.checklist-text {
margin: 0;
color: #666;
}
// 禁用
&.is-disable {
/* #ifdef H5 */
cursor: not-allowed;
/* #endif */
opacity: $disable;
}
&.is-checked {
background-color: $checked-color;
border-color: $checked-color;
.checklist-text {
color: #fff;
}
}
}
// 列表样式
&.is--list {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
padding: 10px 15px;
padding-left: 0;
margin: 0;
&.is-list-border {
border-top: 1px #eee solid;
}
// 禁用
&.is-disable {
/* #ifdef H5 */
cursor: not-allowed;
/* #endif */
.checkbox__inner {
background-color: #F2F6FC;
border-color: $border-color;
/* #ifdef H5 */
cursor: not-allowed;
/* #endif */
}
.checklist-text {
color: #999;
}
}
&.is-checked {
.checkbox__inner {
border-color: $checked-color;
background-color: $checked-color;
.checkbox__inner-icon {
opacity: 1;
transform: rotate(45deg);
}
}
.radio__inner {
.radio__inner-icon {
opacity: 1;
}
}
.checklist-text {
color: $checked-color;
}
.checklist-content {
.checkobx__list {
opacity: 1;
border-color: $checked-color;
}
}
// 选中禁用
&.is-disable {
.checkbox__inner {
opacity: $disable;
}
.checklist-text {
opacity: $disable;
}
}
}
}
}
}
}
</style>

87
uni_modules/uni-data-checkbox/package.json
View File

@ -0,0 +1,87 @@
{
"id": "uni-data-checkbox",
"displayName": "uni-data-checkbox 数据选择器",
"version": "1.0.0",
"description": "通过数据驱动的单选框和复选框",
"keywords": [
"uni-ui",
"checkbox",
"单选",
"多选",
"单选多选"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": "^3.1.1"
},
"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-load-more","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"
}
}
}
}
}

18
uni_modules/uni-data-checkbox/readme.md
View File

@ -0,0 +1,18 @@
## DataCheckbox 数据驱动的单选复选框
> **组件名：uni-data-checkbox**
> 代码块： `uDataCheckbox`
本组件是基于uni-app基础组件checkbox的封装。本组件要解决问题包括：
1. 数据绑定型组件：给本组件绑定一个data，会自动渲染一组候选内容。再以往，开发者需要编写不少代码实现类似功能
2. 自动的表单校验：组件绑定了data，且符合[uni-forms](https://ext.dcloud.net.cn/plugin?id=2773)组件的表单校验规范，搭配使用会自动实现表单校验
3. 本组件合并了单选多选
4. 本组件有若干风格选择，如普通的单选多选框、并列button风格、tag风格。开发者可以快速选择需要的风格。但作为一个封装组件，样式代码虽然不用自己写了，却会牺牲一定的样式自定义性
在uniCloud开发中，`DB Schema`中配置了enum枚举等类型后，在web控制台的[自动生成表单](https://uniapp.dcloud.io/uniCloud/schema?id=autocode)功能中，会自动生成``uni-data-checkbox``组件并绑定好data
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-data-checkbox)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839

17
uni_modules/uni-fab/changelog.md
View File

@ -0,0 +1,17 @@
## 1.2.2（2021-12-29）
- 更新 组件依赖
## 1.2.1（2021-11-19）
- 修复 阴影颜色不正确的bug
## 1.2.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-fab](https://uniapp.dcloud.io/component/uniui/uni-fab)
## 1.1.1（2021-11-09）
- 新增 提供组件设计资源，组件样式调整
## 1.1.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.7（2021-05-12）
- 新增 组件示例地址
## 1.0.6（2021-02-05）
- 调整为uni_modules目录规范
- 优化 按钮背景色调整
- 优化 兼容pc端

475
uni_modules/uni-fab/components/uni-fab/uni-fab.vue
View File

@ -0,0 +1,475 @@
<template>
<view class="uni-cursor-point">
<view v-if="popMenu && (leftBottom||rightBottom||leftTop||rightTop) && content.length > 0" :class="{
'uni-fab--leftBottom': leftBottom,
'uni-fab--rightBottom': rightBottom,
'uni-fab--leftTop': leftTop,
'uni-fab--rightTop': rightTop
}" class="uni-fab">
<view :class="{
'uni-fab__content--left': horizontal === 'left',
'uni-fab__content--right': horizontal === 'right',
'uni-fab__content--flexDirection': direction === 'vertical',
'uni-fab__content--flexDirectionStart': flexDirectionStart,
'uni-fab__content--flexDirectionEnd': flexDirectionEnd,
'uni-fab__content--other-platform': !isAndroidNvue
}" :style="{ width: boxWidth, height: boxHeight, backgroundColor: styles.backgroundColor }"
class="uni-fab__content" elevation="5">
<view v-if="flexDirectionStart || horizontalLeft" class="uni-fab__item uni-fab__item--first" />
<view v-for="(item, index) in content" :key="index" :class="{ 'uni-fab__item--active': isShow }"
class="uni-fab__item" @click="_onItemClick(index, item)">
<image :src="item.active ? item.selectedIconPath : item.iconPath" class="uni-fab__item-image"
mode="aspectFit" />
<text class="uni-fab__item-text"
:style="{ color: item.active ? styles.selectedColor : styles.color }">{{ item.text }}</text>
</view>
<view v-if="flexDirectionEnd || horizontalRight" class="uni-fab__item uni-fab__item--first" />
</view>
</view>
<view :class="{
'uni-fab__circle--leftBottom': leftBottom,
'uni-fab__circle--rightBottom': rightBottom,
'uni-fab__circle--leftTop': leftTop,
'uni-fab__circle--rightTop': rightTop,
'uni-fab__content--other-platform': !isAndroidNvue
}" class="uni-fab__circle uni-fab__plus" :style="{ 'background-color': styles.buttonColor }" @click="_onClick">
<uni-icons class="fab-circle-icon" type="plusempty" :color="styles.iconColor" size="32"
:class="{'uni-fab__plus--active': isShow && content.length > 0}"></uni-icons>
<!-- <view class="fab-circle-v" :class="{'uni-fab__plus--active': isShow && content.length > 0}"></view>
<view class="fab-circle-h" :class="{'uni-fab__plus--active': isShow && content.length > 0}"></view> -->
</view>
</view>
</template>
<script>
let platform = 'other'
// #ifdef APP-NVUE
platform = uni.getSystemInfoSync().platform
// #endif
/**
* Fab 悬浮按钮
* @description 点击可展开一个图形按钮菜单
* @tutorial https://ext.dcloud.net.cn/plugin?id=144
* @property {Object} pattern 可选样式配置项
* @property {Object} horizontal = [left | right] 水平对齐方式
* @value left 左对齐
* @value right 右对齐
* @property {Object} vertical = [bottom | top] 垂直对齐方式
* @value bottom 下对齐
* @value top 上对齐
* @property {Object} direction = [horizontal | vertical] 展开菜单显示方式
* @value horizontal 水平显示
* @value vertical 垂直显示
* @property {Array} content 展开菜单内容配置项
* @property {Boolean} popMenu 是否使用弹出菜单
* @event {Function} trigger 展开菜单点击事件，返回点击信息
* @event {Function} fabClick 悬浮按钮点击事件
*/
export default {
name: 'UniFab',
emits: ['fabClick', 'trigger'],
props: {
pattern: {
type: Object,
default () {
return {}
}
},
horizontal: {
type: String,
default: 'left'
},
vertical: {
type: String,
default: 'bottom'
},
direction: {
type: String,
default: 'horizontal'
},
content: {
type: Array,
default () {
return []
}
},
show: {
type: Boolean,
default: false
},
popMenu: {
type: Boolean,
default: true
}
},
data() {
return {
fabShow: false,
isShow: false,
isAndroidNvue: platform === 'android',
styles: {
color: '#3c3e49',
selectedColor: '#007AFF',
backgroundColor: '#fff',
buttonColor: '#007AFF',
iconColor: '#fff'
}
}
},
computed: {
contentWidth(e) {
return (this.content.length + 1) * 55 + 15 + 'px'
},
contentWidthMin() {
return '55px'
},
// 动态计算宽度
boxWidth() {
return this.getPosition(3, 'horizontal')
},
// 动态计算高度
boxHeight() {
return this.getPosition(3, 'vertical')
},
// 计算左下位置
leftBottom() {
return this.getPosition(0, 'left', 'bottom')
},
// 计算右下位置
rightBottom() {
return this.getPosition(0, 'right', 'bottom')
},
// 计算左上位置
leftTop() {
return this.getPosition(0, 'left', 'top')
},
rightTop() {
return this.getPosition(0, 'right', 'top')
},
flexDirectionStart() {
return this.getPosition(1, 'vertical', 'top')
},
flexDirectionEnd() {
return this.getPosition(1, 'vertical', 'bottom')
},
horizontalLeft() {
return this.getPosition(2, 'horizontal', 'left')
},
horizontalRight() {
return this.getPosition(2, 'horizontal', 'right')
}
},
watch: {
pattern: {
handler(val, oldVal) {
this.styles = Object.assign({}, this.styles, val)
},
deep: true
}
},
created() {
this.isShow = this.show
if (this.top === 0) {
this.fabShow = true
}
// 初始化样式
this.styles = Object.assign({}, this.styles, this.pattern)
},
methods: {
_onClick() {
this.$emit('fabClick')
if (!this.popMenu) {
return
}
this.isShow = !this.isShow
},
open() {
this.isShow = true
},
close() {
this.isShow = false
},
/**
* 按钮点击事件
*/
_onItemClick(index, item) {
this.$emit('trigger', {
index,
item
})
},
/**
* 获取 位置信息
*/
getPosition(types, paramA, paramB) {
if (types === 0) {
return this.horizontal === paramA && this.vertical === paramB
} else if (types === 1) {
return this.direction === paramA && this.vertical === paramB
} else if (types === 2) {
return this.direction === paramA && this.horizontal === paramB
} else {
return this.isShow && this.direction === paramA ? this.contentWidth : this.contentWidthMin
}
}
}
}
</script>
<style lang="scss" >
$uni-shadow-base:0 1px 5px 2px rgba($color: #000000, $alpha: 0.3) !default;
.uni-fab {
position: fixed;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
z-index: 10;
border-radius: 45px;
box-shadow: $uni-shadow-base;
}
.uni-cursor-point {
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-fab--active {
opacity: 1;
}
.uni-fab--leftBottom {
left: 15px;
bottom: 30px;
/* #ifdef H5 */
left: calc(15px + var(--window-left));
bottom: calc(30px + var(--window-bottom));
/* #endif */
// padding: 10px;
}
.uni-fab--leftTop {
left: 15px;
top: 30px;
/* #ifdef H5 */
left: calc(15px + var(--window-left));
top: calc(30px + var(--window-top));
/* #endif */
// padding: 10px;
}
.uni-fab--rightBottom {
right: 15px;
bottom: 30px;
/* #ifdef H5 */
right: calc(15px + var(--window-right));
bottom: calc(30px + var(--window-bottom));
/* #endif */
// padding: 10px;
}
.uni-fab--rightTop {
right: 15px;
top: 30px;
/* #ifdef H5 */
right: calc(15px + var(--window-right));
top: calc(30px + var(--window-top));
/* #endif */
// padding: 10px;
}
.uni-fab__circle {
position: fixed;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
width: 55px;
height: 55px;
background-color: #3c3e49;
border-radius: 45px;
z-index: 11;
// box-shadow: $uni-shadow-base;
}
.uni-fab__circle--leftBottom {
left: 15px;
bottom: 30px;
/* #ifdef H5 */
left: calc(15px + var(--window-left));
bottom: calc(30px + var(--window-bottom));
/* #endif */
}
.uni-fab__circle--leftTop {
left: 15px;
top: 30px;
/* #ifdef H5 */
left: calc(15px + var(--window-left));
top: calc(30px + var(--window-top));
/* #endif */
}
.uni-fab__circle--rightBottom {
right: 15px;
bottom: 30px;
/* #ifdef H5 */
right: calc(15px + var(--window-right));
bottom: calc(30px + var(--window-bottom));
/* #endif */
}
.uni-fab__circle--rightTop {
right: 15px;
top: 30px;
/* #ifdef H5 */
right: calc(15px + var(--window-right));
top: calc(30px + var(--window-top));
/* #endif */
}
.uni-fab__circle--left {
left: 0;
}
.uni-fab__circle--right {
right: 0;
}
.uni-fab__circle--top {
top: 0;
}
.uni-fab__circle--bottom {
bottom: 0;
}
.uni-fab__plus {
font-weight: bold;
}
// .fab-circle-v {
// position: absolute;
// width: 2px;
// height: 24px;
// left: 0;
// top: 0;
// right: 0;
// bottom: 0;
// /* #ifndef APP-NVUE */
// margin: auto;
// /* #endif */
// background-color: white;
// transform: rotate(0deg);
// transition: transform 0.3s;
// }
// .fab-circle-h {
// position: absolute;
// width: 24px;
// height: 2px;
// left: 0;
// top: 0;
// right: 0;
// bottom: 0;
// /* #ifndef APP-NVUE */
// margin: auto;
// /* #endif */
// background-color: white;
// transform: rotate(0deg);
// transition: transform 0.3s;
// }
.fab-circle-icon {
transform: rotate(0deg);
transition: transform 0.3s;
font-weight: 200;
}
.uni-fab__plus--active {
transform: rotate(135deg);
}
.uni-fab__content {
/* #ifndef APP-NVUE */
box-sizing: border-box;
display: flex;
/* #endif */
flex-direction: row;
border-radius: 55px;
overflow: hidden;
transition-property: width, height;
transition-duration: 0.2s;
width: 55px;
border-color: #DDDDDD;
border-width: 1rpx;
border-style: solid;
}
.uni-fab__content--other-platform {
border-width: 0px;
box-shadow: $uni-shadow-base;
}
.uni-fab__content--left {
justify-content: flex-start;
}
.uni-fab__content--right {
justify-content: flex-end;
}
.uni-fab__content--flexDirection {
flex-direction: column;
justify-content: flex-end;
}
.uni-fab__content--flexDirectionStart {
flex-direction: column;
justify-content: flex-start;
}
.uni-fab__content--flexDirectionEnd {
flex-direction: column;
justify-content: flex-end;
}
.uni-fab__item {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
width: 55px;
height: 55px;
opacity: 0;
transition: opacity 0.2s;
}
.uni-fab__item--active {
opacity: 1;
}
.uni-fab__item-image {
width: 20px;
height: 20px;
margin-bottom: 4px;
}
.uni-fab__item-text {
color: #FFFFFF;
font-size: 12px;
line-height: 12px;
margin-top: 2px;
}
.uni-fab__item--first {
width: 55px;
}
</style>

87
uni_modules/uni-fab/package.json
View File

@ -0,0 +1,87 @@
{
"id": "uni-fab",
"displayName": "uni-fab 悬浮按钮",
"version": "1.2.2",
"description": "悬浮按钮 fab button ，点击可展开一个图标按钮菜单。",
"keywords": [
"uni-ui",
"uniui",
"按钮",
"悬浮按钮",
"fab"
],
"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","uni-icons"],
"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"
}
}
}
}
}

9
uni_modules/uni-fab/readme.md
View File

@ -0,0 +1,9 @@
## Fab 悬浮按钮
> **组件名：uni-fab**
> 代码块： `uFab`
点击可展开一个图形按钮菜单
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-fab)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839

128
uni_modules/uni-icons/components/uni-icons/uni-icons.vue
View File

@ -4,55 +4,55 @@
<!-- #endif --> <!-- #endif -->
<!-- #ifndef APP-NVUE --> <!-- #ifndef APP-NVUE -->
<text :style="{ color: color, 'font-size': size + 'px' }" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick"></text> <text :style="{ color: color, 'font-size': size + 'px' }" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick"></text>
<!-- #endif -->
</template>
<script>
import icons from './icons.js';
// #ifdef APP-NVUE
var domModule = weex.requireModule('dom');
import iconUrl from './uniicons.ttf'
domModule.addRule('fontFace', {
'fontFamily': "uniicons",
'src': "url('"+iconUrl+"')"
});
// #endif
/**
* Icons 图标
* @description 用于展示 icons 图标
* @tutorial https://ext.dcloud.net.cn/plugin?id=28
* @property {Number} size 图标大小
* @property {String} type 图标图案，参考示例
<!-- #endif -->
</template>
<script>
import icons from './icons.js';
// #ifdef APP-NVUE
var domModule = weex.requireModule('dom');
import iconUrl from './uniicons.ttf'
domModule.addRule('fontFace', {
'fontFamily': "uniicons",
'src': "url('"+iconUrl+"')"
});
// #endif
/**
* Icons 图标
* @description 用于展示 icons 图标
* @tutorial https://ext.dcloud.net.cn/plugin?id=28
* @property {Number} size 图标大小
* @property {String} type 图标图案，参考示例
* @property {String} color 图标颜色 * @property {String} color 图标颜色
* @property {String} customPrefix 自定义图标 * @property {String} customPrefix 自定义图标
* @event {Function} click 点击 Icon 触发事件
*/
export default {
name: 'UniIcons',
emits:['click'],
props: {
type: {
type: String,
default: ''
},
color: {
type: String,
default: '#333333'
},
size: {
type: [Number, String],
default: 16
* @event {Function} click 点击 Icon 触发事件
*/
export default {
name: 'UniIcons',
emits:['click'],
props: {
type: {
type: String,
default: ''
},
color: {
type: String,
default: '#333333'
},
size: {
type: [Number, String],
default: 16
}, },
customPrefix:{ customPrefix:{
type: String, type: String,
default: '' default: ''
}
},
data() {
return {
icons: icons.glyphs
}
}
},
data() {
return {
icons: icons.glyphs
}
}, },
computed:{ computed:{
unicode(){ unicode(){
@ -62,28 +62,28 @@
} }
return '' return ''
} }
},
methods: {
_onClick() {
this.$emit('click')
}
}
}
</script>
},
methods: {
_onClick() {
this.$emit('click')
}
}
}
</script>
<style lang="scss"> <style lang="scss">
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
@import './uniicons.css';
@font-face {
font-family: uniicons;
src: url('./uniicons.ttf') format('truetype');
}
@import './uniicons.css';
@font-face {
font-family: uniicons;
src: url('./uniicons.ttf') format('truetype');
}
/* #endif */ /* #endif */
.uni-icons {
font-family: uniicons;
text-decoration: none;
text-align: center;
}
.uni-icons {
font-family: uniicons;
text-decoration: none;
text-align: center;
}
</style> </style>

20
uni_modules/uni-load-more/changelog.md
View File

@ -1,13 +1,13 @@
## 1.3.0（2021-11-19） ## 1.3.0（2021-11-19）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) - 优化 组件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) - 文档迁移，详见:[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目录规范
## 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目录规范

2
uni_modules/uni-load-more/components/uni-load-more/i18n/en.json
View File

@ -1,4 +1,4 @@
{
{
"uni-load-more.contentdown": "Pull up to show more", "uni-load-more.contentdown": "Pull up to show more",
"uni-load-more.contentrefresh": "loading...", "uni-load-more.contentrefresh": "loading...",
"uni-load-more.contentnomore": "No more data" "uni-load-more.contentnomore": "No more data"

14
uni_modules/uni-load-more/components/uni-load-more/i18n/index.js
View File

@ -1,8 +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
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
} }

2
uni_modules/uni-load-more/components/uni-load-more/i18n/zh-Hans.json
View File

@ -1,4 +1,4 @@
{
{
"uni-load-more.contentdown": "上拉显示更多", "uni-load-more.contentdown": "上拉显示更多",
"uni-load-more.contentrefresh": "正在加载...", "uni-load-more.contentrefresh": "正在加载...",
"uni-load-more.contentnomore": "没有更多数据了" "uni-load-more.contentnomore": "没有更多数据了"

2
uni_modules/uni-load-more/components/uni-load-more/i18n/zh-Hant.json
View File

@ -1,4 +1,4 @@
{
{
"uni-load-more.contentdown": "上拉顯示更多", "uni-load-more.contentdown": "上拉顯示更多",
"uni-load-more.contentrefresh": "正在加載...", "uni-load-more.contentrefresh": "正在加載...",
"uni-load-more.contentnomore": "沒有更多數據了" "uni-load-more.contentnomore": "沒有更多數據了"

788
uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue
File diff suppressed because it is too large
View File

170
uni_modules/uni-load-more/package.json
View File

@ -1,86 +1,86 @@
{
"id": "uni-load-more",
"displayName": "uni-load-more 加载更多",
"version": "1.3.0",
"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"
}
}
}
}
{
"id": "uni-load-more",
"displayName": "uni-load-more 加载更多",
"version": "1.3.0",
"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"
}
}
}
}
} }

8
uni_modules/uni-scss/changelog.md
View File

@ -1,6 +1,6 @@
## 1.0.2（2021-11-22） ## 1.0.2（2021-11-22）
- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题 - 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
## 1.0.1（2021-11-22）
- 修复 vue3中scss语法兼容问题
## 1.0.0（2021-11-18）
- init
## 1.0.1（2021-11-22）
- 修复 vue3中scss语法兼容问题
## 1.0.0（2021-11-18）
- init

2
uni_modules/uni-scss/index.scss
View File

@ -1 +1 @@
@import './styles/index.scss';
@import './styles/index.scss';

164
uni_modules/uni-scss/package.json
View File

@ -1,82 +1,82 @@
{
"id": "uni-scss",
"displayName": "uni-scss 辅助样式",
"version": "1.0.2",
"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": [
"uni-app前端模板",
"前端页面模板"
],
"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"
}
}
}
}
}
{
"id": "uni-scss",
"displayName": "uni-scss 辅助样式",
"version": "1.0.2",
"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": [
"uni-app前端模板",
"前端页面模板"
],
"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"
}
}
}
}
}

14
uni_modules/uni-scss/styles/index.scss
View File

@ -1,7 +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';
@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';

4
uni_modules/uni-scss/styles/setting/_border.scss
View File

@ -1,3 +1,3 @@
.uni-border {
border: 1px $uni-border-1 solid;
.uni-border {
border: 1px $uni-border-1 solid;
} }

132
uni_modules/uni-scss/styles/setting/_color.scss
View File

@ -1,66 +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;
}
// 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;
}

110
uni_modules/uni-scss/styles/setting/_radius.scss
View File

@ -1,55 +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)
}
}
}
}
@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)
}
}
}
}

110
uni_modules/uni-scss/styles/setting/_space.scss
View File

@ -1,56 +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);
}
}
}
@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);
}
}
}
} }

334
uni_modules/uni-scss/styles/setting/_styles.scss
View File

@ -1,167 +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 */
/* #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 */

48
uni_modules/uni-scss/styles/setting/_text.scss
View File

@ -1,24 +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 */
}
@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 */
}

286
uni_modules/uni-scss/styles/setting/_variables.scss
View File

@ -1,146 +1,146 @@
// @use "sass:math";
@import '../tools/functions.scss';
// 间距基础倍数
$uni-space-root: 2 !default;
// 边框半径默认值
$uni-radius-root:5px !default;
$uni-radius: () !default;
// @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(
(
$uni-radius: map-deep-merge(
(
0: 0, 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
// 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;
// 字体家族
$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;

38
uni_modules/uni-scss/styles/tools/functions.scss
View File

@ -1,19 +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;
};
// 合并 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;
};

62
uni_modules/uni-scss/theme.scss
View File

@ -1,31 +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);
// 间距基础倍数
$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);

124
uni_modules/uni-scss/variables.scss
View File

@ -1,62 +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);
@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);
Write Preview
Loading…
Cancel
Save