dev/dcp-app-gate/pages/service/membership/index.vue

<template>
	<view class="my-application">
		<u-navbar :back-text="i18n('Back')" :back-text-style="backStyle" :title-width="350" back-icon-color="#fff"
			title-color="#fff" :background="background" :title="i18n('MembershipApplication')">
		</u-navbar>
		<view class="section">
			<view class="title">{{$t('common.Requirements')}}</view>
			<view class="cont">{{$t('common.EnterRequirementsFirst')}}</view>
			<view class="cont">{{$t('common.EnterRequirementsSecond')}}</view>
			<view class="cont">{{$t('common.EnterRequirementsThird')}}</view>
		</view>
		<view class="section">
			<view class="title">{{$t('common.RightsandObligations')}}</view>
			<view class="cont">{{$t('common.EnterRequirementsFourth')}}</view>
			<view class="cont">{{$t('common.EnterRequirementsFifth')}}</view>
		</view>
		<view class="section">
			<view class="title">{{$t('common.DescriptionofMembershipService')}}</view>
			<view class="cont-box">
				<u-row gutter="0">
					<u-col span="6">
						<view class="cont">1、{{$t('common.InformationService')}}</view>
					</u-col>
					<u-col span="6">
						<view class="cont">2、{{$t('common.PublicityService')}}</view>
					</u-col>
					<u-col span="6">
						<view class="cont">3、{{$t('common.ExchangeatConferences')}}</view>
					</u-col>
					<u-col span="6">
						<view class="cont">4、{{$t('common.TrainingandSeminars')}}</view>
					</u-col>
					<u-col span="6">
						<view class="cont">5、{{$t('common.ResourceSharing')}}</view>
					</u-col>
					<u-col span="6">
						<view class="cont">6、{{$t('common.BusinessDevelopment')}}</view>
					</u-col>
					<u-col span="6">
						<view class="cont">7、{{$t('common.ProfessionalAlliancesactivities')}}</view>
					</u-col>
					<u-col span="6">
						<view class="cont">8、{{$t('common.CustomizedService')}}</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<view class="section">
			<view class="guide" @click="guideTable = true">
				<u-icon name="order" class="custom-style"></u-icon>
				{{$t('common.EnterprisesMembers')}}
			</view>
			<view class="guide" @click="toPDFView('def/toPDFViewList.pdf')">
				<u-icon name="order" class="custom-style"></u-icon>
				{{$t('common.2020MembershipServiceGuide')}}
			</view>
			<view class="reading">
				<u-checkbox-group>
					<u-checkbox v-model="readingValue">{{$t('common.Ihavereadandagree')}}</u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="button">
				<u-button type="primary" :disabled="!readingValue" class="custom-style" @click="toForm">
					{{$t('common.Next')}}
				</u-button>
			</view>
		</view>
		<u-toast ref="uToast" />
		<!-- 会费弹框 -->
		<u-popup v-model="guideTable" mode="bottom" height="50%">
			<view class="tableBox">
				<u-row gutter="0">
					<u-col span="8">
						<view class="th" :style="locale == 'zh'?'padding:12upx 0':'padding:32upx 0'">
							{{$t('common.Membertype')}}
						</view>
					</u-col>
					<u-col span="4">
						<view class="th tdr">{{$t('common.Membershipfeestandard')}}</view>
					</u-col>
				</u-row>
				<u-row gutter="0">
					<u-col span="4">
						<view class="td" :style="locale == 'zh'?'padding: 150upx 0':'padding: 274upx 0'">
							{{$t('common.Domestic')}}
						</view>
					</u-col>
					<u-col span="8">
						<u-row gutter="0">
							<u-col span="6">
								<view class="td">{{$t('common.Councilmembers')}}</view>
							</u-col>
							<u-col span="6">
								<view class="td tdr">{{$t('common.RMB800000')}} / {{$t('common.year')}}</view>
							</u-col>
						</u-row>
						<u-row gutter="0">
							<u-col span="6">
								<view class="td tdb">
									<view>{{$t('common.FortuneGlobal500enterprises')}}</view>
									<view class="tds">
										({{$i18n.locale=='zh'?'或相应规模企业':'or enterprises of similar size'}})</view>
								</view>
							</u-col>
							<u-col span="6">
								<view class="td tdr tdb"
									:style="locale == 'zh'?'padding: 26upx 10upx':'padding:42upx 10upx'">
									{{$t('common.RMB500000')}} / {{$t('common.year')}}
								</view>
							</u-col>
						</u-row>
						<u-row gutter="0">
							<u-col span="6">
								<view class="td tdb">
									<view>{{$i18n.locale=='zh'?'大型企业':"Large enterprises"}}</view>
									<view class="tds">
										({{$i18n.locale=='zh'?'中国500强或相应规模企业':'Top 500 Enterprises of China or enterprises of similar size'}})
									</view>
								</view>
							</u-col>
							<u-col span="6">
								<view class="td tdr tdb"
									:style="locale == 'zh'?'padding: 42upx 10upx':'padding:72upx 10upx'">
									{{$t('common.RMB300000')}} / {{$t('common.year')}}
								</view>
							</u-col>
						</u-row>
						<u-row gutter="0">
							<u-col span="6">
								<view class="td" :style="locale == 'zh'?'padding:10upx 0':'padding:30upx 0'">
									{{$i18n.locale=='zh'?'其他企业':"Other enterprises"}}
								</view>
							</u-col>
							<u-col span="6">
								<view class="td tdr">{{$t('common.RMB100000')}} / {{$t('common.year')}}</view>
							</u-col>
						</u-row>
					</u-col>
				</u-row>
				<u-row gutter="0">
					<u-col span="4">
						<view class="td" :style="locale=='zh'?'padding: 40upx 0':'padding:60upx 0'">
							{{$i18n.locale=='zh'?'国际':'International'}}
						</view>
					</u-col>
					<u-col span="8">
						<u-row gutter="0">
							<u-col span="6">
								<view class="td">{{$i18n.locale=='zh'?'企业理事':'Council members'}}</view>
							</u-col>
							<u-col span="6">
								<view class="td tdr" :style="locale=='zh'?'padding:10upx 0':'padding:32upx 0'">
									{{$t('common.$30000')}} / {{$t('common.year')}}
								</view>
							</u-col>
						</u-row>
						<u-row gutter="0">
							<u-col span="6">
								<view class="td">{{$i18n.locale=='zh'?'其他企业':'Other enterprises'}}</view>
							</u-col>
							<u-col span="6">
								<view class="td tdr">{{$t('common.$10000')}} / {{$t('common.year')}}</view>
							</u-col>
						</u-row>
					</u-col>
				</u-row>
				<u-row gutter="0">
					<u-col span="8">
						<view class="td">
							{{$i18n.locale=='zh'?'个人及非盈利机构':'Individuals and non-profit organizations'}}
						</view>
					</u-col>
					<u-col span="4">
						<view class="td tdr" :style="locale=='zh'?'padding:10upx':'padding:32upx 0'">
							{{$i18n.locale=='zh'?'免费':'Free'}}
						</view>
					</u-col>
				</u-row>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: 'MyApplication',
		data() {
			return {
				locale: this.$i18n.locale,
				guideTable: false,
				background: {
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle: {
					color: '#fff'
				},
				readingValue: false
			}
		},
		onLoad(e) {

		},
		methods: {
			i18n(data) {
				return this.$t('common.' + data);
			},
			async toForm() {
				let user = uni.getStorageSync('user');
				let token = uni.getStorageSync('Auth-Token');
				if (user && token) {
					const res = await this.$myRequest({
						url: '/project/baseMemberApplys/getSelfMemberApply'
					});
					let applyData = res.data.baseMemberApplies;
					// console.log(applyData);
					if (applyData) {
						this.$refs.uToast.show({
							title: this.$i18n.locale == 'zh' ? '您已申请！' : 'You have applied!',
							type: 'warning'
						});
						return;
					} else {
						uni.navigateTo({
							url: 'membershipApplication'
						})
					}
				}
				else{
					uni.setStorageSync('pathReminder', '/pages/service/membership/index')
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/public/login?back=1&language=zh"
						})
					}, 1000)
				}
			},
			toPDFView(path, fileName) {
				let pdfPath  = this.$i18n.locale == 'zh'?'def/toPDFViewList.pdf':'def/toPDFViewListEN.pdf'
				uni.downloadFile({
					url: 'https://m.geidcp.com/api/file/pub/' + pdfPath, //下载地址接口返回
					success: (data) => {
						if (data.statusCode === 200) {
							//文件保存到本地
							uni.saveFile({
								tempFilePath: data.tempFilePath, //临时路径
								success: function(res) {
									uni.showToast({
										icon: 'none',
										mask: true,
										title: '文件已保存：' + res.savedFilePath, //保存路径
										duration: 3000,
									});
									setTimeout(() => {
										//打开文档查看
										uni.openDocument({
											filePath: res.savedFilePath,
											success: function(res) {
												// console.log('打开文档成功');
											}
										});
									}, 3000)
								}
							});
						}
					},
					fail: (err) => {
						console.log(err);
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '失败请重新下载',
						});
					},
				});
				console.log('下载成功', 'https://localhost:8080/api/file/pub/' + path);
			},

		}
	}
</script>

<style lang="scss" scoped>
	.my-application {
		.tableBox {
			padding: 30upx;

			.th {
				border-top: 1px solid rgb(228, 231, 237);
				border-left: 1px solid rgb(228, 231, 237);
				border-bottom: 1px solid rgb(228, 231, 237);
				background-color: #f5f6f8;
				padding: 12upx 10upx;
				text-align: center;
			}

			.td {
				border-left: 1px solid rgb(228, 231, 237);
				border-bottom: 1px solid rgb(228, 231, 237);
				padding: 10upx 12upx;
				text-align: center;
			}

			.tdr {
				border-right: 1px solid rgb(228, 231, 237);
			}

			.tds {
				font-size: 22upx;
			}

		}

		.section {
			margin-top: 20upx;
			background-color: #FFFFFF;
			padding: 30upx;

			.title {
				color: #1777FE;
				font-size: 32upx;
				margin-bottom: 20upx;
			}

			.cont {
				font-size: 30upx;
				color: #333333;
			}

			.tips {
				margin-bottom: 20upx;
			}

			.guide {
				font-size: 26upx;
				color: #1777FE;
				text-decoration: underline;
				margin-bottom: 10upx;

				.custom-style {
					margin-right: 10upx;
				}
			}

			.reading {
				margin-top: 20upx;
				text-align: center;
			}

			.button {
				margin-top: 20upx;
				text-align: center;

				.custom-style {
					width: 300upx;
					height: 70upx;
				}
			}

		}
	}
</style>