parent
8fb9de3ac6
commit
c886330bd7
9 changed files with 596 additions and 240 deletions
@ -0,0 +1,107 @@ |
|||||||
|
<template> |
||||||
|
<view class="sp-pop"> |
||||||
|
<u-popup |
||||||
|
:mode="mode" |
||||||
|
border-radius="10" |
||||||
|
:mask-close-able="false" |
||||||
|
v-model="show" |
||||||
|
:closeable="!hideClose" |
||||||
|
@close="closePop" |
||||||
|
> |
||||||
|
<view class="pop-content" :style="{width: width}"> |
||||||
|
<view class="pop-title" v-if="title">{{ title }}</view> |
||||||
|
<view class="pop-icon" v-if="icon"> |
||||||
|
<u-image |
||||||
|
:width="iconSize" |
||||||
|
mode="widthFix" |
||||||
|
:src="`/static/img/betone-sp-component/pop/${icon}.svg`" |
||||||
|
></u-image> |
||||||
|
</view> |
||||||
|
<slot></slot> |
||||||
|
</view> |
||||||
|
</u-popup> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: "spPop", |
||||||
|
model: { |
||||||
|
prop: "value", |
||||||
|
event: "changeShow", |
||||||
|
}, |
||||||
|
props: { |
||||||
|
value: { |
||||||
|
type: Boolean, |
||||||
|
default: false, |
||||||
|
}, |
||||||
|
icon: { |
||||||
|
type: String, |
||||||
|
default: "", |
||||||
|
}, |
||||||
|
iconSize: { |
||||||
|
type: String | Number, |
||||||
|
default: 120, |
||||||
|
}, |
||||||
|
title: { |
||||||
|
type: String, |
||||||
|
default: "", |
||||||
|
}, |
||||||
|
hideClose: { |
||||||
|
type: Boolean, |
||||||
|
default: false, |
||||||
|
}, |
||||||
|
mode: { |
||||||
|
type: String, |
||||||
|
default: 'bottom', |
||||||
|
}, |
||||||
|
width: { |
||||||
|
type: String, |
||||||
|
default: '', |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
value(show) { |
||||||
|
this.show = show; |
||||||
|
}, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
show: false, |
||||||
|
}; |
||||||
|
}, |
||||||
|
created() { |
||||||
|
// this.show = true; |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
closePop() { |
||||||
|
this.show = false; |
||||||
|
this.$emit("changeShow", false); |
||||||
|
this.$emit("close"); |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.sp-pop { |
||||||
|
.pop-content { |
||||||
|
padding: 20rpx 32rpx; |
||||||
|
min-height: 300rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
max-height: 88vh; |
||||||
|
.pop-icon { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
padding: 48rpx 0; |
||||||
|
} |
||||||
|
.pop-title { |
||||||
|
color: #333; |
||||||
|
text-align: center; |
||||||
|
font-size: 32rpx; |
||||||
|
font-style: normal; |
||||||
|
font-weight: 500; |
||||||
|
line-height: 1.5; /* 150% */ |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,78 @@ |
|||||||
|
<template> |
||||||
|
<view class="page-css"> |
||||||
|
<view class="search-box"> |
||||||
|
<betone-new-input v-model="searchInfo.name" placeholder="搜索物品名称" icon="search" style="margin-bottom: 32rpx" |
||||||
|
@changevalue="searchData()" /> |
||||||
|
</view> |
||||||
|
<view class="material-box"> |
||||||
|
|
||||||
|
</view> |
||||||
|
<view class="evaluate_box"> |
||||||
|
<!-- <view class="evaluate_btn"> |
||||||
|
确定 |
||||||
|
</view> --> |
||||||
|
<u-button class="evaluate_btn" size="medium" type="primary">确定</u-button> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
searchInfo: { |
||||||
|
name: '', |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
searchData() { |
||||||
|
// 搜索物品名称 |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.page-css { |
||||||
|
padding: 0; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
.search-box { |
||||||
|
background: rgba(248, 248, 248, 1); |
||||||
|
height: 140rpx; |
||||||
|
padding: 0 32rpx 0; |
||||||
|
} |
||||||
|
.material-box{ |
||||||
|
flex: 1; |
||||||
|
background: #fff; |
||||||
|
margin: 24rpx 24rpx 178rpx 24rpx; |
||||||
|
border-radius: 20rpx; |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
.evaluate_box { |
||||||
|
width: 100%; |
||||||
|
height: 154rpx; |
||||||
|
bottom: 0; |
||||||
|
position: fixed; |
||||||
|
background: #fff; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: flex-end; |
||||||
|
|
||||||
|
.evaluate_btn { |
||||||
|
width: 160rpx; |
||||||
|
height: 60rpx; |
||||||
|
border-radius: 8rpx; |
||||||
|
background-color: rgba(255, 255, 255, 1); |
||||||
|
color: rgba(58, 98, 215, 1); |
||||||
|
font-size: 24rpx; |
||||||
|
text-align: center; |
||||||
|
font-family: PingFangSC-regular; |
||||||
|
border: 2rpx solid rgba(58, 98, 215, 1); |
||||||
|
margin-right: 26rpx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue