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