会员权益

pages/component/member/custom.vue

@@ -0,0 +1,139 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-会员自定义字段 开发者: 麦沃德科技-半夏
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="component-member-custom">
+		<block v-for="(item, index) in showData" :key="index" v-if="item.show == 1">
+			<!-- 图片 -->
+			<view class="custom-item" v-if="item.type == 'image'">
+				<view class="item-title">{{item.label}}</view>
+				<view class="item-list" v-if="item.value">
+					<view class="list-image" v-for="(img, num) in item.value.split(',')" :key="num">
+						<image class="image" :src="img" mode="aspectFill" @click="previewImage(index, num)"></image>
+					</view>
+				</view>
+				<view class="item-value" v-else>暂未完善</view>
+			</view>
+			<!-- 视频 -->
+			<view class="custom-item" v-else-if="item.type == 'video'">
+				<view class="item-title">{{item.label}}</view>
+				<view class="item-video" v-if="item.value">
+					<video class="video" :src="item.value" controls></video>
+				</view>
+				<view class="item-value" v-else>暂未完善</view>
+			</view>
+			<!-- 证书 -->
+			<view class="custom-item" v-else-if="item.type == 'cert'">
+				<view class="item-title">{{item.label}}</view>
+				<view class="item-image" v-if="item.value">
+					<image class="image" :src="item.value" mode="widthFix" @click="previewImage(index)"></image>
+				</view>
+				<view class="item-value" v-else>暂未完善</view>
+			</view>
+			<!-- 其他 -->
+			<view class="custom-item flex flex-wrap justify-content-between" v-else>
+				<view class="item-title">{{item.label}}</view>
+				<view class="item-value">{{item.value || "暂未完善"}}</view>
+			</view>
+		</block>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "memberCustom",
+		props: ["showData"],
+		methods: {
+			// 预览图片
+			previewImage(i, j = 0) {
+				let list = []
+				if (this.showData[i].type == "cert") {
+					list = [this.showData[i].value]
+				} else {
+					list = this.showData[i].value.split(",")
+				}
+				uni.previewImage({
+					urls: list,
+					current: j
+				});
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.component-member-custom {
+		.custom-item {
+			margin-top: 32rpx;
+			padding: 32rpx;
+			border-radius: 16rpx;
+			background: #ffffff;
+			row-gap: 24rpx;
+			column-gap: 48rpx;
+
+			.item-title {
+				color: #5A5B6E;
+				font-size: 30rpx;
+				font-weight: 600;
+				line-height: 40rpx;
+			}
+
+			.item-value {
+				color: #5A5B6E;
+				font-size: 28rpx;
+				line-height: 40rpx;
+				word-break: break-all;
+			}
+
+			.item-list {
+				display: flex;
+				flex-wrap: wrap;
+				margin-top: 32rpx;
+				column-gap: 3.5%;
+				row-gap: 24rpx;
+
+				.list-image {
+					position: relative;
+					width: 31%;
+					height: 0;
+					padding-top: 31%;
+
+					.image {
+						position: absolute;
+						top: 0;
+						left: 0;
+						right: 0;
+						bottom: 0;
+						border-radius: 10rpx;
+					}
+				}
+			}
+
+			.item-video {
+				margin-top: 24rpx;
+
+				.video {
+					width: 100%;
+				}
+			}
+
+			.item-image {
+				margin-top: 24rpx;
+
+				.image {
+					width: 100%;
+					border-radius: 10rpx;
+				}
+			}
+		}
+	}
+</style>