1 changed files with 990 additions and 0 deletions
@ -0,0 +1,990 @@ |
|||
<template> |
|||
<view class="u-wrap"> |
|||
<view class="title"> |
|||
<view class="title-sreach"> |
|||
<view class="back-btn" @tap="back"> |
|||
<uni-icons type="left" size="28"></uni-icons> |
|||
</view> |
|||
<view class="title-name"> |
|||
属性管理 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view style="width: 100%;position: fixed;bottom: 10px;background: #fff;z-index: 99;"> |
|||
<button size="default" type="default" @tap="inputDialogToggle('add')" hover-class="is-hover">添加属性</button> |
|||
</view> |
|||
<view class="card-list"> |
|||
<ul> |
|||
<li v-for="(item, index) in indexList" :key="index" @tap="clickList(item)"> |
|||
<view class="name"> |
|||
<text>{{item.attributeName}}</text> |
|||
<u-icon name="edit-pen-fill" size="22" v-if="item.attributeName != '默认属性'" @tap.stop="inputDialogToggle('edit', item)"></u-icon> |
|||
</view> |
|||
<button class="bj-btn" @tap.stop="goGategoryLow(item)">管理属性</button> |
|||
</li> |
|||
</ul> |
|||
</view> |
|||
<u-modal :show="show" :title="'删除'" :content="'是否确认删除此属性？'" showCancelButton="true" @cancel="show = false" |
|||
@confirm="delItemModal"></u-modal> |
|||
<uni-popup ref="inputDialog" type="dialog"> |
|||
<uni-popup-dialog ref="inputClose" mode="input" :title="dialogTit" :value="inputVal" placeholder="请输入名称" |
|||
@confirm="dialogInputConfirm" @close="dialogClose"> |
|||
</uni-popup-dialog> |
|||
</uni-popup> |
|||
|
|||
<uni-popup ref="delDialog" background-color="#fff"> |
|||
<view class="add-popup-content"> |
|||
<view class="add-popup-title"> |
|||
<text>编辑属性</text> |
|||
<uni-icons @tap='close' type="closeempty" color='red' size="16" |
|||
style="height:40rpx;line-height: 40rpx;position: absolute !important;bottom:0;right: 30rpx;"></uni-icons> |
|||
</view> |
|||
<view class="add-popup-container"> |
|||
<view style="width: 90%;margin: 40rpx auto 0;"> |
|||
属性名称： |
|||
<uni-easyinput type="text" v-model="inputVal" @blur="handleBlur" placeholder="请输入属性值" /> |
|||
</view> |
|||
<view style="width: 100%;height: 90rpx;line-height: 90rpx;text-align: center;border-radius: 0;color: #fff;display: flex;position: absolute;bottom: 0;"> |
|||
<view style="flex: 1;background: linear-gradient(90deg, #60F3FF, #088FEB);" v-if="inputVal != '默认属性'" @tap="dialogDel">删除</view> |
|||
<view style="flex: 1;background: linear-gradient(90deg, #FF9797, #FFC1E0);" @tap="dialogInputConfirm">确认</view> |
|||
</view> |
|||
<!-- <ul> |
|||
<li v-for="(item,index) in defaultList" :key="index"> |
|||
<view class="title-fur"> |
|||
<view class="name">{{item.name}}</view> |
|||
<u-icon size="20" name="plus" color="#5fd9ee" |
|||
@tap="toggle(index) "></u-icon> |
|||
</view> |
|||
<view class="content-fur"> |
|||
<view class="content-low" :class="item1.checked?'checked':''" v-for="(item1,index1) in item.list" :key="index1" |
|||
@tap.stop="addMultipleType(item,item1.value,index1)">{{item1.value}}</view> |
|||
</view> |
|||
</li> |
|||
</ul> --> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
<!-- 添加属性弹出层 --> |
|||
<uni-popup ref="addTypeDialog" background-color="#fff"> |
|||
<view class="add-popup-content"> |
|||
<view class="add-popup-title"> |
|||
<text>新增属性</text> |
|||
<uni-icons @tap='close' type="closeempty" color='red' size="16" |
|||
style="height:40rpx;line-height: 40rpx;position: absolute !important;bottom:0;right: 30rpx;"></uni-icons> |
|||
</view> |
|||
<view class="add-popup-container"> |
|||
|
|||
<input type="text" v-model="typeText" style="width: 100%;border: 1px solid #eee;height: 80rpx;padding-left: 20rpx;margin:20rpx 0;font-size: 25rpx;line-height: 80rpx;" |
|||
placeholder="请输入属性名称"> |
|||
<!-- <ul> |
|||
<li v-for="(item,index) in defaultList" :key="index"> |
|||
<view class="title-fur"> |
|||
<view class="name">{{item.name}}</view> |
|||
<u-icon size="20" name="plus" color="#5fd9ee" |
|||
@tap="toggle(index) "></u-icon> |
|||
</view> |
|||
<view class="content-fur"> |
|||
<view class="content-low" :class="item1.checked?'checked':''" v-for="(item1,index1) in item.list" :key="index1" |
|||
@tap.stop="addMultipleType(item,item1.value,index1)">{{item1.value}}</view> |
|||
</view> |
|||
</li> |
|||
</ul> --> |
|||
<view class="add-popup-bottom"> |
|||
<view class="add-popup-btn" @tap="dialogInputConfirm(typeText)">确认</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
|
|||
<uni-popup ref="attrValueDialog" background-color="#fff"> |
|||
<view class="add-popup-content" style="width: 640rpx;max-height: 600px;overflow: scroll;"> |
|||
<view class="add-popup-title"> |
|||
<text>管理属性</text> |
|||
<uni-icons @tap='close' type="closeempty" color='red' size="16" |
|||
style="height:40rpx;line-height: 40rpx;position: absolute !important;bottom:0;right: 30rpx;"></uni-icons> |
|||
</view> |
|||
<view class="add-popup-container"> |
|||
<view> |
|||
<text style="color:red;font-size:22rpx;">*点击“+”号可新增专属自己店铺的属性值</text> |
|||
</view> |
|||
<view style="display: flex;font-weight: 700;font-size: 16px;height: 50px;line-height: 50px;padding-right: 10px;"> |
|||
<view style="flex: 1;"> |
|||
属性列表 |
|||
</view> |
|||
<uni-icons type="plusempty" @tap="toggle()" color="#5fd9ee" size="20"></uni-icons> |
|||
</view> |
|||
<ul> |
|||
<li v-for="(item,index) in defaultList" :key="index"> |
|||
<view class="title-fur"> |
|||
<view class="name">{{item.value}}</view> |
|||
<view class="btn" v-if="inputVal != '默认属性'" @tap="editValue(item)">修改</view> |
|||
<view class="btn" v-if="inputVal != '默认属性'" @tap="delValue(item)">删除</view> |
|||
</view> |
|||
</li> |
|||
</ul> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
|
|||
<!-- 查看商品库存弹出层 --> |
|||
<uni-popup ref="carPopup" background-color="#fff"> |
|||
<view class="popup-content" style="height:auto !important;"> |
|||
<view style="font-size: 36rpx;font-weight: bold;text-align: center;">提示</view> |
|||
<view v-if="goodsList !=''" |
|||
style="width:100%;font-weight:bold;text-align: center;font-size: 28rpx;margin: 20rpx 0;"> |
|||
“{{goodsList[0].productName}}”属性下有以下库存，确认继续删除吗？ |
|||
</view> |
|||
<view class="tui-order-item boxbg"> |
|||
<view style="display: flex;border-bottom: 1px solid #eee;height: 50rpx;line-height: 50rpx;"> |
|||
<view style="width: 70%;text-align: center;border-right: 1px solid #eee;">商品属性</view> |
|||
<view style="width: 29%;text-align: center;">数量</view> |
|||
</view> |
|||
<view class="shop-box" v-for="(item,index) in goodsList" :key="index" style="position: relative;"> |
|||
<view style='height: 50rpx;line-height: 50rpx;'> |
|||
<view style="width: 70%;text-align: center;border-right: 1px solid #eee;float: left;height: 50rpx;overflow: hidden;"> |
|||
{{item.attributeList | sliceMsg}} |
|||
</view> |
|||
<view style="width: 29%;text-align: center;float: left;"> |
|||
{{item.stockCount}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- <u-loadmore :status="status" /> --> |
|||
<view class="popup-bottom"> |
|||
<view class="popup-bottom-left"> |
|||
<view class="bottom-btn" @tap="this.$refs.carPopup.close()" |
|||
style="background: linear-gradient(90deg, #FF9797, #FFC1E0);">再想想</view> |
|||
</view> |
|||
<view class="popup-bottom-right"> |
|||
<view class="bottom-btn" @tap="this.show = true">确认删除</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
<uni-popup ref="addDialog" type="dialog"> |
|||
<uni-popup-dialog |
|||
ref="addClose" |
|||
mode="input" |
|||
:title="'请输入属性名'" |
|||
v-model="specVal" |
|||
placeholder="请输入属性名称" |
|||
@confirm="addSpec" |
|||
@close="dialogClose"> |
|||
</uni-popup-dialog> |
|||
</uni-popup> |
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
indexList: [], |
|||
show: false, |
|||
inputVal: '', |
|||
specVal:'', |
|||
addIndex:0, |
|||
typeModel: '', |
|||
editItem: {}, |
|||
delItems: {}, |
|||
isOpenId: '', |
|||
delType: '', |
|||
goodsList: [], |
|||
dialogTit: '输入属性名', |
|||
typeText:'', |
|||
sortText:'', |
|||
sortTextEdit:'', |
|||
defaultList:[{ |
|||
name:'颜色', |
|||
list:[{ |
|||
value:'均色', |
|||
checked:false, |
|||
},{ |
|||
value:'白色', |
|||
checked:false, |
|||
},{ |
|||
value:'黑色', |
|||
checked:false, |
|||
},{ |
|||
value:'浅蓝', |
|||
checked:false, |
|||
},{ |
|||
value:'蓝色', |
|||
checked:false, |
|||
},{ |
|||
value:'灰色', |
|||
checked:false, |
|||
},{ |
|||
value:'咖色', |
|||
checked:false, |
|||
},{ |
|||
value:'紫色', |
|||
checked:false, |
|||
},{ |
|||
value:'红色', |
|||
checked:false, |
|||
},{ |
|||
value:'米色', |
|||
checked:false, |
|||
}] |
|||
},{ |
|||
name:'尺码', |
|||
list:[{ |
|||
value:'均码', |
|||
checked:false, |
|||
},{ |
|||
value:'XS码', |
|||
checked:false |
|||
},{ |
|||
value:'S码', |
|||
checked:false, |
|||
},{ |
|||
value:'M码', |
|||
checked:false, |
|||
},{ |
|||
value:'L码', |
|||
checked:false, |
|||
},{ |
|||
value:'XL码', |
|||
checked:false, |
|||
},{ |
|||
value:'XXL码', |
|||
checked:false, |
|||
},{ |
|||
value:'XXXL码', |
|||
checked:false, |
|||
},{ |
|||
value:'XXXXL码', |
|||
checked:false, |
|||
},{ |
|||
value:'25码', |
|||
checked:false |
|||
},{ |
|||
value:'26码', |
|||
checked:false |
|||
},{ |
|||
value:'27码', |
|||
checked:false |
|||
},{ |
|||
value:'28码', |
|||
checked:false |
|||
},{ |
|||
value:'29码', |
|||
checked:false |
|||
},{ |
|||
value:'30码', |
|||
checked:false |
|||
},{ |
|||
value:'31码', |
|||
checked:false |
|||
},{ |
|||
value:'32码', |
|||
checked:false |
|||
},{ |
|||
value:'33码', |
|||
checked:false |
|||
},{ |
|||
value:'34码', |
|||
checked:false |
|||
},{ |
|||
value:'35码', |
|||
checked:false |
|||
},{ |
|||
value:'36码', |
|||
checked:false |
|||
},{ |
|||
value:'37码', |
|||
checked:false |
|||
},{ |
|||
value:'38码', |
|||
checked:false |
|||
},{ |
|||
value:'39码', |
|||
checked:false |
|||
},{ |
|||
value:'40码', |
|||
checked:false |
|||
},{ |
|||
value:'41码', |
|||
checked:false |
|||
},{ |
|||
value:'42码', |
|||
checked:false |
|||
},{ |
|||
value:'43码', |
|||
checked:false |
|||
},{ |
|||
value:'44码', |
|||
checked:false |
|||
},{ |
|||
value:'45码', |
|||
checked:false |
|||
}] |
|||
}], |
|||
attrId:'', |
|||
valueEditId:'', |
|||
isEdieValue:false, |
|||
multipleList:[] |
|||
} |
|||
}, |
|||
computed: { |
|||
|
|||
}, |
|||
filters: { |
|||
sliceMsg(val) { |
|||
var name = '' |
|||
if (typeof(val) == 'string') { |
|||
let newObj = JSON.parse(val) |
|||
for (let as in newObj) { |
|||
name += newObj[as] + '/' |
|||
} |
|||
} |
|||
return name; |
|||
} |
|||
}, |
|||
onShow() { |
|||
this.attrId = uni.getStorageSync('attrId'); |
|||
this.getGategoryList() |
|||
}, |
|||
methods: { |
|||
editValue(item){ |
|||
this.isEdieValue = true |
|||
this.valueEditId = item.id |
|||
this.specVal = item.value |
|||
this.$refs.addDialog.open() |
|||
}, |
|||
delValue(item){ |
|||
this.tui.request("/app/productAttributeValue/delById", "post", { |
|||
id: item.id |
|||
}, false, true).then((res) => { |
|||
if (res.code == 200) { |
|||
this.tui.toast("删除成功") |
|||
this.goGategoryLow(this.editItem) |
|||
this.$forceUpdate() |
|||
} else { |
|||
this.tui.toast("添加失败") |
|||
} |
|||
|
|||
}).catch((res) => {}) |
|||
}, |
|||
//初始化获取属性列表 |
|||
getGategoryList() { |
|||
this.tui.request("/app/productAttribute/selectByCategoryId", "post", {categoryId:this.attrId}, false, true).then((res) => { |
|||
if (res.code == 200) { |
|||
this.indexList = res.result; |
|||
} else { |
|||
this.tui.toast(res.message) |
|||
} |
|||
}).catch((res) => {}) |
|||
}, |
|||
//判断需要打开哪个弹窗（删除弹窗、取消弹窗） |
|||
inputDialogToggle(type, item, parent) { |
|||
this.typeModel = type; |
|||
if (type == 'edit') { |
|||
this.inputVal = item.attributeName; |
|||
this.editItem = item; |
|||
this.$refs.delDialog.open('bottom') |
|||
} else if (type == 'add') { |
|||
this.inputVal = ''; |
|||
this.isOpenId = item; |
|||
this.dialogTit = '输入属性名' |
|||
this.$refs.addTypeDialog.open('bottom') |
|||
} |
|||
|
|||
}, |
|||
close(){ |
|||
this.$refs.attrValueDialog.close() |
|||
}, |
|||
handleBlur(e){ |
|||
this.inputVal = e.detail.value |
|||
}, |
|||
handleBlurSort(e){ |
|||
this.sortTextEdit = e.detail.value |
|||
}, |
|||
//查询属性下有没有库存 |
|||
getTypeToNum(id) { |
|||
let that = this; |
|||
this.tui.request("/app/stock/getlistByAttributeList", "post", { |
|||
categoryId: id, |
|||
}, false, true).then((res) => { |
|||
if (res.code == 200) { |
|||
if (res.result != '') { |
|||
this.goodsList = res.result |
|||
this.$refs.carPopup.open('bottom') |
|||
} else { |
|||
this.tui.request("/app/productAttribute/selectByCategoryId", "POST", { |
|||
categoryId: this.delItems.id |
|||
}, false, true).then((res1) => { |
|||
if (res1.code == 200) { |
|||
if (res1.result.length > 0) { |
|||
uni.showModal({ |
|||
title: "提示", |
|||
content: "此属性已经维护了子属性，确定继续删除吗？", |
|||
success: function(res2) { |
|||
if (res2.confirm) { |
|||
that.delItemModal() |
|||
} |
|||
} |
|||
}) |
|||
} else { |
|||
that.show = true |
|||
} |
|||
} |
|||
}).catch((res) => {}) |
|||
} |
|||
} |
|||
}).catch((res) => {}) |
|||
}, |
|||
//点击选择列表，带参数 返回上一页 |
|||
clickList(item) { |
|||
let pages = getCurrentPages(); |
|||
let prevPage = pages[pages.length - 2]; |
|||
prevPage.$vm.typeItem = item |
|||
uni.navigateBack({ |
|||
delta: 1 |
|||
}) |
|||
}, |
|||
back() { |
|||
uni.navigateBack() |
|||
}, |
|||
toggle(){ |
|||
this.specVal = '' |
|||
this.isEdieValue = false |
|||
this.$refs.addDialog.open() |
|||
}, |
|||
addSpec(e){ |
|||
let that = this; |
|||
if(this.isEdieValue){ |
|||
that.tui.request("/app/productAttributeValue/edit", "post", { |
|||
id: that.valueEditId, |
|||
value:e |
|||
}, false, true).then((res) => { |
|||
if (res.code == 200) { |
|||
that.tui.toast("修改成功") |
|||
that.goGategoryLow(that.editItem) |
|||
that.$forceUpdate() |
|||
} else { |
|||
that.tui.toast("添加失败") |
|||
} |
|||
|
|||
}).catch((res) => {}) |
|||
}else{ |
|||
that.tui.request("/app/productAttributeValue/save", "post", { |
|||
attributeId: that.editItem.id, |
|||
value:e |
|||
}, false, true).then((res) => { |
|||
if (res.code == 200) { |
|||
that.tui.toast("添加成功") |
|||
that.goGategoryLow(that.editItem) |
|||
that.$forceUpdate() |
|||
} else { |
|||
that.tui.toast("添加失败") |
|||
} |
|||
|
|||
}).catch((res) => {}) |
|||
} |
|||
}, |
|||
//属性编辑（新增，修改） |
|||
dialogInputConfirm(e) { |
|||
let that = this; |
|||
switch (that.typeModel) { |
|||
case 'add': |
|||
for (let i = 0; i < that.indexList.length; i++) { |
|||
if (that.indexList[i].attributeName == e) { |
|||
uni.showToast({ |
|||
title: "请勿重复添加！", |
|||
icon: 'error' |
|||
}) |
|||
return |
|||
} |
|||
} |
|||
if(e == ''){ |
|||
that.tui.toast("请输入属性名") |
|||
return |
|||
} |
|||
that.tui.request("/app/productAttribute/save", "post", { |
|||
categoryId: that.attrId, |
|||
attributeName:e |
|||
}, false, true).then((res) => { |
|||
if (res.code == 200) { |
|||
that.tui.toast("添加成功") |
|||
that.$refs.addTypeDialog.close() |
|||
that.getGategoryList() |
|||
} else { |
|||
that.tui.toast("添加失败") |
|||
} |
|||
|
|||
}).catch((res) => {}) |
|||
// that.$refs.addTypeDialog.val = '' |
|||
/* for(var i=0;i<that.defaultList.length;i++){ |
|||
for(var m=0;m<that.defaultList[i].list.length;m++){ |
|||
that.defaultList[i].list[m].checked = false |
|||
} |
|||
} */ |
|||
that.typeText = '' |
|||
that.multipleList = [] |
|||
break; |
|||
case 'edit': |
|||
that.tui.request("/app/productAttribute/edit", "post", { |
|||
attributeName: this.inputVal, |
|||
id: that.editItem.id |
|||
}, false, true).then((res) => { |
|||
if (res.code == 200) { |
|||
that.getGategoryList() |
|||
that.sortText = '' |
|||
uni.showToast({ |
|||
title: "修改成功", |
|||
icon: 'none' |
|||
}) |
|||
} else { |
|||
uni.showToast({ |
|||
title: "修改失败", |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}).catch((res) => {}) |
|||
break; |
|||
default: |
|||
} |
|||
that.$refs.delDialog.close() |
|||
that.$refs.inputClose.val = '' |
|||
this.inputVal = "" |
|||
}, |
|||
//点击取消按钮 |
|||
dialogClose() { |
|||
this.inputVal = ''; |
|||
this.specVal = ''; |
|||
this.$refs.inputClose.val = '' |
|||
this.$refs.addClose.val = '' |
|||
|
|||
}, |
|||
//带删除按钮的弹窗 |
|||
dialogDel() { |
|||
this.tui.request("/app/productAttribute/delById", "post", { |
|||
id: this.editItem.id, |
|||
}, false, true).then((res) => { |
|||
if (res.code == 200) { |
|||
this.getGategoryList() |
|||
uni.showToast({ |
|||
title: "删除成功", |
|||
icon: 'none' |
|||
}) |
|||
this.$refs.carPopup.close() |
|||
this.$refs.delDialog.close() |
|||
} else { |
|||
uni.showToast({ |
|||
title: "删除失败", |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}).catch((res) => {}) |
|||
}, |
|||
delItemModal() { |
|||
this.show = false; |
|||
if (this.delType == 'del') { |
|||
this.tui.request("/app/productCategory/delById", "post", { |
|||
id: this.delItems.id, |
|||
}, false, true).then((res) => { |
|||
if (res.code == 200) { |
|||
this.getGategoryList() |
|||
uni.showToast({ |
|||
title: "删除成功", |
|||
icon: 'none' |
|||
}) |
|||
this.$refs.carPopup.close() |
|||
this.$refs.delDialog.close() |
|||
|
|||
} else { |
|||
uni.showToast({ |
|||
title: "删除失败", |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}).catch((res) => {}) |
|||
} |
|||
}, |
|||
delItem(item, type) { |
|||
this.delType = type; |
|||
this.delItems = item; |
|||
this.getTypeToNum(this.delItems.id) |
|||
}, |
|||
//跳转子属性页 |
|||
goGategoryLow(item) { |
|||
this.editItem = item |
|||
this.tui.request("/app/productAttributeValue/selectByAttributeId", "get", { |
|||
id: item.id, |
|||
}, false, true).then((res) => { |
|||
if (res.code == 200) { |
|||
this.defaultList = res.result; |
|||
this.$refs.attrValueDialog.open(); |
|||
} else { |
|||
uni.showToast({ |
|||
title: "删除失败", |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}).catch((res) => {}) |
|||
|
|||
}, |
|||
//选择多个属性保存 |
|||
addMultipleType(item,item1,index){ |
|||
|
|||
|
|||
item.list[index].checked = !item.list[index].checked |
|||
var list = [] |
|||
if(this.multipleList == ''){ |
|||
|
|||
list.push(item.list[index]) |
|||
var data = { |
|||
attributeName:item.name, |
|||
productAttributeValueVoList: list |
|||
} |
|||
this.multipleList.push(data) |
|||
}else{ |
|||
for(var i=0;i<this.multipleList.length;i++){ |
|||
if(this.multipleList[i].attributeName == item.name){ //同种属性 |
|||
|
|||
|
|||
for(var m=0;m<this.multipleList[i].productAttributeValueVoList.length;m++){ |
|||
if(this.multipleList[i].productAttributeValueVoList[m].value == item.list[index].value){ //属性相同 |
|||
|
|||
this.multipleList[i].productAttributeValueVoList.splice(m,1) |
|||
|
|||
return; |
|||
}else{ //属性不同 |
|||
if(m+1 == this.multipleList[i].productAttributeValueVoList.length){ |
|||
|
|||
this.multipleList[i].productAttributeValueVoList.push(item.list[index]) |
|||
|
|||
return; |
|||
} |
|||
} |
|||
} |
|||
}else{ //不同属性 |
|||
if(this.multipleList.length == i+1){ |
|||
|
|||
|
|||
list.push(item.list[index]) |
|||
var data = { |
|||
attributeName:item.name, |
|||
productAttributeValueVoList: list |
|||
} |
|||
this.multipleList.push(data) |
|||
|
|||
return; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
page,.page1{ |
|||
font-size: 28rpx; |
|||
} |
|||
.u-wrap { |
|||
height: calc(100vh); |
|||
/* #ifdef H5 */ |
|||
height: calc(100vh - var(--window-top)); |
|||
/* #endif */ |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.top { |
|||
line-height: 70rpx; |
|||
margin: 20rpx 0; |
|||
padding: 0 20rpx; |
|||
background-color: #fff; |
|||
|
|||
.u-collapse-content { |
|||
.icon { |
|||
display: flex; |
|||
float: right; |
|||
|
|||
.u-icon { |
|||
flex: 1; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.name { |
|||
font-size: 28rpx; |
|||
|
|||
.rightBox { |
|||
display: flex; |
|||
float: right; |
|||
} |
|||
} |
|||
|
|||
.attr { |
|||
line-height: 56rpx; |
|||
margin-left: 20rpx; |
|||
|
|||
.attrName { |
|||
color: #767a82; |
|||
font-size: 24rpx; |
|||
display: flex; |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
margin-top: 20rpx; |
|||
} |
|||
|
|||
.attrs { |
|||
margin-left: 20rpx; |
|||
|
|||
.u-tag-wrapper { |
|||
width: 20%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
button { |
|||
color: #ffffff; |
|||
background: #5fd9ee; |
|||
width: 90%; |
|||
margin: 20rpx auto 20rpx; |
|||
} |
|||
|
|||
.card-list { |
|||
width: 95%; |
|||
border-radius: 10upx; |
|||
background: #fff; |
|||
height: auto; |
|||
margin: -200rpx auto 0; |
|||
|
|||
} |
|||
.checked{ |
|||
background: #60F3FF; |
|||
color: #fff; |
|||
} |
|||
.card-list ul {} |
|||
|
|||
.card-list li { |
|||
width: 95%; |
|||
height: 100rpx; |
|||
line-height: 100rpx; |
|||
padding-left: 20rpx; |
|||
font-size: 37rpx; |
|||
border-bottom: 0.5px solid #eee; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.bj-btn { |
|||
width: 120rpx; |
|||
height: 60rpx; |
|||
font-size: 26rpx; |
|||
background: red; |
|||
margin: 20rpx 0; |
|||
float: left; |
|||
padding: 0; |
|||
line-height: 60rpx; |
|||
} |
|||
|
|||
.name { |
|||
width: 75%; |
|||
float: left; |
|||
display: flex; |
|||
} |
|||
|
|||
.data-v-5ff5d986 {} |
|||
|
|||
.popup-content { |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 30rpx; |
|||
height: 1200rpx; |
|||
background-color: #fff; |
|||
margin-bottom: 100rpx; |
|||
overflow: scroll; |
|||
} |
|||
|
|||
.popup-container { |
|||
width: 100%; |
|||
background: #fff; |
|||
height: 50rpx; |
|||
} |
|||
|
|||
.checkList { |
|||
display: flex; |
|||
height: 50rpx; |
|||
font-size: 28rpx; |
|||
line-height: 50rpx; |
|||
margin: 20rpx 0; |
|||
} |
|||
|
|||
.checkList-box { |
|||
height: 50rpx; |
|||
width: 60%; |
|||
} |
|||
.title { |
|||
flex-shrink: 0; |
|||
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat; |
|||
background-size: 100%; |
|||
width: 100%; |
|||
height: 400rpx; |
|||
padding-bottom: 20rpx; |
|||
} |
|||
|
|||
.title-sreach { |
|||
width: 100%; |
|||
display: flex; |
|||
height: 200rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.back-btn { |
|||
margin-top: 110rpx; |
|||
} |
|||
.btn{ |
|||
flex: 1; |
|||
line-height: 25px; |
|||
text-align: center; |
|||
height: 25px; |
|||
color: #1E90FF; |
|||
border-radius: 7px; |
|||
margin: 5px 0 0 10px; |
|||
} |
|||
|
|||
.title-search { |
|||
margin-top: 110rpx; |
|||
display: flex; |
|||
background: #fff; |
|||
height: 54rpx; |
|||
margin-left: 20rpx; |
|||
border-radius: 54rpx; |
|||
width: 380rpx; |
|||
flex: 1; |
|||
|
|||
input { |
|||
height: 54rpx; |
|||
line-height: 54rpx; |
|||
} |
|||
} |
|||
.popup-bottom { |
|||
width: 95%; |
|||
height: 100rpx; |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 2.5%; |
|||
display: flex; |
|||
z-index: 99; |
|||
background: #fff; |
|||
} |
|||
|
|||
.popup-bottom-left { |
|||
width: 50%; |
|||
line-height: 80rpx; |
|||
} |
|||
|
|||
.popup-bottom-right { |
|||
width: 50%; |
|||
line-height: 100rpx; |
|||
} |
|||
|
|||
.bottom-btn { |
|||
width: 70%; |
|||
line-height: 70rpx; |
|||
height: 70rpx; |
|||
text-align: center; |
|||
/* margin-top: 10rpx; */ |
|||
color: #fff; |
|||
font-size: 28rpx; |
|||
margin: 0 auto; |
|||
background: linear-gradient(90deg, #60F3FF, #088FEB); |
|||
border-radius: 70rpx; |
|||
} |
|||
.add-popup-content { |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 30rpx; |
|||
width: 100%; |
|||
height: 325rpx; |
|||
background-color: #fff; |
|||
overflow: scroll; |
|||
} |
|||
|
|||
.add-popup-title { |
|||
font-size: 36rpx; |
|||
font-weight: bold; |
|||
text-align: center; |
|||
position: relative; |
|||
} |
|||
|
|||
.add-popup-container { |
|||
margin-top: 20rpx; |
|||
} |
|||
.title-name { |
|||
padding-top: 110rpx; |
|||
font-size: 36rpx; |
|||
font-weight: 700; |
|||
flex: 1; |
|||
text-align: center; |
|||
} |
|||
.add-popup-bottom { |
|||
display: flex; |
|||
height: 80rpx; |
|||
color: #fff; |
|||
line-height: 80rpx; |
|||
margin-top: 50rpx; |
|||
} |
|||
|
|||
.add-popup-btn { |
|||
flex: 1; |
|||
text-align: center; |
|||
background: linear-gradient(90deg, #60F3FF, #088FEB); |
|||
} |
|||
.title-fur { |
|||
width: 95%; |
|||
height: 70rpx; |
|||
margin: 0 auto; |
|||
border-bottom: 1px solid #eee; |
|||
display: flex; |
|||
.name { |
|||
font-size: 30rpx; |
|||
width: 65%; |
|||
height: 70rpx; |
|||
line-height: 70rpx; |
|||
} |
|||
} |
|||
.content-fur { |
|||
padding-bottom: 25rpx; |
|||
} |
|||
|
|||
.content-low { |
|||
width: auto; |
|||
border: 1px solid #eee; |
|||
display: inline-block; |
|||
min-width: 90rpx; |
|||
padding: 5rpx; |
|||
font-size: 35rpx; |
|||
text-align: center; |
|||
color: #777; |
|||
margin: 20rpx 0 0 20rpx; |
|||
} |
|||
.type-popup{ |
|||
width: 500rpx; |
|||
height: auto; |
|||
background: #fff; |
|||
border-radius: 10px; |
|||
position: relative; |
|||
margin-bottom: 40rpx; |
|||
} |
|||
@media screen and (min-width: 760px) { |
|||
.add-popup-content{ |
|||
height: 700px !important; |
|||
} |
|||
.vue-ref{ |
|||
padding-bottom:0 !important; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue