zq
3 months ago
7 changed files with 641 additions and 367 deletions
@ -0,0 +1,106 @@ |
|||||
|
<template> |
||||
|
<view class="page-bottom-btn-container flex"> |
||||
|
<button |
||||
|
class="bottom-btn cancel" |
||||
|
:class="{ disabled: disabled }" |
||||
|
@click="cancelClick" |
||||
|
v-if="showCancel" |
||||
|
> |
||||
|
{{ cancelTxt }} |
||||
|
</button> |
||||
|
|
||||
|
<button |
||||
|
class="bottom-btn PfScMedium primary" |
||||
|
:class="{ disabled: disabled }" |
||||
|
@click="handleClick" |
||||
|
> |
||||
|
{{ text }} |
||||
|
</button> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'PageBottomBtn', |
||||
|
props: { |
||||
|
text: { |
||||
|
type: String, |
||||
|
default: '确认选择' |
||||
|
}, |
||||
|
cancelTxt: { |
||||
|
type: String, |
||||
|
default: '取消' |
||||
|
}, |
||||
|
disabled: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
showCancel: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
handleClick() { |
||||
|
if (!this.disabled) this.$emit('click') |
||||
|
}, |
||||
|
cancelClick() { |
||||
|
if (!this.disabled) this.$emit('cancelClick') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.page-bottom-btn-container { |
||||
|
position: fixed; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
width: 100%; |
||||
|
box-sizing: border-box; |
||||
|
background-color: #FFFFFF; |
||||
|
padding: 0rpx 54rpx; |
||||
|
box-shadow: 0px -2rpx 6rpx 0rpx rgba(181, 181, 181, 0.1319); |
||||
|
z-index: 9; |
||||
|
padding-bottom: constant(safe-area-inset-bottom); |
||||
|
padding-bottom: env(safe-area-inset-bottom); |
||||
|
column-gap: 50rpx; |
||||
|
} |
||||
|
|
||||
|
.bottom-btn { |
||||
|
height: 92rpx; |
||||
|
width: 100%; |
||||
|
margin: 16rpx 0; |
||||
|
line-height: 92rpx; |
||||
|
text-align: center; |
||||
|
|
||||
|
font-size: 32rpx; |
||||
|
border-radius: 16rpx; |
||||
|
border: none; |
||||
|
padding: 0; |
||||
|
&.primary{ |
||||
|
background-color: #39D067; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
&.cancel{ |
||||
|
background-color: #F1F2F3; |
||||
|
color: #616266; |
||||
|
} |
||||
|
|
||||
|
&::after { |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
&.disabled { |
||||
|
background-color: #CCCCCC; |
||||
|
opacity: 0.7; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,202 @@ |
|||||
|
<template> |
||||
|
<view class="user-info-com" @click="$emit('click')"> |
||||
|
<view class="user-info"> |
||||
|
<view class="user-top"> |
||||
|
<view class="user-left"> |
||||
|
<view class="user-name PfScSemibold ft38">{{ visitorInfo.coin_name }}</view> |
||||
|
<view class="user-num">{{ visitorInfo.year }}年</view> |
||||
|
</view> |
||||
|
<view class="user-right" v-if="visitorInfo.status" :class="className[visitorInfo.status]">{{ descObj[visitorInfo.status] }}</view> |
||||
|
<view class="user-right" v-else :class="className[visitorInfo.ancient_coin_status]">{{ visitorInfo.ancient_coin_status_desc }}</view> |
||||
|
</view> |
||||
|
<view class="user-bottom gap24 flex-between"> |
||||
|
<view>板式：{{ visitorInfo.format }}</view> |
||||
|
<view v-if="visitorInfo.operate_time">{{ visitorInfo.operate_time }} </view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "visitorInfo", |
||||
|
data() { |
||||
|
return { |
||||
|
cssUrl: this.cssUrl, |
||||
|
className: { |
||||
|
0: 'notStore',//未入库 |
||||
|
'1': 'inventory',//库存 |
||||
|
'2': 'outBound'//出库 |
||||
|
}, |
||||
|
descObj: { |
||||
|
0: '未入库',//未入库 |
||||
|
'1': '库存',//库存 |
||||
|
'2': '已出库'//出库 |
||||
|
}, |
||||
|
} |
||||
|
}, |
||||
|
props: { |
||||
|
visitorInfo: { |
||||
|
type: Object, |
||||
|
// default: () => ({ |
||||
|
// name: '机制光绪通宝', |
||||
|
// year: '1889年', |
||||
|
// phone: '1310684212', |
||||
|
// id: 3, |
||||
|
// time: '2025.12.21 13:23', |
||||
|
// address: '北京公博二部', |
||||
|
// plateType:'板式：库平一钱满汉广', |
||||
|
// type: '1' |
||||
|
// }) |
||||
|
}, |
||||
|
}, |
||||
|
methods: { |
||||
|
resetUinfo() { |
||||
|
this.$emit('resetUinfo') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.user-info-com { |
||||
|
font-family: PingFang SC; |
||||
|
.user-info { |
||||
|
margin: 0 18rpx 20rpx; |
||||
|
background: #FFFFFF; |
||||
|
padding: 34rpx 24rpx 44rpx; |
||||
|
position: relative; |
||||
|
|
||||
|
.user-bg { |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.gap24 { |
||||
|
gap: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.phone { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
height: 39rpx; |
||||
|
line-height: 39rpx; |
||||
|
|
||||
|
img { |
||||
|
width: 34rpx; |
||||
|
height: 34rpx; |
||||
|
margin-left: 12rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.user-top, |
||||
|
.user-bottom { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
z-index: 8; |
||||
|
} |
||||
|
|
||||
|
.user-top { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.user-left { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding-left: 20rpx; |
||||
|
&::before{ |
||||
|
content: ''; |
||||
|
display: block; |
||||
|
position: absolute; |
||||
|
width: 8rpx; |
||||
|
height: 34rpx; |
||||
|
border-radius: 10rpx; |
||||
|
background: #58CA7F; |
||||
|
left: 0; |
||||
|
top: 8rpx; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.user-name { |
||||
|
font-size: 38rpx; |
||||
|
color: #333333; |
||||
|
line-height: 50rpx; |
||||
|
} |
||||
|
|
||||
|
.user-num { |
||||
|
margin-left: 24rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #79624A; |
||||
|
line-height: 40rpx; |
||||
|
|
||||
|
font-size: 28rpx; |
||||
|
font-weight: normal; |
||||
|
line-height: 44rpx; |
||||
|
letter-spacing: 0.86rpx; |
||||
|
color: #242833; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.user-right { |
||||
|
font-size: 26rpx; |
||||
|
text-align: center; |
||||
|
letter-spacing: 0.69rpx; |
||||
|
color: #999999; |
||||
|
line-height: 36rpx; |
||||
|
border-radius: 6rpx; |
||||
|
background: #FCFCFC; |
||||
|
border: 1.5rpx solid #999999; |
||||
|
padding: 2rpx 18rpx; |
||||
|
} |
||||
|
.notStore{ |
||||
|
color: #999999; |
||||
|
background: #FCFCFC; |
||||
|
border-color: #999999; |
||||
|
} |
||||
|
.inventory{ |
||||
|
color: #5FA1CB; |
||||
|
background: #F7FCFF; |
||||
|
border-color: #5FA1CB; |
||||
|
} |
||||
|
.outBound{ |
||||
|
color: #58CA7F; |
||||
|
background: #F8FFF7; |
||||
|
border-color: #5FA1CB; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.user-bottom { |
||||
|
margin-top: 32rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: normal; |
||||
|
line-height: normal; |
||||
|
letter-spacing: 0.86rpx; |
||||
|
color: #999999; |
||||
|
} |
||||
|
|
||||
|
.user-card { |
||||
|
font-size: 30rpx; |
||||
|
color: #949699; |
||||
|
line-height: 36rpx; |
||||
|
} |
||||
|
|
||||
|
.user-last-time { |
||||
|
font-size: 30rpx; |
||||
|
color: #949699; |
||||
|
line-height: 36rpx; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
|
After Width: | Height: | Size: 13 KiB |
Loading…
Reference in new issue