会员权益

pages/member/apply/editor.vue

@@ -0,0 +1,119 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 编辑器 开发者: 麦沃德科技-半夏
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="container">
+		<!-- 标题栏 -->
+		<title-bar :showBack="true" title="介绍内容"></title-bar>
+		<!-- 内容区 -->
+		<view class="container-main">
+			<sp-editor :toolbar-config="toolbarConfig" @init="initEditor" @upinImage="upinImage" @overMax="overMax" @exportHtml="exportHtml"></sp-editor>
+		</view>
+		<view class="safe-padding"></view>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	export default {
+		data() {
+			return {
+				// 页面参数
+				params: null,
+				// 编辑器实例
+				editorIns: null,
+				// 编辑器配置
+				toolbarConfig: {
+					excludeKeys: ['direction', 'date', 'lineHeight', 'letterSpacing', 'listCheck'],
+					iconSize: '18px'
+				}
+			}
+		},
+		computed: {
+			...mapState({
+				editorContent: state => state.app.editorContent,
+			})
+		},
+		onLoad(option) {
+			if (option.params) this.params = option.params;
+		},
+		methods: {
+			// 超出最大内容限制
+			overMax(e) {
+				uni.showToast({
+					title: "输入内容已超过最大字数限制"
+				})
+			},
+			// 初始化编辑器
+			initEditor(editor) {
+				this.editorIns = editor
+				this.editorIns.setContents({
+					html: this.editorContent || ""
+				})
+			},
+			// 上传图片
+			upinImage(tempFiles, editorCtx) {
+				let imageList = []
+				// #ifdef MP-WEIXIN
+				imageList = tempFiles.map(item => item.tempFilePath)
+				// #endif
+				// #ifndef MP-WEIXIN
+				imageList = tempFiles.map(item => item.path)
+				// #endif
+				uni.showLoading({
+					title: '上传中请稍后',
+					mask: true
+				})
+				this.$util.uploadFileMultiple(imageList, [], 2).then(result => {
+					result.forEach((item) => {
+						editorCtx.insertImage({
+							src: item,
+							width: '80%',
+							success: () => {
+								uni.hideLoading()
+							}
+						})
+					});
+				}).catch(error => {
+					console.error('上传图片 ', error)
+				})
+			},
+			// 完成编辑
+			exportHtml(e) {
+				let pages = getCurrentPages()
+				let prevPage = pages[pages.length - 2]
+				prevPage.$vm.editorContent = {
+					params: this.params,
+					content: e,
+				}
+				uni.navigateBack()
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		padding-bottom: 0;
+	}
+
+	.container {
+		height: 100vh;
+		display: flex;
+		flex-direction: column;
+
+		.container-main {
+			flex: 1;
+			overflow: hidden;
+		}
+	}
+</style>

pages/member/apply/enterprise.vue

@@ -0,0 +1,564 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 企业/团体信息 开发者: 麦沃德科技-半夏
++---------------------------------------------------------------------- -->
+
+<template>
+	<page-meta :page-style="'overflow:' + (pageShow ? 'hidden' : 'visible')"></page-meta>
+	<view class="container" :style="{'--theme-color': themeColor}">
+		<!-- 标题栏 -->
+		<title-bar :showBack="true" :title="memberType == 2 ? memberTypeConfig.enterprise : memberTypeConfig.group"></title-bar>
+		<!-- 内容区 -->
+		<view class="container-main" v-if="loadEnd">
+			<view class="main-header" :style="{top: titleBarHeight + 'px'}">
+				<view class="header-image" :style="{'background-image': 'url('+ iconSheet +')'}" v-if="iconSheet"></view>
+				<view class="header-title">入会申请表</view>
+				<view class="header-subtitle">填写完成提交后，审核时间为1~2天</view>
+			</view>
+			<view class="main-form">
+				<member-apply ref="memberApply" :isApply="true" :show-type="memberType" :show-data="applyField" @onChange="pageChange"></member-apply>
+			</view>
+			<view class="main-footer">
+				<view class="footer-btn" @click="heandleSubmit()" v-if="userMobile">提交申请</view>
+				<button class="footer-btn clear" open-type="getPhoneNumber" @getphonenumber="bindPhoneNumber" v-else>提交申请</button>
+				<view class="safe-padding"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	import memberApply from "@/pages/component/member/apply.vue"
+	import svgData from "@/common/svg.js"
+	export default {
+		components: {
+			memberApply,
+		},
+		data() {
+			return {
+				// 页面是否阻止滚动
+				pageShow: false,
+				// 加载完成
+				loadEnd: false,
+				// 标题栏高度
+				titleBarHeight: 0,
+				// 入会字段
+				applyField: [],
+				// 入会类型
+				memberType: null,
+				// 是否为重新申请
+				isReapply: false,
+				// 已上传图片列表
+				uploadedList: [],
+			}
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+				iconSheet: state => {
+					return svgData.svgToUrl("sheet", state.app.themeColor)
+				},
+				subscribeIds: state => state.app.subscribeNotifyIds,
+				userMobile: state => state.user.mobile,
+				memberTypeConfig: state => state.app.memberTypeConfig,
+			})
+		},
+		mounted() {
+			// #ifdef MP-WEIXIN
+			let statusBarHeight = uni.getSystemInfoSync().statusBarHeight
+			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
+			this.titleBarHeight = statusBarHeight + (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
+			// #endif
+		},
+		onLoad(option) {
+			this.isReapply = option.reapply == 1 ? true : false
+			uni.showLoading({
+				title: "加载中"
+			})
+			this.memberType = option.type
+			if (this.isReapply) {
+				this.getMemberInfo(() => {
+					this.loadEnd = true
+					uni.hideLoading()
+				})
+			} else {
+				this.getField(() => {
+					this.loadEnd = true
+					uni.hideLoading()
+				})
+			}
+		},
+		onShow() {
+			let pages = getCurrentPages();
+			if (pages[pages.length - 1].$vm.editorContent) {
+				const result = pages[pages.length - 1].$vm.editorContent
+				this.$refs.memberApply.setEditorData(result)
+				delete pages[pages.length - 1].$vm.editorContent;
+			}
+		},
+		methods: {
+			// 改变页面滚动状态
+			pageChange(state) {
+				this.pageShow = state
+			},
+			// 获取入会字段
+			getField(fn) {
+				this.$util.request("member.field", {
+					type: this.memberType
+				}).then(res => {
+					if (fn) fn()
+					if (res.code == 1) {
+						let list = []
+						if (this.memberType == 2) {
+							list = res.data.company
+						} else {
+							list = res.data.organize
+						}
+						list.forEach((item) => {
+							if (item.type == "checkbox") {
+								item.value = []
+							} else if (item.type == "image") {
+								if ((this.memberType == 2 && item.field == 'company_logo') || (this.memberType == 3 && item.field == 'organize_logo')) {
+									item.value = ""
+								} else {
+									item.value = []
+								}
+							} else if (item.type == "cert") {
+								item.value = {
+									name: "",
+									number: "",
+									image: "",
+								}
+							} else if (item.type == "file") {
+								item.value = []
+							} else {
+								item.value = ""
+							}
+						});
+						this.applyField = list
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取入会字段 ', error)
+				})
+			},
+			// 获取入会信息
+			getMemberInfo(fn) {
+				this.$util.request("member.applyDetails").then(res => {
+					if (res.code == 1) {
+						let list = []
+						if (this.memberType == 2) {
+							list = res.data.company
+						} else {
+							list = res.data.organize
+						}
+						this.uploadedList = []
+						list.forEach((item) => {
+							if (item.type == "checkbox") {
+								if (item.value) item.value = item.value.split(",")
+								else item.value = []
+							} else if (item.type == "image") {
+								if ((this.memberType == 2 && item.field == 'company_logo') || (this.memberType == 3 && item.field == 'organize_logo')) {
+									if (item.value) {
+										this.uploadedList.push(item.value)
+									} else {
+										item.value = ""
+									}
+								} else {
+									if (item.value) {
+										if (typeof(item.value) == "string") {
+											item.value = item.value.split(",")
+										}
+										this.uploadedList = [...this.uploadedList, ...item.value]
+									} else {
+										item.value = []
+									}
+								}
+							} else if (item.type == "cert") {
+								if (!item.value) {
+									item.value = {
+										name: "",
+										number: "",
+										image: "",
+									}
+								} else if (item.value.image) {
+									this.uploadedList.push(item.value.image)
+								}
+							} else if (item.type == "video") {
+								this.uploadedList.push(item.value)
+							} else if (item.type == "file") {
+								if (item.value) {
+									if (typeof(item.value) == "string") {
+										item.value = item.value.split(",")
+									}
+									this.uploadedList = [...this.uploadedList, ...item.value.map(item => item.path)]
+								} else {
+									item.value = []
+								}
+							}
+						});
+						this.applyField = list
+						if (fn) fn()
+					} else {
+						if (fn) fn()
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					if (fn) fn()
+					console.error('获取入会信息 ', error)
+				})
+			},
+			// 跳转入会协议
+			toAgreement() {
+				this.$util.toPage({
+					mode: 1,
+					path: "/pages/mine/settings/agreement?type=3"
+				})
+			},
+			// 提交申请
+			heandleSubmit() {
+				uni.showLoading({
+					title: "加载中",
+					mask: true
+				})
+				this.$refs.memberApply.getApplyField((data) => {
+					let fileList = []
+					for (let i in data) {
+						// 判断必填项是否为空
+						if (data[i].required == 1 && data[i].apply_show != 2) {
+							let isEmpty = false
+							if (data[i].type == "checkbox") {
+								if (!data[i].value.length) isEmpty = true
+							} else if (data[i].type == "image") {
+								if ((this.memberType == 2 && data[i].field == "company_logo") || (this.memberType == 3 && data[i].field == "organize_logo")) {
+									if (!data[i].value) isEmpty = true
+								} else {
+									if (!data[i].value.length) isEmpty = true
+								}
+							} else if (data[i].type == "cert") {
+								if (!data[i].value.name || !data[i].value.number || !data[i].value.image) isEmpty = true
+							} else if (data[i].type == "file") {
+								if (!data[i].value.length) isEmpty = true
+							} else {
+								if (!data[i].value && data[i].value !== 0) isEmpty = true
+							}
+							if (isEmpty) {
+								uni.hideLoading()
+								uni.showToast({
+									icon: "none",
+									title: data[i].label + "不能为空"
+								})
+								return
+							}
+						}
+						// 判断证书是否合规
+						if (data[i].type == "cert") {
+							if (data[i].value.name || data[i].value.number || data[i].value.image) {
+								if (!data[i].value.name || !data[i].value.number || !data[i].value.image) {
+									uni.hideLoading()
+									uni.showToast({
+										icon: "none",
+										title: data[i].label + "存在未填项"
+									})
+									return
+								}
+							}
+						}
+						// 设置字段值格式
+						if (data[i].type == "number") {
+							data[i].value = (data[i].value || data[i].value === 0) ? Number(data[i].value) : data[i].value
+						} else if (data[i].type == "checkbox") {
+							data[i].value = data[i].value.join()
+						} else if (data[i].type == "image") {
+							if ((this.memberType == 2 && data[i].field == "company_logo") || (this.memberType == 3 && data[i].field == "organize_logo")) {
+								if (data[i].value && !this.uploadedList.includes(data[i].value)) {
+									fileList.push({
+										index: i,
+										value: data[i].value
+									})
+								}
+							} else {
+								for (let j in data[i].value) {
+									if (!this.uploadedList.includes(data[i].value[j])) {
+										fileList.push({
+											index: i,
+											number: j,
+											value: data[i].value[j]
+										})
+									}
+								}
+							}
+						} else if (data[i].type == "video") {
+							if (data[i].value && !this.uploadedList.includes(data[i].value)) {
+								fileList.push({
+									index: i,
+									value: data[i].value
+								})
+							}
+						} else if (data[i].type == "cert") {
+							if (data[i].value.image && !this.uploadedList.includes(data[i].value.image)) {
+								fileList.push({
+									index: i,
+									value: data[i].value.image
+								})
+							}
+						} else if (data[i].type == "file") {
+							for (let j in data[i].value) {
+								if (!this.uploadedList.includes(data[i].value[j].path)) {
+									fileList.push({
+										index: i,
+										number: j,
+										value: data[i].value[j].path
+									})
+								}
+							}
+						}
+					}
+					this.subscribeMessage(() => {
+						if (fileList.length) {
+							this.uploadFiles(fileList, (files) => {
+								for (let i in fileList) {
+									if (data[fileList[i].index].type == "image") {
+										if ((this.memberType == 2 && data[fileList[i].index].field == "company_logo") || (this.memberType == 3 && data[fileList[i].index].field == "organize_logo")) {
+											data[fileList[i].index].value = files[i]
+										} else {
+											data[fileList[i].index].value[fileList[i].number] = files[i]
+										}
+									} else if (data[fileList[i].index].type == "video") {
+										data[fileList[i].index].value = files[i]
+									} else if (data[fileList[i].index].type == "cert") {
+										data[fileList[i].index].value.image = files[i]
+									} else if (data[fileList[i].index].type == "file") {
+										data[fileList[i].index].value[fileList[i].number].path = files[i]
+									}
+								}
+								this.submitEvent(data)
+							})
+						} else {
+							this.submitEvent(data)
+						}
+					})
+				})
+			},
+			// 绑定手机号
+			bindPhoneNumber(e) {
+				if (e.detail.errMsg == "getPhoneNumber:ok") {
+					uni.showLoading({
+						mask: true,
+						title: "加载中",
+					})
+					uni.login({
+						provider: 'weixin',
+						success: loginRes => {
+							let data = e.detail
+							data.code = loginRes.code
+							this.$util.request("login.bindMobile", data).then(res => {
+								uni.hideLoading()
+								if (res.code == 1) {
+									this.$store.commit('user/updateMobile', res.data.phoneNumber)
+									this.heandleSubmit()
+								} else {
+									uni.showToast({
+										title: res.msg,
+										icon: 'none'
+									})
+								}
+							}).catch(error => {
+								uni.hideLoading()
+								console.error('获取用户手机号码 ', error)
+							})
+						},
+						fail: () => {
+							uni.hideLoading()
+							uni.showToast({
+								icon: "none",
+								title: "授权手机号失败，请重试"
+							})
+						}
+					});
+				} else {
+					uni.showToast({
+						title: '获取手机号失败，请重新获取',
+						icon: 'none'
+					})
+				}
+			},
+			// 上传文件
+			uploadFiles(list, fn) {
+				this.$util.uploadFileMultiple(list.map(item => item.value)).then(result => {
+					fn(result)
+				}).catch(error => {
+					console.error('上传文件 ', error)
+				})
+			},
+			// 提交事件
+			submitEvent(data) {
+				for (let i in data) {
+					if (data[i].type == "image" && typeof(data[i].value) == "object") {
+						data[i].value = data[i].value.join()
+					}
+				}
+				let fields = {
+					person: getApp().globalData.applyField,
+				}
+				if (this.memberType == 2) fields.company = data
+				else fields.organize = data
+				this.$util.request("member.apply", {
+					type: this.memberType,
+					data: JSON.stringify(fields)
+				}).then(res => {
+					if (res.code == 1) {
+						getApp().globalData.applyField = []
+						uni.reLaunch({
+							url: "/pages/member/apply/success",
+							success: () => {
+								uni.hideLoading()
+							}
+						})
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('提交入会申请 ', error)
+				})
+			},
+			// 订阅消息
+			subscribeMessage(fn, number = 0) {
+				// #ifdef MP-WEIXIN
+				let tmplIds = []
+				if (this.subscribeIds?.applet_initiation_audit) tmplIds.push(this.subscribeIds.applet_initiation_audit)
+				if (this.subscribeIds?.applet_initiation_success) tmplIds.push(this.subscribeIds.applet_initiation_success)
+				if (this.subscribeIds?.applet_member_expiretime) tmplIds.push(this.subscribeIds.applet_member_expiretime)
+				uni.requestSubscribeMessage({
+					tmplIds,
+					success: () => {
+						fn()
+					},
+					fail: (error) => {
+						if (error.errCode == 20004) {
+							uni.hideLoading()
+							uni.showModal({
+								title: '提示',
+								content: '请前往设置打开接受通知',
+								confirmColor: this.themeColor,
+								confirmText: '继续提交',
+								success: (res) => {
+									if (res.confirm) {
+										fn()
+									}
+								},
+							})
+						} else if (error.errCode) {
+							uni.hideLoading()
+							uni.showModal({
+								title: '提示',
+								content: '消息订阅失败，无法接收到会员通知，错误码：' + error.errCode,
+								confirmColor: this.themeColor,
+								confirmText: '继续提交',
+								success: (res) => {
+									if (res.confirm) {
+										fn()
+									}
+								},
+							})
+						} else if (++number > 3) {
+							this.subscribeMessage(fn, number)
+						} else {
+							fn()
+						}
+					}
+				})
+				// #endif
+				// #ifndef MP-WEIXIN
+				fn()
+				// #endif
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.container {
+		.container-main {
+			padding-bottom: 112rpx;
+
+			.main-header {
+				position: sticky;
+				top: 0;
+				z-index: 96;
+				background: linear-gradient(0deg, #F6F7FB, var(--theme-color) 316.667%);
+				padding: 80rpx 48rpx 68rpx;
+
+				.header-image {
+					position: absolute;
+					top: 64rpx;
+					right: 48rpx;
+					width: 218rpx;
+					height: 198rpx;
+					background-size: 218rpx 198rpx;
+				}
+
+				.header-title {
+					color: var(--theme-color);
+					font-size: 48rpx;
+					font-weight: 600;
+					line-height: 68rpx;
+					position: relative;
+					z-index: 1;
+				}
+
+				.header-subtitle {
+					margin-top: 32rpx;
+					color: #999999;
+					font-size: 28rpx;
+					line-height: 40rpx;
+					position: relative;
+					z-index: 1;
+				}
+			}
+
+			.main-form {
+				padding: 22rpx 48rpx 32rpx;
+			}
+
+			.main-footer {
+				position: fixed;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				z-index: 96;
+				background: #ffffff;
+				border-top: 1rpx solid #F6F7FB;
+				padding: 20rpx 24rpx 12rpx;
+
+				.footer-btn {
+					color: #ffffff;
+					font-size: 32rpx;
+					line-height: 44rpx;
+					padding: 22rpx 24rpx;
+					border-radius: 16rpx;
+					background: var(--theme-color);
+					text-align: center;
+				}
+			}
+		}
+	}
+</style>

pages/member/apply/form.vue

@@ -0,0 +1,872 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 申请入会 开发者: 麦沃德科技-半夏 
++---------------------------------------------------------------------- -->
+
+<template>
+	<page-meta :page-style="'overflow:' + (pageShow ? 'hidden' : 'visible')"></page-meta>
+	<view class="container" :style="{'--theme-color': themeColor}">
+		<!-- 标题栏 -->
+		<title-bar :showBack="true" title="申请入会"></title-bar>
+		<!-- 内容区 -->
+		<view class="container-main" v-if="loadEnd">
+			<view class="main-header" :style="{top: titleBarHeight + 'px'}">
+				<view class="header-tips" v-if="memberState.state == 2">驳回原因：{{memberState.reject}}</view>
+				<view class="header-box">
+					<view class="box-image" :style="{'background-image': 'url('+ iconSheet +')'}" v-if="iconSheet">
+					</view>
+					<view class="box-title">入会申请表</view>
+					<view class="box-subtitle">填写完成提交后，审核时间为1~2天</view>
+				</view>
+			</view>
+			<view class="main-form">
+				<view class="form-item" @click="selectMemberType">
+					<view class="item-title"><text>*</text>入会类型</view>
+					<view class="item-input">
+						<view class="input" v-if="memberType">
+							<text v-for="item in typeList" :key="item.id"
+								v-if="memberType == item.id">{{item.name}}</text>
+						</view>
+						<view class="input placeholder" v-else>请选择入会类型</view>
+						<image class="icon" src="/static/right.png" mode="aspectFit"></image>
+					</view>
+				</view>
+				<member-apply ref="memberApply" :isApply="true" :show-type="1" :show-data="applyField"
+					@onChange="pageChange"></member-apply>
+			</view>
+			<view class="main-footer">
+				<view class="footer-read flex align-items-center" @click="isRead = !isRead">
+					<view class="radio" :class="{active: isRead}">
+						<image src="/static/tick.png" mode="aspectFill" v-if="isRead"></image>
+					</view>
+					<view class="label flex-item">请仔细阅读并同意 <text @click.stop="toAgreement()">《入会协议》</text></view>
+				</view>
+				<view class="footer-btn" @click="heandleSubmit()" v-if="userMobile">{{memberType == 1 ? "提交申请" : "下一步"}}
+				</view>
+				<button class="footer-btn clear" open-type="getPhoneNumber" @getphonenumber="bindPhoneNumber"
+					v-else>{{memberType == 1 ? "提交申请" : "下一步"}}</button>
+				<view class="safe-padding"></view>
+			</view>
+		</view>
+		<!-- 入会类型选择 -->
+		<select-picker ref="selectPicker" title="入会类型" @onChange="pageChange"
+			@confirm="changeMemberType"></select-picker>
+	</view>
+</template>
+
+<script>
+	import {
+		mapState
+	} from "vuex"
+	import memberApply from "@/pages/component/member/apply.vue"
+	import selectPicker from "@/pages/component/picker/select.vue"
+	import svgData from "@/common/svg.js"
+	export default {
+		components: {
+			memberApply,
+			selectPicker,
+		},
+		data() {
+			return {
+				// 页面是否阻止滚动
+				pageShow: false,
+				// 加载完成
+				loadEnd: false,
+				// 标题栏高度
+				titleBarHeight: 0,
+				// 入会类型列表
+				typeList: [],
+				// 已选入会类型
+				memberType: null,
+				// 入会字段
+				applyField: [],
+				// 会员状态
+				memberState: {},
+				// 是否已读
+				isRead: false,
+				// 重新申请时的入会类型
+				reapplyType: null,
+				// 已上传图片列表
+				uploadedList: [],
+			}
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+				iconSheet: state => {
+					return svgData.svgToUrl("sheet", state.app.themeColor)
+				},
+				subscribeIds: state => state.app.subscribeNotifyIds,
+				userMobile: state => state.user.mobile,
+			})
+		},
+		mounted() {
+			// #ifdef MP-WEIXIN
+			let statusBarHeight = uni.getSystemInfoSync().statusBarHeight
+			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
+			this.titleBarHeight = statusBarHeight + (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
+			// #endif
+		},
+		onLoad(e) {
+			console.log(e,'=============>')
+			if(e.activeTab) {
+				this.memberType = Number(e.activeTab)
+			}
+			uni.showLoading({
+				title: "加载中"
+			})
+			this.getMemberState(() => {
+				this.loadEnd = true
+				uni.hideLoading()
+			})
+		},
+		onShow() {
+			let pages = getCurrentPages();
+			if (pages[pages.length - 1].$vm.editorContent) {
+				const result = pages[pages.length - 1].$vm.editorContent
+				this.$refs.memberApply.setEditorData(result)
+				delete pages[pages.length - 1].$vm.editorContent;
+			}
+		},
+		methods: {
+			// 改变页面滚动状态
+			pageChange(state) {
+				this.pageShow = state
+			},
+			// 获取入会类型
+			getMemberType(fn) {
+				this.$util.request("member.type").then(res => {
+					if (res.code == 1) {
+						this.typeList = res.data.map(item => {
+							return {
+								id: item.type,
+								name: item.name
+							}
+						})
+						// console.log(this.typeList,'=this.typeList=')
+						// this.memberType = this.typeList[0].id
+						if (fn) fn()
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取入会类型 ', error)
+				})
+			},
+			// 获取会员状态
+			getMemberState(fn) {
+				this.$util.request("member.state").then(res => {
+					if (res.code == 1) {
+						this.memberState = res.data.state
+						if (this.memberState.state == -1) {
+							this.getMemberType(() => {
+								this.getField(fn)
+							})
+						} else if (this.memberState.state == 2) {
+							this.getMemberType()
+							this.getMemberInfo(fn)
+						} else {
+							uni.hideLoading()
+							uni.showModal({
+								title: "系统提示",
+								content: "您已提交入会申请，无需重复提交",
+								cancelText: "返回",
+								confirmText: "前往查看",
+								success: (res) => {
+									if (res.confirm) {
+										uni.switchTab({
+											url: "/pages/mine/index"
+										})
+									} else {
+										if (getCurrentPages().length == 1) {
+											uni.switchTab({
+												url: "/pages/index/index"
+											})
+										} else {
+											uni.navigateBack()
+										}
+									}
+								}
+							})
+						}
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取会员状态 ', error)
+				})
+			},
+			// 获取入会字段
+			getField(fn) {
+				this.$util.request("member.field", {
+					type: this.memberType
+				}).then(res => {
+					if (fn) fn()
+					if (res.code == 1) {
+						let list = []
+						if (this.memberType == 1) {
+							list = res.data
+						} else {
+							list = res.data.person
+						}
+						list.forEach((item) => {
+							if (item.type == "checkbox") {
+								item.value = []
+							} else if (item.type == "text" && item.field == "address") {
+								item.value = {
+									latitude: "",
+									longitude: "",
+									name: "",
+									address: ""
+								}
+							} else if (item.type == "image") {
+								if (item.field == "avatar") {
+									item.value = ""
+								} else {
+									item.value = []
+								}
+							} else if (item.type == "cert") {
+								item.value = {
+									name: "",
+									number: "",
+									image: "",
+								}
+							} else if (item.type == "file") {
+								item.value = []
+							} else {
+								item.value = ""
+							}
+						});
+						this.applyField = list
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取入会字段 ', error)
+				})
+			},
+			// 获取入会信息
+			getMemberInfo(fn) {
+				this.$util.request("member.applyDetails").then(res => {
+					if (res.code == 1) {
+						let list = []
+						if (res.data.company) {
+							this.memberType = 2
+							this.reapplyType = 2
+							list = res.data.person
+						} else if (res.data.organize) {
+							this.memberType = 3
+							this.reapplyType = 3
+							list = res.data.person
+						} else {
+							this.memberType = 1
+							this.reapplyType = 1
+							list = res.data
+						}
+						this.uploadedList = []
+						list.forEach((item) => {
+							if (item.type == "checkbox") {
+								if (item.value) item.value = item.value.split(",")
+								else item.value = []
+							} else if (item.type == "text" && item.field == "address") {
+								if (!item.value) {
+									item.value = {
+										latitude: "",
+										longitude: "",
+										name: "",
+										address: ""
+									}
+								}
+							} else if (item.type == "image") {
+								if (item.field == "avatar") {
+									if (item.value) {
+										this.uploadedList.push(item.value)
+									} else {
+										item.value = ""
+									}
+								} else {
+									if (item.value) {
+										if (typeof(item.value) == "string") {
+											item.value = item.value.split(",")
+										}
+										this.uploadedList = [...this.uploadedList, ...item.value]
+									} else {
+										item.value = []
+									}
+								}
+							} else if (item.type == "cert") {
+								if (!item.value) {
+									item.value = {
+										name: "",
+										number: "",
+										image: "",
+									}
+								} else if (item.value.image) {
+									this.uploadedList.push(item.value.image)
+								}
+							} else if (item.type == "video") {
+								this.uploadedList.push(item.value)
+							} else if (item.type == "file") {
+								if (item.value) {
+									if (typeof(item.value) == "string") {
+										item.value = item.value.split(",")
+									}
+									this.uploadedList = [...this.uploadedList, ...item.value.map(item =>
+										item.path)]
+								} else {
+									item.value = []
+								}
+							}
+						});
+						this.applyField = list
+						if (fn) fn()
+					} else {
+						if (fn) fn()
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					if (fn) fn()
+					console.error('获取入会信息 ', error)
+				})
+			},
+			// 跳转入会协议
+			toAgreement() {
+				this.$util.toPage({
+					mode: 1,
+					path: "/pages/mine/settings/agreement?type=3"
+				})
+			},
+			// 选择入会类型
+			selectMemberType() {
+				this.$refs.selectPicker.open(this.typeList, this.memberType)
+			},
+			// 改变入会类型
+			changeMemberType(value) {
+				this.memberType = value.id
+				uni.showLoading({
+					title: "加载中"
+				})
+				if (this.memberState.state == 2 && this.reapplyType == this.memberType) {
+					this.getMemberInfo(() => {
+						uni.hideLoading()
+					})
+				} else {
+					this.getField(() => {
+						uni.hideLoading()
+					})
+				}
+			},
+			// 提交申请
+			heandleSubmit() {
+				if (!this.isRead) {
+					uni.showToast({
+						icon: "none",
+						title: "请仔细阅读并同意《入会协议》"
+					})
+					return
+				}
+				uni.showLoading({
+					title: "加载中",
+					mask: true
+				})
+				this.$refs.memberApply.getApplyField((data) => {
+					let fileList = []
+					for (let i in data) {
+						// 判断必填项是否为空
+						if (data[i].required == 1 && data[i].apply_show != 2) {
+							let isEmpty = false
+							if (data[i].type == "text" && data[i].field == "address") {
+								if (!data[i].value.address) isEmpty = true
+							} else if (data[i].type == "checkbox") {
+								if (!data[i].value.length) isEmpty = true
+							} else if (data[i].type == "image") {
+								if (data[i].field == "avatar") {
+									if (!data[i].value) isEmpty = true
+								} else {
+									if (!data[i].value.length) isEmpty = true
+								}
+							} else if (data[i].type == "cert") {
+								if (!data[i].value.name || !data[i].value.number || !data[i].value.image) isEmpty =
+									true
+							} else if (data[i].type == "file") {
+								if (!data[i].value.length) isEmpty = true
+							} else {
+								if (!data[i].value && data[i].value !== 0) isEmpty = true
+							}
+							if (isEmpty) {
+								uni.hideLoading()
+								uni.showToast({
+									icon: "none",
+									title: data[i].label + "不能为空"
+								})
+								return
+							}
+						}
+						// 判断手机号是否合规
+						if (data[i].type == "number" && data[i].field == "mobile") {
+							if (!this.$util.validation("phone", data[i].value)) {
+								uni.hideLoading()
+								uni.showToast({
+									icon: "none",
+									title: "请输入正确的手机号"
+								})
+								return
+							}
+						}
+						// 判断证书是否合规
+						if (data[i].type == "cert") {
+							if (data[i].value.name || data[i].value.number || data[i].value.image) {
+								if (!data[i].value.name || !data[i].value.number || !data[i].value.image) {
+									uni.hideLoading()
+									uni.showToast({
+										icon: "none",
+										title: data[i].label + "存在未填项"
+									})
+									return
+								}
+							}
+						}
+						// 设置字段值格式
+						if (data[i].type == "number") {
+							data[i].value = (data[i].value || data[i].value === 0) ? Number(data[i].value) : data[
+								i].value
+						} else if (data[i].type == "checkbox") {
+							data[i].value = data[i].value.join()
+						} else if (data[i].type == "image") {
+							if (data[i].field == "avatar") {
+								if (data[i].value && !this.uploadedList.includes(data[i].value)) {
+									fileList.push({
+										index: i,
+										value: data[i].value
+									})
+								}
+							} else {
+								for (let j in data[i].value) {
+									if (!this.uploadedList.includes(data[i].value[j])) {
+										fileList.push({
+											index: i,
+											number: j,
+											value: data[i].value[j]
+										})
+									}
+								}
+							}
+						} else if (data[i].type == "cert") {
+							if (data[i].value.image && !this.uploadedList.includes(data[i].value.image)) {
+								fileList.push({
+									index: i,
+									value: data[i].value.image
+								})
+							}
+						} else if (data[i].type == "video") {
+							if (data[i].value && !this.uploadedList.includes(data[i].value)) {
+								fileList.push({
+									index: i,
+									value: data[i].value
+								})
+							}
+						} else if (data[i].type == "file") {
+							for (let j in data[i].value) {
+								if (!this.uploadedList.includes(data[i].value[j].path)) {
+									fileList.push({
+										index: i,
+										number: j,
+										value: data[i].value[j].path
+									})
+								}
+							}
+						}
+					}
+					this.subscribeMessage(() => {
+						this.checkPhone(data, (result) => {
+							if (result) {
+								if (fileList.length) {
+									this.uploadFiles(fileList, (files) => {
+										for (let i in fileList) {
+											if (data[fileList[i].index].type == "image") {
+												if (data[fileList[i].index].field ==
+													"avatar") {
+													data[fileList[i].index].value = files[
+														i]
+												} else {
+													data[fileList[i].index].value[fileList[
+														i].number] = files[i]
+												}
+											} else if (data[fileList[i].index].type ==
+												"video") {
+												data[fileList[i].index].value = files[i]
+											} else if (data[fileList[i].index].type ==
+												"cert") {
+												data[fileList[i].index].value.image =
+													files[i]
+											} else if (data[fileList[i].index].type ==
+												"file") {
+												data[fileList[i].index].value[fileList[i]
+													.number].path = files[i]
+											}
+										}
+										this.submitEvent(data)
+									})
+								} else {
+									this.submitEvent(data)
+								}
+							} else {
+								uni.showToast({
+									title: "该手机号已被使用，请更换手机号",
+									icon: "none"
+								})
+							}
+						})
+					})
+				})
+			},
+			// 绑定手机号
+			bindPhoneNumber(e) {
+				if (e.detail.errMsg == "getPhoneNumber:ok") {
+					uni.showLoading({
+						mask: true,
+						title: "加载中",
+					})
+					uni.login({
+						provider: 'weixin',
+						success: loginRes => {
+							let data = e.detail
+							data.code = loginRes.code
+							this.$util.request("login.bindMobile", data).then(res => {
+								uni.hideLoading()
+								if (res.code == 1) {
+									this.$store.commit('user/updateMobile', res.data.phoneNumber)
+									this.heandleSubmit()
+								} else {
+									uni.showToast({
+										title: res.msg,
+										icon: 'none'
+									})
+								}
+							}).catch(error => {
+								uni.hideLoading()
+								console.error('获取用户手机号码 ', error)
+							})
+						},
+						fail: () => {
+							uni.hideLoading()
+							uni.showToast({
+								icon: "none",
+								title: "授权手机号失败，请重试"
+							})
+						}
+					});
+				} else {
+					uni.showToast({
+						title: '获取手机号失败，请重新获取',
+						icon: 'none'
+					})
+				}
+			},
+			// 上传文件
+			uploadFiles(list, fn) {
+				this.$util.uploadFileMultiple(list.map(item => item.value)).then(result => {
+					fn(result)
+				}).catch(error => {
+					console.error('上传文件 ', error)
+				})
+			},
+			// 提交事件
+			submitEvent(data) {
+				for (let i in data) {
+					if (data[i].type == "image" && typeof(data[i].value) == "object") {
+						data[i].value = data[i].value.join()
+					}
+				}
+				if (this.memberType == 1) {
+					this.$util.request("member.apply", {
+						type: this.memberType,
+						data: JSON.stringify(data)
+					}).then(res => {
+						if (res.code == 1) {
+							uni.redirectTo({
+								url: "/pages/member/apply/success",
+								success: () => {
+									uni.hideLoading()
+								}
+							})
+						} else {
+							uni.showToast({
+								title: res.msg,
+								icon: 'none'
+							})
+						}
+					}).catch(error => {
+						uni.hideLoading()
+						console.error('提交入会申请 ', error)
+					})
+				} else {
+					uni.hideLoading()
+					getApp().globalData.applyField = data
+					if (this.memberState.state == 2 && this.reapplyType == this.memberType) {
+						this.$util.toPage({
+							mode: 1,
+							path: "/pages/member/apply/enterprise?reapply=1&type=" + this.memberType
+						})
+					} else {
+						this.$util.toPage({
+							mode: 1,
+							path: "/pages/member/apply/enterprise?type=" + this.memberType
+						})
+					}
+				}
+			},
+			// 订阅消息
+			subscribeMessage(fn, number = 0) {
+				if (this.memberType == 1) {
+					// #ifdef MP-WEIXIN
+					let tmplIds = []
+					if (this.subscribeIds?.applet_initiation_audit) tmplIds.push(this.subscribeIds.applet_initiation_audit)
+					if (this.subscribeIds?.applet_initiation_success) tmplIds.push(this.subscribeIds
+						.applet_initiation_success)
+					if (this.subscribeIds?.applet_member_expiretime) tmplIds.push(this.subscribeIds
+						.applet_member_expiretime)
+					uni.requestSubscribeMessage({
+						tmplIds,
+						success: () => {
+							fn()
+						},
+						fail: (error) => {
+							if (error.errCode == 20004) {
+								uni.hideLoading()
+								uni.showModal({
+									title: '提示',
+									content: '请前往设置打开接受通知',
+									confirmColor: this.themeColor,
+									confirmText: '继续提交',
+									success: (res) => {
+										if (res.confirm) {
+											fn()
+										}
+									},
+								})
+							} else if (error.errCode) {
+								uni.hideLoading()
+								uni.showModal({
+									title: '提示',
+									content: '消息订阅失败，无法接收到会员通知，错误码：' + error.errCode,
+									confirmColor: this.themeColor,
+									confirmText: '继续提交',
+									success: (res) => {
+										if (res.confirm) {
+											fn()
+										}
+									},
+								})
+							} else if (++number > 3) {
+								this.subscribeMessage(fn, number)
+							} else {
+								fn()
+							}
+						}
+					})
+					// #endif
+					// #ifndef MP-WEIXIN
+					fn()
+					// #endif
+				} else {
+					fn()
+				}
+			},
+			// 验证手机号是否重复
+			checkPhone(data, fn) {
+				if (this.memberType == 1) {
+					fn(true)
+					return
+				}
+				let index = data.findIndex((item) => {
+					if (item.field == "mobile") return true
+				})
+				this.$util.request("member.applyCheck", {
+					mobile: data[index].value,
+				}).then(res => {
+					if (res.code == 1) {
+						if (res.data.use_status == 1) fn(false)
+						else fn(true)
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('验证手机号是否重复 ', error)
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.container {
+		.container-main {
+			padding-bottom: 192rpx;
+
+			.main-header {
+				position: sticky;
+				top: 0;
+				z-index: 96;
+
+				.header-tips {
+					padding: 24rpx 32rpx;
+					font-size: 24rpx;
+					line-height: 34rpx;
+					color: #F6F7FB;
+					background: #FF6868;
+				}
+
+				.header-box {
+					position: relative;
+					background: linear-gradient(0deg, #F6F7FB, var(--theme-color) 316.667%);
+					padding: 80rpx 48rpx 68rpx;
+
+					.box-image {
+						position: absolute;
+						top: 64rpx;
+						right: 48rpx;
+						width: 218rpx;
+						height: 198rpx;
+						background-size: 218rpx 198rpx;
+					}
+
+					.box-title {
+						color: var(--theme-color);
+						font-size: 48rpx;
+						font-weight: 600;
+						line-height: 68rpx;
+						position: relative;
+						z-index: 1;
+					}
+
+					.box-subtitle {
+						margin-top: 32rpx;
+						color: #999999;
+						font-size: 28rpx;
+						line-height: 40rpx;
+						position: relative;
+						z-index: 1;
+					}
+				}
+			}
+
+			.main-form {
+				padding: 22rpx 48rpx 32rpx;
+
+				.form-item {
+					margin-bottom: 32rpx;
+
+					.item-title {
+						color: #5A5B6E;
+						font-size: 32rpx;
+						font-weight: 600;
+						line-height: 44rpx;
+
+						text {
+							color: #E60012;
+						}
+					}
+
+					.item-input {
+						margin-top: 32rpx;
+						display: flex;
+						align-items: center;
+						border-radius: 16rpx;
+						background: #ffffff;
+
+						.input {
+							color: #5A5B6E;
+							font-size: 28rpx;
+							line-height: 40rpx;
+							flex: 1;
+							padding: 32rpx;
+						}
+
+						.placeholder {
+							color: #ACADB7;
+							font-size: 28rpx;
+							line-height: 40rpx;
+						}
+
+						.icon {
+							width: 32rpx;
+							height: 32rpx;
+							padding-right: 32rpx;
+						}
+					}
+				}
+			}
+
+			.main-footer {
+				position: fixed;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				z-index: 96;
+				background: #ffffff;
+				border-top: 1rpx solid #F6F7FB;
+				padding: 20rpx 24rpx 12rpx;
+
+				.footer-read {
+					padding: 0 12rpx;
+
+					.radio {
+						width: 32rpx;
+						height: 32rpx;
+						background: #D6DBDE;
+						border-radius: 50%;
+
+						&.active {
+							background: var(--theme-color);
+						}
+					}
+
+					.label {
+						margin-left: 20rpx;
+						color: #5A5B6E;
+						font-size: 28rpx;
+						line-height: 40rpx;
+
+						text {
+							color: var(--theme-color);
+						}
+					}
+				}
+
+				.footer-btn {
+					margin-top: 32rpx;
+					color: #ffffff;
+					font-size: 32rpx;
+					line-height: 44rpx;
+					padding: 22rpx 24rpx;
+					border-radius: 16rpx;
+					background: var(--theme-color);
+					text-align: center;
+				}
+			}
+		}
+	}
+</style>

pages/member/apply/index.css

@@ -0,0 +1,352 @@
+.page {
+	background: linear-gradient(180deg, #2C1300 0%, #1F1E1D 50%, #2C1300 100%);
+	padding: 30rpx 0;
+	min-height: 100vh;
+	padding-bottom: 0;
+	box-sizing: border-box;
+}
+
+.top-tabs {
+	display: flex;
+	width: 455rpx;
+	height: 56rpx;
+	border-radius: 40rpx;
+	background: rgba(255, 255, 255, 0.08);
+	margin-bottom: 40rpx;
+	overflow: hidden;
+}
+
+.tab-item {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 32rpx;
+	color: #ccc;
+	transition: all 0.3s ease;
+}
+
+.tab-item.active {
+	background: #fff;
+	color: #2C1300;
+	font-weight: bold;
+	border-radius: 40rpx;
+}
+
+.card-swiper {
+	width: 100%;
+	height: 360rpx;
+}
+
+.card-wrapper {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	position: relative;
+}
+
+.card-img {
+	width: 682rpx;
+	height: 293rpx;
+	transition: all 0.3s ease;
+	border-radius: 32rpx;
+}
+
+.cardActive {
+	height: 360rpx;
+}
+
+.nav-scroll {
+	width: 100%;
+	margin-top: 39rpx;
+	margin-bottom: 14rpx;
+}
+
+.nav-list {
+	display: flex;
+	align-items: center;
+}
+
+.nav-item {
+	font-size: 24rpx;
+	color: #999;
+	padding: 0 32rpx;
+	white-space: nowrap;
+}
+
+.nav-item.active {
+	color: #fff;
+	font-size: 28rpx;
+	font-weight: bold;
+}
+
+.nav-wrapper {
+	display: flex;
+}
+
+.grid-content {
+	width: 690rpx;
+	margin-left: 30rpx;
+	margin-top: 40rpx;
+	border-radius: 24rpx;
+	margin-right: 30rpx;
+	border: 1rpx solid #FFCCCCCC;
+	overflow: hidden;
+	background: url('/static/member/hyqy.png') no-repeat center center;
+	background-size: cover;
+}
+
+.grid-container {
+	width: 100%;
+}
+
+.grid-title {
+	font-size: 36rpx;
+	color: #fff;
+	padding: 50rpx 30rpx 40rpx 30rpx;
+	text-align: left;
+	font-weight: 900;
+}
+
+.grid-page {
+	width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+	/* justify-content: space-between; */
+	color: #fff;
+	/* padding: 0 30rpx 40rpx 30rpx; */
+	padding-bottom: 30rpx;
+	box-sizing: border-box;
+/* 	gap: 40rpx 76.5rpx; */
+	gap: 40rpx 30.5rpx;
+}
+
+.grid-item {
+	width: calc((100% - 3 * 30.5rpx) / 4);
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	/* max-width: 120rpx; */
+	/* width: 120rpx;
+	display:flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center; */
+}
+
+.grid-item-img {
+	width: 100rpx;
+	height: 100rpx;
+	display: block;
+}
+
+.grid-item-text {
+	/* max-width: 100rpx; */
+	font-size: 24rpx;
+	line-height: 1;
+	text-align: center;
+	margin-top: 14rpx;
+}
+
+.table-section {
+	width: 100%;
+	margin-top: 50rpx;
+	padding-right: 30rpx;
+	box-sizing: border-box;
+	background-color: #F5F5F7;
+	border-top-right-radius: 40rpx;
+	border-top-left-radius: 40rpx;
+}
+
+.table-title {
+	font-size: 36rpx;
+	color: #1d1d1d;
+	font-weight: bold;
+	text-align: left;
+	margin-bottom: 50rpx;
+	padding-top: 80rpx;
+	padding-left: 30rpx;
+}
+
+.table-scroll {
+	width: 100%;
+	white-space: nowrap;
+}
+
+.rights-table {
+	display: inline-block;
+	background-color: #ffffff;
+	border: 1rpx solid #EEEEEE;
+	border-radius: 16rpx;
+	overflow: hidden;
+	margin-left: 30rpx;
+}
+
+.table-row {
+	display: flex;
+	border-bottom: 1rpx solid #EEEEEE;
+	width: 100%;
+}
+
+.table-row.thead {
+	font-size: 26rpx;
+	font-weight: bold;
+}
+
+.cell {
+	width: 430rpx;
+	/* max-width: 400rpx; */
+	padding: 20rpx 10rpx;
+	text-align: center;
+	/* 	display: flex;
+	justify-content: center; */
+	color: #1D1D1F;
+	font-size: 28rpx;
+	line-height: 1.4;
+	box-sizing: border-box;
+	flex-shrink: 0;
+	overflow: hidden;
+	/* 或者 overflow: scroll; 或 overflow: auto; */
+	white-space: nowrap;
+	/* 防止文本换行 */
+	text-overflow: ellipsis;
+	/* 显示省略号 */
+}
+
+.maxw {
+	max-width: 190rpx !important;
+}
+
+.cell.cF5 {
+	color: #333333;
+}
+
+.cell.bg2 {
+	background-color: rgb(255, 252, 244);
+}
+
+.cell.bg4 {
+	background-color: rgb(255, 249, 236);
+}
+
+.cell.bg6 {
+	background-color: rgb(255, 247, 229);
+}
+
+.cell.bg8 {
+	background-color: rgb(255, 244, 220);
+}
+
+.cell.last-col {
+	border-right: none;
+}
+
+.cell.first-col {
+	width: 430rpx;
+	text-align: left;
+	padding-left: 40rpx;
+}
+
+.text-left {
+	text-align: left !important;
+	color: #333;
+}
+
+.dt,
+.bz,
+.lc {
+	padding: 60rpx 30rpx;
+	background-color: #F5F5F7;
+	padding-bottom: 0;
+	margin-top: -2rpx;
+}
+
+.dt-title,
+.bz-title,
+.lc-title {
+	color: #1d1d1d;
+	font-size: 36rpx;
+	font-weight: bold;
+	padding-bottom: 30rpx;
+}
+
+/* .lc {
+	padding-bottom: 40rpx;
+} */
+.dt-main {
+	border-radius: 40rpx;
+	background: #fff;
+	display: flex;
+	padding: 40rpx;
+}
+
+.dt-main-text {
+	margin-left: 30rpx;
+	color: #1d1d1d;
+	font-size: 18rpx;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	padding: 16rpx 0;
+}
+
+.dt-main-text-t {
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.dt-main-text-s {
+	color: #7d7d81;
+	font-size: 16rpx;
+}
+
+.lc-main {
+	padding-bottom: 60rpx;
+}
+
+.rh {
+	width: 100vw;
+	position: fixed;
+	bottom: 0;
+	background-color: #fff;
+	padding: 38rpx 0 58rpx 0;
+	display: flex;
+	justify-content: center;
+	margin-top: -2rpx;
+}
+
+.rh-btn {
+	background: linear-gradient(-75deg, #FFBA90 0%, #FFEAD5 50%, #FFEAD5 100%);
+	width: 464rpx;
+	height: 86rpx;
+	border-radius: 42rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 30rpx;
+	color: #311300;
+	font-weight: 900;
+}
+
+.price-tag {
+	position: absolute;
+	bottom: 32rpx;
+	left: 50rpx;
+	/* color: #1d1d1d; */
+	font-size: 48rpx;
+}
+
+.price-high {
+	color: #FFE4A4;
+}
+
+.price-normal {
+	color: #1d1d1d;
+}

pages/member/apply/index.vue

@@ -0,0 +1,678 @@
+<template>
+	<view>
+		<!-- 自定义透明标题栏 -->
+		<view class="custom-title-bar" :style="{paddingTop: statusBarHeight + 'px'}">
+			<view class="custom-title-content">
+				<view class="custom-back-btn" @click="goBack">
+					<image class="custom-back-icon" src="/static/back.png" mode="aspectFit"></image>
+				</view>
+				<view class="custom-placeholder"></view>
+			</view>
+		</view>
+
+		<view class="page">
+			<!-- 顶部Tabs -->
+			<view style="display: flex;justify-content: center;padding-top: 150rpx;">
+				<view class="top-tabs">
+					<view v-for="(item,index) in tabs" :key="index" class="tab-item"
+						:class="{ active: activeTab == item.id }" @click="switchTab(item.id)">
+						{{item.name}}
+					</view>
+				</view>
+			</view>
+
+			<!-- ====================== 个人会员 ====================== -->
+			<view v-if="activeTab == 1">
+				<view style="padding-left: 30rpx;">
+					<!-- 卡片轮播 -->
+					<swiper class="card-swiper" :current="personCurrent" @change="onPersonChange" next-margin="26rpx">
+						<swiper-item v-for="(item, idx) in personList" :key="idx">
+							<view class="card-wrapper" @click="handleCardClick(item, idx)">
+								<image :src="item.src" :class="{ cardActive: personCurrent === idx }"
+									class="card-img" lazy-load/>
+								<view class="price-tag" v-if="item.fees"
+									:style="{ color: item.feess >= 100000 ? '#FFE4A4' : '#1d1d1d' }" >
+									<text class="price-number" style="font-weight: bold;">{{ item.fees }}</text>
+									<text style="font-size: 24rpx; margin-left: 4rpx;">
+										<text>元</text>
+										<text style="margin:0 10rpx">/</text>
+										<text>1</text>
+										<text style="margin-left: 3rpx;">年</text>
+									</text>
+								</view>
+							</view>
+						</swiper-item>
+					</swiper>
+				</view>
+				<!-- 底部导航 -->
+				<scroll-view scroll-x class="nav-scroll" :show-scrollbar="false" scroll-with-animation
+					:scroll-left="personScrollLeft" @touchstart="onPersonTouchStart" @touchend="onPersonTouchEnd">
+					<view class="nav-wrapper">
+						<view class="nav-list" :style="personNavStyleStr">
+							<view class="nav-item" :class="{ active: personCurrent === idx }"
+								v-for="(item, idx) in personList" :key="idx" :id="'person-nav-' + idx">
+								{{ item.name }}
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+				<!-- 滑动条 -->
+				<view style="display: flex; align-items: center;justify-content: center;">
+					<image src="/static/member/hdt.png" style="width: 630rpx;height: 4rpx;padding-right: 30rpx;">
+					</image>
+				</view>
+				<!-- 会员权益 -->
+				<view class="grid-content">
+					<view class="grid-container">
+						<view class="grid-title">会员权益</view>
+						<view class="grid-page">
+							<view class="grid-item" v-for="(right, rIdx) in personCurrentRights[0]" :key="rIdx">
+								<!-- <view>{{JSON.stringify(personCurrentRights)}}----------</view>
+								<view>{{JSON.stringify(right)}}</view> -->
+								<image :src="right.image" class="grid-item-img" lazy-load></image>
+								<view class="grid-item-text">{{ right.title }}</view>
+							</view>
+						</view>
+					</view>
+				</view>
+
+				<!-- 权益对照表 -->
+				<view class="table-section">
+					<view class="table-title">个人会员权益等级对照表</view>
+					<scroll-view scroll-x class="table-scroll" :show-scrollbar="false">
+						<view class="rights-table">
+							<view class="table-row thead">
+								<view class="cell first-col">权益项目</view>
+								<view class="cell maxw" :class="{
+										bg2: idx === 0,
+										bg4: idx === 2,
+										bg6: idx === 4,
+										bg8: idx === 6,
+										'last-col': idx === personList.length - 1
+									}" v-for="(item, idx) in personList" :key="idx">
+									{{ item.name }}
+								</view>
+							</view>
+							<view class="table-row" v-for="(item, idx) in personTableData" :key="idx">
+								<view class="cell first-col  text-left">{{ item.name }}</view>
+								<view class="cell cF5 maxw" style="display: flex;justify-content: center;" :class="{
+							      bg2: colIdx === 0,
+							      bg4: colIdx === 2,
+							      bg6: colIdx === 4,
+							      bg8: colIdx === 6,
+							      'last-col': colIdx === personList.length - 1
+							    }" v-for="(level, colIdx) in personList" :key="colIdx">
+									<!-- {{ item['v' + (colIdx + 1)] }} -->
+									<image v-if="item['v' + (colIdx + 1)] === '√'" src="/static/member/gg.png"
+										class="table-icon" mode="aspectFit">
+									</image>
+									<text v-else>{{ item['v' + (colIdx + 1)] }}</text>
+								</view>
+							</view>
+						</view>
+					</scroll-view>
+				</view>
+			</view>
+
+			<!-- ====================== 单位会员 ====================== -->
+			<view v-if="activeTab == 2">
+				<view style="padding-left: 30rpx;">
+				<!-- 卡片轮播 -->
+				<swiper class="card-swiper" :current="companyCurrent" @change="onCompanyChange" next-margin="26rpx">
+					<swiper-item v-for="(item, idx) in companyList" :key="idx">
+						<view class="card-wrapper" @click="handleCardClick(item, idx)">
+							<image :src="item.src" :class="{ cardActive: companyCurrent === idx }" class="card-img" lazy-load/>
+							<view class="price-tag" v-if="item.fees"
+								:style="{ color: item.feess >= 100000 ? '#FFE4A4' : '#1d1d1d' }">
+								<text class="price-number" style="font-weight: bold;">{{ item.fees }}</text>
+								<text style="font-size: 24rpx; margin-left: 4rpx;">
+									<text>元</text>
+									<text style="margin:0 10rpx">/</text>
+									<text>1</text>
+									<text style="margin-left: 3rpx;">年</text>
+								</text>
+							</view>
+						</view>
+					</swiper-item>
+				</swiper>
+				</view>
+				<!-- 底部导航 -->
+				<scroll-view scroll-x class="nav-scroll" :show-scrollbar="false" scroll-with-animation
+					:scroll-left="companyScrollLeft" @touchstart="onCompanyTouchStart" @touchend="onCompanyTouchEnd">
+					<view class="nav-wrapper">
+						<view class="nav-list" :style="companyNavStyleStr">
+							<view class="nav-item" :class="{ active: companyCurrent === idx }"
+								v-for="(item, idx) in companyList" :key="idx" :id="'company-nav-' + idx">
+								{{ item.name }}
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+				<!-- 滑动条 -->
+				<view style="display: flex; align-items: center;justify-content: center;">
+					<image src="/static/member/hdt.png" style="width: 630rpx;height: 4rpx;padding-right: 30rpx;">
+					</image>
+				</view>
+				<!-- 会员权益 -->
+				<view class="grid-content">
+					<view class="grid-container">
+						<view class="grid-title">会员权益</view>
+						<view class="grid-page">
+							<view class="grid-item" v-for="(right, rIdx) in companyCurrentRights[0]" :key="rIdx">
+								<image :src="right.image" class="grid-item-img" lazy-load></image>
+								<view class="grid-item-text">{{ right.title }}</view>
+							</view>
+						</view>
+					</view>
+				</view>
+
+				<!-- 权益对照表 -->
+				<view class="table-section">
+					<view class="table-title">单位会员权益等级对照表</view>
+					<scroll-view scroll-x class="table-scroll" :show-scrollbar="false">
+						<view class="rights-table">
+							<view class="table-row thead">
+								<view class="cell first-col">权益项目</view>
+								<view class="cell maxw" :class="{
+								      bg2: idx === 0,
+								      bg4: idx === 2,
+								      bg6: idx === 4,
+								      bg8: idx === 6,
+								      'last-col': idx === companyList.length - 1
+								    }" v-for="(item, idx) in companyList" :key="idx">
+									{{ item.name }}
+								</view>
+							</view>
+							<view class="table-row" v-for="(item, idx) in companyTableData" :key="idx">
+								<view class="cell first-col text-left">{{ item.name }}</view>
+								<view class="cell cF5 maxw"  style="display: flex;justify-content: center;" :class="{
+							      bg2: colIdx === 0,
+							      bg4: colIdx === 2,
+							      bg6: colIdx === 4,
+							      bg8: colIdx === 6,
+							      'last-col': colIdx === companyList.length - 1
+							    }" v-for="(level, colIdx) in companyList" :key="colIdx">
+									<image v-if="item['v' + (colIdx + 1)] === '√'" src="/static/member/gg.png"
+										class="table-icon" mode="aspectFit">
+									</image>
+									<text v-else>{{ item['v' + (colIdx + 1)] }}</text>
+								</view>
+							</view>
+						</view>
+					</scroll-view>
+				</view>
+			</view>
+
+			<!-- 会员动态 -->
+			<view class="dt" @click="handleToHy" v-if="dtTitle">
+				<view class="dt-title">会员动态</view>
+				<view class="dt-main">
+					<view class="dt-main-img">
+						<image :src="dtImg" mode="" style="width: 220rpx;height: 160rpx;display: block;" ></image>
+					</view>
+					<view class="dt-main-text">
+						<view class="dt-main-text-t">{{dtTitle}}</view>
+						<view class="dt-main-text-s">时间:{{dtTime}}</view>
+					</view>
+				</view>
+			</view>
+
+			<!-- 入会标准 -->
+			<view class="bz">
+				<view class="bz-title">会员标准</view>
+				<view class="bz-main">
+					<image :src="src1" mode="widthFix" style="width: 690rpx;"></image>
+				</view>
+			</view>
+
+			<!-- 入会流程 -->
+			<view class="lc">
+				<view class="lc-title">会员标准</view>
+				<view class="lc-main">
+					<image :src="src2" mode="widthFix" style="width: 690rpx;"></image>
+				</view>
+			</view>
+
+			<!-- 申请入会 -->
+			<view class="rh" @click="handleCardClick">
+				<view class="rh-btn">申请入会</view>
+			</view>
+			<view style="width: 100%;height: 86rpx;"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				tabs: [],
+				activeTab: 1,
+				screenWidth: 375,
+				switchTimer: null,
+				// 个人会员
+				personCurrent: 0,
+				personScrollLeft: 0,
+				personStartX: 0,
+				personItemWidths: [],
+				personNavStyleStr: "padding-left:0px;padding-right:0px",
+				personInited: false,
+				personList: [],
+				personTableData: [],
+				dtTitle: '',
+				dtImg: '',
+				dtTime: '',
+				articleId: '',
+				// 单位会员
+				companyCurrent: 0,
+				companyScrollLeft: 0,
+				companyStartX: 0,
+				companyItemWidths: [],
+				companyNavStyleStr: "padding-left:0px;padding-right:0px",
+				companyInited: false,
+				companyList: [],
+				companyTableData: [],
+				src1: '',
+				src2: '',
+				// 标题栏
+				statusBarHeight: 0,
+			};
+		},
+		onLoad() {
+			// 获取状态栏高度
+			const systemInfo = uni.getSystemInfoSync();
+			this.statusBarHeight = systemInfo.statusBarHeight;
+			this.screenWidth = systemInfo.screenWidth;
+
+			this.getMemberType()
+			this.getMemberBenefitsList(1)
+			this.getMemberBenefitsList(2)
+			const adminPath = getApp().globalData.adminPath;
+			this.src1 = adminPath + '/assets/addons/wdsxh/img/member_benefits_apply_1.png'
+			this.src2 = adminPath + '/assets/addons/wdsxh/img/member_benefits_apply_2.png'
+			console.log(this.src1,'=this.src1=')
+			console.log(this.src2,'=this.src2=')
+		},
+		onReady() {
+			// 如果数据已经加载完成，直接初始化
+			if (this.personList && this.personList.length > 0) {
+				this.initPersonNav();
+			}
+			if (this.companyList && this.companyList.length > 0) {
+				this.initCompanyNav();
+			}
+		},
+		computed: {
+			// 个人：只显示 has=true 的权益
+			personCurrentRights() {
+				const item = this.personList[this.personCurrent];
+				if (!item || !item.rights) return [];
+				return item.rights
+			},
+			// 单位：只显示 has=true 的权益
+			companyCurrentRights() {
+				const item = this.companyList[this.companyCurrent];
+				if (!item || !item.rights) return [];
+				return item.rights
+			}
+		},
+		methods: {
+			// 返回上一页
+			goBack() {
+				if (getCurrentPages().length == 1) {
+					uni.switchTab({
+						url: "/pages/index/index"
+					})
+				} else {
+					uni.navigateBack()
+				}
+			},
+			// 格式化金额
+			formatNumber(num) {
+				if (!num) return '0';
+				let n = Number(num)
+				if (n >= 10000) {
+					let result = n / 10000;
+					return (Number.isInteger(result) ? result : result.toFixed(1).replace(/\.0$/, '')) + '万';
+				} else {
+					let result = n / 1000;
+					let formatted = Number.isInteger(result) ? result : result.toFixed(1).replace(/\.0$/, '');
+					return formatted + 'k';
+				}
+			},
+			// 会员类型(单位,个人)
+			getMemberType() {
+				this.$util.request("member.typeList").then(res => {
+					if (res.code == 1) {
+						this.tabs = res.data
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取入会类型 ', error)
+				})
+			},
+
+			getMemberBenefitsList(id) {
+				this.$util.request("member.benefitsList", {
+					join_config_id: id
+				}).then(res => {
+					if (res.code == 1) {
+						//文章
+						if (res.data && res.data.articles) {
+							const art = res.data.articles
+							this.dtTitle = art.title || ''
+							this.dtImg = art.image || ''
+							this.dtTime = art.createtime || ''
+							this.articleId = art.id
+						}
+
+						let list = res.data.levels_benefits || []
+						
+						let result = list.map(item => ({
+							name: item.name,
+							src: item.image,
+							feess: item.fees ? Number(item.fees) : '',
+							fees: this.formatNumber(item.fees),
+							rights:item.benefits.map(item=>{
+								return item
+							})
+							
+						}))
+						let tableData = []
+						if (list.length > 0 && list[0].all_benefits_projects) {
+							let allBenefits = list[0].all_benefits_projects || []
+		
+							tableData = allBenefits.map((ben, idx) => {
+								let row = {
+									name: ben.name
+								}
+								list.forEach((item, i) => {
+									let has = item.all_benefits_projects[idx]?.has
+									row[`v${i+1}`] = has ? "√" : "-"
+								})
+								return row
+							})
+						}
+						
+						if (id === 1) {
+							this.personList = result
+
+							this.personCurrent = 0
+							this.personTableData = tableData
+							this.$nextTick(() => {
+								this.initPersonNav();
+							})
+						} else {
+							this.companyList = result
+							this.companyCurrent = 0
+							this.companyTableData = tableData
+							this.$nextTick(() => {
+								this.initCompanyNav();
+							})
+						}
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取入会类型 ', error)
+				})
+			},
+			handleToHy() {
+				this.$util.toPage({
+					mode: 1,
+					path: `/pages/article/details?title=${'会员动态'}&id=${this.articleId}`
+				})
+			},
+			handleCardClick() {
+				this.$util.toPage({
+					mode: 1,
+					path: `/pages/member/apply/form?activeTab=${this.activeTab}`
+				})
+			},
+			switchTab(tab) {
+				this.activeTab = tab;
+				if (this.switchTimer) clearTimeout(this.switchTimer);
+				if (tab === 1) {
+					if (!this.personInited) {
+						this.switchTimer = setTimeout(() => {
+							this.initPersonNav();
+						}, 100);
+					}
+				}
+				if (tab === 2) {
+					if (!this.companyInited) {
+						this.switchTimer = setTimeout(() => {
+							this.initCompanyNav();
+						}, 100);
+					}
+				}
+			},
+			
+			// ====================== 个人会员导航相关 ======================
+			initPersonNav() {
+				if (this.personInited) return;
+				this.$nextTick(() => {
+					const query = uni.createSelectorQuery().in(this);
+					this.personList.forEach((_, idx) => {
+						query.select(`#person-nav-${idx}`).boundingClientRect();
+					});
+					query.exec(res => {
+						if (!res) return;
+						this.personItemWidths = res.map(rect => rect?.width || 70);
+						const firstW = this.personItemWidths[0] || 70;
+						const pl = (this.screenWidth - firstW) / 2;
+						const pr = (this.screenWidth - firstW) / 2;
+						this.personNavStyleStr = "padding-left:" + pl + "px;padding-right:" + pr + "px";
+						this.personInited = true;
+						
+						// 初始化完成后滚动到第一个
+						setTimeout(() => {
+							this.scrollToPersonActive(0);
+						}, 50);
+					});
+				});
+			},
+			
+			scrollToPersonActive(index) {
+				this.$nextTick(() => {
+					const query = uni.createSelectorQuery().in(this);
+					query.select(`#person-nav-${index}`).boundingClientRect();
+					query.select('.nav-scroll').boundingClientRect();
+					query.select('.nav-list').boundingClientRect();
+					
+					query.exec(res => {
+						if (!res || res.length < 3) return;
+						
+						const navItemRect = res[0];
+						const scrollRect = res[1];
+						const listRect = res[2];
+						
+						if (!navItemRect || !scrollRect || !listRect) return;
+						
+						// 计算当前导航项相对于滚动容器左边缘的距离
+						const itemRelativeLeft = navItemRect.left - scrollRect.left;
+						
+						// 计算让导航项居中时，它应该相对于滚动容器左边缘的位置
+						const targetRelativeLeft = (scrollRect.width - navItemRect.width) / 2;
+						
+						// 计算需要滚动的距离
+						let targetScrollLeft = this.personScrollLeft + (itemRelativeLeft - targetRelativeLeft);
+						
+						// 限制滚动范围
+						targetScrollLeft = Math.max(0, targetScrollLeft);
+						const maxScrollLeft = listRect.width - scrollRect.width;
+						targetScrollLeft = Math.min(targetScrollLeft, maxScrollLeft);
+						
+						// 更新滚动位置
+						this.personScrollLeft = targetScrollLeft;
+					});
+				});
+			},
+			
+			onPersonTouchStart(e) {
+				this.personStartX = e.touches[0].clientX;
+			},
+			
+			onPersonTouchEnd(e) {
+				const diff = e.changedTouches[0].clientX - this.personStartX;
+				if (Math.abs(diff) < 30) return;
+				let next = diff < 0 ? Math.min(this.personCurrent + 1, this.personList.length - 1) : Math.max(this.personCurrent - 1, 0);
+				this.personCurrent = next;
+			},
+			
+			onPersonChange(e) {
+				this.personCurrent = e.detail.current;
+				setTimeout(() => {
+					this.scrollToPersonActive(this.personCurrent);
+				}, 50);
+			},
+			
+			// ====================== 单位会员导航相关 ======================
+			initCompanyNav() {
+				if (this.companyInited) return;
+				this.$nextTick(() => {
+					const query = uni.createSelectorQuery().in(this);
+					this.companyList.forEach((_, idx) => {
+						query.select(`#company-nav-${idx}`).boundingClientRect();
+					});
+					query.exec(res => {
+						if (!res) return;
+						this.companyItemWidths = res.map(rect => rect?.width || 70);
+						const firstW = this.companyItemWidths[0] || 70;
+						const pl = (this.screenWidth - firstW) / 2;
+						const pr = (this.screenWidth - firstW) / 2;
+						this.companyNavStyleStr = "padding-left:" + pl + "px;padding-right:" + pr + "px";
+						this.companyInited = true;
+						
+						// 初始化完成后滚动到第一个
+						setTimeout(() => {
+							this.scrollToCompanyActive(0);
+						}, 50);
+					});
+				});
+			},
+			
+			scrollToCompanyActive(index) {
+				this.$nextTick(() => {
+					const query = uni.createSelectorQuery().in(this);
+					query.select(`#company-nav-${index}`).boundingClientRect();
+					query.select('.nav-scroll').boundingClientRect();
+					query.select('.nav-list').boundingClientRect();
+					
+					query.exec(res => {
+						if (!res || res.length < 3) return;
+						
+						const navItemRect = res[0];
+						const scrollRect = res[1];
+						const listRect = res[2];
+						
+						if (!navItemRect || !scrollRect || !listRect) return;
+						
+						// 计算当前导航项相对于滚动容器左边缘的距离
+						const itemRelativeLeft = navItemRect.left - scrollRect.left;
+						
+						// 计算让导航项居中时，它应该相对于滚动容器左边缘的位置
+						const targetRelativeLeft = (scrollRect.width - navItemRect.width) / 2;
+						
+						// 计算需要滚动的距离
+						let targetScrollLeft = this.companyScrollLeft + (itemRelativeLeft - targetRelativeLeft);
+						
+						// 限制滚动范围
+						targetScrollLeft = Math.max(0, targetScrollLeft);
+						const maxScrollLeft = listRect.width - scrollRect.width;
+						targetScrollLeft = Math.min(targetScrollLeft, maxScrollLeft);
+						
+						// 更新滚动位置
+						this.companyScrollLeft = targetScrollLeft;
+						
+						console.log('单位滚动调试:', {
+							当前索引: index,
+							当前滚动位置: this.companyScrollLeft,
+							项相对位置: itemRelativeLeft,
+							目标相对位置: targetRelativeLeft,
+							新滚动位置: targetScrollLeft,
+							最大滚动距离: maxScrollLeft
+						});
+					});
+				});
+			},
+			
+			onCompanyTouchStart(e) {
+				this.companyStartX = e.touches[0].clientX;
+			},
+			
+			onCompanyTouchEnd(e) {
+				const diff = e.changedTouches[0].clientX - this.companyStartX;
+				if (Math.abs(diff) < 30) return;
+				let next = diff < 0 ? Math.min(this.companyCurrent + 1, this.companyList.length - 1) : Math.max(this.companyCurrent - 1, 0);
+				this.companyCurrent = next;
+			},
+			
+			onCompanyChange(e) {
+				this.companyCurrent = e.detail.current;
+				setTimeout(() => {
+					this.scrollToCompanyActive(this.companyCurrent);
+				}, 50);
+			},
+		}
+	};
+</script>
+<style scoped>
+	@import 'index.css';
+
+	/* 自定义透明标题栏样式 */
+	.custom-title-bar {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 999;
+		background: transparent;
+	}
+
+	.custom-title-content {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: 88rpx;
+		padding: 0 32rpx;
+	}
+
+	.custom-back-btn {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.custom-back-icon {
+		width: 40rpx;
+		height: 40rpx;
+	}
+
+	.custom-title {
+		flex: 1;
+		text-align: center;
+		font-size: 36rpx;
+		font-weight: 500;
+		color: #FFFFFF;
+		letter-spacing: 2rpx;
+	}
+
+	.custom-placeholder {
+		width: 60rpx;
+		height: 60rpx;
+	}
+	.table-icon {
+		width: 18rpx;
+		height: 13rpx;
+	}
+</style>

pages/member/apply/index1.vue

@@ -0,0 +1,588 @@
+<template>
+	<view>
+		<!-- 自定义透明标题栏 -->
+		<view class="custom-title-bar" :style="{paddingTop: statusBarHeight + 'px'}">
+			<view class="custom-title-content">
+				<view class="custom-back-btn" @click="goBack">
+					<image class="custom-back-icon" src="/static/back.png" mode="aspectFit"></image>
+				</view>
+				<view class="custom-placeholder"></view>
+			</view>
+		</view>
+
+		<view class="page">
+			<!-- 顶部Tabs -->
+			<view style="display: flex;justify-content: center;padding-top: 150rpx;">
+				<view class="top-tabs">
+					<view v-for="(item,index) in tabs" :key="index" class="tab-item"
+						:class="{ active: activeTab == item.id }" @click="switchTab(item.id)">
+						{{item.name}}
+					</view>
+				</view>
+			</view>
+
+			<!-- ====================== 个人会员 ====================== -->
+			<view v-if="activeTab === 1">
+				<view style="padding-left: 30rpx;">
+					<!-- 卡片轮播 -->
+					<swiper class="card-swiper" :current="personCurrent" @change="onPersonChange" next-margin="28rpx">
+						<swiper-item v-for="(item, idx) in personList" :key="idx">
+							<view class="card-wrapper" @click="handleCardClick(item, idx)">
+								<image :src="item.src" :class="{ cardActive: personCurrent === idx }"
+									class="card-img" />
+								<view class="price-tag" v-if="item.fees"
+									:style="{ color: item.feess >= 100000 ? '#FFE4A4' : '#1d1d1d' }">
+									<text class="price-number">{{ item.fees }}</text>
+									<text style="font-size: 24rpx; margin-left: 4rpx;">
+										<text>元</text>
+										<text style="margin:0 10rpx">/</text>
+										<text>1</text>
+										<text style="margin-left: 3rpx;">年</text>
+									</text>
+								</view>
+							</view>
+						</swiper-item>
+					</swiper>
+				</view>
+				<!-- 底部导航 -->
+				<scroll-view scroll-x class="nav-scroll" :show-scrollbar="false" scroll-with-animation
+					:scroll-left="personScrollLeft" @touchstart="onPersonTouchStart" @touchend="onPersonTouchEnd">
+					<view class="nav-wrapper">
+						<view class="nav-list" :style="personNavStyleStr">
+							<view class="nav-item" :class="{ active: personCurrent === idx }"
+								v-for="(item, idx) in personList" :key="idx" :id="'person-nav-' + idx">
+								{{ item.name }}
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+				<!-- 滑动条 -->
+				<view style="display: flex; align-items: center;justify-content: center;">
+					<image src="/static/member/hdt.png" style="width: 630rpx;height: 4rpx;padding-right: 30rpx;">
+					</image>
+				</view>
+				<!-- 会员权益 -->
+				<view class="grid-content">
+					<view class="grid-container">
+						<view class="grid-title">会员权益</view>
+						<view class="grid-page">
+							<view class="grid-item" v-for="(right, rIdx) in personCurrentRights" :key="rIdx">
+								<image :src="right.img" class="grid-item-img"></image>
+								<view class="grid-item-text">{{ right.name }}</view>
+							</view>
+						</view>
+					</view>
+				</view>
+
+				<!-- 权益对照表 -->
+				<view class="table-section">
+					<view class="table-title">个人会员权益等级对照表</view>
+					<scroll-view scroll-x class="table-scroll" :show-scrollbar="false">
+						<view class="rights-table">
+							<view class="table-row thead">
+								<view class="cell first-col">权益项目</view>
+								<view class="cell" :class="{
+										bg2: idx === 0,
+										bg4: idx === 2,
+										bg6: idx === 4,
+										bg8: idx === 6,
+										'last-col': idx === personList.length - 1
+									}" v-for="(item, idx) in personList" :key="idx">
+									{{ item.name }}
+								</view>
+							</view>
+							<view class="table-row" v-for="(item, idx) in personTableData" :key="idx">
+								<view class="cell first-col text-left">{{ item.name }}</view>
+								<view class="cell cF5" :class="{
+							      bg2: colIdx === 0,
+							      bg4: colIdx === 2,
+							      bg6: colIdx === 4,
+							      bg8: colIdx === 6,
+							      'last-col': colIdx === personList.length - 1
+							    }" v-for="(level, colIdx) in personList" :key="colIdx">
+									<!-- {{ item['v' + (colIdx + 1)] }} -->
+									<image v-if="item['v' + (colIdx + 1)] === '√'" src="/static/member/gg.png"
+										class="table-icon" mode="aspectFit">
+									</image>
+									<text v-else>{{ item['v' + (colIdx + 1)] }}</text>
+								</view>
+							</view>
+						</view>
+					</scroll-view>
+				</view>
+			</view>
+
+			<!-- ====================== 单位会员 ====================== -->
+			<view v-if="activeTab === 2">
+				<!-- 卡片轮播 -->
+				<swiper class="card-swiper" :current="companyCurrent" @change="onCompanyChange" next-margin="28rpx">
+					<swiper-item v-for="(item, idx) in companyList" :key="idx">
+						<view class="card-wrapper" @click="handleCardClick(item, idx)">
+							<image :src="item.src" :class="{ cardActive: companyCurrent === idx }" class="card-img" />
+							<view class="price-tag" v-if="item.fees"
+								:style="{ color: item.feess >= 100000 ? '#FFE4A4' : '#1d1d1d' }">
+								<text class="price-number">{{ item.fees }}</text>
+								<text style="font-size: 24rpx; margin-left: 4rpx;">
+									<text>元</text>
+									<text style="margin:0 10rpx">/</text>
+									<text>1</text>
+									<text style="margin-left: 3rpx;">年</text>
+								</text>
+							</view>
+						</view>
+					</swiper-item>
+				</swiper>
+
+				<!-- 底部导航 -->
+				<scroll-view scroll-x class="nav-scroll" :show-scrollbar="false" scroll-with-animation
+					:scroll-left="companyScrollLeft" @touchstart="onCompanyTouchStart" @touchend="onCompanyTouchEnd">
+					<view class="nav-wrapper">
+						<view class="nav-list" :style="companyNavStyleStr">
+							<view class="nav-item" :class="{ active: companyCurrent === idx }"
+								v-for="(item, idx) in companyList" :key="idx" :id="'company-nav-' + idx">
+								{{ item.name }}
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+				<!-- 滑动条 -->
+				<view style="display: flex; align-items: center;justify-content: center;">
+					<image src="/static/member/hdt.png" style="width: 630rpx;height: 4rpx;padding-right: 30rpx;">
+					</image>
+				</view>
+				<!-- 会员权益 -->
+				<view class="grid-content">
+					<view class="grid-container">
+						<view class="grid-title">会员权益</view>
+						<view class="grid-page">
+							<view class="grid-item" v-for="(right, rIdx) in companyCurrentRights" :key="rIdx">
+								<image :src="right.img" class="grid-item-img"></image>
+								<view class="grid-item-text">{{ right.name }}</view>
+							</view>
+						</view>
+					</view>
+				</view>
+
+				<!-- 权益对照表 -->
+				<view class="table-section">
+					<view class="table-title">单位会员权益等级对照表</view>
+					<scroll-view scroll-x class="table-scroll" :show-scrollbar="false">
+						<view class="rights-table">
+							<view class="table-row thead">
+								<view class="cell first-col">权益项目</view>
+								<view class="cell" :class="{
+								      bg2: idx === 0,
+								      bg4: idx === 2,
+								      bg6: idx === 4,
+								      bg8: idx === 6,
+								      'last-col': idx === companyList.length - 1
+								    }" v-for="(item, idx) in companyList" :key="idx">
+									{{ item.name }}
+								</view>
+							</view>
+							<view class="table-row" v-for="(item, idx) in companyTableData" :key="idx">
+								<view class="cell first-col text-left">{{ item.name }}</view>
+								<view class="cell cF5" :class="{
+							      bg2: colIdx === 0,
+							      bg4: colIdx === 2,
+							      bg6: colIdx === 4,
+							      bg8: colIdx === 6,
+							      'last-col': colIdx === companyList.length - 1
+							    }" v-for="(level, colIdx) in companyList" :key="colIdx">
+									<image v-if="item['v' + (colIdx + 1)] === '√'" src="/static/member/gg.png"
+										class="table-icon" mode="aspectFit">
+									</image>
+									<text v-else>{{ item['v' + (colIdx + 1)] }}</text>
+								</view>
+							</view>
+						</view>
+					</scroll-view>
+				</view>
+			</view>
+
+			<!-- 会员动态 -->
+			<view class="dt" @click="handleToHy">
+				<view class="dt-title">会员动态</view>
+				<view class="dt-main">
+					<view class="dt-main-img">
+						<image :src="dtImg" mode="" style="width: 220rpx;height: 160rpx;display: block;"></image>
+					</view>
+					<view class="dt-main-text">
+						<view class="dt-main-text-t">{{dtTitle}}</view>
+						<view class="dt-main-text-s">时间:{{dtTime}}</view>
+					</view>
+				</view>
+			</view>
+
+			<!-- 入会标准 -->
+			<view class="bz">
+				<view class="bz-title">会员标准</view>
+				<view class="bz-main">
+					<image :src="src1" mode="widthFix" style="width: 690rpx;"></image>
+				</view>
+			</view>
+
+			<!-- 入会流程 -->
+			<view class="lc">
+				<view class="lc-title">会员标准</view>
+				<view class="lc-main">
+					<image :src="src2" mode="widthFix" style="width: 690rpx;"></image>
+				</view>
+			</view>
+
+			<!-- 申请入会 -->
+			<view class="rh" @click="handleCardClick">
+				<view class="rh-btn">申请入会</view>
+			</view>
+			<view style="width: 100%;height: 86rpx;"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				tabs: [],
+				activeTab: 1,
+				screenWidth: 375,
+				switchTimer: null,
+				// 个人会员
+				personCurrent: 0,
+				personScrollLeft: 0,
+				personStartX: 0,
+				personItemWidths: [],
+				personNavStyleStr: "padding-left:0px;padding-right:0px",
+				personInited: false,
+				personList: [],
+				personTableData: [],
+				dtTitle: '',
+				dtImg: '',
+				dtTime: '',
+				articleId: '',
+				// 单位会员
+				companyCurrent: 0,
+				companyScrollLeft: 0,
+				companyStartX: 0,
+				companyItemWidths: [],
+				companyNavStyleStr: "padding-left:0px;padding-right:0px",
+				companyInited: false,
+				companyList: [],
+				companyTableData: [],
+				src1: '',
+				src2: '',
+				// 标题栏
+				statusBarHeight: 0,
+			};
+		},
+		onLoad() {
+			// 获取状态栏高度
+			const systemInfo = uni.getSystemInfoSync();
+			this.statusBarHeight = systemInfo.statusBarHeight;
+
+			this.getMemberType()
+			this.getMemberBenefitsList(1)
+			this.getMemberBenefitsList(2)
+			const adminPath = getApp().globalData.adminPath;
+			this.src1 = adminPath + '/assets/addons/wdsxh/img/member_benefits_apply_1.png'
+			this.src2 = adminPath + '/assets/addons/wdsxh/img/member_benefits_apply_2.png'
+			console.log(adminPath, '=adminPath=')
+		},
+		onReady() {
+			this.screenWidth = uni.getSystemInfoSync().screenWidth;
+			// 如果数据已经加载完成，直接初始化
+			if (this.personList && this.personList.length > 0) {
+				this.initPersonNav();
+			}
+			if (this.companyList && this.companyList.length > 0) {
+				this.initCompanyNav();
+			}
+		},
+		computed: {
+			// 个人：只显示 has=true 的权益
+			personCurrentRights() {
+				const item = this.personList[this.personCurrent];
+				if (!item || !item.rights) return [];
+				return item.rights.filter(b => b.has === true);
+			},
+			// 单位：只显示 has=true 的权益
+			companyCurrentRights() {
+				const item = this.companyList[this.companyCurrent];
+				if (!item || !item.rights) return [];
+				return item.rights.filter(b => b.has === true);
+			}
+		},
+		methods: {
+			// 返回上一页
+			goBack() {
+				if (getCurrentPages().length == 1) {
+					uni.switchTab({
+						url: "/pages/index/index"
+					})
+				} else {
+					uni.navigateBack()
+				}
+			},
+			// 格式化金额
+			formatNumber(num) {
+				if (!num) return '0';
+				let n = Number(num)
+				if (n >= 10000) {
+					let result = n / 10000;
+					return (Number.isInteger(result) ? result : result.toFixed(1).replace(/\.0$/, '')) + '万';
+				} else {
+					let result = n / 1000;
+					let formatted = Number.isInteger(result) ? result : result.toFixed(1).replace(/\.0$/, '');
+					return formatted + 'k';
+				}
+			},
+			// 会员类型(单位,个人)
+			getMemberType() {
+				this.$util.request("member.typeList").then(res => {
+					if (res.code == 1) {
+						this.tabs = res.data
+						console.log(this.tabs, '===============>')
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取入会类型 ', error)
+				})
+			},
+			getMemberBenefitsList(id) {
+				this.$util.request("member.benefitsList", {
+					join_config_id: id
+				}).then(res => {
+					if (res.code == 1) {
+						console.log(res, '===========res==========')
+						if (res.data && res.data.articles) {
+							const art = res.data.articles
+							this.dtTitle = art.title || ''
+							this.dtImg = art.image || ''
+							this.dtTime = art.createtime || ''
+							this.articleId = art.id
+						}
+
+						let list = res.data.levels_benefits || []
+						let result = list.map(item => ({
+							name: item.name,
+							src: item.image,
+							feess: item.fees ? Number(item.fees) : '',
+							fees: this.formatNumber(item.fees),
+							rights: (item.benefits || []).map(b => ({
+								name: b.title,
+								img: b.image,
+								has: b.has,
+							}))
+						}))
+						console.log(result, '=result=')
+
+						let tableData = []
+						if (list.length > 0 && list[0].benefits) {
+							let allBenefits = list[0].benefits || []
+							tableData = allBenefits.map((ben, idx) => {
+								let row = {
+									name: ben.title
+								}
+								list.forEach((item, i) => {
+									let has = item.benefits[idx]?.has
+									row[`v${i+1}`] = has ? "√" : "-"
+								})
+								return row
+							})
+						}
+
+						if (id === 1) {
+							this.personList = result
+							console.log(this.personList, 'personList=')
+							this.personCurrent = 0
+							this.personTableData = tableData
+							this.$nextTick(() => {
+								this.initPersonNav();
+							})
+						} else {
+							this.companyList = result
+							this.companyCurrent = 0
+							this.companyTableData = tableData
+							this.$nextTick(() => {
+								this.initCompanyNav();
+							})
+						}
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取入会类型 ', error)
+				})
+			},
+			handleToHy() {
+				this.$util.toPage({
+					mode: 1,
+					path: `/pages/article/details?title=${'会员动态'}&id=${this.articleId}`
+				})
+			},
+			handleCardClick() {
+				console.log('点击失效')
+				this.$util.toPage({
+					mode: 1,
+					path: `/pages/member/apply/form?activeTab=${this.activeTab}`
+				})
+			},
+			switchTab(tab) {
+				this.activeTab = tab;
+				if (this.switchTimer) clearTimeout(this.switchTimer);
+				if (tab === 1) {
+					if (!this.personInited) {
+						this.switchTimer = setTimeout(() => {
+							this.initPersonNav();
+						}, 100);
+					}
+				}
+				if (tab === 2) {
+					if (!this.companyInited) {
+						this.switchTimer = setTimeout(() => {
+							this.initCompanyNav();
+						}, 100);
+					}
+				}
+			},
+			// 个人导航初始化
+			initPersonNav() {
+				if (this.personInited) return;
+				const query = uni.createSelectorQuery().in(this);
+				this.personList.forEach((_, idx) => {
+					query.select(`#person-nav-${idx}`).boundingClientRect();
+				});
+				query.exec(res => {
+					if (!res) return;
+					this.personItemWidths = res.map(rect => rect?.width || 70);
+					const firstW = this.personItemWidths[0] || 70;
+					const pl = (this.screenWidth - firstW) / 2;
+					const pr = (this.screenWidth - firstW) / 2;
+					this.personNavStyleStr = "padding-left:" + pl + "px;padding-right:" + pr + "px";
+					this.personInited = true;
+					this.scrollToPersonActive(0);
+				});
+			},
+			onPersonTouchStart(e) {
+				this.personStartX = e.touches[0].clientX;
+			},
+			onPersonTouchEnd(e) {
+				const diff = e.changedTouches[0].clientX - this.personStartX;
+				if (Math.abs(diff) < 30) return;
+				let next = diff < 0 ? Math.min(this.personCurrent + 1, this.personList.length - 1) : Math.max(this
+					.personCurrent - 1, 0);
+				this.personCurrent = next;
+			},
+			scrollToPersonActive(index) {
+				let beforeWidth = 0;
+				for (let i = 0; i < index; i++) beforeWidth += this.personItemWidths[i];
+				const pl = (this.screenWidth - (this.personItemWidths[0] || 70)) / 2;
+				const w = this.personItemWidths[index];
+				this.personScrollLeft = Math.max(pl + beforeWidth - (this.screenWidth - w) / 2, 0);
+			},
+			onPersonChange(e) {
+				this.personCurrent = e.detail.current;
+				this.scrollToPersonActive(this.personCurrent);
+			},
+			// 单位导航初始化
+			initCompanyNav() {
+				if (this.companyInited) return;
+				const query = uni.createSelectorQuery().in(this);
+				this.companyList.forEach((_, idx) => {
+					query.select(`#company-nav-${idx}`).boundingClientRect();
+				});
+				query.exec(res => {
+					if (!res) return;
+					this.companyItemWidths = res.map(rect => rect?.width || 70);
+					const firstW = this.companyItemWidths[0] || 70;
+					const pl = (this.screenWidth - firstW) / 2;
+					const pr = (this.screenWidth - firstW) / 2;
+					this.companyNavStyleStr = "padding-left:" + pl + "px;padding-right:" + pr + "px";
+					this.companyInited = true;
+					this.scrollToCompanyActive(0);
+				});
+			},
+			onCompanyTouchStart(e) {
+				this.companyStartX = e.touches[0].clientX;
+			},
+			onCompanyTouchEnd(e) {
+				const diff = e.changedTouches[0].clientX - this.companyStartX;
+				if (Math.abs(diff) < 30) return;
+				let next = diff < 0 ? Math.min(this.companyCurrent + 1, this.companyList.length - 1) : Math.max(this
+					.companyCurrent - 1, 0);
+				this.companyCurrent = next;
+			},
+			scrollToCompanyActive(index) {
+				let beforeWidth = 0;
+				for (let i = 0; i < index; i++) beforeWidth += this.companyItemWidths[i];
+				const pl = (this.screenWidth - (this.companyItemWidths[0] || 70)) / 2;
+				const w = this.companyItemWidths[index];
+				this.companyScrollLeft = Math.max(pl + beforeWidth - (this.screenWidth - w) / 2, 0);
+			},
+			onCompanyChange(e) {
+				this.companyCurrent = e.detail.current;
+				this.scrollToCompanyActive(this.companyCurrent);
+			},
+		}
+	};
+</script>
+
+<style scoped>
+	@import 'index.css';
+
+	/* 自定义透明标题栏样式 */
+	.custom-title-bar {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 999;
+		background: transparent;
+	}
+
+	.custom-title-content {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: 88rpx;
+		padding: 0 32rpx;
+	}
+
+	.custom-back-btn {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.custom-back-icon {
+		width: 40rpx;
+		height: 40rpx;
+	}
+
+	.custom-title {
+		flex: 1;
+		text-align: center;
+		font-size: 36rpx;
+		font-weight: 500;
+		color: #FFFFFF;
+		letter-spacing: 2rpx;
+	}
+
+	.custom-placeholder {
+		width: 60rpx;
+		height: 60rpx;
+	}
+	.table-icon {
+		width: 18rpx;
+		height: 13rpx;
+	}
+</style>

pages/member/apply/index2.vue

@@ -0,0 +1,660 @@
+<template>
+	<view>
+		<!-- 自定义透明标题栏 -->
+		<view class="custom-title-bar" :style="{paddingTop: statusBarHeight + 'px'}">
+			<view class="custom-title-content">
+				<view class="custom-back-btn" @click="goBack">
+					<image class="custom-back-icon" src="/static/back.png" mode="aspectFit"></image>
+				</view>
+				<view class="custom-placeholder"></view>
+			</view>
+		</view>
+
+		<view class="page">
+			<!-- 顶部Tabs -->
+			<view style="display: flex;justify-content: center;padding-top: 150rpx;">
+				<view class="top-tabs">
+					<view v-for="(item,index) in tabs" :key="index" class="tab-item"
+						:class="{ active: activeTab == item.id }" @click="switchTab(item.id)">
+						{{item.name}}
+					</view>
+				</view>
+			</view>
+
+			<!-- ====================== 个人会员 ====================== -->
+			<view v-if="activeTab === 1">
+				<view style="padding-left: 30rpx;">
+					<!-- 卡片轮播 -->
+					<swiper class="card-swiper" :current="personCurrent" @change="onPersonChange" next-margin="28rpx">
+						<swiper-item v-for="(item, idx) in personList" :key="idx">
+							<view class="card-wrapper" @click="handleCardClick(item, idx)">
+								<image :src="item.src" :class="{ cardActive: personCurrent === idx }"
+									class="card-img" />
+								<view class="price-tag" v-if="item.fees"
+									:style="{ color: item.feess >= 100000 ? '#FFE4A4' : '#1d1d1d' }">
+									<text class="price-number">{{ item.fees }}</text>
+									<text style="font-size: 24rpx; margin-left: 4rpx;">
+										<text>元</text>
+										<text style="margin:0 10rpx">/</text>
+										<text>1</text>
+										<text style="margin-left: 3rpx;">年</text>
+									</text>
+								</view>
+							</view>
+						</swiper-item>
+					</swiper>
+				</view>
+				<!-- 底部导航 -->
+				<scroll-view scroll-x class="nav-scroll" :show-scrollbar="false" scroll-with-animation
+					:scroll-left="personScrollLeft" @touchstart="onPersonTouchStart" @touchend="onPersonTouchEnd">
+					<view class="nav-wrapper">
+						<view class="nav-list" :style="personNavStyleStr">
+							<view class="nav-item" :class="{ active: personCurrent === idx }"
+								v-for="(item, idx) in personList" :key="idx" :id="'person-nav-' + idx">
+								{{ item.name }}
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+				<!-- 滑动条 -->
+				<view style="display: flex; align-items: center;justify-content: center;">
+					<image src="/static/member/hdt.png" style="width: 630rpx;height: 4rpx;padding-right: 30rpx;">
+					</image>
+				</view>
+				<!-- 会员权益 -->
+				<view class="grid-content">
+					<view class="grid-container">
+						<view class="grid-title">会员权益</view>
+						<view class="grid-page">
+							<view class="grid-item" v-for="(right, rIdx) in personCurrentRights" :key="rIdx">
+								<image :src="right.img" class="grid-item-img"></image>
+								<view class="grid-item-text">{{ right.name }}</view>
+							</view>
+						</view>
+					</view>
+				</view>
+
+				<!-- 权益对照表 -->
+				<view class="table-section">
+					<view class="table-title">个人会员权益等级对照表</view>
+					<scroll-view scroll-x class="table-scroll" :show-scrollbar="false">
+						<view class="rights-table">
+							<view class="table-row thead">
+								<view class="cell first-col">权益项目</view>
+								<view class="cell" :class="{
+										bg2: idx === 0,
+										bg4: idx === 2,
+										bg6: idx === 4,
+										bg8: idx === 6,
+										'last-col': idx === personList.length - 1
+									}" v-for="(item, idx) in personList" :key="idx">
+									{{ item.name }}
+								</view>
+							</view>
+							<view class="table-row" v-for="(item, idx) in personTableData" :key="idx">
+								<view class="cell first-col text-left">{{ item.name }}</view>
+								<view class="cell cF5" :class="{
+							      bg2: colIdx === 0,
+							      bg4: colIdx === 2,
+							      bg6: colIdx === 4,
+							      bg8: colIdx === 6,
+							      'last-col': colIdx === personList.length - 1
+							    }" v-for="(level, colIdx) in personList" :key="colIdx">
+									<!-- {{ item['v' + (colIdx + 1)] }} -->
+									<image v-if="item['v' + (colIdx + 1)] === '√'" src="/static/member/gg.png"
+										class="table-icon" mode="aspectFit">
+									</image>
+									<text v-else>{{ item['v' + (colIdx + 1)] }}</text>
+								</view>
+							</view>
+						</view>
+					</scroll-view>
+				</view>
+			</view>
+
+			<!-- ====================== 单位会员 ====================== -->
+			<view v-if="activeTab === 2">
+				<!-- 卡片轮播 -->
+				<swiper class="card-swiper" :current="companyCurrent" @change="onCompanyChange" next-margin="28rpx">
+					<swiper-item v-for="(item, idx) in companyList" :key="idx">
+						<view class="card-wrapper" @click="handleCardClick(item, idx)">
+							<image :src="item.src" :class="{ cardActive: companyCurrent === idx }" class="card-img" />
+							<view class="price-tag" v-if="item.fees"
+								:style="{ color: item.feess >= 100000 ? '#FFE4A4' : '#1d1d1d' }">
+								<text class="price-number">{{ item.fees }}</text>
+								<text style="font-size: 24rpx; margin-left: 4rpx;">
+									<text>元</text>
+									<text style="margin:0 10rpx">/</text>
+									<text>1</text>
+									<text style="margin-left: 3rpx;">年</text>
+								</text>
+							</view>
+						</view>
+					</swiper-item>
+				</swiper>
+
+				<!-- 底部导航 -->
+				<scroll-view scroll-x class="nav-scroll" :show-scrollbar="false" scroll-with-animation
+					:scroll-left="companyScrollLeft" @touchstart="onCompanyTouchStart" @touchend="onCompanyTouchEnd">
+					<view class="nav-wrapper">
+						<view class="nav-list" :style="companyNavStyleStr">
+							<view class="nav-item" :class="{ active: companyCurrent === idx }"
+								v-for="(item, idx) in companyList" :key="idx" :id="'company-nav-' + idx">
+								{{ item.name }}
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+				<!-- 滑动条 -->
+				<view style="display: flex; align-items: center;justify-content: center;">
+					<image src="/static/member/hdt.png" style="width: 630rpx;height: 4rpx;padding-right: 30rpx;">
+					</image>
+				</view>
+				<!-- 会员权益 -->
+				<view class="grid-content">
+					<view class="grid-container">
+						<view class="grid-title">会员权益</view>
+						<view class="grid-page">
+							<view class="grid-item" v-for="(right, rIdx) in companyCurrentRights" :key="rIdx">
+								<image :src="right.img" class="grid-item-img"></image>
+								<view class="grid-item-text">{{ right.name }}</view>
+							</view>
+						</view>
+					</view>
+				</view>
+
+				<!-- 权益对照表 -->
+				<view class="table-section">
+					<view class="table-title">单位会员权益等级对照表</view>
+					<scroll-view scroll-x class="table-scroll" :show-scrollbar="false">
+						<view class="rights-table">
+							<view class="table-row thead">
+								<view class="cell first-col">权益项目</view>
+								<view class="cell" :class="{
+								      bg2: idx === 0,
+								      bg4: idx === 2,
+								      bg6: idx === 4,
+								      bg8: idx === 6,
+								      'last-col': idx === companyList.length - 1
+								    }" v-for="(item, idx) in companyList" :key="idx">
+									{{ item.name }}
+								</view>
+							</view>
+							<view class="table-row" v-for="(item, idx) in companyTableData" :key="idx">
+								<view class="cell first-col text-left">{{ item.name }}</view>
+								<view class="cell cF5" :class="{
+							      bg2: colIdx === 0,
+							      bg4: colIdx === 2,
+							      bg6: colIdx === 4,
+							      bg8: colIdx === 6,
+							      'last-col': colIdx === companyList.length - 1
+							    }" v-for="(level, colIdx) in companyList" :key="colIdx">
+									<image v-if="item['v' + (colIdx + 1)] === '√'" src="/static/member/gg.png"
+										class="table-icon" mode="aspectFit">
+									</image>
+									<text v-else>{{ item['v' + (colIdx + 1)] }}</text>
+								</view>
+							</view>
+						</view>
+					</scroll-view>
+				</view>
+			</view>
+
+			<!-- 会员动态 -->
+			<view class="dt" @click="handleToHy">
+				<view class="dt-title">会员动态</view>
+				<view class="dt-main">
+					<view class="dt-main-img">
+						<image :src="dtImg" mode="" style="width: 220rpx;height: 160rpx;display: block;"></image>
+					</view>
+					<view class="dt-main-text">
+						<view class="dt-main-text-t">{{dtTitle}}</view>
+						<view class="dt-main-text-s">时间:{{dtTime}}</view>
+					</view>
+				</view>
+			</view>
+
+			<!-- 入会标准 -->
+			<view class="bz">
+				<view class="bz-title">会员标准</view>
+				<view class="bz-main">
+					<image :src="src1" mode="widthFix" style="width: 690rpx;"></image>
+				</view>
+			</view>
+
+			<!-- 入会流程 -->
+			<view class="lc">
+				<view class="lc-title">会员标准</view>
+				<view class="lc-main">
+					<image :src="src2" mode="widthFix" style="width: 690rpx;"></image>
+				</view>
+			</view>
+
+			<!-- 申请入会 -->
+			<view class="rh" @click="handleCardClick">
+				<view class="rh-btn">申请入会</view>
+			</view>
+			<view style="width: 100%;height: 86rpx;"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				tabs: [],
+				activeTab: 1,
+				screenWidth: 375,
+				switchTimer: null,
+				// 个人会员
+				personCurrent: 0,
+				personScrollLeft: 0,
+				personStartX: 0,
+				personItemWidths: [],
+				personNavStyleStr: "padding-left:0px;padding-right:0px",
+				personInited: false,
+				personList: [],
+				personTableData: [],
+				dtTitle: '',
+				dtImg: '',
+				dtTime: '',
+				articleId: '',
+				// 单位会员
+				companyCurrent: 0,
+				companyScrollLeft: 0,
+				companyStartX: 0,
+				companyItemWidths: [],
+				companyNavStyleStr: "padding-left:0px;padding-right:0px",
+				companyInited: false,
+				companyList: [],
+				companyTableData: [],
+				src1: '',
+				src2: '',
+				// 标题栏
+				statusBarHeight: 0,
+			};
+		},
+		onLoad() {
+			// 获取状态栏高度
+			const systemInfo = uni.getSystemInfoSync();
+			this.statusBarHeight = systemInfo.statusBarHeight;
+
+			this.getMemberType()
+			this.getMemberBenefitsList(1)
+			this.getMemberBenefitsList(2)
+			const adminPath = getApp().globalData.adminPath;
+			this.src1 = adminPath + '/assets/addons/wdsxh/img/member_benefits_apply_1.png'
+			this.src2 = adminPath + '/assets/addons/wdsxh/img/member_benefits_apply_2.png'
+			console.log(adminPath, '=adminPath=')
+		},
+		onReady() {
+			this.screenWidth = uni.getSystemInfoSync().screenWidth;
+			// 如果数据已经加载完成，直接初始化
+			if (this.personList && this.personList.length > 0) {
+				this.initPersonNav();
+			}
+			if (this.companyList && this.companyList.length > 0) {
+				this.initCompanyNav();
+			}
+		},
+		computed: {
+			// 个人：只显示 has=true 的权益
+			personCurrentRights() {
+				const item = this.personList[this.personCurrent];
+				if (!item || !item.rights) return [];
+				return item.rights.filter(b => b.has === true);
+			},
+			// 单位：只显示 has=true 的权益
+			companyCurrentRights() {
+				const item = this.companyList[this.companyCurrent];
+				if (!item || !item.rights) return [];
+				return item.rights.filter(b => b.has === true);
+			}
+		},
+		methods: {
+			// 返回上一页
+			goBack() {
+				if (getCurrentPages().length == 1) {
+					uni.switchTab({
+						url: "/pages/index/index"
+					})
+				} else {
+					uni.navigateBack()
+				}
+			},
+			// 格式化金额
+			formatNumber(num) {
+				if (!num) return '0';
+				let n = Number(num)
+				if (n >= 10000) {
+					let result = n / 10000;
+					return (Number.isInteger(result) ? result : result.toFixed(1).replace(/\.0$/, '')) + '万';
+				} else {
+					let result = n / 1000;
+					let formatted = Number.isInteger(result) ? result : result.toFixed(1).replace(/\.0$/, '');
+					return formatted + 'k';
+				}
+			},
+			// 会员类型(单位,个人)
+			getMemberType() {
+				this.$util.request("member.typeList").then(res => {
+					if (res.code == 1) {
+						this.tabs = res.data
+						console.log(this.tabs, '===============>')
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取入会类型 ', error)
+				})
+			},
+			getMemberBenefitsList(id) {
+				this.$util.request("member.benefitsList", {
+					join_config_id: id
+				}).then(res => {
+					if (res.code == 1) {
+						console.log(res, '===========res==========')
+						if (res.data && res.data.articles) {
+							const art = res.data.articles
+							this.dtTitle = art.title || ''
+							this.dtImg = art.image || ''
+							this.dtTime = art.createtime || ''
+							this.articleId = art.id
+						}
+
+						let list = res.data.levels_benefits || []
+						let result = list.map(item => ({
+							name: item.name,
+							src: item.image,
+							feess: item.fees ? Number(item.fees) : '',
+							fees: this.formatNumber(item.fees),
+							rights: (item.benefits || []).map(b => ({
+								name: b.title,
+								img: b.image,
+								has: b.has,
+							}))
+						}))
+						console.log(result, '=result=')
+
+						let tableData = []
+						if (list.length > 0 && list[0].benefits) {
+							let allBenefits = list[0].benefits || []
+							tableData = allBenefits.map((ben, idx) => {
+								let row = {
+									name: ben.title
+								}
+								list.forEach((item, i) => {
+									let has = item.benefits[idx]?.has
+									row[`v${i+1}`] = has ? "√" : "-"
+								})
+								return row
+							})
+						}
+
+						if (id === 1) {
+							this.personList = result
+							console.log(this.personList, 'personList=')
+							this.personCurrent = 0
+							this.personTableData = tableData
+							this.$nextTick(() => {
+								this.initPersonNav();
+							})
+						} else {
+							this.companyList = result
+							this.companyCurrent = 0
+							this.companyTableData = tableData
+							this.$nextTick(() => {
+								this.initCompanyNav();
+							})
+						}
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取入会类型 ', error)
+				})
+			},
+			handleToHy() {
+				this.$util.toPage({
+					mode: 1,
+					path: `/pages/article/details?title=${'会员动态'}&id=${this.articleId}`
+				})
+			},
+			handleCardClick() {
+				console.log('点击失效')
+				this.$util.toPage({
+					mode: 1,
+					path: `/pages/member/apply/form?activeTab=${this.activeTab}`
+				})
+			},
+			switchTab(tab) {
+				this.activeTab = tab;
+				if (this.switchTimer) clearTimeout(this.switchTimer);
+				if (tab === 1) {
+					if (!this.personInited) {
+						this.switchTimer = setTimeout(() => {
+							this.initPersonNav();
+						}, 100);
+					}
+				}
+				if (tab === 2) {
+					if (!this.companyInited) {
+						this.switchTimer = setTimeout(() => {
+							this.initCompanyNav();
+						}, 100);
+					}
+				}
+			},
+			// 个人导航初始化
+			initPersonNav() {
+				if (this.personInited) return;
+				const query = uni.createSelectorQuery().in(this);
+				this.personList.forEach((_, idx) => {
+					query.select(`#person-nav-${idx}`).boundingClientRect();
+				});
+				query.exec(res => {
+					if (!res) return;
+					this.personItemWidths = res.map(rect => rect?.width || 70);
+					const firstW = this.personItemWidths[0] || 70;
+					const pl = (this.screenWidth - firstW) / 2;
+					const pr = (this.screenWidth - firstW) / 2;
+					this.personNavStyleStr = "padding-left:" + pl + "px;padding-right:" + pr + "px";
+					this.personInited = true;
+					this.scrollToPersonActive(0);
+				});
+			},
+			onPersonTouchStart(e) {
+				this.personStartX = e.touches[0].clientX;
+			},
+			onPersonTouchEnd(e) {
+				const diff = e.changedTouches[0].clientX - this.personStartX;
+				if (Math.abs(diff) < 30) return;
+				let next = diff < 0 ? Math.min(this.personCurrent + 1, this.personList.length - 1) : Math.max(this
+					.personCurrent - 1, 0);
+				this.personCurrent = next;
+			},
+		
+			scrollToCompanyActive(index) {
+			    this.$nextTick(() => {
+			        const query = uni.createSelectorQuery().in(this);
+			        query.select(`#company-nav-${index}`).boundingClientRect();
+			        query.select('.nav-scroll').boundingClientRect();
+			        
+			        query.exec(res => {
+			            if (!res || res.length < 2) return;
+			            
+			            const navItemRect = res[0];
+			            const scrollRect = res[1];
+			            
+			            if (!navItemRect || !scrollRect) return;
+			            
+			            // 直接计算需要滚动到的位置：让导航项居中
+			            // 目标滚动位置 = 当前导航项左边缘 - (滚动容器宽度 - 导航项宽度) / 2
+			            let targetScrollLeft = navItemRect.left - scrollRect.left - 
+			                                   (scrollRect.width - navItemRect.width) / 2;
+			            
+			            // 加上当前滚动位置
+			            targetScrollLeft = this.companyScrollLeft + targetScrollLeft;
+			            
+			            // 限制范围
+			            targetScrollLeft = Math.max(0, targetScrollLeft);
+			            
+			            // 获取最大滚动距离
+			            query.select('.nav-list').boundingClientRect();
+			            query.exec(res2 => {
+			                if (res2 && res2[0]) {
+			                    const maxScrollLeft = res2[0].width - scrollRect.width;
+			                    targetScrollLeft = Math.min(targetScrollLeft, maxScrollLeft);
+			                }
+			                this.companyScrollLeft = targetScrollLeft;
+			            });
+			        });
+			    });
+			},
+			// 单位导航初始化
+			initCompanyNav() {
+				if (this.companyInited) return;
+				const query = uni.createSelectorQuery().in(this);
+				this.companyList.forEach((_, idx) => {
+					query.select(`#company-nav-${idx}`).boundingClientRect();
+				});
+				query.exec(res => {
+					if (!res) return;
+					this.companyItemWidths = res.map(rect => rect?.width || 70);
+					const firstW = this.companyItemWidths[0] || 70;
+					const pl = (this.screenWidth - firstW) / 2;
+					const pr = (this.screenWidth - firstW) / 2;
+					this.companyNavStyleStr = "padding-left:" + pl + "px;padding-right:" + pr + "px";
+					console.log(this.companyNavStyleStr,'=this.companyNavStyleStr=')
+					this.companyInited = true;
+					this.scrollToCompanyActive(0);
+				});
+			},
+			onCompanyTouchStart(e) {
+				this.companyStartX = e.touches[0].clientX;
+			},
+			onCompanyTouchEnd(e) {
+				const diff = e.changedTouches[0].clientX - this.companyStartX;
+				if (Math.abs(diff) < 30) return;
+				let next = diff < 0 ? Math.min(this.companyCurrent + 1, this.companyList.length - 1) : Math.max(this
+					.companyCurrent - 1, 0);
+				this.companyCurrent = next;
+			},
+			scrollToCompanyActive(index) {
+			    // 等待 DOM 更新完成
+			    this.$nextTick(() => {
+			        const query = uni.createSelectorQuery().in(this);
+			        // 获取当前激活的导航项相对于屏幕的位置
+			        query.select(`#company-nav-${index}`).boundingClientRect();
+			        // 获取滚动容器的位置和宽度
+			        query.select('.nav-scroll').boundingClientRect();
+			        // 获取整个导航列表的位置
+			        query.select('.nav-list').boundingClientRect();
+			        
+			        query.exec(res => {
+			            if (!res || res.length < 3) return;
+			            
+			            const navItemRect = res[0];      // 当前导航项的位置信息
+			            const scrollRect = res[1];       // 滚动容器的位置信息
+			            const listRect = res[2];         // 整个导航列表的位置信息
+			            
+			            if (!navItemRect || !scrollRect || !listRect) return;
+			            
+			            // 计算当前导航项相对于滚动容器左边缘的距离
+			            const itemRelativeLeft = navItemRect.left - scrollRect.left;
+			            
+			            // 计算让导航项居中时，它应该相对于滚动容器左边缘的位置
+			            const targetRelativeLeft = (scrollRect.width - navItemRect.width) / 2;
+			            
+			            // 计算需要滚动的距离
+			            // 当前滚动位置 + 当前项相对位置 - 目标相对位置 = 新的滚动位置
+			            let targetScrollLeft = this.companyScrollLeft + (itemRelativeLeft - targetRelativeLeft);
+			            
+			            // 限制滚动范围
+			            targetScrollLeft = Math.max(0, targetScrollLeft);
+			            const maxScrollLeft = listRect.width - scrollRect.width;
+			            targetScrollLeft = Math.min(targetScrollLeft, maxScrollLeft);
+			            
+			            // 更新滚动位置
+			            this.companyScrollLeft = targetScrollLeft;
+			            
+			            console.log('滚动调试:', {
+			                当前滚动位置: this.companyScrollLeft,
+			                项相对位置: itemRelativeLeft,
+			                目标相对位置: targetRelativeLeft,
+			                新滚动位置: targetScrollLeft,
+			                最大滚动距离: maxScrollLeft
+			            });
+			        });
+			    });
+			},
+			onCompanyChange(e) {
+			    this.companyCurrent = e.detail.current;
+			    // 延迟一点确保 swiper 切换完成后再滚动
+			    setTimeout(() => {
+			        this.scrollToCompanyActive(this.companyCurrent);
+			    }, 50);
+			},
+		}
+	};
+</script>
+
+<style scoped>
+	@import 'index.css';
+
+	/* 自定义透明标题栏样式 */
+	.custom-title-bar {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 999;
+		background: transparent;
+	}
+
+	.custom-title-content {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: 88rpx;
+		padding: 0 32rpx;
+	}
+
+	.custom-back-btn {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.custom-back-icon {
+		width: 40rpx;
+		height: 40rpx;
+	}
+
+	.custom-title {
+		flex: 1;
+		text-align: center;
+		font-size: 36rpx;
+		font-weight: 500;
+		color: #FFFFFF;
+		letter-spacing: 2rpx;
+	}
+
+	.custom-placeholder {
+		width: 60rpx;
+		height: 60rpx;
+	}
+	.table-icon {
+		width: 18rpx;
+		height: 13rpx;
+	}
+</style>

pages/member/apply/success.vue

@@ -0,0 +1,120 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 提交成功 开发者: 麦沃德科技-半夏
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="container" :style="{'--theme-color': themeColor}">
+		<!-- 标题栏 -->
+		<title-bar :showBack="true" title="提交成功"></title-bar>
+		<!-- 内容区 -->
+		<view class="container-main" v-if="loadEnd">
+			<view class="main-image">
+				<image class="icon" src="/static/check.png" mode="aspectFit"></image>
+			</view>
+			<view class="main-title">提交成功</view>
+			<view class="main-subtitle">提交成功，请前往个人中心查看审核状态</view>
+			<view class="main-btn" @click="toMine">前往查看</view>
+			<view class="main-back" @click="toIndex">返回首页</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	export default {
+		data() {
+			return {
+				// 加载完成
+				loadEnd: false,
+			}
+		},
+		onReady() {
+			this.loadEnd = true
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+			})
+		},
+		methods: {
+			// 跳转个人中心
+			toMine() {
+				uni.switchTab({
+					url: "/pages/mine/index"
+				})
+			},
+			// 返回首页
+			toIndex() {
+				uni.switchTab({
+					url: "/pages/index/index"
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		background: #ffffff;
+	}
+
+	.container {
+		.container-main {
+			padding: 144rpx 48rpx 32rpx;
+
+			.main-image {
+				width: 200rpx;
+				height: 200rpx;
+				margin: 0 auto;
+				padding: 48rpx;
+				background: var(--theme-color);
+				border-radius: 50%;
+			}
+
+			.main-title {
+				color: #333;
+				font-size: 36rpx;
+				font-weight: 600;
+				line-height: 50rpx;
+				margin-top: 48rpx;
+				text-align: center;
+			}
+
+			.main-subtitle {
+				color: #999;
+				font-size: 24rpx;
+				line-height: 34rpx;
+				margin-top: 24rpx;
+				text-align: center;
+			}
+
+			.main-btn {
+				color: #FFF;
+				font-size: 32rpx;
+				line-height: 44rpx;
+				padding: 34rpx;
+				border-radius: 16rpx;
+				text-align: center;
+				margin-top: 48rpx;
+				background: var(--theme-color);
+			}
+
+			.main-back {
+				color: #979797;
+				font-size: 32rpx;
+				line-height: 44rpx;
+				padding: 32rpx;
+				text-align: center;
+				margin-top: 16rpx;
+			}
+		}
+	}
+</style>