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