167 lines
3.5 KiB
Vue
167 lines
3.5 KiB
Vue
<template>
|
||
<view class="towcontentitem">
|
||
<view class="towcontentitemone flex-start">
|
||
<image class="towcontentitemoneimage" :src="userInfo.logo" mode="aspectFill"></image>
|
||
<view class="towcontentitemonetext flex-colum-start">
|
||
<text class="towcontentitemonetextone">{{userInfo.shopName || '暂无昵称'}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="towcontentitemthere flex-start">
|
||
余额：<text class="towcontentitemtheretext">{{userInfo.amount || '0.00'}}</text>
|
||
</view>
|
||
<view class="towcontentitemtow flex-between">
|
||
<text class="towcontentitemtowetext">VIP{{userInfo.code || '无'}}</text>
|
||
</view>
|
||
<view class="towcontentitevip">
|
||
VIP{{userInfo.isVip?userInfo.isVip:''}}
|
||
</view>
|
||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/erweima.png" class="imgStyle" mode=""
|
||
@click=""></image>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: ['userInfo'],
|
||
data() {
|
||
return {}
|
||
},
|
||
mounted() {
|
||
console.log(this.userInfo,'调试1113')
|
||
},
|
||
methods: {
|
||
clickEvent() {
|
||
uni.navigateTo({
|
||
url: '/pages/pay_code/pay_code?shopInfo='+JSON.stringify(this.userInfo)
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.towcontentitem {
|
||
width: 100%;
|
||
position: relative;
|
||
padding: 32rpx;
|
||
border-radius: 12rpx;
|
||
background: linear-gradient(126deg, #FFFBF2 0%, #F2D093 100%);
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
|
||
&::after {
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 68rpx;
|
||
content: '';
|
||
display: inline-block;
|
||
width: 240rpx;
|
||
height: 232rpx;
|
||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/member.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.towcontentitemimage {
|
||
top: 0;
|
||
left: 0;
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 12rpx;
|
||
z-index: 5;
|
||
}
|
||
|
||
.towcontentitemone {
|
||
width: 100%;
|
||
position: relative;
|
||
z-index: 9;
|
||
|
||
.towcontentitemoneimage {
|
||
width: 76rpx;
|
||
height: 76rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
|
||
|
||
.towcontentitemonetext {
|
||
height: 76rpx;
|
||
margin-left: 16rpx;
|
||
|
||
.towcontentitemonetextone {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 36rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.towcontentitemonetexttow {
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #422A07;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.towcontentitemprogressa {
|
||
padding: 8rpx 44rpx;
|
||
z-index: 10;
|
||
position: relative;
|
||
margin-top: 54rpx;
|
||
}
|
||
|
||
.towcontentitemtow {
|
||
margin-top: 84rpx;
|
||
z-index: 10;
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #422A07;
|
||
}
|
||
|
||
.towcontentitevip {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
width: 92rpx;
|
||
height: 40rpx;
|
||
font-size: 20rpx;
|
||
background: #F4C380;
|
||
border-radius: 0rpx 12rpx 0rpx 12rpx;
|
||
text-align: center;
|
||
line-height: 40rpx;
|
||
color: #fff;
|
||
font-family: Source Han Sans CN-Medium;
|
||
font-weight: Medium;
|
||
|
||
}
|
||
|
||
.towcontentitemthere {
|
||
margin-left: 92rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: Medium;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.towcontentitemtheretext {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.imgStyle {
|
||
width: 54rpx;
|
||
height: 52rpx;
|
||
position: absolute;
|
||
right: 50rpx;
|
||
bottom: 30rpx;
|
||
// border: 2px solid #fff;
|
||
z-index: 666;
|
||
}
|
||
</style> |