会员权益
This commit is contained in:
195
pagesCard/component/card/item.vue
Normal file
195
pagesCard/component/card/item.vue
Normal file
@@ -0,0 +1,195 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-名片项目 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="component-card-item" v-if="showData">
|
||||
<image class="card-image" :src="showData.card_background_image" mode="aspectFill" v-if="showData.card_background_image"></image>
|
||||
<image class="card-avatar" :src="showData.avatar" mode="aspectFill" v-if="showData.avatar && showData.is_hide_avatar != 1"></image>
|
||||
<view class="card-name">
|
||||
<view class="name" :style="{color: showData.font_color}" v-if="showData.name">{{showData.name}}</view>
|
||||
<view class="position" :style="{color: showData.font_color}" v-if="showData.company_position">{{showData.company_position}}</view>
|
||||
</view>
|
||||
<view class="card-company" :style="{color: showData.font_color}" v-if="showData.company_name">{{showData.company_name}}</view>
|
||||
<view class="card-business" :style="{color: showData.font_color}" v-if="showData.main_business">
|
||||
<text class="label" :style="{color: showData.font_color}" v-for="(item, index) in stringToArray(showData.main_business)" :key="index">{{item}}</text>
|
||||
</view>
|
||||
<view class="card-mobile" v-if="showData.mobile">
|
||||
<image class="icon" src="/static/card/mobile_w.png" mode="aspectFit" v-if="showData.font_color == '#FFFFFF'"></image>
|
||||
<image class="icon" src="/static/card/mobile.png" mode="aspectFit" v-else></image>
|
||||
<text class="text" :style="{color: showData.font_color}">{{showData.mobile}}</text>
|
||||
</view>
|
||||
<view class="card-address" v-if="showData.company_address">
|
||||
<image class="icon" src="/static/card/location_w.png" mode="aspectFit" v-if="showData.font_color == '#FFFFFF'"></image>
|
||||
<image class="icon" src="/static/card/location.png" mode="aspectFit" v-else></image>
|
||||
<text class="text" :style="{color: showData.font_color}">{{showData.company_address}}</text>
|
||||
</view>
|
||||
<view class="card-association">
|
||||
<image class="logo" :src="showData.association.logo" mode="aspectFill"></image>
|
||||
<text class="text" :style="{color: showData.font_color}">{{showData.association.name}}</text>
|
||||
<text class="text" :style="{color: showData.font_color}">{{showData.member_level_name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "componentCardItem",
|
||||
props: ["showData"],
|
||||
methods: {
|
||||
// 字符串转数组
|
||||
stringToArray(value) {
|
||||
try {
|
||||
if (value) return value.split(',');
|
||||
else return []
|
||||
} catch (error) {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.component-card-item {
|
||||
position: relative;
|
||||
height: 400rpx;
|
||||
|
||||
.card-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.card-avatar {
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
border-radius: 16rpx;
|
||||
position: absolute;
|
||||
top: 32rpx;
|
||||
right: 32rpx;
|
||||
}
|
||||
|
||||
.card-name {
|
||||
position: absolute;
|
||||
top: 32rpx;
|
||||
left: 32rpx;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.name {
|
||||
color: #FFF;
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
line-height: 56rpx;
|
||||
}
|
||||
|
||||
.position {
|
||||
margin-left: 18rpx;
|
||||
padding-bottom: 4rpx;
|
||||
color: #FFF;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.card-company {
|
||||
position: absolute;
|
||||
top: 100rpx;
|
||||
left: 32rpx;
|
||||
color: #FFF;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
|
||||
.card-business {
|
||||
position: absolute;
|
||||
top: 158rpx;
|
||||
left: 32rpx;
|
||||
display: flex;
|
||||
|
||||
.label {
|
||||
color: #FFF;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
margin-left: 16rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-mobile {
|
||||
position: absolute;
|
||||
top: 216rpx;
|
||||
left: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-left: 16rpx;
|
||||
color: #FFF;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.card-address {
|
||||
position: absolute;
|
||||
top: 262rpx;
|
||||
left: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-left: 16rpx;
|
||||
color: #FFF;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.card-association {
|
||||
position: absolute;
|
||||
bottom: 12rpx;
|
||||
left: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.logo {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-left: 16rpx;
|
||||
color: #FFF;
|
||||
font-size: 24rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user