|
|
<template>
|
|
|
<view class="g-components-item">
|
|
|
<view class="m-set g_bg_f g_radius_8">
|
|
|
<view
|
|
|
class="item g_flex_row_start"
|
|
|
v-for="(item, index) in list"
|
|
|
:key="index"
|
|
|
:hover-class="item.type == 'slot' ? 'none' : 'g_bg_e'"
|
|
|
@click="handleClickItem(item, index)"
|
|
|
:style="{
|
|
|
'padding-top': (item.pColumn ? item.pColumn : 19) + 'px',
|
|
|
'padding-bottom': (item.pColumn ? item.pColumn : 19) + 'px',
|
|
|
'padding-left': (item.pRow ? item.pRow : 10) + 'px',
|
|
|
'padding-right': (item.pRow ? item.pRow : 10) + 'px',
|
|
|
}"
|
|
|
>
|
|
|
<view class=" g_pl_10 g_pr_10 g_flex_column_center">
|
|
|
<view class="g_flex_1 g_flex_row_start flex_center" :class="item.require ? 'labelRequire' : ''">
|
|
|
<view class="t-icon g_h_22 g_w_22 g_pl_7 g_mr_5"
|
|
|
style="width: 22px; height: 22px;background-repeat:no-repeat"
|
|
|
:style="{
|
|
|
'width':item.icon == 'icon-wodetuandui' ? '24px' : '22px',
|
|
|
'height':item.icon == 'icon-wodetuandui' ? '24px' : '22px',
|
|
|
}"
|
|
|
v-if="item.icon"
|
|
|
:class="'t-' + item.icon"
|
|
|
></view>
|
|
|
<view class="g_flex_column_center g_c_3 g_fs_16">{{ item.label }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="g_flex_1 g_flex_column_center">
|
|
|
<view class="g_flex_row_end">
|
|
|
<view class="g_flex_row_end flex_center">
|
|
|
<!-- 通用类型 -->
|
|
|
<view class="g_fs_16 g_ell_1 g_lh_1_2 g_c_8" style="max-width:45vw" :class="item.fontColor" v-if="item.result">{{ item.result }}</view>
|
|
|
<!-- 迷你二维码 -->
|
|
|
<view class="g_flex_rowRight_columnCenter" v-if="item.tip == 'code'">
|
|
|
<i class="iconfont icon-a-erweimabeifen2 g_fs_21 g_c_c" style="font-size: 21px"></i>
|
|
|
</view>
|
|
|
<!-- 头像类 -->
|
|
|
<view class="g_flex_rowRight_columnCenter" v-if="item.tip == 'avatar'">
|
|
|
<img :src="item.value" alt="" class="g_w_48 g_h_48" style="border-radius: 13px;" />
|
|
|
</view>
|
|
|
<!-- 右箭头 -->
|
|
|
<view class="g_flex_column_center flex_center" v-if="item.type != 'slot'">
|
|
|
<i class="iconfont icon-gengduo11 g_c_c"></i>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
/* item单行卡片
|
|
|
* 示例：我的页面中的设置展示UI
|
|
|
*/
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
localBaseImg: "",
|
|
|
};
|
|
|
},
|
|
|
props: {
|
|
|
list: {
|
|
|
type: Array,
|
|
|
default: () => {
|
|
|
return [];
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
created() {
|
|
|
this.localBaseImg = this.G.store().localBaseImg;
|
|
|
},
|
|
|
methods: {
|
|
|
// 当前行
|
|
|
handleClickItem($item, $index) {
|
|
|
this.$emit("clickItem", {
|
|
|
item: $item,
|
|
|
index: $index,
|
|
|
});
|
|
|
},
|
|
|
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.g-components-item {
|
|
|
.m-set {
|
|
|
width: calc(100% - 40rpx);
|
|
|
margin: 0 auto;
|
|
|
|
|
|
.item {
|
|
|
position:relative;
|
|
|
// border-bottom: 1rpx solid #eee;
|
|
|
&:after{
|
|
|
content:'';
|
|
|
position: absolute;
|
|
|
bottom:0;
|
|
|
left:16px;
|
|
|
border-bottom: 1rpx solid #eee;
|
|
|
height: 1rpx solid #eee;
|
|
|
width: calc(100vw - 52px);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
border-bottom: none;
|
|
|
&:after{
|
|
|
content:none;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.labelRequire {
|
|
|
&::afrer {
|
|
|
content: "*";
|
|
|
color: #ff4400;
|
|
|
margin-top: 8px;
|
|
|
margin-right: 2px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.btn-text {
|
|
|
.btn-con {
|
|
|
border-left: 1rpx solid #eee;
|
|
|
padding: 0 0 0 16px;
|
|
|
background-color: transparent;
|
|
|
border-radius: 0;
|
|
|
height: 40rpx;
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|