dev/dcp-web-gate/src_old/views/AddFeatures/ballot/ballotBillDirectory.vue

<template>
	 
	<div>
		<banners-zh v-if="language.value == 'CN'"></banners-zh>
		<banners-en v-if="language.value == 'EN'"></banners-en>
		<banners-fr v-if="language.value == 'FR'"></banners-fr>
		<banners-ru v-if="language.value == 'RU'"></banners-ru>
		<!-- 顶部图片 -->
		<div class="topimg">
			<img src="@/assets/ballot/未标题-6_画板 1.png" alt="" />
			<!-- <div class="backButton" @click="toHome">
                <img src="@/assets/ballot/编组 16.png" alt="">
            </div> -->
		</div>
		<!-- 选择区域 -->
		<div class="body-info">
			<div class="select-info">
				<el-select v-model="language.value" @change="getChange">
					<el-option
						v-for="(item, index) in options"
						:key="index"
						:label="item.label"
						:value="item.value"
						>{{ item.label }}
					</el-option>
				</el-select>
			</div>
			<div class="main-info" v-if="language.value == 'CN'">
				<div class="table-box"></div>
				<div class="table-info">
					<div class="table-title">
						<div class="title-text" :title="'议 案'">议 案</div>
						<div class="table-action">
							<span>赞成</span><span>反对</span><span>弃权</span>
						</div>
					</div>
					<div class="table-detail">
						<div class="detail-text" :title="itemList.title">
							{{ itemList.title }}
						</div>
						<div class="detail-action">
							<span class="action-1" @click="getColor1">
								<img
									src="@/assets/ballot/圆圈.png"
									alt=""
									v-if="typeNum == 0"
								/>
								<img src="@/assets/ballot/圆圈 (1).png" alt="" v-else />
							</span>
							<span class="action-2" @click="getColor2">
								<img
									src="@/assets/ballot/叉 (1).png"
									alt=""
									v-if="typeNum == 1"
								/>
								<img src="@/assets/ballot/叉.png" alt="" v-else />
							</span>
							<span class="action-3" @click="getColor3">
								<img
									src="@/assets/ballot/分割线 (1).png"
									alt=""
									v-if="typeNum == 2"
								/>
								<img src="@/assets/ballot/分割线.png" alt="" v-else />
							</span>
						</div>
					</div>
				</div>
				<div class="sub-btn">
					<!-- <div class="success-btn">全部赞成</div> -->
					<el-button class="up-sub" @click="getSuccess" :disabled="disabled"
						>提交
					</el-button>
				</div>
				<div class="table-bottom"></div>
				<div class="user-btn" v-if="selectBtn">
					<div class="user-btn-text">是否确认提交？</div>
					<div class="btn-user-info">
						<el-button
							class="btn-user-info-ok"
							@click="sureToGet"
							:disabled="disabled"
							>确认</el-button
						>
						<div class="btn-user-info-canel" @click="notToGet">取消</div>
					</div>
				</div>
				<div class="big-success" v-if="successUp">
					<img src="@/assets/ballot/success-ui.png" alt="" class="pic-model" />
					<div class="text-success">提交成功!</div>
				</div>
			</div>
			<div class="main-info" v-if="language.value == 'EN'">
				<div class="table-box"></div>
				<div class="table-info">
					<div class="table-title">
						<div class="title-text" :title="'Proposal'">Proposal</div>
						<div class="table-action">
							<span>Agree</span><span>Disagree</span><span>Abstain</span>
						</div>
					</div>
					<div class="table-detail">
						<div class="detail-text" :title="itemList.titleEn">
							{{ itemList.titleEn }}
						</div>
						<div class="detail-action">
							<span class="action-1" @click="getColor1">
								<img
									src="@/assets/ballot/圆圈.png"
									alt=""
									v-if="typeNum == 0"
								/>
								<img src="@/assets/ballot/圆圈 (1).png" alt="" v-else />
							</span>
							<span class="action-2" @click="getColor2">
								<img
									src="@/assets/ballot/叉 (1).png"
									alt=""
									v-if="typeNum == 1"
								/>
								<img src="@/assets/ballot/叉.png" alt="" v-else />
							</span>
							<span class="action-3" @click="getColor3">
								<img
									src="@/assets/ballot/分割线 (1).png"
									alt=""
									v-if="typeNum == 2"
								/>
								<img src="@/assets/ballot/分割线.png" alt="" v-else />
							</span>
						</div>
					</div>
				</div>
				<div class="sub-btn">
					<!-- <div class="success-btn">全部赞成</div> -->
					<el-button class="up-sub" @click="getSuccess" :disabled="disabled"
						>Submit
					</el-button>
				</div>
				<div class="table-bottom"></div>
				<div class="user-btn" v-if="selectBtn">
					<div class="user-btn-text">Are you sure you want to submit?</div>
					<div class="btn-user-info">
						<el-button
							class="btn-user-info-ok"
							@click="sureToGet"
							:disabled="disabled"
							>Confirm</el-button
						>
						<div class="btn-user-info-canel" @click="notToGet">Cancel</div>
					</div>
				</div>
				<div class="big-success" v-if="successUp">
					<img src="@/assets/ballot/success-ui.png" alt="" class="pic-model" />
					<div class="text-success">Submission successful!</div>
				</div>
			</div>
			<div class="main-info" v-if="language.value == 'FR'">
				<div class="table-box"></div>
				<div class="table-info">
					<div class="table-title">
						<div class="title-text-info" :title="'Proposition'">
							Proposition
						</div>
						<div class="table-action-info">
							<span>D'accord</span><span>S'opposer</span><span>S'abstenir</span>
						</div>
					</div>
					<div class="table-detail">
						<div class="detail-text-info" :title="itemList.titleFr">
							{{ itemList.titleFr }}
						</div>
						<div class="detail-action-info">
							<span class="action-1" @click="getColor1">
								<img
									src="@/assets/ballot/圆圈.png"
									alt=""
									v-if="typeNum == 0"
								/>
								<img src="@/assets/ballot/圆圈 (1).png" alt="" v-else />
							</span>
							<span class="action-2" @click="getColor2">
								<img
									src="@/assets/ballot/叉 (1).png"
									alt=""
									v-if="typeNum == 1"
								/>
								<img src="@/assets/ballot/叉.png" alt="" v-else />
							</span>
							<span class="action-3" @click="getColor3">
								<img
									src="@/assets/ballot/分割线 (1).png"
									alt=""
									v-if="typeNum == 2"
								/>
								<img src="@/assets/ballot/分割线.png" alt="" v-else />
							</span>
						</div>
					</div>
				</div>
				<div class="sub-btn">
					<!-- <div class="success-btn">全部赞成</div> -->
					<el-button class="up-sub" @click="getSuccess" :disabled="disabled"
						>Soumettre
					</el-button>
				</div>
				<div class="table-bottom"></div>
				<div class="user-btn" v-if="selectBtn">
					<div class="user-btn-text">Etes-vous sûr de vouloir soumettre ?</div>
					<div class="btn-user-info">
						<el-button
							class="btn-user-info-ok"
							@click="sureToGet"
							:disabled="disabled"
							>Confirmer
						</el-button>
						<div class="btn-user-info-canel" @click="notToGet">Annuler</div>
					</div>
				</div>
				<div class="big-success" v-if="successUp">
					<img src="@/assets/ballot/success-ui.png" alt="" class="pic-model" />
					<div class="text-success">Soumission réussie!</div>
				</div>
			</div>
			<div class="main-info" v-if="language.value == 'RU'">
				<div class="table-box"></div>
				<div class="table-info">
					<div class="table-title">
						<div class="title-text-info" :title="'Предложения'">
							Предложения
						</div>
						<div class="table-action-info">
							<span>Согласиться</span><span>Не согласиться</span
							><span>Воздержаться</span>
						</div>
					</div>
					<div class="table-detail">
						<div class="detail-text-info" :title="itemList.titleRu">
							{{ itemList.titleRu }}
						</div>
						<div class="detail-action-info">
							<span class="action-1" @click="getColor1">
								<img
									src="@/assets/ballot/圆圈.png"
									alt=""
									v-if="typeNum == 0"
								/>
								<img src="@/assets/ballot/圆圈 (1).png" alt="" v-else />
							</span>
							<span class="action-2" @click="getColor2">
								<img
									src="@/assets/ballot/叉 (1).png"
									alt=""
									v-if="typeNum == 1"
								/>
								<img src="@/assets/ballot/叉.png" alt="" v-else />
							</span>
							<span class="action-3" @click="getColor3">
								<img
									src="@/assets/ballot/分割线 (1).png"
									alt=""
									v-if="typeNum == 2"
								/>
								<img src="@/assets/ballot/分割线.png" alt="" v-else />
							</span>
						</div>
					</div>
				</div>
				<div class="sub-btn">
					<!-- <div class="success-btn">全部赞成</div> -->
					<el-button class="up-sub" @click="getSuccess" :disabled="disabled"
						>Оформить
					</el-button>
				</div>
				<div class="table-bottom"></div>
				<div class="user-btn" v-if="selectBtn">
					<div class="user-btn-text">Точно хотите оформить?</div>
					<div class="btn-user-info">
						<el-button
							class="btn-user-info-ok"
							@click="sureToGet"
							:disabled="disabled"
							>Подтвердить
						</el-button>
						<div class="btn-user-info-canel" @click="notToGet">Отменить</div>
					</div>
				</div>
				<div class="big-success" v-if="successUp">
					<img src="@/assets/ballot/success-ui.png" alt="" class="pic-model" />
					<div class="text-success">Вы успешно оформили!</div>
				</div>
			</div>
			<div class="bottom-list"></div>
		</div>
		<div class="body-box"></div>
		<!-- 底部图片 -->
		<footer-zh v-if="language.value == 'CN'"></footer-zh>
		<footer-en v-if="language.value == 'EN'"></footer-en>
		<footer-fr v-if="language.value == 'FR'"></footer-fr>
		<footer-ru v-if="language.value == 'RU'"></footer-ru>
	</div>
</template>

<script>
import { getToken } from '@/api/token'
import footerZh from '@/components/footersNewZH'
import footerEn from '@/components/footersNewEN'
import footerFr from '@/components/footersNewFR'
import footerRu from '@/components/footersNewRU'
import bannersZh from '@/components/ballotTopBannerZH'
import bannersEn from '@/components/ballotTopBannerEN'
import bannersFr from '@/components/ballotTopBannerFR'
import bannersRu from '@/components/ballotTopBannerRU'
import { saveOrUpdateMatter } from '@/api/vote/council'
export default {
	name: 'ballotBillDirectory',
	components: {
		footerZh,
		footerEn,
		footerFr,
		footerRu,
		bannersZh,
		bannersEn,
		bannersFr,
		bannersRu,
	},
	data() {
		return {
			disabled: false,
			selectBtn: false,
			itemList: [],
			typeNum: '',
			btnChange: false,
			successUp: false,
			options: [
				{
					value: 'CN',
					label: '中文',
				},
				{
					value: 'EN',
					label: 'English',
				},
				{
					value: 'FR',
					label: 'Français',
				},
				{
					value: 'RU',
					label: 'Русский',
				},
			],
			language: {
				value: 'CN',
			},
		}
	},
	mounted() {
		let user = JSON.parse(sessionStorage.getItem('mettingUser'))
		console.log(user)
		if (user == null) {
			this.$router.push({ path: 'home' })
		} else {
			console.log('你好')
		}
		let language = sessionStorage.getItem('language')
		this.language.value = language
		let item = JSON.parse(sessionStorage.getItem('item'))
		this.itemList = item
		this.typeNum = item.type
	},
	methods: {
		getChange() {
			let language = this.language.value
			sessionStorage.setItem('language', language)
			if (language == 'CN') {
				this.$message.success('正在切换语言...')
			}
			if (language == 'EN') {
				this.$message.success('Switching languages...')
			}
			if (language == 'FR') {
				this.$message.success('Changer de langue...')
			}
			if (language == 'RU') {
				this.$message.success('Он меняет язык.')
			}
			setTimeout(() => {
				location.reload()
			}, 1000)
		},
		// 返回首页
		toHome() {
			this.$router.push({ path: 'home' })
		},
		// 选择
		getColor1() {
			this.typeNum = 0
			this.btnChange = true
		},
		getColor2() {
			this.typeNum = 1
			this.btnChange = true
		},
		getColor3() {
			this.typeNum = 2
			this.btnChange = true
		},
		getSuccess() {
			this.selectBtn = true
		},
		toSuccess() {
			this.$router.push({ path: 'ballotDrawingBoardPalette' })
		},
		sureToGet() {
			if (!this.itemList.voted) {
				this.successUp = true
				this.selectBtn = false
				let id = JSON.parse(sessionStorage.getItem('mettingUser')).id
				if (this.btnChange == false) {
					let meetingGeidcoMatterNumDetail = [
						{
							matterId: this.itemList.id,
							type: 0,
							language: this.language.value,
						},
					]
					console.log(meetingGeidcoMatterNumDetail, 111)
					getToken()
						.then((res) => {
							let token = res.data
							console.log('token====', token)
							saveOrUpdateMatter(
								JSON.stringify(meetingGeidcoMatterNumDetail),
								id,
								token
							).then((res) => {
								console.log(res)
								if (res.status == 200) {
									this.disabled = true
									setTimeout(() => {
										this.$router.push({ path: 'ballotDrawingBoardPalette' })
									}, 1500)
								}
							})
						})
						.catch((error) => {})
				} else {
					let meetingGeidcoMatterNumDetail = [
						{
							matterId: this.itemList.id,
							type: this.typeNum,
							language: this.language.value,
						},
					]
					console.log(meetingGeidcoMatterNumDetail, 222)
					getToken()
						.then((res) => {
							let token = res.data
							console.log('token====', token)
							saveOrUpdateMatter(
								JSON.stringify(meetingGeidcoMatterNumDetail),
								id,
								token
							).then((res) => {
								console.log(res)
								if (res.status == 200) {
									this.disabled = true
									setTimeout(() => {
										this.$router.push({ path: 'ballotDrawingBoardPalette' })
									}, 1500)
								}
							})
						})
						.catch((error) => {})
				}
			} else {
				console.log('请勿重复提交')
			}
			// });
		},
		notToGet() {
			this.selectBtn = false
		},
	},
}
</script>

<style scoped>
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	/* vertical-align: text-top; */
}

html,
body,
#app {
	width: 100%;
	height: 100%;
}

.topimg {
	width: 100%;
	background-color: #f2f2f2;
}

.topimg > img {
	width: 100%;
	padding: 0;
	position: relative;
}

.backButton {
	width: 134px;
	height: 41px;
	position: absolute;
	top: 46px;
	right: 380px;
}

.backButton:hover {
	cursor: pointer;
}

.backButton > img {
	width: 100%;
	height: 100%;
}

.body-info {
	padding: 0;
	width: 100%;
	background-color: #f2f2f2;
}

.body-box {
	width: 100%;
	height: 50px;
	background-color: #f2f2f2;
}

.main-info {
	width: 1178px;
	margin: 0 auto;
	transform: translateY(20px);
	background-color: #ffffff;
	position: relative;
}

.bottom-list {
	width: 100%;
	height: 300px;
	background-color: #f2f2f2;
}

.select-info {
	margin-left: 68%;
	margin-bottom: 70px;
	transform: translateY(40px);
}

.table-box {
	width: 100%;
	height: 39px;
}

.table-info {
	width: 1100px;
	margin: 0 auto;
}

.table-bottom {
	width: 100%;
	height: 50px;
}

.table-title {
	width: 100%;
	height: 77px;
	background-color: #e9e9e9;
	border: 1px solid #d3d3d3;
	display: flex;
}

.title-text {
	width: 75%;
	height: 77px;
	line-height: 77px;
	font-size: 25px;
	font-family: AlibabaPuHuiTiR;
	font-weight: 400;
	color: #666666;
	text-align: center;
}

.table-action {
	width: 25%;
	height: 77px;
	line-height: 77px;
	font-size: 22px;
	font-family: AlibabaPuHuiTiR;
	font-weight: 400;
	color: #666666;
	border-left: 1px solid #d3d3d3;
	display: flex;
	justify-content: space-around;
}

.title-text-info {
	width: 60%;
	height: 77px;
	line-height: 77px;
	font-size: 25px;
	padding-left: 15px;
	font-family: AlibabaPuHuiTiR;
	font-weight: 400;
	color: #666666;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.table-action-info {
	width: 40%;
	height: 77px;
	line-height: 77px;
	font-size: 20px;
	font-family: AlibabaPuHuiTiR;
	font-weight: 400;
	color: #666666;
	border-left: 1px solid #d3d3d3;
	display: flex;
	justify-content: space-around;
}

.detail-text-info {
	width: 60%;
	height: 77px;
	padding-top: 18px;
	font-size: 20px;
	font-family: AlibabaPuHuiTiR;
	font-weight: 400;
	color: #666666;
	margin-left: 30px;
	padding-right: 60px;
	word-wrap: break-word;
	overflow: hidden;
}

.detail-action-info {
	width: 40%;
	height: 77px;
	display: flex;
	margin-left: -30px;
	justify-content: space-around;
	border-left: 1px solid #d3d3d3;
}

.table-detail:nth-child(2n + 1) {
	width: 100%;
	height: 77px;
	border-left: 1px solid #d3d3d3;
	border-right: 1px solid #d3d3d3;
	background-color: #f0f9fd;
	display: flex;
}

.table-detail {
	width: 100%;
	height: 77px;
	border-left: 1px solid #d3d3d3;
	border-right: 1px solid #d3d3d3;
	background-color: #fff;
	display: flex;
}

.table-detail:last-child {
	border-bottom: 1px solid #d3d3d3;
}

.detail-text {
	width: 75%;
	height: 77px;
	padding-top: 18px;
	font-size: 20px;
	font-family: AlibabaPuHuiTiR;
	font-weight: 400;
	color: #666666;
	margin-left: 30px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.detail-action {
	width: 25%;
	height: 77px;
	display: flex;
	margin-left: -30px;
	justify-content: space-around;
	border-left: 1px solid #d3d3d3;
}

.action-1 {
	transform: translateY(23px);
	width: 30px;
	height: 30px;
}

.action-1 > img {
	width: 100%;
	height: 100%;
}

.action-2 {
	transform: translateY(26px);
	width: 24px;
	height: 24px;
}

.action-2 > img {
	width: 100%;
	height: 100%;
}

.action-3 {
	transform: translateY(23px);
	width: 30px;
	height: 20px;
}

.action-3 > img {
	width: 100%;
	height: 150%;
}

.sub-btn {
	width: 100%;
	height: 60px;
	margin-top: 45px;
	cursor: pointer;
}

.success-btn {
	width: 200px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	background: #0099ff;
	border-radius: 10px;
	font-size: 25px;
	font-family: AlibabaPuHuiTiR;
	font-weight: 400;
	color: #ffffff;
	margin-left: 316px;
}

.up-sub {
	width: 200px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	font-size: 25px;
	font-family: AlibabaPuHuiTiR;
	font-weight: 400;
	color: #ffffff;
	background: #ff7648;
	border-radius: 10px;
	margin-left: 50%;
	transform: translateX(-50%);
}

.big-success {
	width: 406px;
	height: 300px;
	background: #ffffff;
	box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
	z-index: 999 !important;
	border-radius: 20px;
	position: relative;
	position: absolute;
	top: -20px;
	left: 387px;
}

.user-btn {
	width: 406px;
	height: 300px;
	background: #ffffff;
	box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
	z-index: 999 !important;
	border-radius: 20px;
	position: relative;
	position: absolute;
	top: -20px;
	left: 387px;
}

.user-btn-text {
	width: 100%;
	height: 30px;
	line-height: 30px;
	text-align: center;
	margin-top: 20%;
	font-size: 25px;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.85);
}

.btn-user-info {
	width: 100%;
	height: 40px;
	display: flex;
	justify-content: space-around;
	margin-top: 16%;
}

.btn-user-info-ok {
	width: 106px;
	height: 56px;
	background: #00b4ff;
	border-radius: 6px;
	text-align: center;
	line-height: 56px;
	font-size: 20px;
	font-family: PingFangSC-Regular, PingFang SC;
	color: #fff;
	cursor: pointer;
}

.btn-user-info-canel {
	width: 106px;
	height: 56px;
	background: #c0c0c0;
	border-radius: 6px;
	text-align: center;
	line-height: 56px;
	font-size: 20px;
	font-family: PingFangSC-Regular, PingFang SC;
	color: #fff;
	cursor: pointer;
}

.pic-model {
	width: 86px;
	height: 85px;
	margin-left: 50%;
	transform: translateX(-50%);
	margin-top: 15%;
}

.text-success {
	width: 406px;
	height: 24px;
	line-height: 24px;
	font-size: 25px;
	text-align: center;
	margin-top: 30px;
	font-family: AlibabaPuHuiTiR;
	font-weight: 400;
	color: #65c823;
}

.pic-model > img {
	width: 100%;
	height: 100%;
}

.action-1:hover {
	cursor: pointer;
}

.action-2:hover {
	cursor: pointer;
}

.action-3:hover {
	cursor: pointer;
}

.success-btn:hover {
	cursor: pointer;
}

.up-sub:hover {
	cursor: pointer;
}
</style>