parent
d7f4aae565
commit
a289f94297
@ -0,0 +1,112 @@ |
|||||||
|
<template> |
||||||
|
<view class="all-container pd-main backcor6 font15"> |
||||||
|
<view class=" width100 mart10"> |
||||||
|
<button class="btns " @click.stop="clickToAdd()">新增</button> |
||||||
|
</view> |
||||||
|
<view class="mart20 backcorfff"> |
||||||
|
<view class="dis-flex height40 bor-botm1"> |
||||||
|
<view class="flex-1 fotct fontwig6 " ></view> |
||||||
|
<view class="flex-1 fotct fontwig6">名称</view> |
||||||
|
<view class="flex-1 fotct fontwig6">价格</view> |
||||||
|
<!-- <view class="flex-1 fotct fontwig6">规格</view> --> |
||||||
|
<view class="flex-1 fotct fontwig6">有效期</view> |
||||||
|
<view class="flex-1 fotct fontwig6">操作</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="dis-flex bor-botm1 paddtop5 paddbotm5 " v-for="(item,index) in storeGroupList" :key="index"> |
||||||
|
<view class="flex-1 fotct"> |
||||||
|
<image :src="imgUrl+item.img" @click.stop="previewImage(imgUrl+item.img)" mode="aspectFit" class="width100 height60 verc"></image> |
||||||
|
</view> |
||||||
|
<view class="flex-1 fotct text1">{{item.name}}</view> |
||||||
|
<view class="flex-1 fotct text1">{{item.price}}</view> |
||||||
|
|
||||||
|
<view class="flex-1 fotct text1">{{item.validity}}</view> |
||||||
|
<view class="flex-1 fotct fcor41c" @click.stop="clickToEdit(item)">编辑</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { |
||||||
|
getStoreGroupList |
||||||
|
} from '@/Utils/groupBuying.js'; |
||||||
|
const app = getApp(); |
||||||
|
export default { |
||||||
|
data(){ |
||||||
|
return{ |
||||||
|
imgUrl: app.globalData.imgUrl, //图片访问地址 |
||||||
|
storeId:'',//门店id |
||||||
|
storeGroupList:[],//门店团购列表 |
||||||
|
} |
||||||
|
}, |
||||||
|
onLoad(options){ |
||||||
|
if(options.storeId){ |
||||||
|
this.storeId = options.storeId; |
||||||
|
this.getStoreGroupList() |
||||||
|
} |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
clickToAdd(){ |
||||||
|
let that = this; |
||||||
|
uni.navigateTo({ |
||||||
|
url:"./groupProductAdd?status=1&storeId="+that.storeId |
||||||
|
}) |
||||||
|
}, |
||||||
|
clickToEdit(item){ |
||||||
|
let that = this; |
||||||
|
uni.navigateTo({ |
||||||
|
url:"./groupProductAdd?status=2&id="+item.id+"&storeId="+that.storeId |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 根据门店id 查询门店团购内容 |
||||||
|
getStoreGroupList(){ |
||||||
|
let params={ |
||||||
|
storeId:this.storeId |
||||||
|
} |
||||||
|
uni.showLoading({ |
||||||
|
title:"加载中", |
||||||
|
mask:true |
||||||
|
}) |
||||||
|
getStoreGroupList(params).then(res=>{ |
||||||
|
uni.hideLoading(); |
||||||
|
if (res.return_code == '000000') { |
||||||
|
if(res.return_data.length>0){ |
||||||
|
this.storeGroupList = res.return_data |
||||||
|
} |
||||||
|
}else{ |
||||||
|
uni.showToast({ |
||||||
|
title: res.return_msg, |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 预览 |
||||||
|
previewImage(img){ |
||||||
|
uni.previewImage({ |
||||||
|
current: 0, |
||||||
|
indicator: "number", |
||||||
|
loop: "true", |
||||||
|
urls:[img] |
||||||
|
}) |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.btns { |
||||||
|
width: 21%; |
||||||
|
height: 35px; |
||||||
|
line-height: 35px; |
||||||
|
background-color: #0083f5; |
||||||
|
color: #FFFFFF; |
||||||
|
font-weight: bold; |
||||||
|
font-size: 12px; |
||||||
|
padding: 0px; |
||||||
|
margin: 0 0 0 auto; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,826 @@ |
|||||||
|
<template> |
||||||
|
<view> |
||||||
|
<!-- 进度 --> |
||||||
|
<view class="width100 height90 backcorfff"> |
||||||
|
<evan-steps :active="merchart-1" direction="horizontal" class="paddtop10"> |
||||||
|
<evan-step title="基本信息"></evan-step> |
||||||
|
<evan-step title="产品详情"></evan-step> |
||||||
|
<evan-step title="规则内容"></evan-step> |
||||||
|
</evan-steps> |
||||||
|
</view> |
||||||
|
<!-- 审核状态回馈 --> |
||||||
|
<view class="width100 line10 "></view> |
||||||
|
<view class=" font18 " style="padding-bottom: 60px;"> |
||||||
|
<!-- 基本信息 --> |
||||||
|
<view class="form-gorup backcorfff font15" v-if="merchart==1"> |
||||||
|
<view class="dis-flex marb10 bor-botm1"> |
||||||
|
<view class="group-title marRight10 fontwig6 padleft15 paddtright10 flex-s0">团购名称: |
||||||
|
</view> |
||||||
|
<input type="text" name="name" v-model.trim="productData.name" placeholder-class="corf6 font15" |
||||||
|
class=" flex-1 " placeholder="请输入团购名称"> |
||||||
|
</view> |
||||||
|
<view class="dis-flex marb10 bor-botm1"> |
||||||
|
<view class="group-title marRight10 fontwig6 padleft15 paddtright10 flex-s0">团购价格: |
||||||
|
</view> |
||||||
|
<input type="digit" name="name" v-model.trim="productData.price" placeholder-class="corf6 font15" |
||||||
|
class=" flex-1 " placeholder="请输入团购价格(保留两位小数)"> |
||||||
|
</view> |
||||||
|
<view class="dis-flex marb10 bor-botm1"> |
||||||
|
<view class="group-title marRight10 fontwig6 padleft15 paddtright10 flex-s0">使用时间: |
||||||
|
</view> |
||||||
|
<input type="text" name="name" v-model.trim="productData.serviceTime" |
||||||
|
placeholder-class="corf6 font15" class=" flex-1 " placeholder="请输入使用时间"> |
||||||
|
</view> |
||||||
|
<view class="dis-flex marb10 bor-botm1"> |
||||||
|
<view class="group-title marRight10 fontwig6 padleft15 paddtright10 flex-s0">有效期: |
||||||
|
</view> |
||||||
|
<input type="text" name="name" v-model.trim="productData.validity" placeholder-class="corf6 font15" |
||||||
|
class=" flex-1 " placeholder="有效期"> |
||||||
|
</view> |
||||||
|
<view class="dis-flex marb10 bor-botm1"> |
||||||
|
<view class="group-title marRight10 fontwig6 padleft15 paddtright10 flex-s0 self-top">团购限制: |
||||||
|
</view> |
||||||
|
<textarea :cursor-spacing="50" class="border-r flex-1 backcor6 paading10 marb10" :focus="false" |
||||||
|
:disable-default-padding="false" v-model.trim="productData.astrict" placeholder="请输入限制" |
||||||
|
placeholder-class="font15" :maxlength="999"></textarea> |
||||||
|
</view> |
||||||
|
<view class="dis-flex marb10 bor-botm1"> |
||||||
|
<view class="group-title marRight10 fontwig6 padleft15 paddtright10 flex-s0 self-top">团购图片: |
||||||
|
</view> |
||||||
|
<view class="imageUploadContainer flex-1"> |
||||||
|
<view class="imageUploadList"> |
||||||
|
<view class="imageItem" v-for="(item,index) in imgValue" :key="index"> |
||||||
|
<image :src="imgUrl+item" mode="aspectFill" @click="previewImage(imgUrl+item)" |
||||||
|
:data-index="index"></image> |
||||||
|
<view v-if="isShowDel" class="imageDel" @click="deleteImage(item)">x</view> |
||||||
|
</view> |
||||||
|
<view v-if="isShowAdd" class="imageUpload" @click="upload">+</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
|
||||||
|
<!-- 产品详情 --> |
||||||
|
<view class="form-gorup backcorfff font15" v-if="merchart==2"> |
||||||
|
<view class=" width100 mart10"> |
||||||
|
<button class="btns " @click.stop="clickToAdd()">新增</button> |
||||||
|
</view> |
||||||
|
<uni-collapse accordion> |
||||||
|
<uni-collapse-item v-for="(item,index) in productDetailList" :key="index" :title="item.name"> |
||||||
|
<view class="content dis-flex flex-sp" v-for="(item2,index2) in item.list" :key="index2"> |
||||||
|
<view class="text">{{item2.productName}}</view> |
||||||
|
<view class="text">{{item2.count}}份</view> |
||||||
|
</view> |
||||||
|
</uni-collapse-item> |
||||||
|
</uni-collapse> |
||||||
|
</view> |
||||||
|
|
||||||
|
<!-- 规则内容 --> |
||||||
|
<view class="form-gorup backcorfff font15" v-if="merchart==3"> |
||||||
|
<view class=" marb10 "> |
||||||
|
<view class="group-title marRight10 fontwig6 paddtright10 flex-s0 self-top">规则内容: |
||||||
|
</view> |
||||||
|
<textarea :cursor-spacing="50" class="border-r width100 backcor6 marb10 rule" :focus="false" |
||||||
|
:disable-default-padding="false" v-model.trim="ruleData.content" placeholder="请输入规则内容" |
||||||
|
placeholder-class="font15" :maxlength="999"></textarea> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
|
||||||
|
<!-- 底部按钮 --> |
||||||
|
<view class="footer-btn"> |
||||||
|
<button class="backcor89 fcorfff" @click="clickToSave" v-if="merchart!=2">保存</button> |
||||||
|
<button v-if="(status==2&&merchart<3)||merchart==2" class="backcor89 fcorfff" @click="merchart++">下一步</button> |
||||||
|
|
||||||
|
</view> |
||||||
|
|
||||||
|
<!-- 新增 --> |
||||||
|
<wybPopup ref="popup" @hide="hide()" zIndex="999" type="bottom" height="550" width="500" :scrollY="true" |
||||||
|
radius="6" :showCloseIcon="true"> |
||||||
|
<view class="pop-contain pd-main"> |
||||||
|
<view class="pop-title fontwig6"><text>添加</text></view> |
||||||
|
</view> |
||||||
|
<view class="dis-flex bor-botmb paddbotm10 height40 mart10 backcorfff" |
||||||
|
style="position: sticky;top: 50px; z-index: 999;" @click.stop> |
||||||
|
<view class="group-title marRight10 fontwig6 padleft15 paddtright10 flex-s0">类目名称: |
||||||
|
</view> |
||||||
|
<input type="text" name="name" v-model.trim="productDetail.name" placeholder-class="corf6 font15" |
||||||
|
class="fcor089 flex-1 pd-main " placeholder="请输入类目名称"> |
||||||
|
</view> |
||||||
|
|
||||||
|
<!-- 门店产品列表 --> |
||||||
|
<view class=" " v-if="productList.length>0" style="padding-bottom: 60px;"> |
||||||
|
<view class="dis-flex height40 "> |
||||||
|
<view class="checkFlex fotct fontwig6"></view> |
||||||
|
<view class="flex-1 fotct fontwig6">图片</view> |
||||||
|
<view class="flex-1 fotct fontwig6">名称</view> |
||||||
|
<view class="flex-1 fotct fontwig6">价格</view> |
||||||
|
<view class="flex-1 fotct fontwig6">数量</view> |
||||||
|
</view> |
||||||
|
<checkbox-group @change="checkClick"> |
||||||
|
<view class="dis-flex paddtop5 paddbotm5 " v-for="(item,index) in productList" :key="index"> |
||||||
|
<view class="checkFlex fotct"> |
||||||
|
<checkbox @click.stop class=" checkContainer" color="#089bf5" :value="String(item.id)" |
||||||
|
:checked="item.checkTag" /> |
||||||
|
</view> |
||||||
|
<view class="flex-1 fotct"> |
||||||
|
<image :src="imgUrl+item.img" @click.stop="previewImage(imgUrl+item.img)" |
||||||
|
mode="aspectFit" class="width100 height60 verc"></image> |
||||||
|
</view> |
||||||
|
<view class="flex-1 fotct">{{item.name}}</view> |
||||||
|
<view class="flex-1 fotct ">{{item.price}}</view> |
||||||
|
<view class="flex-1 fotct border-d1 "><input type="number" v-model.trim="item.countTag"> |
||||||
|
</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
</checkbox-group> |
||||||
|
<view class="footer-btn"> |
||||||
|
<button class="backcor89 fcorfff" @click="saveProductDetail">保存</button> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</wybPopup> |
||||||
|
|
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import EvanStep from '@/components/evan-steps/evan-step.vue'; |
||||||
|
|
||||||
|
import wybPopup from '@/components/wyb-popup/wyb-popup.vue' |
||||||
|
import { |
||||||
|
insertGroupContent, |
||||||
|
editGroupContent, |
||||||
|
getStoreProductByList, |
||||||
|
editGroupContentDetail, |
||||||
|
getStoreGroupDetailList, |
||||||
|
insertGroupServeRule, |
||||||
|
editGroupServeRule, |
||||||
|
findGroupServeRuleByGroup, |
||||||
|
} from '@/Utils/groupBuying.js'; |
||||||
|
const app = getApp(); |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
reqUrl: app.globalData.url, //请求地址 |
||||||
|
imgUrl: app.globalData.imgUrl, //图片访问地址 |
||||||
|
status: '', //1.新增 2.编辑 |
||||||
|
storeId: '', //门店id |
||||||
|
merchart: 1, //当前第几步操作 |
||||||
|
productData: { //基本信息 |
||||||
|
name: '', //名称 |
||||||
|
price: '', //价格 |
||||||
|
astrict: '', //限制 |
||||||
|
storeId: '', //门店id |
||||||
|
img: '', //图片 |
||||||
|
serviceTime: '', //使用时间 |
||||||
|
validity: '', //有效期 |
||||||
|
}, |
||||||
|
imgValue: [], |
||||||
|
|
||||||
|
/* 产品详情 */ |
||||||
|
groupId: '', //团购编码 |
||||||
|
productDetail: { //产品详情 |
||||||
|
groupId: '', //团购编码 |
||||||
|
name: '', //类目名称 |
||||||
|
details: [], //{} //产品编码，产品数量 |
||||||
|
}, |
||||||
|
productDetailList:[],//产品详情列表 |
||||||
|
productList: [], //门店产品列表 |
||||||
|
productSelectIdList: [], //门店产品列表选中id的列表 |
||||||
|
/* 规则内容 */ |
||||||
|
ruleData:{ |
||||||
|
groupId:'', |
||||||
|
content:'', |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
isShowDel() { |
||||||
|
return true |
||||||
|
}, |
||||||
|
isShowAdd() { |
||||||
|
/* if(this.imgValue.length>=1){ |
||||||
|
return false |
||||||
|
}else{ |
||||||
|
return true |
||||||
|
} */ |
||||||
|
return true |
||||||
|
}, |
||||||
|
|
||||||
|
}, |
||||||
|
onLoad(option) { |
||||||
|
|
||||||
|
this.storeId = option.storeId; |
||||||
|
this.productData.storeId = option.storeId; |
||||||
|
this.status = option.status; |
||||||
|
if (this.status == 1) { |
||||||
|
uni.setNavigationBarTitle({ |
||||||
|
title: "添加团购产品" |
||||||
|
}) |
||||||
|
} else { |
||||||
|
uni.setNavigationBarTitle({ |
||||||
|
title: "编辑团购产品" |
||||||
|
}) |
||||||
|
this.getStoreGroupDetailList();//查询产品详情 |
||||||
|
this.findGroupServeRuleByGroup();//查询产品规则 |
||||||
|
} |
||||||
|
if (option.id) { |
||||||
|
this.productData.id = option.id; |
||||||
|
this.ruleData.id = option.id; |
||||||
|
// this.getStoreProductById() |
||||||
|
} |
||||||
|
console.log(option, "=======") |
||||||
|
}, |
||||||
|
components: { |
||||||
|
EvanStep, |
||||||
|
wybPopup |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
validate() { |
||||||
|
var reg = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^0$)|(^\d\.\d{1,2}$)/; |
||||||
|
if (!reg.test(this.productData.price) || this.productData.price == 0) { |
||||||
|
uni.showToast({ |
||||||
|
title: "请输入正确的金额格式", |
||||||
|
icon: "none" |
||||||
|
}) |
||||||
|
this.productData.price = ""; |
||||||
|
return false |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
if (!this.productData.name || !this.productData.price || !this.productData.astrict || !this.productData |
||||||
|
.serviceTime || !this.productData.validity) { |
||||||
|
uni.showToast({ |
||||||
|
title: "请填写完整哦!", |
||||||
|
icon: "none" |
||||||
|
}) |
||||||
|
return false |
||||||
|
} |
||||||
|
if (this.imgValue.length == 0) { |
||||||
|
uni.showToast({ |
||||||
|
title: "请选择图片上传", |
||||||
|
icon: "none" |
||||||
|
}) |
||||||
|
return false |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return true |
||||||
|
}, |
||||||
|
clickToSave() { |
||||||
|
if (this.merchart == 1) { |
||||||
|
/* 第一步:团购基本内容*/ |
||||||
|
if (!this.validate()) return; //校验是否有空 |
||||||
|
this.productData.img = this.imgValue.join(""); |
||||||
|
if (this.status == 1) { //1.新增 2.编辑 |
||||||
|
this.insertGroupContent(); |
||||||
|
return |
||||||
|
} |
||||||
|
if (this.status == 2) { |
||||||
|
this.editGroupContent(); |
||||||
|
return |
||||||
|
} |
||||||
|
} |
||||||
|
if(this.merchart == 2){} |
||||||
|
|
||||||
|
if(this.merchart==3){/* 第三步规则内容 */ |
||||||
|
if(!this.ruleData.content){ |
||||||
|
uni.showToast({ |
||||||
|
icon:'none', |
||||||
|
title:'请输入规则内容' |
||||||
|
}) |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
if (this.status == 1) { //1.新增 2.编辑 |
||||||
|
this.insertGroupServeRule(); |
||||||
|
return |
||||||
|
} |
||||||
|
if (this.status == 2) { |
||||||
|
this.editGroupServeRule(); |
||||||
|
return |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
/* 新增配置团购基本内容 */ |
||||||
|
insertGroupContent() { |
||||||
|
insertGroupContent(this.productData).then(res => { |
||||||
|
let title; |
||||||
|
if (res.return_code == '000000') { |
||||||
|
this.groupId = res.return_data.id; |
||||||
|
this.productDetail.groupId = res.return_data.id; |
||||||
|
this.ruleData.groupId = res.return_data.id; |
||||||
|
this.merchart = 2; |
||||||
|
} else { |
||||||
|
uni.showToast({ |
||||||
|
title: res.return_msg, |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
/* 修改配置团购基本内容*/ |
||||||
|
editGroupContent() { |
||||||
|
editGroupContent(this.productData).then(res => { |
||||||
|
let title; |
||||||
|
if (res.return_code == '000000') { |
||||||
|
title = res.return_data; |
||||||
|
} else { |
||||||
|
title = res.return_msg; |
||||||
|
} |
||||||
|
uni.showToast({ |
||||||
|
title: title, |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
this.merchart = 2; |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
// 删除图片 |
||||||
|
deleteImage(data) { |
||||||
|
let arr = this.imgValue.filter((item) => item != data); |
||||||
|
this.imgValue = arr; |
||||||
|
}, |
||||||
|
// 预览 |
||||||
|
previewImage(img) { |
||||||
|
uni.previewImage({ |
||||||
|
current: 0, |
||||||
|
indicator: "number", |
||||||
|
loop: "true", |
||||||
|
urls: [img] |
||||||
|
}) |
||||||
|
}, |
||||||
|
//上传图片 |
||||||
|
upload() { |
||||||
|
let that = this; |
||||||
|
uni.chooseImage({ |
||||||
|
count: 1, |
||||||
|
sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有 |
||||||
|
sourceType: ['camera', 'album'], |
||||||
|
success: function(res) { |
||||||
|
const tempFilePaths = res.tempFilePaths; |
||||||
|
that.uploadFile(tempFilePaths[0]); |
||||||
|
}, |
||||||
|
error: function(e) { |
||||||
|
console.log(e); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
//上传 |
||||||
|
uploadFile(imgURL) { |
||||||
|
const that = this; |
||||||
|
uni.showLoading({ |
||||||
|
title:"加载中...", |
||||||
|
mask:true, |
||||||
|
}) |
||||||
|
uni.uploadFile({ |
||||||
|
url: that.reqUrl + '/fileUpload/uploadfile', |
||||||
|
filePath: imgURL, |
||||||
|
header: { |
||||||
|
"Authorization": app.globalData.token |
||||||
|
}, |
||||||
|
name: 'files', |
||||||
|
success: function(uploadFileRes) { |
||||||
|
uni.hideLoading() |
||||||
|
that.getImgSignedUrl(JSON.parse(uploadFileRes.data) |
||||||
|
.return_data); |
||||||
|
}, |
||||||
|
fail:function(err){ |
||||||
|
|
||||||
|
uni.hideLoading() |
||||||
|
uni.showToast({ |
||||||
|
title:err, |
||||||
|
icon:'none' |
||||||
|
}) |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
//查看临时图片路径 |
||||||
|
getImgSignedUrl(item1) { |
||||||
|
this.imgValue.push(item1); |
||||||
|
console.log(this.imgValue, "this.imgValue") |
||||||
|
}, |
||||||
|
// 弹窗关闭 |
||||||
|
hide() { |
||||||
|
|
||||||
|
}, |
||||||
|
/* 查询产品详情列表 */ |
||||||
|
getStoreGroupDetailList(){ |
||||||
|
let params={ |
||||||
|
groupId:this.groupId |
||||||
|
} |
||||||
|
uni.showLoading({ |
||||||
|
title:"加载中" |
||||||
|
}) |
||||||
|
getStoreGroupDetailList(params).then(res=>{ |
||||||
|
uni.hideLoading(); |
||||||
|
if (res.return_code == '000000') { |
||||||
|
if(res.return_data.length>0){ |
||||||
|
this.productDetailList = res.return_data |
||||||
|
} |
||||||
|
}else{ |
||||||
|
uni.showToast({ |
||||||
|
title: res.return_msg, |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
}) |
||||||
|
}, |
||||||
|
//新增产品详情 |
||||||
|
clickToAdd() { |
||||||
|
this.getStoreProductByList(); |
||||||
|
// uni.navigateTo({ |
||||||
|
// url:"./groupProductDetailAdd" |
||||||
|
// }) |
||||||
|
}, |
||||||
|
//获取门店产品列表 |
||||||
|
getStoreProductByList() { |
||||||
|
let params = { |
||||||
|
storeId: this.storeId, |
||||||
|
} |
||||||
|
uni.showLoading({ |
||||||
|
title: "加载中", |
||||||
|
mask: true, |
||||||
|
}) |
||||||
|
this.productList = []; |
||||||
|
getStoreProductByList(params).then(res => { |
||||||
|
uni.hideLoading(); |
||||||
|
if (res.return_code == '000000') { |
||||||
|
this.productList = res.return_data; |
||||||
|
this.productList.forEach(item => { |
||||||
|
item.countTag = 1; |
||||||
|
item.checkTag = false; |
||||||
|
}) |
||||||
|
this.$refs.popup.show(); |
||||||
|
} else { |
||||||
|
uni.showToast({ |
||||||
|
title: res.return_msg, |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
/* 产品列表复选款 */ |
||||||
|
checkClick(e) { |
||||||
|
this.productSelectIdList = e.detail.value; |
||||||
|
console.log(this.productSelectIdList, "this.productSelectIdList") |
||||||
|
}, |
||||||
|
/* 保存产品详情 */ |
||||||
|
saveProductDetail() { |
||||||
|
if (!this.validateProductDetail()) return |
||||||
|
let arr = []; |
||||||
|
this.productSelectIdList.map(item => { |
||||||
|
this.productList.map(item2 => { |
||||||
|
if (item2.id == item) { |
||||||
|
arr.push(item2) |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
let flag = arr.every(item => item.countTag >= 1); |
||||||
|
if (!flag) { |
||||||
|
uni.showToast({ |
||||||
|
icon: 'none', |
||||||
|
title: "勾选产品的产品数量不能小于1" |
||||||
|
}) |
||||||
|
return false |
||||||
|
} |
||||||
|
|
||||||
|
this.productDetail.details = arr.map(item => { |
||||||
|
return { |
||||||
|
productId: item.id, |
||||||
|
count: item.countTag |
||||||
|
} |
||||||
|
}); |
||||||
|
this.editGroupContentDetail(this.productDetail) |
||||||
|
|
||||||
|
}, |
||||||
|
validateProductDetail() { |
||||||
|
if (!this.productDetail.name) { |
||||||
|
uni.showToast({ |
||||||
|
icon: 'none', |
||||||
|
title: "请输入类目名称!" |
||||||
|
}) |
||||||
|
return false |
||||||
|
} |
||||||
|
if (this.productSelectIdList.length == 0) { |
||||||
|
uni.showToast({ |
||||||
|
icon: 'none', |
||||||
|
title: "请勾选产品!" |
||||||
|
}) |
||||||
|
return false |
||||||
|
} |
||||||
|
|
||||||
|
return true |
||||||
|
}, |
||||||
|
editGroupContentDetail(params) { |
||||||
|
uni.showLoading({ |
||||||
|
title: "保存中..." |
||||||
|
}) |
||||||
|
editGroupContentDetail(params).then(res => { |
||||||
|
uni.hideLoading(); |
||||||
|
if (res.return_code == '000000') { |
||||||
|
this.$refs.popup.close(); |
||||||
|
this.getStoreGroupDetailList(); |
||||||
|
} else { |
||||||
|
uni.showToast({ |
||||||
|
title: res.return_msg, |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
/* 团购规则 */ |
||||||
|
/* 新增团购规则 */ |
||||||
|
insertGroupServeRule(){ |
||||||
|
insertGroupServeRule(this.ruleData).then(res=>{ |
||||||
|
let title ; |
||||||
|
if (res.return_code == '000000') { |
||||||
|
title = res.return_data; |
||||||
|
setTimeout(()=>{ |
||||||
|
uni.navigateBack(); |
||||||
|
},1000) |
||||||
|
}else{ |
||||||
|
title = res.return_msg; |
||||||
|
} |
||||||
|
uni.showToast({ |
||||||
|
title: title, |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
|
||||||
|
}) |
||||||
|
|
||||||
|
}, |
||||||
|
// 编辑团购规则 |
||||||
|
editGroupServeRule(){ |
||||||
|
editGroupServeRule(this.ruleData).then(res=>{ |
||||||
|
let title ; |
||||||
|
if (res.return_code == '000000') { |
||||||
|
title = res.return_data; |
||||||
|
setTimeout(()=>{ |
||||||
|
uni.navigateBack(); |
||||||
|
},1000) |
||||||
|
}else{ |
||||||
|
title = res.return_msg; |
||||||
|
} |
||||||
|
uni.showToast({ |
||||||
|
title: title, |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
|
||||||
|
}) |
||||||
|
}, |
||||||
|
//根据团购id查询门店规则内容 |
||||||
|
findGroupServeRuleByGroup(){ |
||||||
|
let params={ |
||||||
|
groupId:this.groupId |
||||||
|
} |
||||||
|
uni.showLoading({ |
||||||
|
title:"加载中" |
||||||
|
}) |
||||||
|
findGroupServeRuleByGroup(params).then(res=>{ |
||||||
|
uni.hideLoading(); |
||||||
|
if (res.return_code == '000000') { |
||||||
|
console.log(res.return_data,"res.return_data") |
||||||
|
}else{ |
||||||
|
uni.showToast({ |
||||||
|
title: res.return_msg, |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.btns { |
||||||
|
width: 21%; |
||||||
|
height: 35px; |
||||||
|
line-height: 35px; |
||||||
|
background-color: #0083f5; |
||||||
|
color: #FFFFFF; |
||||||
|
font-weight: bold; |
||||||
|
font-size: 12px; |
||||||
|
padding: 0px; |
||||||
|
margin: 0 0 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
/* 表单 */ |
||||||
|
.form-gorup { |
||||||
|
padding: 20rpx; |
||||||
|
margin-bottom: 20rpx; |
||||||
|
border-radius: 20rpx; |
||||||
|
|
||||||
|
input { |
||||||
|
height: 40px; |
||||||
|
line-height: 40px; |
||||||
|
border-radius: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.form-gorup-title { |
||||||
|
padding: 20rpx 0; |
||||||
|
margin-bottom: 5rpx; |
||||||
|
font-weight: 500; |
||||||
|
|
||||||
|
width: 74px; |
||||||
|
white-space: nowrap; |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
|
||||||
|
/* 图片 */ |
||||||
|
.imageUploadContainer { |
||||||
|
padding: 10upx 5upx; |
||||||
|
margin: 10upx 5upx; |
||||||
|
} |
||||||
|
|
||||||
|
.name { |
||||||
|
text-align: center; |
||||||
|
margin-top: -30upx; |
||||||
|
} |
||||||
|
|
||||||
|
.dragging { |
||||||
|
transform: scale(1.2) |
||||||
|
} |
||||||
|
|
||||||
|
.imageUploadList { |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
} |
||||||
|
|
||||||
|
.imageItem, |
||||||
|
.imageUpload { |
||||||
|
width: 200upx; |
||||||
|
height: 200upx; |
||||||
|
margin: 30upx 15upx 30upx; |
||||||
|
} |
||||||
|
|
||||||
|
.imageDel { |
||||||
|
position: relative; |
||||||
|
left: 180upx; |
||||||
|
bottom: 225upx; |
||||||
|
background-color: rgba(0, 0, 0, 0.5); |
||||||
|
width: 36upx; |
||||||
|
text-align: center; |
||||||
|
line-height: 35upx; |
||||||
|
border-radius: 17upx; |
||||||
|
color: white; |
||||||
|
font-size: 30upx; |
||||||
|
padding-bottom: 2upx; |
||||||
|
} |
||||||
|
|
||||||
|
.imageItem image, |
||||||
|
.moveImage { |
||||||
|
width: 200upx; |
||||||
|
height: 200upx; |
||||||
|
border-radius: 8upx; |
||||||
|
} |
||||||
|
|
||||||
|
.imageUpload { |
||||||
|
line-height: 200upx; |
||||||
|
text-align: center; |
||||||
|
font-size: 150upx; |
||||||
|
color: #D9D9D9; |
||||||
|
border: 1px solid #D9D9D9; |
||||||
|
border-radius: 8upx; |
||||||
|
} |
||||||
|
|
||||||
|
.moveImage { |
||||||
|
position: absolute; |
||||||
|
} |
||||||
|
|
||||||
|
.uni-list { |
||||||
|
width: 260px; |
||||||
|
} |
||||||
|
|
||||||
|
.popup_foot { |
||||||
|
display: flex; |
||||||
|
border-top: 1px #F9F9F9 solid; |
||||||
|
line-height: 40px; |
||||||
|
height: 40px; |
||||||
|
margin-top: 30px; |
||||||
|
} |
||||||
|
|
||||||
|
.build_01 { |
||||||
|
line-height: 35px; |
||||||
|
} |
||||||
|
|
||||||
|
.build_01 input { |
||||||
|
background: #ededed; |
||||||
|
} |
||||||
|
|
||||||
|
.popup_foot_l { |
||||||
|
width: 50%; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.popup_foot_r { |
||||||
|
width: 50%; |
||||||
|
text-align: center; |
||||||
|
border-left: 1px #F9F9F9 solid; |
||||||
|
color: #5095D3; |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
/* 手风琴 */ |
||||||
|
.content { |
||||||
|
padding: 15px; |
||||||
|
background-color: #f4f4f4; |
||||||
|
} |
||||||
|
|
||||||
|
.text { |
||||||
|
font-size: 14px; |
||||||
|
color: #666; |
||||||
|
line-height: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
/* 弹窗 */ |
||||||
|
.pop-contain { |
||||||
|
text-align: center; |
||||||
|
padding-top: 50px; |
||||||
|
background-color: #ffffff; |
||||||
|
|
||||||
|
.pop-title { |
||||||
|
text-align: center; |
||||||
|
height: 50px; |
||||||
|
line-height: 50px; |
||||||
|
font-size: 18px; |
||||||
|
position: fixed; |
||||||
|
z-index: 10; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
background: #ffffff; |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.border-d1 { |
||||||
|
/* #089bf5 */ |
||||||
|
border: 1px solid #f4f4f4; |
||||||
|
margin: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
//checkbox |
||||||
|
.checkContainer { |
||||||
|
width: 40px; |
||||||
|
} |
||||||
|
|
||||||
|
.checkFlex { |
||||||
|
flex: 0.7; |
||||||
|
} |
||||||
|
|
||||||
|
.bor-botmb { |
||||||
|
border-bottom: 1px solid #089bf5; |
||||||
|
} |
||||||
|
|
||||||
|
/* 规则内容 */ |
||||||
|
.rule{ |
||||||
|
margin-top: 10px; |
||||||
|
padding:10px; |
||||||
|
min-height: 400px; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
/* 底部按钮 */ |
||||||
|
.footer-btn { |
||||||
|
position: fixed; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
button { |
||||||
|
margin: 0 20px; |
||||||
|
border-radius: 25px; |
||||||
|
flex: 1; |
||||||
|
height: 50px; |
||||||
|
line-height: 50px; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,36 @@ |
|||||||
|
## 1.4.3（2022-01-25） |
||||||
|
- 修复 初始化的时候 ，open 属性失效的bug |
||||||
|
## 1.4.2（2022-01-21） |
||||||
|
- 修复 微信小程序resize后组件收起的bug |
||||||
|
## 1.4.1（2021-11-22） |
||||||
|
- 修复 vue3中个别scss变量无法找到的问题 |
||||||
|
## 1.4.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-collapse](https://uniapp.dcloud.io/component/uniui/uni-collapse) |
||||||
|
## 1.3.3（2021-08-17） |
||||||
|
- 优化 show-arrow 属性默认为true |
||||||
|
## 1.3.2（2021-08-17） |
||||||
|
- 新增 show-arrow 属性，控制是否显示右侧箭头 |
||||||
|
## 1.3.1（2021-07-30） |
||||||
|
- 优化 vue3下小程序事件警告的问题 |
||||||
|
## 1.3.0（2021-07-30） |
||||||
|
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) |
||||||
|
## 1.2.2（2021-07-21） |
||||||
|
- 修复 由1.2.0版本引起的 change 事件返回 undefined 的Bug |
||||||
|
## 1.2.1（2021-07-21） |
||||||
|
- 优化 组件示例 |
||||||
|
## 1.2.0（2021-07-21） |
||||||
|
- 新增 组件折叠动画 |
||||||
|
- 新增 value\v-model 属性 ，动态修改面板折叠状态 |
||||||
|
- 新增 title 插槽 ，可定义面板标题 |
||||||
|
- 新增 border 属性 ，显示隐藏面板内容分隔线 |
||||||
|
- 新增 title-border 属性 ，显示隐藏面板标题分隔线 |
||||||
|
- 修复 resize 方法失效的Bug |
||||||
|
- 修复 change 事件返回参数不正确的Bug |
||||||
|
- 优化 H5、App 平台自动更具内容更新高度，无需调用 reszie() 方法 |
||||||
|
## 1.1.7（2021-05-12） |
||||||
|
- 新增 组件示例地址 |
||||||
|
## 1.1.6（2021-02-05） |
||||||
|
- 优化 组件引用关系，通过uni_modules引用组件 |
||||||
|
## 1.1.5（2021-02-05） |
||||||
|
- 调整为uni_modules目录规范 |
||||||
@ -0,0 +1,403 @@ |
|||||||
|
<template> |
||||||
|
<view class="uni-collapse-item"> |
||||||
|
<!-- onClick(!isOpen) --> |
||||||
|
<view @click="onClick(!isOpen)" class="uni-collapse-item__title" |
||||||
|
:class="{'is-open':isOpen &&titleBorder === 'auto' ,'uni-collapse-item-border':titleBorder !== 'none'}"> |
||||||
|
<view class="uni-collapse-item__title-wrap"> |
||||||
|
<slot name="title"> |
||||||
|
<view class="uni-collapse-item__title-box" :class="{'is-disabled':disabled}"> |
||||||
|
<image v-if="thumb" :src="thumb" class="uni-collapse-item__title-img" /> |
||||||
|
<text class="uni-collapse-item__title-text">{{ title }}</text> |
||||||
|
</view> |
||||||
|
</slot> |
||||||
|
</view> |
||||||
|
<view v-if="showArrow" |
||||||
|
:class="{ 'uni-collapse-item__title-arrow-active': isOpen, 'uni-collapse-item--animation': showAnimation === true }" |
||||||
|
class="uni-collapse-item__title-arrow"> |
||||||
|
<!-- <uni-icons :color="disabled?'#ddd':'#bbb'" size="14" type="bottom" /> --> |
||||||
|
<view class="icon xia font15"></view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="uni-collapse-item__wrap" :class="{'is--transition':showAnimation}" |
||||||
|
:style="{height: (isOpen?height:0) +'px'}"> |
||||||
|
<view :id="elId" ref="collapse--hook" class="uni-collapse-item__wrap-content" |
||||||
|
:class="{open:isheight,'uni-collapse-item--border':border&&isOpen}"> |
||||||
|
<slot></slot> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
// #ifdef APP-NVUE |
||||||
|
const dom = weex.requireModule('dom') |
||||||
|
// #endif |
||||||
|
/** |
||||||
|
* CollapseItem 折叠面板子组件 |
||||||
|
* @description 折叠面板子组件 |
||||||
|
* @property {String} title 标题文字 |
||||||
|
* @property {String} thumb 标题左侧缩略图 |
||||||
|
* @property {String} name 唯一标志符 |
||||||
|
* @property {Boolean} open = [true|false] 是否展开组件 |
||||||
|
* @property {Boolean} titleBorder = [true|false] 是否显示标题分隔线 |
||||||
|
* @property {Boolean} border = [true|false] 是否显示分隔线 |
||||||
|
* @property {Boolean} disabled = [true|false] 是否展开面板 |
||||||
|
* @property {Boolean} showAnimation = [true|false] 开启动画 |
||||||
|
* @property {Boolean} showArrow = [true|false] 是否显示右侧箭头 |
||||||
|
*/ |
||||||
|
export default { |
||||||
|
name: 'uniCollapseItem', |
||||||
|
props: { |
||||||
|
// 列表标题 |
||||||
|
title: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
name: { |
||||||
|
type: [Number, String], |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
// 是否禁用 |
||||||
|
disabled: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
// #ifdef APP-PLUS |
||||||
|
// 是否显示动画,app 端默认不开启动画，卡顿严重 |
||||||
|
showAnimation: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
// #endif |
||||||
|
// #ifndef APP-PLUS |
||||||
|
// 是否显示动画 |
||||||
|
showAnimation: { |
||||||
|
type: Boolean, |
||||||
|
default: true |
||||||
|
}, |
||||||
|
// #endif |
||||||
|
// 是否展开 |
||||||
|
open: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
// 缩略图 |
||||||
|
thumb: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
// 标题分隔线显示类型 |
||||||
|
titleBorder: { |
||||||
|
type: String, |
||||||
|
default: 'auto' |
||||||
|
}, |
||||||
|
border: { |
||||||
|
type: Boolean, |
||||||
|
default: true |
||||||
|
}, |
||||||
|
showArrow: { |
||||||
|
type: Boolean, |
||||||
|
default: true |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
// TODO 随机生生元素ID，解决百度小程序获取同一个元素位置信息的bug |
||||||
|
const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}` |
||||||
|
return { |
||||||
|
isOpen: false, |
||||||
|
isheight: null, |
||||||
|
height: 0, |
||||||
|
elId, |
||||||
|
nameSync: 0 |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
open(val) { |
||||||
|
this.isOpen = val |
||||||
|
this.onClick(val, 'init') |
||||||
|
} |
||||||
|
}, |
||||||
|
updated(e) { |
||||||
|
this.$nextTick(() => { |
||||||
|
this.init(true) |
||||||
|
}) |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.collapse = this.getCollapse() |
||||||
|
this.oldHeight = 0 |
||||||
|
this.onClick(this.open, 'init') |
||||||
|
}, |
||||||
|
// #ifndef VUE3 |
||||||
|
// TODO vue2 |
||||||
|
destroyed() { |
||||||
|
if (this.__isUnmounted) return |
||||||
|
this.uninstall() |
||||||
|
}, |
||||||
|
// #endif |
||||||
|
// #ifdef VUE3 |
||||||
|
// TODO vue3 |
||||||
|
unmounted() { |
||||||
|
this.__isUnmounted = true |
||||||
|
this.uninstall() |
||||||
|
}, |
||||||
|
// #endif |
||||||
|
mounted() { |
||||||
|
if (!this.collapse) return |
||||||
|
if (this.name !== '') { |
||||||
|
this.nameSync = this.name |
||||||
|
} else { |
||||||
|
this.nameSync = this.collapse.childrens.length + '' |
||||||
|
} |
||||||
|
if (this.collapse.names.indexOf(this.nameSync) === -1) { |
||||||
|
this.collapse.names.push(this.nameSync) |
||||||
|
} else { |
||||||
|
console.warn(`name 值 ${this.nameSync} 重复`); |
||||||
|
} |
||||||
|
if (this.collapse.childrens.indexOf(this) === -1) { |
||||||
|
this.collapse.childrens.push(this) |
||||||
|
} |
||||||
|
this.init() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
init(type) { |
||||||
|
// #ifndef APP-NVUE |
||||||
|
this.getCollapseHeight(type) |
||||||
|
// #endif |
||||||
|
// #ifdef APP-NVUE |
||||||
|
this.getNvueHwight(type) |
||||||
|
// #endif |
||||||
|
}, |
||||||
|
uninstall() { |
||||||
|
if (this.collapse) { |
||||||
|
this.collapse.childrens.forEach((item, index) => { |
||||||
|
if (item === this) { |
||||||
|
this.collapse.childrens.splice(index, 1) |
||||||
|
} |
||||||
|
}) |
||||||
|
this.collapse.names.forEach((item, index) => { |
||||||
|
if (item === this.nameSync) { |
||||||
|
this.collapse.names.splice(index, 1) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
onClick(isOpen, type) { |
||||||
|
if (this.disabled) return |
||||||
|
this.isOpen = isOpen |
||||||
|
if (this.isOpen && this.collapse) { |
||||||
|
this.collapse.setAccordion(this) |
||||||
|
} |
||||||
|
if (type !== 'init') { |
||||||
|
this.collapse.onChange(isOpen, this) |
||||||
|
} |
||||||
|
}, |
||||||
|
getCollapseHeight(type, index = 0) { |
||||||
|
const views = uni.createSelectorQuery().in(this) |
||||||
|
views |
||||||
|
.select(`#${this.elId}`) |
||||||
|
.fields({ |
||||||
|
size: true |
||||||
|
}, data => { |
||||||
|
// TODO 百度中可能获取不到节点信息 ，需要循环获取 |
||||||
|
if (index >= 10) return |
||||||
|
if (!data) { |
||||||
|
index++ |
||||||
|
this.getCollapseHeight(false, index) |
||||||
|
return |
||||||
|
} |
||||||
|
// #ifdef APP-NVUE |
||||||
|
this.height = data.height + 1 |
||||||
|
// #endif |
||||||
|
// #ifndef APP-NVUE |
||||||
|
this.height = data.height |
||||||
|
// #endif |
||||||
|
this.isheight = true |
||||||
|
if (type) return |
||||||
|
this.onClick(this.isOpen, 'init') |
||||||
|
}) |
||||||
|
.exec() |
||||||
|
}, |
||||||
|
getNvueHwight(type) { |
||||||
|
const result = dom.getComponentRect(this.$refs['collapse--hook'], option => { |
||||||
|
if (option && option.result && option.size) { |
||||||
|
// #ifdef APP-NVUE |
||||||
|
this.height = option.size.height + 1 |
||||||
|
// #endif |
||||||
|
// #ifndef APP-NVUE |
||||||
|
this.height = option.size.height |
||||||
|
// #endif |
||||||
|
this.isheight = true |
||||||
|
if (type) return |
||||||
|
this.onClick(this.open, 'init') |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
/** |
||||||
|
* 获取父元素实例 |
||||||
|
*/ |
||||||
|
getCollapse(name = 'uniCollapse') { |
||||||
|
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; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.uni-collapse-item { |
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
box-sizing: border-box; |
||||||
|
|
||||||
|
/* #endif */ |
||||||
|
&__title { |
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
display: flex; |
||||||
|
width: 100%; |
||||||
|
box-sizing: border-box; |
||||||
|
/* #endif */ |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
transition: border-bottom-color .3s; |
||||||
|
|
||||||
|
// transition-property: border-bottom-color; |
||||||
|
// transition-duration: 5s; |
||||||
|
&-wrap { |
||||||
|
width: 100%; |
||||||
|
flex: 1; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
&-box { |
||||||
|
padding: 0 15px; |
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
display: flex; |
||||||
|
width: 100%; |
||||||
|
box-sizing: border-box; |
||||||
|
/* #endif */ |
||||||
|
flex-direction: row; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
height: 48px; |
||||||
|
line-height: 48px; |
||||||
|
background-color: #fff; |
||||||
|
color: #303133; |
||||||
|
font-size: 13px; |
||||||
|
font-weight: 500; |
||||||
|
/* #ifdef H5 */ |
||||||
|
cursor: pointer; |
||||||
|
outline: none; |
||||||
|
|
||||||
|
/* #endif */ |
||||||
|
&.is-disabled { |
||||||
|
.uni-collapse-item__title-text { |
||||||
|
color: #999; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
&.uni-collapse-item-border { |
||||||
|
border-bottom: 1px solid #ebeef5; |
||||||
|
} |
||||||
|
|
||||||
|
&.is-open { |
||||||
|
border-bottom-color: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
&-img { |
||||||
|
height: 22px; |
||||||
|
width: 22px; |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
&-text { |
||||||
|
flex: 1; |
||||||
|
font-size: 14px; |
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
white-space: nowrap; |
||||||
|
color: inherit; |
||||||
|
/* #endif */ |
||||||
|
/* #ifdef APP-NVUE */ |
||||||
|
lines: 1; |
||||||
|
/* #endif */ |
||||||
|
overflow: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
} |
||||||
|
|
||||||
|
&-arrow { |
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
display: flex; |
||||||
|
box-sizing: border-box; |
||||||
|
/* #endif */ |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
width: 20px; |
||||||
|
height: 20px; |
||||||
|
margin-right: 10px; |
||||||
|
transform: rotate(0deg); |
||||||
|
|
||||||
|
&-active { |
||||||
|
transform: rotate(-180deg); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
&__wrap { |
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
will-change: height; |
||||||
|
box-sizing: border-box; |
||||||
|
/* #endif */ |
||||||
|
background-color: #fff; |
||||||
|
overflow: hidden; |
||||||
|
position: relative; |
||||||
|
height: 0; |
||||||
|
|
||||||
|
&.is--transition { |
||||||
|
// transition: all 0.3s; |
||||||
|
transition-property: height, border-bottom-width; |
||||||
|
transition-duration: 0.3s; |
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
will-change: height; |
||||||
|
/* #endif */ |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
&-content { |
||||||
|
position: absolute; |
||||||
|
font-size: 13px; |
||||||
|
color: #303133; |
||||||
|
// transition: height 0.3s; |
||||||
|
border-bottom-color: transparent; |
||||||
|
border-bottom-style: solid; |
||||||
|
border-bottom-width: 0; |
||||||
|
|
||||||
|
&.uni-collapse-item--border { |
||||||
|
border-bottom-width: 1px; |
||||||
|
border-bottom-color: red; |
||||||
|
border-bottom-color: #ebeef5; |
||||||
|
} |
||||||
|
|
||||||
|
&.open { |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&--animation { |
||||||
|
transition-property: transform; |
||||||
|
transition-duration: 0.3s; |
||||||
|
transition-timing-function: ease; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,147 @@ |
|||||||
|
<template> |
||||||
|
<view class="uni-collapse"> |
||||||
|
<slot /> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
/** |
||||||
|
* Collapse 折叠面板 |
||||||
|
* @description 展示可以折叠 / 展开的内容区域 |
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=23 |
||||||
|
* @property {String|Array} value 当前激活面板改变时触发(如果是手风琴模式，参数类型为string，否则为array) |
||||||
|
* @property {Boolean} accordion = [true|false] 是否开启手风琴效果是否开启手风琴效果 |
||||||
|
* @event {Function} change 切换面板时触发，如果是手风琴模式，返回类型为string，否则为array |
||||||
|
*/ |
||||||
|
export default { |
||||||
|
name: 'uniCollapse', |
||||||
|
emits:['change','activeItem','input','update:modelValue'], |
||||||
|
props: { |
||||||
|
value: { |
||||||
|
type: [String, Array], |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
modelValue: { |
||||||
|
type: [String, Array], |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
accordion: { |
||||||
|
// 是否开启手风琴效果 |
||||||
|
type: [Boolean, String], |
||||||
|
default: false |
||||||
|
}, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return {} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
// TODO 兼容 vue2 和 vue3 |
||||||
|
dataValue() { |
||||||
|
let value = (typeof this.value === 'string' && this.value === '') || |
||||||
|
(Array.isArray(this.value) && this.value.length === 0) |
||||||
|
let modelValue = (typeof this.modelValue === 'string' && this.modelValue === '') || |
||||||
|
(Array.isArray(this.modelValue) && this.modelValue.length === 0) |
||||||
|
if (value) { |
||||||
|
return this.modelValue |
||||||
|
} |
||||||
|
if (modelValue) { |
||||||
|
return this.value |
||||||
|
} |
||||||
|
|
||||||
|
return this.value |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
dataValue(val) { |
||||||
|
this.setOpen(val) |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.childrens = [] |
||||||
|
this.names = [] |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.$nextTick(()=>{ |
||||||
|
this.setOpen(this.dataValue) |
||||||
|
}) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
setOpen(val) { |
||||||
|
let str = typeof val === 'string' |
||||||
|
let arr = Array.isArray(val) |
||||||
|
this.childrens.forEach((vm, index) => { |
||||||
|
if (str) { |
||||||
|
if (val === vm.nameSync) { |
||||||
|
if (!this.accordion) { |
||||||
|
console.warn('accordion 属性为 false ,v-model 类型应该为 array') |
||||||
|
return |
||||||
|
} |
||||||
|
vm.isOpen = true |
||||||
|
} |
||||||
|
} |
||||||
|
if (arr) { |
||||||
|
val.forEach(v => { |
||||||
|
if (v === vm.nameSync) { |
||||||
|
if (this.accordion) { |
||||||
|
console.warn('accordion 属性为 true ,v-model 类型应该为 string') |
||||||
|
return |
||||||
|
} |
||||||
|
vm.isOpen = true |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
this.emit(val) |
||||||
|
}, |
||||||
|
setAccordion(self) { |
||||||
|
if (!this.accordion) return |
||||||
|
this.childrens.forEach((vm, index) => { |
||||||
|
if (self !== vm) { |
||||||
|
vm.isOpen = false |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
resize() { |
||||||
|
this.childrens.forEach((vm, index) => { |
||||||
|
// #ifndef APP-NVUE |
||||||
|
vm.getCollapseHeight() |
||||||
|
// #endif |
||||||
|
// #ifdef APP-NVUE |
||||||
|
vm.getNvueHwight() |
||||||
|
// #endif |
||||||
|
}) |
||||||
|
}, |
||||||
|
onChange(isOpen, self) { |
||||||
|
let activeItem = [] |
||||||
|
|
||||||
|
if (this.accordion) { |
||||||
|
activeItem = isOpen ? self.nameSync : '' |
||||||
|
} else { |
||||||
|
this.childrens.forEach((vm, index) => { |
||||||
|
if (vm.isOpen) { |
||||||
|
activeItem.push(vm.nameSync) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
this.$emit('change', activeItem) |
||||||
|
this.emit(activeItem) |
||||||
|
}, |
||||||
|
emit(val){ |
||||||
|
this.$emit('input', val) |
||||||
|
this.$emit('update:modelValue', val) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style lang="scss" > |
||||||
|
.uni-collapse { |
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
/* #endif */ |
||||||
|
/* #ifdef APP-NVUE */ |
||||||
|
flex: 1; |
||||||
|
/* #endif */ |
||||||
|
flex-direction: column; |
||||||
|
background-color: #fff; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,89 @@ |
|||||||
|
{ |
||||||
|
"id": "uni-collapse", |
||||||
|
"displayName": "uni-collapse 折叠面板", |
||||||
|
"version": "1.4.3", |
||||||
|
"description": "Collapse 组件，可以折叠 / 展开的内容区域。", |
||||||
|
"keywords": [ |
||||||
|
"uni-ui", |
||||||
|
"折叠", |
||||||
|
"折叠面板", |
||||||
|
"手风琴" |
||||||
|
], |
||||||
|
"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" |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,12 @@ |
|||||||
|
|
||||||
|
|
||||||
|
## Collapse 折叠面板 |
||||||
|
> **组件名：uni-collapse** |
||||||
|
> 代码块： `uCollapse` |
||||||
|
> 关联组件：`uni-collapse-item`、`uni-icons`。 |
||||||
|
|
||||||
|
|
||||||
|
折叠面板用来折叠/显示过长的内容或者是列表。通常是在多内容分类项使用，折叠不重要的内容，显示重要内容。点击可以展开折叠部分。 |
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-collapse) |
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
## 1.0.3（2022-01-21） |
||||||
|
- 优化 组件示例 |
||||||
|
## 1.0.2（2021-11-22） |
||||||
|
- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题 |
||||||
|
## 1.0.1（2021-11-22） |
||||||
|
- 修复 vue3中scss语法兼容问题 |
||||||
|
## 1.0.0（2021-11-18） |
||||||
|
- init |
||||||
@ -0,0 +1 @@ |
|||||||
|
@import './styles/index.scss'; |
||||||
@ -0,0 +1,82 @@ |
|||||||
|
{ |
||||||
|
"id": "uni-scss", |
||||||
|
"displayName": "uni-scss 辅助样式", |
||||||
|
"version": "1.0.3", |
||||||
|
"description": "uni-sass是uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。", |
||||||
|
"keywords": [ |
||||||
|
"uni-scss", |
||||||
|
"uni-ui", |
||||||
|
"辅助样式" |
||||||
|
], |
||||||
|
"repository": "https://github.com/dcloudio/uni-ui", |
||||||
|
"engines": { |
||||||
|
"HBuilderX": "^3.1.0" |
||||||
|
}, |
||||||
|
"dcloudext": { |
||||||
|
"category": [ |
||||||
|
"JS SDK", |
||||||
|
"通用 SDK" |
||||||
|
], |
||||||
|
"sale": { |
||||||
|
"regular": { |
||||||
|
"price": "0.00" |
||||||
|
}, |
||||||
|
"sourcecode": { |
||||||
|
"price": "0.00" |
||||||
|
} |
||||||
|
}, |
||||||
|
"contact": { |
||||||
|
"qq": "" |
||||||
|
}, |
||||||
|
"declaration": { |
||||||
|
"ads": "无", |
||||||
|
"data": "无", |
||||||
|
"permissions": "无" |
||||||
|
}, |
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" |
||||||
|
}, |
||||||
|
"uni_modules": { |
||||||
|
"dependencies": [], |
||||||
|
"encrypt": [], |
||||||
|
"platforms": { |
||||||
|
"cloud": { |
||||||
|
"tcb": "y", |
||||||
|
"aliyun": "y" |
||||||
|
}, |
||||||
|
"client": { |
||||||
|
"App": { |
||||||
|
"app-vue": "y", |
||||||
|
"app-nvue": "u" |
||||||
|
}, |
||||||
|
"H5-mobile": { |
||||||
|
"Safari": "y", |
||||||
|
"Android Browser": "y", |
||||||
|
"微信浏览器(Android)": "y", |
||||||
|
"QQ浏览器(Android)": "y" |
||||||
|
}, |
||||||
|
"H5-pc": { |
||||||
|
"Chrome": "y", |
||||||
|
"IE": "y", |
||||||
|
"Edge": "y", |
||||||
|
"Firefox": "y", |
||||||
|
"Safari": "y" |
||||||
|
}, |
||||||
|
"小程序": { |
||||||
|
"微信": "y", |
||||||
|
"阿里": "y", |
||||||
|
"百度": "y", |
||||||
|
"字节跳动": "y", |
||||||
|
"QQ": "y" |
||||||
|
}, |
||||||
|
"快应用": { |
||||||
|
"华为": "n", |
||||||
|
"联盟": "n" |
||||||
|
}, |
||||||
|
"Vue": { |
||||||
|
"vue2": "y", |
||||||
|
"vue3": "y" |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
`uni-sass` 是 `uni-ui`提供的一套全局样式 ，通过一些简单的类名和`sass`变量，实现简单的页面布局操作，比如颜色、边距、圆角等。 |
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass) |
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
@import './setting/_variables.scss'; |
||||||
|
@import './setting/_border.scss'; |
||||||
|
@import './setting/_color.scss'; |
||||||
|
@import './setting/_space.scss'; |
||||||
|
@import './setting/_radius.scss'; |
||||||
|
@import './setting/_text.scss'; |
||||||
|
@import './setting/_styles.scss'; |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
.uni-border { |
||||||
|
border: 1px $uni-border-1 solid; |
||||||
|
} |
||||||
@ -0,0 +1,66 @@ |
|||||||
|
|
||||||
|
// TODO 暂时不需要 class ，需要用户使用变量实现 ，如果使用类名其实并不推荐 |
||||||
|
// @mixin get-styles($k,$c) { |
||||||
|
// @if $k == size or $k == weight{ |
||||||
|
// font-#{$k}:#{$c} |
||||||
|
// }@else{ |
||||||
|
// #{$k}:#{$c} |
||||||
|
// } |
||||||
|
// } |
||||||
|
$uni-ui-color:( |
||||||
|
// 主色 |
||||||
|
primary: $uni-primary, |
||||||
|
primary-disable: $uni-primary-disable, |
||||||
|
primary-light: $uni-primary-light, |
||||||
|
// 辅助色 |
||||||
|
success: $uni-success, |
||||||
|
success-disable: $uni-success-disable, |
||||||
|
success-light: $uni-success-light, |
||||||
|
warning: $uni-warning, |
||||||
|
warning-disable: $uni-warning-disable, |
||||||
|
warning-light: $uni-warning-light, |
||||||
|
error: $uni-error, |
||||||
|
error-disable: $uni-error-disable, |
||||||
|
error-light: $uni-error-light, |
||||||
|
info: $uni-info, |
||||||
|
info-disable: $uni-info-disable, |
||||||
|
info-light: $uni-info-light, |
||||||
|
// 中性色 |
||||||
|
main-color: $uni-main-color, |
||||||
|
base-color: $uni-base-color, |
||||||
|
secondary-color: $uni-secondary-color, |
||||||
|
extra-color: $uni-extra-color, |
||||||
|
// 背景色 |
||||||
|
bg-color: $uni-bg-color, |
||||||
|
// 边框颜色 |
||||||
|
border-1: $uni-border-1, |
||||||
|
border-2: $uni-border-2, |
||||||
|
border-3: $uni-border-3, |
||||||
|
border-4: $uni-border-4, |
||||||
|
// 黑色 |
||||||
|
black:$uni-black, |
||||||
|
// 白色 |
||||||
|
white:$uni-white, |
||||||
|
// 透明 |
||||||
|
transparent:$uni-transparent |
||||||
|
) !default; |
||||||
|
@each $key, $child in $uni-ui-color { |
||||||
|
.uni-#{"" + $key} { |
||||||
|
color: $child; |
||||||
|
} |
||||||
|
.uni-#{"" + $key}-bg { |
||||||
|
background-color: $child; |
||||||
|
} |
||||||
|
} |
||||||
|
.uni-shadow-sm { |
||||||
|
box-shadow: $uni-shadow-sm; |
||||||
|
} |
||||||
|
.uni-shadow-base { |
||||||
|
box-shadow: $uni-shadow-base; |
||||||
|
} |
||||||
|
.uni-shadow-lg { |
||||||
|
box-shadow: $uni-shadow-lg; |
||||||
|
} |
||||||
|
.uni-mask { |
||||||
|
background-color:$uni-mask; |
||||||
|
} |
||||||
@ -0,0 +1,55 @@ |
|||||||
|
@mixin radius($r,$d:null ,$important: false){ |
||||||
|
$radius-value:map-get($uni-radius, $r) if($important, !important, null); |
||||||
|
// Key exists within the $uni-radius variable |
||||||
|
@if (map-has-key($uni-radius, $r) and $d){ |
||||||
|
@if $d == t { |
||||||
|
border-top-left-radius:$radius-value; |
||||||
|
border-top-right-radius:$radius-value; |
||||||
|
}@else if $d == r { |
||||||
|
border-top-right-radius:$radius-value; |
||||||
|
border-bottom-right-radius:$radius-value; |
||||||
|
}@else if $d == b { |
||||||
|
border-bottom-left-radius:$radius-value; |
||||||
|
border-bottom-right-radius:$radius-value; |
||||||
|
}@else if $d == l { |
||||||
|
border-top-left-radius:$radius-value; |
||||||
|
border-bottom-left-radius:$radius-value; |
||||||
|
}@else if $d == tl { |
||||||
|
border-top-left-radius:$radius-value; |
||||||
|
}@else if $d == tr { |
||||||
|
border-top-right-radius:$radius-value; |
||||||
|
}@else if $d == br { |
||||||
|
border-bottom-right-radius:$radius-value; |
||||||
|
}@else if $d == bl { |
||||||
|
border-bottom-left-radius:$radius-value; |
||||||
|
} |
||||||
|
}@else{ |
||||||
|
border-radius:$radius-value; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@each $key, $child in $uni-radius { |
||||||
|
@if($key){ |
||||||
|
.uni-radius-#{"" + $key} { |
||||||
|
@include radius($key) |
||||||
|
} |
||||||
|
}@else{ |
||||||
|
.uni-radius { |
||||||
|
@include radius($key) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@each $direction in t, r, b, l,tl, tr, br, bl { |
||||||
|
@each $key, $child in $uni-radius { |
||||||
|
@if($key){ |
||||||
|
.uni-radius-#{"" + $direction}-#{"" + $key} { |
||||||
|
@include radius($key,$direction,false) |
||||||
|
} |
||||||
|
}@else{ |
||||||
|
.uni-radius-#{$direction} { |
||||||
|
@include radius($key,$direction,false) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,56 @@ |
|||||||
|
|
||||||
|
@mixin fn($space,$direction,$size,$n) { |
||||||
|
@if $n { |
||||||
|
#{$space}-#{$direction}: #{$size*$uni-space-root}px |
||||||
|
} @else { |
||||||
|
#{$space}-#{$direction}: #{-$size*$uni-space-root}px |
||||||
|
} |
||||||
|
} |
||||||
|
@mixin get-styles($direction,$i,$space,$n){ |
||||||
|
@if $direction == t { |
||||||
|
@include fn($space, top,$i,$n); |
||||||
|
} |
||||||
|
@if $direction == r { |
||||||
|
@include fn($space, right,$i,$n); |
||||||
|
} |
||||||
|
@if $direction == b { |
||||||
|
@include fn($space, bottom,$i,$n); |
||||||
|
} |
||||||
|
@if $direction == l { |
||||||
|
@include fn($space, left,$i,$n); |
||||||
|
} |
||||||
|
@if $direction == x { |
||||||
|
@include fn($space, left,$i,$n); |
||||||
|
@include fn($space, right,$i,$n); |
||||||
|
} |
||||||
|
@if $direction == y { |
||||||
|
@include fn($space, top,$i,$n); |
||||||
|
@include fn($space, bottom,$i,$n); |
||||||
|
} |
||||||
|
@if $direction == a { |
||||||
|
@if $n { |
||||||
|
#{$space}:#{$i*$uni-space-root}px; |
||||||
|
} @else { |
||||||
|
#{$space}:#{-$i*$uni-space-root}px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@each $orientation in m,p { |
||||||
|
$space: margin; |
||||||
|
@if $orientation == m { |
||||||
|
$space: margin; |
||||||
|
} @else { |
||||||
|
$space: padding; |
||||||
|
} |
||||||
|
@for $i from 0 through 16 { |
||||||
|
@each $direction in t, r, b, l, x, y, a { |
||||||
|
.uni-#{$orientation}#{$direction}-#{$i} { |
||||||
|
@include get-styles($direction,$i,$space,true); |
||||||
|
} |
||||||
|
.uni-#{$orientation}#{$direction}-n#{$i} { |
||||||
|
@include get-styles($direction,$i,$space,false); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,167 @@ |
|||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
|
||||||
|
$-color-white:#fff; |
||||||
|
$-color-black:#000; |
||||||
|
@mixin base-style($color) { |
||||||
|
color: #fff; |
||||||
|
background-color: $color; |
||||||
|
border-color: mix($-color-black, $color, 8%); |
||||||
|
&:not([hover-class]):active { |
||||||
|
background: mix($-color-black, $color, 10%); |
||||||
|
border-color: mix($-color-black, $color, 20%); |
||||||
|
color: $-color-white; |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
} |
||||||
|
@mixin is-color($color) { |
||||||
|
@include base-style($color); |
||||||
|
&[loading] { |
||||||
|
@include base-style($color); |
||||||
|
&::before { |
||||||
|
margin-right:5px; |
||||||
|
} |
||||||
|
} |
||||||
|
&[disabled] { |
||||||
|
&, |
||||||
|
&[loading], |
||||||
|
&:not([hover-class]):active { |
||||||
|
color: $-color-white; |
||||||
|
border-color: mix(darken($color,10%), $-color-white); |
||||||
|
background-color: mix($color, $-color-white); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
@mixin base-plain-style($color) { |
||||||
|
color:$color; |
||||||
|
background-color: mix($-color-white, $color, 90%); |
||||||
|
border-color: mix($-color-white, $color, 70%); |
||||||
|
&:not([hover-class]):active { |
||||||
|
background: mix($-color-white, $color, 80%); |
||||||
|
color: $color; |
||||||
|
outline: none; |
||||||
|
border-color: mix($-color-white, $color, 50%); |
||||||
|
} |
||||||
|
} |
||||||
|
@mixin is-plain($color){ |
||||||
|
&[plain] { |
||||||
|
@include base-plain-style($color); |
||||||
|
&[loading] { |
||||||
|
@include base-plain-style($color); |
||||||
|
&::before { |
||||||
|
margin-right:5px; |
||||||
|
} |
||||||
|
} |
||||||
|
&[disabled] { |
||||||
|
&, |
||||||
|
&:active { |
||||||
|
color: mix($-color-white, $color, 40%); |
||||||
|
background-color: mix($-color-white, $color, 90%); |
||||||
|
border-color: mix($-color-white, $color, 80%); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.uni-btn { |
||||||
|
margin: 5px; |
||||||
|
color: #393939; |
||||||
|
border:1px solid #ccc; |
||||||
|
font-size: 16px; |
||||||
|
font-weight: 200; |
||||||
|
background-color: #F9F9F9; |
||||||
|
// TODO 暂时处理边框隐藏一边的问题 |
||||||
|
overflow: visible; |
||||||
|
&::after{ |
||||||
|
border: none; |
||||||
|
} |
||||||
|
|
||||||
|
&:not([type]),&[type=default] { |
||||||
|
color: #999; |
||||||
|
&[loading] { |
||||||
|
background: none; |
||||||
|
&::before { |
||||||
|
margin-right:5px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
&[disabled]{ |
||||||
|
color: mix($-color-white, #999, 60%); |
||||||
|
&, |
||||||
|
&[loading], |
||||||
|
&:active { |
||||||
|
color: mix($-color-white, #999, 60%); |
||||||
|
background-color: mix($-color-white,$-color-black , 98%); |
||||||
|
border-color: mix($-color-white, #999, 85%); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&[plain] { |
||||||
|
color: #999; |
||||||
|
background: none; |
||||||
|
border-color: $uni-border-1; |
||||||
|
&:not([hover-class]):active { |
||||||
|
background: none; |
||||||
|
color: mix($-color-white, $-color-black, 80%); |
||||||
|
border-color: mix($-color-white, $-color-black, 90%); |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
&[disabled]{ |
||||||
|
&, |
||||||
|
&[loading], |
||||||
|
&:active { |
||||||
|
background: none; |
||||||
|
color: mix($-color-white, #999, 60%); |
||||||
|
border-color: mix($-color-white, #999, 85%); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&:not([hover-class]):active { |
||||||
|
color: mix($-color-white, $-color-black, 50%); |
||||||
|
} |
||||||
|
|
||||||
|
&[size=mini] { |
||||||
|
font-size: 16px; |
||||||
|
font-weight: 200; |
||||||
|
border-radius: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
&.uni-btn-small { |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
&.uni-btn-mini { |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
&.uni-btn-radius { |
||||||
|
border-radius: 999px; |
||||||
|
} |
||||||
|
&[type=primary] { |
||||||
|
@include is-color($uni-primary); |
||||||
|
@include is-plain($uni-primary) |
||||||
|
} |
||||||
|
&[type=success] { |
||||||
|
@include is-color($uni-success); |
||||||
|
@include is-plain($uni-success) |
||||||
|
} |
||||||
|
&[type=error] { |
||||||
|
@include is-color($uni-error); |
||||||
|
@include is-plain($uni-error) |
||||||
|
} |
||||||
|
&[type=warning] { |
||||||
|
@include is-color($uni-warning); |
||||||
|
@include is-plain($uni-warning) |
||||||
|
} |
||||||
|
&[type=info] { |
||||||
|
@include is-color($uni-info); |
||||||
|
@include is-plain($uni-info) |
||||||
|
} |
||||||
|
} |
||||||
|
/* #endif */ |
||||||
@ -0,0 +1,24 @@ |
|||||||
|
@mixin get-styles($k,$c) { |
||||||
|
@if $k == size or $k == weight{ |
||||||
|
font-#{$k}:#{$c} |
||||||
|
}@else{ |
||||||
|
#{$k}:#{$c} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@each $key, $child in $uni-headings { |
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
.uni-#{$key} { |
||||||
|
@each $k, $c in $child { |
||||||
|
@include get-styles($k,$c) |
||||||
|
} |
||||||
|
} |
||||||
|
/* #endif */ |
||||||
|
/* #ifdef APP-NVUE */ |
||||||
|
.container .uni-#{$key} { |
||||||
|
@each $k, $c in $child { |
||||||
|
@include get-styles($k,$c) |
||||||
|
} |
||||||
|
} |
||||||
|
/* #endif */ |
||||||
|
} |
||||||
@ -0,0 +1,146 @@ |
|||||||
|
// @use "sass:math"; |
||||||
|
@import '../tools/functions.scss'; |
||||||
|
// 间距基础倍数 |
||||||
|
$uni-space-root: 2 !default; |
||||||
|
// 边框半径默认值 |
||||||
|
$uni-radius-root:5px !default; |
||||||
|
$uni-radius: () !default; |
||||||
|
// 边框半径断点 |
||||||
|
$uni-radius: map-deep-merge( |
||||||
|
( |
||||||
|
0: 0, |
||||||
|
// TODO 当前版本暂时不支持 sm 属性 |
||||||
|
// 'sm': math.div($uni-radius-root, 2), |
||||||
|
null: $uni-radius-root, |
||||||
|
'lg': $uni-radius-root * 2, |
||||||
|
'xl': $uni-radius-root * 6, |
||||||
|
'pill': 9999px, |
||||||
|
'circle': 50% |
||||||
|
), |
||||||
|
$uni-radius |
||||||
|
); |
||||||
|
// 字体家族 |
||||||
|
$body-font-family: 'Roboto', sans-serif !default; |
||||||
|
// 文本 |
||||||
|
$heading-font-family: $body-font-family !default; |
||||||
|
$uni-headings: () !default; |
||||||
|
$letterSpacing: -0.01562em; |
||||||
|
$uni-headings: map-deep-merge( |
||||||
|
( |
||||||
|
'h1': ( |
||||||
|
size: 32px, |
||||||
|
weight: 300, |
||||||
|
line-height: 50px, |
||||||
|
// letter-spacing:-0.01562em |
||||||
|
), |
||||||
|
'h2': ( |
||||||
|
size: 28px, |
||||||
|
weight: 300, |
||||||
|
line-height: 40px, |
||||||
|
// letter-spacing: -0.00833em |
||||||
|
), |
||||||
|
'h3': ( |
||||||
|
size: 24px, |
||||||
|
weight: 400, |
||||||
|
line-height: 32px, |
||||||
|
// letter-spacing: normal |
||||||
|
), |
||||||
|
'h4': ( |
||||||
|
size: 20px, |
||||||
|
weight: 400, |
||||||
|
line-height: 30px, |
||||||
|
// letter-spacing: 0.00735em |
||||||
|
), |
||||||
|
'h5': ( |
||||||
|
size: 16px, |
||||||
|
weight: 400, |
||||||
|
line-height: 24px, |
||||||
|
// letter-spacing: normal |
||||||
|
), |
||||||
|
'h6': ( |
||||||
|
size: 14px, |
||||||
|
weight: 500, |
||||||
|
line-height: 18px, |
||||||
|
// letter-spacing: 0.0125em |
||||||
|
), |
||||||
|
'subtitle': ( |
||||||
|
size: 12px, |
||||||
|
weight: 400, |
||||||
|
line-height: 20px, |
||||||
|
// letter-spacing: 0.00937em |
||||||
|
), |
||||||
|
'body': ( |
||||||
|
font-size: 14px, |
||||||
|
font-weight: 400, |
||||||
|
line-height: 22px, |
||||||
|
// letter-spacing: 0.03125em |
||||||
|
), |
||||||
|
'caption': ( |
||||||
|
'size': 12px, |
||||||
|
'weight': 400, |
||||||
|
'line-height': 20px, |
||||||
|
// 'letter-spacing': 0.03333em, |
||||||
|
// 'text-transform': false |
||||||
|
) |
||||||
|
), |
||||||
|
$uni-headings |
||||||
|
); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 主色 |
||||||
|
$uni-primary: #2979ff !default; |
||||||
|
$uni-primary-disable:lighten($uni-primary,20%) !default; |
||||||
|
$uni-primary-light: lighten($uni-primary,25%) !default; |
||||||
|
|
||||||
|
// 辅助色 |
||||||
|
// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。 |
||||||
|
$uni-success: #18bc37 !default; |
||||||
|
$uni-success-disable:lighten($uni-success,20%) !default; |
||||||
|
$uni-success-light: lighten($uni-success,25%) !default; |
||||||
|
|
||||||
|
$uni-warning: #f3a73f !default; |
||||||
|
$uni-warning-disable:lighten($uni-warning,20%) !default; |
||||||
|
$uni-warning-light: lighten($uni-warning,25%) !default; |
||||||
|
|
||||||
|
$uni-error: #e43d33 !default; |
||||||
|
$uni-error-disable:lighten($uni-error,20%) !default; |
||||||
|
$uni-error-light: lighten($uni-error,25%) !default; |
||||||
|
|
||||||
|
$uni-info: #8f939c !default; |
||||||
|
$uni-info-disable:lighten($uni-info,20%) !default; |
||||||
|
$uni-info-light: lighten($uni-info,25%) !default; |
||||||
|
|
||||||
|
// 中性色 |
||||||
|
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。 |
||||||
|
$uni-main-color: #3a3a3a !default; // 主要文字 |
||||||
|
$uni-base-color: #6a6a6a !default; // 常规文字 |
||||||
|
$uni-secondary-color: #909399 !default; // 次要文字 |
||||||
|
$uni-extra-color: #c7c7c7 !default; // 辅助说明 |
||||||
|
|
||||||
|
// 边框颜色 |
||||||
|
$uni-border-1: #F0F0F0 !default; |
||||||
|
$uni-border-2: #EDEDED !default; |
||||||
|
$uni-border-3: #DCDCDC !default; |
||||||
|
$uni-border-4: #B9B9B9 !default; |
||||||
|
|
||||||
|
// 常规色 |
||||||
|
$uni-black: #000000 !default; |
||||||
|
$uni-white: #ffffff !default; |
||||||
|
$uni-transparent: rgba($color: #000000, $alpha: 0) !default; |
||||||
|
|
||||||
|
// 背景色 |
||||||
|
$uni-bg-color: #f7f7f7 !default; |
||||||
|
|
||||||
|
/* 水平间距 */ |
||||||
|
$uni-spacing-sm: 8px !default; |
||||||
|
$uni-spacing-base: 15px !default; |
||||||
|
$uni-spacing-lg: 30px !default; |
||||||
|
|
||||||
|
// 阴影 |
||||||
|
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default; |
||||||
|
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default; |
||||||
|
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default; |
||||||
|
|
||||||
|
// 蒙版 |
||||||
|
$uni-mask: rgba($color: #000000, $alpha: 0.4) !default; |
||||||
@ -0,0 +1,19 @@ |
|||||||
|
// 合并 map |
||||||
|
@function map-deep-merge($parent-map, $child-map){ |
||||||
|
$result: $parent-map; |
||||||
|
@each $key, $child in $child-map { |
||||||
|
$parent-has-key: map-has-key($result, $key); |
||||||
|
$parent-value: map-get($result, $key); |
||||||
|
$parent-type: type-of($parent-value); |
||||||
|
$child-type: type-of($child); |
||||||
|
$parent-is-map: $parent-type == map; |
||||||
|
$child-is-map: $child-type == map; |
||||||
|
|
||||||
|
@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){ |
||||||
|
$result: map-merge($result, ( $key: $child )); |
||||||
|
}@else { |
||||||
|
$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) )); |
||||||
|
} |
||||||
|
} |
||||||
|
@return $result; |
||||||
|
}; |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
// 间距基础倍数 |
||||||
|
$uni-space-root: 2; |
||||||
|
// 边框半径默认值 |
||||||
|
$uni-radius-root:5px; |
||||||
|
// 主色 |
||||||
|
$uni-primary: #2979ff; |
||||||
|
// 辅助色 |
||||||
|
$uni-success: #4cd964; |
||||||
|
// 警告色 |
||||||
|
$uni-warning: #f0ad4e; |
||||||
|
// 错误色 |
||||||
|
$uni-error: #dd524d; |
||||||
|
// 描述色 |
||||||
|
$uni-info: #909399; |
||||||
|
// 中性色 |
||||||
|
$uni-main-color: #303133; |
||||||
|
$uni-base-color: #606266; |
||||||
|
$uni-secondary-color: #909399; |
||||||
|
$uni-extra-color: #C0C4CC; |
||||||
|
// 背景色 |
||||||
|
$uni-bg-color: #f5f5f5; |
||||||
|
// 边框颜色 |
||||||
|
$uni-border-1: #DCDFE6; |
||||||
|
$uni-border-2: #E4E7ED; |
||||||
|
$uni-border-3: #EBEEF5; |
||||||
|
$uni-border-4: #F2F6FC; |
||||||
|
|
||||||
|
// 常规色 |
||||||
|
$uni-black: #000000; |
||||||
|
$uni-white: #ffffff; |
||||||
|
$uni-transparent: rgba($color: #000000, $alpha: 0); |
||||||
@ -0,0 +1,62 @@ |
|||||||
|
@import './styles/setting/_variables.scss'; |
||||||
|
// 间距基础倍数 |
||||||
|
$uni-space-root: 2; |
||||||
|
// 边框半径默认值 |
||||||
|
$uni-radius-root:5px; |
||||||
|
|
||||||
|
// 主色 |
||||||
|
$uni-primary: #2979ff; |
||||||
|
$uni-primary-disable:mix(#fff,$uni-primary,50%); |
||||||
|
$uni-primary-light: mix(#fff,$uni-primary,80%); |
||||||
|
|
||||||
|
// 辅助色 |
||||||
|
// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。 |
||||||
|
$uni-success: #18bc37; |
||||||
|
$uni-success-disable:mix(#fff,$uni-success,50%); |
||||||
|
$uni-success-light: mix(#fff,$uni-success,80%); |
||||||
|
|
||||||
|
$uni-warning: #f3a73f; |
||||||
|
$uni-warning-disable:mix(#fff,$uni-warning,50%); |
||||||
|
$uni-warning-light: mix(#fff,$uni-warning,80%); |
||||||
|
|
||||||
|
$uni-error: #e43d33; |
||||||
|
$uni-error-disable:mix(#fff,$uni-error,50%); |
||||||
|
$uni-error-light: mix(#fff,$uni-error,80%); |
||||||
|
|
||||||
|
$uni-info: #8f939c; |
||||||
|
$uni-info-disable:mix(#fff,$uni-info,50%); |
||||||
|
$uni-info-light: mix(#fff,$uni-info,80%); |
||||||
|
|
||||||
|
// 中性色 |
||||||
|
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。 |
||||||
|
$uni-main-color: #3a3a3a; // 主要文字 |
||||||
|
$uni-base-color: #6a6a6a; // 常规文字 |
||||||
|
$uni-secondary-color: #909399; // 次要文字 |
||||||
|
$uni-extra-color: #c7c7c7; // 辅助说明 |
||||||
|
|
||||||
|
// 边框颜色 |
||||||
|
$uni-border-1: #F0F0F0; |
||||||
|
$uni-border-2: #EDEDED; |
||||||
|
$uni-border-3: #DCDCDC; |
||||||
|
$uni-border-4: #B9B9B9; |
||||||
|
|
||||||
|
// 常规色 |
||||||
|
$uni-black: #000000; |
||||||
|
$uni-white: #ffffff; |
||||||
|
$uni-transparent: rgba($color: #000000, $alpha: 0); |
||||||
|
|
||||||
|
// 背景色 |
||||||
|
$uni-bg-color: #f7f7f7; |
||||||
|
|
||||||
|
/* 水平间距 */ |
||||||
|
$uni-spacing-sm: 8px; |
||||||
|
$uni-spacing-base: 15px; |
||||||
|
$uni-spacing-lg: 30px; |
||||||
|
|
||||||
|
// 阴影 |
||||||
|
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5); |
||||||
|
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2); |
||||||
|
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5); |
||||||
|
|
||||||
|
// 蒙版 |
||||||
|
$uni-mask: rgba($color: #000000, $alpha: 0.4); |
||||||
Loading…
Reference in new issue