productDev/dmvisit.git

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,618 @@
			<template>
			<page-meta :page-style="'overflow:'+(pageShow?'hidden':'visible')"></page-meta>
			<view class="yuyue">
			<view class="yuyue_head">
			<view class="yuyue_head_input">
			<u--input
			placeholder="æç´¢"
			prefixIcon="search"
			v-model="meetingName"
			@confirm="sou"
			prefixIconStyle="font-size: 22px; color: #909399"
			></u--input>
			</view>
			<view class="yuyue_head_list">
			<view class="yuyue_head_list_item" v-for="(item, index) in cate" :key="index" @click="clickItem(index)">
			<text :class="i === index ? 'yuyue_head_list_item_active' : ''">{{item.name}}</text>
			<view class="yuyue_head_list_item_h" v-show="i === index"></view>
			</view>
			</view>
			</view>

			<view class="yuyue_content" v-if="list && list.length > 0">
			<view class="yuyue_content_item" v-for="(item, index) in list" :key="index">
			<view class="item_a" @click="jump(item.id)">
			<view class="item_a_title">{{item.meetingName}}</view>
			<view class="item_a_1 item_a_two" v-if="item.meetingStatus === 1">æªå¼å§</view>
			<view class="item_a_1 item_a_one" v-else-if="item.meetingStatus === 2">è¿è¡ä¸</view>
			<view class="item_a_1 item_a_three" v-else>å·²ç»æ</view>
			</view>
			<view class="item_b" @click="jump(item.id)"></view>
			<view class="item_c" @click="jump(item.id)">
			<view class="item_c_item">
			<text>ä¼è®®æ¶é´ï¼</text>
			<text>{{item.meetingDate}} {{item.meetingTime}}</text>
			</view>
			<view class="item_c_item">
			<text>ä¼è®®å®¤ï¼</text>
			<text>{{item.roomName}}</text>
			</view>
			<view class="item_c_item">
			<text>é¢çº¦äººï¼</text>
			<text>{{item.bookingUser}}</text>
			</view>
			</view>
			<view class="item_d" v-if="i === 0">
			<view class="item_d_left">
			<view class="item_d_left_item" @click.stop="copy(item)" v-if="item.meetingStatus !== 3">
			<image src="@/static/meeting/icon/ic_copy@2x.png" mode="widthFix"></image>
			<text>å¤å¶</text>
			</view>
			<view class="item_d_left_item" @click="fenxiang(item)" v-if="item.meetingStatus !== 3">
			<button open-type="share"></button>
			<image src="@/static/meeting/icon/ic_fenxiang@2x.png" mode="widthFix"></image>
			<text>åäº«</text>
			</view>
			<view class="item_d_left_item" v-if="item.meetingStatus === 1" @click.stop="closeRoom(item.meetingStatus, item.id)">
			<image src="@/static/meeting/icon/ic_cancel@2x.png" mode="widthFix"></image>
			<text>åæ¶</text>
			</view>
			</view>
			<view class="item_d_right" @click.stop="getQrCodes(item.id, item.roomName)">
			å¼é¨ç
			</view>
			</view>
			</view>
			</view>

			<view class="yuyue_content" v-else>
			<view class="yuyue_content_wu">
			<image src="@/static/meeting/common/364.png" mode="widthFix"></image>
			</view>
			</view>

			<!-- å¼é¨ç -->
			<view class="details_ma">
			<u-popup :show="show" :closeable="true" :safeAreaInsetBottom="false" :round="0" mode="center" @close="close">
			<view class="box">
			<text class="box_a">{{roomName \|\| ''}}</text>
			<!-- <text class="box_b">äºç»´ç {{time}}ç§åææ</text> -->
			<text class="box_b" v-if="time > 0">äºç»´ç {{time}}ç§åææ</text>
			<text class="box_b" v-else>äºç»´ç å·²è¿æï¼è¯·ç¹å»äºç»´ç å·æ°</text>
			<view class="qrcode" @click="Refresh(1)">
			<image :src="qrurl" mode="widthFix"></image>
			</view>
			<!-- <text class="box_c">åºç¤ºè¯¥äºç»´ç ï¼æ«ç è¿å¥ä¼è®®å®¤</text>
			<text class="box_d">å¦ææä¸å¼è¯·èç³»ç®¡çåï¼</text>
			<text class="box_e">æçº¢å 18899039483</text> -->
			</view>
			</u-popup>
			</view>

			<!-- åæ¶ä¼è®® -->
			<u-modal
			:show="show1"
			title="æç¤º"
			content='æ¯å¦ç¡®è®¤åæ¶å½åä¼è®®'
			@confirm="confirm"
			@cancel="close1"
			ref="uModal"
			:showCancelButton="true"
			asyncClose="true"></u-modal>
			</view>
			</template>

			<script>
			import { mapState } from 'vuex'
			import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
			export default {
			data() {
			return {
			i: 0,
			show: false,
			cate: [
			{ name: 'æªå¼å§', id: 1 },
			{ name: 'å·²ç»æ', id: 2 }
			],
			pageShow: false,
			id: '',
			meetingName: '',
			show1: false,
			val: '',
			list: [],
			next: false,
			page: 0,
			time: 0,
			roomName: '',
			link: '',
			qrurl: '',
			timer: null,
			timeValue: '',
			Id: '',
			share: {
			title: '',
			path: '',
			imageUrl: 'https://dmtest.ahapp.net/file/projects/20230511/13f256b832db4a4fadc5e6770f5727bf.png'
			}
			};
			},
			computed: {
			...mapState(['token'])
			},
			components: { tkiQrcode },
			onReachBottom() {
			this.getList()
			},
			onLoad() {
			this.getList()
			this.getSYSTEM()
			},
			onShareAppMessage({from,target}) {
			if (from == 'button') {
			return this.share
			}
			},
			methods: {
			// åäº«
			fenxiang(item) {
			this.share.title = item.meetingName
			this.share.path = `/packagesMine/meetingDetails/meetingDetails?shareId=${item.id}`
			},
			// å·æ°äºç»´ç
			Refresh(type) {
			if (this.time !== 0) return
			uni.showLoading({
			title: 'å è½½ä¸',
			mask: true
			});
			uni.request({
			url: `${this.$baseUrl}web/meeting/getQrCodeImg?id=${this.Id}&token=${this.token}`, //urlå°å
			method: 'GET',
			responseType: 'arraybuffer',
			header: {
			'Content-Type': 'application/json'
			},
			success: res => {
			const arrayBuffer = new Uint8Array(res.data)
			const base64 = "data:image/png;base64," + uni.arrayBufferToBase64(arrayBuffer) //è¿ééè¦æ·»å åç¼
			this.qrurl = base64
			if (type === 1) {
			this.time = Number(this.timeValue) * 60
			this.getTime()
			}
			},
			complete() {
			uni.hideLoading();
			}
			});
			},
			getTime() {
			this.timer = setInterval(() => {
			if (this.time === 0) {
			clearInterval(this.timer)
			this.timer = null
			this.time = 0
			return
			}
			this.time = this.time - 1
			}, 1000)
			},
			getSYSTEM() {
			this.$u.api.getSystemDictData({
			dictCode: 'SYSTEM',
			label: 'QR_OPENBOOK_VALIDTIME'
			}).then(res => {
			this.time = Number(res.data.code) * 60
			this.timeValue = Number(res.data.code)
			})
			this.$u.api.getSystemDictData({
			dictCode: 'SYSTEM',
			label: 'H5_LINK_ADDR'
			}).then(res => {
			this.link = res.data.code
			})
			},
			sou() {
			this.list = []
			this.next = false
			this.page = 0
			this.getList()
			},
			copy(item) {
			let val = `${item.bookingUser} éè¯·æ¨å å¥ä¼è®®
			ä¼è®®ä¸»é¢ï¼${item.meetingName}
			ä¼è®®å®¤ï¼${item.roomName}
			ä¼è®®æ¶é´ï¼${item.meetingDate} ${item.meetingTime}
			ç¹å»é¾æ¥ç´æ¥å å¥ä¼è®®ï¼
			${this.link}?id=${item.id}`
			uni.setClipboardData({
			data: val,
			success: function () {
			uni.showToast({
			title: 'ä¼è®®ä¿¡æ¯å¤å¶æåï¼å»åäº«ç»åäºå§~',
			icon:'none',
			duration: 2000
			});
			}
			});
			},
			close1() {
			this.show1 = false
			},
			closeRoom(status, id) {
			if (status !== 1) {
			uni.showToast({
			title: 'ä¼è®®ä¸å¯åæ¶',
			icon: "none",
			duration: 2000
			});
			return
			}
			this.id = id
			this.show1 = true;
			},
			confirm() {
			this.$u.api.reservationCancel({
			id: this.id
			}).then(res => {
			this.show1 = false;
			if (res.code === 200) {
			uni.showToast({
			title: 'åæ¶æå',
			icon: "none",
			duration: 2000
			});
			this.list.forEach((item, index) => {
			if (item.id === this.id) {
			this.list.splice(index, 1)
			}
			})
			}
			})
			},
			jump(id) {
			uni.navigateTo({
			url: `/packagesMine/meetingDetails/meetingDetails?id=${id}`
			});
			},
			close() {
			this.time = 0
			clearInterval(this.timer)
			this.timer = null
			this.show = false
			this.pageShow = false
			uni.setScreenBrightness({
			value: 0.5,
			success: function () {
			console.log('success');
			}
			});
			},
			getQrCodes(id, roomName) {
			this.Id = id
			this.time = 0
			this.Refresh()
			this.time = this.timeValue * 60
			this.getTime()
			this.pageShow = true
			this.roomName = roomName

			this.show = true
			uni.setScreenBrightness({
			value: 1,
			success: function () {
			console.log('success');
			}
			});
			},
			clickItem(index) {
			this.i = index
			this.list = []
			this.next = false
			this.page = 0
			this.getList()
			},
			getList() {
			if (!this.next) {
			this.page = this.page + 1
			this.$u.api.myMeetingPage({
			capacity: 10,
			page: this.page,
			model: {
			queryType: 2,
			roomsName: this.meetingName,
			status: this.cate[this.i].id
			}
			}).then(res => {
			if (res.data.records.length > 0) {
			this.list = [...this.list, ...res.data.records]
			}
			if (res.data.records.length < 10) {
			this.next = true
			}
			})
			}
			}
			}
			}
			</script>

			<style lang="scss">
			.yuyue {
			width: 100%;
			.details_ma /deep/ {
			.u-popup__content {
			width: 100%;
			.box {
			width: 100%;
			padding: 80rpx 0;
			box-sizing: border-box;
			background-color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			.box_a {
			padding: 0 30rpx;
			box-sizing: border-box;
			font-size: 36rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #222222;
			}
			.box_b {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #0055FF;
			margin-top: 40rpx;
			}
			.qrcode {
			width: 440rpx;
			height: 440rpx;
			margin-top: 40rpx;
			image {
			width: 100%;
			height: 100%;
			}
			}
			.box_c {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-top: 40rpx;
			}
			.box_d {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			margin-top: 32rpx;
			}
			.box_e {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			}
			}
			}
			}
			.yuyue_head {
			padding: 30rpx;
			background-color: #ffffff;
			box-sizing: border-box;
			position: sticky;
			top: 0;
			z-index: 999;
			.yuyue_head_input /deep/ {
			width: 100%;
			height: 72rpx;
			background: #F7F7F7;
			border-radius: 4rpx;
			.u-border {
			border: none !important;
			}
			}
			.yuyue_head_list {
			width: 100%;
			display: flex;
			align-items: center;
			margin-top: 30rpx;
			.yuyue_head_list_item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			position: relative;
			text {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			}
			.yuyue_head_list_item_active {
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #222222;
			}
			.yuyue_head_list_item_h {
			width: 60rpx;
			height: 4rpx;
			background: #0055FF;
			border-radius: 3rpx;
			position: absolute;
			bottom: -30rpx;
			left: 50%;
			transform: translate(-50%, 0);
			}
			}
			}
			}
			.yuyue_content {
			width: 100%;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			.yuyue_content_wu {
			width: 100%;
			margin-top: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			image {
			width: 340rpx;
			height: 364rpx;
			}
			}
			.yuyue_content_item {
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			background: #ffffff;
			margin-bottom: 20rpx;
			&:last-child {
			margin-bottom: 0 !important;
			}
			.item_a {
			width: 100%;
			height: 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.item_a_title {
			flex: 1;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #222222;
			}
			.item_a_one {
			border: 2rpx solid #F62710 !important;
			font-size: 22rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #F62710;
			}
			.item_a_two {
			border: 2rpx solid #0055FF !important;
			font-size: 22rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #0055FF;
			}
			.item_a_three {
			border: 2rpx solid #999999 !important;
			font-size: 22rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			}
			.item_a_1 {
			flex-shrink: 0;
			padding: 0 8rpx;
			height: 38rpx;
			box-sizing: border-box;
			line-height: 38rpx;
			text-align: center;
			border-radius: 4rpx;
			margin-left: 20rpx;
			}
			}
			.item_b {
			width: 100%;
			height: 1rpx;
			background-color: #E5E5E5;
			margin: 28rpx 0 30rpx 0;
			}
			.item_c {
			width: 100%;
			display: flex;
			flex-direction: column;
			.item_c_item {
			display: flex;
			align-items: flex-start;
			margin-bottom: 24rpx;
			&:last-child {
			margin-bottom: 0 !important;
			}
			text {
			&:first-child {
			flex-shrink: 0;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			}
			&:last-child {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			}
			}
			}
			}
			.item_d {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 40rpx;
			.item_d_left {
			display: flex;
			align-items: center;
			.item_d_left_item {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 40rpx;
			position: relative;
			overflow: hidden;
			&:last-child {
			margin-right: 0 !important;
			}
			button {
			position: absolute;
			width: 300rpx;
			height: 300rpx;
			border: none;
			top: -20rpx;
			left: -20rpx;
			background: rgba(0, 0, 0, 0);
			}
			image {
			width: 44rpx;
			height: 44rpx;
			margin-right: 8rpx;
			}
			text {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			}
			}
			}
			.item_d_right {
			width: 136rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			background: #0055FF;
			border-radius: 4rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			}
			}
			}
			}
			}
			</style>