会员权益

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>

pages/member/details.vue

@@ -0,0 +1,631 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| 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">
+			<block v-if="loadEnd">
+				<!-- 轮播图 -->
+				<view class="main-carousel" v-if="carouselList.length">
+					<carousel :show-data="carouselList" height="320rpx" radius="16rpx" right="24rpx" bottom="24rpx"></carousel>
+				</view>
+				<!-- 会员信息 -->
+				<view class="main-info flex align-items-center">
+					<image class="info-avatar" :src="memberInfo.avatar" mode="aspectFill"></image>
+					<view class="info-box flex-item">
+						<view class="box-head flex align-items-center">
+							<view class="head-name">{{memberInfo.name || "暂未完善"}}</view>
+							<view class="head-label">{{memberInfo.level_name || "暂未完善"}}</view>
+						</view>
+						<view class="box-tag">{{memberInfo.native_place || "暂未完善"}}</view>
+						<view class="box-label" v-if="memberInfo.type == 2 && memberInfo.company_position">{{memberInfo.company_position}}</view>
+						<view class="box-label" v-else-if="memberInfo.type == 3 && memberInfo.organize_position">{{memberInfo.organize_position}}</view>
+					</view>
+				</view>
+				<!-- 访客记录 -->
+				<view class="main-record" v-if="memberInfo.visitor_count > 0">
+					<view class="record-title flex justify-content-between align-items-center">
+						<view class="title">访客记录</view>
+						<view class="label">已有{{memberInfo.visitor_count}}人访问</view>
+					</view>
+					<view class="record-list flex flex-wrap">
+						<view class="list-item" v-for="(item, index) in memberInfo.visitor_list" :key="index">
+							<image class="item-avatar" :src="item.avatar" mode="aspectFill"></image>
+						</view>
+						<view class="list-item" v-if="memberInfo.visitor_count > 23">
+							<view class="item-more flex justify-content-around align-items-center">
+								<view class="point"></view>
+								<view class="point"></view>
+								<view class="point"></view>
+							</view>
+						</view>
+					</view>
+				</view>
+				<!-- 企业 -->
+				<view class="main-group flex" @click="toEnterprise()" v-if="memberInfo.type == 2 && (memberInfo.company_logo || memberInfo.company_name)">
+					<image class="group-avatar" :class="{large: memberInfo.company_introduction}" :src="memberInfo.company_logo" mode="aspectFill"></image>
+					<view class="group-info flex-item flex-direction-column justify-content-around">
+						<view class="info-title text-ellipsis">{{memberInfo.company_name}}</view>
+						<view class="info-tag text-ellipsis-more" v-if="memberInfo.company_introduction">{{memberInfo.company_introduction}}</view>
+					</view>
+				</view>
+				<!-- 团体 -->
+				<view class="main-group flex" @click="toOrganization()" v-else-if="memberInfo.type == 3 && (memberInfo.organize_logo || memberInfo.organize_name)">
+					<image class="group-avatar" :class="{large: memberInfo.organize_introduction}" :src="memberInfo.organize_logo" mode="aspectFill"></image>
+					<view class="group-info flex-item flex-direction-column justify-content-around">
+						<view class="info-title text-ellipsis">{{memberInfo.organize_name}}</view>
+						<view class="info-tag text-ellipsis-more" v-if="memberInfo.organize_introduction">{{memberInfo.organize_introduction}}</view>
+					</view>
+				</view>
+				<!-- 个人简介 -->
+				<view class="main-introduce">
+					<view class="introduce-title">个人简介</view>
+					<view class="introduce-content">
+						<mp-html :content="memberInfo.introduce_content || '暂未完善'"></mp-html>
+					</view>
+				</view>
+				<!-- 行业分类 -->
+				<view class="main-industry flex justify-content-start">
+					<view class="industry-title">行业分类</view>
+					<view class="industry-value flex-item"> {{ memberInfo.industry_category_name || '暂未完善' }}</view>
+				</view>
+				<!-- 自定义字段 -->
+				<member-custom :show-data="memberInfo.custom_content"></member-custom>
+				<!-- 底部按钮 -->
+				<view class="main-footer">
+					<view class="flex justify-content-between align-items-center">
+						<view class="footer-menu flex">
+							<!-- #ifdef MP-WEIXIN -->
+							<button type="default" open-type="share" class="menu-btn">
+								<image class="icon" src="/static/share.png" mode="aspectFit"></image>
+								<view class="text">分享</view>
+							</button>
+							<!-- #endif -->
+							<view class="menu-btn" @click="toNavigation()">
+								<image class="icon" src="/static/location.png" mode="aspectFit"></image>
+								<view class="text">地址</view>
+							</view>
+						</view>
+						<view class="footer-btn" @click="saveAddressBook" v-if="memberInfo.mobile_auth == 1 && memberInfo.mobile">保存到通讯录</view>
+					</view>
+					<view class="safe-padding"></view>
+				</view>
+			</block>
+			<view class="main-login" v-else-if="showLogin">
+				<image class="login-image" :src="loginImg" mode="aspectFit"></image>
+				<view class="login-tips">小程序需要登录注册才能使用相关功能，请登录后查看该页面</view>
+				<view class="login-btn" @click="toLogin()">前往登录</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	import memberCustom from "@/pages/component/member/custom.vue"
+	import carousel from "@/pages/component/carousel/carousel.vue"
+	// #ifdef H5
+	import wx from 'weixin-js-sdk';
+	// #endif
+	export default {
+		components: {
+			memberCustom,
+			carousel,
+		},
+		data() {
+			return {
+				// 加载完成
+				loadEnd: false,
+				// 会员id
+				memberId: null,
+				// 会员详情
+				memberInfo: {},
+				// 轮播图列表
+				carouselList: [],
+				// 是否显示登录提示
+				showLogin: false,
+			}
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+				loginImg: state => state.app.loginImg,
+			})
+		},
+		onLoad(option) {
+			this.memberId = option.id
+			if (uni.getStorageSync("token")) {
+				uni.showLoading({
+					title: "加载中"
+				})
+				this.getMemberInfo(() => {
+					this.loadEnd = true
+					uni.hideLoading()
+					// #ifdef H5
+					this.initConfig()
+					// #endif
+				})
+			} else {
+				this.showLogin = true
+				this.$util.verifyLogin(2)
+			}
+		},
+		onShareTimeline() {
+			return {
+				title: (this.memberInfo.level_name || "") + (this.memberInfo.name || ""),
+				path: '/pages/member/details?id=' + this.memberId,
+				imageUrl: this.memberInfo.avatar,
+			}
+		},
+		onShareAppMessage() {
+			return {
+				title: (this.memberInfo.level_name || "") + (this.memberInfo.name || ""),
+				path: '/pages/member/details?id=' + this.memberId,
+				imageUrl: this.memberInfo.avatar,
+			}
+		},
+		methods: {
+			// #ifdef H5
+			// 微信公众号初始化方法
+			initConfig() {
+				this.$util.request("main.WeChatConfig", {
+					url: location.href.split('#')[0]
+				}).then(res => {
+					if (res.code == 1) {
+						wx.config({
+							debug: false,
+							appId: res.data.appId,
+							timestamp: Number(res.data.timestamp),
+							nonceStr: res.data.nonceStr,
+							signature: res.data.signature,
+							jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
+							openTagList: ["updateAppMessageShareData", "updateTimelineShareData"],
+						})
+						wx.ready(() => {
+							wx.updateAppMessageShareData({
+								title: this.memberInfo.name,
+								desc: "",
+								link: window.location.href,
+								imgUrl: this.memberInfo.avatar,
+							});
+							wx.updateTimelineShareData({
+								title: this.memberInfo.name,
+								link: window.location.href,
+								imgUrl: this.memberInfo.avatar,
+							});
+						});
+					} else {
+						uni.hideLoading()
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					uni.hideLoading()
+					console.error('通过config接口注入权限验证配置 ', error)
+				})
+			},
+			// #endif
+			// 获取会员详情
+			getMemberInfo(fn) {
+				this.$util.request("member.details", {
+					id: this.memberId
+				}).then(res => {
+					if (res.code == 1) {
+						if (fn) fn()
+						this.memberInfo = res.data
+						this.carouselList = this.splitImages(res.data.personal_carousel_images || "")
+					} else {
+						uni.hideLoading()
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					if (error == 401) {
+						this.showLogin = true
+					} else {
+						console.error('获取会员详情 ', error)
+					}
+				})
+			},
+			// 字符串转数组格式图片
+			splitImages(images) {
+				try {
+					if (images) return images.split(',');
+					else return []
+				} catch (error) {
+					return [];
+				}
+			},
+			// 跳转地图导航
+			toNavigation() {
+				this.$util.toPage({
+					mode: 7,
+					address: {
+						latitude: this.memberInfo.latitude,
+						longitude: this.memberInfo.longitude,
+						address: this.memberInfo.address,
+					},
+				})
+			},
+			// 保存通讯录
+			saveAddressBook() {
+				uni.showLoading({
+					title: "加载中",
+					mask: true,
+				})
+				this.$util.request("member.state", {
+					id: this.memberId
+				}).then(res => {
+					uni.hideLoading()
+					if (res.code == 1) {
+						if (res.data.state.state == 6) {
+							// #ifdef MP-WEIXIN
+							let info = {
+								firstName: this.memberInfo.name, // 名字
+								mobilePhoneNumber: this.memberInfo.mobile, // 手机号
+								title: this.memberInfo.level_name, // 职位
+								workAddressStreet: this.memberInfo.address, // 工作地址街道
+							}
+							if (this.memberInfo.group && this.memberInfo.group.name) info.organization = this.memberInfo.group.name
+							uni.addPhoneContact(info)
+							// #endif
+							// #ifdef H5
+							this.$util.toPage({
+								mode: 6,
+								phone: this.memberInfo.mobile,
+							})
+							// #endif
+						} else if (res.data.state.state == -1) {
+							uni.showModal({
+								title: "系统提示",
+								content: "此页面需成为会员后可查看！",
+								confirmColor: this.themeColor,
+								confirmText: "去加入",
+								success: (res) => {
+									if (res.confirm) {
+										this.$util.toPage({
+											mode: 1,
+											path: "/pages/member/apply/index"
+										})
+									}
+								}
+							})
+						} else {
+							uni.showModal({
+								title: "系统提示",
+								content: "此页面需成为会员后可查看！",
+								confirmColor: this.themeColor,
+								confirmText: "前往查看",
+								success: (res) => {
+									if (res.confirm) {
+										uni.switchTab({
+											url: "/pages/mine/index"
+										})
+									}
+								}
+							})
+						}
+					} else {
+						uni.hideLoading()
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					uni.hideLoading()
+					console.error('获取会员状态 ', error)
+				})
+			},
+			// 跳转企业详情
+			toEnterprise() {
+				this.$util.toPage({
+					mode: 1,
+					path: "/pages/member/enterprise?id=" + this.memberId
+				})
+			},
+			// 跳转团体详情
+			toOrganization() {
+				this.$util.toPage({
+					mode: 1,
+					path: "/pages/member/organization?id=" + this.memberId
+				})
+			},
+			// 前往登录
+			toLogin() {
+				uni.redirectTo({
+					url: `/pages/member/details?id=${this.memberId}`,
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.container {
+		.container-main {
+			padding: 32rpx 32rpx 144rpx;
+
+			.main-carousel {
+				margin-bottom: 32rpx;
+			}
+
+			.main-info {
+				padding: 32rpx;
+				border-radius: 16rpx;
+				background: #ffffff;
+
+				.info-avatar {
+					width: 144rpx;
+					height: 144rpx;
+					border-radius: 50%;
+				}
+
+				.info-box {
+					margin-left: 32rpx;
+
+					.box-head {
+						.head-name {
+							color: #5A5B6E;
+							font-size: 36rpx;
+							font-weight: 600;
+							line-height: 50rpx;
+						}
+
+						.head-label {
+							margin-left: 16rpx;
+							color: var(--theme-color);
+							font-size: 28rpx;
+							line-height: 40rpx;
+						}
+					}
+
+					.box-tag {
+						margin-top: 16rpx;
+						color: #C4C4C4;
+						font-size: 28rpx;
+						line-height: 40rpx;
+					}
+
+					.box-label {
+						margin-top: 16rpx;
+						font-size: 24rpx;
+						line-height: 40rpx;
+						color: #8D929C;
+					}
+				}
+			}
+
+			.main-record {
+				padding: 32rpx;
+				border-radius: 16rpx;
+				background: #ffffff;
+				margin-top: 32rpx;
+
+				.record-title {
+					.title {
+						color: #5A5B6E;
+						font-size: 30rpx;
+						font-weight: 600;
+						line-height: 44rpx;
+					}
+
+					.label {
+						color: var(--theme-color);
+						font-size: 24rpx;
+						line-height: 34rpx;
+					}
+				}
+
+				.record-list {
+					padding-top: 8rpx;
+					margin-left: -2rpx;
+
+					.list-item {
+						width: calc((100% / 12) - 4rpx);
+						height: 0;
+						padding-top: calc((100% / 12) - 4rpx);
+						border-radius: 50%;
+						overflow: hidden;
+						position: relative;
+						margin-left: 4rpx;
+						margin-top: 16rpx;
+						background: #eee;
+
+						.item-avatar {
+							position: absolute;
+							top: 0;
+							left: 0;
+							right: 0;
+							bottom: 0;
+						}
+
+						.item-more {
+							position: absolute;
+							top: 0;
+							left: 0;
+							right: 0;
+							bottom: 0;
+							background: var(--theme-color);
+							padding: 0 6rpx;
+
+							.point {
+								width: 6rpx;
+								height: 6rpx;
+								background: #ffffff;
+								border-radius: 50%;
+							}
+						}
+					}
+				}
+			}
+
+			.main-group {
+				padding: 32rpx;
+				border-radius: 16rpx;
+				background: #ffffff;
+				margin-top: 32rpx;
+
+				.group-avatar {
+					width: 100rpx;
+					height: 100rpx;
+					border-radius: 10rpx;
+
+					&.large {
+						width: 180rpx;
+						height: 180rpx;
+					}
+				}
+
+				.group-info {
+					margin-left: 16rpx;
+
+					.info-title {
+						color: #5A5B6E;
+						font-size: 32rpx;
+						line-height: 40rpx;
+					}
+
+					.info-tag {
+						color: #888888;
+						font-size: 24rpx;
+						line-height: 44rpx;
+					}
+				}
+			}
+
+			.main-introduce {
+				padding: 32rpx;
+				border-radius: 16rpx;
+				background: #ffffff;
+				margin-top: 32rpx;
+
+				.introduce-title {
+					color: #5A5B6E;
+					font-size: 30rpx;
+					font-weight: 600;
+					line-height: 44rpx;
+				}
+
+				.introduce-content {
+					margin-top: 24rpx;
+					color: #5A5B6E;
+					font-size: 28rpx;
+					line-height: 48rpx;
+				}
+			}
+
+			.main-industry {
+				margin-top: 32rpx;
+				padding: 32rpx;
+				border-radius: 16rpx;
+				background: #ffffff;
+
+				.industry-title {
+					color: #5A5B6E;
+					font-size: 30rpx;
+					font-weight: 600;
+					line-height: 44rpx;
+					margin-right: 64rpx;
+				}
+
+				.industry-value {
+					color: #5A5B6E;
+					font-size: 28rpx;
+					font-weight: 400;
+					line-height: 40rpx;
+					display: flex;
+					justify-content: flex-end;
+					word-break: break-all;
+				}
+			}
+
+			.main-footer {
+				position: fixed;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				z-index: 99;
+				padding: 12rpx 32rpx 12rpx 48rpx;
+				background: #ffffff;
+				border-top: 1rpx solid #F6F7FB;
+
+				.footer-menu {
+					.menu-btn {
+						display: flex;
+						flex-direction: column;
+						align-items: center;
+						margin-right: 32rpx;
+						background: transparent;
+						padding: 0;
+
+						.icon {
+							width: 52rpx;
+							height: 52rpx;
+						}
+
+						.text {
+							color: #5A5B6E;
+							font-size: 20rpx;
+							line-height: 28rpx;
+						}
+					}
+				}
+
+				.footer-btn {
+					color: #ffffff;
+					font-size: 32rpx;
+					line-height: 44rpx;
+					padding: 22rpx 24rpx;
+					border-radius: 16rpx;
+					background: var(--theme-color);
+					text-align: center;
+				}
+			}
+
+			.main-login {
+				padding: 96rpx 60rpx 0;
+
+				.login-image {
+					width: 100%;
+					height: 500rpx;
+				}
+
+				.login-tips {
+					color: #585858;
+					font-size: 36rpx;
+					line-height: 50rpx;
+					margin-top: 48rpx;
+					text-align: center;
+				}
+
+				.login-btn {
+					margin-top: 56rpx;
+					height: 88rpx;
+					line-height: 88rpx;
+					font-size: 28rpx;
+					border-radius: 16rpx;
+					text-align: center;
+					background: var(--theme-color);
+					color: #ffffff;
+				}
+			}
+		}
+	}
+</style>

pages/member/enterprise.vue

@@ -0,0 +1,423 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| 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="memberTypeConfig.enterprise"></title-bar>
+		<!-- 内容区 -->
+		<view class="container-main">
+			<block v-if="loadEnd">
+				<!-- 轮播图 -->
+				<view class="main-carousel" v-if="carouselList.length">
+					<carousel :show-data="carouselList" height="320rpx" radius="16rpx" right="24rpx" bottom="24rpx"></carousel>
+				</view>
+				<!-- 企业信息 -->
+				<view class="main-info flex align-items-center">
+					<image class="info-avatar" :src="memberInfo.company_logo" mode="aspectFill"></image>
+					<view class="info-name flex-item text-ellipsis-more">{{memberInfo.company_name}}</view>
+				</view>
+				<!-- 企业简介 -->
+				<view class="main-introduce">
+					<view class="introduce-title">企业简介</view>
+					<view class="introduce-content">
+						<mp-html :content="memberInfo.company_introduction || '暂未完善'"></mp-html>
+					</view>
+				</view>
+				<!-- 产品列表 -->
+				<view class="main-product" v-if="memberInfo.company_goods_list && memberInfo.company_goods_list.length">
+					<view class="product-title">产品列表</view>
+					<view class="product-list">
+						<view class="list-item" v-for="item in memberInfo.company_goods_list" :key="item.id" @click="toProductDetails(item.id)">
+							<image class="item-image" :src="item.image" mode="aspectFill"></image>
+							<view class="item-name text-ellipsis-more">{{item.name}}</view>
+						</view>
+					</view>
+				</view>
+				<!-- 自定义字段 -->
+				<member-custom :show-data="memberInfo.custom_content"></member-custom>
+				<!-- 底部按钮 -->
+				<view class="main-footer">
+					<view class="flex justify-content-between align-items-center">
+						<view class="footer-menu flex">
+							<!-- #ifdef MP-WEIXIN -->
+							<button type="default" open-type="share" class="menu-btn">
+								<image class="icon" src="/static/share.png" mode="aspectFit"></image>
+								<view class="text">分享</view>
+							</button>
+							<!-- #endif -->
+							<view class="menu-btn" @click="toNavigation()">
+								<image class="icon" src="/static/location.png" mode="aspectFit"></image>
+								<view class="text">地址</view>
+							</view>
+						</view>
+						<view class="footer-btn" @click="onContact()" v-if="memberInfo.company_office_number">拨打电话</view>
+					</view>
+					<view class="safe-padding"></view>
+				</view>
+			</block>
+			<view class="main-login" v-else-if="showLogin">
+				<image class="login-image" :src="loginImg" mode="aspectFit"></image>
+				<view class="login-tips">小程序需要登录注册才能使用相关功能，请登录后查看该页面</view>
+				<view class="login-btn" @click="toLogin()">前往登录</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	import memberCustom from "@/pages/component/member/custom.vue"
+	import carousel from "@/pages/component/carousel/carousel.vue"
+	// #ifdef H5
+	import wx from 'weixin-js-sdk';
+	// #endif
+	export default {
+		components: {
+			memberCustom,
+			carousel,
+		},
+		data() {
+			return {
+				// 加载完成
+				loadEnd: false,
+				// 会员id
+				memberId: null,
+				// 会详情
+				memberInfo: {},
+				// 轮播图列表
+				carouselList: [],
+				// 是否显示登录提示
+				showLogin: false,
+			}
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+				loginImg: state => state.app.loginImg,
+				memberTypeConfig: state => state.app.memberTypeConfig,
+			})
+		},
+		onLoad(option) {
+			this.memberId = option.id
+			if (uni.getStorageSync("token")) {
+				uni.showLoading({
+					title: "加载中"
+				})
+				this.getMemberInfo(() => {
+					this.loadEnd = true
+					uni.hideLoading()
+					// #ifdef H5
+					this.initConfig()
+					// #endif
+				})
+			} else {
+				this.showLogin = true
+				this.$util.verifyLogin(2)
+			}
+		},
+		onShareTimeline() {
+			return {
+				title: `${this.memberInfo.member_level_name || ""}单位${this.memberInfo.company_name || ""}`,
+				path: '/pages/member/enterprise?id=' + this.memberId,
+				imageUrl: this.memberInfo.company_logo,
+			}
+		},
+		onShareAppMessage() {
+			return {
+				title: `${this.memberInfo.member_level_name || ""}单位${this.memberInfo.company_name || ""}`,
+				path: '/pages/member/enterprise?id=' + this.memberId,
+				imageUrl: this.memberInfo.company_logo,
+			}
+		},
+		methods: {
+			// #ifdef H5
+			// 微信公众号初始化方法
+			initConfig() {
+				this.$util.request("main.WeChatConfig", {
+					url: location.href.split('#')[0]
+				}).then(res => {
+					if (res.code == 1) {
+						wx.config({
+							debug: false,
+							appId: res.data.appId,
+							timestamp: Number(res.data.timestamp),
+							nonceStr: res.data.nonceStr,
+							signature: res.data.signature,
+							jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
+							openTagList: ["updateAppMessageShareData", "updateTimelineShareData"],
+						})
+						wx.ready(() => {
+							wx.updateAppMessageShareData({
+								title: this.memberInfo.company_name,
+								desc: "",
+								link: window.location.href,
+								imgUrl: this.memberInfo.company_logo,
+							});
+							wx.updateTimelineShareData({
+								title: this.memberInfo.company_name,
+								link: window.location.href,
+								imgUrl: this.memberInfo.company_logo,
+							});
+						});
+					} else {
+						uni.hideLoading()
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					uni.hideLoading()
+					console.error('通过config接口注入权限验证配置 ', error)
+				})
+			},
+			// #endif
+			// 获取会员详情
+			getMemberInfo(fn) {
+				this.$util.request("member.enterprise", {
+					id: this.memberId
+				}).then(res => {
+					if (fn) fn()
+					if (res.code == 1) {
+						this.memberInfo = res.data
+						this.carouselList = this.splitImages(res.data.company_carousel_images || "")
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					if (error == 401) {
+						this.showLogin = true
+					} else {
+						console.error('获取会员详情 ', error)
+					}
+				})
+			},
+			// 字符串转数组格式图片
+			splitImages(images) {
+				try {
+					if (images) return images.split(',');
+					else return []
+				} catch (error) {
+					return [];
+				}
+			},
+			// 跳转产品详情
+			toProductDetails(id) {
+				this.$util.toPage({
+					mode: 1,
+					path: "/pages/member/product/details?id=" + id,
+				})
+			},
+			// 跳转地图导航
+			toNavigation() {
+				const addressInfo = JSON.parse(this.memberInfo.address_json || "{}")
+				this.$util.toPage({
+					mode: 7,
+					address: addressInfo,
+				})
+			},
+			// 拨打电话
+			onContact() {
+				this.$util.toPage({
+					mode: 6,
+					phone: this.memberInfo.company_office_number,
+				})
+			},
+			// 前往登录
+			toLogin() {
+				uni.redirectTo({
+					url: `/pages/member/enterprise?id=${this.memberId}`,
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.container {
+		.container-main {
+			padding: 32rpx 32rpx 144rpx;
+
+			.main-carousel {
+				margin-bottom: 32rpx;
+			}
+
+			.main-info {
+				padding: 32rpx 24rpx 32rpx 32rpx;
+				border-radius: 10rpx;
+				background: #ffffff;
+
+				.info-avatar {
+					width: 128rpx;
+					height: 128rpx;
+					border-radius: 50%;
+				}
+
+				.info-name {
+					margin-left: 32rpx;
+					font-weight: 600;
+					font-size: 32rpx;
+					line-height: 40rpx;
+					color: #5A5B6E;
+				}
+
+				.info-icon {
+					margin-left: 32rpx;
+					border-radius: 50%;
+					background: var(--theme-color);
+					padding: 0;
+
+					.icon {
+						width: 40rpx;
+						height: 40rpx;
+						padding: 8rpx;
+					}
+				}
+			}
+
+			.main-introduce {
+				padding: 32rpx;
+				border-radius: 16rpx;
+				background: #ffffff;
+				margin-top: 32rpx;
+
+				.introduce-title {
+					color: #5A5B6E;
+					font-size: 30rpx;
+					font-weight: 600;
+					line-height: 44rpx;
+				}
+
+				.introduce-content {
+					margin-top: 24rpx;
+					color: #5A5B6E;
+					font-size: 28rpx;
+					line-height: 48rpx;
+				}
+			}
+
+			.main-product {
+				padding: 32rpx;
+				border-radius: 16rpx;
+				background: #ffffff;
+				margin-top: 32rpx;
+
+				.product-title {
+					color: #5A5B6E;
+					font-size: 30rpx;
+					font-weight: 600;
+					line-height: 44rpx;
+				}
+
+				.product-list {
+					margin-top: 24rpx;
+					display: grid;
+					grid-template-columns: repeat(2, 2fr);
+					column-gap: 28rpx;
+					row-gap: 30rpx;
+
+					.list-item {
+						.item-image {
+							width: 100%;
+							height: 296rpx;
+							border-radius: 16rpx 16rpx 0 0;
+						}
+
+						.item-name {
+							padding: 0 24rpx;
+							margin-top: 24rpx;
+							color: #5A5B6E;
+							font-size: 28rpx;
+							font-weight: 600;
+							line-height: 44rpx;
+						}
+					}
+				}
+			}
+
+			.main-footer {
+				position: fixed;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				z-index: 99;
+				padding: 12rpx 32rpx 12rpx 48rpx;
+				background: #ffffff;
+				border-top: 1rpx solid #F6F7FB;
+
+				.footer-menu {
+					.menu-btn {
+						display: flex;
+						flex-direction: column;
+						align-items: center;
+						margin-right: 32rpx;
+						background: transparent;
+						padding: 0;
+
+						.icon {
+							width: 52rpx;
+							height: 52rpx;
+						}
+
+						.text {
+							color: #5A5B6E;
+							font-size: 20rpx;
+							line-height: 28rpx;
+						}
+					}
+				}
+
+				.footer-btn {
+					color: #ffffff;
+					font-size: 32rpx;
+					line-height: 44rpx;
+					padding: 22rpx 48rpx;
+					border-radius: 16rpx;
+					background: var(--theme-color);
+					text-align: center;
+				}
+			}
+
+			.main-login {
+				padding: 96rpx 60rpx 0;
+
+				.login-image {
+					width: 100%;
+					height: 500rpx;
+				}
+
+				.login-tips {
+					color: #585858;
+					font-size: 36rpx;
+					line-height: 50rpx;
+					margin-top: 48rpx;
+					text-align: center;
+				}
+
+				.login-btn {
+					margin-top: 56rpx;
+					height: 88rpx;
+					line-height: 88rpx;
+					font-size: 28rpx;
+					border-radius: 16rpx;
+					text-align: center;
+					background: var(--theme-color);
+					color: #ffffff;
+				}
+			}
+		}
+	}
+</style>

pages/member/fees/index.vue

@@ -0,0 +1,414 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| 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, paddingBottom: isShowPay ? '112rpx' : '0'}">
+		<!-- 标题栏 -->
+		<title-bar :showBack="true" title="会费缴纳"></title-bar>
+		<!-- 内容区 -->
+		<view class="container-main" v-if="loadEnd">
+			<view class="main-tips" :style="{top: titleBarHeight + 'px', background: '#FFA820'}" v-if="payDetails.apply_member_state.state == 4">会费缴纳审核中</view>
+			<view class="main-tips" :style="{top: titleBarHeight + 'px', background: '#FF6868'}" v-else-if="payDetails.apply_member_state.state == 5">驳回原因：{{payDetails.reject}}</view>
+			<view class="main-header">
+				<view class="header-box">
+					<view class="box-line flex-direction-column align-items-center">
+						<view class="free" v-if="payDetails.pay_method == 1">免费</view>
+						<view class="price" v-else><text>￥</text>{{payDetails.fees}}</view>
+						<view class="term" v-if="payDetails.apply_member_state.state == 7 && !isShowPay">
+							<text>暂未开启入会申请，详情请联系客服</text>
+						</view>
+						<view class="term" v-else>
+							<text>期限：</text>
+							<text v-if="payDetails.apply_member_state.state == 6">{{payDetails.join_time}}</text>
+							<text v-else>{{nowTime}}</text>
+							<text>—{{payDetails.expire_time}}</text>
+						</view>
+						<view class="level">级别：{{payDetails.level_name}}</view>
+					</view>
+				</view>
+				<view class="header-pocket" :style="{'background-image': 'url('+ iconFees +')'}" v-if="iconFees"></view>
+			</view>
+			<view class="main-content">
+				<view class="content-column">
+					<view class="column-title">级别介绍</view>
+					<view class="column-content column-text">
+						<mp-html :content="payDetails.content"></mp-html>
+					</view>
+				</view>
+				<view class="content-column">
+					<view class="column-title">缴纳明细</view>
+					<view class="column-content">
+						<view class="detail-list" v-if="payDetails.pay_list.length">
+							<view class="list-item flex align-items-center" v-for="record in payDetails.pay_list" :key="record.order_no">
+								<view class="item-info flex-item">
+									<view class="info-name">{{record.pay_method == 2 ? "线上" : "线下"}}-会费缴纳</view>
+									<view class="info-time">{{record.pay_time}}</view>
+								</view>
+								<view class="item-price">{{record.fees}}元</view>
+							</view>
+						</view>
+						<view class="detail-empty" v-else>暂无记录~</view>
+					</view>
+				</view>
+			</view>
+			<view class="main-footer" v-if="isShowPay">
+				<view class="footer-btn flex-item" @click="handleRenew()" v-if="payDetails.pay_method == 1">续期</view>
+				<view class="flex justify-content-between align-items-center" v-else>
+					<view class="footer-price flex align-items-center">
+						<view class="unit">￥</view>
+						<view class="number">{{payDetails.fees}}</view>
+					</view>
+					<view class="footer-btn flex-item" @click="toPayment">会费缴纳</view>
+				</view>
+				<view class="safe-padding"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	import svgData from "@/common/svg.js"
+	export default {
+		data() {
+			return {
+				// 加载完成
+				loadEnd: false,
+				// 标题栏高度
+				titleBarHeight: 0,
+				// 会费缴纳详情
+				payDetails: {},
+				// 当前时间
+				nowTime: "",
+				// 是否可以支付
+				isShowPay: false,
+			}
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+				iconFees: state => {
+					return svgData.svgToUrl("fees", state.app.themeColor)
+				},
+			})
+		},
+		mounted() {
+			// #ifdef MP-WEIXIN
+			let statusBarHeight = uni.getSystemInfoSync().statusBarHeight
+			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
+			this.titleBarHeight = statusBarHeight + (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
+			// #endif
+		},
+		onLoad() {
+			uni.showLoading({
+				title: "加载中"
+			})
+			this.getNowTime()
+			this.getPayDetails()
+		},
+		methods: {
+			// 获取当前时间
+			getNowTime() {
+				this.nowTime = this.$util.getCurrentDate("y/m/d")
+			},
+			// 获取会费缴纳详情
+			getPayDetails() {
+				this.$util.request("member.payDetails").then(res => {
+					uni.hideLoading()
+					if (res.code == 1) {
+						this.payDetails = res.data
+						if (this.payDetails.apply_member_state.state == -1) {
+							uni.showModal({
+								title: "系统提示",
+								content: "请入会后查看此页面",
+								confirmText: "去申请",
+								success: (res) => {
+									if (res.confirm) {
+										this.$util.toPage({
+											mode: 2,
+											path: "/pages/member/apply/index"
+										})
+									}
+								}
+							})
+							return
+						} else if (this.payDetails.apply_member_state.state == 1 || this.payDetails.apply_member_state.state == 2) {
+							uni.showModal({
+								title: "系统提示",
+								content: "您已提交入会申请，请审核通过后查看",
+								confirmText: "前往查看",
+								success: (res) => {
+									if (res.confirm) {
+										uni.switchTab({
+											url: "/pages/mine/index"
+										})
+									}
+								}
+							})
+							return
+						} else if (this.payDetails.apply_member_state.state == 3 || this.payDetails.apply_member_state.state == 5) {
+							this.isShowPay = true
+						} else if (this.payDetails.apply_member_state.state == 7) {
+							let startTime = new Date(this.nowTime).getTime()
+							let endTime = new Date(this.payDetails.expire_time).getTime()
+							let timeDif = this.$util.getTimeDifference(startTime, endTime)
+							if (timeDif.day > 0) this.isShowPay = true
+							else this.isShowPay = false
+						} else {
+							this.isShowPay = false
+						}
+						this.loadEnd = true
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					uni.hideLoading()
+					console.error('获取会费缴纳详情 ', error)
+				})
+			},
+			// 跳转支付页
+			toPayment() {
+				this.$util.toPage({
+					mode: 1,
+					path: "/pages/member/fees/pay?fees=" + this.payDetails.fees + "&method=" + this.payDetails.pay_method
+				})
+			},
+			// 免费入会续费
+			handleRenew() {
+				uni.showLoading({
+					title: "加载中",
+					mask: true
+				})
+				this.$util.request("member.payFree").then(res => {
+					uni.hideLoading()
+					if (res.code == 1) {
+						this.$util.toPage({
+							mode: 2,
+							path: "/pages/member/fees/success?type=1"
+						})
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					uni.hideLoading()
+					console.error('免费入会续费 ', error)
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.container {
+		.container-main {
+			.main-tips {
+				padding: 24rpx 32rpx;
+				font-size: 24rpx;
+				line-height: 34rpx;
+				color: #F6F7FB;
+				position: sticky;
+				top: 0;
+				z-index: 9;
+			}
+
+			.main-header {
+				padding: 32rpx 32rpx 20rpx;
+				position: relative;
+
+				.header-box {
+					border-radius: 10rpx;
+					background: var(--theme-color);
+					padding: 16rpx;
+					position: relative;
+
+					.box-line {
+						border: 1rpx solid #ffffff;
+						border-bottom: none;
+						border-radius: 10rpx;
+						padding: 48rpx 32rpx 66rpx;
+
+						.price {
+							color: #ffffff;
+							font-size: 72rpx;
+							font-weight: 600;
+							line-height: 60rpx;
+
+							text {
+								font-size: 36rpx;
+							}
+						}
+
+						.free {
+							color: #ffffff;
+							font-size: 44rpx;
+							font-weight: 600;
+							line-height: 60rpx;
+						}
+
+						.term {
+							margin-top: 24rpx;
+							color: #ffffff;
+							font-size: 24rpx;
+							line-height: 34rpx;
+							padding: 8rpx 16rpx;
+							border-radius: 8rpx;
+							background: rgba(255, 255, 255, 0.25);
+						}
+
+						.level {
+							position: absolute;
+							top: 48rpx;
+							left: 0;
+							color: var(--theme-color);
+							font-size: 20rpx;
+							line-height: 28rpx;
+							padding: 10rpx;
+							border-radius: 0 8rpx 8rpx 0;
+							background: #ffffff;
+						}
+					}
+				}
+
+				.header-pocket {
+					position: absolute;
+					bottom: 0;
+					left: 0;
+					right: 0;
+					z-index: 1;
+					width: 100%;
+					height: 120rpx;
+					background-size: 100% 120rpx;
+					background-repeat: no-repeat;
+				}
+			}
+
+			.main-content {
+				background: linear-gradient(180deg, rgb(255, 255, 255), rgba(246, 247, 251, 0) 100%);
+				padding: 32rpx;
+
+				.content-column {
+					margin-top: 48rpx;
+
+					&:first-child {
+						margin-top: 0;
+					}
+
+					.column-title {
+						color: #5A5B6E;
+						font-size: 32rpx;
+						font-weight: 600;
+						line-height: 44rpx;
+					}
+
+					.column-text {
+						color: #5A5B6E;
+						font-size: 28rpx;
+						line-height: 40rpx;
+					}
+
+					.column-content {
+						padding: 24rpx;
+						border-radius: 16rpx;
+						box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.02);
+						background: #ffffff;
+						margin-top: 32rpx;
+
+						.detail-list {
+							.list-item {
+								margin-top: 32rpx;
+
+								&:first-child {
+									margin-top: 0;
+								}
+
+								.item-info {
+									.info-name {
+										color: #5A5B6E;
+										font-size: 28rpx;
+										line-height: 40rpx;
+									}
+
+									.info-time {
+										margin-top: 16rpx;
+										color: #8D929C;
+										font-size: 24rpx;
+										line-height: 34rpx;
+									}
+								}
+
+								.item-price {
+									margin-left: 24rpx;
+									color: var(--theme-color);
+									font-size: 28rpx;
+									line-height: 40rpx;
+								}
+							}
+						}
+
+						.detail-empty {
+							color: #8D929C;
+							font-size: 28rpx;
+							line-height: 40rpx;
+							padding: 48rpx 32rpx;
+							text-align: center;
+						}
+					}
+				}
+			}
+
+			.main-footer {
+				position: fixed;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				z-index: 99;
+				padding: 12rpx 32rpx;
+				background: #ffffff;
+				border-top: 1rpx solid #F6F7FB;
+
+				.footer-price {
+					margin-right: 40rpx;
+
+					.unit {
+						color: var(--theme-color);
+						font-size: 32rpx;
+						line-height: 44rpx;
+					}
+
+					.number {
+						margin-left: 16rpx;
+						color: var(--theme-color);
+						font-size: 40rpx;
+						font-weight: 600;
+						line-height: 56rpx;
+					}
+				}
+
+				.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/fees/pay.vue

@@ -0,0 +1,567 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| 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-header">
+				<view class="header-price">{{payFees}}<text>元</text></view>
+				<view class="header-tag">会费缴纳</view>
+			</view>
+			<view class="main-content">
+				<view class="content-column">
+					<view class="column-title">支付方式</view>
+					<view class="column-method">
+						<view class="method-item flex align-items-center" @click="payMethod = 1" v-if="optionalPayMethod == 2 || optionalPayMethod == 4">
+							<view class="icon" :style="{'background-image': 'url('+ iconPay +')'}" v-if="iconPay"></view>
+							<view class="name flex-item">线上缴费</view>
+							<view class="radio" :class="{active: payMethod == 1}">
+								<image src="/static/tick.png" mode="aspectFill" v-if="payMethod == 1"></image>
+							</view>
+						</view>
+						<view class="method-item flex align-items-center" @click="payMethod = 2" v-if="optionalPayMethod == 3 || optionalPayMethod == 4">
+							<view class="icon" :style="{'background-image': 'url('+ iconPay +')'}" v-if="iconPay"></view>
+							<view class="name flex-item">线下缴费</view>
+							<view class="radio" :class="{active: payMethod == 2}">
+								<image src="/static/tick.png" mode="aspectFill" v-if="payMethod == 2"></image>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="content-column" v-if="payMethod == 2">
+					<view class="column-title">支付凭证</view>
+					<view class="column-upload">
+						<view class="upload-image" v-if="certificate" @click="previewImage()">
+							<image class="image-select" :src="certificate" mode="aspectFill"></image>
+							<image class="image-delete" src="/static/delete.png" mode="aspectFit" @click.stop="deleteImage()"></image>
+						</view>
+						<view class="upload-image" v-else @click="chooseImage()">
+							<view class="image-background"></view>
+							<view class="image-choose">
+								<view class="icon">
+									<image src="/static/camera.png" mode="aspectFit"></image>
+								</view>
+								<view class="text">上传图片</view>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="content-column" v-if="payMethod == 2">
+					<view class="column-title">汇款账户信息</view>
+					<view class="column-info">
+						<view class="info-item flex">
+							<view class="item-content flex-item">开户名称：{{accountInfo.bank_account_name || ""}}</view>
+							<view class="item-copy" @click="handleCopy(accountInfo.bank_account_name || '')">复制</view>
+						</view>
+						<view class="info-item flex">
+							<view class="item-content flex-item">收款账号：{{accountInfo.receiving_account || ""}}</view>
+							<view class="item-copy" @click="handleCopy(accountInfo.receiving_account || '')">复制</view>
+						</view>
+						<view class="info-item flex">
+							<view class="item-content flex-item">银行名称：{{accountInfo.bank_name || ""}}</view>
+							<view class="item-copy" @click="handleCopy(accountInfo.bank_name || '')">复制</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="main-footer">
+				<view class="footer-btn" @click="toPayment" v-if="payMethod == 1">立即支付</view>
+				<view class="footer-btn" @click="toSubmit" v-else>提交审核</view>
+				<view class="safe-padding"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	import svgData from "@/common/svg.js"
+	// #ifdef H5
+	import wx from 'weixin-js-sdk';
+	// #endif
+	export default {
+		data() {
+			return {
+				// 加载完成
+				loadEnd: false,
+				// 可选支付方式 缴费方式: 2=线上缴费, 3=线下缴费, 4=线上缴费+线下缴费
+				optionalPayMethod: 4,
+				// 支付方式
+				payMethod: 1,
+				// 支付凭证
+				certificate: "",
+				// 支付费用
+				payFees: 0,
+				// 汇款账户信息
+				accountInfo: {},
+			}
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+				iconPay: state => {
+					return svgData.svgToUrl("pay", state.app.themeColor)
+				},
+			})
+		},
+		onLoad(option) {
+			this.optionalPayMethod = option.method
+			if (this.optionalPayMethod == 3) this.payMethod = 2
+			else this.payMethod = 1
+			this.payFees = option.fees
+			if (this.optionalPayMethod == 3 || this.optionalPayMethod == 4) {
+				uni.showLoading({
+					title: "加载中"
+				})
+				this.getAccountInfo(() => {
+					uni.hideLoading()
+					this.loadEnd = true
+				})
+			} else {
+				this.$nextTick(() => {
+					this.loadEnd = true
+				})
+			}
+			// #ifdef H5
+			this.initConfig()
+			// #endif
+		},
+		methods: {
+			// #ifdef H5
+			// 微信公众号初始化方法
+			initConfig() {
+				this.$util.request("main.WeChatConfig", {
+					url: location.href.split('#')[0]
+				}).then(res => {
+					if (res.code == 1) {
+						wx.config({
+							debug: false,
+							appId: res.data.appId,
+							timestamp: Number(res.data.timestamp),
+							nonceStr: res.data.nonceStr,
+							signature: res.data.signature,
+							jsApiList: ['chooseWXPay']
+						})
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('通过config接口注入权限验证配置 ', error)
+				})
+			},
+			// #endif
+			// 线上立即支付
+			toPayment() {
+				uni.showLoading({
+					title: "加载中",
+					mask: true
+				})
+				this.$util.request("member.payOnline").then(res => {
+					if (res.code == 1) {
+						let data = res.data
+						// #ifdef MP-WEIXIN
+						uni.requestPayment({
+							provider: "wxpay",
+							...data,
+							success: () => {
+								uni.hideLoading()
+								uni.reLaunch({
+									url: "/pages/member/fees/success"
+								})
+							},
+							fail: () => {
+								uni.hideLoading()
+								uni.showToast({
+									title: '支付已取消',
+									icon: 'none'
+								})
+							}
+						})
+						// #endif
+						// #ifdef H5
+						wx.ready(() => {
+							uni.hideLoading()
+							wx.chooseWXPay({
+								timestamp: data.timeStamp,
+								package: data.package,
+								nonceStr: data.nonceStr,
+								signType: data.signType,
+								paySign: data.paySign,
+								success: (res) => {
+									uni.hideLoading();
+									if (res.errMsg == "chooseWXPay:ok") {
+										uni.reLaunch({
+											url: "/pages/member/fees/success"
+										})
+									} else {
+										uni.showToast({
+											title: '支付失败',
+											icon: 'error'
+										})
+									}
+								},
+								fail: () => {
+									uni.hideLoading();
+									uni.showToast({
+										title: '支付已取消',
+										icon: 'none'
+									})
+								},
+							});
+						});
+						// #endif
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('线上缴费 ', error)
+				})
+			},
+			// 线下提交审核
+			toSubmit() {
+				if (!this.certificate) {
+					uni.showToast({
+						title: "请上传支付凭证",
+						icon: "none"
+					})
+					return
+				}
+				uni.showLoading({
+					title: "加载中",
+					mask: true
+				})
+				this.uploadImage((url) => {
+					this.$util.request("member.payOffline", {
+						pay_voucher: url
+					}).then(res => {
+						uni.hideLoading()
+						if (res.code == 1) {
+							uni.reLaunch({
+								url: "/pages/member/fees/success?type=1"
+							})
+						} else {
+							uni.showToast({
+								title: res.msg,
+								icon: 'none'
+							})
+						}
+					}).catch(error => {
+						console.error('线下缴费 ', error)
+					})
+				})
+			},
+			// 上传图片
+			uploadImage(fn) {
+				this.$util.uploadFile(this.certificate).then(result => {
+					if (result.code == 1) {
+						fn(result.data.url)
+					} else {
+						uni.hideLoading()
+						uni.showToast({
+							title: result?.msg || "上传失败",
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('上传图片 ', error)
+				})
+			},
+			// 选择图片
+			chooseImage() {
+				// #ifdef MP-WEIXIN
+				uni.chooseMedia({
+					count: 1,
+					mediaType: ['image'],
+					sourceType: ['album', 'camera'],
+					sizeType: ['compressed'],
+					success: (res) => {
+						this.certificate = res.tempFiles[0].tempFilePath
+					}
+				})
+				// #endif
+				// #ifndef MP-WEIXIN
+				uni.chooseImage({
+					count: 1,
+					mediaType: ['image'],
+					sourceType: ['album', 'camera '],
+					sizeType: ['compressed'],
+					success: (res) => {
+						this.certificate = res.tempFilePaths[0]
+					}
+				});
+				// #endif
+			},
+			// 删除图片
+			deleteImage() {
+				this.certificate = ""
+			},
+			// 预览图片
+			previewImage() {
+				uni.previewImage({
+					urls: [this.certificate],
+					current: 0
+				});
+			},
+			// 获取汇款账户信息
+			getAccountInfo(fn) {
+				this.$util.request("member.accountInfo").then(res => {
+					if (fn) fn()
+					if (res.code == 1) {
+						this.accountInfo = res.data
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					if (fn) fn()
+					console.error('获取汇款账户信息 ', error)
+				})
+			},
+			// 复制
+			handleCopy(value) {
+				this.$util.toPage({
+					mode: 8,
+					content: value
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.container {
+		.container-main {
+			padding: 32rpx 32rpx 144rpx;
+
+			.main-header {
+				border-radius: 16rpx;
+				box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.02);
+				background: #ffffff;
+				padding: 38rpx 32rpx;
+
+				.header-price {
+					color: var(--theme-color);
+					font-size: 48rpx;
+					font-weight: 600;
+					text-align: center;
+
+					text {
+						font-size: 24rpx
+					}
+				}
+
+				.header-tag {
+					margin-top: 26rpx;
+					color: #8D929C;
+					font-size: 28rpx;
+					line-height: 40rpx;
+					text-align: center;
+				}
+			}
+
+			.main-content {
+				.content-column {
+					margin-top: 32rpx;
+					padding: 32rpx;
+					border-radius: 16rpx;
+					box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.02);
+					background: #ffffff;
+
+					.column-title {
+						color: #5A5B6E;
+						font-size: 32rpx;
+						font-weight: 600;
+						line-height: 44rpx;
+					}
+
+					.column-method {
+						margin-top: 32rpx;
+
+						.method-item {
+							margin-top: 32rpx;
+
+							&:first-child {
+								margin-top: 0;
+							}
+
+							.icon {
+								width: 32rpx;
+								height: 32rpx;
+								background-size: 32rpx;
+							}
+
+							.name {
+								color: #5A5B6E;
+								font-size: 28rpx;
+								line-height: 40rpx;
+								margin: 0 16rpx;
+							}
+
+							.radio {
+								width: 32rpx;
+								height: 32rpx;
+								background: #D6DBDE;
+								border-radius: 50%;
+
+								&.active {
+									background: var(--theme-color);
+								}
+							}
+
+						}
+					}
+
+					.column-upload {
+						display: flex;
+						flex-wrap: wrap;
+						margin-top: 32rpx;
+						column-gap: 3.5%;
+						row-gap: 24rpx;
+
+						.upload-image {
+							position: relative;
+							width: 31%;
+							height: 0;
+							padding-top: 31%;
+
+							.image-select {
+								position: absolute;
+								top: 0;
+								left: 0;
+								right: 0;
+								bottom: 0;
+								border-radius: 10rpx;
+							}
+
+							.image-video {
+								position: absolute;
+								top: 0;
+								left: 0;
+								right: 0;
+								bottom: 0;
+								border-radius: 10rpx;
+								background: var(--theme-color);
+								padding: 56rpx;
+							}
+
+							.image-delete {
+								position: absolute;
+								top: -16rpx;
+								right: -16rpx;
+								width: 48rpx;
+								height: 48rpx;
+							}
+
+							.image-choose {
+								position: absolute;
+								top: 20rpx;
+								left: 20rpx;
+								right: 20rpx;
+								bottom: 20rpx;
+								z-index: 6;
+								display: flex;
+								flex-direction: column;
+								justify-content: center;
+								align-items: center;
+								background: #ffffff;
+								border-radius: 10rpx;
+
+								.icon {
+									width: 80rpx;
+									height: 80rpx;
+									padding: 18rpx;
+									background: var(--theme-color);
+									border-radius: 50%;
+								}
+
+								.text {
+									margin-top: 16rpx;
+									color: var(--theme-color);
+									font-size: 28rpx;
+									line-height: 40rpx;
+								}
+							}
+
+							.image-background {
+								position: absolute;
+								top: 0;
+								left: 0;
+								right: 0;
+								bottom: 0;
+								z-index: 1;
+								background: var(--theme-color);
+								opacity: 0.08;
+							}
+						}
+					}
+
+					.column-info {
+						margin-top: 24rpx;
+
+						.info-item {
+							margin-top: 24rpx;
+
+							&:first-child {
+								margin-top: 0;
+							}
+
+							.item-content {
+								color: #5A5B6E;
+								font-size: 28rpx;
+								line-height: 40rpx;
+							}
+
+							.item-copy {
+								color: var(--theme-color);
+								font-size: 28rpx;
+								line-height: 40rpx;
+								margin-left: 24rpx;
+							}
+						}
+					}
+				}
+			}
+
+			.main-footer {
+				position: fixed;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				z-index: 99;
+				padding: 12rpx 32rpx;
+				background: #ffffff;
+				border-top: 1rpx solid #F6F7FB;
+
+				.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/fees/success.vue

@@ -0,0 +1,126 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| 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" v-if="payType == 1">提交成功，请等待管理员审核</view>
+			<view class="main-subtitle" v-else>提交成功，请前往个人中心查看会员状态</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,
+				// 支付类型
+				payType: null,
+			}
+		},
+		onLoad(option) {
+			this.payType = option.type
+		},
+		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>

pages/member/index.vue

@@ -0,0 +1,477 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| 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 title="会员风采"></title-bar>
+		<!-- 顶部搜索筛选栏 -->
+		<block v-if="loadEnd">
+			<view class="container-search" :style="{top: titleBarHeight + 'px'}">
+				<view class="search-input flex align-items-center" @click="toSearch()">
+					<image class="icon" src="/static/search.png" mode="aspectFit"></image>
+					<text class="text flex-item">请输入姓名搜索</text>
+				</view>
+			</view>
+			<view class="container-classify">
+				<menu-carousel :show-data="industryList" height="370rpx" icon-size="80rpx" font-size="24rpx" line-height="34rpx" margin-top="48rpx" @toPage="toIndustry"></menu-carousel>
+			</view>
+			<view class="container-screen flex" :style="{top: `calc(${titleBarHeight}px + 112rpx)`}">
+				<view class="screen-item flex-item" :class="{active: isNearby}" @click="changeScreen(1)">
+					<text class="text">附近会员</text>
+				</view>
+				<view class="screen-item flex-item" :class="{active: selectRegion.city}" @click="changeScreen(2)">
+					<text class="text">会员籍贯</text>
+					<view class="icon" :style="{'background-image': 'url('+ iconDownActive +')'}" v-if="iconDownActive && selectRegion.city"></view>
+					<view class="icon" :style="{'background-image': 'url('+ iconDown +')'}" v-else-if="iconDown"></view>
+				</view>
+				<view class="screen-item flex-item" :class="{active: selectLevel.length}" @click="changeScreen(3)">
+					<text class="text">会员级别</text>
+					<view class="icon" :style="{'background-image': 'url('+ iconDownActive +')'}" v-if="iconDownActive && selectLevel.length"></view>
+					<view class="icon" :style="{'background-image': 'url('+ iconDown +')'}" v-else-if="iconDown"></view>
+				</view>
+			</view>
+		</block>
+		<!-- 会员列表 -->
+		<view class="container-main" v-if="loadEnd">
+			<member-item :show-data="memberList" v-if="memberList.length"></member-item>
+			<empty top="64rpx" title="暂无相关会员~" v-else></empty>
+		</view>
+		<!-- 底部导航 -->
+		<tab-bar></tab-bar>
+		<!-- 地区选择框 -->
+		<region-modal ref="regionModal" @onChange="pageChange" @callback="changeRegion"></region-modal>
+		<!-- 级别选择框 -->
+		<level-modal ref="levelModal" @onChange="pageChange" @callback="changeLevel"></level-modal>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	import menuCarousel from "@/pages/component/menu/carousel.vue"
+	import memberItem from "@/pages/component/member/index.vue"
+	import regionModal from "@/pages/component/modal/region.vue"
+	import levelModal from "@/pages/component/modal/level.vue"
+	import svgData from "@/common/svg.js"
+	// #ifdef H5
+	import wx from 'weixin-js-sdk';
+	// #endif
+	export default {
+		components: {
+			menuCarousel,
+			memberItem,
+			regionModal,
+			levelModal,
+		},
+		data() {
+			return {
+				// 加载完成
+				loadEnd: false,
+				// 标题栏高度
+				titleBarHeight: 0,
+				// 页面是否阻止滚动
+				pageShow: false,
+				// 行业分类
+				industryList: [],
+				// 是否筛选附近会员
+				isNearby: false,
+				// 已选会员籍贯
+				selectRegion: {},
+				// 已选会员级别
+				selectLevel: [],
+				// 向下图标-未选中
+				iconDown: "",
+				// 分类查询参数
+				page: 1,
+				limit: 20,
+				hasMore: false,
+				// 会员列表
+				memberList: [],
+				// 是否授权位置信息
+				isLocation: false,
+			}
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+				shareImage: state => state.app.shareImage,
+				shareTitle: state => state.app.shareTitle,
+				iconDownActive: state => {
+					return svgData.svgToUrl("down", state.app.themeColor)
+				}
+			})
+		},
+		mounted() {
+			// #ifdef MP-WEIXIN
+			let statusBarHeight = uni.getSystemInfoSync().statusBarHeight
+			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
+			this.titleBarHeight = statusBarHeight + (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
+			// #endif
+		},
+		onLoad() {
+			this.getSvgIcon()
+			uni.showLoading({
+				title: "加载中"
+			})
+			// #ifdef H5
+			this.initConfig()
+			// #endif
+			this.getIndustry(() => {
+				uni.hideLoading()
+				this.loadEnd = true
+			})
+			this.getAuthSetting(() => {
+				this.getMemberList()
+			})
+		},
+		onPullDownRefresh() {
+			this.getIndustry()
+			this.page = 1
+			this.getMemberList(() => {
+				uni.stopPullDownRefresh()
+			})
+		},
+		onReachBottom() {
+			if (this.hasMore) {
+				this.page++
+				this.getMemberList()
+			}
+		},
+		onShareAppMessage() {
+			return {
+				title: this.shareTitle,
+				imageUrl: this.shareImage,
+			}
+		},
+		onShareTimeline() {
+			return {
+				title: this.shareTitle,
+				imageUrl: this.shareImage,
+			}
+		},
+		methods: {
+			// 改变页面滚动状态
+			pageChange(state) {
+				this.pageShow = state
+			},
+			// #ifdef H5
+			// 微信公众号初始化方法
+			initConfig() {
+				this.$util.request("main.WeChatConfig", {
+					url: location.href.split('#')[0]
+				}).then(res => {
+					if (res.code == 1) {
+						wx.config({
+							debug: false,
+							appId: res.data.appId,
+							timestamp: Number(res.data.timestamp),
+							nonceStr: res.data.nonceStr,
+							signature: res.data.signature,
+							jsApiList: ["updateAppMessageShareData", "updateTimelineShareData", "getLocation"],
+							openTagList: ["updateAppMessageShareData", "updateTimelineShareData"],
+						})
+						wx.ready(() => {
+							wx.updateAppMessageShareData({
+								title: this.shareTitle,
+								desc: "",
+								link: window.location.href,
+								imgUrl: this.shareImage,
+							});
+							wx.updateTimelineShareData({
+								title: this.shareTitle,
+								link: window.location.href,
+								imgUrl: this.shareImage,
+							});
+						});
+					} else {
+						uni.hideLoading()
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					uni.hideLoading()
+					console.error('通过config接口注入权限验证配置 ', error)
+				})
+			},
+			// #endif
+			// 获取向下图标
+			getSvgIcon() {
+				this.iconDown = svgData.svgToUrl("down", "#999999")
+			},
+			// 获取行业分类
+			getIndustry(fn) {
+				this.$util.request("member.industry").then(res => {
+					if (fn) fn()
+					if (res.code == 1) {
+						this.industryList = res.data
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取行业分类 ', error)
+				})
+			},
+			// 改变分类
+			changeScreen(id) {
+				if (id == 1) {
+					this.getAuthSetting(() => {
+						if (this.isLocation) {
+							this.isNearby = !this.isNearby
+							this.page = 1
+							this.getMemberList()
+						}
+					})
+				} else if (id == 2) {
+					this.$refs.regionModal.open(this.selectRegion)
+				} else if (id == 3) {
+					this.$refs.levelModal.open(this.selectLevel)
+				}
+			},
+			// 选择会员籍贯
+			changeRegion(data) {
+				this.selectRegion = data
+				this.page = 1
+				this.getMemberList()
+			},
+			// 选择会员级别
+			changeLevel(value) {
+				this.selectLevel = value
+				this.page = 1
+				this.getMemberList()
+			},
+			// 跳转搜索
+			toSearch() {
+				this.$util.toPage({
+					mode: 1,
+					path: "/pages/member/search/index"
+				})
+			},
+			// 跳转行业分类
+			toIndustry(item) {
+				this.$util.toPage({
+					mode: 1,
+					path: `/pages/member/industry?id=${item.id}&name=${encodeURIComponent(item.name)}`,
+				})
+			},
+			// 获取位置权限
+			getAuthSetting(fn) {
+				// #ifdef MP-WEIXIN
+				uni.getSetting({
+					success: (setting) => {
+						if (setting.authSetting && setting.authSetting.hasOwnProperty("scope.userLocation")) {
+							if (setting.authSetting["scope.userLocation"]) {
+								this.isLocation = true
+								if (fn) fn()
+							} else {
+								uni.hideLoading()
+								uni.showModal({
+									title: '提示',
+									content: '请重新授权获取您的地理位置，否则部分功能将无法使用',
+									confirmColor: "#E50002",
+									confirmText: "授权",
+									success: (res) => {
+										if (res.confirm) {
+											uni.openSetting({
+												success: () => {
+													this.isLocation = true
+													if (fn) fn()
+												},
+												fail: (err) => {
+													console.error(err)
+												}
+											})
+										} else {
+											this.isLocation = false
+											if (fn) fn()
+										}
+									},
+									fail: () => {
+										this.isLocation = false
+										if (fn) fn()
+									}
+								})
+							}
+						} else {
+							this.isLocation = true
+							if (fn) fn()
+						}
+					},
+					fail: () => {
+						this.isLocation = false
+						if (fn) fn()
+					}
+				})
+				// #endif
+				// #ifdef H5
+				this.isLocation = true
+				if (fn) fn()
+				// #endif
+			},
+			// 获取会员列表
+			getMemberList(fn) {
+				this.getLocation((location) => {
+					let data = {
+						page: this.page,
+						limit: this.limit,
+					}
+					if (location && location.latitude && location.longitude) {
+						data.latitude = location.latitude
+						data.longitude = location.longitude
+						if (this.isNearby) data.nearby = 1
+					} else this.isNearby = false
+					if (this.selectRegion.city) data.native_place = this.selectRegion.city
+					if (this.selectRegion.area) data.native_place += "/" + this.selectRegion.area
+					if (this.selectLevel.length) data.member_level_id = this.selectLevel.map(item => item.id).join()
+					this.$util.request("member.list", data).then(res => {
+						if (fn) fn()
+						if (res.code == 1) {
+							let list = res.data.data
+							this.hasMore = this.page < res.data.total / this.limit ? true : false
+							this.memberList = this.page == 1 ? list : [...this.memberList, ...list];
+						} else {
+							uni.showToast({
+								title: res.msg,
+								icon: 'none'
+							})
+						}
+					}).catch(error => {
+						console.error('获取会员列表 ', error)
+					})
+				})
+			},
+			// 获取当前地址
+			getLocation(fn) {
+				// #ifdef MP-WEIXIN
+				if (!this.isLocation) {
+					fn()
+					return
+				}
+				uni.getLocation({
+					type: 'wgs84',
+					geocode: true,
+					success: (res) => {
+						fn({
+							latitude: res.latitude,
+							longitude: res.longitude,
+						})
+					},
+					fail: () => {
+						this.isLocation = false
+						fn()
+					}
+				});
+				// #endif
+				// #ifdef H5
+				wx.ready(() => {
+					wx.getLocation({
+						type: 'wgs84',
+						success: (res) => {
+							fn({
+								latitude: res.latitude,
+								longitude: res.longitude,
+							})
+						},
+						fail: (err) => {
+							this.isLocation = false
+							fn()
+						},
+						cancel: () => {
+							this.isLocation = false
+							fn()
+						}
+					});
+				})
+				// #endif
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.container {
+		.container-search {
+			position: sticky;
+			top: 0;
+			z-index: 99;
+			background: #ffffff;
+			padding: 0 32rpx;
+			height: 112rpx;
+			display: flex;
+			align-items: center;
+
+			.search-input {
+				width: 100%;
+				padding: 20rpx 32rpx;
+				background: #F9F9F9;
+				border-radius: 16rpx;
+
+				.icon {
+					width: 40rpx;
+					height: 40rpx;
+				}
+
+				.text {
+					margin-left: 16rpx;
+					color: #8D929C;
+					font-size: 28rpx;
+					line-height: 40rpx;
+				}
+			}
+		}
+
+		.container-classify {
+			background: #ffffff;
+			padding: 48rpx 0 28rpx;
+		}
+
+		.container-screen {
+			position: sticky;
+			top: 0;
+			z-index: 98;
+			background: #ffffff;
+
+			.screen-item {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				padding: 24rpx;
+
+				.text {
+					color: #666666;
+					font-size: 28rpx;
+					line-height: 40rpx;
+				}
+
+				.icon {
+					width: 20rpx;
+					height: 16rpx;
+					background-size: 20rpx 16rpx;
+					margin-left: 12rpx;
+				}
+
+				&.active .text {
+					color: var(--theme-color);
+				}
+			}
+		}
+
+		.container-main {
+			padding: 32rpx;
+		}
+	}
+</style>

pages/member/industry.vue

@@ -0,0 +1,215 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| 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 :title="industryName"></title-bar>
+		<!-- 内容区 -->
+		<view class="container-main" v-if="loadEnd">
+			<member-item :show-data="memberList" v-if="memberList.length"></member-item>
+			<empty top="30%" title="暂无相关内容~" v-else></empty>
+		</view>
+		<!-- 底部导航 -->
+		<tab-bar></tab-bar>
+	</view>
+</template>
+
+<script>
+	import memberItem from "@/pages/component/member/index.vue"
+	// #ifdef H5
+	import wx from 'weixin-js-sdk';
+	// #endif
+	export default {
+		components: {
+			memberItem,
+		},
+		data() {
+			return {
+				// 加载完成
+				loadEnd: false,
+				// 行业id
+				industryId: "",
+				// 行业名称
+				industryName: "",
+				// 查询参数
+				page: 1,
+				limit: 20,
+				hasMore: false,
+				// 数据列表
+				memberList: [],
+				// 是否授权位置信息
+				isLocation: false,
+			}
+		},
+		onLoad(option) {
+			this.industryId = option.id
+			this.industryName = decodeURIComponent(option.name)
+			uni.showLoading({
+				title: "加载中"
+			})
+			// #ifdef H5
+			this.initConfig()
+			// #endif
+			this.getAuthSetting(() => {
+				uni.hideLoading()
+				this.loadEnd = true
+			})
+		},
+		onReachBottom() {
+			if (this.hasMore) {
+				this.page++
+				this.getMemberList()
+			}
+		},
+		methods: {
+			// #ifdef H5
+			// 微信公众号初始化方法
+			initConfig() {
+				this.$util.request("main.WeChatConfig", {
+					url: location.href.split('#')[0]
+				}).then(res => {
+					if (res.code == 1) {
+						wx.config({
+							debug: false,
+							appId: res.data.appId,
+							timestamp: Number(res.data.timestamp),
+							nonceStr: res.data.nonceStr,
+							signature: res.data.signature,
+							jsApiList: ["getLocation"],
+						})
+					} else {
+						uni.hideLoading()
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					uni.hideLoading()
+					console.error('通过config接口注入权限验证配置 ', error)
+				})
+			},
+			// #endif
+			// 获取位置权限
+			getAuthSetting(fn) {
+				// #ifdef MP-WEIXIN
+				uni.getSetting({
+					success: (setting) => {
+						if (setting.authSetting && setting.authSetting.hasOwnProperty("scope.userLocation")) {
+							if (setting.authSetting["scope.userLocation"]) {
+								this.isLocation = true
+								this.getMemberList(fn)
+							} else {
+								this.isLocation = false
+								this.getMemberList(fn)
+							}
+						} else {
+							this.isLocation = false
+							this.getMemberList(fn)
+						}
+					},
+					fail: () => {
+						this.isLocation = false
+						this.getMemberList(fn)
+					}
+				})
+				// #endif
+				// #ifdef H5
+				this.isLocation = false
+				this.getMemberList(fn)
+				// #endif
+			},
+			// 获取会员列表
+			getMemberList(fn) {
+				this.getLocation((location) => {
+					let data = {
+						page: this.page,
+						limit: this.limit,
+						industry_category_id: this.industryId
+					}
+					if (location && location.latitude && location.longitude) {
+						data.latitude = location.latitude
+						data.longitude = location.longitude
+					}
+					this.$util.request("member.list", data).then(res => {
+						if (fn) fn()
+						if (res.code == 1) {
+							let list = res.data.data
+							this.hasMore = this.page < res.data.total / this.limit ? true : false
+							this.memberList = this.page == 1 ? list : [...this.memberList, ...list];
+						} else {
+							uni.showToast({
+								title: res.msg,
+								icon: 'none'
+							})
+						}
+					}).catch(error => {
+						console.error('获取会员列表 ', error)
+					})
+				})
+			},
+			// 获取当前地址
+			getLocation(fn) {
+				// #ifdef MP-WEIXIN
+				if (!this.isLocation) {
+					fn()
+					return
+				}
+				uni.getLocation({
+					type: 'wgs84',
+					geocode: true,
+					success: (res) => {
+						fn({
+							latitude: res.latitude,
+							longitude: res.longitude,
+						})
+					},
+					fail: () => {
+						this.isLocation = false
+						fn()
+					}
+				});
+				// #endif
+				// #ifdef H5
+				wx.ready(() => {
+					wx.getLocation({
+						type: 'wgs84',
+						success: (res) => {
+							fn({
+								latitude: res.latitude,
+								longitude: res.longitude,
+							})
+						},
+						fail: () => {
+							this.isLocation = false
+							fn()
+						},
+						cancel: () => {
+							this.isLocation = false
+							fn()
+						}
+					});
+				})
+				// #endif
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.container {
+		.container-main {
+			padding: 32rpx;
+		}
+	}
+</style>

pages/member/organization.vue

@@ -0,0 +1,423 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| 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="memberTypeConfig.group"></title-bar>
+		<!-- 内容区 -->
+		<view class="container-main">
+			<block v-if="loadEnd">
+				<!-- 轮播图 -->
+				<view class="main-carousel" v-if="carouselList.length">
+					<carousel :show-data="carouselList" height="320rpx" radius="16rpx" right="24rpx" bottom="24rpx"></carousel>
+				</view>
+				<!-- 团体信息 -->
+				<view class="main-info flex align-items-center">
+					<image class="info-avatar" :src="memberInfo.organize_logo" mode="aspectFill"></image>
+					<view class="info-name flex-item text-ellipsis-more">{{memberInfo.organize_name}}</view>
+				</view>
+				<!-- 团体简介 -->
+				<view class="main-introduce">
+					<view class="introduce-title">团体简介</view>
+					<view class="introduce-content">
+						<mp-html :content="memberInfo.organize_introduction || '暂未完善'"></mp-html>
+					</view>
+				</view>
+				<!-- 产品列表 -->
+				<view class="main-product" v-if="memberInfo.company_goods_list && memberInfo.company_goods_list.length">
+					<view class="product-title">产品列表</view>
+					<view class="product-list">
+						<view class="list-item" v-for="item in memberInfo.company_goods_list" :key="item.id" @click="toProductDetails(item.id)">
+							<image class="item-image" :src="item.image" mode="aspectFill"></image>
+							<view class="item-name text-ellipsis-more">{{item.name}}</view>
+						</view>
+					</view>
+				</view>
+				<!-- 自定义字段 -->
+				<member-custom :show-data="memberInfo.custom_content"></member-custom>
+				<!-- 底部按钮 -->
+				<view class="main-footer">
+					<view class="flex justify-content-between align-items-center">
+						<view class="footer-menu flex">
+							<!-- #ifdef MP-WEIXIN -->
+							<button type="default" open-type="share" class="menu-btn">
+								<image class="icon" src="/static/share.png" mode="aspectFit"></image>
+								<view class="text">分享</view>
+							</button>
+							<!-- #endif -->
+							<view class="menu-btn" @click="toNavigation()">
+								<image class="icon" src="/static/location.png" mode="aspectFit"></image>
+								<view class="text">地址</view>
+							</view>
+						</view>
+						<view class="footer-btn" @click="onContact()" v-if="memberInfo.company_office_number">拨打电话</view>
+					</view>
+					<view class="safe-padding"></view>
+				</view>
+			</block>
+			<view class="main-login" v-else-if="showLogin">
+				<image class="login-image" :src="loginImg" mode="aspectFit"></image>
+				<view class="login-tips">小程序需要登录注册才能使用相关功能，请登录后查看该页面</view>
+				<view class="login-btn" @click="toLogin()">前往登录</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	import memberCustom from "@/pages/component/member/custom.vue"
+	import carousel from "@/pages/component/carousel/carousel.vue"
+	// #ifdef H5
+	import wx from 'weixin-js-sdk';
+	// #endif
+	export default {
+		components: {
+			memberCustom,
+			carousel,
+		},
+		data() {
+			return {
+				// 加载完成
+				loadEnd: false,
+				// 会员id
+				memberId: null,
+				// 会员详情
+				memberInfo: {},
+				// 轮播图列表
+				carouselList: [],
+				// 是否显示登录提示
+				showLogin: false,
+			}
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+				loginImg: state => state.app.loginImg,
+				memberTypeConfig: state => state.app.memberTypeConfig,
+			})
+		},
+		onLoad(option) {
+			this.memberId = option.id
+			if (uni.getStorageSync("token")) {
+				uni.showLoading({
+					title: "加载中"
+				})
+				this.getMemberInfo(() => {
+					this.loadEnd = true
+					uni.hideLoading()
+					// #ifdef H5
+					this.initConfig()
+					// #endif
+				})
+			} else {
+				this.showLogin = true
+				this.$util.verifyLogin(2)
+			}
+		},
+		onShareTimeline() {
+			return {
+				title: `${this.memberInfo.member_level_name || ""}单位${this.memberInfo.organize_name || ""}`,
+				path: '/pages/member/organization?id=' + this.memberId,
+				imageUrl: this.memberInfo.organize_logo,
+			}
+		},
+		onShareAppMessage() {
+			return {
+				title: `${this.memberInfo.member_level_name || ""}单位${this.memberInfo.organize_name || ""}`,
+				path: '/pages/member/organization?id=' + this.memberId,
+				imageUrl: this.memberInfo.organize_logo,
+			}
+		},
+		methods: {
+			// #ifdef H5
+			// 微信公众号初始化方法
+			initConfig() {
+				this.$util.request("main.WeChatConfig", {
+					url: location.href.split('#')[0]
+				}).then(res => {
+					if (res.code == 1) {
+						wx.config({
+							debug: false,
+							appId: res.data.appId,
+							timestamp: Number(res.data.timestamp),
+							nonceStr: res.data.nonceStr,
+							signature: res.data.signature,
+							jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
+							openTagList: ["updateAppMessageShareData", "updateTimelineShareData"],
+						})
+						wx.ready(() => {
+							wx.updateAppMessageShareData({
+								title: this.memberInfo.organize_name,
+								desc: "",
+								link: window.location.href,
+								imgUrl: this.memberInfo.organize_logo,
+							});
+							wx.updateTimelineShareData({
+								title: this.memberInfo.organize_name,
+								link: window.location.href,
+								imgUrl: this.memberInfo.organize_logo,
+							});
+						});
+					} else {
+						uni.hideLoading()
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					uni.hideLoading()
+					console.error('通过config接口注入权限验证配置 ', error)
+				})
+			},
+			// #endif
+			// 获取会员详情
+			getMemberInfo(fn) {
+				this.$util.request("member.organization", {
+					id: this.memberId
+				}).then(res => {
+					if (fn) fn()
+					if (res.code == 1) {
+						this.memberInfo = res.data
+						this.carouselList = this.splitImages(res.data.company_carousel_images || "")
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					if (error == 401) {
+						this.showLogin = true
+					} else {
+						console.error('获取会员详情 ', error)
+					}
+				})
+			},
+			// 字符串转数组格式图片
+			splitImages(images) {
+				try {
+					if (images) return images.split(',');
+					else return []
+				} catch (error) {
+					return [];
+				}
+			},
+			// 跳转产品详情
+			toProductDetails(id) {
+				this.$util.toPage({
+					mode: 1,
+					path: "/pages/member/product/details?id=" + id,
+				})
+			},
+			// 跳转地图导航
+			toNavigation() {
+				const addressInfo = JSON.parse(this.memberInfo.address_json || "{}")
+				this.$util.toPage({
+					mode: 7,
+					address: addressInfo,
+				})
+			},
+			// 拨打电话
+			onContact() {
+				this.$util.toPage({
+					mode: 6,
+					phone: this.memberInfo.company_office_number,
+				})
+			},
+			// 前往登录
+			toLogin() {
+				uni.redirectTo({
+					url: `/pages/member/organization?id=${this.memberId}`,
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.container {
+		.container-main {
+			padding: 32rpx 32rpx 144rpx;
+
+			.main-carousel {
+				margin-bottom: 32rpx;
+			}
+
+			.main-info {
+				padding: 32rpx 24rpx 32rpx 32rpx;
+				border-radius: 10rpx;
+				background: #ffffff;
+
+				.info-avatar {
+					width: 128rpx;
+					height: 128rpx;
+					border-radius: 50%;
+				}
+
+				.info-name {
+					margin-left: 32rpx;
+					font-weight: 600;
+					font-size: 32rpx;
+					line-height: 40rpx;
+					color: #5A5B6E;
+				}
+
+				.info-icon {
+					margin-left: 32rpx;
+					border-radius: 50%;
+					background: var(--theme-color);
+					padding: 0;
+
+					.icon {
+						width: 40rpx;
+						height: 40rpx;
+						padding: 8rpx;
+					}
+				}
+			}
+
+			.main-introduce {
+				padding: 32rpx;
+				border-radius: 16rpx;
+				background: #ffffff;
+				margin-top: 32rpx;
+
+				.introduce-title {
+					color: #5A5B6E;
+					font-size: 30rpx;
+					font-weight: 600;
+					line-height: 44rpx;
+				}
+
+				.introduce-content {
+					margin-top: 24rpx;
+					color: #5A5B6E;
+					font-size: 28rpx;
+					line-height: 48rpx;
+				}
+			}
+
+			.main-product {
+				padding: 32rpx;
+				border-radius: 16rpx;
+				background: #ffffff;
+				margin-top: 32rpx;
+
+				.product-title {
+					color: #5A5B6E;
+					font-size: 30rpx;
+					font-weight: 600;
+					line-height: 44rpx;
+				}
+
+				.product-list {
+					margin-top: 24rpx;
+					display: grid;
+					grid-template-columns: repeat(2, 2fr);
+					column-gap: 28rpx;
+					row-gap: 30rpx;
+
+					.list-item {
+						.item-image {
+							width: 100%;
+							height: 296rpx;
+							border-radius: 16rpx 16rpx 0 0;
+						}
+
+						.item-name {
+							padding: 0 24rpx;
+							margin-top: 24rpx;
+							color: #5A5B6E;
+							font-size: 28rpx;
+							font-weight: 600;
+							line-height: 44rpx;
+						}
+					}
+				}
+			}
+
+			.main-footer {
+				position: fixed;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				z-index: 99;
+				padding: 12rpx 32rpx 12rpx 48rpx;
+				background: #ffffff;
+				border-top: 1rpx solid #F6F7FB;
+
+				.footer-menu {
+					.menu-btn {
+						display: flex;
+						flex-direction: column;
+						align-items: center;
+						margin-right: 32rpx;
+						background: transparent;
+						padding: 0;
+
+						.icon {
+							width: 52rpx;
+							height: 52rpx;
+						}
+
+						.text {
+							color: #5A5B6E;
+							font-size: 20rpx;
+							line-height: 28rpx;
+						}
+					}
+				}
+
+				.footer-btn {
+					color: #ffffff;
+					font-size: 32rpx;
+					line-height: 44rpx;
+					padding: 22rpx 48rpx;
+					border-radius: 16rpx;
+					background: var(--theme-color);
+					text-align: center;
+				}
+			}
+
+			.main-login {
+				padding: 96rpx 60rpx 0;
+
+				.login-image {
+					width: 100%;
+					height: 500rpx;
+				}
+
+				.login-tips {
+					color: #585858;
+					font-size: 36rpx;
+					line-height: 50rpx;
+					margin-top: 48rpx;
+					text-align: center;
+				}
+
+				.login-btn {
+					margin-top: 56rpx;
+					height: 88rpx;
+					line-height: 88rpx;
+					font-size: 28rpx;
+					border-radius: 16rpx;
+					text-align: center;
+					background: var(--theme-color);
+					color: #ffffff;
+				}
+			}
+		}
+	}
+</style>

pages/member/product/details.vue

@@ -0,0 +1,197 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| 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-carousel">
+				<carousel :show-data="carouselList" height="750rpx" radius="0" right="32rpx" bottom="32rpx"></carousel>
+			</view>
+			<view class="main-info">
+				<view class="info-title">{{productInfo.name}}</view>
+			</view>
+			<view class="main-content">
+				<view class="content-title">产品详情</view>
+				<mp-html :content="productInfo.content" />
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	// #ifdef H5
+	import wx from 'weixin-js-sdk';
+	// #endif
+	import carousel from "@/pages/component/carousel/carousel.vue"
+	export default {
+		components: {
+			carousel,
+		},
+		data() {
+			return {
+				// 是否加载完成
+				loadEnd: false,
+				// 产品Id 
+				productId: null,
+				// 产品详情
+				productInfo: {},
+				// 轮播图列表
+				carouselList: [],
+			}
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+			}),
+		},
+		onLoad(option) {
+			this.productId = option.id
+			uni.showLoading({
+				title: "加载中"
+			})
+			this.getProductDetails(() => {
+				uni.hideLoading()
+				this.loadEnd = true
+				// #ifdef H5
+				this.initConfig()
+				// #endif
+			})
+		},
+		onShareAppMessage() {
+			return {
+				title: this.productInfo.name,
+				path: '/pages/member/product/details?id=' + this.productId,
+				imageUrl: this.carouselList[0].image,
+			}
+		},
+		onShareTimeline() {
+			return {
+				title: this.productInfo.name,
+				path: '/pages/member/product/details?id=' + this.productId,
+				imageUrl: this.carouselList[0].image,
+			}
+		},
+		methods: {
+			// 改变页面滚动状态
+			pageChange(state) {
+				this.pageShow = state
+			},
+			// #ifdef H5
+			// 微信公众号初始化方法
+			initConfig() {
+				this.$util.request("main.WeChatConfig", {
+					url: location.href.split('#')[0]
+				}).then(res => {
+					if (res.code == 1) {
+						wx.config({
+							debug: false,
+							appId: res.data.appId,
+							timestamp: Number(res.data.timestamp),
+							nonceStr: res.data.nonceStr,
+							signature: res.data.signature,
+							jsApiList: ["updateAppMessageShareData", "updateTimelineShareData", "wx-open-launch-weapp"],
+							openTagList: ["updateAppMessageShareData", "updateTimelineShareData", 'wx-open-launch-weapp'],
+						})
+						wx.ready(() => {
+							wx.updateAppMessageShareData({
+								title: this.productInfo.name,
+								desc: "",
+								link: window.location.href,
+								imgUrl: this.carouselList[0].image,
+							});
+							wx.updateTimelineShareData({
+								title: this.productInfo.name,
+								link: window.location.href,
+								imgUrl: this.carouselList[0].image,
+							});
+						});
+					} else {
+						uni.hideLoading()
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					uni.hideLoading()
+					console.error('通过config接口注入权限验证配置 ', error)
+				})
+			},
+			// #endif
+			// 获取产品详情
+			getProductDetails(fn) {
+				this.$util.request("member.product.details", {
+					id: this.productId
+				}).then(res => {
+					if (fn) fn()
+					if (res.code == 1) {
+						this.productInfo = res.data
+						this.carouselList = this.splitImages(res.data.images)
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					if (fn) fn()
+					console.error('获取产品详情', error)
+				})
+			},
+			// 字符串转数组格式图片
+			splitImages(images) {
+				try {
+					if (images) return images.split(',');
+					else return []
+				} catch (error) {
+					return [];
+				}
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.container {
+		.container-main {
+			.main-info {
+				padding: 32rpx;
+				background: #FFF;
+
+				.info-title {
+					color: #5A5B6E;
+					font-size: 32rpx;
+					font-weight: 600;
+					line-height: 48rpx;
+				}
+			}
+
+			.main-content {
+				padding: 32rpx;
+				background: #FFF;
+				margin-top: 16rpx;
+
+				.content-title {
+					color: #5A5B6E;
+					font-size: 28rpx;
+					font-weight: 600;
+					line-height: 44rpx;
+					margin-bottom: 32rpx;
+				}
+			}
+		}
+	}
+</style>

pages/member/product/edit.vue

@@ -0,0 +1,492 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| 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="productId ? '修改产品' : '添加产品'"></title-bar>
+		<!-- 内容区 -->
+		<view class="container-main" v-if="loadEnd">
+			<!-- 表单 -->
+			<view class="main-form">
+				<!-- 产品图片 -->
+				<view class="form-item">
+					<view class="item-title required">
+						<text class="text">产品图片</text>
+						<text class="tips">（图片建议尺寸1:1）</text>
+					</view>
+					<view class="item-upload">
+						<view class="upload-image" v-for="(img, num) in selectImages" :key="num" @click="previewImage(num)">
+							<image class="image-select" :src="img" mode="aspectFill"></image>
+							<image class="image-delete" src="/static/delete.png" mode="aspectFit" @click.stop="deleteImage(num)"></image>
+						</view>
+						<view class="upload-image" v-if="selectImages.length < 9" @click="chooseImage()">
+							<view class="image-background"></view>
+							<view class="image-choose">
+								<view class="icon">
+									<image src="/static/camera.png" mode="aspectFit"></image>
+								</view>
+								<view class="text">上传图片</view>
+							</view>
+						</view>
+					</view>
+				</view>
+				<!-- 产品名称 -->
+				<view class="form-item">
+					<view class="item-title required">产品名称</view>
+					<view class="item-input">
+						<input class="input" type="text" v-model="formData.name" placeholder="请输入产品名称" placeholder-class="placeholder" />
+					</view>
+				</view>
+				<!-- 产品介绍 -->
+				<view class="form-item">
+					<view class="item-title">产品介绍</view>
+					<view class="item-input">
+						<sp-editor ref="spEditor" style="width: 100%;" :toolbar-config="toolbarConfig" @init="initEditor" @upinImage="upinImage" @overMax="overMax" @fullscreen="toEditor"></sp-editor>
+					</view>
+				</view>
+			</view>
+			<!-- 提交按钮 -->
+			<view class="main-footer">
+				<view class="footer-btn" @click="handleSubmit()">{{productId ? '修改' : '添加'}}</view>
+				<view class="safe-padding"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	export default {
+		data() {
+			return {
+				// 加载完成
+				loadEnd: false,
+				// 产品id
+				productId: null,
+				// 表单数据
+				formData: {
+					images: "",
+					name: "",
+					content: "",
+				},
+				// 已选择图片
+				selectImages: [],
+				// 编辑器实例
+				editorIns: null,
+				// 编辑器配置
+				toolbarConfig: {
+					excludeKeys: ['direction', 'date', 'lineHeight', 'letterSpacing', 'listCheck', 'export'],
+					iconSize: '18px',
+					showFullscreen: true,
+				},
+			};
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+			})
+		},
+		onLoad(option) {
+			if (option.id) {
+				this.productId = option.id
+				uni.showLoading({
+					title: "加载中"
+				})
+				this.getProductdDetails(() => {
+					uni.hideLoading()
+					this.loadEnd = true
+				})
+			} else {
+				this.loadEnd = true
+			}
+		},
+		onShow() {
+			let pages = getCurrentPages();
+			if (pages[pages.length - 1].$vm.editorContent) {
+				const result = pages[pages.length - 1].$vm.editorContent
+				this.editorIns.setContents({
+					html: result || ""
+				})
+				delete pages[pages.length - 1].$vm.editorContent;
+			}
+		},
+		methods: {
+			// 获取产品详情
+			getProductdDetails(fn) {
+				this.$util.request("member.product.editDetails", {
+					id: this.productId
+				}).then(res => {
+					if (fn) fn()
+					if (res.code == 1) {
+						this.formData = {
+							id: res.data.id,
+							images: res.data.images,
+							name: res.data.name,
+							content: res.data.content,
+						}
+						this.selectImages = this.splitImages(res.data.images)
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					if (fn) fn()
+					console.error('获取产品详情', error)
+				})
+			},
+			// 字符串转数组格式图片
+			splitImages(images) {
+				try {
+					if (images) return images.split(',');
+					else return []
+				} catch (error) {
+					return [];
+				}
+			},
+			// 选择图片
+			chooseImage() {
+				// #ifdef MP-WEIXIN
+				uni.chooseMedia({
+					count: 9 - this.selectImages.length,
+					mediaType: ['image'],
+					sourceType: ['album', 'camera'],
+					sizeType: ['compressed'],
+					success: (res) => {
+						this.selectImages = [...this.selectImages, ...res.tempFiles.map(item => item.tempFilePath)]
+					}
+				})
+				// #endif
+				// #ifndef MP-WEIXIN
+				uni.chooseImage({
+					count: 9 - this.selectImages.length,
+					sourceType: ['album', 'camera'],
+					sizeType: ['compressed'],
+					success: (res) => {
+						this.selectImages = [...this.selectImages, ...res.tempFilePaths]
+					}
+				});
+				// #endif
+			},
+			// 删除图片
+			deleteImage(index) {
+				this.$delete(this.selectImages, index)
+			},
+			// 预览图片
+			previewImage(index) {
+				uni.previewImage({
+					urls: this.selectImages,
+					current: index,
+				})
+			},
+			// 超出最大内容限制
+			overMax() {
+				uni.showToast({
+					title: "输入内容已超过最大字数限制"
+				})
+			},
+			// 初始化编辑器
+			initEditor(editor) {
+				this.editorIns = editor
+				this.editorIns.setContents({
+					html: this.formData.content || ""
+				})
+			},
+			// 上传图片
+			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)
+				})
+			},
+			// 跳转编辑器页面
+			async toEditor() {
+				uni.showLoading({
+					title: "加载中",
+					mask: true,
+				})
+				const introduction = await this.$refs.spEditor.getHtml()
+				this.$store.commit('app/setEditorContent', introduction)
+				uni.navigateTo({
+					url: "/pages/member/product/editor",
+					animationType: "fade-in",
+					complete: () => {
+						uni.hideLoading()
+					},
+				})
+			},
+			// 添加/修改产品
+			async handleSubmit() {
+				if (!this.selectImages.length) {
+					uni.showToast({
+						title: "请上传产品图片",
+						icon: 'none',
+						duration: 2000
+					})
+					return
+				}
+				if (!this.formData.name) {
+					uni.showToast({
+						title: "请输入产品名称",
+						icon: 'none',
+						duration: 2000
+					})
+					return
+				}
+				uni.showLoading({
+					title: "提交中",
+					mask: true
+				})
+				try {
+					this.formData.content = await this.$refs.spEditor.getHtml()
+				} catch (error) {
+					this.formData.content = ""
+				}
+				const oldImages = this.splitImages(this.formData.images)
+				this.$util.uploadFileMultiple(this.selectImages, oldImages).then(result => {
+					this.formData.images = result
+					this.submitEvent()
+				}).catch(error => {
+					uni.hideLoading()
+					console.error('上传图片 ', error)
+				})
+			},
+			// 提交事件
+			submitEvent() {
+				var url = ""
+				if (this.productId) url = "member.product.edit"
+				else url = "member.product.add"
+				this.$util.request(url, this.formData).then(res => {
+					uni.hideLoading()
+					if (res.code == 1) {
+						uni.redirectTo({
+							url: `/pages/member/product/success?type=${this.productId ? 2 : 1}`
+						})
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					uni.hideLoading()
+					console.error('添加/修改产品', error)
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.container {
+		.container-main {
+			padding-bottom: 112rpx;
+
+			.main-form {
+				padding: 32rpx 48rpx;
+
+				.form-item {
+					margin-top: 32rpx;
+
+					&:first-child {
+						margin-top: 0;
+					}
+
+					.item-title {
+						color: #5A5B6E;
+						font-size: 32rpx;
+						font-weight: 600;
+						line-height: 44rpx;
+
+						.tips {
+							font-size: 24rpx;
+							font-weight: 400;
+						}
+
+						&.required::before {
+							display: inline-block;
+							content: "*";
+							color: #E60012;
+							font-size: 32rpx;
+							font-weight: 600;
+							line-height: 44rpx;
+						}
+					}
+
+					.item-input {
+						margin-top: 32rpx;
+						display: flex;
+						align-items: center;
+						border-radius: 16rpx;
+						background: #ffffff;
+
+						.input {
+							color: #5A5B6E;
+							font-size: 28rpx;
+							height: 112rpx;
+							line-height: 112rpx;
+							flex: 1;
+							padding: 0 32rpx;
+						}
+
+						.textarea {
+							color: #5A5B6E;
+							font-size: 28rpx;
+							line-height: 40rpx;
+							flex: 1;
+							padding: 36rpx 32rpx;
+							width: 100%;
+							height: 240rpx;
+						}
+
+						.placeholder {
+							color: #ACADB7;
+						}
+
+						.icon {
+							width: 32rpx;
+							height: 32rpx;
+							padding-right: 32rpx;
+						}
+					}
+
+					.item-upload {
+						display: flex;
+						flex-wrap: wrap;
+						margin-top: 32rpx;
+						column-gap: 3.5%;
+						row-gap: 24rpx;
+
+						.upload-image {
+							position: relative;
+							width: 31%;
+							height: 0;
+							padding-top: 31%;
+
+							.image-select {
+								position: absolute;
+								top: 0;
+								left: 0;
+								right: 0;
+								bottom: 0;
+								border-radius: 10rpx;
+							}
+
+							.image-video {
+								position: absolute;
+								top: 0;
+								left: 0;
+								right: 0;
+								bottom: 0;
+								border-radius: 10rpx;
+								background: var(--theme-color);
+								padding: 56rpx;
+							}
+
+							.image-delete {
+								position: absolute;
+								top: -16rpx;
+								right: -16rpx;
+								width: 48rpx;
+								height: 48rpx;
+							}
+
+							.image-choose {
+								position: absolute;
+								top: 20rpx;
+								left: 20rpx;
+								right: 20rpx;
+								bottom: 20rpx;
+								z-index: 6;
+								display: flex;
+								flex-direction: column;
+								justify-content: center;
+								align-items: center;
+								background: #ffffff;
+								border-radius: 10rpx;
+
+								.icon {
+									width: 80rpx;
+									height: 80rpx;
+									padding: 18rpx;
+									background: var(--theme-color);
+									border-radius: 50%;
+								}
+
+								.text {
+									margin-top: 16rpx;
+									color: var(--theme-color);
+									font-size: 28rpx;
+									line-height: 40rpx;
+								}
+							}
+
+							.image-background {
+								position: absolute;
+								top: 0;
+								left: 0;
+								right: 0;
+								bottom: 0;
+								z-index: 1;
+								background: var(--theme-color);
+								opacity: 0.08;
+							}
+						}
+					}
+				}
+			}
+
+			.main-footer {
+				position: fixed;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				z-index: 99;
+				padding: 12rpx 32rpx;
+				background: #ffffff;
+				border-top: 1rpx solid #F6F7FB;
+
+				.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/product/editor.vue

@@ -0,0 +1,116 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| 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 = 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/product/success.vue

@@ -0,0 +1,108 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| 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="pageType == 2 ? '修改成功' : '添加成功'"></title-bar>
+		<!-- 内容区 -->
+		<view class="container-main">
+			<view class="main-image">
+				<image class="icon" src="/static/check.png" mode="aspectFit"></image>
+			</view>
+			<view class="main-title">{{pageType == 2 ? '修改成功' : '添加成功'}}</view>
+			<view class="main-subtitle">已成功{{pageType == 2 ? '修改' : '添加'}}产品，请前往列表查看</view>
+			<view class="main-btn" @click="goBack">返回列表</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	export default {
+		data() {
+			return {
+				// 页面类型
+				pageType: 1,
+			};
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+			})
+		},
+		onLoad(option) {
+			this.pageType = option.type || 1
+		},
+		methods: {
+			// 返回列表
+			goBack() {
+				if (getCurrentPages().length == 1) {
+					uni.switchTab({
+						url: "/pages/index/index"
+					})
+				} else {
+					uni.navigateBack()
+				}
+			},
+		}
+	}
+</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);
+			}
+		}
+	}
+</style>

pages/member/search/index.vue

@@ -0,0 +1,220 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| 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 title="会员搜索"></title-bar>
+		<!-- 内容区 -->
+		<view class="container-main" v-if="loadEnd">
+			<!-- 顶部搜索筛选区 -->
+			<view class="main-header flex align-items-center" :style="{top: titleBarHeight + 'px'}">
+				<view class="header-search flex-item flex align-items-center">
+					<image class="icon" src="/static/search.png" mode="aspectFit"></image>
+					<input class="input flex-item" type="text" confirm-type="search" @confirm="confirmSearch" placeholder="请输入姓名搜索" placeholder-class="placeholder" />
+				</view>
+				<view class="header-btn" @click="toBack()">取消</view>
+			</view>
+			<!-- 历史搜索 -->
+			<view class="main-history" v-if="recordList && recordList.length">
+				<view class="history-title flex justify-content-between align-items-center">
+					<view class="name">历史搜索</view>
+					<view class="clear flex align-items-center" @click="clearRecords">
+						<image src="/static/clear.png" mode="aspectFit"></image>
+						<text>清除记录</text>
+					</view>
+				</view>
+				<view class="history-cont flex flex-wrap">
+					<view class="item" v-for="(item,index) in recordList" :key="index" @click="doSearch(item)">
+						{{item}}
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 底部导航 -->
+		<tab-bar></tab-bar>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	export default {
+		data() {
+			return {
+				// 加载完成
+				loadEnd: false,
+				// 标题栏高度
+				titleBarHeight: 0,
+				// 搜索记录
+				recordList: [],
+			}
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+			})
+		},
+		onReady() {
+			this.loadEnd = true
+		},
+		onShow() {
+			this.recordList = uni.getStorageSync('memberHistory')
+		},
+		mounted() {
+			// #ifdef MP-WEIXIN
+			let statusBarHeight = uni.getSystemInfoSync().statusBarHeight
+			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
+			this.titleBarHeight = statusBarHeight + (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
+			// #endif
+		},
+		methods: {
+			// 返回
+			toBack() {
+				if (getCurrentPages().length == 1) {
+					this.$util.toPage({
+						mode: 3,
+						path: "/pages/member/index"
+					})
+				} else {
+					uni.navigateBack()
+				}
+			},
+			// 删除历史记录
+			clearRecords() {
+				uni.showModal({
+					title: "提示",
+					content: "是否删除全部历史记录？",
+					confirmText: "删除",
+					confirmColor: this.themeColor,
+					success: (res) => {
+						if (res.confirm) {
+							uni.removeStorageSync('memberHistory')
+							this.recordList = []
+						}
+					}
+				})
+			},
+			// 提交搜索
+			confirmSearch(e) {
+				this.doSearch(e.detail.value)
+			},
+			// 搜索
+			doSearch(keyword) {
+				if (!keyword) {
+					uni.showToast({
+						title: '请输入要搜索的内容',
+						icon: 'none'
+					})
+					return
+				}
+				var memberHistory = uni.getStorageSync('memberHistory') || []
+				if (!memberHistory.includes(keyword)) {
+					memberHistory.push(keyword)
+					uni.setStorageSync('memberHistory', memberHistory)
+				}
+				this.$util.toPage({
+					mode: 1,
+					path: `/pages/member/search/result?keyword=${encodeURIComponent(keyword)}`
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.container {
+		.container-main {
+			.main-header {
+				position: sticky;
+				top: 0;
+				z-index: 99;
+				padding: 20rpx 32rpx;
+				background: #fff;
+
+				.header-search {
+					padding: 20rpx 32rpx;
+					border-radius: 8rpx;
+					background: #F6F7FB;
+
+					.icon {
+						width: 40rpx;
+						height: 40rpx;
+					}
+
+					.input {
+						margin-left: 16rpx;
+						color: #333;
+						font-size: 26rpx;
+						line-height: 36rpx;
+					}
+
+					.placeholder {
+						color: #A0A2B3;
+						font-size: 26rpx;
+						line-height: 36rpx;
+					}
+				}
+
+				.header-btn {
+					color: var(--theme-color);
+					font-size: 28rpx;
+					line-height: 40rpx;
+					margin-left: 32rpx;
+				}
+			}
+
+			.main-history {
+				background: #fff;
+				padding: 32rpx;
+
+				.history-title {
+					.name {
+						color: #333;
+						font-size: 32rpx;
+						font-weight: 600;
+						line-height: 44rpx;
+					}
+
+					.clear {
+						image {
+							width: 36rpx;
+							height: 36rpx;
+						}
+
+						text {
+							margin-left: 8rpx;
+							font-size: 28rpx;
+							line-height: 40rpx;
+							color: #999999;
+						}
+					}
+				}
+
+				.history-cont {
+					margin-top: 16rpx;
+					margin-left: -16rpx;
+
+					.item {
+						margin-top: 16rpx;
+						margin-left: 16rpx;
+						font-size: 28rpx;
+						line-height: 40rpx;
+						color: #999999;
+						padding: 8rpx 16rpx;
+						background: rgba(6, 50, 119, 0.05);
+						border-radius: 10rpx;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/member/search/result.vue

@@ -0,0 +1,210 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| 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" v-if="loadEnd">
+			<member-item :show-data="dataList" v-if="dataList.length"></member-item>
+			<empty top="30%" title="暂无相关内容~" v-else></empty>
+		</view>
+	</view>
+</template>
+
+<script>
+	import memberItem from "@/pages/component/member/index.vue"
+	// #ifdef H5
+	import wx from 'weixin-js-sdk';
+	// #endif
+	export default {
+		components: {
+			memberItem,
+		},
+		data() {
+			return {
+				// 加载完成
+				loadEnd: false,
+				// 搜索关键词
+				keyword: "",
+				// 查询参数
+				page: 1,
+				limit: 20,
+				hasMore: false,
+				// 数据列表
+				dataList: [],
+				// 是否授权位置信息
+				isLocation: false,
+			}
+		},
+		onLoad(option) {
+			this.keyword = decodeURIComponent(option.keyword)
+			uni.showLoading({
+				title: "加载中"
+			})
+			// #ifdef H5
+			this.initConfig()
+			// #endif
+			this.getAuthSetting(() => {
+				uni.hideLoading()
+				this.loadEnd = true
+			})
+		},
+		onReachBottom() {
+			if (this.hasMore) {
+				this.page++
+				this.getList()
+			}
+		},
+		methods: {
+			// #ifdef H5
+			// 微信公众号初始化方法
+			initConfig() {
+				this.$util.request("main.WeChatConfig", {
+					url: location.href.split('#')[0]
+				}).then(res => {
+					if (res.code == 1) {
+						wx.config({
+							debug: false,
+							appId: res.data.appId,
+							timestamp: Number(res.data.timestamp),
+							nonceStr: res.data.nonceStr,
+							signature: res.data.signature,
+							jsApiList: ["getLocation"],
+						})
+					} else {
+						uni.hideLoading()
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					uni.hideLoading()
+					console.error('通过config接口注入权限验证配置 ', error)
+				})
+			},
+			// #endif
+			// 获取位置权限
+			getAuthSetting(fn) {
+				// #ifdef MP-WEIXIN
+				uni.getSetting({
+					success: (setting) => {
+						if (setting.authSetting && setting.authSetting.hasOwnProperty("scope.userLocation")) {
+							if (setting.authSetting["scope.userLocation"]) {
+								this.isLocation = true
+								this.getList(fn)
+							} else {
+								this.isLocation = false
+								this.getList(fn)
+							}
+						} else {
+							this.isLocation = false
+							this.getList(fn)
+						}
+					},
+					fail: () => {
+						this.isLocation = false
+						this.getList(fn)
+					}
+				})
+				// #endif
+				// #ifdef H5
+				this.isLocation = true
+				this.getList(fn)
+				// #endif
+			},
+			// 获取数据列表
+			getList(fn) {
+				this.getLocation((location) => {
+					let data = {
+						page: this.page,
+						limit: this.limit,
+						keywords: this.keyword
+					}
+					if (location && location.latitude && location.longitude) {
+						data.latitude = location.latitude
+						data.longitude = location.longitude
+					}
+					this.$util.request("member.list", data).then(res => {
+						if (fn) fn()
+						if (res.code == 1) {
+							let list = res.data.data
+							this.hasMore = this.page < res.data.total / this.limit ? true : false
+							this.dataList = this.page == 1 ? list : [...this.dataList, ...list];
+						} else {
+							uni.showToast({
+								title: res.msg,
+								icon: 'none'
+							})
+						}
+					}).catch(error => {
+						console.error('获取会员列表 ', error)
+					})
+				})
+			},
+			// 获取当前地址
+			getLocation(fn) {
+				// #ifdef MP-WEIXIN
+				if (!this.isLocation) {
+					fn()
+					return
+				}
+				uni.getLocation({
+					type: 'wgs84',
+					geocode: true,
+					success: (res) => {
+						fn({
+							latitude: res.latitude,
+							longitude: res.longitude,
+						})
+					},
+					fail: () => {
+						this.isLocation = false
+						fn()
+					}
+				});
+				// #endif
+				// #ifdef H5
+				wx.ready(() => {
+					wx.getLocation({
+						type: 'wgs84',
+						success: (res) => {
+							fn({
+								latitude: res.latitude,
+								longitude: res.longitude,
+							})
+						},
+						fail: () => {
+							this.isLocation = false
+							fn()
+						},
+						cancel: () => {
+							this.isLocation = false
+							fn()
+						}
+					});
+				})
+				// #endif
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.container {
+		.container-main {
+			padding: 32rpx;
+		}
+	}
+</style>

pages/member/units.vue

@@ -0,0 +1,165 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| 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 title="会员单位"></title-bar>
+		<!-- 内容区 -->
+		<view class="container-main" v-if="loadEnd">
+			<member-units :show-data="unitsList" v-if="unitsList.length"></member-units>
+			<empty top="64rpx" title="暂无相关会员单位~" v-else></empty>
+		</view>
+		<!-- 底部导航 -->
+		<tab-bar></tab-bar>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	import memberUnits from "@/pages/component/member/units.vue"
+	// #ifdef H5
+	import wx from 'weixin-js-sdk';
+	// #endif
+	export default {
+		components: {
+			memberUnits,
+		},
+		data() {
+			return {
+				// 加载完成
+				loadEnd: false,
+				// 分类查询参数
+				page: 1,
+				limit: 20,
+				hasMore: false,
+				// 会员单位列表
+				unitsList: [],
+			}
+		},
+		computed: {
+			...mapState({
+				shareImage: state => state.app.shareImage,
+				shareTitle: state => state.app.shareTitle,
+			})
+		},
+		onLoad() {
+			uni.showLoading({
+				title: "加载中"
+			})
+			this.getMemberUnits(() => {
+				uni.hideLoading()
+				this.loadEnd = true
+			})
+			// #ifdef H5
+			this.initConfig()
+			// #endif
+		},
+		onPullDownRefresh() {
+			this.page = 1
+			this.getMemberUnits(() => {
+				uni.stopPullDownRefresh()
+			})
+		},
+		onReachBottom() {
+			if (this.hasMore) {
+				this.page++
+				this.getMemberUnits()
+			}
+		},
+		onShareAppMessage() {
+			return {
+				title: this.shareTitle,
+				imageUrl: this.shareImage,
+			}
+		},
+		onShareTimeline() {
+			return {
+				title: this.shareTitle,
+				imageUrl: this.shareImage,
+			}
+		},
+		methods: {
+			// #ifdef H5
+			// 微信公众号初始化方法
+			initConfig() {
+				this.$util.request("main.WeChatConfig", {
+					url: location.href.split('#')[0]
+				}).then(res => {
+					if (res.code == 1) {
+						wx.config({
+							debug: false,
+							appId: res.data.appId,
+							timestamp: Number(res.data.timestamp),
+							nonceStr: res.data.nonceStr,
+							signature: res.data.signature,
+							jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
+							openTagList: ["updateAppMessageShareData", "updateTimelineShareData"],
+						})
+						wx.ready(() => {
+							wx.updateAppMessageShareData({
+								title: this.shareTitle,
+								desc: "",
+								link: window.location.href,
+								imgUrl: this.shareImage,
+							});
+							wx.updateTimelineShareData({
+								title: this.shareTitle,
+								link: window.location.href,
+								imgUrl: this.shareImage,
+							});
+						});
+					} else {
+						uni.hideLoading()
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					uni.hideLoading()
+					console.error('通过config接口注入权限验证配置 ', error)
+				})
+			},
+			// #endif
+			// 获取会员列表
+			getMemberUnits(fn) {
+				this.$util.request("member.units", {
+					page: this.page,
+					limit: this.limit
+				}).then(res => {
+					if (fn) fn()
+					if (res.code == 1) {
+						let list = res.data.data
+						this.hasMore = this.page < res.data.total / this.limit ? true : false
+						this.unitsList = this.page == 1 ? list : [...this.unitsList, ...list];
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取会员单位列表 ', error)
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.container {
+		.container-main {
+			padding: 32rpx;
+		}
+	}
+</style>