zhapp/components/uni-Cell/uni-Cell.vue

<template>
	<view>
		<view class="cell" :style="{ borderRadius: round }">
			<view class="cellItem dis a-c j-s" v-for="(item, index) in celllist" :key="index" @tap="cellClick(item)">
				<view class="left dis a-c">
					<image v-if="item.icon" :src="item.icon" mode=""></image>
					<text class="leftTitle" :style="leftStyle">{{ item.title }}</text>
				</view>
				<view class="Right dis a-c">
					<view class="mr-1 dis a-c j-c">
						<text v-if="item.value" style="font-size: ;">{{ item.value }}</text>
						<slot v-else name="customContent" :item="item" :index="index">
						</slot>

					</view>

					<image v-if="item.rightIcon !== undefined ? item.rightIcon : rightIcon" class="rightArrow"
						src="/static/icon/my/arrowRight.png" mode="">
					</image>
				</view>
			</view>
		</view>
		<!-- 更新组件 force 是否强制更新   tabbar：页面是否有原生tabbar组件-->
		<app-update ref="app_update" @status="updateStatus"></app-update>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import appUpdate from "@/components/yzhua006-update/app-update"; //app更新组件
	export default {
		components: {
			appUpdate,
		},
		props: {
			// 单元格列表
			celllist: {
				type: Array,
				default: () => []
			},
			/*圆角 */
			round: {
				type: String,
				default: '0'
			},
			leftStyle: {
				type: Object,
				default: () => {}
			},
			rightIcon: {
				type: Boolean,
				default: true,
			}
		},
		data() {
			return {
				hasUpdate: false,
			};
		},
		watch: {
			hasUpdate(newVal, oldVal) {
				this.hasUpdate = newVal
			},
		},
		computed: {
			...mapState(['userInfo']),
		},
		methods: {
			//菜单点击回调
			cellClick(item) {
				if (typeof item.handler === 'function') {
					// 如果配置了 handler，直接执行
					item.handler(item);
					return;
				}
				switch (item.clickType) {
					case 'navigate':
						if (item.url) {
							uni.navigateTo({
								url: item.url,
							})
						} else {
							uni.showToast({
								title: '链接错误，无法跳转',
								icon: "none"
							});
						}
						break;
					case 'checkVersion': //检查版本
						this.$refs.app_update.update(); //调用子组件检查更新方法
						break;
					case 'auth': //实名认证  0.未认证 1. 认证成功 2. 认证驳回"
						if (this.userInfo.sysUser.authStatus == 1) {
							uni.navigateTo({
								url: '/pages/my/identityInfo'
							})
						} else {
							uni.navigateTo({
								url: '/pages/my/realNameAuth'
							})
						}
						break;
					case 'weChat': //微信

						break;
					case 'alipay': //支付宝

						break;
					case 'clear': //清除缓存
						uni.showModal({
							title: '提示',
							content: '是否要清除缓存？',
							confirmText: '立刻清除',
							success: res => {
								if (res.confirm) {
									uni.showToast({
										title: '清除缓存成功！',
										icon: "none"
									});
								}
							},
						});
						break;
					default:
				}
			},
			updateStatus(item) {
				this.hasUpdate = item;
				if (!this.hasUpdate) {
					uni.showToast({
						title: '已经是最新版本',
						icon: "none"
					});
				}

			}
		},

	}
</script>

<style lang="scss" scoped>
	.cell {
		width: 100%;
		background: #FFFFFF;
		padding: 0 30rpx;
		box-sizing: border-box;

		.cellItem {
			padding: 30rpx 0;
			box-sizing: border-box;
			border-bottom: 1rpx solid #eee;

			// 左侧
			.left {
				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}

				.leftTitle {
					font-size: 28rpx;
					color: #333;
				}
			}

			.Right {
				width: auto;
				font-size: 30rpx;
				color: #666;

				.rightArrow {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}

		:last-child {
			border-bottom: none;
		}
	}
</style>