congming_huose-apk/pages/kongjian/kongjianxq.vue

<template>
	<view class="device-tab">
		<!-- 自定义导航栏 -->
		<view class="tabback">
			<view class="rtjt" @click="btnback">←</view>
			<view class="name">{{ t('spaceDetail') }}</view>
			<view class="edit" @click="btnedit">{{ t('editSpace') }}</view>
		</view>
		<view class="img">
			<image :src="kjobj.picture" mode="aspectFill"></image>
		</view>
		<view class="namecike">
			<view class="xiao">
				{{ t('spaceNameLabel') }}
			</view>
			<view class="da">
				{{ kjobj.name }}
			</view>
		</view>
		<view class="ul">
			<view class="li" @click="btnpage(1)">
				<view class="lt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uy4ZLK4sixXxglJEYsH3" mode="aspectFill"></image>
					{{ t('user') }}
				</view>
				<view class="device-arrow">›</view>
			</view>
			<!-- <view class="li" @click="btnpage">
				<view class="lt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uSkP9qSVBrLqJd2vOqUt" mode="aspectFill"></image>
					{{ t('privacy') }}
				</view>
				<view class="device-arrow">›</view>
			</view> -->
			<view class="li" @click="btnpage(2)">
				<view class="lt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uA5CstRYyu9RKjLLiBZo" mode="aspectFill"></image>
					{{ t('securityCompany') }}
				</view>
				<view class="device-arrow">›</view>
			</view>
			<view class="li" @click="btnpage">
				<view class="lt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/u2EF0KGKjGYjTxJMv2MQ" mode="aspectFill"></image>
					{{ t('installerCompany') }}
				</view>
				<view class="device-arrow">›</view>
			</view>
			<view class="li" @click="btnpage">
				<view class="lt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uVPwDLNqkTUb1uHfAgnW" mode="aspectFill"></image>
					{{ t('userGuide') }}
				</view>
				<view class="device-arrow">›</view>
			</view>
			<view class="li" style="border: none;" @click="btndel">
				<view class="lt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/upijMXHu57BobzwGJMso" mode="aspectFill"></image>
					{{ t('deleteSpace') }}
				</view>
				<view class="device-arrow">›</view>
			</view>
		</view>
        <!-- 点击退出空间 -->
		<!-- <view class="tc">
			{{ t('logout') }}
		</view> -->

	</view>
</template>

<script>
	import i18n from '@/common/i18n/index.js';
	export default {
		data() {
			return {
                kjid:'',
				kjobj:{}
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.kjid = uni.getStorageSync('kjid')
			this.getxq()
		},
		methods: {
			// 点击提示正在建设中
			btnpage(num){
				if(num == 1){ //用户
					uni.navigateTo({
						url:'/pages/kongjian/useryonghu'
					})
				}else if(num == 2){ //安全公司
					uni.navigateTo({
						url:'/pages/kongjian/anquangs'
					})
				}else{
					uni.showToast({
						title: this.t('featureImproving'),
						icon: 'none',
						duration: 2000
					})
				}
			},
			// 点击编辑空间进行跳转
			btnedit(){
				uni.navigateTo({
					url:'/pages/kongjian/editkongjian'
				})
			},
			// 删除空间
			btndel(){
				// 显示确认对话框
				uni.showModal({
					title: this.t('confirmDeleteSpace'),
					content: this.t('confirmDeleteSpaceContent'),
					showCancel: true,
					cancelText: this.t('cancel'),
					confirmText: this.t('confirm'),
					success: (res) => {
						if (res.confirm) {
							// 用户点击确定，执行删除操作
							this.deleteSpace();
						}
						// 用户点击取消，不做任何操作
					}
				})
			},
			// 执行删除空间操作
			deleteSpace(){
				this.$http.delete(`/bst/space/${this.kjid}`).then(res => {
					if(res.code == 200){
						uni.showToast({
							title: this.t('deleteSpaceSuccess'),
							icon: 'success',
							duration: 2000
						});
						uni.removeStorage({
							key:'kjid'
						})
						setTimeout(() => {
							uni.reLaunch({
								url:'/pages/index/index'
							})
						}, 1500);
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration:3000
						})
					}
				})
			},
			// 请求空间详情
			getxq(){
				this.$http.get(`/bst/space/${this.kjid}`).then(res => {
					if(res.code == 200){
						this.kjobj = res.data
					}
				})
			},
			// 点击自定义返回上一级
			btnback() {
				uni.navigateBack()
			},
			// 多语言翻译函数
			t(key) {
				return i18n.t(key);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tc {
		width: 750rpx;
		height: 118rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		text-align: center;
		line-height: 118rpx;
		font-size: 36rpx;
		color: #FF5353;
		position: fixed;
		bottom: 0;
		left: 0;
		box-shadow: 0 20rpx 40rpx -6rpx black;
	}

	.ul {
		margin-top: 44rpx;
		background-color: #fff;

		.li {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #D8D8D8;
			padding-right: 22rpx;

			.lt {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				color: #3D3D3D;
				padding: 24rpx;
				box-sizing: border-box;

				image {
					width: 80rpx;
					height: 80rpx;
					margin-right: 46rpx;
				}
			}

			.device-arrow {
				font-size: 50rpx;
				color: #bbb;
				margin-left: 20rpx;
			}
		}
	}

	.namecike {
		width: 750rpx;
		height: 154rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin-top: 60rpx;
		padding: 32rpx;
		box-sizing: border-box;

		.xiao {
			font-size: 28rpx;
			color: #7F7F7F;
		}

		.da {
			font-size: 32rpx;
			color: #3D3D3D;
			margin-top: 10rpx;
		}
	}

	.img {
		width: 272rpx;
		height: 272rpx;
		margin: auto;
		margin-top: 250rpx;

		image {
			width: 272rpx;
			height: 272rpx;
			border-radius: 50%;
		}
	}

	.tabback {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 170rpx;
		padding: 0 20rpx;
		padding-top: 80rpx;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999 !important;
		background-color: #fff;
		box-shadow: -140rpx -20rpx 40rpx -10rpx black;

		.rtjt {
			font-size: 36rpx;
		}

		.name {
			font-size: 36rpx;
			color: #3D3D3D;
		}

		.edit {
			font-weight: 500;
			font-size: 36rpx;
			color: #3D3D3D;
		}
	}

	.device-tab {
		background: #F3F5F6;
		height: 92vh;
		overflow: scroll;
	}
</style>