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