会员权益

pages/article/details.vue

@@ -0,0 +1,273 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| 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="pageTitle || '平台动态'"></title-bar>
+		<!-- 内容区 -->
+		<view class="container-main" v-if="loadEnd">
+			<view class="main-title">{{articleInfo.title}}</view>
+			<view class="main-tag flex justify-content-between align-items-center">
+				<view class="tag-item flex-item">
+					<text class="item-name" v-if="pageTitle!=='会员动态'">{{articleInfo.release}}</text>
+					<text class="item-time">{{articleInfo.createtime}}</text>
+				</view>
+				<!-- 小眼睛 -->
+				<view class="tag-item flex align-items-center" v-if="pageTitle!=='会员动态'">
+					<image class="item-icon" src="/static/see.png" mode="aspectFit"></image>
+					<text class="item-number">{{articleInfo.read_num}}</text>
+				</view>
+			</view>
+			<view class="main-content">
+				<mp-html :content="articleInfo.content"></mp-html>
+			</view>
+			<view class="main-annex">
+				<view class="annex-file" v-for="(item, index) in annexList" :key="index" @click="handleDownload(item.file, item.name)">
+					<view class="file-name text-ellipsis">{{item.name}}</view>
+					<view class="file-btn">下载附件</view>
+				</view>
+			</view>
+		</view>
+		<!-- 底部导航 -->
+		<tab-bar></tab-bar>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	// #ifdef H5
+	import wx from 'weixin-js-sdk';
+	// #endif
+	export default {
+		data() {
+			return {
+				// 加载完成
+				loadEnd: false,
+				// 页面标题
+				pageTitle: "",
+				// 新闻id
+				articleId: null,
+				// 新闻详情
+				articleInfo: {},
+				// 附件列表
+				annexList: [],
+				type:"",
+			}
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+				shareTitle: state => state.app.shareTitle,
+			})
+		},
+		onLoad(option) {
+			console.log(option,'==========option============')
+			this.articleId = option.id
+			console.log(this.articleId,'=this.articleId =')
+			if (option.title) this.pageTitle = decodeURIComponent(option.title)
+			uni.showLoading({
+				title: "加载中"
+			})
+			this.getArticle(() => {
+				this.loadEnd = true
+				uni.hideLoading()
+				// #ifdef H5
+				this.initConfig()
+				// #endif
+			})
+			// if(option.type) {
+			// 	this.type = option.type
+			// 	console.log(option.type,'==========type==========')
+			// }
+		},
+		onShareAppMessage() {
+			return {
+				title: this.articleInfo.title,
+				imageUrl: this.articleInfo.image,
+			}
+		},
+		onShareTimeline() {
+			return {
+				title: this.articleInfo.title,
+				imageUrl: this.articleInfo.image,
+			}
+		},
+		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.articleInfo.title,
+								imageUrl: this.articleInfo.image,
+								desc: "",
+								link: window.location.href,
+							});
+							wx.updateTimelineShareData({
+								title: this.articleInfo.title,
+								imageUrl: this.articleInfo.image,
+								link: window.location.href,
+							});
+						});
+					} else {
+						uni.hideLoading()
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					uni.hideLoading()
+					console.error('通过config接口注入权限验证配置 ', error)
+				})
+			},
+			// #endif
+			// 获取文章详情
+			getArticle(fn) {
+				this.$util.request("main.article.details", {
+					id: this.articleId
+				}).then(res => {
+					if (fn) fn()
+					if (res.code == 1) {
+						this.articleInfo = res.data
+						this.annexList = res.data?.files || []
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					if (fn) fn()
+					console.error('获取文章详情 ', error)
+				})
+			},
+			// 下载附件
+			handleDownload(file, name) {
+				if (file) {
+					uni.showLoading({
+						mask: true,
+						title: '加载中',
+					})
+					this.$util.downloadFile(file, 2, name).then(() => {
+						uni.hideLoading()
+					}).catch((error) => {
+						uni.hideLoading()
+						uni.showToast({
+							icon: 'none',
+							title: error?.errMsg || '附件下载失败',
+						})
+					})
+				} else {
+					uni.showToast({
+						icon: 'none',
+						title: '暂无可下载附件',
+					})
+				}
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		background: #ffffff;
+	}
+
+	.container {
+		.container-main {
+			padding: 32rpx;
+
+			.main-title {
+				font-weight: 600;
+				font-size: 36rpx;
+				line-height: 60rpx;
+				color: #5A5B6E;
+			}
+
+			.main-tag {
+				margin-top: 16rpx;
+
+				.tag-item {
+					.item-name {
+						color: var(--theme-color);
+						font-size: 28rpx;
+						line-height: 40rpx;
+					}
+
+					.item-time {
+						font-size: 28rpx;
+						line-height: 40rpx;
+						color: #8D929C;
+						margin-left: 16rpx;
+					}
+
+					.item-icon {
+						width: 32rpx;
+						height: 32rpx;
+						margin-left: 16rpx;
+					}
+
+					.item-number {
+						margin-left: 8rpx;
+						font-size: 28rpx;
+						line-height: 40rpx;
+						color: #8D929C;
+					}
+				}
+			}
+
+			.main-content {
+				margin-top: 32rpx;
+			}
+
+			.main-annex {
+				.annex-file {
+					margin-top: 32rpx;
+					display: flex;
+					align-items: center;
+					column-gap: 32rpx;
+					border-radius: 16rpx;
+					border: 2rpx dashed var(--theme-color);
+					padding: 24rpx 32rpx;
+
+					.file-name {
+						flex: 1;
+						color: var(--theme-color);
+						font-size: 28rpx;
+						line-height: 44rpx;
+					}
+
+					.file-btn {
+						color: var(--theme-color);
+						font-size: 28rpx;
+						line-height: 44rpx;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/article/index.vue

@@ -0,0 +1,271 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| 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="getPageTitle()"></title-bar>
+		<!-- 内容区 -->
+		<view class="container-main" v-if="loadEnd">
+			<!-- 顶部导航 -->
+			<scroll-view scroll-x class="main-screen" :style="{top: titleBarHeight + 'px'}" v-if="showScreen && screenList.length">
+				<view class="screen-item" @click="changeScreen(0)">
+					<view class="text" :class="{active: selectScreen == 0}">全部</view>
+				</view>
+				<view class="screen-item" v-for="item in screenList" :key="item.id" @click="changeScreen(item.id)">
+					<view class="text" :class="{active: selectScreen == item.id}">{{item.name}}</view>
+				</view>
+			</scroll-view>
+			<!-- 新闻列表 -->
+			<view class="main-list">
+				<article-item :show-data="articleList" :show-title="getPageTitle()" v-if="articleList.length"></article-item>
+				<empty top="30%" title="暂无相关内容~" v-else></empty>
+			</view>
+		</view>
+		<!-- 底部导航 -->
+		<tab-bar></tab-bar>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	import articleItem from "@/pages/component/article/index.vue"
+	// #ifdef H5
+	import wx from 'weixin-js-sdk';
+	// #endif
+	export default {
+		components: {
+			articleItem,
+		},
+		data() {
+			return {
+				// 加载完成
+				loadEnd: false,
+				// 标题栏高度
+				titleBarHeight: 0,
+				// 是否显示分类筛选
+				showScreen: true,
+				// 分类列表
+				screenList: [],
+				// 已选分类
+				selectScreen: 0,
+				// 页面标题
+				pageTitle: "",
+				// 新闻列表
+				articleList: [],
+				// 分类查询参数
+				page: 1,
+				limit: 20,
+				hasMore: false,
+			}
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+				shareImage: state => state.app.shareImage,
+				shareTitle: state => state.app.shareTitle,
+			})
+		},
+		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) {
+			uni.showLoading({
+				title: "加载中"
+			})
+			if (option.id) {
+				this.selectScreen = option.id
+				this.showScreen = false
+			} else {
+				this.showScreen = true
+			}
+			this.getArticleCategory()
+			if (option.title) this.pageTitle = decodeURIComponent(option.title)
+			this.getArticleList(() => {
+				uni.hideLoading()
+				this.loadEnd = true
+			})
+			// #ifdef H5
+			this.initConfig()
+			// #endif
+		},
+		onPullDownRefresh() {
+			this.page = 1
+			this.getArticleList(() => {
+				uni.stopPullDownRefresh()
+			})
+		},
+		onReachBottom() {
+			if (this.hasMore) {
+				this.page++
+				this.getArticleList()
+			}
+		},
+		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
+			// 获取页面标题
+			getPageTitle() {
+				if (this.pageTitle) {
+					return this.pageTitle || "平台动态"
+				} else {
+					var pageTitle = "平台动态"
+					if (this.selectScreen) {
+						const index = this.screenList.findIndex(item => item.id == this.selectScreen)
+						if (index > -1) pageTitle = this.screenList[index].name
+					}
+					return pageTitle
+				}
+			},
+			// 获取文章分类
+			getArticleCategory() {
+				this.$util.request("main.article.category").then(res => {
+					if (res.code == 1) {
+						this.screenList = res.data
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取文章列表 ', error)
+				})
+			},
+			// 获取文章列表
+			getArticleList(fn) {
+				let data = {
+					page: this.page,
+					limit: this.limit,
+				}
+				if (this.selectScreen) data.cat_id = this.selectScreen
+				this.$util.request("main.article.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.articleList = this.page == 1 ? list : [...this.articleList, ...list];
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					if (fn) fn()
+					console.error('获取文章列表 ', error)
+				})
+			},
+			// 更改分类
+			changeScreen(id) {
+				this.selectScreen = id
+				this.page = 1
+				this.getArticleList()
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.container {
+		.container-main {
+			.main-screen {
+				white-space: nowrap;
+				background: #ffffff;
+				position: sticky;
+				top: 0;
+				z-index: 99;
+
+				.screen-item {
+					padding: 0 24rpx;
+					display: inline-flex;
+					justify-content: center;
+					min-width: 25%;
+
+					.text {
+						padding: 36rpx 0;
+						color: #5A5B6E;
+						font-size: 28rpx;
+						line-height: 40rpx;
+						text-align: center;
+						border-bottom: 4rpx solid transparent;
+
+						&.active {
+							color: var(--theme-color);
+							border-color: var(--theme-color);
+						}
+					}
+				}
+			}
+
+			.main-list {
+				padding: 32rpx;
+			}
+		}
+	}
+</style>

pages/component/activity/apply.vue

@@ -0,0 +1,537 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-活动报名 开发者: 麦沃德科技-半夏
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="component-activity-apply">
+		<!-- 表单数据 -->
+		<form class="apply-form">
+			<view class="form-item" v-for="(item, index) in applyField" :key="index">
+				<!-- 标题 -->
+				<view class="item-title">
+					<text class="required" v-if="item.required == 1">*</text>
+					<text class="text">{{item.label}}</text>
+					<text class="tips" v-if="item.type == 'image' || item.type == 'video'">（{{item.option}}）</text>
+				</view>
+				<!-- 文本字段 -->
+				<block v-if="item.type == 'text'">
+					<view class="item-input" :class="{disabled: item.disabled}">
+						<input class="input" :disabled="item.disabled" type="text" v-model="item.value" :placeholder="item.option" placeholder-class="placeholder" />
+					</view>
+				</block>
+				<!-- 数字字段 -->
+				<block v-else-if="item.type == 'number'">
+					<view class="item-input" :class="{disabled: item.disabled}">
+						<input class="input" :disabled="item.disabled" type="number" :maxlength="item.field == 'mobile' ? 11 : -1" v-model="item.value" :placeholder="item.option" placeholder-class="placeholder" />
+					</view>
+				</block>
+				<!-- 单选按钮 -->
+				<block v-else-if="item.type == 'radio'">
+					<view class="item-radio">
+						<view class="radio" :class="{active: item.value == option}" v-for="(option, num) in getOption(item.option)" :key="num" @click="selectRadio(index, option)">
+							<image src="/static/select.png" mode="aspectFit"></image>
+							<text>{{option}}</text>
+						</view>
+					</view>
+				</block>
+				<!-- 复选按钮 -->
+				<block v-else-if="item.type == 'checkbox'">
+					<view class="item-radio">
+						<view class="radio" :class="{active: item.value.includes(option)}" v-for="(option, num) in getOption(item.option)" :key="num" @click="selectCheckbox(index, option)">
+							<image src="/static/select.png" mode="aspectFit"></image>
+							<text>{{option}}</text>
+						</view>
+					</view>
+				</block>
+				<!-- 下拉列表 -->
+				<block v-else-if="item.type == 'select'">
+					<view class="item-input" @click="openSelectPicker(index)">
+						<view class="input text-ellipsis" v-if="item.value">{{item.value}}</view>
+						<view class="input placeholder text-ellipsis" v-else>请选择{{item.label}}</view>
+						<image class="icon" src="/static/del.png" mode="aspectFit" v-if="item.value" @click.stop="clearValue(index)"></image>
+						<image class="icon" src="/static/right.png" mode="aspectFit" v-else></image>
+					</view>
+				</block>
+				<!-- 日期字段 -->
+				<block v-else-if="item.type == 'date'">
+					<view class="item-input" @click="openDatePicker(index)">
+						<view class="input text-ellipsis" v-if="item.value">{{item.value}}</view>
+						<view class="input placeholder text-ellipsis" v-else>请选择{{item.label}}</view>
+						<image class="icon" src="/static/del.png" mode="aspectFit" v-if="item.value" @click.stop="clearValue(index)"></image>
+						<image class="icon" src="/static/date.png" mode="aspectFit" v-else></image>
+					</view>
+				</block>
+				<!-- 时间字段 -->
+				<block v-else-if="item.type == 'time'">
+					<view class="item-input" @click="openTimePicker(index)">
+						<view class="input text-ellipsis" v-if="item.value">{{item.value}}</view>
+						<view class="input placeholder text-ellipsis" v-else>请选择{{item.label}}</view>
+						<image class="icon" src="/static/del.png" mode="aspectFit" v-if="item.value" @click.stop="clearValue(index)"></image>
+						<image class="icon" src="/static/time.png" mode="aspectFit" v-else></image>
+					</view>
+				</block>
+				<!-- 日期时间 -->
+				<block v-else-if="item.type == 'datetime'">
+					<uni-datetime-picker v-model="item.value" :is-meeting="true" @show="pageChange(true)" @maskClick="pageChange(false)" @change="pageChange(false)">
+						<view class="item-input">
+							<view class="input text-ellipsis" v-if="item.value">{{item.value}}</view>
+							<view class="input placeholder text-ellipsis" v-else>请选择{{item.label}}</view>
+							<image class="icon" src="/static/del.png" mode="aspectFit" v-if="item.value" @click.stop="clearValue(index)"></image>
+							<image class="icon" src="/static/date.png" mode="aspectFit" v-else></image>
+						</view>
+					</uni-datetime-picker>
+				</block>
+				<!-- 文本域 -->
+				<block v-else-if="item.type == 'textarea'">
+					<view class="item-input">
+						<textarea class="textarea" type="text" maxlength="-1" v-model="item.value" :placeholder="'请输入' + item.label" placeholder-class="placeholder" />
+					</view>
+				</block>
+				<!-- 图片上传 -->
+				<block v-else-if="item.type == 'image'">
+					<view class="item-upload">
+						<view class="upload-image" v-if="item.value && item.value.length > 0" v-for="(img, num) in item.value" :key="num" @click="previewImage(index, num)">
+							<image class="image-select" :src="img" mode="aspectFill"></image>
+							<image class="image-delete" src="/static/delete.png" mode="aspectFit" @click.stop="deleteImage(index, num)"></image>
+						</view>
+						<view class="upload-image" v-if="!item.value || item.value.length < 9" @click="chooseImage(index, 9)">
+							<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>
+				</block>
+				<!-- 视频上传 -->
+				<block v-else-if="item.type == 'video'">
+					<view class="item-upload">
+						<view class="upload-image" v-if="item.value">
+							<view class="image-video">
+								<image class="video" src="/static/video.png" mode="aspectFill"></image>
+							</view>
+							<image class="image-delete" src="/static/delete.png" mode="aspectFit" @click="deleteVideo(index)"></image>
+						</view>
+						<view class="upload-image" v-else @click="chooseVideo(index)">
+							<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>
+				</block>
+				<!-- 地图选址 -->
+				<block v-else-if="item.type == 'map'">
+					<view class="item-input" @click="chooseLocation(index)">
+						<view class="input text-ellipsis" v-if="item.value.address">{{item.value.address}}</view>
+						<view class="input placeholder text-ellipsis" v-else>请选择{{item.label}}</view>
+						<image class="icon" src="/static/del.png" mode="aspectFit" v-if="item.value.address" @click.stop="clearLocation(index)"></image>
+						<image class="icon" src="/static/right.png" mode="aspectFit" v-else></image>
+					</view>
+				</block>
+			</view>
+		</form>
+		<!-- 单项选择框 -->
+		<select-picker ref="selectPicker" :is-meeting="true" :title="selectTitle" @onChange="pageChange" @confirm="changeSelectPicker"></select-picker>
+		<!-- 日期选择框 -->
+		<date-picker ref="datePicker" :is-meeting="true" @onChange="pageChange" @confirm="changeDatePicker"></date-picker>
+		<!-- 时间选择框 -->
+		<time-picker ref="timePicker" :is-meeting="true" @onChange="pageChange" @confirm="changeTimePicker"></time-picker>
+	</view>
+</template>
+
+<script>
+	import selectPicker from "@/pages/component/picker/select.vue"
+	import datePicker from "@/pages/component/picker/date.vue"
+	import timePicker from "@/pages/component/picker/time.vue"
+	export default {
+		name: "activityApply",
+		props: ["showData"],
+		components: {
+			selectPicker,
+			datePicker,
+			timePicker,
+		},
+		data() {
+			return {
+				// 入会字段
+				applyField: [],
+				// 会员级别
+				levelList: [],
+				// 行业分类
+				industryList: [],
+				// 单选标题
+				selectTitle: "",
+			}
+		},
+		watch: {
+			showData: {
+				handler(value) {
+					this.applyField = value || [];
+				},
+				immediate: true,
+				deep: true
+			}
+		},
+		methods: {
+			// 改变页面滚动状态
+			pageChange(state) {
+				this.$emit("onChange", state)
+			},
+			// 获取选项数据
+			getOption(option) {
+				return option.split(",")
+			},
+			// 选择单选
+			selectRadio(index, option) {
+				if (this.applyField[index].value == option) {
+					this.applyField[index].value = ""
+				} else {
+					this.applyField[index].value = option
+				}
+			},
+			// 选择复选
+			selectCheckbox(index, option) {
+				if (this.applyField[index].value.includes(option)) {
+					this.$delete(this.applyField[index].value, this.applyField[index].value.indexOf(option))
+				} else {
+					this.applyField[index].value.push(option)
+				}
+			},
+			// 选择图片
+			chooseImage(index, limit = 9) {
+				// #ifdef MP-WEIXIN
+				uni.chooseMedia({
+					count: Number(limit) > 1 ? (limit - this.applyField[index].value.length) : 1,
+					mediaType: ['image'],
+					sourceType: ['album', 'camera'],
+					sizeType: ['compressed'],
+					success: (res) => {
+						let list = res.tempFiles.map(item => item.tempFilePath)
+						this.applyField[index].value = [...this.applyField[index].value, ...list]
+					}
+				})
+				// #endif
+				// #ifndef MP-WEIXIN
+				uni.chooseImage({
+					count: Number(limit) > 1 ? (limit - this.applyField[index].value.length) : 1,
+					sourceType: ['album', 'camera '],
+					sizeType: ['compressed'],
+					success: (res) => {
+						let list = res.tempFilePaths
+						this.applyField[index].value = [...this.applyField[index].value, ...list]
+					}
+				});
+				// #endif
+			},
+			// 删除图片
+			deleteImage(i, j) {
+				this.$delete(this.applyField[i].value, j)
+			},
+			// 预览图片
+			previewImage(i, j = 0) {
+				let list = this.applyField[i].value
+				uni.previewImage({
+					urls: list,
+					current: j
+				});
+			},
+			// 选择视频
+			chooseVideo(index) {
+				// #ifdef MP-WEIXIN
+				uni.chooseMedia({
+					count: 1,
+					mediaType: ['video'],
+					sourceType: ['album', 'camera'],
+					success: (res) => {
+						this.applyField[index].value = res.tempFiles[0].tempFilePath
+					}
+				})
+				// #endif
+				// #ifndef MP-WEIXIN
+				uni.chooseVideo({
+					sourceType: ['camera', 'album'],
+					success: (res) => {
+						this.applyField[index].value = res.tempFilePath;
+					}
+				});
+				// #endif
+			},
+			// 删除视频
+			deleteVideo(index) {
+				this.applyField[index].value = ""
+			},
+			// 选择下拉选项
+			openSelectPicker(index) {
+				if (this.applyField[index].disabled) return
+				this.selectTitle = this.applyField[index].label
+				let list = this.applyField[index].option.split(",")
+				this.$refs.selectPicker.open(list, this.applyField[index].value, index)
+			},
+			// 改变下拉选项
+			changeSelectPicker(value, index) {
+				this.applyField[index].value = value
+			},
+			// 选择日期
+			openDatePicker(index) {
+				this.$refs.datePicker.open(this.applyField[index].value, index)
+			},
+			// 改变日期
+			changeDatePicker(value, index) {
+				this.applyField[index].value = value
+			},
+			// 选择时间
+			openTimePicker(index) {
+				this.$refs.timePicker.open(this.applyField[index].value, index)
+			},
+			// 改变时间
+			changeTimePicker(value, index) {
+				this.applyField[index].value = value
+			},
+			// 清空已选数据
+			clearValue(index) {
+				this.applyField[index].value = ""
+			},
+			// 地址选择
+			chooseLocation(index) {
+				uni.chooseLocation({
+					success: (res) => {
+						this.applyField[index].value = {
+							latitude: res.latitude,
+							longitude: res.longitude,
+							name: res.name,
+							address: res.address
+						}
+					}
+				})
+			},
+			// 清空地址
+			clearLocation(index) {
+				this.applyField[index].value = {
+					latitude: "",
+					longitude: "",
+					name: "",
+					address: "",
+				}
+			},
+			// 获取表单数据
+			getApplyField(fn) {
+				fn(JSON.parse(JSON.stringify(this.applyField)))
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.component-activity-apply {
+		.apply-form {
+			.form-item {
+				margin-top: 32rpx;
+
+				&:first-child {
+					margin-top: 0;
+				}
+
+				.item-title {
+					color: #5A5B6E;
+					font-size: 32rpx;
+					font-weight: 600;
+					line-height: 44rpx;
+
+					.required {
+						color: #E60012;
+					}
+
+					.tips {
+						font-size: 28rpx;
+						font-weight: 400;
+						color: #666666;
+					}
+				}
+
+				.item-input {
+					margin-top: 32rpx;
+					display: flex;
+					align-items: center;
+					border-radius: 16rpx;
+					background: #FFF;
+
+					&.disabled {
+						.input {
+							color: #8D929C;
+						}
+					}
+
+					.input {
+						color: #5A5B6E;
+						font-size: 28rpx;
+						height: 104rpx;
+						line-height: 104rpx;
+						flex: 1;
+						padding: 0 32rpx;
+					}
+
+					.textarea {
+						color: #5A5B6E;
+						font-size: 28rpx;
+						line-height: 40rpx;
+						flex: 1;
+						padding: 32rpx;
+						height: 200rpx;
+					}
+
+					.placeholder {
+						color: #8D929C;
+						font-size: 28rpx;
+						line-height: 104rpx;
+					}
+
+					.icon {
+						width: 32rpx;
+						height: 32rpx;
+						padding-right: 32rpx;
+					}
+				}
+
+				.item-radio {
+					display: flex;
+					flex-wrap: wrap;
+					margin-left: -26rpx;
+					padding-top: 8rpx;
+
+					.radio {
+						border-radius: 8rpx;
+						background: #FFF;
+						padding: 16rpx;
+						margin-left: 26rpx;
+						margin-top: 24rpx;
+						display: flex;
+						align-items: center;
+
+						image {
+							width: 24rpx;
+							height: 24rpx;
+							margin-right: 8rpx;
+							display: none;
+						}
+
+						text {
+							color: #8D929C;
+							font-size: 24rpx;
+							line-height: 34rpx;
+						}
+
+						&.active {
+							background: var(--theme-color);
+
+							image {
+								display: block;
+							}
+
+							text {
+								color: #ffffff;
+							}
+						}
+					}
+				}
+
+				.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;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

pages/component/activity/certificate.vue

@@ -0,0 +1,295 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.maiwd.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-参会证书 开发者: 麦沃德科技-半夏
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="component-activity-certificate">
+		<!-- 参会证书 -->
+		<canvas class="poster-canvas" :style="{width: posterWidth + 'px', height: posterHeight + 'px'}" canvas-id="myCanvas" id="myCanvas"></canvas>
+		<!-- 参会证书模态框 -->
+		<uni-popup ref="popupModal" type="center" @change="onChange">
+			<view class="poster-popup flex-direction-column align-items-center" :style="{'--theme-color': themeColor, paddingTop: titleBarHeight + 'px'}">
+				<view class="popup-close" @click="onClose()">
+					<image class="icon" src="/static/closePopup.png" mode="aspectFit"></image>
+				</view>
+				<scroll-view scroll-y class="popup-content flex justify-content-center">
+					<image class="image" :src="posterPath" mode="widthFix"></image>
+				</scroll-view>
+				<!-- #ifdef MP-WEIXIN -->
+				<view class="popup-btn" @click="saveImage">保存相册</view>
+				<!-- #endif -->
+				<!-- #ifdef H5 -->
+				<view class="popup-btn">长按图片保存相册</view>
+				<!-- #endif -->
+			</view>
+		</uni-popup>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	import { loadImage, createPoster, canvasToTempFilePath } from "@/common/poster.js";
+	export default {
+		name: "activityCertificate",
+		data() {
+			return {
+				// 标题栏高度
+				titleBarHeight: 0,
+				// 参会证书数据
+				posterInfo: {},
+				// 参会证书宽度
+				posterWidth: 0,
+				// 参会证书高度
+				posterHeight: 0,
+				// 图片资源是否准备完成
+				posterReady: false,
+				// 参会证书背景图片
+				posterBackground: "",
+				// 参会证书图片路径
+				posterPath: "",
+			}
+		},
+		computed: {
+			...mapState({
+				themeColor: state => 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
+		},
+		methods: {
+			// 获取参会证书
+			getPoster(activityId, applyId) {
+				uni.showLoading({
+					title: "加载中",
+					mask: true
+				})
+				this.$util.request("activity.certificate", {
+					id: activityId,
+					apply_id: applyId,
+				}).then(res => {
+					if (res.code == 1) {
+						this.posterInfo = res.data
+						this.posterWidth = res.data.data.bg.width
+						this.posterHeight = res.data.data.bg.height
+						this.$nextTick(() => {
+							this.showNucleus()
+						})
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取参会证书 ', error)
+				})
+			},
+			// 获取图片资源
+			async showNucleus() {
+				this.loadingResources().then((state) => {
+					// 状态为 true 表示加载完成
+					if (state) {
+						this.posterReady = true
+						this.createImage()
+					}
+				});
+			},
+			// 加载图片资源
+			async loadingResources() {
+				this.posterBackground = await loadImage(this.posterInfo.data.bg.img);
+				return true;
+			},
+			// 生成参会证书
+			async createImage() {
+				if (!this.posterReady) {
+					uni.hideLoading()
+					uni.showToast({
+						title: '参会证书图片资源加载失败',
+						icon: 'none'
+					})
+					return
+				};
+				// 获取上下文对象
+				const ctx = uni.createCanvasContext("myCanvas", this);
+				// 创建参会证书
+				let posterData = [{
+					type: "image",
+					url: this.posterBackground,
+					config: {
+						x: 0,
+						y: 0,
+						w: parseFloat(this.posterWidth),
+						h: parseFloat(this.posterHeight),
+					},
+				}]
+				this.posterInfo.data.data.forEach((item) => {
+					if (item.type == "text") {
+						let content = ""
+						if (item.item == "activity_name") content = this.posterInfo.activity_name || ""
+						else if (item.item == "name") content = this.posterInfo.participant || ""
+						else if (item.item == "time") content = this.posterInfo.time || ""
+						let itemX = 0
+						if (item.textAlign == "center") itemX = parseFloat(item.left) + parseFloat(item.width) / 2
+						else if (item.textAlign == "right") itemX = parseFloat(item.left) + parseFloat(item.width)
+						else itemX = parseFloat(item.left)
+						let itemFont = "10px sans-serif"
+						if (item.fontStyle == 2) {
+							itemFont = `italic ${item.size} sans-serif`
+						} else if (item.fontStyle == 3) {
+							itemFont = `bold ${item.size} sans-serif`
+						} else if (item.fontStyle == 4) {
+							itemFont = `italic bold ${item.size} sans-serif`
+						} else {
+							itemFont = `${item.size} sans-serif`
+						}
+						posterData.push({
+							type: "text",
+							text: content || "",
+							config: {
+								x: itemX,
+								y: parseFloat(item.top),
+								color: item.color,
+								font: itemFont,
+								textAlign: item.textAlign,
+								maxWidth: parseFloat(item.width),
+								lineHeight: parseInt(item.height),
+								isVerticalCenter: true
+							},
+						})
+					}
+				})
+				await createPoster(ctx, posterData)
+				const imagePath = await canvasToTempFilePath("myCanvas", this);
+				this.posterPath = imagePath;
+				this.$refs.popupModal.open()
+				uni.hideLoading()
+			},
+			// 保存参会证书
+			saveImage() {
+				uni.authorize({
+					scope: 'scope.writePhotosAlbum',
+					success: () => {
+						uni.getImageInfo({
+							src: this.posterPath,
+							success: (img) => {
+								uni.saveImageToPhotosAlbum({
+									filePath: img.path,
+									success: () => {
+										uni.showToast({
+											title: "保存成功",
+											icon: "success",
+										});
+									},
+									fail: (err) => {
+										console.error(err);
+									},
+								});
+							},
+							fail: (err) => {
+								console.error(err)
+							}
+						});
+					},
+					fail: () => {
+						uni.showModal({
+							title: '图片保存失败',
+							content: '请确认是否已开启授权',
+							confirmText: '开启授权',
+							confirmColor: this.themeColor,
+							success: (res) => {
+								if (res.confirm) {
+									uni.openSetting({
+										success: (setting) => {
+											if (setting.authSetting["scope.writePhotosAlbum"]) {
+												uni.showToast({
+													title: '授权成功，请重新保存',
+													icon: "none"
+												});
+											} else {
+												uni.showToast({
+													title: '请确定已打开保存权限',
+													icon: "none"
+												});
+											}
+										}
+									})
+								}
+							}
+						})
+					}
+				})
+			},
+			// 关闭弹窗
+			onClose() {
+				this.$refs.popupModal.close()
+			},
+			// 改变页面滚动状态
+			onChange(e) {
+				this.$emit("onChange", e.show)
+			},
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.component-activity-certificate {
+		position: relative;
+		z-index: 999;
+
+		.poster-canvas {
+			position: fixed;
+			top: 100vw;
+			left: 100vh;
+			z-index: -1;
+		}
+
+		.poster-popup {
+			.popup-close {
+				width: 100%;
+				margin-top: -112rpx;
+				margin-bottom: 32rpx;
+				display: flex;
+				justify-content: flex-end;
+
+				.icon {
+					width: 80rpx;
+					height: 80rpx;
+				}
+			}
+
+			.popup-content {
+				max-height: 55vh;
+
+				.image {
+					width: 92vw;
+					height: auto;
+				}
+			}
+
+			.popup-btn {
+				margin-top: 32rpx;
+				width: 336rpx;
+				font-size: 28rpx;
+				line-height: 40rpx;
+				padding: 26rpx 32rpx;
+				border-radius: 16rpx;
+				color: #FFFFFF;
+				background: var(--theme-color);
+				text-align: center;
+			}
+		}
+	}
+</style>

pages/component/activity/index.vue

@@ -0,0 +1,686 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-活动列表 开发者: 麦沃德科技-半夏 
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="component-activity" :style="{'--theme-color': themeColor}">
+		<view class="activity-item" :class="{special: showType == 1}" v-for="item in showData" :key="item.id" @click="toDetails(item)">
+			<view class="item-header flex justify-content-between align-items-center" v-if="showType == 2">
+				<view class="header-number">订单号：{{item.order_no}}</view>
+				<view class="header-status">
+					<text style="color: #FF626E;" v-if="item.pay_state == 1">待付款</text>
+					<block v-else-if="item.pay_state == 2">
+						<text style="color: #FF9100;" v-if="item.activity_state == 1">报名中</text>
+						<text v-else-if="item.activity_state == 2">进行中</text>
+						<text style="color: #666666;" v-else-if="item.activity_state == 3">已结束</text>
+					</block>
+					<text style="color: #FF9100;" v-else-if="item.pay_state == 3">退款中</text>
+					<text style="color: #666666;" v-else-if="item.pay_state == 4">已退款</text>
+					<text style="color: #FF626E;" v-else-if="item.pay_state == 5">已驳回</text>
+				</view>
+			</view>
+			<view class="item-info flex">
+				<image class="info-image" :src="item.images" mode="aspectFill"></image>
+				<view class="info-box flex-item">
+					<view class="box-title text-ellipsis">{{item.name}}</view>
+					<view class="box-tag flex align-items-center">
+						<view class="icon" :style="{'background-image': 'url('+ iconTime +')'}" v-if="iconTime"></view>
+						<text class="text flex-item text-ellipsis">{{item.start_time}} | {{item.week}}</text>
+					</view>
+					<view class="box-tag flex align-items-center" v-if="item.organizing_method == 1">
+						<view class="icon" :style="{'background-image': 'url('+ iconNetwork +')'}" v-if="iconNetwork"></view>
+						<text class="text flex-item text-ellipsis">报名成功后查看</text>
+					</view>
+					<view class="box-tag flex align-items-center" v-else-if="item.organizing_method == 2">
+						<view class="icon" :style="{'background-image': 'url('+ iconLocation +')'}" v-if="iconLocation"></view>
+						<text class="text flex-item text-ellipsis">{{item.address}}</text>
+					</view>
+				</view>
+			</view>
+			<view class="item-footer flex align-items-center" v-if="showType == 2">
+				<view class="footer-label">
+					<text v-if="item.organizing_method == 1">线上活动</text>
+					<text v-else-if="item.organizing_method == 2">线下活动</text>
+				</view>
+				<view class="footer-price flex-item">
+					<block v-if="item.fees > 0">
+						<text>￥</text>{{item.fees}}
+					</block>
+					<block v-else>免费</block>
+				</view>
+				<view class="footer-btn flex">
+					<!-- 报名中 -->
+					<block v-if="item.activity_state == 1">
+						<!-- 待付款 -->
+						<block v-if="item.pay_state == 1">
+							<view class="btn" style="background: #FF626E;" @click.stop="toCancel(item.id)">取消参加</view>
+							<view class="btn" @click.stop="toPayment(item.activity_id)">去支付</view>
+						</block>
+						<!-- 已付款 -->
+						<block v-else-if="item.pay_state == 2">
+							<view style="background: #FF626E;" class="btn" @click.stop="handleCancel(item.id)" v-if="parseFloat(item.fees) == 0">取消参加</view>
+							<view style="background: #FF626E;" class="btn" @click.stop="handleRefund(item.id,item.activity_id)" v-else-if="item.refund == 1">申请退款</view>
+							<view class="btn" style="background: #FFB656;" @click.stop="showWebsite(item.url)" v-if="item.organizing_method == 1">线上地址</view>
+							<view class="btn" style="background: #FFB656;" @click.stop="handleVerification(item.activity_id, item.verification_method)" v-else-if="item.organizing_method == 2 && item.is_verifying == 1 && item.is_sign_in == 2">
+								<text v-if="item.verification_method == 1">扫码签到</text>
+								<text v-else>参会凭证</text>
+							</view>
+						</block>
+						<!-- 已驳回 -->
+						<block v-else-if="item.pay_state == 5">
+							<view class="btn" style="background: #FF626E;">驳回原因</view>
+						</block>
+					</block>
+					<!-- 进行中 -->
+					<block v-else-if="item.activity_state == 2 && item.pay_state == 2">
+						<view class="btn" style="background: #FFB656;" @click.stop="showWebsite(item.url)" v-if="item.organizing_method == 1">线上地址</view>
+						<view class="btn" style="background: #FFB656;" @click.stop="handleVerification(item.activity_id, item.verification_method)" v-else-if="item.organizing_method == 2 && item.is_verifying == 1 && item.is_sign_in == 2">
+							<text v-if="item.verification_method == 1">扫码签到</text>
+							<text v-else>参会凭证</text>
+						</view>
+					</block>
+					<!-- 已结束 -->
+					<block v-else-if="item.activity_state == 3 && item.pay_state == 2">
+						<view class="btn" @click.stop="showCertificate(item.activity_id, item.id)">参会证书</view>
+					</block>
+				</view>
+			</view>
+		</view>
+		<!-- 参会凭证 -->
+		<activity-poster ref="activityPoster" @onChange="pageChange"></activity-poster>
+		<!-- 参会证书 -->
+		<activity-certificate ref="activityCertificate" @onChange="pageChange"></activity-certificate>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	import activityPoster from "@/pages/component/activity/poster.vue"
+	import activityCertificate from "@/pages/component/activity/certificate.vue"
+	import svgData from "@/common/svg.js"
+	// #ifdef H5
+	import wx from 'weixin-js-sdk';
+	// #endif
+	export default {
+		name: "activityIndex",
+		props: ["showData", "showType"],
+		components: {
+			activityPoster,
+			activityCertificate,
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+				iconTime: state => {
+					return svgData.svgToUrl("time", state.app.themeColor)
+				},
+				iconLocation: state => {
+					return svgData.svgToUrl("location", state.app.themeColor)
+				},
+				iconNetwork: state => {
+					return svgData.svgToUrl("network", state.app.themeColor)
+				},
+			})
+		},
+		methods: {
+			// 改变页面滚动状态
+			pageChange(state) {
+				this.$emit("onChange", state)
+			},
+			// 申请退款
+			handleRefund(applyId, activity_id) {
+				uni.showModal({
+					content: "确认申请退款此活动？",
+					confirmColor: "#FF626E",
+					confirmText: "确认退款",
+					cancelColor: "#999999",
+					cancelText: "取消退款",
+					success: (res) => {
+						if (res.confirm) {
+							uni.showLoading({
+								title: "加载中",
+								mask: true
+							})
+							this.$util.request("activity.applyRefund", {
+								activity_id: activity_id,
+								apply_id: applyId
+							}).then(res => {
+								uni.hideLoading()
+								if (res.code == 1) {
+									uni.redirectTo({
+										url: "/pagesActivity/order/success"
+									})
+								} else {
+									uni.showToast({
+										title: res.msg,
+										icon: 'none'
+									})
+								}
+							}).catch(error => {
+								uni.hideLoading()
+								console.error('申请退款 ', error)
+							})
+						}
+					}
+				})
+			},
+			// 未支付取消参加
+			toCancel(applyId) {
+				uni.showModal({
+					content: "确认取消参加此活动？",
+					confirmColor: "#FF626E",
+					confirmText: "确认取消",
+					cancelColor: "#999999",
+					cancelText: "我再想想",
+					success: (res) => {
+						if (res.confirm) {
+							uni.showLoading({
+								title: "加载中",
+								mask: true
+							})
+							this.$util.request("activity.applyDel", {
+								id: applyId
+							}).then(res => {
+								uni.hideLoading()
+								if (res.code == 1) {
+									uni.showToast({
+										title: "取消成功",
+										icon: "success",
+										mask: true,
+										duration: 1500
+									})
+									this.$emit("getOrderList");
+								} else {
+									uni.showToast({
+										title: res.msg,
+										icon: 'none'
+									})
+								}
+							}).catch(error => {
+								uni.hideLoading()
+								console.error('取消参加 ', error)
+							})
+						}
+					}
+				})
+			},
+			// 去支付
+			toPayment(id) {
+				this.$util.toPage({
+					mode: 1,
+					path: "/pagesActivity/index/order?id=" + id
+				})
+			},
+			// 取消参加
+			handleCancel(applyId) {
+				uni.showModal({
+					content: "确认取消参加此活动？",
+					confirmColor: "#FF626E",
+					confirmText: "确认取消",
+					cancelColor: "#999999",
+					cancelText: "我再想想",
+					success: (res) => {
+						if (res.confirm) {
+							uni.showLoading({
+								title: "加载中",
+								mask: true
+							})
+							this.$util.request("activity.applyCancel", {
+								id: applyId
+							}).then(res => {
+								uni.hideLoading()
+								if (res.code == 1) {
+									uni.showToast({
+										title: "取消成功",
+										icon: "success",
+										mask: true,
+										duration: 1500
+									})
+									this.$emit("getOrderList");
+								} else {
+									uni.showToast({
+										title: res.msg,
+										icon: 'none'
+									})
+								}
+							}).catch(error => {
+								uni.hideLoading()
+								console.error('取消参加 ', error)
+							})
+						}
+					}
+				})
+			},
+			// 线上地址
+			showWebsite(url) {
+				if (url) {
+					uni.showModal({
+						content: url,
+						confirmColor: this.themeColor,
+						confirmText: "复制链接",
+						cancelColor: "#999999",
+						cancelText: "关闭页面",
+						success: (res) => {
+							if (res.confirm) {
+								this.$util.toPage({
+									mode: 8,
+									content: url
+								})
+							}
+						}
+					})
+				} else {
+					uni.showToast({
+						icon: "none",
+						title: "暂无线上地址，请稍后再试"
+					})
+				}
+			},
+			// 跳转详情
+			toDetails(item) {
+				if (this.showType == 2) {
+					this.$util.toPage({
+						mode: 1,
+						path: `/pagesActivity/order/details?id=${item.id}&activity_id=${item.activity_id}`
+					})
+				} else if (this.showType == 3) {
+					this.$util.toPage({
+						mode: 1,
+						path: "/pagesActivity/verification/details?id=" + item.id
+					})
+				} else {
+					if (item.activity_auth == 2) {
+						if (!uni.getStorageSync("token")) {
+							uni.showModal({
+								title: "系统提示",
+								content: "该活动为会员专属，请登录后查看",
+								confirmColor: this.themeColor,
+								confirmText: "前往登录",
+								success: (res) => {
+									if (res.confirm) {
+										uni.navigateTo({
+											url: "/pages/login/index"
+										})
+									}
+								}
+							})
+							return
+						}
+						this.$util.toPage({
+							mode: 1,
+							path: "/pagesActivity/index/details?id=" + item.id
+						})
+					} else {
+						this.$util.toPage({
+							mode: 1,
+							path: "/pagesActivity/index/details?id=" + item.id
+						})
+					}
+				}
+			},
+			// 活动核销
+			handleVerification(id, method) {
+				if (method == 1) {
+					this.handleScan(id)
+				} else {
+					this.$refs.activityPoster.getPoster(id)
+				}
+			},
+			// 扫码核销
+			handleScan(id) {
+				uni.showLoading({
+					title: "加载中",
+					mask: true
+				})
+				this.getAuthSetting(() => {
+					uni.hideLoading()
+					// #ifdef MP-WEIXIN
+					uni.scanCode({
+						success: (res) => {
+							if (res.path) {
+								const parameter = this.getUrlParam(res.path)
+								if (parameter && parameter.scene) {
+									this.scanSign(parameter.scene, id)
+								} else {
+									uni.showToast({
+										icon: "none",
+										title: "签到失败，请检查签到码是否正确",
+										duration: 2500
+									})
+								}
+							} else {
+								uni.showToast({
+									icon: "none",
+									title: "签到失败，请检查签到码是否正确",
+									duration: 2500
+								})
+							}
+						}
+					});
+					// #endif
+					// #ifdef H5
+					wx.scanQRCode({
+						needResult: 1,
+						scanType: ["qrCode"],
+						success: (res) => {
+							if (res.resultStr) {
+								const parameter = this.getUrlParam(res.resultStr)
+								if (parameter && parameter.scene) {
+									this.scanSign(parameter.scene, id)
+								} else {
+									uni.showToast({
+										icon: "none",
+										title: "签到失败，请检查签到码是否正确",
+										duration: 2500
+									})
+								}
+							} else {
+								uni.showToast({
+									icon: "none",
+									title: "签到失败，请检查签到码是否正确",
+									duration: 2500
+								})
+							}
+						},
+						fail: () => {
+							uni.showModal({
+								title: "系统提示",
+								content: "当前设备暂不支持扫码核销，请稍后再试",
+								showCancel: false,
+								confirmText: "我知道了"
+							})
+						},
+					});
+					// #endif
+				})
+			},
+			// 自助核销
+			scanSign(value, id) {
+				uni.showLoading({
+					title: "加载中",
+					mask: true
+				})
+				this.getLocation((location) => {
+					if (!location) {
+						uni.showToast({
+							title: '位置获取失败，请确定已打开定位权限',
+							icon: 'none',
+							duration: 2000,
+						})
+						return
+					}
+					this.$util.request("activity.scanSign", {
+						activity_id: id,
+						validate_value: value,
+						lng: location.longitude,
+						lat: location.latitude,
+					}).then(res => {
+						if (res.code == 1) {
+							uni.showToast({
+								icon: "success",
+								title: "签到成功",
+								duration: 2000
+							})
+							this.$emit("getOrderList");
+						} else {
+							uni.showToast({
+								title: res.msg,
+								icon: "none",
+								duration: 2000
+							})
+						}
+					}).catch(error => {
+						console.error('核销签到', error)
+					})
+				})
+			},
+			// 获取位置权限
+			getAuthSetting(fn) {
+				// #ifdef MP-WEIXIN
+				uni.getSetting({
+					success: (setting) => {
+						if (setting.authSetting && setting.authSetting.hasOwnProperty("scope.userLocation")) {
+							if (setting.authSetting["scope.userLocation"]) {
+								if (fn) fn()
+							} else {
+								uni.hideLoading()
+								uni.showModal({
+									title: '提示',
+									content: '请重新授权获取您的地理位置，否则部分功能将无法使用',
+									confirmColor: this.themeColor,
+									confirmText: "授权",
+									success: (res) => {
+										if (res.confirm) {
+											uni.openSetting({
+												success: (result) => {
+													if (result.authSetting["scope.userLocation"]) {
+														if (fn) fn()
+													} else {
+														uni.showToast({
+															title: '请确定已打开定位权限',
+															icon: "none",
+															duration: 2000,
+														});
+													}
+												},
+												fail: () => {
+													uni.showToast({
+														title: '位置获取失败',
+														icon: 'none',
+														duration: 2000,
+													})
+												}
+											})
+										} else {
+											uni.showToast({
+												title: '请授权获取您的地理位置，否则部分功能将无法使用',
+												icon: 'none',
+												duration: 2000,
+											})
+										}
+									},
+									fail: () => {
+										if (fn) fn()
+									}
+								})
+							}
+						} else {
+							if (fn) fn()
+						}
+					},
+					fail: () => {
+						uni.showToast({
+							title: '位置获取失败',
+							icon: 'none',
+							duration: 2000,
+						})
+					}
+				})
+				// #endif
+				// #ifdef H5
+				if (fn) fn()
+				// #endif
+			},
+			// 获取当前地址
+			getLocation(fn) {
+				// #ifdef MP-WEIXIN
+				uni.getLocation({
+					type: 'wgs84',
+					geocode: true,
+					success: (res) => {
+						fn({
+							latitude: res.latitude,
+							longitude: res.longitude,
+						})
+					},
+					fail: () => {
+						fn()
+					}
+				});
+				// #endif
+				// #ifdef H5
+				wx.ready(() => {
+					wx.getLocation({
+						type: 'wgs84',
+						success: (res) => {
+							fn({
+								latitude: res.latitude,
+								longitude: res.longitude,
+							})
+						},
+						fail: (err) => {
+							fn()
+						},
+						cancel: () => {
+							fn()
+						}
+					});
+				})
+				// #endif
+			},
+			// 截取地址栏参数
+			getUrlParam(url) {
+				const query = url.split("?")[1] || "";
+				const params = {};
+				query.split("&").forEach((pair) => {
+					const [key, value] = pair.split("=");
+					if (key) {
+						params[key] = decodeURIComponent(value || "");
+					}
+				});
+				return params;
+			},
+			// 参会证书
+			showCertificate(activityId, applyId) {
+				this.$refs.activityCertificate.getPoster(activityId, applyId)
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.component-activity {
+		.activity-item {
+			margin-top: 32rpx;
+			background: #ffffff;
+			border-radius: 10rpx;
+			padding: 32rpx;
+
+			&:first-child {
+				margin-top: 0;
+			}
+
+			&.special {
+				background: transparent;
+				border-radius: 0;
+				padding: 0;
+			}
+
+			.item-header {
+				padding-bottom: 32rpx;
+				border-bottom: 1rpx solid #E4E4E4;
+				margin-bottom: 32rpx;
+
+				.header-number {
+					color: #999999;
+					font-size: 28rpx;
+					line-height: 40rpx;
+				}
+
+				.header-status {
+					color: var(--theme-color);
+					font-size: 28rpx;
+					line-height: 40rpx;
+				}
+			}
+
+			.item-info {
+				.info-image {
+					width: 220rpx;
+					height: 160rpx;
+					border-radius: 16rpx;
+				}
+
+				.info-box {
+					margin-left: 32rpx;
+					display: flex;
+					flex-direction: column;
+					justify-content: space-between;
+
+					.box-title {
+						color: #5A5B6E;
+						font-size: 28rpx;
+						font-weight: 600;
+						line-height: 40rpx;
+					}
+
+					.box-tag {
+						.icon {
+							width: 32rpx;
+							height: 32rpx;
+							background-size: 32rpx;
+							margin-right: 10rpx;
+						}
+
+						.text {
+							color: #8D929C;
+							font-size: 24rpx;
+							line-height: 34rpx;
+						}
+					}
+				}
+			}
+
+			.item-footer {
+				margin-top: 32rpx;
+
+				.footer-label {
+					color: var(--theme-color);
+					font-size: 24rpx;
+					line-height: 34rpx;
+					padding: 8rpx 16rpx;
+					border-radius: 8rpx;
+					background: #F6F7FB;
+				}
+
+				.footer-price {
+					margin-left: 16rpx;
+					color: var(--theme-color);
+					font-size: 36rpx;
+					font-weight: 600;
+					line-height: 50rpx;
+
+					text {
+						font-size: 22rpx;
+					}
+				}
+
+				.footer-btn {
+					margin-left: 16rpx;
+
+					.btn {
+						color: #ffffff;
+						font-size: 28rpx;
+						line-height: 40rpx;
+						padding: 14rpx 24rpx;
+						border-radius: 8rpx;
+						background: var(--theme-color);
+						margin-left: 12rpx;
+
+						&:first-child {
+							margin-left: 0;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

pages/component/activity/poster.vue

@@ -0,0 +1,508 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.maiwd.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-参会凭证 开发者: 麦沃德科技-半夏
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="component-activity-poster">
+		<!-- 参会凭证 -->
+		<canvas class="poster-canvas" :style="{width: posterWidth + 'px', height: posterHeight + 'px'}" canvas-id="myCanvas" id="myCanvas"></canvas>
+		<!-- 二维码生成 -->
+		<uqrcode class="poster-canvas" ref="qrcode" canvas-id="qrcode" :value="codeData" :options="{ margin: 4 }" v-if="codeData"></uqrcode>
+		<!-- 参会凭证模态框 -->
+		<uni-popup ref="popupModal" type="center" @change="onChange">
+			<view class="poster-popup flex-direction-column align-items-center" :style="{'--theme-color': themeColor, paddingTop: titleBarHeight + 'px'}">
+				<view class="popup-close" @click="onClose()">
+					<image class="icon" src="/static/closePopup.png" mode="aspectFit"></image>
+				</view>
+				<view class="popup-content flex justify-content-center">
+					<image class="image" :src="posterPath" mode="aspectFit"></image>
+				</view>
+				<!-- #ifdef MP-WEIXIN -->
+				<view class="popup-btn" @click="saveImage">保存相册</view>
+				<!-- #endif -->
+				<!-- #ifdef H5 -->
+				<view class="popup-btn">长按图片保存相册</view>
+				<!-- #endif -->
+			</view>
+		</uni-popup>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	import { loadImage, createPoster, canvasToTempFilePath } from "@/common/poster.js";
+	export default {
+		name: "activityPoster",
+		data() {
+			return {
+				// 标题栏高度
+				titleBarHeight: 0,
+				// 参会凭证数据
+				posterInfo: {},
+				// 参会凭证宽度
+				posterWidth: 0,
+				// 参会凭证高度
+				posterHeight: 0,
+				// 图片资源是否准备完成
+				posterReady: false,
+				// 参会凭证用户头像
+				posterAvatar: "",
+				// 参会凭证二维码数据
+				codeData: "",
+				// 参会凭证二维码图片
+				posterCode: "",
+				// 参会凭证图片路径
+				posterPath: "",
+			}
+		},
+		computed: {
+			...mapState({
+				themeColor: state => 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
+		},
+		methods: {
+			// 获取参会凭证
+			getPoster(id) {
+				uni.showLoading({
+					title: "加载中",
+					mask: true
+				})
+				this.posterWidth = uni.getSystemInfoSync().windowWidth;
+				this.posterHeight = parseInt(this.posterWidth * (456 / 311));
+				this.$util.request("activity.attendance", {
+					activity_id: id,
+				}).then(res => {
+					if (res.code == 1) {
+						this.posterInfo = res.data
+						this.codeData = {
+							wechatId: res.data.wechat_id,
+						}
+						this.codeData = JSON.stringify(this.codeData)
+						this.createQrcode()
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取参会凭证 ', error)
+				})
+			},
+			// base64转临时路径
+			base64ToPath(base64) {
+				let arr = base64.split(',');
+				let mime = arr[0].match(/:(.*?);/)[1];
+				let bstr = atob(arr[1]);
+				let n = bstr.length;
+				let u8arr = new Uint8Array(n);
+				while (n--) {
+					u8arr[n] = bstr.charCodeAt(n);
+				}
+				let blob = new Blob([u8arr], {
+					type: mime
+				});
+				let url = URL.createObjectURL(blob);
+				return url;
+			},
+			// 生成二维码
+			createQrcode() {
+				if (this.$refs.qrcode && this.$refs.qrcode.toTempFilePath) {
+					this.$refs.qrcode.toTempFilePath({
+						success: res => {
+							// #ifdef MP-WEIXIN
+							const base64Data = res.tempFilePath.replace(/^data:image\/\w+;base64,/, '');
+							const filePath = `${wx.env.USER_DATA_PATH}/qrcode.jpg`
+							uni.getFileSystemManager().writeFile({
+								filePath,
+								data: base64Data,
+								encoding: "base64",
+								success: () => {
+									this.posterCode = filePath
+									this.showNucleus()
+								}
+							})
+							// #endif
+							// #ifdef H5
+							this.posterCode = this.base64ToPath(res.tempFilePath);
+							this.showNucleus()
+							// #endif
+						},
+						fail: () => {
+							setTimeout(() => {
+								this.createQrcode()
+							}, 200);
+						},
+					});
+				} else {
+					setTimeout(() => {
+						this.createQrcode()
+					}, 200);
+				}
+			},
+			// 获取图片资源
+			async showNucleus() {
+				this.loadingResources().then((state) => {
+					if (state) {
+						this.posterReady = true
+						this.createImage()
+					}
+				});
+			},
+			// 加载图片资源
+			async loadingResources() {
+				this.posterCode = await loadImage(this.posterCode);
+				this.posterAvatar = await loadImage(this.posterInfo.member_avatar);
+				return true;
+			},
+			// 生成参会凭证
+			async createImage() {
+				if (!this.posterReady) {
+					uni.hideLoading()
+					uni.showToast({
+						title: '参会凭证图片资源加载失败',
+						icon: 'none'
+					})
+					return
+				};
+				// 获取上下文对象
+				const ctx = uni.createCanvasContext("myCanvas", this);
+				// 设置背景色1
+				const x1 = 0;
+				const y1 = 0;
+				const width1 = this.posterWidth;
+				const height1 = this.posterHeight;
+				const radius1 = parseInt(this.posterWidth * (20 / 311));
+				ctx.beginPath();
+				ctx.moveTo(x1 + radius1, y1);
+				ctx.lineTo(x1 + width1 - radius1, y1);
+				ctx.arc(x1 + width1 - radius1, y1 + radius1, radius1, -Math.PI / 2, 0);
+				ctx.lineTo(x1 + width1, y1 + height1 - radius1);
+				ctx.arc(x1 + width1 - radius1, y1 + height1 - radius1, radius1, 0, Math.PI / 2);
+				ctx.lineTo(x1 + radius1, y1 + height1);
+				ctx.arc(x1 + radius1, y1 + height1 - radius1, radius1, Math.PI / 2, Math.PI);
+				ctx.lineTo(x1, y1 + radius1);
+				ctx.arc(x1 + radius1, y1 + radius1, radius1, Math.PI, -Math.PI / 2);
+				ctx.closePath();
+				ctx.setFillStyle('#ffffff')
+				ctx.fill();
+				ctx.setStrokeStyle('#ffffff')
+				ctx.stroke();
+				// 设置背景色2
+				const x2 = 2;
+				const y2 = 2;
+				const width2 = parseInt(this.posterWidth - 4);
+				const height2 = parseInt(this.posterHeight - 4);
+				const radius2 = parseInt(this.posterWidth * (20 / 311));
+				ctx.beginPath();
+				ctx.moveTo(x2 + radius2, y2);
+				ctx.lineTo(x2 + width2 - radius2, y2);
+				ctx.arc(x2 + width2 - radius2, y2 + radius2, radius2, -Math.PI / 2, 0);
+				ctx.lineTo(x2 + width2, y2 + height2 - radius2);
+				ctx.arc(x2 + width2 - radius2, y2 + height2 - radius2, radius2, 0, Math.PI / 2);
+				ctx.lineTo(x2 + radius2, y2 + height2);
+				ctx.arc(x2 + radius2, y2 + height2 - radius2, radius2, Math.PI / 2, Math.PI);
+				ctx.lineTo(x2, y2 + radius2);
+				ctx.arc(x2 + radius2, y2 + radius2, radius2, Math.PI, -Math.PI / 2);
+				ctx.closePath();
+				ctx.setFillStyle(this.$util.hexToRgb(this.themeColor, .1))
+				ctx.fill();
+				ctx.setStrokeStyle('rgba(255, 255, 255, 0)')
+				ctx.stroke();
+				// 设置背景色3
+				const x3 = parseInt(this.posterWidth * (16 / 311));
+				const y3 = parseInt(this.posterWidth * (64 / 311));
+				const width3 = parseInt(this.posterWidth - this.posterWidth * (32 / 311));
+				const height3 = parseInt(this.posterWidth * (228 / 311));
+				const radius3 = parseInt(this.posterWidth * (10 / 311));
+				ctx.beginPath();
+				ctx.moveTo(x3 + radius3, y3);
+				ctx.lineTo(x3 + width3 - radius3, y3);
+				ctx.arc(x3 + width3 - radius3, y3 + radius3, radius3, -Math.PI / 2, 0);
+				ctx.lineTo(x3 + width3, y3 + height3 - radius3);
+				ctx.arc(x3 + width3 - radius3, y3 + height3 - radius3, radius3, 0, Math.PI / 2);
+				ctx.lineTo(x3 + radius3, y3 + height3);
+				ctx.arc(x3 + radius3, y3 + height3 - radius3, radius3, Math.PI / 2, Math.PI);
+				ctx.lineTo(x3, y3 + radius3);
+				ctx.arc(x3 + radius3, y3 + radius3, radius3, Math.PI, -Math.PI / 2);
+				ctx.closePath();
+				const grd2 = ctx.createLinearGradient(0, 0, 0, parseInt(this.posterWidth * (321 / 311)))
+				grd2.addColorStop(0, "#ffffff")
+				grd2.addColorStop(1, "rgba(255, 255, 255, 0.4)")
+				ctx.setFillStyle(grd2)
+				ctx.fill();
+				ctx.setStrokeStyle('rgba(255, 255, 255, 0)')
+				ctx.stroke();
+				// 创建参会凭证
+				await createPoster(ctx, [{
+						type: "text",
+						text: "活动参会凭证",
+						config: {
+							x: parseInt(this.posterWidth / 2),
+							y: parseInt(this.posterWidth * (36 / 311)),
+							color: this.themeColor,
+							font: `bold ${parseInt(this.posterWidth * (24 / 311))}px sans-serif`,
+							textAlign: "center",
+							lineHeight: parseInt(this.posterWidth * (28 / 311)),
+						},
+					},
+					{
+						type: "image",
+						url: this.posterAvatar,
+						config: {
+							x: parseInt(this.posterWidth * (32 / 311)),
+							y: parseInt(this.posterWidth * (80 / 311)),
+							w: parseInt(this.posterWidth * (68 / 311)),
+							h: parseInt(this.posterWidth * (68 / 311)),
+							r: parseInt(this.posterWidth * (6 / 248))
+						},
+					},
+					{
+						type: "text",
+						text: this.posterInfo.member_name,
+						config: {
+							x: parseInt(this.posterWidth * (108 / 311)),
+							y: parseInt(this.posterWidth * (92 / 311)),
+							color: "#5A5B6E",
+							font: `bold ${parseInt(this.posterWidth * (18 / 311))}px sans-serif`,
+							textAlign: "left",
+							maxWidth: parseInt(this.posterWidth * (177 / 311)),
+						},
+					},
+					{
+						type: "text",
+						text: this.posterInfo.mobile,
+						config: {
+							x: parseInt(this.posterWidth * (108 / 311)),
+							y: parseInt(this.posterWidth * (118 / 311)),
+							color: "#5A5B6E",
+							fontSize: parseInt(this.posterWidth * (12 / 311)).toString(),
+							textAlign: "left",
+							maxWidth: parseInt(this.posterWidth * (177 / 311)),
+						},
+					},
+					{
+						type: "text",
+						text: this.posterInfo.member_level_name,
+						config: {
+							x: parseInt(this.posterWidth * (108 / 311)),
+							y: parseInt(this.posterWidth * (142 / 311)),
+							color: "#5A5B6E",
+							fontSize: parseInt(this.posterWidth * (12 / 311)).toString(),
+							textAlign: "left",
+							maxWidth: parseInt(this.posterWidth * (177 / 311)),
+						},
+					},
+					{
+						type: "text",
+						text: "活动",
+						config: {
+							x: parseInt(this.posterWidth * (32 / 311)),
+							y: parseInt(this.posterWidth * (172 / 311)),
+							color: "#5A5B6E",
+							font: `bold ${parseInt(this.posterWidth * (14 / 311))}px sans-serif`,
+							textAlign: "left",
+							maxWidth: parseInt(this.posterWidth * (247 / 311)),
+						},
+					},
+					{
+						type: "text",
+						text: this.posterInfo.activity_name,
+						config: {
+							x: parseInt(this.posterWidth * (32 / 311)),
+							y: parseInt(this.posterWidth * (196 / 311)),
+							color: this.themeColor,
+							fontSize: parseInt(this.posterWidth * (14 / 311)).toString(),
+							textAlign: "left",
+							maxWidth: parseInt(this.posterWidth * (247 / 311)),
+							wrap: true,
+							lineNumber: 2,
+							lineHeight: parseInt(this.posterWidth * (18 / 311)),
+							isVerticalCenter: false
+						},
+					},
+					{
+						type: "text",
+						text: "地址",
+						config: {
+							x: parseInt(this.posterWidth * (32 / 311)),
+							y: parseInt(this.posterWidth * (235 / 311)),
+							color: "#5A5B6E",
+							font: `bold ${parseInt(this.posterWidth * (14 / 311))}px sans-serif`,
+							textAlign: "left",
+							maxWidth: parseInt(this.posterWidth * (247 / 311)),
+						},
+					},
+					{
+						type: "text",
+						text: this.posterInfo.address,
+						config: {
+							x: parseInt(this.posterWidth * (32 / 311)),
+							y: parseInt(this.posterWidth * (259 / 311)),
+							color: this.themeColor,
+							fontSize: parseInt(this.posterWidth * (14 / 311)).toString(),
+							textAlign: "left",
+							maxWidth: parseInt(this.posterWidth * (247 / 311)),
+							wrap: true,
+							lineNumber: 2,
+							lineHeight: parseInt(this.posterWidth * (18 / 311)),
+							isVerticalCenter: false
+						},
+					},
+					{
+						type: "image",
+						url: this.posterCode,
+						config: {
+							x: parseInt(this.posterWidth * (106 / 311)),
+							y: parseInt(this.posterWidth * (308 / 311)),
+							w: parseInt(this.posterWidth * (100 / 311)),
+							h: parseInt(this.posterWidth * (100 / 311)),
+						},
+					},
+					{
+						type: "text",
+						text: "参会时，请出示二维码进行核销",
+						config: {
+							x: parseInt(this.posterWidth / 2),
+							y: parseInt(this.posterWidth * (428 / 311)),
+							color: "#5A5B6E",
+							fontSize: parseInt(this.posterWidth * (14 / 311)).toString(),
+							textAlign: "center",
+							lineHeight: parseInt(this.posterWidth * (24 / 311)),
+						},
+					},
+				])
+				const imagePath = await canvasToTempFilePath("myCanvas", this);
+				this.posterPath = imagePath;
+				this.$refs.popupModal.open()
+				uni.hideLoading()
+			},
+			// 保存参会凭证
+			saveImage() {
+				uni.authorize({
+					scope: 'scope.writePhotosAlbum',
+					success: () => {
+						uni.getImageInfo({
+							src: this.posterPath,
+							success: (img) => {
+								uni.saveImageToPhotosAlbum({
+									filePath: img.path,
+									success: () => {
+										uni.showToast({
+											title: "保存成功",
+											icon: "success",
+										});
+									},
+									fail: (err) => {
+										console.error(err);
+									},
+								});
+							},
+							fail: (err) => {
+								console.error(err)
+							}
+						});
+					},
+					fail: () => {
+						uni.showModal({
+							title: '图片保存失败',
+							content: '请确认是否已开启授权',
+							confirmText: '开启授权',
+							confirmColor: this.themeColor,
+							success: (res) => {
+								if (res.confirm) {
+									uni.openSetting({
+										success: (setting) => {
+											if (setting.authSetting["scope.writePhotosAlbum"]) {
+												uni.showToast({
+													title: '授权成功，请重新保存',
+													icon: "none"
+												});
+											} else {
+												uni.showToast({
+													title: '请确定已打开保存权限',
+													icon: "none"
+												});
+											}
+										}
+									})
+								}
+							}
+						})
+					}
+				})
+			},
+			// 关闭弹窗
+			onClose() {
+				this.$refs.popupModal.close()
+			},
+			// 改变页面滚动状态
+			onChange(e) {
+				this.$emit("onChange", e.show)
+			},
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.component-activity-poster {
+		position: relative;
+		z-index: 999;
+
+		.poster-canvas {
+			position: fixed;
+			top: 100vw;
+			left: 100vh;
+			z-index: -1;
+		}
+
+		.poster-popup {
+			.popup-close {
+				width: 100%;
+				margin-top: -112rpx;
+				margin-bottom: 32rpx;
+				display: flex;
+				justify-content: flex-end;
+
+				.icon {
+					width: 80rpx;
+					height: 80rpx;
+				}
+			}
+
+			.popup-content {
+				.image {
+					width: 80vw;
+					height: 65vh;
+				}
+			}
+
+			.popup-btn {
+				margin-top: 32rpx;
+				width: 336rpx;
+				font-size: 28rpx;
+				line-height: 40rpx;
+				padding: 26rpx 32rpx;
+				border-radius: 16rpx;
+				color: #FFFFFF;
+				background: var(--theme-color);
+				text-align: center;
+			}
+		}
+	}
+</style>

pages/component/article/index.vue

@@ -0,0 +1,112 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-平台动态 开发者: 麦沃德科技-半夏
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="component-article">
+		<view class="article-item flex" :class="{special: showType == 1}" v-for="item in showData" :key="item.id" @click="toDetails(item)">
+			<image class="item-image" :src="item.image" mode="aspectFill"></image>
+			<view class="item-box flex-item flex-direction-column justify-content-between">
+				<view class="box-title text-ellipsis-more">{{item.title}}</view>
+				<view class="box-bottom flex justify-content-between align-items-center">
+					<view class="bottom-view flex align-items-center">
+						<image class="icon" src="/static/see.png" mode="aspectFit"></image>
+						<text class="number">{{item.read_num}}</text>
+					</view>
+					<view class="bottom-time">{{item.createtime}}</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "articleIndex",
+		props: ["showData", "showType", "showTitle"],
+		methods: {
+			// 跳转详情
+			toDetails(item) {
+				if (item.type == 2) {
+					this.$util.toPage({
+						mode: 4,
+						path: item.link,
+					})
+					this.$util.request("main.article.updateReadNum", { id: item.id })
+				} else {
+					this.$util.toPage({
+						mode: 1,
+						path: `/pages/article/details?id=${item.id}&title=${encodeURIComponent(this.showTitle || "")}`
+					})
+				}
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.component-article {
+		.article-item {
+			margin-top: 32rpx;
+			background: #ffffff;
+			border-radius: 10rpx;
+			padding: 32rpx;
+
+			&:first-child {
+				margin-top: 0;
+			}
+
+			&.special {
+				background: transparent;
+				border-radius: 0;
+				padding: 0;
+			}
+
+			.item-image {
+				width: 220rpx;
+				height: 192rpx;
+				border-radius: 10rpx;
+			}
+
+			.item-box {
+				margin-left: 16rpx;
+
+				.box-title {
+					color: #5A5B6E;
+					font-size: 28rpx;
+					line-height: 40rpx;
+				}
+
+				.box-bottom {
+					.bottom-view {
+						.icon {
+							width: 32rpx;
+							height: 32rpx;
+						}
+
+						.number {
+							margin-left: 8rpx;
+							color: #8D929C;
+							font-size: 24rpx;
+							line-height: 32rpx;
+						}
+					}
+
+					.bottom-time {
+						color: #8D929C;
+						font-size: 24rpx;
+						line-height: 32rpx;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/component/carousel/carousel.vue

@@ -0,0 +1,183 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-轮播图 开发者: 麦沃德科技-半夏
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="component-carousel" :style="{height: height}">
+		<swiper class="carousel-swiper" :style="{'border-radius': radius}" autoplay circular :interval="4000" :duration="800" @change="imgChange">
+			<swiper-item v-for="(item, index) in showData" :key="index">
+				<view class="swiper-item" :style="{'border-radius': radius}" @click="toDetails(index)">
+					<image class="item-thumb" :src="item.image || item" mode="aspectFill"></image>
+					<!-- #ifdef H5 -->
+					<wx-open-launch-weapp class="item-absolute" :appid="stringifyToParse(item.content).appid" :path="stringifyToParse(item.content).path" v-if="item.jump_type == 4">
+						<script type="text/wxtag-template">
+							<style> .btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
+						  <view class="btn"></view>
+						</script>
+					</wx-open-launch-weapp>
+					<!-- #endif -->
+				</view>
+			</swiper-item>
+		</swiper>
+		<view class="carousel-dots" :style="{right: right, bottom: bottom, '--theme-color': themeColor}">
+			<view class="dots-item" :class="{active: imgIndex == index}" v-for="(item, index) in showData" :key="index"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	export default {
+		name: "carouselIndex",
+		props: {
+			// 组件内容
+			showData: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			// 组件高度
+			height: {
+				type: String,
+				default: "334rpx",
+			},
+			// 组件圆角
+			radius: {
+				type: String,
+				default: "16rpx",
+			},
+			// 指示点位置
+			right: {
+				type: String,
+				default: "16rpx",
+			},
+			// 指示点距底部距离
+			bottom: {
+				type: String,
+				default: "16rpx",
+			},
+			// 组件类型 1.普通轮播图，2.商城轮播图
+			showType: {
+				type: Number,
+				default: 1,
+			}
+		},
+		data() {
+			return {
+				imgIndex: 0,
+			};
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor
+			})
+		},
+		methods: {
+			// JSON字符串转对象
+			stringifyToParse(str) {
+				try {
+					return JSON.parse(str)
+				} catch (e) {
+					return {}
+				}
+			},
+			// 轮播图切换
+			imgChange(e) {
+				this.imgIndex = e.detail.current
+			},
+			// 跳转页面
+			toDetails(index) {
+				if (this.showData[index].jump_type == 1) {
+					// 图文
+					uni.navigateTo({
+						url: `/pages/webview/imageText?type=${this.showType == 2 ? 3 : 1}&id=${this.showData[index].id}`
+					})
+				} else if (this.showData[index].jump_type == 2) {
+					// 内部页面
+					this.$util.toPage({
+						path: this.showData[index].content,
+						mode: 1,
+					})
+				} else if (this.showData[index].jump_type == 3) {
+					// 外部链接
+					this.$util.toPage({
+						path: this.showData[index].content,
+						mode: 4,
+					})
+				} else if (this.showData[index].jump_type == 4) {
+					// 小程序
+					this.$util.toPage({
+						appId: JSON.parse(this.showData[index].content).appid,
+						path: JSON.parse(this.showData[index].content).path,
+						mode: 5,
+					})
+				}
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.component-carousel {
+		position: relative;
+		width: 100%;
+
+		.carousel-swiper {
+			width: 100%;
+			height: 100%;
+			overflow: hidden;
+
+			.swiper-item {
+				position: relative;
+				width: 100%;
+				height: 100%;
+
+				.item-thumb {
+					width: 100%;
+					height: 100%;
+					background-color: #f1f1f1;
+				}
+
+				.item-absolute {
+					display: block;
+					position: absolute;
+					top: 0;
+					left: 0;
+					right: 0;
+					bottom: 0;
+				}
+			}
+		}
+
+		.carousel-dots {
+			position: absolute;
+			z-index: 1;
+			display: flex;
+
+			.dots-item {
+				width: 24rpx;
+				height: 8rpx;
+				border-radius: 8rpx;
+				background: #FFFFFF;
+				margin-right: 4rpx;
+
+				&:last-child {
+					margin-right: 0;
+				}
+
+				&.active {
+					background: var(--theme-color);
+				}
+			}
+		}
+	}
+</style>

pages/component/chains/index.vue

@@ -0,0 +1,161 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-接龙列表 开发者: 麦沃德科技-半夏 
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="component-chains">
+		<view class="chains-item" :class="{'chains-list-item': showType == 1}" v-for="item in showData" :key="item.id" @click="toDetails(item)">
+			<view class="item-title text-ellipsis">{{item.name}}</view>
+			<view class="item-tag flex justify-content-between">
+				<view class="tag-box flex">
+					<text style="margin-left: 0;">{{item.expire_time}}</text>
+					<text v-if="item.type == 1">自由接龙</text>
+					<text v-else>限定接龙</text>
+				</view>
+				<view class="tag-box flex">
+					<text>浏览{{item.page_view}}</text>
+					<text>参与{{item.part_total}}</text>
+				</view>
+			</view>
+			<view class="item-btn flex align-items-center">
+				<!-- #ifdef MP-WEIXIN -->
+				<button open-type="share" class="btn-box clear flex align-items-center" @click.stop="setShareData(item)">
+					<view class="icon" :style="{'background-image': 'url('+ iconInvite +')'}" v-if="iconInvite"></view>
+					<text class="text">邀请填写</text>
+				</button>
+				<!-- #endif -->
+				<!-- #ifndef MP-WEIXIN -->
+				<view class="btn-box flex align-items-center">
+					<view class="icon" :style="{'background-image': 'url('+ iconInvite +')'}" v-if="iconInvite"></view>
+					<text class="text">填写接龙</text>
+				</view>
+				<!-- #endif -->
+				<view class="btn-line"></view>
+				<view class="btn-box justify-content-end flex align-items-center" @click.stop="onContact(item.mobile)">
+					<view class="icon" :style="{'background-image': 'url('+ iconPhone +')'}" v-if="iconPhone"></view>
+					<text class="text">联系电话</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	import svgData from "@/common/svg.js"
+	export default {
+		name: "chainsIndex",
+		props: ["showData", "showType"],
+		computed: {
+			...mapState({
+				jielongImg: state => state.app.jielongImg,
+				themeColor: state => state.app.themeColor,
+				iconInvite: state => {
+					return svgData.svgToUrl("invite", state.app.themeColor)
+				},
+				iconPhone: state => {
+					return svgData.svgToUrl("phone", state.app.themeColor)
+				},
+			})
+		},
+		methods: {
+			// 设置分享数据
+			setShareData(item) {
+				this.$emit('setShareData', {
+					title: item.name,
+					path: '/pagesTools/sequence/details?id=' + item.id,
+					imageUrl: this.jielongImg,
+				})
+			},
+			// 去详情 
+			toDetails(item) {
+				this.$util.toPage({
+					mode: 1,
+					path: "/pagesTools/sequence/details?id=" + item.id
+				})
+			},
+			// 联系电话
+			onContact(phone) {
+				this.$util.toPage({
+					mode: 6,
+					phone: phone,
+				})
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	.component-chains {
+		.chains-item {
+			margin-top: 32rpx;
+
+			&.chains-list-item {
+				padding: 32rpx;
+				border-radius: 10rpx;
+				background: #FFFFFF;
+			}
+
+			&:first-child {
+				margin-top: 0;
+			}
+
+			.item-title {
+				color: #5A5B6E;
+				font-size: 28rpx;
+				line-height: 40rpx;
+			}
+
+			.item-tag {
+				margin-top: 16rpx;
+
+				.tag-box {
+					text {
+						color: #999999;
+						font-size: 24rpx;
+						line-height: 34rpx;
+						margin-left: 16rpx;
+					}
+				}
+			}
+
+			.item-btn {
+				margin-top: 32rpx;
+				border-top: 1rpx solid #E8E8E8;
+				padding-top: 32rpx;
+
+				.btn-box {
+					flex: 1;
+					padding: 0 48rpx;
+
+					.icon {
+						width: 32rpx;
+						height: 32rpx;
+						background-size: 32rpx;
+					}
+
+					.text {
+						margin-left: 8rpx;
+						color: #5A5B6E;
+						font-size: 28rpx;
+						line-height: 34rpx;
+					}
+				}
+
+				.btn-line {
+					width: 0;
+					height: 32rpx;
+					border-left: 1rpx solid #E8E8E8;
+				}
+			}
+		}
+	}
+</style>

pages/component/demand/index.vue

@@ -0,0 +1,481 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-供需列表 开发者: 麦沃德科技-半夏
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="component-demand" :style="{'--theme-color': themeColor}">
+		<view class="demand-item" v-for="item in showData" :key="item.id" @click="toDetails(item.id)">
+			<view class="item-top">
+				<view class="top-order flex align-items-center" v-if="showType == 2">
+					<view class="order-number flex-item">编号：{{item.number}}</view>
+					<view class="order-status">
+						<view class="status-label" style="color: #FF9100;" v-if="item.state == 1">审核中</view>
+						<view class="status-label" :style="{ color: themeColor }" v-else-if="item.state == 2">发布中</view>
+						<view class="status-label" style="color: #FF626E;" v-else-if="item.state == 3">已驳回</view>
+					</view>
+				</view>
+				<view class="top-info flex align-items-center" v-else>
+					<image class="info-avatar" :src="item.member.avatar" mode="aspectFill"></image>
+					<view class="info-box flex-item">
+						<view class="title text-ellipsis">{{ item.member.name }}</view>
+						<view class="subtitle text-ellipsis">{{ item.member.level_name }} | {{ item.time }}</view>
+					</view>
+					<view class="info-btn" @click.stop="onContact(item.member.mobile)">联系TA</view>
+				</view>
+			</view>
+			<view class="item-center">
+				<view class="center-title text-ellipsis">{{ item.title }}</view>
+				<view class="center-content text-ellipsis-more">{{ item.content }}</view>
+				<view class="center-image" :class="{'special-image': (item.images.length < 3 || item.images.length === 4)}" v-if="item.images.length">
+					<view class="image-box" v-for="(img, num) in item.images" :key="num" @click.stop="previewImage(item.images, num)">
+						<image class="image" :src="img" mode="aspectFill"></image>
+					</view>
+				</view>
+			</view>
+			<view class="item-bottom">
+				<view class="bottom-order" v-if="showType == 2">
+					<view class="order-box flex justify-content-between align-items-center" v-if="item.address || item.page_view">
+						<view class="box-label flex-item">
+							<view class="label-box inline-flex align-items-center" v-if="item.address">
+								<view class="box-icon" :style="{'background-image': 'url('+ iconAddress +')'}" v-if="iconAddress"></view>
+								<text class="box-text flex-item text-ellipsis">{{item.address}}</text>
+								<view class="box-bg"></view>
+							</view>
+						</view>
+						<view class="box-btn flex align-items-center">
+							<image class="icon" src="/static/see.png" mode="aspectFit"></image>
+							<text class="text">{{ item.page_view }}</text>
+						</view>
+					</view>
+					<view class="order-btn flex justify-content-end">
+						<view class="btn" style="background: #FFB656;" @click.stop="handleEdit(item.id)">修改</view>
+						<view class="btn" style="background: #FF626E;" @click.stop="handleDelete(item.id)">删除</view>
+					</view>
+				</view>
+				<view class="bottom-info flex justify-content-between align-items-center" v-else>
+					<view class="info-label flex-item">
+						<view class="label-box inline-flex align-items-center" v-if="item.address">
+							<view class="box-icon" :style="{'background-image': 'url('+ iconAddress +')'}" v-if="iconAddress"></view>
+							<text class="box-text flex-item text-ellipsis">{{item.address}}</text>
+							<view class="box-bg"></view>
+						</view>
+					</view>
+					<view class="info-other flex align-items-center">
+						<view class="other-item flex align-items-center">
+							<image class="icon" src="/static/see.png" mode="aspectFit"></image>
+							<text class="text">{{ item.page_view }}</text>
+						</view>
+						<button open-type="share" class="other-item clear flex align-items-center" @click.stop="setShareData(item)">
+							<image class="icon" src="/static/share.png" mode="aspectFit"></image>
+							<text class="text">分享</text>
+						</button>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	import svgData from "@/common/svg.js"
+	export default {
+		name: "componentDemand",
+		props: ["showData", "showType"],
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+				iconAddress: state => {
+					return svgData.svgToUrl("address", state.app.themeColor)
+				},
+			})
+		},
+		methods: {
+			// 跳转详情
+			toDetails(id) {
+				if (this.showType == 2) {
+					this.$util.toPage({
+						mode: 1,
+						path: `/pagesDemand/demand/publish?id=${id}`
+					})
+				} else {
+					this.$util.toPage({
+						mode: 1,
+						path: `/pagesDemand/demand/details?id=${id}`
+					})
+				}
+			},
+			// 联系ta 
+			onContact(phone) {
+				// 获取商圈限制
+				this.$util.request("demand.businessLimit", {
+					type: 2
+				}).then(res => {
+					if (res.code == 1) {
+						if (res.data.show_status == 1) {
+							this.$util.toPage({
+								mode: 6,
+								phone: phone,
+							})
+						} else {
+							if (uni.getStorageSync("token")) {
+								uni.showModal({
+									title: "系统提示",
+									content: "联系电话需成为会员后可拨打!",
+									confirmColor: this.themeColor,
+									confirmText: "去加入",
+									success: (res) => {
+										if (res.confirm) {
+											uni.switchTab({
+												url: "/pages/mine/index"
+											})
+										}
+									}
+								})
+							} else {
+								uni.navigateTo({
+									url: "/pages/login/index",
+									animationType: "fade-in"
+								})
+							}
+						}
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取商圈分类', error)
+				})
+			},
+			// 预览图片
+			previewImage(list, index) {
+				uni.previewImage({
+					urls: list,
+					current: index
+				});
+			},
+			// 设置分享数据
+			setShareData(item) {
+				this.$emit('setShareData', {
+					title: item.title,
+					path: '/pagesDemand/demand/details?id=' + item.id,
+					imageUrl: item.images.length ? item.images[0] : item.member.avatar,
+				})
+			},
+			// 修改供需
+			handleEdit(id) {
+				this.$util.toPage({
+					mode: 1,
+					path: "/pagesDemand/demand/edit?id=" + id
+				})
+			},
+			// 删除供需
+			handleDelete(id) {
+				uni.showModal({
+					title: '提示',
+					content: '确认删除此条吗?',
+					confirmText: '确认删除',
+					confirmColor: '#E50002',
+					cancelText: '我再想想',
+					cancelColor: '#999999',
+					success: (res) => {
+						if (res.confirm) {
+							uni.showLoading({
+								title: "加载中",
+								mask: true
+							})
+							this.$util.request("demand.businessDel", {
+								id: id,
+							}).then(res => {
+								uni.hideLoading()
+								if (res.code == 1) {
+									uni.showToast({
+										title: "删除成功"
+									})
+									this.$emit("onReset")
+								} else {
+									uni.showToast({
+										title: res.msg,
+										icon: 'none'
+									})
+								}
+							}).catch(error => {
+								uni.hideLoading()
+								console.error('删除发布', error)
+							})
+						}
+					}
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.component-demand {
+		.demand-item {
+			margin-top: 32rpx;
+			padding: 32rpx 32rpx 24rpx;
+			border-radius: 16rpx;
+			background: #FFF;
+
+			&:first-child {
+				margin-top: 0;
+			}
+
+			.item-top {
+				.top-info {
+					.info-avatar {
+						width: 96rpx;
+						height: 96rpx;
+						border-radius: 50%;
+					}
+
+					.info-box {
+						margin-left: 24rpx;
+
+						.title {
+							color: #5A5B6E;
+							font-size: 32rpx;
+							font-weight: 600;
+							line-height: 44rpx;
+						}
+
+						.subtitle {
+							margin-top: 12rpx;
+							color: #666;
+							font-size: 28rpx;
+							line-height: 40rpx;
+						}
+					}
+
+					.info-btn {
+						margin-left: 24rpx;
+						padding: 8rpx 16rpx;
+						color: #FFF;
+						text-align: center;
+						font-size: 24rpx;
+						line-height: 34rpx;
+						background: var(--theme-color);
+						border-radius: 8rpx;
+					}
+				}
+
+				.top-order {
+					padding-bottom: 32rpx;
+					border-bottom: 1px solid #E4E4E4;
+
+					.order-number {
+						color: #979797;
+						font-size: 28rpx;
+						line-height: 40rpx;
+					}
+
+					.order-status {
+						.status-label {
+							font-size: 28rpx;
+							line-height: 40rpx;
+						}
+					}
+				}
+			}
+
+			.item-center {
+				margin-top: 32rpx;
+
+				.center-title {
+					color: #5A5B6E;
+					font-size: 32rpx;
+					font-weight: 600;
+					line-height: 44rpx;
+				}
+
+				.center-content {
+					margin-top: 24rpx;
+					color: #5A5B6E;
+					font-size: 28rpx;
+					line-height: 40rpx;
+				}
+
+				.center-image {
+					display: flex;
+					flex-wrap: wrap;
+					margin-top: 16rpx;
+					column-gap: 2%;
+					row-gap: 14rpx;
+
+					.image-box {
+						width: 32%;
+						height: 0;
+						padding-top: 32%;
+						position: relative;
+						border-radius: 16rpx;
+						overflow: hidden;
+
+						.image {
+							position: absolute;
+							top: 0;
+							left: 0;
+							right: 0;
+							bottom: 0;
+						}
+					}
+
+					&.special-image {
+						justify-content: space-between;
+						column-gap: 0;
+
+						.image-box {
+							width: calc(50% - 8rpx);
+							padding-top: calc(50% - 8rpx);
+						}
+					}
+				}
+			}
+
+			.item-bottom {
+				.bottom-info {
+					margin-top: 24rpx;
+
+					.info-label {
+						max-width: 280rpx;
+
+						.label-box {
+							max-width: 100%;
+							padding: 6rpx 18rpx 6rpx 8rpx;
+							position: relative;
+							z-index: 1;
+							border-radius: 8rpx;
+							overflow: hidden;
+
+							.box-bg {
+								position: absolute;
+								top: 0;
+								left: 0;
+								right: 0;
+								bottom: 0;
+								background: var(--theme-color);
+								z-index: -1;
+								opacity: 0.1;
+							}
+
+							.box-icon {
+								width: 24rpx;
+								height: 24rpx;
+								background-size: 24rpx;
+							}
+
+							.box-text {
+								margin-left: 8rpx;
+								color: var(--theme-color);
+								font-size: 20rpx;
+								line-height: 28rpx;
+							}
+						}
+					}
+
+					.info-other {
+						.other-item {
+							margin-left: 32rpx;
+
+							.icon {
+								width: 32rpx;
+								height: 32rpx;
+							}
+
+							.text {
+								margin-left: 8rpx;
+								color: #5A5B6E;
+								font-size: 28rpx;
+								line-height: 40rpx;
+							}
+						}
+					}
+				}
+
+				.bottom-order {
+					.order-box {
+						margin-top: 24rpx;
+
+						.box-label {
+							max-width: 280rpx;
+
+							.label-box {
+								max-width: 100%;
+								padding: 6rpx 18rpx 6rpx 8rpx;
+								position: relative;
+								z-index: 1;
+								border-radius: 8rpx;
+								overflow: hidden;
+
+								.box-bg {
+									position: absolute;
+									top: 0;
+									left: 0;
+									right: 0;
+									bottom: 0;
+									background: var(--theme-color);
+									z-index: -1;
+									opacity: 0.1;
+								}
+
+								.box-icon {
+									width: 24rpx;
+									height: 24rpx;
+									background-size: 24rpx;
+								}
+
+								.box-text {
+									margin-left: 8rpx;
+									color: var(--theme-color);
+									font-size: 20rpx;
+									line-height: 28rpx;
+								}
+							}
+						}
+
+						.box-btn {
+							margin-left: 32rpx;
+
+							.icon {
+								width: 32rpx;
+								height: 32rpx;
+							}
+
+							.text {
+								margin-left: 8rpx;
+								color: #5A5B6E;
+								font-size: 28rpx;
+								line-height: 40rpx;
+							}
+						}
+					}
+
+					.order-btn {
+						margin-top: 32rpx;
+
+						.btn {
+							padding: 16rpx 32rpx;
+							border-radius: 8rpx;
+							color: #FFF;
+							text-align: center;
+							font-size: 28rpx;
+							line-height: 40rpx;
+							margin-left: 16rpx;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

pages/component/diy/activityDiy.vue

@@ -0,0 +1,227 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-商会活动 开发者: 麦沃德科技-半夏 
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="diy-activity" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
+		<view class="activity-title" :style="{marginBottom: titleSpace}" v-if="showParams.showTitle">
+			<view :style="{fontSize: titleFontSize,fontWeight: showStyle.titleFontStyle, color: showStyle.titleColor}">{{showParams.titleText}}</view>
+			<view :style="{fontSize: titleBtnSize, color: showStyle.titleBtnColor}" @click="toMore()">
+				<text v-if="showParams.titleBtnType == 'text'">{{showParams.titleBtnText}}</text>
+				<view :style="{'background-image': 'url('+ titleIconMore +')', width: titleIconSize, height: titleIconSize, backgroundSize: titleIconSize}" v-else-if="titleIconMore"></view>
+			</view>
+		</view>
+		<view class="activity-list" :style="{rowGap: itemSpace}" v-if="activityList.length">
+			<view class="list-item flex" v-for="item in activityList" :key="item.id" @click="toDetails(item.id, item.activity_auth)">
+				<image class="item-image" :src="item.images" mode="aspectFill" v-if="showParams.showImg" :style="{ width: imgWidth, height: imgHeight, borderRadius: borderRadius}"></image>
+				<view class="item-info flex-item" :style="{height: imgHeight}">
+					<view class="info-title text-ellipsis" :style="{fontSize: nameSize, fontWeight: showStyle.nameWeight}">{{item.name}}</view>
+					<view class="info-tag flex align-items-center">
+						<view class="icon" :style="{width: iconSize, height: iconSize, backgroundSize: iconSize, backgroundImage: 'url('+ iconTime +')'}" v-if="showStyle.showIcon && iconTime"></view>
+						<text class="text flex-item text-ellipsis" :style="{fontSize: contentSize}">{{item.start_time}} | {{item.week}}</text>
+					</view>
+					<view class="info-tag flex align-items-center" v-if="item.organizing_method == 1">
+						<view class="icon" :style="{width: iconSize, height: iconSize, backgroundSize: iconSize, backgroundImage: 'url('+ iconNetwork +')'}" v-if="showStyle.showIcon && iconNetwork"></view>
+						<text class="text flex-item text-ellipsis" :style="{fontSize: contentSize}">报名成功后查看</text>
+					</view>
+					<view class="info-tag flex align-items-center" v-else-if="item.organizing_method == 2">
+						<view class="icon" :style="{width: iconSize, height: iconSize, backgroundSize: iconSize, backgroundImage: 'url('+ iconLocation +')'}" v-if="showStyle.showIcon && iconLocation"></view>
+						<text class="text flex-item text-ellipsis" :style="{fontSize: contentSize}">{{item.address}}</text>
+					</view>
+				</view>
+			</view>
+		</view>
+		<empty top="0" padding="0" width="200rpx" size="28rpx" title="暂无相关内容~" v-else></empty>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	import svgData from "@/common/svg.js"
+	export default {
+		name: "activityDiy",
+		props: ['showStyle', 'showParams'],
+		data() {
+			return {
+				// 活动列表
+				activityList: [],
+			};
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor
+			}),
+			titleFontSize() {
+				return uni.upx2px(this.showStyle.titleFontSize * 2) + 'px';
+			},
+			titleBtnSize() {
+				return uni.upx2px(this.showStyle.titleBtnSize * 2) + 'px';
+			},
+			titleIconMore() {
+				return svgData.svgToUrl("more", this.showStyle.titleBtnColor)
+			},
+			titleIconSize() {
+				return uni.upx2px(this.showStyle.titleIconSize * 2) + 'px';
+			},
+			titleSpace() {
+				return uni.upx2px(this.showStyle.titleSpace * 2) + 'px';
+			},
+			itemBorderRadius() {
+				return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
+			},
+			imgWidth() {
+				return uni.upx2px(this.showStyle.imgWidth * 2) + 'px';
+			},
+			imgHeight() {
+				return uni.upx2px(this.showStyle.imgHeight * 2) + 'px';
+			},
+			borderRadius() {
+				return uni.upx2px(this.showStyle.borderRadius * 2) + 'px';
+			},
+			nameSize() {
+				return uni.upx2px(this.showStyle.nameSize * 2) + 'px';
+			},
+			iconSize() {
+				return uni.upx2px(this.showStyle.iconSize * 2) + 'px';
+			},
+			iconTime() {
+				return svgData.svgToUrl("time", this.showStyle.iconColor)
+			},
+			iconLocation() {
+				return svgData.svgToUrl("location", this.showStyle.iconColor)
+			},
+			iconNetwork() {
+				return svgData.svgToUrl("network", this.showStyle.iconColor)
+			},
+			contentSize() {
+				return uni.upx2px(this.showStyle.contentSize * 2) + 'px';
+			},
+			paddingTop() {
+				return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
+			},
+			paddingLeft() {
+				return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
+			},
+			itemSpace() {
+				return uni.upx2px(this.showStyle.itemSpace * 2) + 'px';
+			},
+		},
+		watch: {
+			showParams: {
+				handler(value) {
+					if (value) this.getActivityList()
+				},
+				immediate: true,
+				deep: true
+			}
+		},
+		methods: {
+			// 获取活动列表
+			getActivityList() {
+				this.$util.request("activity.list", {
+					page: 1,
+					limit: this.showParams.count
+				}).then(res => {
+					if (res.code == 1) {
+						this.activityList = res.data.data
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取活动列表 ', error)
+				})
+			},
+			// 跳转详情
+			toDetails(id, state) {
+				if (state == 2) {
+					if (!uni.getStorageSync("token")) {
+						uni.showModal({
+							title: "系统提示",
+							content: "该活动为会员专属，请登录后查看",
+							confirmColor: this.themeColor,
+							confirmText: "前往登录",
+							success: (res) => {
+								if (res.confirm) {
+									uni.navigateTo({
+										url: "/pages/login/index"
+									})
+								}
+							}
+						})
+						return
+					}
+					this.$util.toPage({
+						mode: 1,
+						path: "/pagesActivity/index/details?id=" + id
+					})
+				} else {
+					this.$util.toPage({
+						mode: 1,
+						path: "/pagesActivity/index/details?id=" + id
+					})
+				}
+			},
+			// 跳转活动列表
+			toMore() {
+				this.$util.toPage({
+					mode: 1,
+					path: "/pagesActivity/index/index"
+				})
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.diy-activity {
+		.activity-title {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+		}
+
+		.activity-list {
+			display: flex;
+			flex-direction: column;
+
+			.list-item {
+				.item-image {
+					margin-right: 32rpx;
+				}
+
+				.item-info {
+					display: flex;
+					flex-direction: column;
+					justify-content: space-between;
+
+					.info-title {
+						color: #5A5B6E;
+						line-height: 1.3;
+					}
+
+					.info-tag {
+						.icon {
+							margin-right: 10rpx;
+						}
+
+						.text {
+							color: #8D929C;
+							line-height: 1.3;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

pages/component/diy/albumDiy.vue

@@ -0,0 +1,299 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-商会相册 开发者: 麦沃德科技-半夏 
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="component-album" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
+		<view class="album-title" :style="{marginBottom: titleSpace}" v-if="showParams.showTitle">
+			<view :style="{fontSize: titleFontSize,fontWeight: showStyle.titleFontStyle, color: showStyle.titleColor}">{{showParams.titleText}}</view>
+			<view :style="{fontSize: titleBtnSize, color: showStyle.titleBtnColor}" @click="toMore()">
+				<text v-if="showParams.titleBtnType == 'text'">{{showParams.titleBtnText}}</text>
+				<view :style="{'background-image': 'url('+ titleIconMore +')', width: titleIconSize, height: titleIconSize, backgroundSize: titleIconSize}" v-else-if="titleIconMore"></view>
+			</view>
+		</view>
+		<view class="album-list" :style="{rowGap: itemSpace}" v-if="albumList.length">
+			<view class="list-item flex" v-for="item in albumList" :key="item.id" @click="toDetails(item.id)">
+				<view class="item-timeline">
+					<view class="timeline-time" v-if="item.showTime.month && item.showTime.day">
+						<text :style="{fontSize: timeSize}">{{item.showTime.month}}/</text>
+						<text :style="{fontSize: timeSizeSmall}">{{item.showTime.day}}</text>
+					</view>
+					<view class="timeline-time" v-else>{{item.release_date}}</view>
+					<view class="timeline-point" :style="{background: showStyle.iconColor}"></view>
+					<view class="timeline-line"></view>
+				</view>
+				<view class="item-content flex-item">
+					<view class="content-title text-ellipsis-more" :style="{fontSize: nameSize, fontWeight: showStyle.nameWeight}">{{item.name}}</view>
+					<view class="content-box" v-if="item.files">
+						<block v-if="item.type == 1">
+							<view class="box-single" v-if="item.showImages.length == 1">
+								<image class="image" :src="item.showImages[0]" :style="{borderRadius: borderRadius}" mode="aspectFill"></image>
+							</view>
+							<view class="box-multiple" v-else-if="item.showImages.length">
+								<view class="multiple-image" v-for="(img, index) in item.showImages" :key="index">
+									<image class="image" :src="img" :style="{borderRadius: borderRadius}" mode="aspectFill"></image>
+								</view>
+							</view>
+						</block>
+						<view class="box-cover" v-else-if="item.type == 2">
+							<image class="cover-image" :src="item.image" mode="aspectFill"></image>
+							<image class="cover-play" src="/static/play.png" mode="aspectFit"></image>
+							<view class="cover-mask"></view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<empty top="0" padding="0" width="200rpx" size="28rpx" title="暂无相关内容~" v-else></empty>
+	</view>
+</template>
+
+<script>
+	import svgData from "@/common/svg.js"
+	export default {
+		name: "albumDiy",
+		props: ['showStyle', 'showParams'],
+		data() {
+			return {
+				// 相册列表
+				albumList: [],
+			};
+		},
+		computed: {
+			titleFontSize() {
+				return uni.upx2px(this.showStyle.titleFontSize * 2) + 'px';
+			},
+			titleBtnSize() {
+				return uni.upx2px(this.showStyle.titleBtnSize * 2) + 'px';
+			},
+			titleIconMore() {
+				return svgData.svgToUrl("more", this.showStyle.titleBtnColor)
+			},
+			titleIconSize() {
+				return uni.upx2px(this.showStyle.titleIconSize * 2) + 'px';
+			},
+			titleSpace() {
+				return uni.upx2px(this.showStyle.titleSpace * 2) + 'px';
+			},
+			itemBorderRadius() {
+				return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
+			},
+			timeSize() {
+				return uni.upx2px(this.showStyle.timeSize * 2) + 'px';
+			},
+			timeSizeSmall() {
+				return uni.upx2px((this.showStyle.timeSize - 4) * 2) + 'px';
+			},
+			nameSize() {
+				return uni.upx2px(this.showStyle.nameSize * 2) + 'px';
+			},
+			borderRadius() {
+				return uni.upx2px(this.showStyle.borderRadius * 2) + 'px';
+			},
+			paddingTop() {
+				return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
+			},
+			paddingLeft() {
+				return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
+			},
+			itemSpace() {
+				return uni.upx2px(this.showStyle.itemSpace * 2) + 'px';
+			},
+		},
+		watch: {
+			showParams: {
+				handler(value) {
+					if (value) this.getAlbumList()
+				},
+				immediate: true,
+				deep: true
+			}
+		},
+		methods: {
+			// 获取商会相册
+			getAlbumList() {
+				this.$util.request("album.albumDiyList", {
+					limit: this.showParams.count,
+				}).then(res => {
+					if (res.code == 1) {
+						this.albumList = res.data
+						for (let i in this.albumList) {
+							if (this.albumList[i].release_date) {
+								this.albumList[i].showTime = this.cutDate(this.albumList[i].release_date)
+							}
+							if (this.albumList[i].type == 1 && this.albumList[i].files) {
+								if (typeof(this.albumList[i].files) == "string") {
+									this.albumList[i].showImages = this.albumList[i].files.split(",")
+								} else {
+									this.albumList[i].showImages = this.albumList[i].files
+								}
+							}
+						}
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取相册列表', error)
+				})
+			},
+			// 截取日期
+			cutDate(time) {
+				let parts = time.split('/');
+				let result = {}
+				if (parts && parts.length == 3) {
+					result = {
+						month: parts[1],
+						day: parts[2]
+					};
+				}
+				return result
+			},
+			// 跳转相册详情
+			toDetails(id) {
+				this.$util.toPage({
+					mode: 1,
+					path: "/pagesTools/album/details?id=" + id
+				})
+			},
+			// 跳转相册列表
+			toMore() {
+				this.$util.toPage({
+					mode: 1,
+					path: "/pagesTools/album/index"
+				})
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.component-album {
+		.album-title {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+		}
+
+		.album-list {
+			display: flex;
+			flex-direction: column;
+
+			.list-item {
+				.item-timeline {
+					display: flex;
+					flex-direction: column;
+
+					.timeline-time {
+						color: #5A5B6E;
+						font-size: 32rpx;
+						font-weight: 600;
+						line-height: 44rpx;
+					}
+
+					.timeline-point {
+						width: 20rpx;
+						height: 20rpx;
+						border-radius: 4rpx;
+						background: var(--theme-color);
+					}
+
+					.timeline-line {
+						width: 2rpx;
+						height: 100%;
+						flex: 1;
+						background: #F0F0F0;
+					}
+				}
+
+				.item-content {
+					margin-left: 16rpx;
+					position: relative;
+
+					.content-title {
+						color: #5A5B6E;
+						font-size: 28rpx;
+						line-height: 40rpx;
+					}
+
+					.content-box {
+						margin-top: 16rpx;
+
+						.box-single {
+							width: 100%;
+							height: 240rpx;
+							border-radius: 16rpx;
+							overflow: hidden;
+						}
+
+						.box-multiple {
+							display: flex;
+							flex-wrap: wrap;
+							column-gap: 2%;
+							row-gap: 16rpx;
+
+							.multiple-image {
+								width: 32%;
+								height: 0;
+								padding-top: 32%;
+								border-radius: 16rpx;
+								overflow: hidden;
+								position: relative;
+
+								.image {
+									position: absolute;
+									top: 0;
+									left: 0;
+									width: 100%;
+									height: 100%;
+								}
+							}
+						}
+
+						.box-cover {
+							width: 100%;
+							height: 240rpx;
+							border-radius: 16rpx;
+							overflow: hidden;
+							position: relative;
+
+							.cover-image {
+								width: 100%;
+								height: 100%;
+							}
+
+							.cover-play {
+								position: absolute;
+								top: 50%;
+								left: 50%;
+								transform: translate(-50%, -50%);
+								width: 64rpx;
+								height: 64rpx;
+								border-radius: 50%;
+							}
+
+							.cover-mask {
+								position: absolute;
+								top: 0;
+								right: 0;
+								bottom: 0;
+								left: 0;
+								background: rgba(0, 0, 0, 0.3);
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

pages/component/diy/articleDiy.vue

@@ -0,0 +1,231 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-平台动态 开发者: 麦沃德科技-半夏 
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="diy-article" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
+		<view class="article-title" :style="{marginBottom: titleSpace}" v-if="showParams.showTitle">
+			<view :style="{fontSize: titleFontSize,fontWeight: showStyle.titleFontStyle, color: showStyle.titleColor}">{{showParams.titleText}}</view>
+			<view :style="{fontSize: titleBtnSize, color: showStyle.titleBtnColor}" @click="toMore()">
+				<text v-if="showParams.titleBtnType == 'text'">{{showParams.titleBtnText}}</text>
+				<view :style="{'background-image': 'url('+ titleIconMore +')', width: titleIconSize, height: titleIconSize, backgroundSize: titleIconSize}" v-else-if="titleIconMore"></view>
+			</view>
+		</view>
+		<view class="article-list" :style="{rowGap: itemSpace }" v-if="articleList.length">
+			<view class="list-item" :class="{'flex-row-reverse': showStyle.imgFloat == 'right'}" v-for="(item,index) in articleList" :key="index" @click="toDetails(item)">
+				<view class="item-left" v-if="showParams.showImg">
+					<image mode="aspectFill" :src="item.image" :style="{ width: imgWidth, height: imgHeight, float: showStyle.imgFloat || 'left', borderRadius: borderRadius}"></image>
+				</view>
+				<view class="item-right" :style="{height: imgHeight}">
+					<view class="right-title" :style="{fontSize: nameSize, fontWeight: showStyle.nameWeight}">{{item.title}}</view>
+					<view class="right-group flex align-items-center">
+						<view class="group-view flex align-items-center" v-if="showParams.showReadNum">
+							<image class="icon" src="/static/see.png" mode="aspectFit" :style="{width: viewSize, height: viewSize}"></image>
+							<text class="number" :style="{fontSize: dateSize}">{{item.read_num}}</text>
+						</view>
+						<view class="group-date flex-item" :style="{fontSize: dateSize, textAlign: (!showParams.showReadNum && showStyle.imgFloat == 'right') ? 'left' : 'right'}">{{item.createtime}}</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<empty top="0" padding="0" width="200rpx" size="28rpx" title="暂无相关内容~" v-else></empty>
+	</view>
+</template>
+
+<script>
+	import svgData from "@/common/svg.js"
+	export default {
+		name: 'articleDiy',
+		props: ['showStyle', 'showParams'],
+		data() {
+			return {
+				articleList: [],
+			}
+		},
+		computed: {
+			titleFontSize() {
+				return uni.upx2px(this.showStyle.titleFontSize * 2) + 'px';
+			},
+			titleBtnSize() {
+				return uni.upx2px(this.showStyle.titleBtnSize * 2) + 'px';
+			},
+			titleIconMore() {
+				return svgData.svgToUrl("more", this.showStyle.titleBtnColor)
+			},
+			titleIconSize() {
+				return uni.upx2px(this.showStyle.titleIconSize * 2) + 'px';
+			},
+			titleSpace() {
+				return uni.upx2px(this.showStyle.titleSpace * 2) + 'px';
+			},
+			itemBorderRadius() {
+				return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
+			},
+			imgWidth() {
+				return uni.upx2px(this.showStyle.imgWidth * 2) + 'px';
+			},
+			imgHeight() {
+				return uni.upx2px(this.showStyle.imgHeight * 2) + 'px';
+			},
+			borderRadius() {
+				return uni.upx2px(this.showStyle.borderRadius * 2) + 'px';
+			},
+			nameSize() {
+				return uni.upx2px(this.showStyle.nameSize * 2) + 'px';
+			},
+			dateSize() {
+				return uni.upx2px(this.showStyle.dateSize * 2) + 'px';
+			},
+			viewSize() {
+				return uni.upx2px((this.showStyle.dateSize + 4) * 2) + 'px';
+			},
+			paddingTop() {
+				return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
+			},
+			paddingLeft() {
+				return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
+			},
+			itemSpace() {
+				return uni.upx2px(this.showStyle.itemSpace * 2) + 'px';
+			},
+		},
+		watch: {
+			showParams: {
+				handler(value) {
+					if (value) this.getArticleList()
+				},
+				immediate: true,
+				deep: true
+			}
+		},
+		methods: {
+			// 获取新闻列表
+			getArticleList() {
+				let catId = ""
+				if (this.showParams.category) {
+					catId = this.showParams.category
+				} else if (this.showParams.link && this.showParams.link.type == "Article") {
+					catId = this.showParams.link.path.split("?id=")[1]
+				}
+				this.$util.request("main.article.list", {
+					page: 1,
+					limit: this.showParams.count,
+					cat_id: catId
+				}).then(res => {
+					if (res.code == 1) {
+						this.articleList = res.data.data
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取新闻列表 ', error)
+				})
+			},
+			// 跳转查看更多
+			toMore() {
+				this.$util.toPage({
+					mode: 1,
+					path: `/pages/article/index?id=${this.showParams.category}&title=${encodeURIComponent(this.showParams.titleText || "")}`
+				})
+			},
+			// 跳转新闻详情
+			toDetails(item) {
+				if (item.type == 2) {
+					this.$util.toPage({
+						mode: 4,
+						path: item.link,
+					})
+					this.$util.request("main.article.updateReadNum", { id: item.id })
+				} else {
+					var title = ""
+					if (this.showTitle) title = this.showParams.titleText || ""
+					else title = this.showParams.categoryName || ""
+					this.$util.toPage({
+						mode: 1,
+						path: `/pages/article/details?id=${item.id}&title=${title || ""}`
+					})
+				}
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.diy-article {
+		.article-title {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+		}
+
+		.article-list {
+			display: flex;
+			flex-direction: column;
+
+			.list-item {
+				overflow: hidden;
+				display: flex;
+				align-items: center;
+				column-gap: 10px;
+
+				&.flex-row-reverse {
+					flex-direction: row-reverse;
+				}
+
+				.item-right {
+					display: flex;
+					flex-direction: column;
+					justify-content: space-between;
+					flex: 1;
+
+					.right-title {
+						line-height: 1.3;
+						color: #333;
+						display: -webkit-box;
+						word-break: break-all;
+						text-overflow: ellipsis;
+						overflow: hidden;
+						-webkit-box-orient: vertical;
+						-webkit-line-clamp: 3;
+					}
+
+					.right-group {
+						margin-top: 16rpx;
+						column-gap: 8px;
+
+						.group-view {
+							.icon {
+								width: 32rpx;
+								height: 32rpx;
+							}
+
+							.number {
+								margin-left: 8rpx;
+								color: #5A5B6E;
+								font-size: 24rpx;
+								line-height: 1.2;
+							}
+						}
+
+						.group-date {
+							color: #5A5B6E;
+							line-height: 1.2;
+							text-align: right;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

pages/component/diy/blankDiy.vue

@@ -0,0 +1,30 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-辅助空白 开发者: 麦沃德科技-半夏 
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="diy-blank" :style="{height: height, background: showStyle.background, borderRadius: itemBorderRadius}"></view>
+</template>
+
+<script>
+	export default {
+		name: 'blankDiy',
+		props: ['showStyle'],
+		computed: {
+			itemBorderRadius() {
+				return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
+			},
+			height() {
+				return uni.upx2px(this.showStyle.height * 2) + 'px';
+			},
+		},
+	}
+</script>

pages/component/diy/carouselDiy.vue

@@ -0,0 +1,147 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-图片轮播 开发者: 麦沃德科技-半夏 
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="diy-carousel" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
+		<swiper class="carousel-list" autoplay :interval="showParams.interval" :duration="500" circular @change='change' :previous-margin="showParams.type === 'card' ? '120rpx' : '0rpx'" :next-margin="showParams.type === 'card' ? '120rpx' : '0rpx'" :style="{height: height, marginTop:showParams.type === 'card' ? '20rpx' : '0rpx', borderRadius: borderRadius}">
+			<swiper-item v-for="(item, index) in showData" :key='index'>
+				<button class="list-item clear" :class="[showParams.type != 'card' ? '' : (current == index ? 'crown-active' : 'crown')]" open-type="contact" :style="{width: iconSize, height: iconSize}" v-if="item.link && item.link.type == 'Service'">
+					<image class="item-img" :src="getImagePath(item.imgUrl)" :style="{ borderRadius: showParams.type === 'card' ? '10rpx' : '0rpx'}" mode="aspectFill" @click="onClick(item.link)"></image>
+				</button>
+				<view class="list-item" :class="[showParams.type != 'card' ? '' : (current == index ? 'crown-active' : 'crown')]" v-else>
+					<image class="item-img" :src="getImagePath(item.imgUrl)" :style="{ borderRadius: showParams.type === 'card' ? '10rpx' : '0rpx'}" mode="aspectFill" @click="onClick(item.link)"></image>
+					<!-- #ifdef H5 -->
+					<wx-open-launch-weapp class="item-absolute" :appid="item.link.appid" :path="item.link.path" v-if="item.link && item.link.type == 'WXMp'">
+						<script type="text/wxtag-template">
+							<style> .btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
+							<view class="btn"></view>
+						</script>
+					</wx-open-launch-weapp>
+					<!-- #endif -->
+				</view>
+			</swiper-item>
+		</swiper>
+		<view class="carousel-dots flex" :style="{paddingBottom: paddingTop}">
+			<view class="dots-item" :style="{background: current == i ? (showStyle.dotColor || themeColor) : '#ffffff'}" v-for="(d, i) in showData" :key='i'></view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	export default {
+		name: 'carouselDiy',
+		props: ['showStyle', 'showData', 'showParams', 'domain'],
+		data() {
+			return {
+				current: 0,
+			}
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+			}),
+			itemBorderRadius() {
+				return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
+			},
+			height() {
+				return uni.upx2px(this.showStyle.height * 2) + 'px';
+			},
+			borderRadius() {
+				return uni.upx2px(this.showStyle.borderRadius * 2) + 'px';
+			},
+			paddingTop() {
+				return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
+			},
+			paddingLeft() {
+				return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
+			},
+		},
+		methods: {
+			// 获取图片地址
+			getImagePath(url) {
+				if (url.indexOf('http') > -1) {
+					return url
+				} else {
+					return this.domain + url
+				}
+			},
+			// 点击事件
+			onClick(e) {
+				if (!e) return;
+				this.$emit("onClick", e)
+			},
+			// 改变事件
+			change(event) {
+				this.current = event.detail.current
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.diy-carousel {
+		position: relative;
+
+		.carousel-list {
+			overflow: hidden;
+
+			.list-item {
+				position: relative;
+				height: 100%;
+				transition: 1.2s;
+
+				&.crown {
+					transform: scale(0.93, 0.85);
+				}
+
+				&.crown-active {
+					transform: scale(1);
+				}
+
+				.item-img {
+					width: 100%;
+					height: 100%;
+				}
+
+				.item-absolute {
+					display: block;
+					position: absolute;
+					top: 0;
+					left: 0;
+					right: 0;
+					bottom: 0;
+				}
+			}
+		}
+
+		.carousel-dots {
+			display: flex;
+			position: absolute;
+			left: 50%;
+			transform: translateX(-50%);
+			bottom: 24rpx;
+
+			.dots-item {
+				width: 24rpx;
+				height: 8rpx;
+				border-radius: 8rpx;
+				background: #FFFFFF;
+				margin-right: 4rpx;
+
+				&:last-child {
+					margin-right: 0;
+				}
+			}
+		}
+	}
+</style>

pages/component/diy/chainsDiy.vue

@@ -0,0 +1,299 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-活动接龙 开发者: 麦沃德科技-半夏 
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="diy-chains" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
+		<view class="chains-title" :style="{marginBottom: titleSpace}" v-if="showParams.showTitle">
+			<view :style="{fontSize: titleFontSize,fontWeight: showStyle.titleFontStyle, color: showStyle.titleColor}">{{showParams.titleText}}</view>
+			<view :style="{fontSize: titleBtnSize, color: showStyle.titleBtnColor}" @click="toMore()">
+				<text v-if="showParams.titleBtnType == 'text'">{{showParams.titleBtnText}}</text>
+				<view :style="{'background-image': 'url('+ titleIconMore +')', width: titleIconSize, height: titleIconSize, backgroundSize: titleIconSize}" v-else-if="titleIconMore"></view>
+			</view>
+		</view>
+		<view class="chains-list" :style="{rowGap: itemSpace}" v-if="chainsList.length">
+			<view class="list-item" v-for="item in chainsList" :key="item.id" @click="toDetails(item.id, item.jielong_auth)">
+				<view class="item-title text-ellipsis" :style="{fontSize: nameSize, fontWeight: showStyle.nameWeight}">{{item.name}}</view>
+				<view class="item-tag flex justify-content-between">
+					<view class="tag-box flex" :style="{fontSize: contentSize}">
+						<text style="margin-left: 0;">{{item.expire_time}}</text>
+						<text v-if="item.type == 1">自由接龙</text>
+						<text v-else>限定接龙</text>
+					</view>
+					<view class="tag-box flex" :style="{fontSize: contentSize}">
+						<text>浏览{{item.page_view}}</text>
+						<text>参与{{item.part_total}}</text>
+					</view>
+				</view>
+				<view class="item-btn flex align-items-center">
+					<!-- #ifdef MP-WEIXIN -->
+					<button open-type="share" class="btn-box clear flex align-items-center" @click.stop="setShareData(item)">
+						<view class="icon" :style="{width: iconSize, height: iconSize, backgroundSize: iconSize, backgroundImage: 'url('+ iconInvite +')'}" v-if="showStyle.showIcon && iconInvite"></view>
+						<text class="text" :style="{fontSize: btnSize}">邀请填写</text>
+					</button>
+					<!-- #endif -->
+					<!-- #ifndef MP-WEIXIN -->
+					<view class="btn-box flex align-items-center">
+						<view class="icon" :style="{width: iconSize, height: iconSize, backgroundSize: iconSize, backgroundImage: 'url('+ iconInvite +')'}" v-if="showStyle.showIcon && iconInvite"></view>
+						<text class="text" :style="{fontSize: btnSize}">填写接龙</text>
+					</view>
+					<!-- #endif -->
+					<view class="btn-line"></view>
+					<view class="btn-box justify-content-end flex align-items-center" @click.stop="onContact(item.mobile)">
+						<view class="icon" :style="{width: iconSize, height: iconSize, backgroundSize: iconSize, backgroundImage: 'url('+ iconPhone +')'}" v-if="showStyle.showIcon && iconPhone"></view>
+						<text class="text" :style="{fontSize: btnSize}">电话</text>
+					</view>
+				</view>
+			</view>
+		</view>
+		<empty top="0" padding="0" width="200rpx" size="28rpx" title="暂无相关内容~" v-else></empty>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	import svgData from "@/common/svg.js"
+	export default {
+		name: "chainsDiy",
+		props: ['showStyle', 'showParams'],
+		data() {
+			return {
+				chainsList: [],
+			};
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+				jielongImg: state => state.app.jielongImg,
+			}),
+			titleFontSize() {
+				return uni.upx2px(this.showStyle.titleFontSize * 2) + 'px';
+			},
+			titleBtnSize() {
+				return uni.upx2px(this.showStyle.titleBtnSize * 2) + 'px';
+			},
+			titleIconMore() {
+				return svgData.svgToUrl("more", this.showStyle.titleBtnColor)
+			},
+			titleIconSize() {
+				return uni.upx2px(this.showStyle.titleIconSize * 2) + 'px';
+			},
+			titleSpace() {
+				return uni.upx2px(this.showStyle.titleSpace * 2) + 'px';
+			},
+			itemBorderRadius() {
+				return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
+			},
+			nameSize() {
+				return uni.upx2px(this.showStyle.nameSize * 2) + 'px';
+			},
+			contentSize() {
+				return uni.upx2px(this.showStyle.contentSize * 2) + 'px';
+			},
+			iconSize() {
+				return uni.upx2px(this.showStyle.iconSize * 2) + 'px';
+			},
+			btnSize() {
+				return uni.upx2px(this.showStyle.btnSize * 2) + 'px';
+			},
+			iconInvite() {
+				return svgData.svgToUrl("invite", this.showStyle.iconColor)
+			},
+			iconPhone() {
+				return svgData.svgToUrl("phone", this.showStyle.iconColor)
+			},
+			paddingTop() {
+				return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
+			},
+			paddingLeft() {
+				return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
+			},
+			itemSpace() {
+				return uni.upx2px(this.showStyle.itemSpace * 2) + 'px';
+			},
+		},
+		watch: {
+			showParams: {
+				handler(value) {
+					if (value) this.getChainsList()
+				},
+				immediate: true,
+				deep: true
+			}
+		},
+		methods: {
+			// 获取活动接龙
+			getChainsList() {
+				this.$util.request("sequence.chainsList", {
+					page: 1,
+					limit: this.showParams.count,
+				}).then(res => {
+					if (res.code == 1) {
+						this.chainsList = res.data.data
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取接龙列表', error)
+				})
+			},
+			// 跳转接龙详情 
+			toDetails(id, state) {
+				if (state == 2) {
+					this.getMemberState(() => {
+						this.$util.toPage({
+							mode: 1,
+							path: "/pagesTools/sequence/details?id=" + id
+						})
+					})
+				} else {
+					this.$util.toPage({
+						mode: 1,
+						path: "/pagesTools/sequence/details?id=" + id
+					})
+				}
+			},
+			// 获取会员状态
+			getMemberState(fn) {
+				uni.showLoading({
+					title: "加载中",
+					mask: true,
+				})
+				this.$util.request("member.state").then(res => {
+					uni.hideLoading()
+					if (res.code == 1) {
+						if (res.data.state.state == 6) {
+							fn()
+						} 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.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取会员状态 ', error)
+				})
+			},
+			// 跳转接龙列表
+			toMore() {
+				this.$util.toPage({
+					mode: 1,
+					path: "/pagesTools/sequence/index"
+				})
+			},
+			// 联系电话
+			onContact(phone) {
+				this.$util.toPage({
+					mode: 6,
+					phone: phone,
+				})
+			},
+			// 设置分享数据
+			setShareData(item) {
+				this.$emit('setShareData', {
+					title: item.name,
+					path: '/pagesTools/sequence/details?id=' + item.id,
+					imageUrl: this.jielongImg,
+				})
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.diy-chains {
+		.chains-title {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+		}
+
+		.chains-list {
+			display: flex;
+			flex-direction: column;
+
+			.list-item {
+				.item-title {
+					color: #5A5B6E;
+					line-height: 1.3;
+				}
+
+				.item-tag {
+					margin-top: 16rpx;
+
+					.tag-box {
+						text {
+							color: #999999;
+							line-height: 1.4;
+							margin-left: 16rpx;
+						}
+					}
+				}
+
+				.item-btn {
+					margin-top: 32rpx;
+					border-top: 1rpx solid #E8E8E8;
+					padding-top: 32rpx;
+
+					.btn-box {
+						flex: 1;
+						padding: 0 48rpx;
+
+						.text {
+							margin-left: 8rpx;
+							color: #5A5B6E;
+							line-height: 1.4;
+						}
+					}
+
+					.btn-line {
+						width: 0;
+						height: 32rpx;
+						border-left: 1rpx solid #E8E8E8;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/component/diy/cubeDiy.vue

@@ -0,0 +1,266 @@
+	<!-- +----------------------------------------------------------------------
+	| 麦沃德科技赋能开发者，助力商协会发展
+	+----------------------------------------------------------------------
+	| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
+	+----------------------------------------------------------------------
+	| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+	+----------------------------------------------------------------------
+	| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
+	+----------------------------------------------------------------------
+	| 组件-图片魔方 开发者: 麦沃德科技-半夏 
+	+---------------------------------------------------------------------- -->
+
+	<template>
+		<view class="diy-cube" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
+			<!-- 橱窗布局 -->
+			<view class="cube-display" v-if="showStyle.layout == -1 ">
+				<view class="display-left" :style="{width: showStyle.imgWidth + '%', paddingReft: itemSpace}" v-if="showStyle.imgFloat == 'left'">
+					<button class="clear" open-type="contact" v-if="showData[0].link && showData[0].link.type == 'Service'">
+						<image class="image" :src="getImagePath(showData[0].imgUrl)" mode="widthFix" :style="{borderRadius: borderRadius}"></image>
+					</button>
+					<block v-else>
+						<image class="image" @click="onClick(showData[0].link)" :src="getImagePath(showData[0].imgUrl)" mode="widthFix" :style="{borderRadius: borderRadius}"></image>
+						<!-- #ifdef H5 -->
+						<wx-open-launch-weapp class="diy-cube-absolute" :appid="showData[0].link.appid" :path="showData[0].link.path" v-if="showData[0].link && showData[0].link.type == 'WXMp'">
+							<script type="text/wxtag-template">
+								<style> .btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
+								<view class="btn"></view>
+							</script>
+						</wx-open-launch-weapp>
+						<!-- #endif -->
+					</block>
+				</view>
+				<view class="display-right" :style="'width:' + (100 - showStyle.imgWidth) + '%; ' + (showStyle.imgFloat == 'right' ? ('padding-right:' + itemSpace) : ('padding-left:' + itemSpace))" v-if="showStyle.model == 1">
+					<view class="right-1" v-if="showData.length >= 2" :style="{paddingBottom: itemSpace}">
+						<button class="clear" open-type="contact" v-if="showData[1].link && showData[1].link.type == 'Service'">
+							<image class="image" :src="getImagePath(showData[1].imgUrl)" mode="widthFix" :style="{borderRadius: borderRadius}"></image>
+						</button>
+						<block v-else>
+							<image class="image" @click="onClick(showData[1].link)" :src="getImagePath(showData[1].imgUrl)" mode="widthFix" :style="{borderRadius: borderRadius}"></image>
+							<!-- #ifdef H5 -->
+							<wx-open-launch-weapp class="diy-cube-absolute" :appid="showData[1].link.appid" :path="showData[1].link.path" v-if="showData[1].link && showData[1].link.type == 'WXMp'">
+								<script type="text/wxtag-template">
+									<style> .btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
+									<view class="btn"></view>
+								</script>
+							</wx-open-launch-weapp>
+							<!-- #endif -->
+						</block>
+					</view>
+					<view class="right-2" :style="{paddingTop: itemSpace}">
+						<view class="right-2-left" v-if="showData.length >= 3" :style="{paddingRight: itemSpace}">
+							<button class="clear" open-type="contact" v-if="showData[2].link && showData[2].link.type == 'Service'">
+								<image class="image" :src="getImagePath(showData[2].imgUrl)" mode="widthFix" :style="{borderRadius: borderRadius}"></image>
+							</button>
+							<block v-else>
+								<image class="image" @click="onClick(showData[2].link)" :src="getImagePath(showData[2].imgUrl)" mode="widthFix" :style="{borderRadius: borderRadius}"></image>
+								<!-- #ifdef H5 -->
+								<wx-open-launch-weapp class="diy-cube-absolute" :appid="showData[2].link.appid" :path="showData[2].link.path" v-if="showData[2].link && showData[2].link.type == 'WXMp'">
+									<script type="text/wxtag-template">
+										<style> .btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
+										<view class="btn"></view>
+									</script>
+								</wx-open-launch-weapp>
+								<!-- #endif -->
+							</block>
+						</view>
+						<view class="right-2-right" v-if="showData.length >= 4" :style="{paddingLeft: itemSpace}">
+							<button class="clear" open-type="contact" v-if="showData[3].link && showData[3].link.type == 'Service'">
+								<image class="image" :src="getImagePath(showData[3].imgUrl)" mode="widthFix" :style="{borderRadius: borderRadius}"></image>
+							</button>
+							<block v-else>
+								<image class="image" @click="onClick(showData[3].link)" :src="getImagePath(showData[3].imgUrl)" mode="widthFix" :style="{borderRadius: borderRadius}"></image>
+								<!-- #ifdef H5 -->
+								<wx-open-launch-weapp class="diy-cube-absolute" :appid="showData[3].link.appid" :path="showData[3].link.path" v-if="showData[3].link && showData[3].link.type == 'WXMp'">
+									<script type="text/wxtag-template">
+										<style> .btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
+										<view class="btn"></view>
+									</script>
+								</wx-open-launch-weapp>
+								<!-- #endif -->
+							</block>
+						</view>
+					</view>
+				</view>
+				<view class="display-right" :style="'width:' + (100 - showStyle.imgWidth) + '%; ' + (showStyle.imgFloat == 'right' ? ('padding-right:' + itemSpace) : ('padding-left:' + itemSpace))" v-else>
+					<view class="right-3" :style="{margin: '-' + itemSpace + ' 0', height: `calc(100% + ${itemSpace} + ${itemSpace})`}">
+						<view class="item" v-for="(img, num) in showData" :key="num" v-if="num > 0 && num < 4" :style="{height:`calc(100% / ${showData.length > 4 ? 3 : showData.length - 1})`, padding: itemSpace + ' 0'}">
+							<button class="clear" open-type="contact" v-if="img.link && img.link.type == 'Service'">
+								<image class="image" :src="getImagePath(img.imgUrl)" mode="widthFix" :style="{borderRadius: borderRadius}"></image>
+							</button>
+							<block v-else>
+								<image class="image" @click="onClick(img.link)" :src="getImagePath(img.imgUrl)" mode="widthFix" :style="{borderRadius: borderRadius}"></image>
+								<!-- #ifdef H5 -->
+								<wx-open-launch-weapp class="diy-cube-absolute" :appid="img.link.appid" :path="img.link.path" v-if="img.link && img.link.type == 'WXMp'">
+									<script type="text/wxtag-template">
+										<style> .btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
+										<view class="btn"></view>
+									</script>
+								</wx-open-launch-weapp>
+								<!-- #endif -->
+							</block>
+						</view>
+					</view>
+				</view>
+				<view class="display-left" :style="{width: showStyle.imgWidth + '%', paddingLeft: itemSpace}" v-if="showStyle.imgFloat == 'right'">
+					<button class="clear" open-type="contact" v-if="showData[0].link && showData[0].link.type == 'Service'">
+						<image class="image" :src="getImagePath(showData[0].imgUrl)" mode="widthFix" :style="{borderRadius: borderRadius}"></image>
+					</button>
+					<block v-else>
+						<image class="image" @click="onClick(showData[0].link)" :src="getImagePath(showData[0].imgUrl)" mode="widthFix" :style="{borderRadius: borderRadius}"></image>
+						<!-- #ifdef H5 -->
+						<wx-open-launch-weapp class="diy-cube-absolute" :appid="showData[0].link.appid" :path="showData[0].link.path" v-if="showData[0].link && showData[0].link.type == 'WXMp'">
+							<script type="text/wxtag-template">
+								<style> .btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
+								<view class="btn"></view>
+							</script>
+						</wx-open-launch-weapp>
+						<!-- #endif -->
+					</block>
+				</view>
+			</view>
+			<!-- 分列布局 -->
+			<view class="cube-list" :style="{margin: '-' + itemSpace}" v-else>
+				<view class="list-item" :style="{width: `calc(100% / ${showStyle.layout})`, padding: itemSpace}" v-for="(item, index) in showData" :key="index">
+					<button class="clear" open-type="contact" v-if="item.link && item.link.type == 'Service'">
+						<image :src="getImagePath(item.imgUrl)" mode="widthFix" :style="{borderRadius: borderRadius}"></image>
+					</button>
+					<block v-else>
+						<image :src="getImagePath(item.imgUrl)" mode="widthFix" :style="{borderRadius: borderRadius}" @click="onClick(item.link)"></image>
+						<!-- #ifdef H5 -->
+						<wx-open-launch-weapp class="diy-cube-absolute" :appid="item.link.appid" :path="item.link.path" v-if="item.link && item.link.type == 'WXMp'">
+							<script type="text/wxtag-template">
+								<style> .btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
+								<view class="btn"></view>
+							</script>
+						</wx-open-launch-weapp>
+						<!-- #endif -->
+					</block>
+				</view>
+			</view>
+		</view>
+	</template>
+
+	<script>
+		export default {
+			name: 'cubeDiy',
+			props: ['showStyle', 'showData', 'domain'],
+			computed: {
+				itemBorderRadius() {
+					return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
+				},
+				height() {
+					return uni.upx2px(this.showStyle.height * 2) + 'px';
+				},
+				borderRadius() {
+					return uni.upx2px(this.showStyle.borderRadius * 2) + 'px';
+				},
+				paddingTop() {
+					return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
+				},
+				paddingLeft() {
+					return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
+				},
+				itemSpace() {
+					return uni.upx2px(this.showStyle.itemSpace) + 'px';
+				},
+			},
+			methods: {
+				// 获取图片地址
+				getImagePath(url) {
+					if (url.indexOf('http') > -1) {
+						return url
+					} else {
+						return this.domain + url
+					}
+				},
+				// 点击事件
+				onClick(e) {
+					if (!e) return;
+					this.$emit("onClick", e)
+				},
+			}
+		}
+	</script>
+
+	<style lang="scss">
+		.diy-cube {
+			overflow: hidden;
+
+			.cube-list {
+				display: flex;
+				flex-wrap: wrap;
+
+				.list-item {
+					position: relative;
+					width: 100%;
+					height: 100%;
+				}
+			}
+
+			.cube-display {
+				width: 100%;
+				display: flex;
+				align-items: center;
+
+				.display-left {
+					width: 50%;
+					height: 100%;
+					position: relative;
+				}
+
+				.display-right {
+					width: auto;
+					height: 100%;
+					display: flex;
+					flex-direction: column;
+
+					.right-1 {
+						width: 100%;
+						height: 50%;
+						position: relative;
+					}
+
+					.right-2 {
+						width: 100%;
+						height: 50%;
+						display: flex;
+
+						.right-2-left {
+							position: relative;
+							width: 50%;
+							height: 100%;
+						}
+
+						.right-2-right {
+							position: relative;
+							width: 50%;
+							height: 100%;
+						}
+					}
+
+					.right-3 {
+						width: 100%;
+						height: 100%;
+						display: flex;
+						flex-direction: column;
+
+						.item {
+							position: relative;
+							width: 100%;
+							flex: 1;
+						}
+					}
+				}
+			}
+
+			.diy-cube-absolute {
+				display: block;
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+			}
+		}
+	</style>

pages/component/diy/demandDiy.vue

@@ -0,0 +1,335 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-会员供需 开发者: 麦沃德科技-半夏 
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="diy-demand" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
+		<view class="demand-title" :style="{marginBottom: titleSpace}" v-if="showParams.showTitle">
+			<view :style="{fontSize: titleFontSize,fontWeight: showStyle.titleFontStyle, color: showStyle.titleColor}">{{showParams.titleText}}</view>
+			<view :style="{fontSize: titleBtnSize, color: showStyle.titleBtnColor}" @click="toMore()">
+				<text v-if="showParams.titleBtnType == 'text'">{{showParams.titleBtnText}}</text>
+				<view :style="{'background-image': 'url('+ titleIconMore +')', width: titleIconSize, height: titleIconSize, backgroundSize: titleIconSize}" v-else-if="titleIconMore"></view>
+			</view>
+		</view>
+		<view class="demand-list" :style="{rowGap: itemSpace }" v-if="demandList.length">
+			<view class="list-item" v-for="(item, index) in demandList" :key="index" @click="toDetails(item.id)">
+				<view class="item-top flex align-items-center">
+					<image class="top-avatar" :src="item.member.avatar" mode="aspectFill"></image>
+					<view class="top-info flex-item">
+						<view class="info-title text-ellipsis">{{ item.member.name }}</view>
+						<view class="info-subtitle text-ellipsis">{{ item.member.level_name }} | {{ item.time }}</view>
+					</view>
+					<view class="top-btn" @click.stop="onContact(item.member.mobile)" :style="{background: showStyle.btnColor, color: showStyle.btnTextColor}" v-if="showParams.showContact">联系TA</view>
+				</view>
+				<view class="item-center">
+					<view class="center-title text-ellipsis" :style="{fontSize: nameSize, fontWeight: showStyle.nameWeight}">{{ item.title }}</view>
+					<view class="center-content text-ellipsis-more" :style="{fontSize: contentSize}">{{ item.content }}</view>
+					<view class="center-image" :class="{'special-image': (item.images.length < 3 || item.images.length === 4)}" v-if="item.images.length">
+						<view class="image-box" v-for="(img, num) in item.images" :key="num" @click.stop="previewImage(item.images, num)">
+							<image class="image" :src="img" mode="aspectFill"></image>
+						</view>
+					</view>
+				</view>
+				<view class="item-bottom flex justify-content-between align-items-center">
+					<view class="bottom-label flex-item">
+						<view class="label-box inline-flex align-items-center" v-if="item.address">
+							<view class="box-icon" :style="{'background-image': 'url('+ iconAddress +')'}" v-if="iconAddress"></view>
+							<text class="box-text flex-item text-ellipsis" :style="{color: showStyle.addressColor}">{{item.address}}</text>
+							<view class="box-bg" :style="{background: showStyle.addressColor}"></view>
+						</view>
+					</view>
+					<view class="bottom-other flex align-items-center">
+						<view class="other-item flex align-items-center">
+							<image class="icon" src="/static/see.png" mode="aspectFit"></image>
+							<text class="text">{{ item.page_view }}</text>
+						</view>
+						<button open-type="share" class="other-item clear flex align-items-center" @click.stop="setShareData(item)">
+							<image class="icon" src="/static/share.png" mode="aspectFit"></image>
+							<text class="text">分享</text>
+						</button>
+					</view>
+				</view>
+			</view>
+		</view>
+		<empty top="0" padding="0" width="200rpx" size="28rpx" title="暂无相关内容~" v-else></empty>
+	</view>
+</template>
+
+<script>
+	import svgData from "@/common/svg.js"
+	export default {
+		name: 'demandDiy',
+		props: ['showStyle', 'showParams'],
+		data() {
+			return {
+				demandList: [],
+			}
+		},
+		computed: {
+			titleFontSize() {
+				return uni.upx2px(this.showStyle.titleFontSize * 2) + 'px';
+			},
+			titleBtnSize() {
+				return uni.upx2px(this.showStyle.titleBtnSize * 2) + 'px';
+			},
+			titleIconMore() {
+				return svgData.svgToUrl("more", this.showStyle.titleBtnColor)
+			},
+			titleIconSize() {
+				return uni.upx2px(this.showStyle.titleIconSize * 2) + 'px';
+			},
+			titleSpace() {
+				return uni.upx2px(this.showStyle.titleSpace * 2) + 'px';
+			},
+			itemBorderRadius() {
+				return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
+			},
+			nameSize() {
+				return uni.upx2px(this.showStyle.nameSize * 2) + 'px';
+			},
+			contentSize() {
+				return uni.upx2px(this.showStyle.contentSize * 2) + 'px';
+			},
+			iconAddress() {
+				return svgData.svgToUrl("address", this.showStyle.addressColor)
+			},
+			paddingTop() {
+				return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
+			},
+			paddingLeft() {
+				return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
+			},
+			itemSpace() {
+				return uni.upx2px(this.showStyle.itemSpace * 2) + 'px';
+			},
+		},
+		watch: {
+			showParams: {
+				handler(value) {
+					if (value) this.getDemandList()
+				},
+				immediate: true,
+				deep: true
+			}
+		},
+		methods: {
+			// 获取供需列表
+			getDemandList() {
+				this.$util.request("demand.businessDiyList", {
+					limit: this.showParams.count,
+					category_id: this.showParams.category || ""
+				}).then(res => {
+					if (res.code == 1) {
+						let list = res.data || []
+						list.forEach((el) => {
+							el.images = this.splitImages(el.images)
+							if (el.createtime) el.time = this.$util.getDateBeforeNow(el.createtime)
+						});
+						this.demandList = list;
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取供需列表 ', error)
+				})
+			},
+			// 字符串转数组格式图片
+			splitImages(images) {
+				try {
+					if (images) return images.split(',');
+					else return []
+				} catch (error) {
+					return [];
+				}
+			},
+			// 跳转查看更多
+			toMore() {
+				this.$util.toPage({
+					mode: 1,
+					path: `/pages/demand/index`
+				})
+			},
+			// 跳转供需详情
+			toDetails(id) {
+				this.$util.toPage({
+					mode: 1,
+					path: `/pagesDemand/demand/details?id=${id}`
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.diy-demand {
+		.demand-title {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+		}
+
+		.demand-list {
+			display: flex;
+			flex-direction: column;
+
+			.list-item {
+				.item-top {
+					.top-avatar {
+						width: 96rpx;
+						height: 96rpx;
+						border-radius: 50%;
+					}
+
+					.top-info {
+						margin-left: 24rpx;
+
+						.info-title {
+							color: #5A5B6E;
+							font-size: 32rpx;
+							font-weight: 600;
+							line-height: 44rpx;
+						}
+
+						.info-subtitle {
+							margin-top: 12rpx;
+							color: #666;
+							font-size: 28rpx;
+							line-height: 40rpx;
+						}
+					}
+
+					.top-btn {
+						margin-left: 24rpx;
+						padding: 8rpx 16rpx;
+						color: #FFF;
+						text-align: center;
+						font-size: 24rpx;
+						line-height: 34rpx;
+						border-radius: 8rpx;
+					}
+				}
+
+				.item-center {
+					margin-top: 32rpx;
+
+					.center-title {
+						color: #5A5B6E;
+						font-size: 32rpx;
+						font-weight: 600;
+						line-height: 44rpx;
+					}
+
+					.center-content {
+						margin-top: 24rpx;
+						color: #5A5B6E;
+						font-size: 28rpx;
+						line-height: 40rpx;
+					}
+
+					.center-image {
+						display: flex;
+						flex-wrap: wrap;
+						margin-top: 16rpx;
+						column-gap: 2%;
+						row-gap: 14rpx;
+
+						.image-box {
+							width: 32%;
+							height: 0;
+							padding-top: 32%;
+							position: relative;
+							border-radius: 16rpx;
+							overflow: hidden;
+
+							.image {
+								position: absolute;
+								top: 0;
+								left: 0;
+								right: 0;
+								bottom: 0;
+							}
+						}
+
+						&.special-image {
+							justify-content: space-between;
+							column-gap: 0;
+
+							.image-box {
+								width: calc(50% - 8rpx);
+								padding-top: calc(50% - 8rpx);
+							}
+						}
+					}
+				}
+
+				.item-bottom {
+					margin-top: 24rpx;
+
+					.bottom-label {
+						max-width: 280rpx;
+
+						.label-box {
+							max-width: 100%;
+							padding: 6rpx 18rpx 6rpx 8rpx;
+							position: relative;
+							z-index: 1;
+							border-radius: 8rpx;
+							overflow: hidden;
+
+							.box-bg {
+								position: absolute;
+								top: 0;
+								left: 0;
+								right: 0;
+								bottom: 0;
+								z-index: -1;
+								opacity: 0.1;
+							}
+
+							.box-icon {
+								width: 24rpx;
+								height: 24rpx;
+								background-size: 24rpx;
+							}
+
+							.box-text {
+								margin-left: 8rpx;
+								font-size: 20rpx;
+								line-height: 28rpx;
+							}
+						}
+					}
+
+					.bottom-other {
+						.other-item {
+							margin-left: 32rpx;
+
+							.icon {
+								width: 32rpx;
+								height: 32rpx;
+							}
+
+							.text {
+								margin-left: 8rpx;
+								color: #5A5B6E;
+								font-size: 28rpx;
+								line-height: 40rpx;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

pages/component/diy/floatDiy.vue

@@ -0,0 +1,124 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会与发展 
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-悬浮按钮 开发者: 麦沃德科技-半夏 
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="diy-float" :style="{right: right, bottom: bottom, opacity: showStyle.opacity / 100}">
+		<block v-if="showParams.type == 'service'">
+			<button open-type="contact" class="btn-normal">
+				<view class="float-icon">
+					<image :src="getImagePath(showParams.image)"></image>
+				</view>
+			</button>
+		</block>
+		<block v-else>
+			<button class="btn-normal" @click="onClick(showParams.link)">
+				<view class="float-icon">
+					<image :src="getImagePath(showParams.image)"></image>
+				</view>
+				<!-- #ifdef H5 -->
+				<wx-open-launch-weapp class="float-absolute" :appid="showParams.link.appid" :path="showParams.link.path" v-if="showParams.link && showParams.link.type == 'WXMp'">
+					<script type="text/wxtag-template">
+						<style> .btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
+							<view class="btn"></view>
+						</script>
+				</wx-open-launch-weapp>
+				<!-- #endif -->
+			</button>
+		</block>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'floatDiy',
+		props: ['showStyle', 'showParams', 'domain'],
+		computed: {
+			right() {
+				return uni.upx2px(this.showStyle.right * 2) + '%';
+			},
+			bottom() {
+				return uni.upx2px(this.showStyle.bottom * 2) + '%';
+			}
+		},
+		methods: {
+			// 获取图片地址
+			getImagePath(url) {
+				if (url.indexOf('http') > -1) {
+					return url
+				} else {
+					return this.domain + url
+				}
+			},
+			// 点击事件
+			onClick(e) {
+				if (this.showParams.type != 'link' && !this.showParams.link) return;
+				this.$emit("onClick", e)
+			},
+		}
+	}
+</script>
+
+<style>
+	/* 在线客服 */
+	.diy-float {
+		position: fixed;
+		z-index: 999;
+	}
+
+	.diy-float .float-icon {
+		padding: 10rpx;
+	}
+
+	.diy-float .float-icon image {
+		display: block;
+		width: 90rpx;
+		height: 90rpx;
+	}
+
+	.diy-float .float-absolute {
+		display: block;
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+	}
+
+	.btn-normal {
+		position: relative;
+		display: block;
+		margin: 0;
+		padding: 0;
+		line-height: normal;
+		background: none;
+		border-radius: 0;
+		box-shadow: none;
+		border: none;
+		font-size: unset;
+		text-align: unset;
+		overflow: visible;
+		color: inherit;
+	}
+
+	.btn-normal:after {
+		border: none;
+	}
+
+	.btn-normal.button-hover {
+		color: inherit;
+	}
+
+	button:after {
+		content: none;
+		border: none;
+	}
+</style>

pages/component/diy/goodsDiy.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="diy-goods" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
+		<view class="goods-title" :style="{marginBottom: titleSpace}" v-if="showParams.showTitle">
+			<view :style="{fontSize: titleFontSize,fontWeight: showStyle.titleFontStyle, color: showStyle.titleColor}">{{showParams.titleText}}</view>
+			<view :style="{fontSize: titleBtnSize, color: showStyle.titleBtnColor}" @click="toMore()">
+				<text v-if="showParams.titleBtnType == 'text'">{{showParams.titleBtnText}}</text>
+				<view :style="{'background-image': 'url('+ titleIconMore +')', width: titleIconSize, height: titleIconSize, backgroundSize: titleIconSize}" v-else-if="titleIconMore"></view>
+			</view>
+		</view>
+		<view class="goods-list flex flex-wrap justify-content-between" :style="{rowGap: itemSpace}" v-if="goodsList">
+			<view class="list-item" v-for="item in goodsList" :key="item.id" @click="toDetails(item.id)">
+				<image class="item-image" :src="item.image" :style="{height: imgHeight, borderRadius: `${borderRadius} ${borderRadius} 0 0`}" mode="aspectFill"></image>
+				<view class="item-name text-ellipsis-more" :style="{fontSize: nameSize, fontWeight: showStyle.nameWeight}">{{item.name}}</view>
+				<view class="item-price" :style="{fontSize: priceSize, color: showStyle.priceColor}">￥{{item.price}}</view>
+			</view>
+		</view>
+		<empty top="0" padding="0" width="200rpx" size="28rpx" title="暂无相关内容~" v-else></empty>
+	</view>
+</template>
+
+<script>
+	import svgData from "@/common/svg.js"
+	export default {
+		name: "goodsDiy",
+		props: ['showStyle', 'showParams'],
+		data() {
+			return {
+				goodsList: [],
+			};
+		},
+		computed: {
+			titleFontSize() {
+				return uni.upx2px(this.showStyle.titleFontSize * 2) + 'px';
+			},
+			titleBtnSize() {
+				return uni.upx2px(this.showStyle.titleBtnSize * 2) + 'px';
+			},
+			titleIconMore() {
+				return svgData.svgToUrl("more", this.showStyle.titleBtnColor)
+			},
+			titleIconSize() {
+				return uni.upx2px(this.showStyle.titleIconSize * 2) + 'px';
+			},
+			titleSpace() {
+				return uni.upx2px(this.showStyle.titleSpace * 2) + 'px';
+			},
+			itemBorderRadius() {
+				return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
+			},
+			imgHeight() {
+				return uni.upx2px(this.showStyle.imgHeight * 2) + 'px';
+			},
+			borderRadius() {
+				return uni.upx2px(this.showStyle.borderRadius * 2) + 'px';
+			},
+			nameSize() {
+				return uni.upx2px(this.showStyle.nameSize * 2) + 'px';
+			},
+			priceSize() {
+				return uni.upx2px(this.showStyle.priceSize * 2) + 'px';
+			},
+			paddingTop() {
+				return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
+			},
+			paddingLeft() {
+				return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
+			},
+			itemSpace() {
+				return uni.upx2px(this.showStyle.itemSpace * 2) + 'px';
+			},
+		},
+		watch: {
+			showParams: {
+				handler(value) {
+					if (value) this.getGoodsList()
+				},
+				immediate: true,
+				deep: true
+			}
+		},
+		methods: {
+			// 获取商城商品
+			getGoodsList() {
+				this.$util.request("mall.goodsList", {
+					page: 1,
+					limit: 4
+				}).then(res => {
+					if (res.code == 1) {
+						this.goodsList = res.data.data
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取商城商品', error)
+				})
+			},
+			// 跳转商城详情
+			toDetails(id) {
+				this.$util.toPage({
+					mode: 1,
+					path: "/pagesMall/goods/details?id=" + id
+				})
+			},
+			// 跳转商城列表
+			toMore() {
+				this.$util.toPage({
+					mode: 1,
+					path: "/pages/mall/index"
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.diy-goods {
+		.goods-title {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+		}
+
+		.goods-list {
+			.list-item {
+				width: calc(50% - 16rpx);
+				padding-bottom: 20rpx;
+
+				.item-image {
+					width: 100%;
+					height: 296rpx;
+				}
+
+				.item-name {
+					line-height: 40rpx;
+					height: 80rpx;
+					color: #000000;
+					margin-top: 16rpx;
+					padding: 0 16rpx;
+				}
+
+				.item-price {
+					margin-top: 16rpx;
+					font-weight: 600;
+					line-height: 1.3;
+					padding: 0 16rpx;
+				}
+			}
+		}
+	}
+</style>

pages/component/diy/imagesDiy.vue

@@ -0,0 +1,96 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-单图组 开发者: 麦沃德科技-半夏 
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="diy-images" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
+		<view class="item-image" v-for="(item, index) in showData" :key="index" :style="{paddingTop: paddingTop}">
+			<button class="clear" open-type="contact" v-if="item.link && item.link.type == 'Service'">
+				<image :src="getImagePath(item.imgUrl)" mode="widthFix" :style="{borderRadius: borderRadius}"></image>
+			</button>
+			<block v-else>
+				<image :src="getImagePath(item.imgUrl)" mode="widthFix" @click="onClick(item.link)" :style="{borderRadius: borderRadius}"></image>
+				<!-- #ifdef H5 -->
+				<wx-open-launch-weapp class="item-absolute" :appid="item.link.appid" :path="item.link.path" v-if="item.link && item.link.type == 'WXMp'">
+					<script type="text/wxtag-template">
+						<style> .btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
+							<view class="btn"></view>
+						</script>
+				</wx-open-launch-weapp>
+				<!-- #endif -->
+			</block>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'imagesDiy',
+		props: ['showStyle', 'showData', 'domain'],
+		computed: {
+			itemBorderRadius() {
+				return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
+			},
+			borderRadius() {
+				return uni.upx2px(this.showStyle.borderRadius * 2) + 'px';
+			},
+			paddingTop() {
+				return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
+			},
+			paddingLeft() {
+				return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
+			},
+		},
+		methods: {
+			// 获取图片地址
+			getImagePath(url) {
+				if (url.indexOf('http') > -1) {
+					return url
+				} else {
+					return this.domain + url
+				}
+			},
+			// 跳转
+			onClick(e) {
+					
+				if (!e) return;
+			
+				this.$emit("onClick", e)
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.diy-images {
+		.item-image {
+			position: relative;
+
+			&:first-child {
+				padding-top: 0 !important;
+			}
+
+			image {
+				display: block;
+				width: 100%;
+			}
+		}
+
+		.item-absolute {
+			display: block;
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+		}
+	}
+</style>

pages/component/diy/index.vue

@@ -0,0 +1,248 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-自定义装修 开发者: 麦沃德科技-半夏 
++---------------------------------------------------------------------- -->
+
+<template>
+	<view :style="{padding: paddingTop + ' ' + paddingLeft}">
+		<block v-for="(item,index) in showData.items" :key='index'>
+			<!-- 图片轮播 -->
+			<block v-if="item.type == 'carouselDiy'">
+				<carousel-diy :showStyle="item.style" :showData="item.data" :showParams="item.params" :domain="showData.domain" @onClick="onClick"></carousel-diy>
+			</block>
+			<!-- 单图组 -->
+			<block v-if="item.type == 'imagesDiy'">
+				<images-diy :showStyle="item.style" :showData="item.data" :domain="showData.domain" @onClick="onClick"></images-diy>
+			</block>
+			<!-- 导航组 -->
+			<block v-if="item.type == 'navDiy'">
+				<nav-diy :showStyle="item.style" :showData="item.data" :domain="showData.domain" @onClick="onClick"></nav-diy>
+			</block>
+			<!-- 图片魔方 -->
+			<block v-if="item.type == 'cubeDiy'">
+				<cube-diy :showStyle="item.style" :showData="item.data" :domain="showData.domain" @onClick="onClick"></cube-diy>
+			</block>
+			<!-- 信息卡片 -->
+			<block v-if="item.type == 'infoCardDiy'">
+				<info-card-diy :showStyle="item.style" :showParams="item.params" :domain="showData.domain" @onClick="onClick"></info-card-diy>
+			</block>
+			<!-- 按钮组 -->
+			<block v-if="item.type == 'textButtonDiy'">
+				<text-button-diy :showStyle="item.style" :showData="item.data" @onClick="onClick"></text-button-diy>
+			</block>
+			<!-- 标题 -->
+			<block v-if="item.type == 'titleDiy'">
+				<title-diy :showStyle="item.style" :showParams="item.params" @onClick="onClick"></title-diy>
+			</block>
+			<!-- 视频 -->
+			<block v-if="item.type == 'videoDiy'">
+				<video-diy :showStyle="item.style" :showParams="item.params" :domain="showData.domain"></video-diy>
+			</block>
+			<!-- 地图 -->
+			<block v-if="item.type == 'mapDiy'">
+				<map-diy :showStyle="item.style" :showParams="item.params"></map-diy>
+			</block>
+			<!-- 平台动态 -->
+			<block v-if="item.type == 'articleDiy'">
+				<article-diy :ref="'articleDiy_' + index" :showStyle="item.style" :showParams="item.params"></article-diy>
+			</block>
+			<!-- 商会介绍 -->
+			<block v-if="item.type == 'introduceDiy'">
+				<introduce-diy :showStyle="item.style" :showParams="item.params" :domain="showData.domain"></introduce-diy>
+			</block>
+			<!-- 会员展示 -->
+			<block v-if="item.type == 'memberDiy'">
+				<member-diy :ref="'memberDiy_' + index" :showStyle="item.style" :showParams="item.params"></member-diy>
+			</block>
+			<!-- 商会活动 -->
+			<block v-if="item.type == 'activityDiy'">
+				<activity-diy :ref="'activityDiy_' + index" :showStyle="item.style" :showParams="item.params"></activity-diy>
+			</block>
+			<!-- 活动接龙 -->
+			<block v-if="item.type == 'chainsDiy'">
+				<chains-diy :ref="'chainsDiy_' + index" :showStyle="item.style" :showParams="item.params" @setShareData="setShareData"></chains-diy>
+			</block>
+			<!-- 商会相册 -->
+			<block v-if="item.type == 'albumDiy'">
+				<album-diy :ref="'albumDiy_' + index" :showStyle="item.style" :showParams="item.params"></album-diy>
+			</block>
+			<!-- 商城商品 -->
+			<block v-if="item.type == 'goodsDiy'">
+				<goods-diy :ref="'goodsDiy_' + index" :showStyle="item.style" :showParams="item.params"></goods-diy>
+			</block>
+			<!-- 会员供需 -->
+			<block v-if="item.type == 'demandDiy'">
+				<demand-diy :ref="'demandDiy_' + index" :showStyle="item.style" :showParams="item.params"></demand-diy>
+			</block>
+			<!-- 会员地图 -->
+			<block v-if="item.type == 'memberMapDiy'">
+				<member-map-diy :ref="'memberMapDiy_' + index" :showMap="item.map" :showCategory="item.category" :spaceHeight="spaceHeight"></member-map-diy>
+			</block>
+			<!-- 搜索 -->
+			<block v-if="item.type == 'searchDiy'">
+				<search-diy :showStyle="item.style" :showParams="item.params"></search-diy>
+			</block>
+			<!-- 辅助线条 -->
+			<block v-if="item.type == 'lineDiy'">
+				<line-diy :showStyle="item.style"></line-diy>
+			</block>
+			<!-- 辅助空白 -->
+			<block v-if="item.type == 'blankDiy'">
+				<blank-diy :showStyle="item.style"></blank-diy>
+			</block>
+			<!-- 消息通知 -->
+			<block v-if="item.type == 'noticeDiy'">
+				<notice-diy :showStyle="item.style" :showParams="item.params" :domain="showData.domain"></notice-diy>
+			</block>
+			<!-- 文本组 -->
+			<block v-if="item.type == 'textDiy'">
+				<text-diy :showStyle="item.style"></text-diy>
+			</block>
+			<!-- 富文本 -->
+			<block v-if="item.type == 'richTextDiy'">
+				<rich-text-diy :showStyle="item.style" :showParams="item.params"></rich-text-diy>
+			</block>
+			<!-- 警告提示 -->
+			<block v-if="item.type == 'warnDiy'">
+				<warn-diy :showStyle="item.style" :showParams="item.params"></warn-diy>
+			</block>
+			<!-- 时间线 -->
+			<block v-if="item.type == 'timelineDiy'">
+				<timeline-diy :showStyle="item.style" :showData="item.data"></timeline-diy>
+			</block>
+			<!-- 悬浮按钮 -->
+			<block v-if="item.type == 'floatDiy'">
+				<float-diy :showStyle="item.style" :showParams="item.params" :domain="showData.domain" @onClick="onClick"></float-diy>
+			</block>
+		</block>
+	</view>
+</template>
+
+<script>
+	import carouselDiy from './carouselDiy.vue'
+	import imagesDiy from './imagesDiy.vue'
+	import navDiy from './navDiy.vue'
+	import cubeDiy from './cubeDiy.vue'
+	import infoCardDiy from './infoCardDiy.vue'
+	import textButtonDiy from './textButtonDiy.vue'
+	import titleDiy from './titleDiy.vue'
+	import videoDiy from './videoDiy.vue'
+	import mapDiy from './mapDiy.vue'
+	import articleDiy from './articleDiy.vue'
+	import introduceDiy from './introduceDiy.vue'
+	import memberDiy from './memberDiy.vue'
+	import activityDiy from './activityDiy.vue'
+	import chainsDiy from './chainsDiy.vue'
+	import albumDiy from './albumDiy.vue'
+	import goodsDiy from './goodsDiy.vue'
+	import demandDiy from './demandDiy.vue'
+	import memberMapDiy from './memberMapDiy.vue'
+	import searchDiy from './searchDiy.vue'
+	import lineDiy from './lineDiy.vue'
+	import blankDiy from './blankDiy.vue'
+	import noticeDiy from './noticeDiy.vue'
+	import textDiy from './textDiy.vue'
+	import richTextDiy from './richTextDiy.vue'
+	import warnDiy from './warnDiy.vue'
+	import timelineDiy from './timelineDiy.vue'
+	import floatDiy from './floatDiy.vue'
+
+	export default {
+		components: {
+			carouselDiy,
+			imagesDiy,
+			navDiy,
+			cubeDiy,
+			infoCardDiy,
+			textButtonDiy,
+			titleDiy,
+			videoDiy,
+			mapDiy,
+			articleDiy,
+			introduceDiy,
+			memberDiy,
+			activityDiy,
+			chainsDiy,
+			albumDiy,
+			goodsDiy,
+			demandDiy,
+			memberMapDiy,
+			searchDiy,
+			lineDiy,
+			blankDiy,
+			noticeDiy,
+			textDiy,
+			richTextDiy,
+			warnDiy,
+			timelineDiy,
+			floatDiy,
+		},
+		props: ['showData', 'spaceHeight'],
+		computed: {
+			paddingTop() {
+				return uni.upx2px(this.showData.page.style.paddingTop * 2) + 'px';
+			},
+			paddingLeft() {
+				return uni.upx2px(this.showData.page.style.paddingLeft * 2) + 'px';
+			},
+		},
+		methods: {
+			// 更新数据
+			updateData() {
+				for (var key in this.$refs) {
+					const type = key.split("_")[0]
+					switch (type) {
+						case "articleDiy":
+							this.$refs[key][0].getArticleList()
+							break;
+						case "memberDiy":
+							this.$refs[key][0].getMemberList()
+							break;
+						case "activityDiy":
+							this.$refs[key][0].getActivityList()
+							break;
+						case "chainsDiy":
+							this.$refs[key][0].getChainsList()
+							break;
+						case "albumDiy":
+							this.$refs[key][0].getAlbumList()
+							break;
+						case "goodsDiy":
+							this.$refs[key][0].getGoodsList()
+							break;
+						case "demandDiy":
+							this.$refs[key][0].getDemandList()
+							break;
+						case "memberMapDiy":
+							this.$refs[key][0].getMemberList()
+							break;
+						default:
+							break;
+					}
+				}
+			},
+			// 按钮点击
+			onClick(e) {
+				console.log(e,'===========>')
+				if (!e) return;
+				if (e.type == "Fixed" && (e.Fixed_type == "Fixed_type_7" || e.Fixed_type == "Fixed_type_8")) {
+					this.$emit("toPage", e)
+				} else {
+					console.log('走到了这里')
+					this.$util.openLink(e);
+				}
+			},
+			// 设置分享数据
+			setShareData(data) {
+				this.$emit('setShareData', data)
+			},
+		}
+	}
+</script>

pages/component/diy/infoCardDiy.vue

@@ -0,0 +1,135 @@
+<!-- +----------------------------------------------------------------------
+	| 麦沃德科技赋能开发者，助力商协会发展
+	+----------------------------------------------------------------------
+	| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
+	+----------------------------------------------------------------------
+	| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+	+----------------------------------------------------------------------
+	| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
+	+----------------------------------------------------------------------
+	| 组件-信息卡片 开发者: 麦沃德科技-半夏 
+	+---------------------------------------------------------------------- -->
+
+<template>
+	<view class="diy-info-card" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
+		<image class="card-image" mode="aspectFill" :src="getImagePath(showParams.image)" :style="{borderRadius: borderRadius}"></image>
+		<view class="card-box">
+			<view class="title">{{showParams.title}}</view>
+			<view class="content">{{showParams.content}}</view>
+			<button class="btn clear" open-type="contact" :style="{background: showStyle.btnBackground, borderRadius: btnBorderRadius, color: showStyle.btnColor}" v-if="showParams.link && showParams.link.type == 'Service'">{{showParams.btnTxt}}</button>
+			<view class="btn" @click="onClick(showParams.link)" :style="{background: showStyle.btnBackground, borderRadius: btnBorderRadius, color: showStyle.btnColor}" v-else>
+				<text>{{showParams.btnTxt}}</text>
+				<!-- #ifdef H5 -->
+				<wx-open-launch-weapp class="absolute" :appid="showParams.link.appid" :path="showParams.link.path" v-if="showParams.link && showParams.link.type == 'WXMp'">
+					<script type="text/wxtag-template">
+						<style> .wx-btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
+							<view class="wx-btn"></view>
+						</script>
+				</wx-open-launch-weapp>
+				<!-- #endif -->
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'infoCardDiy',
+		props: ['showStyle', 'showParams', 'domain'],
+		computed: {
+			itemBorderRadius() {
+				return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
+			},
+			borderRadius() {
+				return uni.upx2px(this.showStyle.borderRadius * 2) + 'px';
+			},
+			btnBorderRadius() {
+				return uni.upx2px(this.showStyle.btnBorderRadius * 2) + 'px';
+			},
+			paddingTop() {
+				return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
+			},
+			paddingLeft() {
+				return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
+			},
+		},
+		methods: {
+			// 获取图片地址
+			getImagePath(url) {
+				if (url.indexOf('http') > -1) {
+					return url
+				} else {
+					return this.domain + url
+				}
+			},
+			onClick(e) {
+				if (!e) return;
+				this.$emit("onClick", e)
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.diy-info-card {
+		display: flex;
+
+		.card-image {
+			width: 200rpx;
+			height: 200rpx;
+		}
+
+		.card-box {
+			flex: 1;
+			overflow: hidden;
+			margin-left: 20rpx;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			align-items: flex-end;
+
+			.title {
+				width: 100%;
+				font-size: 28rpx;
+				line-height: 1.3;
+				font-weight: 700;
+				color: #333;
+			}
+
+			.content {
+				width: 100%;
+				font-size: 24rpx;
+				line-height: 1.4;
+				margin: 16rpx 0;
+				color: #333;
+				word-wrap: normal;
+				display: -webkit-box;
+				word-break: break-all;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				-webkit-box-orient: vertical;
+				-webkit-line-clamp: 2;
+			}
+
+			.btn {
+				position: relative;
+				width: auto;
+				height: auto;
+				display: inline-block;
+				padding: 0 28rpx;
+				font-size: 24rpx;
+				line-height: 54rpx;
+				text-align: center;
+
+				.absolute {
+					display: block;
+					position: absolute;
+					top: 0;
+					left: 0;
+					right: 0;
+					bottom: 0;
+				}
+			}
+		}
+	}
+</style>

pages/component/diy/introduceDiy.vue

@@ -0,0 +1,90 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-商会介绍 开发者: 麦沃德科技-半夏 
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="diy-introduce" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
+		<image class="introduce-image" :src="getImagePath(showParams.imgUrl)" :style="{width: iconSize, height: iconSize, borderRadius: borderRadius}" mode="aspectFill"></image>
+		<text class="introduce-title" :style="{fontSize: nameSize, fontWeight: showStyle.nameWeight}">{{showParams.name}}</text>
+		<view class="introduce-btn" :style="{fontSize: btnSize, borderRadius: btnBorderRadius, background: `linear-gradient(90deg, ${showStyle.btnColor1} 0, ${showStyle.btnColor2} 100%)`}" @click="onClick()">{{showParams.btnName}}</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'introduceDiy',
+		props: ['showStyle', 'showParams', 'domain'],
+		computed: {
+			itemBorderRadius() {
+				return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
+			},
+			borderRadius() {
+				return uni.upx2px(this.showStyle.borderRadius * 2) + 'px';
+			},
+			iconSize() {
+				return uni.upx2px(this.showStyle.iconSize * 2) + 'px';
+			},
+			btnBorderRadius() {
+				return uni.upx2px(this.showStyle.btnBorderRadius * 2) + 'px';
+			},
+			btnSize() {
+				return uni.upx2px(this.showStyle.btnSize * 2) + 'px';
+			},
+			nameSize() {
+				return uni.upx2px(this.showStyle.nameSize * 2) + 'px';
+			},
+			paddingTop() {
+				return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
+			},
+			paddingLeft() {
+				return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
+			},
+		},
+		methods: {
+			// 获取图片地址
+			getImagePath(url) {
+				if (url.indexOf('http') > -1) {
+					return url
+				} else {
+					return this.domain + url
+				}
+			},
+			// 点击事件
+			onClick() {
+				this.$util.toPage({
+					mode: 1,
+					path: "/pages/index/association"
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.diy-introduce {
+		display: flex;
+		align-items: center;
+
+		.introduce-title {
+			margin-left: 16rpx;
+			color: #5A5B6E;
+			line-height: 1.3;
+			flex: 1;
+		}
+
+		.introduce-btn {
+			margin-left: 16rpx;
+			color: #ffffff;
+			line-height: 1.3;
+			padding: 14rpx 40rpx;
+		}
+	}
+</style>

pages/component/diy/lineDiy.vue

@@ -0,0 +1,45 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-辅助线 开发者: 麦沃德科技-半夏 
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="diy-line" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
+		<view class="line" :style="{borderTop: line}">
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'lineDiy',
+		props: ['showStyle'],
+		computed: {
+			itemBorderRadius() {
+				return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
+			},
+			line() {
+				return uni.upx2px(this.showStyle.lineHeight * 2) + 'px' + ' ' + this.showStyle.lineStyle + ' ' + this.showStyle.lineColor;
+			},
+			paddingTop() {
+				return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
+			},
+			paddingLeft() {
+				return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.diy-line .line {
+		width: 100%;
+	}
+</style>

pages/component/diy/mapDiy.vue

@@ -0,0 +1,56 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-地图组 开发者: 麦沃德科技-半夏 
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="diy-map" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
+		<map class="map" :latitude="showParams.latitude" :longitude="showParams.longitude" :style="{height: height}" @click="onClick"></map>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'mapDiy',
+		props: ['showStyle', 'showParams'],
+		computed: {
+			itemBorderRadius() {
+				return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
+			},
+			height() {
+				return uni.upx2px(this.showStyle.height * 2) + 'px';
+			},
+			paddingTop() {
+				return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
+			},
+			paddingLeft() {
+				return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
+			},
+		},
+		methods: {
+			// 点击事件
+			onClick() {
+				this.$util.toPage({
+					mode: 7,
+					address: {
+						latitude: this.showParams.latitude,
+						longitude: this.showParams.longitude,
+					},
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.diy-map .map {
+		width: 100%;
+	}
+</style>

pages/component/diy/memberDiy.vue

@@ -0,0 +1,218 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-可滚动会员列表 开发者: 麦沃德科技-半夏
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="diy-member" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
+		<view class="member-title" :style="{marginBottom: titleSpace}" v-if="showParams.showTitle">
+			<view :style="{fontSize: titleFontSize,fontWeight: showStyle.titleFontStyle, color: showStyle.titleColor}">{{showParams.titleText}}</view>
+			<view :style="{fontSize: titleBtnSize, color: showStyle.titleBtnColor}" @click="toMore()">
+				<text v-if="showParams.titleBtnType == 'text'">{{showParams.titleBtnText}}</text>
+				<view :style="{'background-image': 'url('+ titleIconMore +')', width: titleIconSize, height: titleIconSize, backgroundSize: titleIconSize}" v-else-if="titleIconMore"></view>
+			</view>
+		</view>
+		<block v-if="memberList.length">
+			<view class="member-swiper" v-if="showStyle.isAutoRoll">
+				<z-swiper v-model="memberList" :options="{loop: (memberList.length > 9 ? true : false), autoplay: {delay: showStyle.rollDelay || 2000, disableOnInteraction: false}, speed: showStyle.rollSpeed || 1000, slidesPerView: 'auto', spaceBetween: showStyle.itemSpace}">
+					<z-swiper-item v-for="(item, index) in memberList" :key="index" :custom-style="{width: iconSize}">
+						<view class="swiper-item" @click="toDetails(item.id)">
+							<image class="item-avatar" :style="{width: iconSize, height: iconSize, borderRadius: iconRadius}" :src="item.avatar" mode="aspectFill"></image>
+							<view class="item-label text-ellipsis" :style="{fontSize: pSize, color: showStyle.pColor, background: showStyle.pBackground, borderRadius: showStyle.pRadiusType == 'full' ? pRadius : showStyle.pRadiusType == 'half' ? `0 ${pRadius} 0 ${pRadius}` : 0}">{{item.level_name}}</view>
+							<view class="item-name text-ellipsis" :style="{fontSize: nameSize, color: showStyle.nameColor,}">{{item.name}}</view>
+						</view>
+					</z-swiper-item>
+				</z-swiper>
+			</view>
+			<scroll-view scroll-x class="member-scroll" v-else>
+				<view class="scroll-item" :style="{width: iconSize, marginLeft: itemSpace}" v-for="item in memberList" :key="item.id" @click="toDetails(item.id)">
+					<image class="item-avatar" :style="{width: iconSize, height: iconSize, borderRadius: iconRadius}" :src="item.avatar" mode="aspectFill"></image>
+					<view class="item-label text-ellipsis" :style="{
+						fontSize: pSize,
+						color: showStyle.pColor,
+						background: showStyle.pBackground,
+						borderRadius: showStyle.pRadiusType == 'full' ? pRadius : showStyle.pRadiusType == 'half' ? `0 ${pRadius} 0 ${pRadius}` : 0
+					}">{{item.level_name}}</view>
+					<view class="item-name text-ellipsis" :style="{fontSize: nameSize, color: showStyle.nameColor,}">{{item.name}}</view>
+				</view>
+			</scroll-view>
+		</block>
+		<empty top="0" padding="0" width="200rpx" size="28rpx" title="暂无相关内容~" v-else></empty>
+	</view>
+</template>
+
+<script>
+	import svgData from "@/common/svg.js"
+	export default {
+		name: "memberDiy",
+		props: ['showStyle', 'showParams'],
+		data() {
+			return {
+				// 会员列表
+				memberList: [],
+				// 轮播图高度
+				carouselHeight: 0,
+			};
+		},
+		computed: {
+			titleFontSize() {
+				return uni.upx2px(this.showStyle.titleFontSize * 2) + 'px';
+			},
+			titleBtnSize() {
+				return uni.upx2px(this.showStyle.titleBtnSize * 2) + 'px';
+			},
+			titleIconMore() {
+				return svgData.svgToUrl("more", this.showStyle.titleBtnColor)
+			},
+			titleIconSize() {
+				return uni.upx2px(this.showStyle.titleIconSize * 2) + 'px';
+			},
+			titleSpace() {
+				return uni.upx2px(this.showStyle.titleSpace * 2) + 'px';
+			},
+			itemBorderRadius() {
+				return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
+			},
+			iconRadius() {
+				return uni.upx2px(this.showStyle.iconRadius * 2) + 'px';
+			},
+			iconSize() {
+				return uni.upx2px(this.showStyle.iconSize * 2) + 'px';
+			},
+			pSize() {
+				return uni.upx2px(this.showStyle.pSize * 2) + 'px';
+			},
+			pRadius() {
+				return uni.upx2px(this.showStyle.pRadius * 2) + 'px';
+			},
+			nameSize() {
+				return uni.upx2px(this.showStyle.nameSize * 2) + 'px';
+			},
+			paddingTop() {
+				return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
+			},
+			paddingLeft() {
+				return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
+			},
+			itemSpace() {
+				return uni.upx2px(this.showStyle.itemSpace * 2) + 'px';
+			},
+		},
+		watch: {
+			showParams: {
+				handler(value) {
+					if (value) this.getMemberList()
+				},
+				immediate: true,
+				deep: true
+			},
+			showStyle: {
+				handler(value) {
+					if (value) {
+						this.carouselHeight = `calc(${uni.upx2px((value.iconSize + value.pSize + value.nameSize) * 2)}px + 22rpx)`
+					}
+				},
+				immediate: true,
+				deep: true
+			},
+		},
+		methods: {
+			// 跳转会员详情
+			toDetails(id) {
+				this.$util.toPage({
+					mode: 1,
+					path: "/pages/member/details?id=" + id
+				})
+			},
+			// 获取会员列表
+			getMemberList() {
+				this.$util.request("member.diyList", {
+					limit: this.showParams.count,
+				}).then(res => {
+					if (res.code == 1) {
+						this.memberList = res.data
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取会员列表 ', error)
+				})
+			},
+			// 跳转会员列表
+			toMore() {
+				this.$util.toPage({
+					mode: 1,
+					path: "/pages/member/index"
+				})
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.diy-member {
+		.member-title {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+		}
+
+		.member-scroll {
+			white-space: nowrap;
+
+			.scroll-item {
+				display: inline-block;
+
+				&:first-child {
+					margin-left: 0 !important;
+				}
+
+				.item-label {
+					line-height: 1;
+					padding: 10rpx 8rpx;
+					margin-top: -16rpx;
+					text-align: center;
+					position: relative;
+					z-index: 1;
+				}
+
+				.item-name {
+					color: #5A5B6E;
+					line-height: 1;
+					margin-top: 18rpx;
+					text-align: center;
+				}
+			}
+		}
+
+		.member-swiper {
+			.swiper-item {
+				.item-label {
+					line-height: 1;
+					padding: 10rpx 8rpx;
+					margin-top: -16rpx;
+					text-align: center;
+					position: relative;
+					z-index: 1;
+				}
+
+				.item-name {
+					color: #5A5B6E;
+					line-height: 1;
+					margin-top: 18rpx;
+					text-align: center;
+				}
+			}
+		}
+	}
+</style>

pages/component/diy/memberMapDiy.vue

@@ -0,0 +1,695 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-会员地图 开发者: 麦沃德科技-半夏
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="diy-member-map" :class="{'flex-column': showCategory.styleMode == 2 && showMap.heightType == 1}" :style="{height: showMap.heightType == 2 ? `auto` : `calc(100vh - ${spaceHeight}px)`, background: showMap.background, borderRadius: mapItemBorderRadius}" v-if="loadEnd">
+		<view class="map-classify style-2" v-if="showCategory.styleMode == 2 && classifyList.length" @scrolltolower="scrollBottom" :style="{background: showCategory.background, padding: `0 ${categoryPaddingLeft}`}">
+			<scroll-view scroll-x class="classify-list" :style="{padding: `${categoryPaddingTop} 0`}">
+				<view class="list-item" @click="changeClassify(-1)" :style="{
+					background: (!selectClassify.length ? showCategory.btnActiveBackground : showCategory.btnBackground), 
+					borderRadius: categoryBtnBorderRadius, 
+					padding: categoryBtnPadding,
+					color: !selectClassify.length ? showCategory.btnActiveColor : showCategory.btnColor}">
+					<text>全部</text>
+				</view>
+				<view class="list-item" v-for="(item, index) in classifyList" :key="index" @click="changeClassify(item.id)" :style="{
+					marginLeft: categoryItemSpace, 
+					background: (selectClassify.includes(item.id) ? showCategory.btnActiveBackground : showCategory.btnBackground), 
+					borderRadius: categoryBtnBorderRadius, 
+					padding: categoryBtnPadding,
+					color: selectClassify.includes(item.id) ? showCategory.btnActiveColor : showCategory.btnColor}">
+					<text>{{item.name}}</text>
+				</view>
+			</scroll-view>
+			<view class="classify-more" @click="handleExpand(1)">
+				<view class="more-icon" :style="{'background-image': 'url('+ categoryIconDown +')'}" v-if="categoryIconDown"></view>
+				<text class="more-text" :style="{color: showCategory.expandColor}">展开列表</text>
+			</view>
+		</view>
+		<view class="map-classify style-1" v-else-if="classifyList.length" :style="{
+			top: categoryMarginTop,
+			left: showCategory.position == 'right' ? 'initial' : categoryMarginLeft,
+			right: showCategory.position == 'right' ? categoryMarginLeft : 'initial',
+			width: showCategory.widthType == 2 ? `${showCategory.widthNumber}%` : 'auto',
+			maxWidth: `calc((100% - ${categoryMarginLeft} - ${categoryMarginLeft}) * ${showCategory.widthType == 2 ? `${showCategory.widthNumber / 100}` : 1})`,
+			maxHeight: showMap.heightType == 2 ? categoryMaxHeight : `calc(100vh - ${spaceHeight}px - ${categoryMaxHeight})`,
+			alignItems: showCategory.position == 'right' ? 'flex-end' : 'flex-start'}">
+			<view class="classify-more" :class="{collapse: !isExpandCategory1}" @click="handleExpand()" :style="{
+				background: showCategory.background,
+				borderRadius: isExpandCategory1 ? categoryBorderRadius : (showCategory.position == 'right' ? `${categoryBorderRadius} 0 0 ${categoryBorderRadius}` : `0 ${categoryBorderRadius} ${categoryBorderRadius} 0`),
+				left: showCategory.position == 'right' ? 'initial' : `-${categoryMarginLeft}`,
+				right: showCategory.position == 'right' ? `-${categoryMarginLeft}` : 'initial',}">
+				<text class="more-text" :style="{color: showCategory.expandColor}">{{isExpandCategory1 ? "收起" : "展开"}}列表</text>
+				<view class="more-icon" :style="{'background-image': 'url('+ categoryIconDown +')'}" v-if="categoryIconDown"></view>
+			</view>
+			<!-- #ifdef MP-WEIXIN -->
+			<uni-transition style="width: 100%;" :mode-class="showCategory.position == 'right' ? 'slide-right' : 'slide-left'" :duration="80" :show="isExpandCategory1">
+				<scroll-view scroll-y @scrolltolower="scrollBottom" :style="{
+					borderRadius: categoryBorderRadius,
+					background: showCategory.background,
+					maxHeight: showMap.heightType == 2 ? `calc(${categoryMaxHeight} - 80rpx)` : `calc(100vh - 80rpx - ${spaceHeight}px - ${categoryMaxHeight})`}">
+					<view class="classify-list" :style="{rowGap: categoryItemSpace, padding: `${categoryPaddingTop} ${categoryPaddingLeft}`}">
+						<view class="list-item" @click="changeClassify(-1)" :style="{
+							background: (!selectClassify.length ? showCategory.btnActiveBackground : showCategory.btnBackground), 
+							borderRadius: categoryBtnBorderRadius, 
+							padding: categoryBtnPadding,
+							color: !selectClassify.length ? showCategory.btnActiveColor : showCategory.btnColor}">
+							<text>全部</text>
+						</view>
+						<view class="list-item" v-for="(item, index) in classifyList" :key="index" @click="changeClassify(item.id)" :style="{
+							background: (selectClassify.includes(item.id) ? showCategory.btnActiveBackground : showCategory.btnBackground), 
+							borderRadius: categoryBtnBorderRadius, 
+							padding: categoryBtnPadding,
+							color: selectClassify.includes(item.id) ? showCategory.btnActiveColor : showCategory.btnColor}">
+							<text>{{item.name}}</text>
+						</view>
+					</view>
+				</scroll-view>
+			</uni-transition>
+			<!-- #endif -->
+			<!-- #ifndef MP-WEIXIN -->
+			<scroll-view scroll-y @scrolltolower="scrollBottom" v-if="isExpandCategory1" :style="{
+				borderRadius: categoryBorderRadius,
+				background: showCategory.background,
+				maxHeight: showMap.heightType == 2 ? `calc(${categoryMaxHeight} - 80rpx)` : `calc(100vh - 80rpx - ${spaceHeight}px - ${categoryMaxHeight})`}">
+				<view class="classify-list" :style="{rowGap: categoryItemSpace, padding: `${categoryPaddingTop} ${categoryPaddingLeft}`}">
+					<view class="list-item" @click="changeClassify(-1)" :style="{
+						background: (!selectClassify.length ? showCategory.btnActiveBackground : showCategory.btnBackground), 
+						borderRadius: categoryBtnBorderRadius, 
+						padding: categoryBtnPadding,
+						color: !selectClassify.length ? showCategory.btnActiveColor : showCategory.btnColor}">
+						<text>全部</text>
+					</view>
+					<view class="list-item" v-for="(item, index) in classifyList" :key="index" @click="changeClassify(item.id)" :style="{
+						background: (selectClassify.includes(item.id) ? showCategory.btnActiveBackground : showCategory.btnBackground), 
+						borderRadius: categoryBtnBorderRadius, 
+						padding: categoryBtnPadding,
+						color: selectClassify.includes(item.id) ? showCategory.btnActiveColor : showCategory.btnColor}">
+						<text>{{item.name}}</text>
+					</view>
+				</view>
+			</scroll-view>
+			<!-- #endif -->
+		</view>
+		<view class="map-context" :style="{height: showMap.heightType == 2 ? mapHeight : '100%', padding: mapPadding}">
+			<map class="map" id="map" :style="{borderRadius: mapBorderRadius}" :markers="markersList" :include-points="includePoints" @callouttap="toMemberDetails" @markertap="toMemberDetails">
+				<!-- #ifdef MP-WEIXIN -->
+				<cover-view slot="callout" class="map-callout" v-if="memberList.length">
+					<cover-view :marker-id="Number(item.id)" v-for="item in memberList" :key="item.id">
+						<cover-view class="callout-item">
+							<cover-image class="item-avatar" :src="item.avatar"></cover-image>
+							<cover-view class="item-name">{{item.name}}</cover-view>
+						</cover-view>
+					</cover-view>
+				</cover-view>
+				<!-- #endif -->
+			</map>
+		</view>
+		<view class="map-popup" v-if="showCategory.styleMode == 2 && isExpandCategory2">
+			<view class="popup-classify" :style="{background: showCategory.background, padding: `0 ${categoryPaddingLeft}`}">
+				<scroll-view scroll-y class="classify-scroll" :style="{maxHeight: `${componentHeight}px`, padding: `${categoryPaddingTop} 0`}">
+					<view class="scroll-list" :style="{gap: categoryItemSpace}">
+						<view class="list-item" @click="changeClassify(-1)" :style="{
+							background: (!selectClassify.length ? showCategory.btnActiveBackground : showCategory.btnBackground), 
+							borderRadius: categoryBtnBorderRadius, 
+							padding: categoryBtnPadding,
+							color: !selectClassify.length ? showCategory.btnActiveColor : showCategory.btnColor}">
+							<text>全部</text>
+						</view>
+						<view class="list-item" v-for="(item, index) in classifyList" :key="index" @click="changeClassify(item.id)" :style="{
+							background: (selectClassify.includes(item.id) ? showCategory.btnActiveBackground : showCategory.btnBackground), 
+							borderRadius: categoryBtnBorderRadius, 
+							padding: categoryBtnPadding,
+							color: selectClassify.includes(item.id) ? showCategory.btnActiveColor : showCategory.btnColor}">
+							<text>{{item.name}}</text>
+						</view>
+					</view>
+					<view class="scroll-space"></view>
+				</scroll-view>
+				<view class="classify-more" :style="{background: showCategory.background}" @click="handleExpand(2)">
+					<view class="more-icon" style="transform: rotate(180deg);" :style="{'background-image': 'url('+ categoryIconDown +')'}" v-if="categoryIconDown"></view>
+					<text class="more-text" :style="{color: showCategory.expandColor}">收起列表</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import svgData from "@/common/svg.js"
+	export default {
+		name: "memberMapDiy",
+		props: ['showMap', 'showCategory', 'spaceHeight'],
+		data() {
+			return {
+				// 加载完成
+				loadEnd: false,
+				// 分类列表 1.行业分类，2.分支机构，3.会员级别
+				classifyList: [],
+				// 已选分类
+				selectClassify: [],
+				// 分类查询参数
+				page: 1,
+				limit: 100,
+				hasMore: false,
+				// 会员列表
+				memberList: [],
+				// 地图标记点
+				markersList: [],
+				// 所有标记点
+				includePoints: [],
+				// 查询数据防抖延时器
+				loadTimer: null,
+				// 页面跳转防抖延时器
+				toPageTimer: null,
+				// 分类弹窗是否展开-样式1
+				isExpandCategory1: true,
+				// 分类弹窗是否展开-样式2
+				isExpandCategory2: false,
+				// 组件高度
+				componentHeight: 0,
+			};
+		},
+		computed: {
+			mapItemBorderRadius() {
+				return uni.upx2px(this.showMap.itemBorderRadius * 2) + 'px';
+			},
+			mapHeight() {
+				if (this.showMap.heightType == 2) {
+					return uni.upx2px(this.showMap.height * 2) + 'px';
+				} else {
+					return '100%';
+				}
+			},
+			mapBorderRadius() {
+				return uni.upx2px(this.showMap.borderRadius * 2) + 'px';
+			},
+			mapPadding() {
+				return `${uni.upx2px(this.showMap.paddingTop * 2)}px ${uni.upx2px(this.showMap.paddingLeft * 2)}px`;
+			},
+			categoryBorderRadius() {
+				return uni.upx2px(this.showCategory.borderRadius * 2) + 'px';
+			},
+			categoryMaxHeight() {
+				var maxHeight = 0
+				if (this.showMap.heightType == 2) {
+					maxHeight = this.showMap.height - (this.showCategory.marginTop * 2)
+					return uni.upx2px(maxHeight * 2) + 'px';
+				} else {
+					maxHeight = this.showCategory.marginTop * 2
+					return uni.upx2px(maxHeight * 2) + 'px';
+				}
+			},
+			categoryMarginTop() {
+				return `${uni.upx2px(this.showCategory.marginTop * 2)}px`
+			},
+			categoryMarginLeft() {
+				return `${uni.upx2px(this.showCategory.marginLeft * 2)}px`
+			},
+			categoryIconDown() {
+				return svgData.svgToUrl("expand", this.showCategory.expandColor)
+			},
+			categoryPaddingTop() {
+				return `${uni.upx2px(this.showCategory.paddingTop * 2)}px`
+			},
+			categoryPaddingLeft() {
+				return `${uni.upx2px(this.showCategory.paddingLeft * 2)}px`
+			},
+			categoryItemSpace() {
+				return uni.upx2px(this.showCategory.itemSpace * 2) + 'px';
+			},
+			categoryBtnBorderRadius() {
+				return uni.upx2px(this.showCategory.btnBorderRadius * 2) + 'px';
+			},
+			categoryBtnPadding() {
+				return `${uni.upx2px(this.showCategory.btnPaddingTop * 2)}px ${uni.upx2px(this.showCategory.btnPaddingLeft * 2)}px`
+			},
+		},
+		watch: {
+			showCategory: {
+				handler(value) {
+					if (value) {
+						this.getClassifyList()
+						this.getMemberList()
+					}
+				},
+				immediate: true,
+				deep: true
+			},
+		},
+		destroyed() {
+			if (this.loadTimer) clearTimeout(this.loadTimer)
+			if (this.toPageTimer) clearTimeout(this.toPageTimer)
+		},
+		methods: {
+			// 获取会员列表
+			getMemberList() {
+				var data = { type: this.showCategory.type }
+				if (this.selectClassify.length) {
+					if (this.showCategory.type == 1) {
+						data.member_level_id = this.selectClassify.join(",")
+					} else if (this.showCategory.type == 2) {
+						data.industry_category_id = this.selectClassify.join(",")
+					} else if (this.showCategory.type == 3) {
+						data.institution_id = this.selectClassify.join(",")
+					}
+				}
+				this.$util.request("member.memberMapList", data).then(res => {
+					if (res.code == 1) {
+						this.memberList = res.data || []
+						var markersPoints = []
+						res.data.forEach((item) => {
+							if (item.latitude && item.longitude) {
+								markersPoints.push({
+									id: Number(item.id),
+									latitude: item.latitude,
+									longitude: item.longitude,
+									// #ifdef H5
+									iconPath: item.avatar,
+									width: 28,
+									height: 28,
+									callout: {
+										display: "ALWAYS",
+										content: item.name,
+										fontSize: 12,
+										borderRadius: 4,
+										padding: 5,
+									},
+									// #endif
+									// #ifdef MP-WEIXIN
+									iconPath: "/static/point.png",
+									width: 20,
+									height: 20,
+									customCallout: {
+										anchorX: 0,
+										anchorY: 28,
+										display: "ALWAYS",
+									},
+									// #endif
+								})
+							}
+						});
+						// #ifdef MP-WEIXIN
+						this.markersList = markersPoints
+						// #endif
+						// #ifndef MP-WEIXIN
+						this.markersList = []
+						this.$nextTick(() => {
+							this.markersList = markersPoints
+						})
+						// #endif
+						const allPoints = res.data.filter(el => el.latitude && el.longitude).map(item => ({
+							latitude: item.latitude,
+							longitude: item.longitude,
+						}));
+						// #ifdef MP-WEIXIN
+						this._mapContext = uni.createMapContext('map', this);
+						this._mapContext.initMarkerCluster({
+							enableDefaultStyle: false,
+							zoomOnClick: true,
+							gridSize: 60,
+						});
+						this._mapContext.includePoints({
+							padding: [100, 100, 100, 100],
+							points: allPoints,
+						});
+						// #endif
+						// #ifndef MP-WEIXIN
+						this.includePoints = this.calculateBounds(allPoints)
+						// #endif
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取会员列表 ', error)
+				})
+			},
+			// 计算所有点的边界
+			calculateBounds(points) {
+				if (!points || points.length === 0) return null;
+				let minLat = Infinity;
+				let maxLat = -Infinity;
+				let minLng = Infinity;
+				let maxLng = -Infinity;
+				points.forEach(point => {
+					const lat = point.latitude;
+					const lng = point.longitude;
+					minLat = Math.min(minLat, lat);
+					maxLat = Math.max(maxLat, lat);
+					minLng = Math.min(minLng, lng);
+					maxLng = Math.max(maxLng, lng);
+				});
+				const latRange = maxLat - minLat;
+				const lngRange = maxLng - minLng;
+				const topPadding = latRange * 0.4;
+				const bottomPadding = latRange * 0.3;
+				const leftPadding = lngRange * 0.3;
+				const rightPadding = lngRange * 0.3;
+				minLat = minLat - bottomPadding;
+				maxLat = maxLat + topPadding;
+				minLng = minLng - leftPadding;
+				maxLng = maxLng + rightPadding;
+				return [{ latitude: minLat, longitude: minLng }, { latitude: maxLat, longitude: maxLng }];
+			},
+			// 获取分类列表
+			getClassifyList() {
+				// type: 1.会员级别，2.行业分类，3.分支机构
+				const endFunction = () => {
+					this.loadEnd = true
+					setTimeout(() => {
+						uni.createSelectorQuery().in(this).select('.diy-member-map').boundingClientRect(data => {
+							this.componentHeight = data?.height
+						}).exec();
+					}, 200);
+				}
+				if (this.showCategory.type == 2) {
+					this.getIndustry(() => {
+						endFunction()
+					})
+				} else if (this.showCategory.type == 3) {
+					this.page = 1
+					this.getInstitution(() => {
+						endFunction()
+					})
+				} else {
+					this.getMemberLevel(() => {
+						endFunction()
+					})
+				}
+			},
+			// 获取会员级别
+			getMemberLevel(fn) {
+				this.$util.request("member.level").then(res => {
+					if (res.code == 1) {
+						this.classifyList = res.data || []
+						if (fn) fn()
+					} else {
+						if (fn) fn()
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					if (fn) fn()
+					console.error('获取会员级别 ', error)
+				})
+			},
+			// 获取行业分类
+			getIndustry(fn) {
+				this.$util.request("member.industry").then(res => {
+					if (res.code == 1) {
+						this.classifyList = res.data || []
+						if (fn) fn()
+					} else {
+						if (fn) fn()
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					if (fn) fn()
+					console.error('获取行业分类 ', error)
+				})
+			},
+			// 获取分支机构
+			getInstitution(fn) {
+				this.$util.request("institution.list", {
+					page: this.page,
+					limit: this.limit
+				}).then(res => {
+					if (res.code == 1) {
+						let list = res.data.data
+						this.hasMore = this.page < res.data.total / this.limit ? true : false
+						this.classifyList = this.page == 1 ? list : [...this.classifyList, ...list];
+						if (fn) fn()
+					} else {
+						if (fn) fn()
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					if (fn) fn()
+					console.error('获取机构列表', error)
+				})
+			},
+			// 滚动到底部
+			scrollBottom() {
+				if (this.hasMore) {
+					this.page++
+					this.getInstitution()
+				}
+			},
+			// 更换分类
+			changeClassify(id) {
+				if (id == -1) {
+					this.selectClassify = []
+				} else {
+					const index = this.selectClassify.findIndex(item => item == id)
+					if (index > -1) {
+						this.$delete(this.selectClassify, index)
+					} else {
+						this.selectClassify.push(id)
+					}
+				}
+				if (this.loadTimer) clearTimeout(this.loadTimer)
+				this.loadTimer = setTimeout(() => {
+					this.getMemberList()
+				}, 400);
+			},
+			// 跳转会员详情
+			toMemberDetails(res) {
+				if (this.toPageTimer) clearTimeout(this.toPageTimer)
+				this.toPageTimer = setTimeout(() => {
+					this.$util.toPage({
+						mode: 1,
+						path: "/pages/member/details?id=" + res.detail.markerId,
+					})
+				}, 50);
+			},
+			// 展开/折叠分类列表
+			handleExpand(type) {
+				uni.createSelectorQuery().in(this).select('.diy-member-map').boundingClientRect(data => {
+					this.componentHeight = data?.height
+				}).exec();
+				if (this.showCategory.styleMode == 2) {
+					this.isExpandCategory2 = type == 1 ? true : false
+				} else {
+					this.isExpandCategory1 = !this.isExpandCategory1
+				}
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.diy-member-map {
+		position: relative;
+		overflow: hidden;
+
+		&.flex-column {
+			display: flex;
+			flex-direction: column;
+		}
+
+		.map-context {
+			width: 100%;
+			height: 100%;
+			flex: 1;
+			overflow: hidden;
+
+			.map {
+				width: 100%;
+				height: 100%;
+				overflow: hidden;
+			}
+
+			.callout-item {
+				display: flex;
+				align-items: center;
+				padding: 16rpx;
+				border-radius: 16rpx;
+				background: #FFF;
+
+				.item-avatar {
+					width: 56rpx;
+					height: 56rpx;
+					border-radius: 16rpx;
+					object-fit: cover;
+					margin-right: 8rpx;
+				}
+
+				.item-name {
+					color: #5A5B6E;
+					font-size: 28rpx;
+					font-weight: 500;
+					line-height: 40rpx;
+				}
+			}
+		}
+
+		.map-classify {
+			display: flex;
+			flex-direction: column;
+			box-sizing: border-box;
+
+			.classify-list {
+				height: 100%;
+
+				.list-item {
+					line-height: 1.4;
+					text-align: center;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					word-break: break-all;
+				}
+			}
+
+			.classify-more {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				padding: 12rpx 24rpx;
+				gap: 8rpx;
+
+				.more-icon {
+					width: 32rpx;
+					height: 32rpx;
+				}
+
+				.more-text {
+					font-size: 24rpx;
+					line-height: 32rpx;
+				}
+			}
+
+			&.style-1 {
+				position: absolute;
+				z-index: 9;
+
+				.classify-list {
+					display: flex;
+					flex-direction: column;
+				}
+
+				.classify-more {
+					min-width: 184rpx;
+					margin-bottom: 16rpx;
+					width: 100%;
+
+					.more-icon {
+						transform: rotate(90deg);
+					}
+
+					&.collapse {
+						position: relative;
+						width: fit-content;
+
+						.more-icon {
+							transform: rotate(-90deg);
+						}
+					}
+				}
+			}
+
+			&.style-2 {
+				.classify-list {
+					white-space: nowrap;
+					overflow: hidden;
+
+					.list-item {
+						display: inline-block;
+					}
+				}
+			}
+		}
+
+		.map-more {
+			position: absolute;
+			top: 0;
+			left: 0;
+			z-index: 9;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			padding: 12rpx 24rpx;
+
+			.more-icon {
+				width: 32rpx;
+				height: 32rpx;
+			}
+
+			.more-text {
+				font-size: 24rpx;
+				line-height: 32rpx;
+			}
+		}
+
+		.map-popup {
+			position: absolute;
+			top: 0;
+			right: 0;
+			left: 0;
+
+			.popup-classify {
+				position: relative;
+
+				.classify-scroll {
+					box-sizing: border-box;
+
+					.scroll-list {
+						display: flex;
+						flex-wrap: wrap;
+
+						.list-item {
+							line-height: 1.4;
+							text-align: center;
+						}
+					}
+
+					.scroll-space {
+						width: 100%;
+						height: 56rpx;
+					}
+				}
+
+				.classify-more {
+					position: absolute;
+					bottom: 0;
+					left: 0;
+					right: 0;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					padding: 12rpx 24rpx;
+
+					.more-icon {
+						width: 32rpx;
+						height: 32rpx;
+					}
+
+					.more-text {
+						font-size: 24rpx;
+						line-height: 32rpx;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/component/diy/menuDiy.vue

@@ -0,0 +1,124 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-按钮组 开发者: 麦沃德科技-半夏 
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="diy-menu">
+		<block v-for="(item, index) in showData" :key="index">
+			<button class="menu-item clear" open-type="contact" :style="{marginTop: (index >= parseInt(showStyle.rowsNum) ? itemSpace : 0), width: `calc(100% / ${showStyle.rowsNum})`}" v-if="item.link && item.link.type == 'Service'">
+				<view class="item-image" :style="{width: iconSize, height: iconSize}">
+					<image mode="widthFix" :src="getImagePath(item.imgUrl)" :style="{borderRadius: borderRadius}"></image>
+				</view>
+				<view class="item-text text-ellipsis" :style="{color: showStyle.textColor, fontSize: fontSize}">{{ item.text }}</view>
+			</button>
+			<view class="menu-item" :style="{marginTop: (index >= parseInt(showStyle.rowsNum) ? itemSpace : 0), width: `calc(100% / ${showStyle.rowsNum})`}" @click="onClick(item.link, item.text)" v-else>
+				<view class="item-image" :style="{width: iconSize, height: iconSize}">
+					<image mode="widthFix" :src="getImagePath(item.imgUrl)" :style="{borderRadius: borderRadius}"></image>
+				</view>
+				<view class="item-text text-ellipsis" :style="{color: showStyle.textColor, fontSize: fontSize}">{{ item.text }}</view>
+				<!-- #ifdef H5 -->
+				<wx-open-launch-weapp class="item-absolute" :appid="item.link.appid" :path="item.link.path" v-if="item.link && item.link.type == 'WXMp'">
+					<script type="text/wxtag-template">
+						<style> .btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
+						<view class="btn"></view>
+					</script>
+				</wx-open-launch-weapp>
+				<!-- #endif -->
+			</view>
+		</block>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'menuDiy',
+		props: ['showStyle', 'showData', 'domain'],
+		computed: {
+			itemBorderRadius() {
+				return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
+			},
+			iconSize() {
+				let size = this.showStyle.iconSize || 44
+				return uni.upx2px(size * 2) + 'px';
+			},
+			borderRadius() {
+				return uni.upx2px(this.showStyle.borderRadius * 2) + 'px';
+			},
+			fontSize() {
+				let size = this.showStyle.fontSize || 14
+				return uni.upx2px(size * 2) + 'px';
+			},
+			paddingTop() {
+				return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
+			},
+			paddingLeft() {
+				return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
+			},
+			itemSpace() {
+				return uni.upx2px(this.showStyle.itemSpace * 2) + 'px';
+			},
+		},
+		methods: {
+			// 获取图片地址
+			getImagePath(url) {
+				if (url.indexOf('http') > -1) {
+					return url
+				} else {
+					return this.domain + url
+				}
+			},
+			// 点击事件
+			onClick(e, title) {
+				if (!e) return;
+				if (e.type == "Custom" && e.path.indexOf('/pages/article/index') > -1) {
+					if (e.path.indexOf("?") > -1) e.path += `&title=${encodeURIComponent(title || "")}`
+					else e.path += `?title=${encodeURIComponent(title || "")}`
+				}
+				this.$emit("onClick", e)
+			},
+		}
+	}
+</script>
+<style lang="scss">
+	.diy-menu {
+		display: flex;
+		flex-wrap: wrap;
+
+		.menu-item {
+			position: relative;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+
+			.item-image {
+				width: 88rpx;
+				height: 88rpx;
+				margin-bottom: 12rpx;
+			}
+
+			.item-text {
+				width: 100%;
+				line-height: 1;
+				font-size: 28rpx;
+				text-align: center;
+			}
+
+			.item-absolute {
+				display: block;
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+			}
+		}
+	}
+</style>

pages/component/diy/navDiy.vue

@@ -0,0 +1,140 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-导航组 开发者: 麦沃德科技-半夏 
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="diy-nav" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
+		<block v-if="!showStyle.rowsLimit || showStyle.rowsLimit == -1">
+			<menu-diy :showStyle="showStyle" :showData="showData" :domain="domain" @onClick="onClick"></menu-diy>
+		</block>
+		<block v-else-if="menuList.length == 1">
+			<menu-diy :showStyle="showStyle" :showData="menuList[0]" :domain="domain" @onClick="onClick"></menu-diy>
+		</block>
+		<block v-else>
+			<swiper :style="{height: carouselHeight}" @change="carouselChange">
+				<swiper-item v-for="(menu, number) in menuList" :key="number">
+					<menu-diy :showStyle="showStyle" :showData="menu" :domain="domain" @onClick="onClick"></menu-diy>
+				</swiper-item>
+			</swiper>
+			<view class="carousel-dots">
+				<view class="dots-item" :style="{background: carouseIndex == i ? (showStyle.dotColor || themeColor) : '#F1F1F1'}" v-for="(d, i) in menuList" :key="i"></view>
+			</view>
+		</block>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	import menuDiy from './menuDiy.vue'
+	export default {
+		name: 'navDiy',
+		components: {
+			menuDiy
+		},
+		props: ['showStyle', 'showData', 'showParams', 'domain'],
+		data() {
+			return {
+				// 已选索引
+				carouseIndex: 0,
+				// 菜单列表
+				menuList: [],
+				// 轮播图高度
+				carouselHeight: 0,
+			};
+		},
+		watch: {
+			showData: {
+				handler(value) {
+					if (value && value.length) {
+						console.log(value,'==========value============')
+						this.menuList = this.splitArray(value);
+					}
+				},
+				immediate: true,
+				deep: true
+			},
+			showStyle: {
+				handler(value) {
+					if (value) {
+						let height = 0
+						let iconSize = value.iconSize || 44
+						let fontSize = value.fontSize || 14
+						if (value.rowsLimit) {
+							height = `calc(${uni.upx2px(((iconSize + fontSize) * value.rowsLimit + value.itemSpace * (value.rowsLimit - 1)) * 2)}px + ${12 * value.rowsLimit}rpx)`
+						}
+						this.carouselHeight = height;
+					}
+				},
+				immediate: true,
+				deep: true
+			},
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+			}),
+			itemBorderRadius() {
+				return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
+			},
+			paddingTop() {
+				return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
+			},
+			paddingLeft() {
+				return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
+			},
+		},
+		methods: {
+			// 轮播图切换
+			carouselChange(e) {
+				this.carouseIndex = e.detail.current
+			},
+			// 切割数组
+			splitArray(arr) {
+				var result = [];
+				if (this.showStyle.rowsLimit && this.showStyle.rowsLimit > 0 && arr.length > this.showStyle.rowsNum * this.showStyle.rowsLimit) {
+					for (var i = 0; i < arr.length; i += parseInt(this.showStyle.rowsNum * this.showStyle.rowsLimit)) {
+						var chunk = arr.slice(i, i + parseInt(this.showStyle.rowsNum * this.showStyle.rowsLimit));
+						result.push(chunk);
+					}
+				} else {
+					result[0] = arr
+				}
+				return result;
+			},
+			// 点击事件
+			onClick(e) {
+				if (!e) return;
+				this.$emit("onClick", e)
+			},
+		}
+	}
+</script>
+<style lang="scss">
+	.diy-nav {
+		.carousel-dots {
+			display: flex;
+			justify-content: center;
+			padding-top: 20px;
+
+			.dots-item {
+				width: 24rpx;
+				height: 8rpx;
+				border-radius: 8rpx;
+				background: #F1F1F1;
+				margin-right: 4rpx;
+
+				&:last-child {
+					margin-right: 0;
+				}
+			}
+		}
+	}
+</style>

pages/component/diy/noticeDiy.vue

@@ -0,0 +1,386 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-消息通知 开发者: 麦沃德科技-半夏 
++---------------------------------------------------------------------- -->
+
+<template>
+	<view v-if="show" class="uni-noticebar" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}" @click="onClick">
+		<view v-if="showParams.showImg && showParams.icon" class="zan-noticebar__left-icon" style="float: left;">
+			<image :src="getImagePath(showParams.icon)" mode="aspectFit" />
+		</view>
+		<view ref="textBox" class="uni-noticebar__content-wrapper" :class="{'uni-noticebar__content-wrapper--scrollable':scrollable, 'uni-noticebar__content-wrapper--single':!scrollable && (single || moreText)}">
+			<view :id="elIdBox" class="uni-noticebar__content" :class="{'uni-noticebar__content--scrollable':scrollable, 'uni-noticebar__content--single':!scrollable && (single || moreText)}">
+				<text :id="elId" ref="animationEle" class="uni-noticebar__content-text" :class="{'uni-noticebar__content-text--scrollable':scrollable,'uni-noticebar__content-text--single':!scrollable && (single || moreText)}" :style="{color: showStyle.textColor, width:wrapWidth+'px', 'animationDuration': animationDuration, '-webkit-animationDuration': animationDuration ,animationPlayState: webviewHide?'paused':animationPlayState,'-webkit-animationPlayState':webviewHide?'paused':animationPlayState, animationDelay: animationDelay, '-webkit-animationDelay':animationDelay}">{{showParams.text}}</text>
+			</view>
+		</view>
+		<view v-if="showGetMore === true || showGetMore === 'true'" class="uni-noticebar__more" @click="clickMore">
+			<text v-if="moreText" :style="{ color: moreColor }" class="uni-noticebar__more-text">{{ moreText }}</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	// #ifdef APP-NVUE
+	const dom = weex.requireModule('dom');
+	const animation = weex.requireModule('animation');
+	// #endif
+	export default {
+		name: 'notice',
+		props: {
+			moreText: {
+				type: String,
+				default: ''
+			},
+			speed: {
+				// 默认1s滚动100px
+				type: Number,
+				default: 100
+			},
+			moreColor: {
+				type: String,
+				default: '#999999'
+			},
+			single: {
+				// 是否单行
+				type: [Boolean, String],
+				default: false
+			},
+			scrollable: {
+				// 是否滚动，添加后控制单行效果取消
+				type: [Boolean, String],
+				default: true
+			},
+			showGetMore: {
+				// 是否显示右侧查看更多
+				type: [Boolean, String],
+				default: false
+			},
+			showClose: {
+				// 是否显示左侧关闭按钮
+				type: [Boolean, String],
+				default: false
+			},
+			showStyle: {},
+			showParams: {},
+			domain: '',
+		},
+		computed: {
+			itemBorderRadius() {
+				return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
+			},
+			paddingTop() {
+				return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
+			},
+			paddingLeft() {
+				return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
+			},
+		},
+		data() {
+			const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
+			const elIdBox = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
+			return {
+				textWidth: 0,
+				boxWidth: 0,
+				wrapWidth: '',
+				webviewHide: false,
+				// #ifdef APP-NVUE
+				stopAnimation: false,
+				// #endif
+				elId: elId,
+				elIdBox: elIdBox,
+				show: true,
+				animationDuration: 'none',
+				animationPlayState: 'paused',
+				animationDelay: '0s',
+			}
+		},
+		mounted() {
+			// #ifdef APP-PLUS
+			var pages = getCurrentPages();
+			var page = pages[pages.length - 1];
+			var currentWebview = page.$getAppWebview();
+			currentWebview.addEventListener('hide', () => {
+				this.webviewHide = true
+			})
+			currentWebview.addEventListener('show', () => {
+				this.webviewHide = false
+			})
+			// #endif
+			this.$nextTick(() => {
+				this.initSize()
+			})
+		},
+		// #ifdef APP-NVUE
+		beforeDestroy() {
+			this.stopAnimation = true
+		},
+		// #endif
+		methods: {
+			// 获取图片地址
+			getImagePath(url) {
+				if (url.indexOf('http') > -1) {
+					return url
+				} else {
+					return this.domain + url
+				}
+			},
+			initSize() {
+				if (this.scrollable) {
+					// #ifndef APP-NVUE
+					let query = [],
+						boxWidth = 0,
+						textWidth = 0;
+					let textQuery = new Promise((resolve, reject) => {
+						uni.createSelectorQuery()
+							// #ifndef MP-ALIPAY
+							.in(this)
+							// #endif
+							.select(`#${this.elId}`)
+							.boundingClientRect()
+							.exec(ret => {
+								this.textWidth = ret[0].width
+								resolve()
+							})
+					})
+					let boxQuery = new Promise((resolve, reject) => {
+						uni.createSelectorQuery()
+							// #ifndef MP-ALIPAY
+							.in(this)
+							// #endif
+							.select(`#${this.elIdBox}`)
+							.boundingClientRect()
+							.exec(ret => {
+								this.boxWidth = ret[0].width
+								resolve()
+							})
+					})
+					query.push(textQuery)
+					query.push(boxQuery)
+					Promise.all(query).then(() => {
+						this.animationDuration = `${this.textWidth / this.speed}s`
+						this.animationDelay = `-${this.boxWidth / this.speed}s`
+						setTimeout(() => {
+							this.animationPlayState = 'running'
+						}, 1000)
+					})
+					// #endif
+					// #ifdef APP-NVUE
+					dom.getComponentRect(this.$refs['animationEle'], (res) => {
+						let winWidth = uni.getSystemInfoSync().windowWidth
+						this.textWidth = res.size.width
+						animation.transition(this.$refs['animationEle'], {
+							styles: {
+								transform: `translateX(-${winWidth}px)`
+							},
+							duration: 0,
+							timingFunction: 'linear',
+							delay: 0
+						}, () => {
+							if (!this.stopAnimation) {
+								animation.transition(this.$refs['animationEle'], {
+									styles: {
+										transform: `translateX(-${this.textWidth}px)`
+									},
+									timingFunction: 'linear',
+									duration: (this.textWidth - winWidth) / this.speed * 1000,
+									delay: 1000
+								}, () => {
+									if (!this.stopAnimation) {
+										this.loopAnimation()
+									}
+								});
+							}
+						});
+					})
+					// #endif
+				}
+				// #ifdef APP-NVUE
+				if (!this.scrollable && (this.single || this.moreText)) {
+					dom.getComponentRect(this.$refs['textBox'], (res) => {
+						this.wrapWidth = res.size.width
+					})
+				}
+				// #endif
+			},
+			loopAnimation() {
+				// #ifdef APP-NVUE
+				animation.transition(this.$refs['animationEle'], {
+					styles: {
+						transform: `translateX(0px)`
+					},
+					duration: 0
+				}, () => {
+					if (!this.stopAnimation) {
+						animation.transition(this.$refs['animationEle'], {
+							styles: {
+								transform: `translateX(-${this.textWidth}px)`
+							},
+							duration: this.textWidth / this.speed * 1000,
+							timingFunction: 'linear',
+							delay: 0
+						}, () => {
+							if (!this.stopAnimation) {
+								this.loopAnimation()
+							}
+						});
+					}
+				});
+				// #endif
+			},
+			clickMore() {
+				this.$emit('getmore')
+			},
+			close() {
+				this.show = false;
+				this.$emit('close')
+			},
+			onClick() {
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.uni-noticebar {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		width: 100%;
+		box-sizing: border-box;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		padding: 6px 12px;
+		// margin-bottom: 10px;
+	}
+
+	.uni-noticebar-close {
+		margin-right: 5px;
+	}
+
+	.uni-noticebar-icon {
+		margin-right: 5px;
+	}
+
+	.uni-noticebar__content-wrapper {
+		flex: 1;
+		flex-direction: column;
+		overflow: hidden;
+	}
+
+	.uni-noticebar__content-wrapper--single {
+		/* #ifndef APP-NVUE */
+		line-height: 18px;
+		/* #endif */
+	}
+
+	.uni-noticebar__content-wrapper--single,
+	.uni-noticebar__content-wrapper--scrollable {
+		flex-direction: row;
+	}
+
+	/* #ifndef APP-NVUE */
+	.uni-noticebar__content-wrapper--scrollable {
+		position: relative;
+		height: 18px;
+	}
+
+	/* #endif */
+
+	.uni-noticebar__content--scrollable {
+		/* #ifdef APP-NVUE */
+		flex: 0;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		flex: 1;
+		display: block;
+		overflow: hidden;
+		/* #endif */
+	}
+
+	.uni-noticebar__content--single {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		flex: none;
+		width: 100%;
+		justify-content: center;
+		/* #endif */
+	}
+
+	.uni-noticebar__content-text {
+		font-size: 14px;
+		line-height: 18px;
+		/* #ifndef APP-NVUE */
+		word-break: break-all;
+		/* #endif */
+	}
+
+	.uni-noticebar__content-text--single {
+		/* #ifdef APP-NVUE */
+		lines: 1;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		display: block;
+		width: 100%;
+		white-space: nowrap;
+		/* #endif */
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.uni-noticebar__content-text--scrollable {
+		/* #ifdef APP-NVUE */
+		lines: 1;
+		padding-left: 750rpx;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		position: absolute;
+		display: block;
+		height: 18px;
+		line-height: 18px;
+		white-space: nowrap;
+		padding-left: 100%;
+		animation: notice 10s 0s linear infinite both;
+		animation-play-state: paused;
+		/* #endif */
+	}
+
+	.uni-noticebar__more {
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		/* #endif */
+		flex-direction: row;
+		flex-wrap: nowrap;
+		align-items: center;
+		padding-left: 5px;
+	}
+
+	.uni-noticebar__more-text {
+		font-size: 14px;
+	}
+
+	@keyframes notice {
+		100% {
+			transform: translate3d(-100%, 0, 0);
+		}
+	}
+
+	.zan-noticebar__left-icon {
+		height: 36upx;
+		min-width: 40upx;
+		padding-top: 2upx;
+		box-sizing: border-box;
+	}
+
+	.zan-noticebar__left-icon>image {
+		width: 32upx;
+		height: 32upx;
+	}
+</style>

pages/component/diy/richTextDiy.vue

@@ -0,0 +1,36 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-富文本 开发者: 麦沃德科技-半夏 
++---------------------------------------------------------------------- -->
+
+<template>
+	<!-- 富文本 -->
+	<view class="diy-richText" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
+		<mp-html :content="showParams.content" />
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'richTextDiy',
+		props: ['showStyle', 'showParams'],
+		computed: {
+			itemBorderRadius() {
+				return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
+			},
+			paddingTop() {
+				return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
+			},
+			paddingLeft() {
+				return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
+			},
+		},
+	}
+</script>

pages/component/diy/searchDiy.vue

@@ -0,0 +1,95 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-搜索 开发者: 麦沃德科技-半夏
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="diy-search" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
+		<view class="search-input" :style="{'--placeholder-color': showStyle.placeholderColor, padding: inputPaddingTop + ' ' + inputPaddingLeft, background: showStyle.inputBackground, borderRadius: inputBorderRadius}">
+			<view :style="{'background-image': 'url('+ iconSearch +')', width: iconSize, height: iconSize, backgroundSize: iconSize}" v-if="iconSearch"></view>
+			<input class="input-box" type="text" confirm-type="search" :style="{fontSize: fontSize, color: showStyle.inputColor}" :placeholder="showParams.placeholder" placeholder-class="placeholder" @confirm="handleSearch" />
+		</view>
+	</view>
+</template>
+
+<script>
+	import svgData from "@/common/svg.js"
+	export default {
+		name: "searchDiy",
+		props: ['showStyle', 'showParams'],
+		computed: {
+			itemBorderRadius() {
+				return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
+			},
+			iconSearch() {
+				return svgData.svgToUrl("search", this.showStyle.iconColor)
+			},
+			iconSize() {
+				return uni.upx2px(this.showStyle.iconSize * 2) + 'px';
+			},
+			fontSize() {
+				return uni.upx2px(this.showStyle.fontSize * 2) + 'px';
+			},
+			inputBorderRadius() {
+				return uni.upx2px(this.showStyle.inputBorderRadius * 2) + 'px';
+			},
+			inputPaddingTop() {
+				return uni.upx2px(this.showStyle.inputPaddingTop * 2) + 'px';
+			},
+			inputPaddingLeft() {
+				return uni.upx2px(this.showStyle.inputPaddingLeft * 2) + 'px';
+			},
+			paddingTop() {
+				return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
+			},
+			paddingLeft() {
+				return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
+			},
+		},
+		methods: {
+			// 搜索
+			handleSearch(e) {
+				if (!e.detail.value) {
+					uni.showToast({
+						icon: "none",
+						title: this.showParams.placeholder,
+						duration: 2000
+					})
+					return
+				}
+				this.$util.toPage({
+					mode: 1,
+					path: `/pages/diy/search?keyword=${encodeURIComponent(e.detail.value)}`
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.diy-search {
+		.search-input {
+			display: flex;
+			align-items: center;
+
+			.input-box {
+				width: 100%;
+				height: auto;
+				min-height: auto;
+				line-height: 1.4;
+				margin-left: 16rpx;
+			}
+
+			.placeholder {
+				color: var(--placeholder-color);
+			}
+		}
+	}
+</style>

pages/component/diy/textButtonDiy.vue

@@ -0,0 +1,88 @@
+<!-- +----------------------------------------------------------------------
+	| 麦沃德科技赋能开发者，助力商协会发展
+	+----------------------------------------------------------------------
+	| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
+	+----------------------------------------------------------------------
+	| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+	+----------------------------------------------------------------------
+	| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
+	+----------------------------------------------------------------------
+	| 组件-按钮组 开发者: 麦沃德科技-半夏 
+	+---------------------------------------------------------------------- -->
+
+<template>
+	<view class="diy-text-button" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
+		<block v-for="(item, index) in showData" :key="index">
+			<button class="item clear" open-type="contact" :style="{color: showStyle.textColor, fontSize: fontSize}" v-if="item.link && item.link.type == 'Service'">
+				{{item.text}}
+			</button>
+			<view class="item" :style="{color: showStyle.textColor, fontSize: fontSize}" @click="onClick(item.link)" v-else>
+				<text>{{item.text}}</text>
+				<!-- #ifdef H5 -->
+				<wx-open-launch-weapp class="item-absolute" :appid="item.link.appid" :path="item.link.path" v-if="item.link && item.link.type == 'WXMp'">
+					<script type="text/wxtag-template">
+						<style> .btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
+						<view class="btn"></view>
+					</script>
+				</wx-open-launch-weapp>
+				<!-- #endif -->
+			</view>
+		</block>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'textButtonDiy',
+		props: ['showStyle', 'showData'],
+		computed: {
+			itemBorderRadius() {
+				return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
+			},
+			fontSize() {
+				return uni.upx2px(this.showStyle.fontSize * 2) + 'px';
+			},
+			paddingTop() {
+				return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
+			},
+			paddingLeft() {
+				return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
+			},
+		},
+		methods: {
+			onClick(e) {
+				if (!e) return;
+				this.$emit("onClick", e)
+			},
+		}
+	}
+</script>
+<style lang="scss">
+	.diy-text-button {
+		height: auto;
+
+		.item {
+			position: relative;
+			padding: 0.5rem;
+			text-align: center;
+			position: relative;
+			color: #666;
+			font-size: 0.75rem;
+			width: 1%;
+			display: table-cell;
+			-webkit-user-select: none;
+			-moz-user-select: none;
+			transition: background-color 300ms;
+			-webkit-transition: background-color 300ms;
+
+			.item-absolute {
+				display: block;
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+			}
+		}
+	}
+</style>

pages/component/diy/textDiy.vue

@@ -0,0 +1,40 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-文本组 开发者: 麦沃德科技-半夏 
++---------------------------------------------------------------------- -->
+
+<template>
+	<view :style="{background: showStyle.background, borderRadius: itemBorderRadius, padding: paddingTop +' '+ paddingLeft, textAlign: showStyle.textAlign, color: showStyle.textColor, fontSize: fontSize}">
+		<text v-if="showStyle.fontStyle == 'bold'" style="font-weight: bold;">{{showStyle.text}}</text>
+		<text v-else-if="showStyle.fontStyle == 'italic'" style="font-style: italic;">{{showStyle.text}}</text>
+		<text v-else>{{showStyle.text}}</text>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'textDiy',
+		props: ['showStyle'],
+		computed: {
+			itemBorderRadius() {
+				return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
+			},
+			fontSize() {
+				return uni.upx2px(this.showStyle.fontSize * 2) + 'px';
+			},
+			paddingTop() {
+				return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
+			},
+			paddingLeft() {
+				return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
+			},
+		},
+	}
+</script>

pages/component/diy/timelineDiy.vue

@@ -0,0 +1,55 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-时间线 开发者: 麦沃德科技-半夏 
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="diy-timeline" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
+		<u-time-line>
+			<u-time-line-item v-for="(item,index) in showData" :key="index" :bgColor="item.color">
+				<template v-slot:content>
+					<view>
+						<view class="u-order-desc">{{item.content}}</view>
+						<view class="u-order-time" v-if="item.hide">{{item.time}}</view>
+					</view>
+				</template>
+			</u-time-line-item>
+		</u-time-line>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: ['showStyle', 'showData'],
+		computed: {
+			itemBorderRadius() {
+				return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
+			},
+			paddingTop() {
+				return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
+			},
+			paddingLeft() {
+				return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.diy-timeline .u-order-time {
+		color: rgb(200, 200, 200);
+		font-size: 26rpx;
+		margin-top: 10rpx;
+	}
+	
+	.diy-timeline .u-time-axis-item {
+		margin-top: 32rpx;
+	}
+</style>

pages/component/diy/titleDiy.vue

@@ -0,0 +1,106 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-标题 开发者: 麦沃德科技-半夏 
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="diy-title" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
+		<view class="title-text" :style="{fontSize: fontSize, color: showStyle.color}">
+			<text class="italic" v-if="showStyle.fontStyle == 'italic'">{{showParams.title}}</text>
+			<text class="bold" v-else-if="showStyle.fontStyle == 'bold'">{{showParams.title}}</text>
+			<text v-else>{{showParams.title}}</text>
+		</view>
+		<button class="title-btn clear" open-type="contact" v-if="showParams.link && showParams.link.type == 'Service'">
+			<text :style="{fontSize: btnSize, color: showStyle.btnColor}" v-if="showParams.btnType == 'text'">{{showParams.btnText}}</text>
+			<view class="btn" :style="{width: iconSize, height: iconSize, backgroundSize: iconSize, backgroundImage: 'url('+ iconMore +')'}" v-else-if="iconMore && showParams.btnType == 'icon'"></view>
+		</button>
+		<view class="title-btn" @click="onClick(showParams.link)" v-else>
+			<text :style="{fontSize: btnSize, color: showStyle.btnColor}" v-if="showParams.btnType == 'text'">{{showParams.btnText}}</text>
+			<view class="btn" :style="{width: iconSize, height: iconSize, backgroundSize: iconSize, backgroundImage: 'url('+ iconMore +')'}" v-else-if="iconMore && showParams.btnType == 'icon'"></view>
+			<!-- #ifdef H5 -->
+			<wx-open-launch-weapp class="btn-absolute" :appid="showParams.link.appid" :path="showParams.link.path" v-if="showParams.link && showParams.link.type == 'WXMp'">
+				<script type="text/wxtag-template">
+					<style> .wx-btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
+					<view class="wx-btn"></view>
+				</script>
+			</wx-open-launch-weapp>
+			<!-- #endif -->
+		</view>
+	</view>
+</template>
+
+<script>
+	import svgData from "@/common/svg.js"
+	export default {
+		name: 'titleDiy',
+		props: ['showStyle', 'showParams'],
+		computed: {
+			itemBorderRadius() {
+				return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
+			},
+			fontSize() {
+				return uni.upx2px(this.showStyle.fontSize * 2) + 'px';
+			},
+			btnSize() {
+				return uni.upx2px(this.showStyle.btnSize * 2) + 'px';
+			},
+			iconSize() {
+				return uni.upx2px(this.showStyle.iconSize * 2) + 'px';
+			},
+			iconMore() {
+				return svgData.svgToUrl("more", this.showStyle.btnColor)
+			},
+			paddingTop() {
+				return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
+			},
+			paddingLeft() {
+				return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
+			},
+		},
+		methods: {
+			// 点击事件
+			onClick(e) {
+				if (!e) return;
+				this.$emit("onClick", e)
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.diy-title {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		.title-text {
+			.italic {
+				font-style: italic;
+			}
+
+			.bold {
+				font-weight: bold;
+			}
+		}
+
+		.title-btn {
+			position: relative;
+
+			.btn-absolute {
+				display: block;
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+			}
+		}
+	}
+</style>

pages/component/diy/videoDiy.vue

@@ -0,0 +1,52 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-视频 开发者: 麦沃德科技-半夏 
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="diy-video" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
+		<video :src="showParams.videoUrl" :poster="getImagePath(showParams.poster)" :autoplay="showParams.autoplay == 1" controls="false"></video>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'videoDiy',
+		props: ['showStyle', 'showParams', 'domain'],
+		computed: {
+			paddingTop() {
+				return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
+			},
+			paddingLeft() {
+				return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
+			},
+			itemBorderRadius() {
+				return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
+			},
+		},
+		methods: {
+			// 获取图片地址
+			getImagePath(url) {
+				if (url.indexOf('http') > -1) {
+					return url
+				} else {
+					return this.domain + url
+				}
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.diy-video video {
+		width: 100%;
+		display: block;
+	}
+</style>

pages/component/diy/warnDiy.vue

@@ -0,0 +1,48 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-警告提示 开发者: 麦沃德科技-半夏 
++---------------------------------------------------------------------- -->
+
+<template>
+	<block v-if="isshow">
+		<view :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
+			<u-alert-tips :type="showStyle.type" :title="showParams.title" :description="showParams.description" :close-able="showParams.closable" :show="show" @close="onClick" :show-icon="showParams.showIcon"></u-alert-tips>
+		</view>
+	</block>
+</template>
+
+<script>
+	export default {
+		props: ['showStyle', 'showParams'],
+		computed: {
+			itemBorderRadius() {
+				return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
+			},
+			paddingTop() {
+				return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
+			},
+			paddingLeft() {
+				return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
+			},
+		},
+		data() {
+			return {
+				show: true,
+				isshow: true,
+			}
+		},
+		methods: {
+			onClick() {
+				this.show = false;
+				this.isshow = false;
+			}
+		}
+	}
+</script>

pages/component/empty/empty.vue

@@ -0,0 +1,92 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-内容为空 开发者: 麦沃德科技-半夏
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="component-empty" :style="{marginTop: top, padding: padding}">
+		<image class="image" :style="{width: width, height: width}" src="/static/empty.png" mode="widthFix"></image>
+		<view class="text" :style="{fontSize: size}">
+			<text>{{title}}</text>
+			<view class="btn" @click="callback" v-if="btnText" :style="{ color: themeColor }">{{btnText}}</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	export default {
+		name: "emptyIndex",
+		props: {
+			// 距顶部位置 注：center为居中显示
+			top: {
+				type: String,
+				default: "32rpx"
+			},
+			// 盒子内边距
+			padding: {
+				type: String,
+				default: "32rpx"
+			},
+			// 图标尺寸
+			width: {
+				type: String,
+				default: "260rpx"
+			},
+			// 文字大小
+			size: {
+				type: String,
+				default: "32rpx"
+			},
+			// 标题
+			title: {
+				type: String,
+				default: "暂无相关内容~"
+			},
+			// 快捷按钮文字 注：为空则不显示
+			btnText: {
+				type: String,
+				default: ""
+			},
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+			})
+		},
+		methods: {
+			// 快捷按钮回调函数
+			callback() {
+				this.$emit("callback")
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.component-empty {
+		text-align: center;
+
+		.image {
+			width: 100%;
+			height: 100%;
+			display: block;
+			margin: 0 auto 32rpx;
+		}
+
+		.text {
+			color: #888;
+			line-height: 1.4;
+			display: flex;
+			justify-content: center;
+
+		}
+	}
+</style>

pages/component/mall/goods.vue

@@ -0,0 +1,85 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-商会商品 开发者: 麦沃德科技-半夏
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="component-mall-goods">
+		<view class="goods-item flex" v-for="item in showData" :key="item.id" @click="toDetails(item.id)">
+			<image class="item-image" :src="item.image" mode="aspectFill"></image>
+			<view class="item-info flex-item flex-direction-column justify-content-between">
+				<view class="info-title text-ellipsis-more">{{ item.name }}</view>
+				<view class="info-price">￥{{ item.price }}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	export default {
+		name: "mallGoods",
+		props: ["showData"],
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+			})
+		},
+		methods: {
+			// 跳转商品详情
+			toDetails(id) {
+				this.$util.toPage({
+					mode: 1,
+					path: "/pagesMall/goods/details?id=" + id
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.component-mall-goods {
+		.goods-item {
+			margin-top: 32rpx;
+			padding: 32rpx;
+			background: #FFF;
+			border-radius: 10rpx;
+
+			&:first-child {
+				margin-top: 0;
+			}
+
+			.item-image {
+				width: 160rpx;
+				height: 160rpx;
+				border-radius: 16rpx;
+			}
+
+			.item-info {
+				margin-left: 24rpx;
+
+				.info-title {
+					color: #5A5B6E;
+					font-size: 28rpx;
+					font-weight: 600;
+					line-height: 40rpx;
+				}
+
+				.info-price {
+					margin-top: 16rpx;
+					color: var(--theme-color);
+					font-size: 28rpx;
+					font-weight: 600;
+					line-height: 40rpx;
+				}
+			}
+		}
+	}
+</style>

pages/component/member/apply.vue

@@ -0,0 +1,969 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-申请入会 开发者: 麦沃德科技-半夏
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="component-member-apply" :style="{'--theme-color': themeColor}">
+		<!-- 表单数据 -->
+		<form class="component-member-apply-form">
+			<view class="component-member-apply-form-item" v-for="(item, index) in applyField" :key="index" v-if="!isApply || item.apply_show != 2">
+				<!-- 标题 -->
+				<view class="item-title">
+					<text class="required" v-if="item.required == 1">*</text>
+					<text class="text">{{item.label}}</text>
+					<text class="tips" v-if="item.type == 'image' || item.type == 'cert' || item.type == 'video' || item.type == 'file'">（{{item.option}}）</text>
+				</view>
+				<!-- 文本字段 -->
+				<block v-if="item.type == 'text'">
+					<!-- 地址选择 -->
+					<view class="item-input" @click="chooseLocation(index)" v-if="showType == 1 && item.field == 'address'">
+						<view class="input text-ellipsis" v-if="item.value.address">{{item.value.address}}</view>
+						<view class="input placeholder text-ellipsis" v-else>请选择{{item.label}}</view>
+						<image class="icon" src="/static/del.png" mode="aspectFit" v-if="item.value.address" @click.stop="clearLocation(index)"></image>
+						<image class="icon" src="/static/right.png" mode="aspectFit" v-else></image>
+					</view>
+					<!-- 文本框 -->
+					<view class="item-input" :class="{disabled: item.disabled}" v-else>
+						<input class="input" :disabled="item.disabled" type="text" v-model="item.value" :placeholder="item.option" placeholder-class="placeholder" />
+					</view>
+				</block>
+				<!-- 数字字段 -->
+				<block v-else-if="item.type == 'number'">
+					<view class="item-input" :class="{disabled: item.disabled}">
+						<input class="input" :disabled="item.disabled" type="number" :maxlength="(showType == 1 && item.field == 'mobile') ? 11 : -1" v-model="item.value" :placeholder="item.option" placeholder-class="placeholder" />
+					</view>
+					<view class="item-switch" @click="changeMobileAuth()" v-if="showType == 1 && item.field == 'mobile' && mobileAuth">
+						<view class="switch-label">手机号是否对外</view>
+						<view class="switch-box" :class="{'select': mobileAuth == 1}">
+							<view class="round"></view>
+						</view>
+					</view>
+				</block>
+				<!-- 单选按钮 -->
+				<block v-else-if="item.type == 'radio'">
+					<view class="item-radio">
+						<view class="radio" :class="{active: item.value == option}" v-for="(option, num) in getOption(item.option)" :key="num" @click="selectRadio(index, option)">
+							<image src="/static/select.png" mode="aspectFit"></image>
+							<text>{{option}}</text>
+						</view>
+					</view>
+				</block>
+				<!-- 复选按钮 -->
+				<block v-else-if="item.type == 'checkbox'">
+					<view class="item-radio">
+						<view class="radio" :class="{active: item.value.includes(option)}" v-for="(option, num) in getOption(item.option)" :key="num" @click="selectCheckbox(index, option)">
+							<image src="/static/select.png" mode="aspectFit"></image>
+							<text>{{option}}</text>
+						</view>
+					</view>
+				</block>
+				<!-- 下拉列表 -->
+				<block v-else-if="item.type == 'select'">
+					<!-- 会员级别 -->
+					<view class="item-input" :class="{disabled: item.disabled}" @click="openSelectPicker(index)" v-if="showType == 1 && item.field == 'member_level_id'">
+						<view class="input text-ellipsis" v-if="item.value">{{getMemberLevelName(item.value)}}</view>
+						<view class="input placeholder text-ellipsis" v-else>请选择{{item.label}}</view>
+						<image class="icon" src="/static/right.png" mode="aspectFit" v-if="!item.disabled"></image>
+					</view>
+					<!-- 行业分类 -->
+					<view class="item-input" @click="openSelectPicker(index)" v-else-if="showType == 1 && item.field == 'industry_category_id'">
+						<view class="input text-ellipsis" v-if="item.value">{{getIndustryName(item.value)}}</view>
+						<view class="input placeholder text-ellipsis" v-else>请选择{{item.label}}</view>
+						<image class="icon" src="/static/del.png" mode="aspectFit" v-if="item.value" @click.stop="clearValue(index)"></image>
+						<image class="icon" src="/static/right.png" mode="aspectFit" v-else></image>
+					</view>
+					<!-- 籍贯 -->
+					<view class="item-input" @click="openSelectPicker(index)" v-else-if="showType == 1 && item.field == 'native_place'">
+						<view class="input text-ellipsis" v-if="item.value">{{item.value}}</view>
+						<view class="input placeholder text-ellipsis" v-else>{{item.option}}</view>
+						<image class="icon" src="/static/del.png" mode="aspectFit" v-if="item.value" @click.stop="clearValue(index)"></image>
+						<image class="icon" src="/static/right.png" mode="aspectFit" v-else></image>
+					</view>
+					<!-- 下拉列表 -->
+					<view class="item-input" @click="openSelectPicker(index)" v-else>
+						<view class="input text-ellipsis" v-if="item.value">{{item.value}}</view>
+						<view class="input placeholder text-ellipsis" v-else>请选择{{item.label}}</view>
+						<image class="icon" src="/static/del.png" mode="aspectFit" v-if="item.value" @click.stop="clearValue(index)"></image>
+						<image class="icon" src="/static/right.png" mode="aspectFit" v-else></image>
+					</view>
+				</block>
+				<!-- 日期字段 -->
+				<block v-else-if="item.type == 'date'">
+					<view class="item-input" @click="openDatePicker(index)">
+						<view class="input text-ellipsis" v-if="item.value">{{item.value}}</view>
+						<view class="input placeholder text-ellipsis" v-else>请选择{{item.label}}</view>
+						<image class="icon" src="/static/del.png" mode="aspectFit" v-if="item.value" @click.stop="clearValue(index)"></image>
+						<image class="icon" src="/static/date.png" mode="aspectFit" v-else></image>
+					</view>
+				</block>
+				<!-- 时间字段 -->
+				<block v-else-if="item.type == 'time'">
+					<view class="item-input" @click="openTimePicker(index)">
+						<view class="input text-ellipsis" v-if="item.value">{{item.value}}</view>
+						<view class="input placeholder text-ellipsis" v-else>请选择{{item.label}}</view>
+						<image class="icon" src="/static/del.png" mode="aspectFit" v-if="item.value" @click.stop="clearValue(index)"></image>
+						<image class="icon" src="/static/time.png" mode="aspectFit" v-else></image>
+					</view>
+				</block>
+				<!-- 日期时间 -->
+				<block v-else-if="item.type == 'datetime'">
+					<uni-datetime-picker v-model="item.value">
+						<view class="item-input">
+							<view class="input text-ellipsis" v-if="item.value">{{item.value}}</view>
+							<view class="input placeholder text-ellipsis" v-else>请选择{{item.label}}</view>
+							<image class="icon" src="/static/del.png" mode="aspectFit" v-if="item.value" @click.stop="clearValue(index)"></image>
+							<image class="icon" src="/static/date.png" mode="aspectFit" v-else></image>
+						</view>
+					</uni-datetime-picker>
+				</block>
+				<!-- 文本域 -->
+				<block v-else-if="item.type == 'textarea'">
+					<view class="item-input" @click="toEditor(index)" v-if="showType == 1 && item.field == 'introduce_content'">
+						<view class="input text-ellipsis" v-if="item.value">{{getEditorText(item.value) || ('编辑' + item.label)}}</view>
+						<view class="input placeholder text-ellipsis" v-else>{{item.option}}</view>
+						<image class="icon" src="/static/right.png" mode="aspectFit"></image>
+					</view>
+					<view class="item-input" @click="toEditor(index)" v-else-if="showType == 2 && item.field == 'company_introduction'">
+						<view class="input text-ellipsis" v-if="item.value">{{getEditorText(item.value) || ('编辑' + item.label)}}</view>
+						<view class="input placeholder text-ellipsis" v-else>{{item.option}}</view>
+						<image class="icon" src="/static/right.png" mode="aspectFit"></image>
+					</view>
+					<view class="item-input" @click="toEditor(index)" v-else-if="showType == 3 && item.field == 'organize_introduction'">
+						<view class="input text-ellipsis" v-if="item.value">{{getEditorText(item.value) || ('编辑' + item.label)}}</view>
+						<view class="input placeholder text-ellipsis" v-else>{{item.option}}</view>
+						<image class="icon" src="/static/right.png" mode="aspectFit"></image>
+					</view>
+					<view class="item-input" v-else>
+						<textarea class="textarea" type="text" maxlength="-1" v-model="item.value" :placeholder="item.option" placeholder-class="placeholder" />
+					</view>
+				</block>
+				<!-- 证书上传 -->
+				<block v-else-if="item.type == 'cert'">
+					<view class="item-input">
+						<input class="input" type="text" v-model="item.value.name" placeholder="请输入姓名" placeholder-class="placeholder" />
+					</view>
+					<view class="item-input">
+						<input class="input" type="text" v-model="item.value.number" placeholder="请输入证书编号" placeholder-class="placeholder" />
+					</view>
+					<view class="item-upload">
+						<view class="upload-image" v-if="item.value.image" @click="previewImage(index)">
+							<image class="image-select" :src="item.value.image" mode="aspectFill"></image>
+							<image class="image-delete" src="/static/delete.png" mode="aspectFit" @click.stop="deleteImage(index)"></image>
+						</view>
+						<view class="upload-image" v-else @click="chooseImage(index, 1)">
+							<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>
+				</block>
+				<!-- 图片上传 -->
+				<block v-else-if="item.type == 'image'">
+					<!-- 单图上传 -->
+					<view class="item-upload" v-if="(showType == 1 && item.field == 'avatar') || (showType == 2 && item.field == 'company_logo') || (showType == 3 && item.field == 'organize_logo')">
+						<view class="upload-image" v-if="item.value" @click="previewImage(index)">
+							<image class="image-select" :src="item.value" mode="aspectFill"></image>
+							<image class="image-delete" src="/static/delete.png" mode="aspectFit" @click.stop="deleteImage(index)"></image>
+						</view>
+						<view class="upload-image" v-else @click="chooseImage(index, 1)">
+							<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 class="item-upload" v-else>
+						<view class="upload-image" v-if="item.value && item.value.length > 0" v-for="(img, num) in item.value" :key="num" @click="previewImage(index, num)">
+							<image class="image-select" :src="img" mode="aspectFill"></image>
+							<image class="image-delete" src="/static/delete.png" mode="aspectFit" @click.stop="deleteImage(index, num)"></image>
+						</view>
+						<view class="upload-image" v-if="!item.value || item.value.length < 9" @click="chooseImage(index, 9)">
+							<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>
+				</block>
+				<!-- 视频上传 -->
+				<block v-else-if="item.type == 'video'">
+					<view class="item-upload">
+						<view class="upload-image" v-if="item.value">
+							<view class="image-video">
+								<image class="video" src="/static/video.png" mode="aspectFill"></image>
+							</view>
+							<image class="image-delete" src="/static/delete.png" mode="aspectFit" @click="deleteVideo(index)"></image>
+						</view>
+						<view class="upload-image" v-else @click="chooseVideo(index)">
+							<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>
+				</block>
+				<!-- 文件上传 -->
+				<block v-else-if="item.type == 'file'">
+					<view class="item-files">
+						<view class="files-upload flex align-items-center" v-if="!item.value || item.value.length < 9" @click="chooseFiles(index)">
+							<view class="upload-icon" :style="{'background-image': 'url('+ iconUpload +')'}" v-if="iconUpload"></view>
+							<view class="upload-info flex-item">
+								<view class="info-title">点击上传</view>
+								<view class="info-tips" v-if="item.value.length">已上传{{item.value.length}}/9，每个附件大小不能超过10M</view>
+								<view class="info-tips" v-else>可上传9个，每个附件大小不能超过10M</view>
+							</view>
+						</view>
+						<view class="files-list" v-if="item.value && item.value.length > 0">
+							<view class="list-item flex align-items-center" v-for="(file, num) in item.value" :key="num">
+								<view class="item-name flex-item">{{file.name}}</view>
+								<image class="item-delete" src="/static/delete.png" mode="aspectFit" @click="deleteFiles(index, num)"></image>
+							</view>
+						</view>
+					</view>
+				</block>
+			</view>
+		</form>
+		<!-- 单项选择框 -->
+		<select-picker ref="selectPicker" :title="selectTitle" @onChange="pageChange" @confirm="changeSelectPicker"></select-picker>
+		<!-- 省市区选择框 -->
+		<address-picker ref="addressPicker" @onChange="pageChange" @confirm="changeSelectPicker"></address-picker>
+		<!-- 日期选择框 -->
+		<date-picker ref="datePicker" @onChange="pageChange" @confirm="changeDatePicker"></date-picker>
+		<!-- 时间选择框 -->
+		<time-picker ref="timePicker" @onChange="pageChange" @confirm="changeTimePicker"></time-picker>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	import selectPicker from "@/pages/component/picker/select.vue"
+	import addressPicker from "@/pages/component/picker/address.vue"
+	import datePicker from "@/pages/component/picker/date.vue"
+	import timePicker from "@/pages/component/picker/time.vue"
+	import svgData from "@/common/svg.js"
+	export default {
+		name: "memberApply",
+		props: ["isApply", "showData", "showType", "mobileAuth"],
+		components: {
+			selectPicker,
+			addressPicker,
+			datePicker,
+			timePicker,
+		},
+		data() {
+			return {
+				// 入会字段
+				applyField: [],
+				// 会员级别
+				levelList: [],
+				// 行业分类
+				industryList: [],
+				// 单选标题
+				selectTitle: "",
+			}
+		},
+		watch: {
+			showData: {
+				handler(value) {
+					this.applyField = value || [];
+				},
+				immediate: true,
+				deep: true
+			}
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+				iconUpload: state => {
+					return svgData.svgToUrl("upload", state.app.themeColor)
+				}
+			})
+		},
+		mounted() {
+			if (this.showType == 1) {
+				this.getIndustry()
+				this.getMemberLevel()
+			}
+		},
+		methods: {
+			// 改变页面滚动状态
+			pageChange(state) {
+				this.$emit("onChange", state)
+			},
+			// 获取选项数据
+			getOption(option) {
+				return option.split(",")
+			},
+			// 获取会员级别
+			getMemberLevel(fn) {
+				this.$util.request("member.level").then(res => {
+					if (res.code == 1) {
+						this.levelList = res.data
+						if (fn) fn()
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取会员级别 ', error)
+				})
+			},
+			// 获取行业分类
+			getIndustry(fn) {
+				this.$util.request("member.industry").then(res => {
+					if (res.code == 1) {
+						this.industryList = res.data
+						if (fn) fn()
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取行业分类 ', error)
+				})
+			},
+			// 获取会员级别名称
+			getMemberLevelName(id) {
+				for (let i in this.levelList) {
+					if (this.levelList[i].id == id) return this.levelList[i].name
+				}
+			},
+			// 获取行业分类
+			getIndustryName(id) {
+				for (let i in this.industryList) {
+					if (this.industryList[i].id == id) return this.industryList[i].name
+				}
+			},
+			// 选择单选
+			selectRadio(index, option) {
+				if (this.applyField[index].value == option) {
+					this.applyField[index].value = ""
+				} else {
+					this.applyField[index].value = option
+				}
+			},
+			// 选择复选
+			selectCheckbox(index, option) {
+				if (this.applyField[index].value.includes(option)) {
+					this.$delete(this.applyField[index].value, this.applyField[index].value.indexOf(option))
+				} else {
+					this.applyField[index].value.push(option)
+				}
+			},
+			// 选择图片
+			chooseImage(index, limit = 9) {
+				// #ifdef MP-WEIXIN
+				uni.chooseMedia({
+					count: Number(limit) > 1 ? (limit - this.applyField[index].value.length) : 1,
+					mediaType: ['image'],
+					sourceType: ['album', 'camera'],
+					sizeType: ['compressed'],
+					success: (res) => {
+						let list = res.tempFiles.map(item => item.tempFilePath)
+						if ((this.showType == 1 && this.applyField[index].field == "avatar") || (this.showType == 2 && this.applyField[index].field == 'company_logo') || (this.showType == 3 && this.applyField[index].field == 'organize_logo')) {
+							this.applyField[index].value = list[0]
+						} else if (this.applyField[index].type == "cert") {
+							this.applyField[index].value.image = list[0]
+						} else {
+							this.applyField[index].value = [...this.applyField[index].value, ...list]
+						}
+					}
+				})
+				// #endif
+				// #ifndef MP-WEIXIN
+				uni.chooseImage({
+					count: Number(limit) > 1 ? (limit - this.applyField[index].value.length) : 1,
+					mediaType: ['image'],
+					sourceType: ['album', 'camera'],
+					sizeType: ['compressed'],
+					success: (res) => {
+						let list = res.tempFilePaths
+						if ((this.showType == 1 && this.applyField[index].field == "avatar") || (this.showType == 2 && this.applyField[index].field == 'company_logo') || (this.showType == 3 && this.applyField[index].field == 'organize_logo')) {
+							this.applyField[index].value = list[0]
+						} else if (this.applyField[index].type == "cert") {
+							this.applyField[index].value.image = list[0]
+						} else {
+							this.applyField[index].value = [...this.applyField[index].value, ...list]
+						}
+					}
+				});
+				// #endif
+			},
+			// 删除图片
+			deleteImage(i, j) {
+				if ((this.showType == 1 && this.applyField[i].field == "avatar") || (this.showType == 2 && this.applyField[i].field == 'company_logo') || (this.showType == 3 && this.applyField[i].field == 'organize_logo')) {
+					this.applyField[i].value = ""
+				} else if (this.applyField[i].type == "cert") {
+					this.applyField[i].value.image = ""
+				} else {
+					this.$delete(this.applyField[i].value, j)
+				}
+			},
+			// 预览图片
+			previewImage(i, j = 0) {
+				let list = []
+				if ((this.showType == 1 && this.applyField[i].field == "avatar") || (this.showType == 2 && this.applyField[i].field == 'company_logo') || (this.showType == 3 && this.applyField[i].field == 'organize_logo')) {
+					list = [this.applyField[i].value]
+				} else if (this.applyField[i].type == "cert") {
+					list = [this.applyField[i].value.image]
+				} else {
+					list = this.applyField[i].value
+				}
+				uni.previewImage({
+					urls: list,
+					current: j
+				});
+			},
+			// 选择视频
+			chooseVideo(index) {
+				// #ifdef MP-WEIXIN
+				uni.chooseMedia({
+					count: 1,
+					mediaType: ['video'],
+					sourceType: ['album', 'camera'],
+					camera: 'back',
+					success: (res) => {
+						this.applyField[index].value = res.tempFiles[0].tempFilePath
+					}
+				})
+				// #endif
+				// #ifndef MP-WEIXIN
+				uni.chooseVideo({
+					sourceType: ['camera', 'album'],
+					success: (res) => {
+						this.applyField[index].value = res.tempFilePath;
+					}
+				});
+				// #endif
+			},
+			// 删除视频
+			deleteVideo(index) {
+				this.applyField[index].value = ""
+			},
+			// 选择文件
+			chooseFiles(index) {
+				// #ifdef MP-WEIXIN
+				wx.chooseMessageFile({
+					count: 9 - this.applyField[index].value.length,
+					type: 'file',
+					extension: ['.pdf', '.doc', '.docx', '.xls', '.xlsx'],
+					success: (res) => {
+						let list = []
+						let exceed = []
+						res.tempFiles.forEach(item => {
+							if (parseFloat(item.size / 1024) <= 10240) {
+								list.push({
+									name: item.name,
+									path: item.path,
+								})
+							} else {
+								exceed.push(item.name)
+							}
+						})
+						if (exceed.length) {
+							uni.showToast({
+								icon: "none",
+								title: exceed.join("、") + "超过10M",
+								duration: 1500
+							})
+						}
+						this.applyField[index].value = [...this.applyField[index].value, ...list]
+					}
+				})
+				// #endif
+				// #ifdef H5
+				let extensionLimit = ['.pdf', '.doc', '.docx', '.xls', '.xlsx']
+				uni.chooseFile({
+					count: 9 - this.applyField[index].value.length,
+					type: "all",
+					extension: extensionLimit,
+					success: (res) => {
+						let list = []
+						let typeError = []
+						let exceed = []
+						res.tempFiles.forEach(item => {
+							let extension = item.name.split('.')
+							extension = extension[extension.length - 1]
+							if (!extensionLimit.includes('.' + extension)) {
+								typeError.push(item.name)
+							} else if (parseFloat(item.size / 1024) <= 10240) {
+								list.push({
+									name: item.name,
+									path: item.path,
+								})
+							} else {
+								exceed.push(item.name)
+							}
+						})
+						if (typeError.length) {
+							uni.showModal({
+								title: "提示",
+								content: typeError.join("、") + "文件类型错误，请选择pdf、doc、docx、xls、xlsx格式文件",
+								showCancel: false,
+								confirmColor: this.themeColor,
+								confirmText: "我知道了"
+							})
+						} else if (exceed.length) {
+							uni.showModal({
+								title: "提示",
+								content: exceed.join("、") + "超过10M",
+								showCancel: false,
+								confirmColor: this.themeColor,
+								confirmText: "我知道了"
+							})
+						} else this.applyField[index].value = [...this.applyField[index].value, ...list]
+					}
+				});
+				// #endif
+			},
+			// 删除文件
+			deleteFiles(i, j) {
+				this.$delete(this.applyField[i].value, j)
+			},
+			// 选择下拉选项
+			openSelectPicker(index) {
+				if (this.applyField[index].disabled) return
+				this.selectTitle = this.applyField[index].label
+				if (this.showType == 1 && this.applyField[index].field == "member_level_id") {
+					if (this.levelList.length) this.$refs.selectPicker.open(this.levelList, this.applyField[index].value, index)
+					else {
+						this.getMemberLevel(() => {
+							this.$refs.selectPicker.open(this.levelList, this.applyField[index].value, index)
+						})
+					}
+				} else if (this.showType == 1 && this.applyField[index].field == "industry_category_id") {
+					if (this.industryList.length) this.$refs.selectPicker.open(this.industryList, this.applyField[index].value, index)
+					else {
+						this.getIndustry(() => {
+							this.$refs.selectPicker.open(this.industryList, this.applyField[index].value, index)
+						})
+					}
+				} else if (this.showType == 1 && this.applyField[index].field == "native_place") {
+					this.$refs.addressPicker.open(this.applyField[index].value, index)
+				} else {
+					let list = this.applyField[index].option.split(",")
+					this.$refs.selectPicker.open(list, this.applyField[index].value, index)
+				}
+			},
+			// 改变下拉选项
+			changeSelectPicker(value, index) {
+				if (this.showType == 1 && this.applyField[index].field == "native_place") {
+					this.applyField[index].value = value.province + "/" + value.city + "/" + value.area
+				} else if (this.showType == 1 && (this.applyField[index].field == "member_level_id" || this.applyField[index].field == "industry_category_id")) {
+					this.applyField[index].value = value.id
+				} else {
+					this.applyField[index].value = value
+				}
+			},
+			// 打开地图选择位置
+			chooseLocation(index) {
+				uni.chooseLocation({
+					success: (res) => {
+						this.applyField[index].value = {
+							latitude: res.latitude,
+							longitude: res.longitude,
+							name: res.name,
+							address: res.address
+						}
+					}
+				});
+			},
+			// 清空地址
+			clearLocation(index) {
+				this.applyField[index].value = {
+					latitude: "",
+					longitude: "",
+					name: "",
+					address: "",
+				}
+			},
+			// 改变手机号对外状态
+			changeMobileAuth() {
+				const result = this.mobileAuth == 1 ? 2 : 1
+				this.$emit("changeMobileAuth", result)
+			},
+			// 选择日期
+			openDatePicker(index) {
+				this.$refs.datePicker.open(this.applyField[index].value, index)
+			},
+			// 改变日期
+			changeDatePicker(value, index) {
+				this.applyField[index].value = value
+			},
+			// 选择时间
+			openTimePicker(index) {
+				this.$refs.timePicker.open(this.applyField[index].value, index)
+			},
+			// 改变时间
+			changeTimePicker(value, index) {
+				this.applyField[index].value = value
+			},
+			// 清空已选数据
+			clearValue(index) {
+				this.applyField[index].value = ""
+			},
+			// 跳转编辑器页面
+			toEditor(index) {
+				this.$store.commit('app/setEditorContent', this.applyField[index].value)
+				this.$util.toPage({
+					mode: 1,
+					path: `/pages/member/apply/editor?params=${index}`
+				})
+			},
+			// 设置编辑器内容
+			setEditorData(e) {
+				this.applyField[e.params].value = e.content
+			},
+			// 提取富文本文字
+			getEditorText(e) {
+				if (e) return e.replace(/<[^>]+>/g, '')
+				else return ""
+			},
+			// 获取表单数据
+			getApplyField(fn) {
+				fn(JSON.parse(JSON.stringify(this.applyField)))
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.component-member-apply {
+		.component-member-apply-form {
+			.component-member-apply-form-item {
+				margin-top: 32rpx;
+
+				&:first-child {
+					margin-top: 0;
+				}
+
+				.item-title {
+					color: #5A5B6E;
+					font-size: 32rpx;
+					font-weight: 600;
+					line-height: 44rpx;
+
+					.required {
+						color: #E60012;
+					}
+
+					.tips {
+						font-size: 28rpx;
+						font-weight: 400;
+						color: #666666;
+					}
+				}
+
+				.item-input {
+					margin-top: 32rpx;
+					display: flex;
+					align-items: center;
+					border-radius: 16rpx;
+					background: #ffffff;
+
+					&.disabled {
+						.input {
+							color: #ACADB7
+						}
+					}
+
+					.input {
+						color: #5A5B6E;
+						font-size: 28rpx;
+						height: 104rpx;
+						line-height: 104rpx;
+						flex: 1;
+						padding: 0 32rpx;
+					}
+
+					.textarea {
+						color: #5A5B6E;
+						font-size: 28rpx;
+						line-height: 40rpx;
+						flex: 1;
+						padding: 32rpx;
+						height: 200rpx;
+					}
+
+					.placeholder {
+						color: #ACADB7;
+					}
+
+					.icon {
+						width: 32rpx;
+						height: 32rpx;
+						padding-right: 32rpx;
+					}
+				}
+
+				.item-radio {
+					display: flex;
+					flex-wrap: wrap;
+					margin-left: -26rpx;
+					padding-top: 8rpx;
+
+					.radio {
+						border-radius: 8rpx;
+						background: #ffffff;
+						padding: 16rpx;
+						margin-left: 26rpx;
+						margin-top: 24rpx;
+						display: flex;
+						align-items: center;
+
+						image {
+							width: 24rpx;
+							height: 24rpx;
+							margin-right: 8rpx;
+							display: none;
+						}
+
+						text {
+							color: #ACADB7;
+							font-size: 24rpx;
+							line-height: 34rpx;
+						}
+
+						&.active {
+							background: var(--theme-color);
+
+							image {
+								display: block;
+							}
+
+							text {
+								color: #ffffff;
+							}
+						}
+					}
+				}
+
+				.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;
+						}
+					}
+				}
+
+				.item-files {
+					.files-upload {
+						position: relative;
+						margin-top: 32rpx;
+						border-radius: 16rpx;
+						background: #FFF;
+						padding: 52rpx;
+
+						.upload-icon {
+							width: 72rpx;
+							height: 64rpx;
+							background-size: 72rpx 64rpx;
+						}
+
+						.upload-info {
+							margin-left: 32rpx;
+
+							.info-title {
+								color: var(--theme-color);
+								font-size: 24rpx;
+								line-height: 34rpx;
+								letter-spacing: 1rpx;
+							}
+
+							.info-tips {
+								margin-top: 8rpx;
+								color: #BBBDBF;
+								font-size: 24rpx;
+								line-height: 34rpx;
+							}
+						}
+
+						&:before {
+							content: "";
+							display: block;
+							position: absolute;
+							top: 20rpx;
+							left: 20rpx;
+							right: 20rpx;
+							bottom: 20rpx;
+							border-radius: 16rpx;
+							border: 1px dashed #D4D6D9;
+						}
+					}
+
+					.files-list {
+						margin-top: 32rpx;
+						border-radius: 16rpx;
+						background: #FFF;
+						padding: 36rpx 32rpx;
+
+						.list-item {
+							margin-top: 32rpx;
+
+							&:first-child {
+								margin-top: 0;
+							}
+
+							.item-name {
+								color: #ACADB7;
+								font-size: 28rpx;
+								line-height: 40rpx;
+							}
+
+							.item-delete {
+								margin-left: 20rpx;
+								width: 32rpx;
+								height: 32rpx;
+							}
+						}
+					}
+				}
+
+				.item-switch {
+					margin-top: 32rpx;
+					display: flex;
+					align-items: center;
+					border-radius: 16rpx;
+					background: #ffffff;
+					padding: 32rpx;
+
+					.switch-label {
+						flex: 1;
+						color: #5A5B6E;
+						font-size: 28rpx;
+						line-height: 40rpx;
+					}
+
+					.switch-box {
+						margin-left: 20rpx;
+						width: 72rpx;
+						height: 36rpx;
+						padding: 2rpx;
+						background: #D9D9D9;
+						border-radius: 18rpx;
+						transition: all .3s;
+
+						.round {
+							width: 32rpx;
+							height: 32rpx;
+							border-radius: 50%;
+							background: #FFFFFF;
+							margin-left: 0;
+							transition: all .3s;
+						}
+
+						&.select {
+							background: var(--theme-color);
+
+							.round {
+								margin-left: calc(100% - 32rpx);
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

pages/component/member/custom.vue

@@ -0,0 +1,139 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-会员自定义字段 开发者: 麦沃德科技-半夏
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="component-member-custom">
+		<block v-for="(item, index) in showData" :key="index" v-if="item.show == 1">
+			<!-- 图片 -->
+			<view class="custom-item" v-if="item.type == 'image'">
+				<view class="item-title">{{item.label}}</view>
+				<view class="item-list" v-if="item.value">
+					<view class="list-image" v-for="(img, num) in item.value.split(',')" :key="num">
+						<image class="image" :src="img" mode="aspectFill" @click="previewImage(index, num)"></image>
+					</view>
+				</view>
+				<view class="item-value" v-else>暂未完善</view>
+			</view>
+			<!-- 视频 -->
+			<view class="custom-item" v-else-if="item.type == 'video'">
+				<view class="item-title">{{item.label}}</view>
+				<view class="item-video" v-if="item.value">
+					<video class="video" :src="item.value" controls></video>
+				</view>
+				<view class="item-value" v-else>暂未完善</view>
+			</view>
+			<!-- 证书 -->
+			<view class="custom-item" v-else-if="item.type == 'cert'">
+				<view class="item-title">{{item.label}}</view>
+				<view class="item-image" v-if="item.value">
+					<image class="image" :src="item.value" mode="widthFix" @click="previewImage(index)"></image>
+				</view>
+				<view class="item-value" v-else>暂未完善</view>
+			</view>
+			<!-- 其他 -->
+			<view class="custom-item flex flex-wrap justify-content-between" v-else>
+				<view class="item-title">{{item.label}}</view>
+				<view class="item-value">{{item.value || "暂未完善"}}</view>
+			</view>
+		</block>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "memberCustom",
+		props: ["showData"],
+		methods: {
+			// 预览图片
+			previewImage(i, j = 0) {
+				let list = []
+				if (this.showData[i].type == "cert") {
+					list = [this.showData[i].value]
+				} else {
+					list = this.showData[i].value.split(",")
+				}
+				uni.previewImage({
+					urls: list,
+					current: j
+				});
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.component-member-custom {
+		.custom-item {
+			margin-top: 32rpx;
+			padding: 32rpx;
+			border-radius: 16rpx;
+			background: #ffffff;
+			row-gap: 24rpx;
+			column-gap: 48rpx;
+
+			.item-title {
+				color: #5A5B6E;
+				font-size: 30rpx;
+				font-weight: 600;
+				line-height: 40rpx;
+			}
+
+			.item-value {
+				color: #5A5B6E;
+				font-size: 28rpx;
+				line-height: 40rpx;
+				word-break: break-all;
+			}
+
+			.item-list {
+				display: flex;
+				flex-wrap: wrap;
+				margin-top: 32rpx;
+				column-gap: 3.5%;
+				row-gap: 24rpx;
+
+				.list-image {
+					position: relative;
+					width: 31%;
+					height: 0;
+					padding-top: 31%;
+
+					.image {
+						position: absolute;
+						top: 0;
+						left: 0;
+						right: 0;
+						bottom: 0;
+						border-radius: 10rpx;
+					}
+				}
+			}
+
+			.item-video {
+				margin-top: 24rpx;
+
+				.video {
+					width: 100%;
+				}
+			}
+
+			.item-image {
+				margin-top: 24rpx;
+
+				.image {
+					width: 100%;
+					border-radius: 10rpx;
+				}
+			}
+		}
+	}
+</style>

pages/component/member/index.vue

@@ -0,0 +1,105 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-会员列表 开发者: 麦沃德科技-半夏 
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="component-member" :style="{'--theme-color': themeColor}">
+		<view class="member-item flex" v-for="item in showData" :key="item.id" @click="toDetails(item.id)">
+			<image class="item-avatar" :src="item.avatar" mode="aspectFill"></image>
+			<view class="item-info flex-item flex-direction-column justify-content-between">
+				<view class="info-head flex">
+					<view class="head-name flex-item text-ellipsis">{{item.name}}</view>
+					<view class="head-tag" v-if="item.distance">{{item.distance}}</view>
+				</view>
+				<view class="info-tag text-ellipsis" v-if="item.native_place">{{item.native_place}}</view>
+				<view class="info-label flex justify-content-between">
+					<text class="text-ellipsis">{{item.level_name}}</text>
+					<text class="text-ellipsis" style="margin-left: 16rpx;" v-if="item.industry_category_name">{{item.industry_category_name}}</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	export default {
+		name: "memberIndex",
+		props: ["showData"],
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor
+			})
+		},
+		methods: {
+			// 跳转会员详情
+			toDetails(id) {
+				this.$util.toPage({
+					mode: 1,
+					path: "/pages/member/details?id=" + id
+				})
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.component-member {
+		white-space: nowrap;
+
+		.member-item {
+			margin-top: 32rpx;
+			padding: 32rpx;
+			border-radius: 10rpx;
+			background: #ffffff;
+
+			&:first-child {
+				margin-top: 0;
+			}
+
+			.item-avatar {
+				width: 144rpx;
+				height: 144rpx;
+				border-radius: 50%;
+			}
+
+			.item-info {
+				margin-left: 32rpx;
+
+				.info-head {
+					.head-name {
+						color: #5A5B6E;
+						font-size: 32rpx;
+						line-height: 44rpx;
+					}
+
+					.head-tag {
+						color: var(--theme-color);
+						font-size: 28rpx;
+						line-height: 40rpx;
+					}
+				}
+
+				.info-tag {
+					color: #C4C4C4;
+					font-size: 24rpx;
+					line-height: 34rpx;
+				}
+
+				.info-label {
+					color: var(--theme-color);
+					font-size: 24rpx;
+					line-height: 34rpx;
+				}
+			}
+		}
+	}
+</style>

pages/component/member/poster.vue

@@ -0,0 +1,322 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.maiwd.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-电子会牌 开发者: 麦沃德科技-半夏
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="component-member-poster">
+		<!-- 电子会牌 -->
+		<canvas class="poster-canvas" :style="{width: posterWidth + 'px', height: posterHeight + 'px'}" canvas-id="myCanvas" id="myCanvas"></canvas>
+		<!-- 电子会牌模态框 -->
+		<uni-popup ref="popupModal" type="center" @change="onChange">
+			<view class="poster-popup flex-direction-column align-items-center" :style="{'--theme-color': themeColor, paddingTop: titleBarHeight + 'px'}">
+				<view class="popup-close" @click="onClose()">
+					<image class="icon" src="/static/closePopup.png" mode="aspectFit"></image>
+				</view>
+				<view class="popup-content flex justify-content-center">
+					<image class="image" :src="posterPath" mode="aspectFit"></image>
+				</view>
+				<!-- #ifdef MP-WEIXIN -->
+				<view class="popup-btn" @click="saveImage">保存相册</view>
+				<!-- #endif -->
+				<!-- #ifdef H5 -->
+				<view class="popup-btn">长按图片保存相册</view>
+				<!-- #endif -->
+			</view>
+		</uni-popup>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	import { loadImage, createPoster, canvasToTempFilePath } from "@/common/poster.js";
+	export default {
+		name: "memberPoster",
+		data() {
+			return {
+				// 标题栏高度
+				titleBarHeight: 0,
+				// 电子会牌数据
+				posterInfo: {},
+				// 电子会牌宽度
+				posterWidth: 0,
+				// 电子会牌高度
+				posterHeight: 0,
+				// 图片资源是否准备完成
+				posterReady: false,
+				// 电子会牌背景图片
+				posterBackground: "",
+				// 电子会牌用户头像图片
+				posterAvatar: "",
+				// 电子会牌二维码图片
+				posterCode: "",
+				// 电子会牌图片路径
+				posterPath: "",
+			}
+		},
+		computed: {
+			...mapState({
+				themeColor: state => 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
+		},
+		methods: {
+			// 获取电子会牌
+			getPoster() {
+				uni.showLoading({
+					title: "加载中",
+					mask: true
+				})
+				this.$util.request("mine.poster").then(res => {
+					if (res.code == 1) {
+						this.posterInfo = res.data
+						this.posterWidth = res.data.willbrand.bg.width
+						this.posterHeight = res.data.willbrand.bg.height
+						this.$nextTick(() => {
+							this.showNucleus()
+						})
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取电子会牌 ', error)
+				})
+			},
+			// 获取图片资源
+			async showNucleus() {
+				this.loadingResources().then((state) => {
+					// 状态为 true 表示加载完成
+					if (state) {
+						this.posterReady = true
+						this.createImage()
+					}
+				});
+			},
+			// 加载图片资源
+			async loadingResources() {
+				this.posterBackground = await loadImage(this.posterInfo.willbrand.bg.img);
+				this.posterCode = await loadImage(this.posterInfo.applet_qrcode_path);
+				if (this.posterInfo.avatar) this.posterAvatar = await loadImage(this.posterInfo.avatar);
+				return true;
+			},
+			// 生成电子会牌
+			async createImage() {
+				if (!this.posterReady) {
+					uni.hideLoading()
+					uni.showToast({
+						title: '电子会牌图片资源加载失败',
+						icon: 'none'
+					})
+					return
+				};
+				// 获取上下文对象
+				const ctx = uni.createCanvasContext("myCanvas", this);
+				// 创建电子会牌
+				let posterData = [{
+					type: "image",
+					url: this.posterBackground,
+					config: {
+						x: 0,
+						y: 0,
+						w: parseFloat(this.posterWidth),
+						h: parseFloat(this.posterHeight),
+					},
+				}]
+				this.posterInfo.willbrand.data.forEach((item) => {
+					if (item.type == "text") {
+						let content = ""
+						if (item.item == "name") content = this.posterInfo.member_name || ""
+						else if (item.item == "post") content = this.posterInfo.member_level_name || ""
+						else if (item.item == "cardid") content = this.posterInfo.number || ""
+						else if (item.item == "period") content = this.posterInfo.join_time || ""
+						else if (item.item == "expire") content = this.posterInfo.expire_time || ""
+						else if (item.item == "company_organize") content = this.posterInfo.company_name || this.posterInfo.organize_name || ""
+						let itemX = 0
+						if (item.textAlign == "center") itemX = parseFloat(item.left) + parseFloat(item.width) / 2
+						else if (item.textAlign == "right") itemX = parseFloat(item.left) + parseFloat(item.width)
+						else itemX = parseFloat(item.left)
+						let itemFont = "10px sans-serif"
+						if (item.fontStyle == 2) {
+							itemFont = `italic ${item.size} sans-serif`
+						} else if (item.fontStyle == 3) {
+							itemFont = `bold ${item.size} sans-serif`
+						} else if (item.fontStyle == 4) {
+							itemFont = `italic bold ${item.size} sans-serif`
+						} else {
+							itemFont = `${item.size} sans-serif`
+						}
+						posterData.push({
+							type: "text",
+							text: content || "",
+							config: {
+								x: itemX,
+								y: parseFloat(item.top),
+								color: item.color,
+								font: itemFont,
+								textAlign: item.textAlign,
+								maxWidth: parseFloat(item.width),
+								lineHeight: parseInt(item.height),
+								isVerticalCenter: true
+							},
+						})
+					} else if (item.type == "img") {
+						let imgUrl = ""
+						let radius = 0
+						if (item.item == "qr") {
+							imgUrl = this.posterCode
+							radius = 0
+						} else if (item.item == "avatar") {
+							imgUrl = this.posterAvatar
+							radius = parseFloat(item.width) / 2
+						}
+						if (imgUrl) {
+							posterData.push({
+								type: "image",
+								url: imgUrl,
+								config: {
+									x: parseFloat(item.left),
+									y: parseFloat(item.top),
+									w: parseFloat(item.width),
+									h: parseFloat(item.height),
+									r: parseInt(radius),
+								},
+							})
+						}
+					}
+				})
+				await createPoster(ctx, posterData)
+				const imagePath = await canvasToTempFilePath("myCanvas", this);
+				this.posterPath = imagePath;
+				this.$refs.popupModal.open()
+				uni.hideLoading()
+			},
+			// 保存电子会牌
+			saveImage() {
+				uni.authorize({
+					scope: 'scope.writePhotosAlbum',
+					success: () => {
+						uni.getImageInfo({
+							src: this.posterPath,
+							success: (img) => {
+								uni.saveImageToPhotosAlbum({
+									filePath: img.path,
+									success: () => {
+										uni.showToast({
+											title: "保存成功",
+											icon: "success",
+										});
+									},
+									fail: (err) => {
+										console.error(err);
+									},
+								});
+							},
+							fail: (err) => {
+								console.error(err)
+							}
+						});
+					},
+					fail: () => {
+						uni.showModal({
+							title: '图片保存失败',
+							content: '请确认是否已开启授权',
+							confirmText: '开启授权',
+							confirmColor: this.themeColor,
+							success: (res) => {
+								if (res.confirm) {
+									uni.openSetting({
+										success: (setting) => {
+											if (setting.authSetting["scope.writePhotosAlbum"]) {
+												uni.showToast({
+													title: '授权成功，请重新保存',
+													icon: "none"
+												});
+											} else {
+												uni.showToast({
+													title: '请确定已打开保存权限',
+													icon: "none"
+												});
+											}
+										}
+									})
+								}
+							}
+						})
+					}
+				})
+			},
+			// 关闭弹窗
+			onClose() {
+				this.$refs.popupModal.close()
+			},
+			// 改变页面滚动状态
+			onChange(e) {
+				this.$emit("onChange", e.show)
+			},
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.component-member-poster {
+		position: relative;
+		z-index: 999;
+
+		.poster-canvas {
+			position: fixed;
+			top: 100vw;
+			left: 100vh;
+			z-index: -1;
+		}
+
+		.poster-popup {
+			.popup-close {
+				width: 100%;
+				margin-top: -112rpx;
+				margin-bottom: 32rpx;
+				display: flex;
+				justify-content: flex-end;
+
+				.icon {
+					width: 80rpx;
+					height: 80rpx;
+				}
+			}
+
+			.popup-content {
+				.image {
+					width: 80vw;
+					height: 65vh;
+				}
+			}
+
+			.popup-btn {
+				margin-top: 32rpx;
+				width: 336rpx;
+				font-size: 28rpx;
+				line-height: 40rpx;
+				padding: 26rpx 32rpx;
+				border-radius: 16rpx;
+				color: #FFFFFF;
+				background: var(--theme-color);
+				text-align: center;
+			}
+		}
+	}
+</style>

pages/component/member/product.vue

@@ -0,0 +1,167 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-产品维护 开发者: 麦沃德科技-半夏
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="component-member-product" v-if="loadEnd">
+		<view class="product-list" v-if="productList.length">
+			<view class="list-item" v-for="item in productList" :key="item.id">
+				<image class="item-image" :src="item.image" mode="aspectFill"></image>
+				<view class="item-name text-ellipsis-more">{{item.name}}</view>
+				<view class="item-group flex flex-center">
+					<view class="group-btn" style="background: #FFB656;" @click="handleEdit(item.id)">修改</view>
+					<view class="group-btn" style="background: #FF626E;" @click="handleDelete(item.id)">删除</view>
+				</view>
+			</view>
+		</view>
+		<empty top="30%" title="暂无相关内容~" v-else></empty>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	export default {
+		name: "componentMemberProduct",
+		data() {
+			return {
+				// 加载完成
+				loadEnd: false,
+				// 产品列表
+				productList: [],
+			}
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+			})
+		},
+		mounted() {
+			uni.showLoading({
+				title: "加载中"
+			})
+			this.getProductList(() => {
+				this.loadEnd = true
+				uni.hideLoading()
+			})
+		},
+		methods: {
+			// 获取产品列表
+			getProductList(fn) {
+				this.$util.request("member.product.list").then(res => {
+					if (fn) fn()
+					if (res.code == 1) {
+						this.productList = res.data
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					if (fn) fn()
+					console.error('获取产品列表 ', error)
+				})
+			},
+			// 修改产品
+			handleEdit(id) {
+				this.$util.toPage({
+					mode: 1,
+					path: "/pages/member/product/edit?id=" + id
+				})
+			},
+			// 删除产品
+			handleDelete(id) {
+				uni.showModal({
+					title: "系统提示",
+					content: "是否删除该产品？",
+					confirmColor: "#E50002",
+					confirmText: "删除",
+					success: (res) => {
+						if (res.confirm) {
+							uni.showLoading({
+								mask: true,
+								title: "加载中"
+							})
+							this.$util.request("member.product.delete", {
+								id: id
+							}).then(res => {
+								if (res.code == 1) {
+									this.getProductList(() => {
+										uni.hideLoading()
+										uni.showToast({
+											icon: "success",
+											title: "删除成功"
+										})
+									})
+								} else {
+									uni.hideLoading()
+									uni.showToast({
+										title: res.msg,
+										icon: 'none'
+									})
+								}
+							}).catch(error => {
+								uni.hideLoading()
+								console.error('删除产品 ', error)
+							})
+						}
+					}
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.component-member-product {
+		.product-list {
+			display: grid;
+			grid-template-columns: repeat(2, 2fr);
+			column-gap: 28rpx;
+			row-gap: 32rpx;
+
+			.list-item {
+				padding: 32rpx;
+				background: #FFF;
+				border-radius: 16rpx;
+
+				.item-image {
+					width: 100%;
+					height: 266rpx;
+					border-radius: 20rpx;
+				}
+
+				.item-name {
+					margin-top: 24rpx;
+					color: #5A5B6E;
+					font-size: 24rpx;
+					font-weight: 600;
+					line-height: 34rpx;
+					height: 68rpx;
+				}
+
+				.item-group {
+					margin-top: 24rpx;
+					column-gap: 16rpx;
+
+					.group-btn {
+						color: #FFF;
+						text-align: center;
+						font-size: 24rpx;
+						line-height: 34rpx;
+						padding: 12rpx 24rpx;
+						border-radius: 8rpx;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/component/member/scroll.vue

@@ -0,0 +1,103 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-可滚动会员列表 开发者: 麦沃德科技-半夏
++---------------------------------------------------------------------- -->
+
+<template>
+	<scroll-view scroll-x :scroll-left="scrollLeft" class="component-member-scroll" :style="{'--theme-color': themeColor}" @scrolltolower="scrolltolower">
+		<view class="scroll-item" v-for="item in showData" :key="item.id" @click="toDetails(item.id)">
+			<image class="item-avatar" :src="item.avatar" mode="aspectFill"></image>
+			<view class="item-label text-ellipsis">{{item.level_name}}</view>
+			<view class="item-name text-ellipsis">{{item.name}}</view>
+		</view>
+	</scroll-view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	export default {
+		name: "memberScroll",
+		props: ["showData"],
+		data() {
+			return {
+				// 横向滚动条位置
+				scrollLeft: 0,
+			};
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor
+			})
+		},
+		methods: {
+			// 重置横向滚动条位置
+			resetScrollLeft() {
+				this.scrollLeft = 0.1
+				this.$nextTick(() => {
+					this.scrollLeft = 0
+				})
+			},
+			// 滚动到最右侧
+			scrolltolower() {
+				this.$emit("scrolltolower")
+			},
+			// 跳转会员详情
+			toDetails(id) {
+				this.$util.toPage({
+					mode: 1,
+					path: "/pages/member/details?id=" + id
+				})
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.component-member-scroll {
+		white-space: nowrap;
+
+		.scroll-item {
+			display: inline-block;
+			width: 128rpx;
+			margin-left: 36rpx;
+
+			&:first-child {
+				margin-left: 0;
+			}
+
+			.item-avatar {
+				width: 128rpx;
+				height: 128rpx;
+				border-radius: 50%;
+			}
+
+			.item-label {
+				color: #ffffff;
+				font-size: 20rpx;
+				line-height: 28rpx;
+				padding: 8rpx;
+				border-radius: 4rpx 20rpx 4rpx 20rpx;
+				background: var(--theme-color);
+				margin-top: -16rpx;
+				text-align: center;
+				position: relative;
+				z-index: 1;
+			}
+
+			.item-name {
+				color: #5A5B6E;
+				font-size: 28rpx;
+				line-height: 40rpx;
+				margin-top: 16rpx;
+				text-align: center;
+			}
+		}
+	}
+</style>

pages/component/member/units.vue

@@ -0,0 +1,124 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-会员单位列表 开发者: 麦沃德科技-半夏 
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="component-member-units">
+		<view class="units-item flex" v-for="item in showData" :key="item.id" @click="toDetails(item.id, item.type)">
+			<image class="item-logo" :src="item.logo" mode="aspectFill"></image>
+			<view class="item-info flex-item flex-direction-column justify-content-between">
+				<view class="info-name text-ellipsis">{{item.name}}</view>
+				<view class="info-introduction text-ellipsis-more">{{item.introduction}}</view>
+			</view>
+			<view class="item-level">
+				<view class="bg" :style="{background: themeColor}"></view>
+				<view class="text">{{item.level_name}}单位</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	export default {
+		name: "memberUnits",
+		props: ["showData"],
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor
+			})
+		},
+		methods: {
+			// 跳转会员详情
+			toDetails(id, type) {
+				if (type == 2) {
+					this.$util.toPage({
+						mode: 1,
+						path: "/pages/member/enterprise?id=" + id
+					})
+				} else {
+					this.$util.toPage({
+						mode: 1,
+						path: "/pages/member/organization?id=" + id
+					})
+				}
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.component-member-units {
+		.units-item {
+			position: relative;
+			margin-top: 32rpx;
+			padding: 32rpx;
+			border-radius: 16rpx;
+			overflow: hidden;
+			background: #ffffff;
+
+			&:first-child {
+				margin-top: 0;
+			}
+
+			.item-logo {
+				width: 156rpx;
+				height: 156rpx;
+				border-radius: 50%;
+			}
+
+			.item-info {
+				margin-left: 32rpx;
+
+				.info-name {
+					color: #333;
+					font-size: 32rpx;
+					font-weight: 600;
+					line-height: 40rpx;
+				}
+
+				.info-introduction {
+					margin-top: 16rpx;
+					color: #5A5B6E;
+					font-size: 28rpx;
+					line-height: 48rpx;
+				}
+			}
+
+			.item-level {
+				position: absolute;
+				top: 0;
+				left: 0;
+				z-index: 9;
+				border-bottom-right-radius: 16rpx;
+				padding: 8rpx 16rpx;
+				overflow: hidden;
+
+				.bg {
+					position: absolute;
+					top: 0;
+					left: 0;
+					right: 0;
+					bottom: 0;
+					opacity: .7;
+				}
+
+				.text {
+					color: #FFF;
+					font-size: 24rpx;
+					line-height: 34rpx;
+					position: relative;
+					z-index: 1;
+				}
+			}
+		}
+	}
+</style>

pages/component/menu/carousel.vue

@@ -0,0 +1,181 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-轮播菜单 开发者: 麦沃德科技-半夏
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="component-menu-carousel" v-if="menuList && menuList.length">
+		<block v-if="menuList.length === 1">
+			<menu-nav :show-data="menuList[0]" :row-number="rowNumber" :icon-size="iconSize" :font-size="fontSize" :line-height="lineHeight" :font-color="fontColor" :space="space" :margin-top="marginTop" @toPage="toPage"></menu-nav>
+		</block>
+		<block v-else>
+			<swiper class="carousel-swiper" :style="{height: height}" @change="carouselChange">
+				<swiper-item v-for="(item, index) in menuList" :key="index">
+					<menu-nav :show-data="item" :row-number="rowNumber" :icon-size="iconSize" :font-size="fontSize" :line-height="lineHeight" :font-color="fontColor" :space="space" :margin-top="marginTop" @toPage="toPage"></menu-nav>
+				</swiper-item>
+			</swiper>
+			<view class="carousel-dots" :style="{'--theme-color': themeColor}">
+				<view class="dots-item" :class="{active: carouseIndex == index}" v-for="(item, index) in menuList" :key="index"></view>
+			</view>
+		</block>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	import menuNav from "@/pages/component/menu/menu.vue"
+	export default {
+		name: "menuCarousel",
+		components: {
+			menuNav,
+		},
+		props: {
+			// 组件内容
+			showData: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			// 组件高度
+			height: {
+				type: String,
+				default: "390rpx",
+			},
+			// 每排数量
+			rowNumber: {
+				type: Number,
+				default: 4,
+			},
+			// 图标尺寸
+			iconSize: {
+				type: String,
+				default: "96rpx",
+			},
+			// 文字尺寸
+			fontSize: {
+				type: String,
+				default: "28rpx",
+			},
+			// 文字行高
+			lineHeight: {
+				type: String,
+				default: "40rpx",
+			},
+			// 文字颜色
+			fontColor: {
+				type: String,
+				default: "#5A5B6E",
+			},
+			// 图文间隔
+			space: {
+				type: String,
+				default: "16rpx",
+			},
+			// 上下间隔
+			marginTop: {
+				type: String,
+				default: "32rpx",
+			},
+		},
+		data() {
+			return {
+				// 已选索引
+				carouseIndex: 0,
+				// 菜单列表
+				menuList: [],
+			};
+		},
+		watch: {
+			showData: {
+				handler(value) {
+					if (value && value.length) {
+						this.menuList = this.splitArray(value);
+					}
+				},
+				immediate: true,
+				deep: true
+			}
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+			})
+		},
+		methods: {
+			// 轮播图切换
+			carouselChange(e) {
+				this.carouseIndex = e.detail.current
+			},
+			// 切割数组
+			splitArray(arr) {
+				var result = [];
+				for (var i = 0; i < arr.length; i += 8) {
+					var chunk = arr.slice(i, i + 8);
+					result.push(chunk);
+				}
+				return result;
+			},
+			// 跳转详情
+			toPage(item) {
+				this.$emit("toPage", item)
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.component-menu-carousel {
+		position: relative;
+		width: 100%;
+
+		.carousel-swiper {
+			box-sizing: border-box;
+			width: 100%;
+			overflow: hidden;
+
+			.swiper-item {
+				width: 100%;
+				height: 100%;
+
+				.item-thumb {
+					width: 100%;
+					height: 100%;
+					background-color: #f1f1f1;
+				}
+			}
+		}
+
+		.carousel-dots {
+			display: flex;
+			position: absolute;
+			left: 50%;
+			transform: translateX(-50%);
+			bottom: 0;
+			z-index: 1;
+
+			.dots-item {
+				width: 24rpx;
+				height: 8rpx;
+				border-radius: 8rpx;
+				background: #F1F1F1;
+				margin-right: 4rpx;
+
+				&:last-child {
+					margin-right: 0;
+				}
+
+				&.active {
+					background: var(--theme-color);
+				}
+			}
+		}
+	}
+</style>

pages/component/menu/menu.vue

@@ -0,0 +1,160 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-菜单 开发者: 麦沃德科技-半夏
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="component-menu flex flex-wrap">
+		<block v-for="(item, index) in showData" :key="index" @click="toPage(index)">
+			<button class="menu-item clear" open-type="contact" :style="{width: (parseFloat(100 / rowNumber).toFixed(2) + '%'), marginTop: (index < rowNumber ? 0 : marginTop)}" v-if="item.info == 'contact'">
+				<image :src="item.icon" :style="{width: iconSize, height: iconSize}" mode="aspectFit"></image>
+				<text class="text-ellipsis" :style="{fontSize: fontSize, color: fontColor, lineHeight: lineHeight, marginTop: space}">{{item.name}}</text>
+			</button>
+			<view class="menu-item" :style="{width: (parseFloat(100 / rowNumber).toFixed(2) + '%'), marginTop: (index < rowNumber ? 0 : marginTop)}" @click="toPage(index)" v-else>
+				<view class="item-icon" :style="{width: iconSize, height: iconSize}">
+					<image :src="item.icon" mode="aspectFit"></image>
+					<view class="count" :style="{background: themeColor}" v-if="item.count && parseInt(countData[item.count]) > 0">{{parseInt(countData[item.count]) > 99 ? '99+' : countData[item.count]}}</view>
+				</view>
+				<text class="text-ellipsis" :style="{fontSize: fontSize, color: fontColor, lineHeight: lineHeight, marginTop: space}">{{item.name}}</text>
+				<!-- #ifdef H5 -->
+				<wx-open-launch-weapp class="item-absolute" :appid="item.content.appid" :path="item.content.path" v-if="item.skip_type == 3">
+					<script type="text/wxtag-template">
+						<style> .btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
+					  <view class="btn"></view>
+					</script>
+				</wx-open-launch-weapp>
+				<!-- #endif -->
+			</view>
+		</block>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	export default {
+		name: "menuIndex",
+		props: {
+			// 组件内容
+			showData: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			// 组件数量
+			countData: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 每排数量
+			rowNumber: {
+				type: Number,
+				default: 4,
+			},
+			// 图标尺寸
+			iconSize: {
+				type: String,
+				default: "96rpx",
+			},
+			// 文字尺寸
+			fontSize: {
+				type: String,
+				default: "28rpx",
+			},
+			// 文字行高
+			lineHeight: {
+				type: String,
+				default: "40rpx",
+			},
+			// 文字颜色
+			fontColor: {
+				type: String,
+				default: "#5A5B6E",
+			},
+			// 图文间隔
+			space: {
+				type: String,
+				default: "16rpx",
+			},
+			// 上下间隔
+			marginTop: {
+				type: String,
+				default: "32rpx",
+			},
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+			})
+		},
+		methods: {
+			toPage(index) {
+				// #ifdef H5
+				if (this.showData[index].skip_type == 3) return
+				// #endif
+				if (this.showData[index].info) {
+					this.$util.toPage(this.showData[index].info)
+				} else {
+					this.$emit("toPage", this.showData[index])
+				}
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	.component-menu {
+		.menu-item {
+			position: relative;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			background: transparent;
+			border-radius: 0;
+			padding: 0;
+
+			.item-icon {
+				position: relative;
+
+				.count {
+					position: absolute;
+					top: -8rpx;
+					left: 50%;
+					margin-left: 16rpx;
+					color: #FFF;
+					text-align: center;
+					font-size: 24rpx;
+					line-height: 32rpx;
+					padding: 0 8rpx;
+					min-width: 32rpx;
+					border-radius: 32rpx;
+				}
+			}
+
+			text {
+				width: 100%;
+				padding: 0 8rpx;
+				box-sizing: border-box;
+				text-align: center;
+			}
+
+			.item-absolute {
+				display: block;
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+			}
+		}
+	}
+</style>

pages/component/mine/admin.vue

@@ -0,0 +1,206 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-按钮组 开发者: 麦沃德科技-半夏 
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="diy-menu" :class="{'vertical-layout': showStyle.layout == 2}" :style="{'row-gap': `${showStyle.itemSpace}px`}">
+		<block v-for="(item, index) in showData" :key="index">
+			<!-- 核销活动 -->
+			<view class="menu-item" :style="{width: `calc(100% / ${showStyle.rowsNum})`}" @click="toPage(item.type)" v-if="item.type == 'verificationActivity' && userInfo.is_verifying == 1">
+				<view class="item-image" :style="{width: iconSize, height: iconSize}">
+					<image mode="aspectFit" :src="getImagePath(item.imgUrl)"></image>
+				</view>
+				<view class="item-space" :style="{width: graphicSpace, height: graphicSpace}"></view>
+				<view class="item-text text-ellipsis" :style="{color: showStyle.textColor, fontSize: fontSize}">{{ item.text }}</view>
+				<image class="item-icon" src="/static/right.png" mode="aspectFit" :style="{width: fontSize, height: fontSize}"></image>
+			</view>
+			<!-- 审核会员 -->
+			<view class="menu-item" :style="{width: `calc(100% / ${showStyle.rowsNum})`}" @click="toPage(item.type)" v-else-if="item.type == 'examineMember' && userInfo.set_admin == 1">
+				<view class="item-image" :style="{width: iconSize, height: iconSize}">
+					<image class="image" mode="aspectFit" :src="getImagePath(item.imgUrl)"></image>
+					<view class="count" v-if="userInfo && parseInt(userInfo.member_apply_count) > 0">{{parseInt(userInfo.member_apply_count) > 99 ? '99+' : userInfo.member_apply_count}}</view>
+				</view>
+				<view class="item-space" :style="{width: graphicSpace, height: graphicSpace}"></view>
+				<view class="item-text text-ellipsis" :style="{color: showStyle.textColor, fontSize: fontSize}">{{ item.text }}</view>
+				<view class="item-count" v-if="userInfo && parseInt(userInfo.member_apply_count) > 0">{{parseInt(userInfo.member_apply_count) > 99 ? '99+' : userInfo.member_apply_count}}</view>
+				<image class="item-icon" src="/static/right.png" mode="aspectFit" :style="{width: fontSize, height: fontSize}"></image>
+			</view>
+			<!-- 消息订阅 -->
+			<!-- #ifdef MP-WEIXIN -->
+			<view class="menu-item" :style="{width: `calc(100% / ${showStyle.rowsNum})`}" @click="toPage(item.type)" v-else-if="item.type == 'subscribeMessage' && userInfo.set_admin == 1">
+				<view class="item-image" :style="{width: iconSize, height: iconSize}">
+					<image class="image" mode="aspectFit" :src="getImagePath(item.imgUrl)"></image>
+				</view>
+				<view class="item-space" :style="{width: graphicSpace, height: graphicSpace}"></view>
+				<view class="item-text text-ellipsis" :style="{color: showStyle.textColor, fontSize: fontSize}">{{ item.text }}</view>
+				<image class="item-icon" src="/static/right.png" mode="aspectFit" :style="{width: fontSize, height: fontSize}"></image>
+			</view>
+			<!-- #endif -->
+		</block>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	export default {
+		name: 'mineMenu',
+		props: ['showStyle', 'showData', 'domain'],
+		computed: {
+			...mapState({
+				userInfo: state => state.user.userInfo,
+				adminStatus: state => {
+					let status = false
+					if (state.user.userInfo.is_verifying == 1) {
+						status = true
+					}
+					if (state.user.userInfo.set_admin == 1) {
+						status = true
+					}
+					return status
+				},
+				adminCount: state => {
+					return {
+						member_apply_count: state.user.userInfo.member_apply_count || 0
+					}
+				},
+			}),
+			iconSize() {
+				let size = this.showStyle.iconSize || 44
+				return uni.upx2px(size * 2) + 'px';
+			},
+			fontSize() {
+				let size = this.showStyle.fontSize || 14
+				return uni.upx2px(size * 2) + 'px';
+			},
+			graphicSpace() {
+				return uni.upx2px(this.showStyle.graphicSpace * 2) + 'px';
+			},
+			itemSpace() {
+				return uni.upx2px(this.showStyle.itemSpace * 2) + 'px';
+			},
+		},
+		methods: {
+			// 获取图片地址
+			getImagePath(url) {
+				if (url.indexOf('http') > -1) {
+					return url
+				} else {
+					return this.domain + url
+				}
+			},
+			// 跳转页面
+			toPage(type) {
+				var path = ""
+				if (type == "subscribeMessage") {
+					path = "/pages/mine/subscribe/index"
+				} else if (type == "verificationActivity") {
+					path = "/pagesActivity/verification/index"
+				} else if (type == "examineMember") {
+					path = "/pagesAdmin/examine/index"
+				}
+				this.$util.toPage({
+					mode: 1,
+					path: path,
+				})
+			}
+		}
+	}
+</script>
+<style lang="scss">
+	.diy-menu {
+		display: flex;
+		flex-wrap: wrap;
+
+		.menu-item {
+			position: relative;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			padding: 0 8rpx;
+
+			.item-image {
+				position: relative;
+
+				.image {
+					width: 100%;
+					height: 100%;
+				}
+
+				.count {
+					position: absolute;
+					top: -12rpx;
+					right: -16rpx;
+					color: #FFF;
+					text-align: center;
+					font-size: 20rpx;
+					line-height: 28rpx;
+					padding: 0 8rpx;
+					min-width: 28rpx;
+					background: #FF4646;
+					border-radius: 28rpx;
+				}
+			}
+
+			.item-text {
+				width: 100%;
+				line-height: 1.4;
+				font-size: 28rpx;
+				text-align: center;
+			}
+
+			.item-count {
+				display: none;
+			}
+
+			.item-icon {
+				display: none;
+			}
+		}
+
+		&.vertical-layout {
+			flex-direction: column;
+			padding: 0 16px;
+
+			.menu-item {
+				flex-direction: row;
+				width: 100% !important;
+				padding: 0;
+
+				.item-image .count {
+					display: none;
+				}
+
+				.item-text {
+					flex: 1;
+					text-align: left;
+				}
+
+				.item-count {
+					display: block;
+					color: #FFF;
+					text-align: center;
+					font-size: 20rpx;
+					line-height: 28rpx;
+					padding: 0 8rpx;
+					min-width: 28rpx;
+					background: #FF4646;
+					border-radius: 28rpx;
+					margin-left: 16rpx;
+				}
+
+				.item-icon {
+					display: block;
+					margin-left: 16rpx;
+				}
+			}
+		}
+	}
+</style>

pages/component/mine/menu.vue

@@ -0,0 +1,143 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-按钮组 开发者: 麦沃德科技-半夏 
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="diy-menu" :class="{'vertical-layout': showStyle.layout == 2}" :style="{'row-gap': `${showStyle.itemSpace}px`}">
+		<block v-for="(item, index) in showData" :key="index">
+			<view class="menu-item" :style="{width: `calc(100% / ${showStyle.rowsNum})`}" @click="onClick(item.link)" v-if="!item.link || item.link.type != 'Service'">
+				<view class="item-image" :style="{width: iconSize, height: iconSize}">
+					<image mode="aspectFit" :src="getImagePath(item.imgUrl)"></image>
+				</view>
+				<view class="item-space" :style="{width: graphicSpace, height: graphicSpace}"></view>
+				<view class="item-text text-ellipsis" :style="{color: showStyle.textColor, fontSize: fontSize}">{{ item.text }}</view>
+				<image class="item-icon" src="/static/right.png" mode="aspectFit" :style="{width: fontSize, height: fontSize}"></image>
+				<!-- #ifdef H5 -->
+				<wx-open-launch-weapp class="item-absolute" :appid="item.link.appid" :path="item.link.path" v-if="item.link && item.link.type == 'WXMp'">
+					<script type="text/wxtag-template">
+						<style> .btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
+						<view class="btn"></view>
+					</script>
+				</wx-open-launch-weapp>
+				<!-- #endif -->
+			</view>
+			<!-- #ifdef MP-WEIXIN -->
+			<button class="menu-item clear" open-type="contact" :style="{width: `calc(100% / ${showStyle.rowsNum})`}" v-else-if="item.link.type == 'Service'">
+				<view class="item-image" :style="{width: iconSize, height: iconSize}">
+					<image mode="aspectFit" :src="getImagePath(item.imgUrl)"></image>
+				</view>
+				<view class="item-space" :style="{width: graphicSpace, height: graphicSpace}"></view>
+				<view class="item-text text-ellipsis" :style="{color: showStyle.textColor, fontSize: fontSize}">{{ item.text }}</view>
+				<image class="item-icon" src="/static/right.png" mode="aspectFit" :style="{width: fontSize, height: fontSize}"></image>
+			</button>
+			<!-- #endif -->
+		</block>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	export default {
+		name: 'mineMenu',
+		props: ['showStyle', 'showData', 'domain'],
+		computed: {
+			iconSize() {
+				let size = this.showStyle.iconSize || 44
+				return uni.upx2px(size * 2) + 'px';
+			},
+			fontSize() {
+				let size = this.showStyle.fontSize || 14
+				return uni.upx2px(size * 2) + 'px';
+			},
+			graphicSpace() {
+				return uni.upx2px(this.showStyle.graphicSpace * 2) + 'px';
+			},
+			itemSpace() {
+				return uni.upx2px(this.showStyle.itemSpace * 2) + 'px';
+			},
+		},
+		methods: {
+			// 获取图片地址
+			getImagePath(url) {
+				if (url.indexOf('http') > -1) {
+					return url
+				} else {
+					return this.domain + url
+				}
+			},
+			// 点击事件
+			onClick(e) {
+				if (!e) return;
+				this.$util.openLink(e);
+			},
+		}
+	}
+</script>
+<style lang="scss">
+	.diy-menu {
+		display: flex;
+		flex-wrap: wrap;
+
+		.menu-item {
+			position: relative;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			padding: 0 8rpx;
+
+			.item-image {
+				width: 88rpx;
+				height: 88rpx;
+			}
+
+			.item-text {
+				width: 100%;
+				line-height: 1.4;
+				font-size: 28rpx;
+				text-align: center;
+			}
+
+			.item-icon {
+				display: none;
+			}
+
+			.item-absolute {
+				display: block;
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+			}
+		}
+
+		&.vertical-layout {
+			flex-direction: column;
+			padding: 0 16px;
+
+			.menu-item {
+				flex-direction: row;
+				width: 100% !important;
+				padding: 0;
+
+				.item-text {
+					flex: 1;
+					text-align: left;
+				}
+
+				.item-icon {
+					display: block;
+					margin-left: 16rpx;
+				}
+			}
+		}
+	}
+</style>

pages/component/mine/order.vue

@@ -0,0 +1,136 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-订单菜单 开发者: 麦沃德科技-半夏
++---------------------------------------------------------------------- -->
+<template>
+	<view class="component-menu-order">
+		<view class="order-cloumn" :style="{width: (100 / showData.length) + '%'}" v-for="(item, index) in showData" :key="index">
+			<view class="cloumn-item" @click="toPage(item.type)">
+				<view class="item-image" :style="{width: iconSize, height: iconSize}">
+					<image class="image" :src="getImagePath(item.imgUrl)" mode="aspectFit" v-if="item.imgUrl"></image>
+					<view class="count" v-if="parseInt(getOrderNumber(item.type)) > 0">{{parseInt(getOrderNumber(item.type)) > 99 ? '99+' : getOrderNumber(item.type)}}</view>
+				</view>
+				<view class="item-text" :style="{fontSize: fontSize, color: showStyle.textColor, marginTop: graphicSpace}">{{item.text}}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	export default {
+		name: "mineOrder",
+		props: ['showStyle', 'showData', 'domain'],
+		computed: {
+			...mapState({
+				orderInfo: state => state.user.userInfo.order || {},
+			}),
+			iconSize() {
+				return uni.upx2px(this.showStyle.iconSize * 2) + 'px';
+			},
+			fontSize() {
+				return uni.upx2px(this.showStyle.fontSize * 2) + 'px';
+			},
+			graphicSpace() {
+				return uni.upx2px(this.showStyle.graphicSpace * 2) + 'px';
+			},
+		},
+		methods: {
+			// 获取图片地址
+			getImagePath(url) {
+				if (url.indexOf('http') > -1) {
+					return url
+				} else {
+					return this.domain + url
+				}
+			},
+			// 获取该状态的订单数量
+			getOrderNumber(type) {
+				if (type == 1) {
+					return this.orderInfo.unpaid_count || 0
+				} else if (type == 2) {
+					return this.orderInfo.to_be_shipped_count || 0
+				} else if (type == 3) {
+					return this.orderInfo.to_be_received_count || 0
+				} else if (type == 4) {
+					return this.orderInfo.refund_count || 0
+				}
+				return 0
+			},
+			// 跳转页面
+			toPage(type) {
+				var path = ""
+				if (type == 1) {
+					path = "/pagesMall/order/index?id=1"
+				} else if (type == 2) {
+					path = "/pagesMall/order/index?id=2"
+				} else if (type == 3) {
+					path = "/pagesMall/order/index?id=3"
+				} else if (type == 4) {
+					path = "/pagesMall/refund/index"
+				}
+				this.$util.toPage({
+					mode: 1,
+					path: path,
+				})
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	.component-menu-order {
+		width: 100%;
+		display: flex;
+
+		.order-cloumn {
+			width: 25%;
+
+			.cloumn-item {
+				margin: 0 auto;
+				position: relative;
+
+				.item-image {
+					margin: 0 auto;
+					position: relative;
+
+					.image {
+						width: 100%;
+						height: 100%;
+					}
+
+					.count {
+						position: absolute;
+						top: -12rpx;
+						right: -16rpx;
+						color: #FFF;
+						text-align: center;
+						font-size: 20rpx;
+						line-height: 26rpx;
+						padding: 0 8rpx;
+						min-width: 26rpx;
+						background: #FF4646;
+						border-radius: 26rpx;
+					}
+				}
+
+				.item-text {
+					text-align: center;
+					line-height: 1.4;
+					color: #5A5B6E;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					word-break: break-all;
+				}
+			}
+		}
+	}
+</style>

pages/component/modal/confirm.vue

@@ -0,0 +1,180 @@
+<!-- 组件-确认弹窗 开发者: 麦沃德科技-半夏 -->
+
+<template>
+	<view class="component-modal-confirm">
+		<uni-popup ref="popup" type="center" @change="onChange">
+			<view class="modal-confirm" :style="{width: editable ? '688rpx' : '544rpx'}">
+				<view class="confirm-title" v-if="title">{{title}}</view>
+				<view class="confirm-input" v-if="editable">
+					<textarea class="textarea" v-model="inputData" :placeholder="placeholderText" :placeholder-class="placeholder" />
+				</view>
+				<view class="confirm-content" v-else>
+					<rich-text :nodes="content"></rich-text>
+				</view>
+				<view class="confirm-footer">
+					<view class="footer-btn" :style="{color: cancelColor}" v-if="showCancel" @click="handleCancel()">{{cancelText}}</view>
+					<view class="footer-btn" :style="{color: confirmColor}" @click="handleConfirm()">{{confirmText}}</view>
+				</view>
+			</view>
+		</uni-popup>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				// 模态框标题
+				title: "",
+				// 模态框内容
+				content: "",
+				// 是否显示取消按钮
+				showCancel: true,
+				// 取消按钮文字
+				cancelText: "取消",
+				// 取消按钮颜色
+				cancelColor: "#8D929C",
+				// 确认按钮文字
+				confirmText: "确定",
+				// 确认按钮颜色
+				confirmColor: "#DE2828",
+				// 是否显示输入框
+				editable: false,
+				// 显示输入框时的提示文本
+				placeholderText: "请输入",
+				// 回调函数
+				callback: null,
+				// 输入内容
+				inputData: "",
+			}
+		},
+		methods: {
+			// 打开弹窗
+			open(e) {
+				this.title = e.title || ""
+				this.content = e.content || ""
+				this.showCancel = e.showCancel === false ? false : true
+				this.cancelText = e.cancelText || "取消"
+				this.cancelColor = e.cancelColor || "#8D929C"
+				this.confirmText = e.confirmText || "确定"
+				this.confirmColor = e.confirmColor || "#325DFF"
+				this.editable = e.editable || false
+				this.placeholderText = e.placeholderText || "请输入"
+				this.callback = e.success
+				this.inputData = ""
+				this.$refs.popup.open()
+			},
+			// 改变事件
+			onChange(e) {
+				this.$emit("onChange", e.show)
+			},
+			// 取消按钮
+			handleCancel() {
+				if (this.callback) {
+					this.callback({
+						cancel: true,
+					})
+				}
+				this.$refs.popup.close()
+			},
+			// 确认按钮
+			handleConfirm() {
+				if (this.callback) {
+					if (this.editable) {
+						if (!this.inputData) {
+							uni.showToast({
+								icon: "none",
+								title: this.placeholderText
+							})
+							return
+						}
+						this.callback({
+							confirm: true,
+							content: this.inputData
+						})
+						this.$refs.popup.close()
+					} else {
+						this.callback({
+							confirm: true
+						})
+						this.$refs.popup.close()
+					}
+				} else {
+					this.$refs.popup.close()
+				}
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.component-modal-confirm {
+		position: relative;
+		z-index: 999;
+
+		.modal-confirm {
+			width: 544rpx;
+			max-width: 92vw;
+			border-radius: 16rpx;
+			background: #FFF;
+			padding-top: 32rpx;
+
+			.confirm-title {
+				color: #5A5B6E;
+				font-size: 32rpx;
+				font-weight: 600;
+				line-height: 44rpx;
+				padding: 0 32rpx 16rpx;
+				text-align: center;
+			}
+
+			.confirm-content {
+				padding: 32rpx 48rpx 64rpx;
+				color: #5A5B6E;
+				text-align: center;
+				font-size: 32rpx;
+				line-height: 44rpx;
+				white-space: pre-wrap;
+			}
+
+			.confirm-input {
+				padding: 16rpx 32rpx 32rpx;
+
+				.textarea {
+					padding: 32rpx;
+					border-radius: 16rpx;
+					background: #F6F7FB;
+					width: 100%;
+					box-sizing: border-box;
+					height: 240rpx;
+					color: #5A5B6E;
+					font-size: 28rpx;
+					line-height: 40rpx;
+				}
+
+				.placeholder {
+					color: #8D929C;
+				}
+			}
+
+			.confirm-footer {
+				border-top: 1px solid #E5E5E5;
+				display: flex;
+
+				.footer-btn {
+					flex: 1;
+					width: 50%;
+					padding: 28rpx 20rpx;
+					text-align: center;
+					font-size: 32rpx;
+					line-height: 48rpx;
+					border-left: 1px solid #E5E5E5;
+
+					&:first-child {
+						border-left: none;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/component/modal/level.vue

@@ -0,0 +1,204 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-级别选择弹窗 开发者: 麦沃德科技-半夏
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="component-modal-level" @click.stop>
+		<uni-popup ref="popupModal" type="bottom" :safe-area="false" @change="onChange">
+			<view class="popup-box" :style="{'--theme-color': themeColor}">
+				<view class="popup-header">
+					<view class="title">会员级别</view>
+					<image class="close" src="/static/close.png" mode="aspectFit" @click="onClose"></image>
+				</view>
+				<view class="popup-content flex-direction-column">
+					<scroll-view scroll-y class="contetnt-scroll flex-item">
+						<view class="scroll-list flex flex-wrap">
+							<view class="list-item" :class="{active: selectItem.includes(item)}" v-for="item in levelList" :key="item.id" @click="selectLevel(item)">{{item.name}}</view>
+						</view>
+					</scroll-view>
+				</view>
+				<view class="popup-btn">
+					<view class="btn" @click="onReset">重置</view>
+					<view class="btn confirm" @click="onConfirm">确认</view>
+				</view>
+			</view>
+		</uni-popup>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	export default {
+		name: "modalLevel",
+		data() {
+			return {
+				// 级别列表
+				levelList: [],
+				// 已选项目
+				selectItem: [],
+			};
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+			})
+		},
+		methods: {
+			// 打开模态框
+			open(value) {
+				this.levelList = []
+				this.getLevelList(value)
+				this.$refs.popupModal.open()
+			},
+			// 获取级别数据
+			getLevelList(value) {
+				// 获取会员级别
+				this.$util.request("member.level").then(res => {
+					if (res.code == 1) {
+						this.levelList = res.data
+						this.selectItem = []
+						for (let i in this.levelList) {
+							for (let j in value) {
+								if (this.levelList[i].id == value[j].id) {
+									this.selectItem.push(this.levelList[i])
+								}
+							}
+						}
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取会员级别 ', error)
+				})
+			},
+			// 选择级别
+			selectLevel(item) {
+				if (this.selectItem.includes(item)) {
+					this.$delete(this.selectItem, this.selectItem.indexOf(item))
+				} else {
+					this.selectItem.push(item)
+				}
+			},
+			// 关闭弹窗
+			onClose() {
+				this.$refs.popupModal.close()
+			},
+			// 重置
+			onReset() {
+				this.selectItem = []
+				this.$emit("callback", [])
+				this.onClose()
+			},
+			// 确认
+			onConfirm() {
+				this.$emit("callback", this.selectItem)
+				this.onClose()
+			},
+			// 改变事件
+			onChange(e) {
+				this.$emit("onChange", e.show)
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.component-modal-level {
+		position: relative;
+		z-index: 999;
+
+		.popup-box {
+			background: #FFFFFF;
+			border-radius: 40rpx 40rpx 0 0;
+			padding-top: 32rpx;
+			padding-bottom: constant(safe-area-inset-bottom);
+			padding-bottom: env(safe-area-inset-bottom);
+
+			.popup-header {
+				display: flex;
+				align-items: center;
+				padding: 0 32rpx 0 64rpx;
+
+				.title {
+					color: #333;
+					text-align: center;
+					font-size: 32rpx;
+					font-weight: 600;
+					line-height: 44rpx;
+					flex: 1;
+				}
+
+				.close {
+					width: 32rpx;
+					height: 32rpx;
+				}
+			}
+
+			.popup-content {
+				padding: 12rpx 32rpx 32rpx;
+				height: 60vh;
+
+				.contetnt-scroll {
+					overflow: hidden;
+					padding: 0 12rpx;
+
+					.scroll-list {
+						margin-left: -32rpx;
+
+						.list-item {
+							margin-top: 32rpx;
+							color: #666666;
+							font-size: 28rpx;
+							line-height: 40rpx;
+							text-align: center;
+							padding: 16rpx;
+							min-width: 200rpx;
+							border-radius: 10rpx;
+							background: #F6F7FB;
+							margin-left: 32rpx;
+
+							&.active {
+								background: var(--theme-color);
+								color: #ffffff;
+							}
+						}
+					}
+				}
+			}
+
+			.popup-btn {
+				display: flex;
+				justify-content: space-between;
+				border-top: 1rpx solid #F6F7FB;
+				padding: 16rpx 32rpx;
+
+				.btn {
+					width: 48%;
+					color: #666666;
+					font-size: 28rpx;
+					line-height: 40rpx;
+					padding: 20rpx;
+					border-radius: 10rpx;
+					background: #F0F0F0;
+					text-align: center;
+
+					&.confirm {
+						color: #FFFFFF;
+						background: var(--theme-color);
+					}
+				}
+			}
+		}
+	}
+</style>

pages/component/modal/region.vue

@@ -0,0 +1,328 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-地区选择弹窗 开发者: 麦沃德科技-半夏
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="component-modal-region" @click.stop>
+		<uni-popup ref="popupModal" type="bottom" :safe-area="false" @change="onChange">
+			<view class="popup-box" :style="{'--theme-color': themeColor}">
+				<view class="popup-header">
+					<view class="title">地区选择</view>
+					<image class="close" src="/static/close.png" mode="aspectFit" @click="onClose"></image>
+				</view>
+				<view class="popup-content flex-direction-column">
+					<view class="contetnt-select flex">
+						<view class="select-item flex" @click="selectProvince = '';selectCity = '';selectArea = '';">
+							<view class="item-title">省：</view>
+							<view class="item-value">{{selectProvince || "请选择"}}</view>
+						</view>
+						<view class="select-item flex" @click="selectCity = '';selectArea = '';">
+							<view class="item-title">市：</view>
+							<view class="item-value">{{selectCity || "请选择"}}</view>
+						</view>
+						<view class="select-item flex">
+							<view class="item-title">区/县：</view>
+							<view class="item-value" v-if="selectCity">{{selectArea || "全部"}}</view>
+							<view class="item-value" v-else>请选择</view>
+						</view>
+					</view>
+					<scroll-view scroll-y class="contetnt-city flex-item">
+						<view class="city-list">
+							<block v-if="provinceList.length && !selectProvince">
+								<view class="list-item" v-for="(item, index) in provinceList" :key="index" @click="changeProvince(item.id, item.name)">{{item.name}}</view>
+							</block>
+							<block v-if="cityList.length && !selectCity">
+								<view class="list-item" v-for="(item, index) in cityList" :key="index" @click="changeCity(item.id, item.name)">{{item.name}}</view>
+							</block>
+							<block v-if="areaList.length">
+								<view class="list-item" :class="{active: selectArea == ''}" @click="changeArea('')">全部</view>
+								<view class="list-item" :class="{active: selectArea == item.name}" v-for="(item, index) in areaList" :key="index" @click="changeArea(item.name)">{{item.name}}</view>
+							</block>
+						</view>
+						<view class="city-empty" v-if="!provinceList.length && !cityList.length && !areaList.length">暂无相关数据</view>
+					</scroll-view>
+				</view>
+				<view class="popup-btn">
+					<view class="btn" @click="onReset">重置</view>
+					<view class="btn confirm" @click="onConfirm">确认</view>
+				</view>
+			</view>
+		</uni-popup>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	export default {
+		name: "modalRegion",
+		data() {
+			return {
+				// 省份列表
+				provinceList: [],
+				// 城市列表
+				cityList: [],
+				// 区县列表
+				areaList: [],
+				// 已选省份
+				selectProvince: "",
+				// 已选城市
+				selectCity: "",
+				// 已选区县
+				selectArea: "",
+			};
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+			})
+		},
+		methods: {
+			// 打开模态框
+			open(value) {
+				this.provinceList = []
+				this.cityList = []
+				this.areaList = []
+				this.selectProvince = value.province || ""
+				this.selectCity = value.city || ""
+				this.selectArea = value.area || ""
+				this.getProvinceList()
+				this.$refs.popupModal.open()
+			},
+			// 获取省份数据
+			getProvinceList() {
+				this.$util.request("main.address.province").then(res => {
+					if (res.code == 1) {
+						this.provinceList = res.data.data
+						for (let i in this.provinceList) {
+							if (this.provinceList[i].name == this.selectProvince) {
+								this.getCityList(this.provinceList[i].id)
+								break;
+							}
+						}
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取省份数据 ', error)
+				})
+			},
+			// 获取城市数据
+			getCityList(id) {
+				this.$util.request("main.address.city", {
+					crea_id: id
+				}).then(res => {
+					if (res.code == 1) {
+						this.cityList = res.data.data
+						for (let i in this.cityList) {
+							if (this.cityList[i].name == this.selectCity) {
+								this.getAreaList(this.cityList[i].id)
+								break;
+							}
+						}
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取城市数据 ', error)
+				})
+			},
+			// 获取区县数据
+			getAreaList(id) {
+				this.$util.request("main.address.area", {
+					crea_id: id
+				}).then(res => {
+					if (res.code == 1) {
+						this.areaList = res.data.data
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取区县数据 ', error)
+				})
+			},
+			// 关闭弹窗
+			onClose() {
+				this.$refs.popupModal.close()
+			},
+			// 重置
+			onReset() {
+				this.cityList = []
+				this.areaList = []
+				this.selectProvince = ""
+				this.selectCity = ""
+				this.selectArea = ""
+				this.$emit("callback", {
+					province: "",
+					city: "",
+					area: "",
+				})
+				this.onClose()
+			},
+			// 选择省份
+			changeProvince(id, name) {
+				this.selectProvince = name
+				this.getCityList(id)
+			},
+			// 选择城市
+			changeCity(id, name) {
+				this.selectCity = name
+				this.getAreaList(id)
+			},
+			// 选择区县
+			changeArea(name) {
+				this.selectArea = name
+			},
+			// 确认
+			onConfirm() {
+				if (this.selectProvince && this.selectCity) {
+					this.$emit("callback", {
+						province: this.selectProvince,
+						city: this.selectCity,
+						area: this.selectArea,
+					})
+				} else {
+					this.$emit("callback", {})
+				}
+				this.onClose()
+			},
+			// 改变事件
+			onChange(e) {
+				this.$emit("onChange", e.show)
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.component-modal-region {
+		position: relative;
+		z-index: 999;
+
+		.popup-box {
+			background: #FFFFFF;
+			border-radius: 40rpx 40rpx 0 0;
+			padding: 32rpx 32rpx 0;
+			padding-bottom: constant(safe-area-inset-bottom);
+			padding-bottom: env(safe-area-inset-bottom);
+
+			.popup-header {
+				display: flex;
+				align-items: center;
+				padding-left: 32rpx;
+
+				.title {
+					color: #333;
+					text-align: center;
+					font-size: 32rpx;
+					font-weight: 600;
+					line-height: 44rpx;
+					flex: 1;
+				}
+
+				.close {
+					width: 32rpx;
+					height: 32rpx;
+				}
+			}
+
+			.popup-content {
+				padding: 32rpx 0;
+				height: 65vh;
+
+				.contetnt-select {
+					margin-top: 16rpx;
+
+					.select-item {
+						margin-left: 32rpx;
+
+						&:first-child {
+							margin-left: 0;
+						}
+
+						.item-title {
+							color: #333;
+							font-size: 28rpx;
+							line-height: 50rpx;
+						}
+
+						.item-value {
+							color: var(--theme-color);
+							font-size: 28rpx;
+							line-height: 50rpx;
+						}
+					}
+				}
+
+				.contetnt-city {
+					padding-top: 32rpx;
+					overflow: hidden;
+
+					.city-list {
+						.list-item {
+							margin-top: 32rpx;
+							color: #333;
+							font-size: 28rpx;
+							line-height: 50rpx;
+
+							&.active {
+								color: var(--theme-color);
+							}
+
+							&:first-child {
+								margin-top: 0;
+							}
+						}
+					}
+
+					.city-empty {
+						padding: 48rpx 0 24rpx;
+						color: #A0A2B3;
+						text-align: center;
+						font-size: 28rpx;
+						line-height: 40rpx;
+					}
+				}
+			}
+
+			.popup-btn {
+				display: flex;
+				justify-content: space-between;
+				border-top: 1rpx solid #F6F7FB;
+				padding: 16rpx 32rpx;
+
+				.btn {
+					width: 48%;
+					color: #666666;
+					font-size: 28rpx;
+					line-height: 40rpx;
+					padding: 20rpx;
+					border-radius: 10rpx;
+					background: #F0F0F0;
+					text-align: center;
+
+					&.confirm {
+						color: #FFFFFF;
+						background: var(--theme-color);
+					}
+				}
+			}
+		}
+	}
+</style>

pages/component/picker/address.vue

@@ -0,0 +1,264 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-省市区选择器 开发者: 麦沃德科技-半夏
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="component-picker-address" @click.stop>
+		<uni-popup ref="popupModal" type="bottom" :safe-area="false" @change="onChange">
+			<view class="modal-box" :style="{'--theme-color': themeColor}">
+				<view class="modal-head">
+					<view class="head-title">地址选择</view>
+					<view class="head-btn" @click="handleConfirm">确认</view>
+				</view>
+				<view class="modal-content flex align-items-center">
+					<picker-view class="content-picker" indicator-style="height: 70rpx;" :value="selectValue" @change="handleChange">
+						<picker-view-column>
+							<view class="picker-column" v-for="(item, index) in provinceList" :key="index">{{item.name}}</view>
+						</picker-view-column>
+						<picker-view-column>
+							<view class="picker-column" v-for="(item, index) in cityList" :key="index">{{item.name}}</view>
+						</picker-view-column>
+						<picker-view-column>
+							<view class="picker-column" v-for="(item, index) in areaList" :key="index">{{item.name}}</view>
+						</picker-view-column>
+					</picker-view>
+				</view>
+				<view class="modal-btn" @click="onClose">取消</view>
+			</view>
+		</uni-popup>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	export default {
+		name: "addressPicker",
+		data() {
+			return {
+				// 省份列表
+				provinceList: [],
+				// 城市列表
+				cityList: [],
+				// 地区列表
+				areaList: [],
+				// 已选地址
+				addressList: [],
+				// 已选数据
+				selectValue: [0, 0, 0],
+				// 参数
+				parameter: "",
+			};
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+			})
+		},
+		mounted() {
+			this.getProvinceList()
+		},
+		methods: {
+			// 打开模态框
+			open(value, parameter) {
+				const list = value.split("/")
+				this.addressList = list
+				this.parameter = parameter
+				this.setValueChange()
+				this.$refs.popupModal.open()
+			},
+			// 关闭弹窗
+			onClose() {
+				this.$refs.popupModal.close()
+			},
+			// 改变事件
+			onChange(e) {
+				this.$emit("onChange", e.show)
+			},
+			// 数值改变
+			async handleChange(e) {
+				if (this.selectValue[0] != e.target.value[0]) {
+					this.selectValue = [e.target.value[0], 0, 0]
+					this.cityList = await this.getCityList(this.provinceList[this.selectValue[0]].id)
+					this.areaList = await this.getAreaList(this.cityList[this.selectValue[1]].id)
+				} else if (this.selectValue[1] != e.target.value[1]) {
+					this.selectValue = [e.target.value[0], e.target.value[1], 0]
+					this.areaList = await this.getAreaList(this.cityList[this.selectValue[1]].id)
+				} else {
+					this.selectValue = e.target.value
+				}
+			},
+			// 设置选中数值
+			async setValueChange() {
+				var selectData = [0, 0, 0]
+				if (this.addressList[0]) {
+					for (var i = 0; i < this.provinceList.length; i++) {
+						if (this.provinceList[i].name == this.addressList[0]) {
+							selectData[0] = i
+							break
+						}
+					}
+				}
+				this.cityList = await this.getCityList(this.provinceList[selectData[0]].id)
+				if (this.addressList[1]) {
+					for (var i = 0; i < this.cityList.length; i++) {
+						if (this.cityList[i].name == this.addressList[1]) {
+							selectData[1] = i
+							break
+						}
+					}
+				}
+				this.areaList = await this.getAreaList(this.cityList[selectData[1]].id)
+				if (this.addressList[2]) {
+					for (var i = 0; i < this.areaList.length; i++) {
+						if (this.areaList[i].name == this.addressList[2]) {
+							selectData[2] = i
+							break
+						}
+					}
+				}
+				this.$nextTick(() => {
+					this.selectValue = selectData
+					this.$forceUpdate()
+				})
+			},
+			// 确认
+			handleConfirm() {
+				var data = {
+					province: this.provinceList[this.selectValue[0]].name,
+					city: this.cityList[this.selectValue[1]].name,
+					area: this.areaList[this.selectValue[2]].name,
+				}
+				this.$emit("confirm", data, this.parameter)
+				this.onClose()
+			},
+			// 获取省份数据
+			getProvinceList() {
+				this.$util.request("main.address.province").then(res => {
+					if (res.code == 1) {
+						this.provinceList = res.data.data
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取省份数据 ', error)
+				})
+			},
+			// 获取城市数据
+			getCityList(id) {
+				return new Promise((resolve, reject) => {
+					this.$util.request("main.address.city", {
+						crea_id: id
+					}).then(res => {
+						if (res.code == 1) {
+							resolve(res.data.data)
+						} else {
+							uni.showToast({
+								title: res.msg,
+								icon: 'none'
+							})
+							reject(false)
+						}
+					}).catch(error => {
+						console.error('获取城市数据 ', error)
+						reject(false)
+					})
+				})
+			},
+			// 获取地区数据
+			getAreaList(id) {
+				return new Promise((resolve, reject) => {
+					this.$util.request("main.address.area", {
+						crea_id: id
+					}).then(res => {
+						if (res.code == 1) {
+							resolve(res.data.data)
+						} else {
+							uni.showToast({
+								title: res.msg,
+								icon: 'none'
+							})
+							reject(false)
+						}
+					}).catch(error => {
+						console.error('获取省份数据 ', error)
+						reject(false)
+					})
+				})
+			},
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.component-picker-address {
+		position: relative;
+		z-index: 999;
+
+		.modal-box {
+			background: #FFFFFF;
+			border-radius: 20rpx 20rpx 0 0;
+			width: 100vw;
+			padding-bottom: constant(safe-area-inset-bottom);
+			padding-bottom: env(safe-area-inset-bottom);
+
+			.modal-head {
+				display: flex;
+				align-items: center;
+				padding: 32rpx;
+
+				.head-title {
+					flex: 1;
+					color: #333;
+					text-align: center;
+					font-size: 32rpx;
+					font-weight: 600;
+					line-height: 44rpx;
+					padding-left: 128rpx;
+				}
+
+				.head-btn {
+					color: #FFF;
+					font-size: 28rpx;
+					line-height: 40rpx;
+					padding: 12rpx 36rpx;
+					border-radius: 10rpx;
+					background: var(--theme-color);
+				}
+			}
+
+			.modal-content {
+				padding-bottom: 32rpx;
+
+				.content-picker {
+					height: 400rpx;
+					flex: 1;
+
+					.picker-column {
+						line-height: 70rpx;
+						text-align: center;
+						font-size: 28rpx;
+					}
+				}
+			}
+
+			.modal-btn {
+				color: #E10602;
+				text-align: center;
+				font-size: 32rpx;
+				line-height: 44rpx;
+				padding: 32rpx;
+			}
+		}
+	}
+</style>

pages/component/picker/date.vue

@@ -0,0 +1,192 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-日期选择框 开发者: 麦沃德科技-半夏
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="component-picker-date" @click.stop>
+		<uni-popup ref="popupModal" type="bottom" :safe-area="false" @change="onChange">
+			<view class="modal-box" :style="{'--theme-color': themeColor}">
+				<view class="modal-head">
+					<view class="head-btn cancel" @click="onClose">取消</view>
+					<view class="head-title">选择日期</view>
+					<view class="head-btn" @click="handleConfirm">确认</view>
+				</view>
+				<view class="modal-content flex-item">
+					<picker-view class="picker-view" indicator-style="height: 50px;" :immediate-change="true" :value="selectValue" @change="handleChange">
+						<picker-view-column>
+							<view class="picker-column" v-for="(item,index) in yearList" :key="index">{{item}}年</view>
+						</picker-view-column>
+						<picker-view-column>
+							<view class="picker-column" v-for="(item,index) in monthList" :key="index">{{item}}月</view>
+						</picker-view-column>
+						<picker-view-column>
+							<view class="picker-column" v-for="(item,index) in dayList" :key="index">{{item}}日</view>
+						</picker-view-column>
+					</picker-view>
+				</view>
+			</view>
+		</uni-popup>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	export default {
+		name: "datePicker",
+		data() {
+			const date = new Date()
+			const year = date.getFullYear()
+			const month = date.getMonth() + 1
+			const day = date.getDate()
+			let years = []
+			let months = []
+			let days = []
+			for (let i = parseInt(year) - 150; i <= parseInt(year) + 150; i++) {
+				years.push(i)
+			}
+			for (let i = 1; i <= 12; i++) {
+				months.push(i)
+			}
+			for (let i = 1; i <= new Date(year, month, 0).getDate(); i++) {
+				days.push(i)
+			}
+			return {
+				// 当前日期
+				nowDate: [year, month, day],
+				// 年列表
+				yearList: years,
+				// 月列表
+				monthList: months,
+				// 日列表
+				dayList: days,
+				// 已选数据
+				selectValue: [year, month - 1, day - 1],
+				// 参数
+				parameter: "",
+			};
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+			})
+		},
+		methods: {
+			// 打开模态框
+			open(value, parameter) {
+				this.parameter = parameter
+				if (value) {
+					var date = value.split("-")
+					var yearIndex = this.yearList.findIndex(item => {
+						if (item == date[0]) return true
+					})
+					var monthIndex = this.monthList.findIndex(item => {
+						if (item == date[1]) return true
+					})
+					var dayIndex = this.dayList.findIndex(item => {
+						if (item == date[2]) return true
+					})
+					this.selectValue = [yearIndex, monthIndex, dayIndex]
+				} else {
+					this.selectValue = [this.yearList.indexOf(this.nowDate[0]), this.monthList.indexOf(this.nowDate[1]), this.dayList.indexOf(this.nowDate[2])]
+				}
+				this.$refs.popupModal.open()
+			},
+			// 关闭弹窗
+			onClose() {
+				this.$refs.popupModal.close()
+			},
+			// 改变事件
+			onChange(e) {
+				this.$emit("onChange", e.show)
+			},
+			// 时间改变
+			handleChange(e) {
+				if (this.selectValue[0] != e.target.value[0] || this.selectValue[1] != e.target.value[1]) {
+					var days = []
+					var year = this.yearList[e.target.value[0]]
+					var month = this.monthList[e.target.value[1]]
+					for (let i = 1; i <= new Date(year, month, 0).getDate(); i++) {
+						days.push(i)
+					}
+					this.dayList = days
+				}
+				this.selectValue = e.target.value
+				if (this.selectValue[2] > this.dayList.length - 1) {
+					this.selectValue[2] = this.dayList.length - 1
+				}
+			},
+			// 确认
+			handleConfirm() {
+				var year = parseInt(this.yearList[this.selectValue[0]]) < 10 ? "0" + this.yearList[this.selectValue[0]] : this.yearList[this.selectValue[0]]
+				var month = parseInt(this.monthList[this.selectValue[1]]) < 10 ? "0" + this.monthList[this.selectValue[1]] : this.monthList[this.selectValue[1]]
+				var day = parseInt(this.dayList[this.selectValue[2]]) < 10 ? "0" + this.dayList[this.selectValue[2]] : this.dayList[this.selectValue[2]]
+				var data = year + "-" + month + "-" + day
+				this.$emit("confirm", data, this.parameter)
+				this.onClose()
+			},
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.component-picker-date {
+		position: relative;
+		z-index: 999;
+
+		.modal-box {
+			background: #FFFFFF;
+			border-radius: 20rpx 20rpx 0 0;
+			width: 100vw;
+			padding-bottom: constant(safe-area-inset-bottom);
+			padding-bottom: env(safe-area-inset-bottom);
+
+			.modal-head {
+				display: flex;
+				align-items: center;
+				padding: 32rpx;
+
+				.head-title {
+					flex: 1;
+					text-align: center;
+					font-size: 28rpx;
+					font-weight: 600;
+					line-height: 40rpx;
+					padding: 0 16rpx;
+				}
+
+				.head-btn {
+					color: var(--theme-color);
+					font-size: 28rpx;
+					line-height: 40rpx;
+
+					&.cancel {
+						color: #979797;
+					}
+				}
+			}
+
+			.modal-content {
+				padding-bottom: 32rpx;
+
+				.picker-view {
+					height: 400rpx;
+					flex: 1;
+
+					.picker-column {
+						line-height: 50px;
+						text-align: center;
+						font-size: 28rpx;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/component/picker/select.vue

@@ -0,0 +1,166 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-单项选择框 开发者: 麦沃德科技-半夏
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="component-picker-select" @click.stop>
+		<uni-popup ref="popupModal" type="bottom" :safe-area="false" @change="onChange">
+			<view class="modal-box" :style="{'--theme-color': themeColor}">
+				<view class="modal-head">
+					<view class="head-title text-ellipsis">{{title}}</view>
+					<view class="head-btn" @click="handleConfirm">确认</view>
+				</view>
+				<view class="modal-content flex align-items-center" v-if="loadEnd">
+					<picker-view class="content-picker" indicator-style="height: 50px;" :immediate-change="true" :value="selectValue" @change="handleChange">
+						<picker-view-column>
+							<view class="picker-column" v-for="(item, index) in selectList" :key="index">{{item.name || item}}</view>
+						</picker-view-column>
+					</picker-view>
+				</view>
+				<view class="modal-btn" @click="onClose">取消</view>
+			</view>
+		</uni-popup>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	export default {
+		name: "selectPicker",
+		props: ["title"],
+		data() {
+			return {
+				// 加载完成
+				loadEnd: false,
+				// 参数
+				parameter: null,
+				// 数据列表
+				selectList: [],
+				// 已选数据
+				selectValue: [0],
+			};
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+			})
+		},
+		methods: {
+			// 打开模态框
+			open(list, value, parameter) {
+				this.selectList = list
+				this.parameter = parameter
+				if (value) {
+					for (var i = 0; i < list.length; i++) {
+						if (typeof(list[i]) == "object") {
+							if (list[i].id == value) {
+								this.selectValue = [i]
+								break;
+							}
+						} else {
+							if (list[i] == value) {
+								this.selectValue = [i]
+								break;
+							}
+						}
+					}
+				} else {
+					this.selectValue = [0]
+				}
+				this.selectValue = [...this.selectValue]
+				this.loadEnd = true
+				this.$refs.popupModal.open()
+			},
+			// 关闭弹窗
+			onClose() {
+				this.loadEnd = false
+				this.$refs.popupModal.close()
+			},
+			// 改变事件
+			onChange(e) {
+				this.$emit("onChange", e.show)
+			},
+			// 改变值
+			handleChange(e) {
+				this.selectValue = [...e.target.value]
+			},
+			// 确认
+			handleConfirm() {
+				this.$emit("confirm", this.selectList[this.selectValue[0]], this.parameter)
+				this.onClose()
+			},
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.component-picker-select {
+		position: relative;
+		z-index: 999;
+
+		.modal-box {
+			background: #FFFFFF;
+			border-radius: 20rpx 20rpx 0 0;
+			width: 100vw;
+			padding-bottom: constant(safe-area-inset-bottom);
+			padding-bottom: env(safe-area-inset-bottom);
+
+			.modal-head {
+				display: flex;
+				align-items: center;
+				padding: 32rpx;
+
+				.head-title {
+					flex: 1;
+					color: #333;
+					text-align: center;
+					font-size: 32rpx;
+					font-weight: 600;
+					line-height: 44rpx;
+					padding-left: 128rpx;
+					padding: 0 32rpx 0 160rpx;
+				}
+
+				.head-btn {
+					color: #FFF;
+					font-size: 28rpx;
+					line-height: 40rpx;
+					padding: 12rpx 36rpx;
+					border-radius: 10rpx;
+					background: var(--theme-color);
+				}
+			}
+
+			.modal-content {
+				padding-bottom: 32rpx;
+
+				.content-picker {
+					height: 400rpx;
+					flex: 1;
+
+					.picker-column {
+						line-height: 50px;
+						text-align: center;
+						font-size: 28rpx;
+					}
+				}
+			}
+
+			.modal-btn {
+				color: #E10602;
+				text-align: center;
+				font-size: 32rpx;
+				line-height: 44rpx;
+				padding: 32rpx;
+			}
+		}
+	}
+</style>

pages/component/picker/time.vue

@@ -0,0 +1,148 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-时间选择框 开发者: 麦沃德科技-半夏
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="component-picker-time" @click.stop>
+		<uni-popup ref="popupModal" type="bottom" :safe-area="false" @change="onChange">
+			<view class="modal-box" :style="{'--theme-color': themeColor}">
+				<view class="modal-head">
+					<view class="head-btn cancel" @click="onClose">取消</view>
+					<view class="head-title">选择时间</view>
+					<view class="head-btn" @click="handleConfirm">确认</view>
+				</view>
+				<view class="modal-content flex-item">
+					<picker-view class="picker-view" indicator-style="height: 50px;" :immediate-change="true" :value="selectValue" @change="handleChange">
+						<picker-view-column>
+							<view class="picker-column" v-for="item in 24" :key="item">{{item < 10 ? "0" + item : item}}时</view>
+						</picker-view-column>
+						<picker-view-column>
+							<view class="picker-column" v-for="item in 60" :key="item">{{item < 10 ? "0" + item : item}}分</view>
+						</picker-view-column>
+					</picker-view>
+				</view>
+			</view>
+		</uni-popup>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	export default {
+		name: "timePicker",
+		data() {
+			const date = new Date()
+			const hours = date.getHours();
+			const minutes = date.getMinutes();
+			return {
+				// 当前时间
+				nowTime: [hours, minutes],
+				// 已选数据
+				selectValue: [hours, minutes],
+				// 参数
+				parameter: "",
+			};
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+			})
+		},
+		methods: {
+			// 打开模态框
+			open(value, parameter) {
+				this.parameter = parameter
+				if (value) {
+					var time = value.split(":")
+					this.selectValue = [parseInt(time[0]), parseInt(time[1])]
+				} else {
+					this.selectValue = [parseInt(this.nowTime[0]), parseInt(this.nowTime[1])]
+				}
+				this.$refs.popupModal.open()
+			},
+			// 关闭弹窗
+			onClose() {
+				this.$refs.popupModal.close()
+			},
+			// 改变事件
+			onChange(e) {
+				this.$emit("onChange", e.show)
+			},
+			// 时间改变
+			handleChange(e) {
+				this.selectValue = e.target.value
+			},
+			// 确认
+			handleConfirm() {
+				var hours = parseInt(this.selectValue[0]) < 10 ? "0" + this.selectValue[0] : this.selectValue[0]
+				var minutes = parseInt(this.selectValue[1]) < 10 ? "0" + this.selectValue[1] : this.selectValue[1]
+				var time = hours + ":" + minutes
+				this.$emit("confirm", time, this.parameter)
+				this.onClose()
+			},
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.component-picker-time {
+		position: relative;
+		z-index: 999;
+
+		.modal-box {
+			background: #FFFFFF;
+			border-radius: 20rpx 20rpx 0 0;
+			width: 100vw;
+			padding-bottom: constant(safe-area-inset-bottom);
+			padding-bottom: env(safe-area-inset-bottom);
+
+			.modal-head {
+				display: flex;
+				align-items: center;
+				padding: 32rpx;
+
+				.head-title {
+					flex: 1;
+					text-align: center;
+					font-size: 28rpx;
+					font-weight: 600;
+					line-height: 40rpx;
+					padding: 0 16rpx;
+				}
+
+				.head-btn {
+					color: var(--theme-color);
+					font-size: 28rpx;
+					line-height: 40rpx;
+
+					&.cancel {
+						color: #979797;
+					}
+				}
+			}
+
+			.modal-content {
+				padding-bottom: 32rpx;
+
+				.picker-view {
+					height: 400rpx;
+					flex: 1;
+
+					.picker-column {
+						line-height: 50px;
+						text-align: center;
+						font-size: 28rpx;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/component/tab-bar/tab-bar.vue

@@ -0,0 +1,144 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-底部导航 开发者: 麦沃德科技-半夏  
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="component-tab-bar" v-if="tabBarList && tabBarList.length">
+		<view class="tab-bar-main" :style="{'--theme-color': themeColor}">
+			<view class="main-item wbcentre" v-for="(item, index) in tabBarList" :key="index" @click="tabBarPages(index)">
+				<image class="item-img" :src="item.selicon" mode="aspectFit" v-if="item.path == currentPath"></image>
+				<image class="item-img" :src="item.icon" mode="aspectFit" v-else></image>
+				<view class="item-text" :class="{active: item.path == currentPath}">{{ item.name }}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	export default {
+		name: "tabBar",
+		data() {
+			return {
+				// 当前页面路径
+				currentPath: ""
+			}
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+				tabBarList: state => {
+					let list = state.app.tabBarList
+					let pages = getCurrentPages();
+					let isShow = false
+					if (pages && pages.length) {
+						let currentPath = "/" + pages[pages.length - 1].route;
+						if (list.length) {
+							for (let i in list) {
+								if (currentPath == list[i].path) {
+									isShow = true
+									// #ifdef MP-WEIXIN
+									wx.hideHomeButton();
+									// #endif
+								}
+							}
+						}
+					}
+					if (!isShow) list = []
+					return list
+				},
+			})
+		},
+		mounted() {
+			let pages = getCurrentPages();
+			this.currentPath = "/" + pages[pages.length - 1].route;
+		},
+		methods: {
+			// 跳转底部导航
+			tabBarPages(index) {
+				const item = this.tabBarList[index]
+				if (item.jump_type == 1) {
+					// 图文
+					if (item.path == this.currentPath) return
+					uni.navigateTo({
+						url: "/pages/webview/imageText?type=2&id=" + item.id
+					})
+				} else if (item.jump_type == 2) {
+					// 内部页面
+					if (item.path == this.currentPath) return
+					this.$util.toPage({
+						path: item.path,
+						mode: 3
+					})
+				} else if (item.jump_type == 3) {
+					// 外部链接
+					this.$util.toPage({
+						path: item.path,
+						mode: 4,
+					})
+				} else if (item.jump_type == 4) {
+					// 小程序
+					this.$util.toPage({
+						appId: JSON.parse(item.path).appid,
+						path: JSON.parse(item.path).path,
+						mode: 5,
+					})
+				}
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.component-tab-bar {
+		width: 100%;
+		height: 126rpx;
+
+		.tab-bar-main {
+			background: #fff;
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			z-index: 998;
+			padding-bottom: constant(safe-area-inset-bottom);
+			padding-bottom: env(safe-area-inset-bottom);
+			display: flex;
+			justify-content: space-around;
+			border-top: 2rpx solid #F6F7FB;
+
+			.main-item {
+				flex: 1;
+				height: 124rpx;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+
+				.item-img {
+					width: 56rpx;
+					height: 56rpx;
+					margin: 0 auto;
+				}
+
+				.item-text {
+					font-size: 24rpx;
+					color: #333;
+					margin-top: 4rpx;
+					text-align: center;
+
+					&.active {
+						color: var(--theme-color);
+					}
+				}
+			}
+		}
+	}
+</style>

pages/component/title-bar/title-bar.vue

@@ -0,0 +1,176 @@
+<!-- 组件-标题栏 开发者: 麦沃德科技半夏 -->
+<template>
+	<!-- #ifdef MP-WEIXIN -->
+	<view class="component-title-bar" :style="{background: backgroundColor, position: positionMode}">
+		<view class="title-bar-status" :style="{height: statusBarHeight + 'px'}"></view>
+		<view class="title-bar-main" :style="{height: titleBarHeight + 'px'}">
+			<view class="main-back" v-if="showBack || !isHideBtn" @click="goBack()">
+				<image class="icon" src="/static/back.png" mode="aspectFit" v-if="frontColor == 'white'"></image>
+				<image class="icon" src="/static/back_b.png" mode="aspectFit" v-else></image>
+			</view>
+			<view class="main-title">
+				<view class="title text-ellipsis" :style="{color: frontColor, fontSize: titleFontSize + 'px'}">{{title}}</view>
+			</view>
+		</view>
+		<view class="title-bar-border" v-if="backgroundColor == '#fff'"></view>
+	</view>
+	<!-- #endif -->
+	<!-- #ifdef H5 -->
+	<view></view>
+	<!-- #endif -->
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	export default {
+		name: 'titleBar',
+		props: {
+			// 组件标题
+			title: {
+				type: String,
+				default: ""
+			},
+			// 组件背景色
+			backgroundColor: {
+				type: String,
+				default: "#fff"
+			},
+			// 组件文字颜色
+			frontColor: {
+				type: String,
+				default: "black"
+			},
+			// 是否总是显示返回按钮
+			showBack: {
+				type: Boolean,
+				default: false
+			},
+			// 定位模式
+			positionMode: {
+				type: String,
+				default: "sticky"
+			},
+		},
+		data() {
+			return {
+				// 状态栏高度
+				statusBarHeight: 0,
+				// 标题栏高度
+				titleBarHeight: 0,
+				// 标题文字尺寸
+				titleFontSize: 16,
+			}
+		},
+		computed: {
+			...mapState({
+				isHideBtn: state => {
+					let list = state.app.tabBarList
+					let pages = getCurrentPages();
+					let isHide = false
+					if (pages && pages.length) {
+						let currentPath = "/" + pages[pages.length - 1].route;
+						if (list.length) {
+							for (let i in list) {
+								if (currentPath == list[i].path) {
+									isHide = true
+								}
+							}
+						}
+					}
+					return isHide
+				},
+			})
+		},
+		mounted() {
+			// #ifdef MP-WEIXIN
+			let systemInfo = uni.getSystemInfoSync()
+			this.titleFontSize = systemInfo.fontSizeSetting || 16
+			this.statusBarHeight = systemInfo.statusBarHeight
+			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
+			this.titleBarHeight = (menuButtonInfo.top - this.statusBarHeight) * 2 + menuButtonInfo.height
+			// #endif
+		},
+		watch: {
+			title: {
+				handler(value) {
+					// #ifndef MP-WEIXIN
+					if (value) {
+						uni.setNavigationBarTitle({
+							title: value
+						});
+					}
+					// #endif
+				},
+				immediate: true,
+				deep: true
+			}
+		},
+		methods: {
+			// 返回上一页
+			goBack() {
+				if (getCurrentPages().length == 1) {
+					uni.switchTab({
+						url: "/pages/index/index"
+					})
+				} else {
+					uni.navigateBack()
+				}
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.component-title-bar {
+		position: sticky;
+		top: 0;
+		z-index: 998;
+		background: #fff;
+		width: 100%;
+
+		.title-bar-status {
+			width: 100%;
+		}
+
+		.title-bar-main {
+			display: flex;
+			align-items: center;
+			height: 0;
+			overflow: hidden;
+			padding: 0 25%;
+
+			.main-back {
+				width: 32rpx;
+				height: 32rpx;
+				position: absolute;
+				left: 32rpx;
+
+				.icon {
+					position: absolute;
+					top: 0;
+					left: 0;
+				}
+			}
+
+			.main-title {
+				position: relative;
+				width: 100%;
+				flex: 1;
+
+				.title {
+					color: #000000;
+					text-align: center;
+					font-size: 32rpx;
+					line-height: 44rpx;
+				}
+			}
+		}
+
+		.title-bar-border {
+			width: 100%;
+			height: 1rpx;
+			background: #F6F7FB;
+			margin-top: -1rpx;
+		}
+	}
+</style>

pages/demand/index.vue

@@ -0,0 +1,401 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| 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" :style="{top: titleBarHeight + 'px'}">
+				<view class="header-search flex align-items-center">
+					<view class="search-input flex-item flex align-items-center" @click="toSearch()">
+						<image class="icon" src="/static/search.png" mode="aspectFit"></image>
+						<view class="text">请输入关键词搜索</view>
+					</view>
+					<view class="search-btn flex align-items-center" @click="toPublish()">
+						<view class="icon" :style="{'background-image': 'url('+ iconRelease +')'}" v-if="iconRelease"></view>
+						<view class="text">发布</view>
+					</view>
+				</view>
+				<scroll-view scroll-x class="header-screen">
+					<view class="screen-item" :class="{active: selectScreen == 0}" @click="screenChange(0)">
+						<text class="item-text">全部</text>
+					</view>
+					<view class="screen-item" :class="{active: selectScreen == item.id}" v-for="item in demandScreen" :key="item.id" @click="screenChange(item.id)">
+						<text class="item-text">{{ item.name }}</text>
+					</view>
+				</scroll-view>
+			</view>
+			<view class="main-content">
+				<demand-item :show-data="demandList" @setShareData="setShareData" v-if="demandList.length"></demand-item>
+				<empty top="30%" title="暂无相关内容~" v-else></empty>
+			</view>
+		</view>
+		<!-- 未登录状态 -->
+		<view class="container-login" v-if="!loadEnd && showLogin">
+			<image class="login-image" :src="loginImg" mode="aspectFit"></image>
+			<view class="login-tips">小程序需要登录注册才能使用相关功能，请登录后查看该页面</view>
+			<view class="login-btn" :style="{ background: themeColor }" @click="toLogin()">前往登录</view>
+		</view>
+		<!-- 底部导航 -->
+		<tab-bar></tab-bar>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	import demandItem from "@/pages/component/demand/index.vue"
+	import svgData from "@/common/svg.js"
+	// #ifdef H5
+	import wx from 'weixin-js-sdk';
+	// #endif
+	export default {
+		components: {
+			demandItem,
+		},
+		data() {
+			return {
+				// 加载完成
+				loadEnd: false,
+				// 标题栏高度
+				titleBarHeight: 0,
+				// 分类查询参数
+				page: 1,
+				limit: 20,
+				hasMore: false,
+				// 供需筛选
+				demandScreen: [],
+				// 已选筛选
+				selectScreen: 0,
+				// 供需列表
+				demandList: [],
+				// 分享数据
+				shareData: {},
+				// 是否显示登录提示
+				showLogin: false,
+			}
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+				iconRelease: state => {
+					return svgData.svgToUrl("release", state.app.themeColor)
+				},
+				shareImage: state => state.app.shareImage,
+				shareTitle: state => state.app.shareTitle,
+				loginImg: state => state.app.loginImg,
+			})
+		},
+		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.getDemandScreen()
+			this.getDemandList(() => {
+				uni.hideLoading()
+				this.loadEnd = true
+			})
+			// #ifdef H5
+			this.initConfig()
+			// #endif
+		},
+		onShow() {
+			if (this.loadEnd) {
+				this.page = 1
+				this.getDemandList()
+			}
+		},
+		onPullDownRefresh() {
+			this.page = 1
+			this.getDemandList(() => {
+				uni.stopPullDownRefresh();
+			})
+		},
+		onReachBottom() {
+			if (this.hasMore) {
+				this.page++
+				this.getDemandList();
+			}
+		},
+		onShareAppMessage(res) {
+			if (res.from == "button") {
+				return {
+					title: this.shareData.title,
+					path: this.shareData.path,
+					imageUrl: this.shareData.imageUrl || this.shareImage,
+				}
+			} else if (res.from == "menu") {
+				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
+			// 获取商圈分类
+			getDemandScreen() {
+				this.$util.request("demand.businessCat").then(res => {
+					if (res.code == 1) {
+						this.demandScreen = res.data;
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取商圈分类', error)
+				})
+			},
+			// 获取供需列表 
+			getDemandList(fn) {
+				this.$util.request("demand.businessIndexList", {
+					category_id: this.selectScreen,
+					page: this.page,
+					limit: this.limit
+				}).then(res => {
+					if (fn) fn()
+					if (res.code == 1) {
+						let list = res.data.data || []
+						list.forEach((el) => {
+							el.images = this.splitImages(el.images)
+							if (el.createtime) el.time = this.$util.getDateBeforeNow(el.createtime)
+						});
+						this.hasMore = this.page < res.data.total / this.limit ? true : false
+						this.demandList = this.page == 1 ? list : [...this.demandList, ...list];
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					if (error == 401) {
+						this.showLogin = true
+					} else {
+						if (fn) fn()
+						console.error('获取供需列表', error)
+					}
+				})
+			},
+			// 字符串转数组格式图片
+			splitImages(images) {
+				try {
+					if (images) return images.split(',');
+					else return []
+				} catch (error) {
+					return [];
+				}
+			},
+			// 发布供需
+			toPublish() {
+				this.$util.toPage({
+					mode: 1,
+					path: "/pagesDemand/demand/edit"
+				})
+			},
+			// 顶部导航筛选
+			screenChange(id) {
+				if (this.selectScreen == id) {
+					return
+				}
+				this.selectScreen = id
+				this.page = 1
+				this.getDemandList()
+			},
+			// 去搜索
+			toSearch() {
+				this.$util.toPage({
+					mode: 1,
+					path: "/pages/demand/search/index"
+				})
+			},
+			// 前往登录
+			toLogin() {
+				uni.redirectTo({
+					url: "/pages/demand/index",
+				})
+			},
+			// 设置分享数据
+			setShareData(data) {
+				this.shareData = data
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.container {
+		.container-main {
+			.main-header {
+				position: sticky;
+				top: 0;
+				z-index: 99;
+				background: #fff;
+
+				.header-search {
+					padding: 16rpx 32rpx;
+
+					.search-input {
+						padding: 20rpx 32rpx;
+						border-radius: 10rpx;
+						background: #F9F9F9;
+
+						.icon {
+							width: 40rpx;
+							height: 40rpx;
+						}
+
+						.text {
+							margin-left: 16rpx;
+							font-size: 32rpx;
+							color: #BBB;
+							font-size: 28rpx;
+							line-height: 40rpx;
+						}
+					}
+
+					.search-btn {
+						margin-left: 32rpx;
+
+						.icon {
+							width: 40rpx;
+							height: 40rpx;
+							background-size: 40rpx;
+						}
+
+						.text {
+							margin-left: 8rpx;
+							color: var(--theme-color);
+							font-size: 28rpx;
+							line-height: 40rpx;
+						}
+					}
+				}
+
+				.header-screen {
+					white-space: nowrap;
+
+					.screen-item {
+						display: inline-block;
+						padding: 0 24rpx;
+						min-width: 152rpx;
+						text-align: center;
+
+						.item-text {
+							color: #333333;
+							font-size: 28rpx;
+							line-height: 40rpx;
+							display: inline-block;
+							padding: 36rpx 0 32rpx;
+							border-bottom: 4rpx solid transparent;
+						}
+
+						&.active .item-text {
+							color: var(--theme-color);
+							font-weight: 600;
+							border-color: var(--theme-color);
+						}
+					}
+				}
+			}
+
+			.main-content {
+				padding: 32rpx;
+			}
+		}
+
+		.container-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/demand/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('demandHistory')
+		},
+		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/demand/index"
+					})
+				} else {
+					uni.navigateBack()
+				}
+			},
+			// 删除历史记录
+			clearRecords() {
+				uni.showModal({
+					title: "提示",
+					content: "是否删除全部历史记录？",
+					confirmText: "删除",
+					confirmColor: this.themeColor,
+					success: (res) => {
+						if (res.confirm) {
+							uni.removeStorageSync('demandHistory')
+							this.recordList = []
+						}
+					}
+				})
+			},
+			// 提交搜索
+			confirmSearch(e) {
+				this.doSearch(e.detail.value)
+			},
+			// 搜索
+			doSearch(keyword) {
+				if (!keyword) {
+					uni.showToast({
+						title: '请输入要搜索的内容',
+						icon: 'none'
+					})
+					return
+				}
+				var demandHistory = uni.getStorageSync('demandHistory') || []
+				if (!demandHistory.includes(keyword)) {
+					demandHistory.push(keyword)
+					uni.setStorageSync('demandHistory', demandHistory)
+				}
+				this.$util.toPage({
+					mode: 1,
+					path: `/pages/demand/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/demand/search/result.vue

@@ -0,0 +1,239 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| 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">
+			<demand-item :show-data="demandList" @setShareData="setShareData" v-if="demandList.length"></demand-item>
+			<empty top="30%" title="暂无相关内容~" v-else></empty>
+		</view>
+		<!-- 未登录状态 -->
+		<view class="container-login" v-else-if="showLogin">
+			<image class="login-image" :src="loginImg" mode="aspectFit"></image>
+			<view class="login-tips">小程序需要登录注册才能使用相关功能，请登录后查看该页面</view>
+			<view class="login-btn" :style="{ background: themeColor }" @click="toLogin()">前往登录</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	import demandItem from "@/pages/component/demand/index.vue"
+	// #ifdef H5
+	import wx from 'weixin-js-sdk';
+	// #endif
+	export default {
+		components: {
+			demandItem,
+		},
+		data() {
+			return {
+				// 加载完成
+				loadEnd: false,
+				// 搜索关键词
+				keywords: '',
+				// 分页参数
+				page: 1,
+				limit: 20,
+				hasMore: false,
+				// 供需列表
+				demandList: [],
+				// 分享数据
+				shareData: {},
+				// 是否显示登录提示
+				showLogin: false,
+			}
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+				shareImage: state => state.app.shareImage,
+				shareTitle: state => state.app.shareTitle,
+				loginImg: state => state.app.loginImg,
+			})
+		},
+		onLoad(option) {
+			uni.showLoading({
+				title: "加载中"
+			})
+			this.keywords = decodeURIComponent(option.keyword)
+			this.getDemandList(() => {
+				uni.hideLoading()
+				this.loadEnd = true
+			})
+			// #ifdef H5
+			this.initConfig()
+			// #endif
+		},
+		onReachBottom() {
+			if (this.hasMore) {
+				this.page++
+				this.getDemandList();
+			}
+		},
+		onShareAppMessage(res) {
+			if (res.from == "button") {
+				return {
+					title: this.shareData.title,
+					path: this.shareData.path,
+					imageUrl: this.shareData.imageUrl || this.shareImage,
+				}
+			} else if (res.from == "menu") {
+				return {
+					title: this.shareTitle,
+					imageUrl: this.shareImage,
+					path: "/pages/demand/index"
+				}
+			}
+		},
+		onShareTimeline() {
+			return {
+				title: this.shareTitle,
+				imageUrl: this.shareImage,
+				path: "/pages/demand/index"
+			}
+		},
+		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
+			// 获取供需列表
+			getDemandList(fn) {
+				this.$util.request("demand.businessIndexList", {
+					title: this.keywords,
+					page: this.page,
+					limit: this.limit
+				}).then(res => {
+					if (fn) fn()
+					if (res.code == 1) {
+						let list = res.data.data || []
+						list.forEach((el) => {
+							el.images = this.splitImages(el.images)
+							if (el.createtime) el.time = this.$util.getDateBeforeNow(el.createtime)
+						});
+						this.hasMore = this.page < res.data.total / this.limit ? true : false
+						this.demandList = this.page == 1 ? list : [...this.demandList, ...list];
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					if (error == 401) {
+						this.showLogin = true
+					} else {
+						if (fn) fn()
+						console.error('获取供需列表', error)
+					}
+				})
+			},
+			// 字符串转数组格式图片
+			splitImages(images) {
+				try {
+					if (images) return images.split(',');
+					else return []
+				} catch (error) {
+					return [];
+				}
+			},
+			// 前往登录
+			toLogin() {
+				uni.redirectTo({
+					url: `/pages/demand/search/result?keyword=${encodeURIComponent(this.keywords)}`,
+				})
+			},
+			// 设置分享数据
+			setShareData(data) {
+				this.shareData = data
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.container {
+		.container-main {
+			padding: 32rpx;
+		}
+
+		.container-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/diy/index.vue

@@ -0,0 +1,250 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 首页 开发者: 麦沃德科技-半夏  
++---------------------------------------------------------------------- -->
+
+<template>
+	<view v-if="loadEnd">
+		<view class="container" :style="{backgroundColor: diyData.page.style.backgroundColor || ''}" v-if="diyData && diyData.page && diyData.page.style">
+			<title-bar class="container-header" :frontColor="diyData.page.style.titleTextColor" :backgroundColor="diyData.page.style.titleBackgroundColor || ''" :title="diyData.page.params.title || ''"></title-bar>
+			<image class="container-background" :src="getImagePath(diyData.page.style.backgroundImage)" mode="aspectFill" v-if="diyData.page.style.backgroundImage"></image>
+			<view class="container-main">
+				<diy-mode ref="diyMode" :show-data="diyData" :spaceHeight="spaceHeight" @setShareData="setShareData"></diy-mode>
+			</view>
+			<view class="container-footer safe-padding">
+				<tab-bar></tab-bar>
+			</view>
+		</view>
+		<view class="container" v-else>
+			<view class="container-header">
+				<title-bar></title-bar>
+			</view>
+			<view class="container-error">未配置首页样式，请于后台进行首页装修</view>
+			<view class="container-footer safe-padding">
+				<tab-bar></tab-bar>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	import diyMode from '@/pages/component/diy/index.vue';
+	// #ifdef H5
+	import wx from 'weixin-js-sdk';
+	// #endif
+	export default {
+		components: {
+			diyMode,
+		},
+		data() {
+			return {
+				// 加载完成
+				loadEnd: false,
+				// 页面ID
+				pageId: null,
+				// 自定义数据
+				diyData: null,
+				// 分享数据
+				shareData: {},
+				// 头部与底部高度（仅会员地图占满屏幕时使用）
+				spaceHeight: 0,
+			}
+		},
+		computed: {
+			...mapState({
+				shareImage: state => state.app.shareImage,
+				shareTitle: state => state.app.shareTitle,
+			})
+		},
+		onLoad(option) {
+			this.pageId = option.page_id;
+			// #ifdef H5
+			this.initConfig()
+			// #endif
+			uni.showLoading({
+				title: "加载中"
+			})
+			this.getDiyData(() => {
+				uni.hideLoading()
+				this.loadEnd = true
+			});
+		},
+		onShow() {
+			if (this.loadEnd) this.getDiyData()
+		},
+		onPullDownRefresh() {
+			this.getDiyData(() => {
+				uni.stopPullDownRefresh();
+			});
+		},
+		onShareAppMessage(res) {
+			if (res.from == "button") {
+				return {
+					title: this.shareData.title,
+					path: this.shareData.path,
+					imageUrl: this.shareData.imageUrl || this.shareImage,
+				}
+			} else {
+				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", "wx-open-launch-weapp"],
+							openTagList: ["updateAppMessageShareData", "updateTimelineShareData", 'wx-open-launch-weapp'],
+						})
+						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
+			// 获取自定义数据
+			getDiyData(fn) {
+				this.$util.request("main.diyData", {
+					page_id: this.pageId
+				}).then(res => {
+					if (res.code == 1) {
+						this.diyData = res.data
+						if (res.data && res.data.page) {
+							let page = res.data.page
+							// #ifdef MP-WEIXIN
+							// 设置navbar标题、颜色
+							uni.setNavigationBarColor({
+								frontColor: page.style.titleTextColor === 'white' ? '#ffffff' : '#000000',
+								backgroundColor: page.style.titleBackgroundColor || ''
+							})
+							// #endif
+							uni.setNavigationBarTitle({
+								title: page.params.title || ""
+							})
+						}
+						if (this.loadEnd) {
+							this.$refs.diyMode.updateData()
+						}
+						if (fn) fn()
+						if (res.data?.items?.length) {
+							const hasMemberMap = res.data.items.some(item => item.type == "memberMapDiy");
+							if (hasMemberMap) {
+								setTimeout(() => {
+									try {
+										const query = uni.createSelectorQuery().in(this);
+										let headerHeight, footerHeight;
+										query.select('.container-header').boundingClientRect(data => {
+											headerHeight = data?.height || 0;
+										}).select('.container-footer').boundingClientRect(data => {
+											footerHeight = data?.height || 0;
+										}).exec(() => {
+											this.spaceHeight = Number(Number(headerHeight) + Number(footerHeight))
+										});
+									} catch (error) {
+										this.spaceHeight = 0
+									}
+								}, 200);
+							}
+						}
+					} else {
+						if (fn) fn()
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					if (fn) fn()
+					console.error('获取自定义数据 ', error)
+				})
+			},
+			// 获取图片地址
+			getImagePath(url) {
+				if (url.indexOf('http') > -1) {
+					return url
+				} else {
+					return this.diyData.domain + url
+				}
+			},
+			// 设置分享数据
+			setShareData(data) {
+				this.shareData = data
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		padding: 0;
+	}
+
+	.container {
+		position: relative;
+		z-index: 9;
+		min-height: 100vh;
+
+		.container-background {
+			position: fixed;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			z-index: -1;
+		}
+
+		.container-error {
+			padding: 64rpx 32rpx;
+			font-size: 32rpx;
+			line-height: 48rpx;
+			color: #5A5B6E;
+			text-align: center;
+		}
+	}
+</style>

pages/diy/richText.vue

@@ -0,0 +1,125 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.maiwd.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 富文本 开发者: 麦沃德科技半夏
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="container">
+		<!-- 标题栏 -->
+		<title-bar :title="navigationBarTitle"></title-bar>
+		<!-- 内容区 -->
+		<view class="container-main" v-if="loadEnd">
+			<mp-html :content="editorContent" />
+		</view>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	// #ifdef H5
+	import wx from 'weixin-js-sdk';
+	// #endif
+	export default {
+		data() {
+			return {
+				// 页面标题
+				navigationBarTitle: "详情",
+				// 加载完成
+				loadEnd: false,
+			};
+		},
+		computed: {
+			...mapState({
+				shareInfo: state => state.app.shareInfo,
+				editorContent: state => state.app.editorContent,
+			})
+		},
+		onLoad(option) {
+			this.navigationBarTitle = option.name ? decodeURIComponent(option.name) : "详情"
+			this.$nextTick(() => {
+				this.loadEnd = true
+			})
+			// #ifdef H5
+			this.initConfig()
+			// #endif
+		},
+		onShareAppMessage() {
+			return {
+				title: this.shareInfo.title,
+				imageUrl: this.shareInfo.image,
+			}
+		},
+		onShareTimeline() {
+			return {
+				title: this.shareInfo.title,
+				imageUrl: this.shareInfo.image,
+			}
+		},
+		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
+		},
+	}
+</script>
+
+<style lang="scss">
+	page {
+		background: #fff;
+	}
+
+	.container {
+		.container-main {
+			padding: 32rpx;
+			font-size: 32rpx;
+			line-height: 60rpx;
+			color: #666;
+		}
+	}
+</style>

pages/diy/search.vue

@@ -0,0 +1,331 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| 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-column" v-if="memberList.length">
+				<view class="column-title">会员列表</view>
+				<member-item :show-data="memberList"></member-item>
+				<view class="column-more" v-if="parseInt(memberTotal) > parseInt(firstLimit) && memberList.length < parseInt(memberTotal)" @click="memberLoadMore()">
+					<view class="more-bg"></view>
+					<view class="more-text">加载更多</view>
+				</view>
+			</view>
+			<view class="main-column" v-if="unitsList.length">
+				<view class="column-title">会员单位列表</view>
+				<member-units :show-data="unitsList"></member-units>
+				<view class="column-more" v-if="parseInt(unitsTotal) > parseInt(firstLimit) && unitsList.length < parseInt(unitsTotal)" @click="unitsLoadMore()">
+					<view class="more-bg"></view>
+					<view class="more-text">加载更多</view>
+				</view>
+			</view>
+			<view class="main-column" v-if="activityList.length">
+				<view class="column-title">活动列表</view>
+				<activity-item :show-data="activityList"></activity-item>
+				<view class="column-more" v-if="parseInt(activityTotal) > parseInt(firstLimit) && activityList.length < parseInt(activityTotal)" @click="activityLoadMore()">
+					<view class="more-bg"></view>
+					<view class="more-text">加载更多</view>
+				</view>
+			</view>
+			<view class="main-column" v-if="articleList.length">
+				<view class="column-title">资讯列表</view>
+				<article-item :show-data="articleList"></article-item>
+				<view class="column-more" v-if="parseInt(articleTotal) > parseInt(firstLimit) && articleList.length < parseInt(articleTotal)" @click="articleLoadMore()">
+					<view class="more-bg"></view>
+					<view class="more-text">加载更多</view>
+				</view>
+			</view>
+			<view class="main-column" v-if="goodsList.length">
+				<view class="column-title">商品列表</view>
+				<goods-item :show-data="goodsList"></goods-item>
+				<view class="column-more" v-if="parseInt(goodsTotal) > parseInt(firstLimit) && goodsList.length < parseInt(goodsTotal)" @click="goodsLoadMore()">
+					<view class="more-bg"></view>
+					<view class="more-text">加载更多</view>
+				</view>
+			</view>
+			<empty top="30%" title="暂无相关内容~" v-if="!memberList.length && !unitsList.length && !activityList.length && !articleList.length && !goodsList.length"></empty>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	import memberItem from "@/pages/component/member/index.vue"
+	import memberUnits from "@/pages/component/member/units.vue"
+	import activityItem from "@/pages/component/activity/index.vue"
+	import articleItem from "@/pages/component/article/index.vue"
+	import goodsItem from '@/pages/component/mall/goods.vue'
+	export default {
+		components: {
+			memberItem,
+			memberUnits,
+			activityItem,
+			articleItem,
+			goodsItem,
+		},
+		data() {
+			return {
+				// 加载完成
+				loadEnd: false,
+				// 搜索关键词
+				keyword: "",
+				// 首次搜索数量限制
+				firstLimit: 5,
+				// 会员查询参数
+				memberList: [],
+				memberPage: 0,
+				memberLimit: 50,
+				memberTotal: 0,
+				// 会员单位查询参数
+				unitsList: [],
+				unitsPage: 0,
+				unitsLimit: 50,
+				unitsTotal: 0,
+				// 活动查询参数
+				activityList: [],
+				activityPage: 0,
+				activityLimit: 50,
+				activityTotal: 0,
+				// 新闻查询参数
+				articleList: [],
+				articlePage: 0,
+				articleLimit: 50,
+				articleTotal: 0,
+				// 商品查询参数
+				goodsList: [],
+				goodsPage: 0,
+				goodsLimit: 50,
+				goodsTotal: 0,
+				// 是否授权位置信息
+				isLocation: false,
+			}
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+				memberTypeConfig: state => state.app.memberTypeConfig,
+			})
+		},
+		onLoad(option) {
+			this.keyword = decodeURIComponent(option.keyword)
+			uni.showLoading({
+				title: "加载中"
+			})
+			this.getSearchData(() => {
+				uni.hideLoading()
+				this.loadEnd = true
+			})
+		},
+		methods: {
+			// 获取搜索数据
+			getSearchData(fn) {
+				this.$util.request("main.diySearch", {
+					keywords: this.keyword,
+					limit: this.firstLimit,
+				}).then(res => {
+					if (fn) fn()
+					if (res.code == 1) {
+						this.memberList = res.data?.member_data?.data || []
+						this.memberTotal = res.data?.member_data?.total || 0
+						this.unitsList = res.data?.unit_data?.data || []
+						this.unitsTotal = res.data?.unit_data?.total || 0
+						this.activityList = res.data?.activity_data?.data || []
+						this.activityTotal = res.data?.activity_data?.total || 0
+						this.articleList = res.data?.article_data?.data || []
+						this.articleTotal = res.data?.article_data?.total || 0
+						this.goodsList = res.data?.goods_data?.data || []
+						this.goodsTotal = res.data?.goods_data?.total || 0
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取自定义搜索数据 ', error)
+				})
+			},
+			// 会员加载更多数据
+			memberLoadMore() {
+				if (this.memberList.length >= parseInt(this.memberTotal)) return
+				this.memberPage++
+				this.$util.request("member.diySearchList", {
+					page: this.memberPage,
+					limit: this.memberLimit,
+					keywords: this.keyword,
+				}).then(res => {
+					if (res.code == 1) {
+						let list = res.data.data
+						this.memberTotal = res.data.total
+						this.memberList = this.memberPage == 1 ? list : [...this.memberList, ...list];
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取自定义搜索会员列表 ', error)
+				})
+			},
+			// 会员单位加载更多数据
+			unitsLoadMore() {
+				if (this.unitsList.length >= parseInt(this.unitsTotal)) return
+				this.unitsPage++
+				this.$util.request("member.units", {
+					page: this.unitsPage,
+					limit: this.unitsLimit,
+					keywords: this.keyword,
+				}).then(res => {
+					if (res.code == 1) {
+						let list = res.data.data
+						this.unitsTotal = res.data.total
+						this.unitsList = this.unitsPage == 1 ? list : [...this.unitsList, ...list];
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取自定义搜索会员单位列表 ', error)
+				})
+			},
+			// 活动加载更多数据
+			activityLoadMore() {
+				if (this.activityList.length >= parseInt(this.activityTotal)) return
+				this.activityPage++
+				this.$util.request("activity.list", {
+					page: this.activityPage,
+					limit: this.activityLimit,
+					keywords: this.keyword,
+				}).then(res => {
+					if (res.code == 1) {
+						let list = res.data.data
+						this.activityTotal = res.data.total
+						this.activityList = this.activityPage == 1 ? list : [...this.activityList, ...list];
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取自定义搜索活动列表 ', error)
+				})
+			},
+			// 资讯加载更多数据
+			articleLoadMore() {
+				if (this.articleList.length >= parseInt(this.articleTotal)) return
+				this.articlePage++
+				this.$util.request("main.article.list", {
+					page: this.articlePage,
+					limit: this.articleLimit,
+					keywords: this.keyword,
+				}).then(res => {
+					if (res.code == 1) {
+						let list = res.data.data
+						this.articleTotal = res.data.total
+						this.articleList = this.articlePage == 1 ? list : [...this.articleList, ...list];
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取自定义搜索资讯列表 ', error)
+				})
+			},
+			// 商品加载更多数据
+			goodsLoadMore() {
+				if (this.goodsList.length >= parseInt(this.goodsTotal)) return
+				this.goodsPage++
+				this.$util.request("mall.goodsList", {
+					page: this.goodsPage,
+					limit: this.goodsLimit,
+					keywords: this.keyword,
+				}).then(res => {
+					if (res.code == 1) {
+						let list = res.data.data
+						this.goodsTotal = res.data.total
+						this.goodsList = this.goodsPage == 1 ? list : [...this.goodsList, ...list];
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取自定义搜索商品列表 ', error)
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.container {
+		.container-main {
+			padding: 32rpx;
+
+			.main-column {
+				margin-top: 32rpx;
+
+				&:first-child {
+					margin-top: 0;
+				}
+
+				.column-title {
+					color: #5A5B6E;
+					font-size: 32rpx;
+					font-weight: 600;
+					line-height: 44rpx;
+					margin-bottom: 32rpx;
+				}
+
+				.column-more {
+					position: relative;
+					width: 100%;
+					height: 72rpx;
+					border-radius: 16rpx;
+					overflow: hidden;
+					background: #FFF;
+					margin-top: 32rpx;
+
+					.more-bg {
+						position: absolute;
+						top: 0;
+						right: 0;
+						bottom: 0;
+						left: 0;
+						background: var(--theme-color);
+						opacity: .1;
+					}
+
+					.more-text {
+						position: relative;
+						z-index: 1;
+						color: var(--theme-color);
+						font-size: 12px;
+						line-height: 72rpx;
+						text-align: center;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/error/browser.vue

@@ -0,0 +1,54 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| 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">
+			<image class="main-icon" src="/static/error.png" mode="widthFix"></image>
+			<view class="main-tips flex-direction-column align-items-center">
+				<text>该网页仅支持微信浏览器</text>
+				<text>请使用微信浏览器打开</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<style lang="scss">
+	page {
+		background: #ffffff;
+	}
+
+	.container {
+		.container-main {
+			padding: 144rpx 32rpx 32rpx;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+
+			.main-icon {
+				width: 45vw;
+				height: auto;
+			}
+
+			.main-tips {
+				margin-top: 32rpx;
+				color: #5A5B6E;
+				font-size: 32rpx;
+				font-weight: 600;
+				line-height: 44rpx;
+			}
+		}
+	}
+</style>

pages/error/error.vue

@@ -0,0 +1,78 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| 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">
+			<image class="main-icon" src="/static/error.png" mode="widthFix"></image>
+			<view class="main-tips flex-direction-column align-items-center">
+				<text>系统更新维护中</text>
+				<text>将在完成更新后尽快恢复服务</text>
+			</view>
+			<!-- #ifdef MP-WEIXIN -->
+			<button class="main-btn" :style="{background: themeColor}" open-type="contact">点击按钮，联系客服</button>
+			<!-- #endif -->
+		</view>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	export default {
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+			})
+		},
+	}
+</script>
+
+<style lang="scss">
+	page {
+		background: #ffffff;
+	}
+
+	.container {
+		.container-main {
+			padding: 144rpx 32rpx 32rpx;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+
+			.main-icon {
+				width: 45vw;
+				height: auto;
+			}
+
+			.main-tips {
+				margin-top: 32rpx;
+				color: #5A5B6E;
+				font-size: 32rpx;
+				font-weight: 600;
+				line-height: 44rpx;
+			}
+
+			.main-btn {
+				margin-top: 40rpx;
+				color: #ffffff;
+				font-size: 28rpx;
+				line-height: 40rpx;
+				padding: 16rpx 32rpx;
+				border-radius: 8rpx;
+				background: #325DFF;
+			}
+		}
+	}
+</style>

pages/index/association.vue

@@ -0,0 +1,364 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| 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="pageTitle"></title-bar>
+		<!-- 内容区 -->
+		<view class="container-main" :style="{minHeight: `calc(100vh - ${titleBarHeight}px)`}">
+			<!-- 顶部导航 -->
+			<view class="main-menu flex" :style="{top: titleBarHeight + 'px'}" v-if="loadEnd">
+				<view class="menu-item flex-item flex justify-content-center" v-for="item in menuList" :key="item.id" @click="changeMenu(item.id, item.name)">
+					<view class="text" :class="{active: selectMenu == item.id}">{{item.name}}</view>
+				</view>
+			</view>
+			<!-- 内容区 -->
+			<view class="main-box" v-if="loadEnd">
+				<!-- 商会介绍 -->
+				<view class="box-content" v-if="selectMenu == 1">
+					<mp-html :content="associationInfo.course"></mp-html>
+				</view>
+				<!-- 商会荣誉 -->
+				<view class="box-content" v-else-if="selectMenu == 2">
+					<mp-html :content="associationInfo.honor"></mp-html>
+				</view>
+				<!-- 商会章程 -->
+				<view class="box-content" v-else-if="selectMenu == 3">
+					<mp-html :content="associationInfo.rules"></mp-html>
+				</view>
+				<!-- 联系我们 -->
+				<view class="box-contact" v-else-if="selectMenu == 4">
+					<view class="contact-item" @click="onContact(1)">
+						<view class="item-info">
+							<view class="info-title">{{organize}}电话</view>
+							<view class="info-subtitle">{{associationInfo.contacts}} {{associationInfo.phone}}</view>
+						</view>
+						<view class="item-icon">
+							<image src="/static/contact/phone.png" mode="aspectFit"></image>
+						</view>
+					</view>
+					<view class="contact-item" @click="onContact(2)">
+						<view class="item-info">
+							<view class="info-title">{{organize}}地址</view>
+							<view class="info-subtitle">{{associationInfo.address}}</view>
+						</view>
+						<view class="item-icon">
+							<image src="/static/contact/location.png" mode="aspectFit"></image>
+						</view>
+					</view>
+					<view class="contact-item" @click="onContact(3)">
+						<view class="item-info">
+							<view class="info-title">{{organize}}邮箱</view>
+							<view class="info-subtitle">{{associationInfo.mailbox}}</view>
+						</view>
+						<view class="item-icon">
+							<image src="/static/contact/email.png" mode="aspectFit"></image>
+						</view>
+					</view>
+					<image class="contact-official" :src="associationInfo.wananchi_qr_code" mode="widthFix" :show-menu-by-longpress="true" @click="onContact(4)"></image>
+				</view>
+				<!-- 苹果手机底部适配 -->
+				<view class="safe-padding" :style="selectMenu != 4 ? 'background: #ffffff;' : ''"></view>
+			</view>
+		</view>
+		<!-- 底部导航 -->
+		<tab-bar></tab-bar>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	// #ifdef H5
+	import wx from 'weixin-js-sdk';
+	// #endif
+	export default {
+		data() {
+			return {
+				// 加载完成
+				loadEnd: false,
+				// 标题栏高度
+				titleBarHeight: 0,
+				// 页面标题
+				pageTitle: "",
+				// 已选菜单
+				selectMenu: 1,
+				// 商会介绍
+				associationInfo: {},
+			}
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+				organize: state => state.app.organize,
+				menuList: state => {
+					return [{
+							id: 1,
+							name: state.app.organize + "介绍"
+						},
+						{
+							id: 2,
+							name: state.app.organize + "荣誉"
+						},
+						{
+							id: 3,
+							name: state.app.organize + "章程"
+						},
+						{
+							id: 4,
+							name: "联系我们"
+						},
+					]
+				},
+			})
+		},
+		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.getIntroduce(() => {
+				this.loadEnd = true
+				uni.hideLoading()
+				// #ifdef H5
+				this.initConfig()
+				// #endif
+			})
+		},
+		onReady() {
+			this.pageTitle = this.organize + "介绍"
+		},
+		onShareAppMessage() {
+			return {
+				title: this.associationInfo.name,
+				imageUrl: this.associationInfo.logo,
+			}
+		},
+		onShareTimeline() {
+			return {
+				title: this.associationInfo.name,
+				imageUrl: this.associationInfo.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", "wx-open-launch-weapp"],
+							openTagList: ["updateAppMessageShareData", "updateTimelineShareData", 'wx-open-launch-weapp'],
+						})
+						wx.ready(() => {
+							wx.updateAppMessageShareData({
+								title: this.associationInfo.name,
+								desc: "",
+								link: window.location.href,
+								imgUrl: this.associationInfo.logo,
+							});
+							wx.updateTimelineShareData({
+								title: this.associationInfo.name,
+								link: window.location.href,
+								imgUrl: this.associationInfo.logo,
+							});
+						});
+					} else {
+						uni.hideLoading()
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					uni.hideLoading()
+					console.error('通过config接口注入权限验证配置 ', error)
+				})
+			},
+			// #endif
+			// 获取商会介绍
+			getIntroduce(fn) {
+				this.$util.request("main.association").then(res => {
+					if (fn) fn()
+					if (res.code == 1) {
+						this.associationInfo = res.data
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					if (fn) fn()
+					console.error('获取商会介绍 ', error)
+				})
+			},
+			// 改变菜单
+			changeMenu(id, name) {
+				this.selectMenu = id
+				this.pageTitle = name
+			},
+			// 联系我们
+			onContact(id) {
+				let info = {}
+				if (id == 1) {
+					info = {
+						mode: 6,
+						phone: this.associationInfo.phone,
+					}
+				} else if (id == 2) {
+					info = {
+						mode: 7,
+						address: {
+							latitude: this.associationInfo.lat,
+							longitude: this.associationInfo.lng,
+							address: this.associationInfo.address,
+						},
+					}
+				} else if (id == 3) {
+					info = {
+						mode: 8,
+						content: this.associationInfo.mailbox,
+					}
+				} else if (id == 4) {
+					if (this.associationInfo.qr_code_jump_link) {
+						info = {
+							mode: 4,
+							path: this.associationInfo.qr_code_jump_link,
+						}
+					} else return
+				}
+				this.$util.toPage(info)
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		padding-bottom: 0;
+	}
+
+	.container {
+		.container-main {
+			display: flex;
+			flex-direction: column;
+
+			.main-menu {
+				background: #ffffff;
+				position: sticky;
+				top: 0;
+				z-index: 99;
+
+				.menu-item {
+					padding: 0 24rpx;
+
+					.text {
+						padding: 24rpx 0;
+						color: #5A5B6E;
+						font-size: 28rpx;
+						line-height: 40rpx;
+						text-align: center;
+						border-bottom: 4rpx solid transparent;
+
+						&.active {
+							color: var(--theme-color);
+							border-color: var(--theme-color);
+						}
+					}
+				}
+			}
+
+			.main-box {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+
+				.box-contact {
+					flex: 1;
+					padding: 32rpx;
+
+					.contact-item {
+						margin-top: 32rpx;
+						display: flex;
+						align-items: center;
+						border-radius: 16rpx;
+						background: #ffffff;
+						padding: 32rpx 48rpx;
+
+						&:first-child {
+							margin-top: 0;
+						}
+
+						.item-info {
+							flex: 1;
+
+							.info-title {
+								color: #5A5B6E;
+								font-size: 32rpx;
+								font-weight: 600;
+								line-height: 44rpx;
+							}
+
+							.info-subtitle {
+								margin-top: 16rpx;
+								color: #8D929C;
+								font-size: 28rpx;
+								line-height: 40rpx;
+							}
+						}
+
+						.item-icon {
+							padding: 8rpx;
+							border-radius: 50%;
+							background: var(--theme-color);
+							margin-left: 24rpx;
+
+							image {
+								width: 48rpx;
+								height: 48rpx;
+							}
+						}
+					}
+
+					.contact-official {
+						margin-top: 32rpx;
+						width: 100%;
+						height: auto;
+					}
+				}
+
+				.box-content {
+					flex: 1;
+					color: #5A5B6E;
+					font-size: 28rpx;
+					line-height: 48rpx;
+					padding: 32rpx;
+					background: #ffffff;
+				}
+			}
+		}
+	}
+</style>

pages/index/index.vue

@@ -0,0 +1,261 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 首页 开发者: 麦沃德科技-半夏  
++---------------------------------------------------------------------- -->
+
+<template>
+	<view v-if="loadEnd">
+		<view class="container" :style="{backgroundColor: diyData.page.style.backgroundColor || ''}" v-if="diyData && diyData.page && diyData.page.style">
+			<title-bar class="container-header" :frontColor="diyData.page.style.titleTextColor" :backgroundColor="diyData.page.style.titleBackgroundColor || ''" :title="diyData.page.params.title || appletName"></title-bar>
+			<image class="container-background" :src="getImagePath(diyData.page.style.backgroundImage)" mode="aspectFill" v-if="diyData.page.style.backgroundImage"></image>
+			<view class="container-main">
+				<diy-mode ref="diyMode" :show-data="diyData" :spaceHeight="spaceHeight" @setShareData="setShareData"></diy-mode>
+			</view>
+			<view class="container-footer safe-padding">
+				<tab-bar></tab-bar>
+			</view>
+		</view>
+		<view class="container" v-else>
+			<view class="container-header">
+				<title-bar :title="appletName || ''"></title-bar>
+			</view>
+			<view class="container-error">未配置首页样式，请于后台进行首页装修</view>
+			<view class="container-footer safe-padding">
+				<tab-bar></tab-bar>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	import diyMode from '@/pages/component/diy/index.vue';
+	// #ifdef H5
+	import wx from 'weixin-js-sdk';
+	// #endif
+	export default {
+		components: {
+			diyMode,
+		},
+		data() {
+			return {
+				// 加载完成
+				loadEnd: false,
+				// 自定义数据
+				diyData: null,
+				// 分享数据
+				shareData: {},
+				// 内容高度（仅会员地图占满屏幕时使用）
+				spaceHeight: 0,
+			}
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+				appletName: state => state.app.appletName,
+				shareImage: state => state.app.shareImage,
+				shareTitle: state => state.app.shareTitle,
+			})
+		},
+		async onLoad(option) {
+			await this.$onLaunched
+			// 扫码进入小程序
+			// #ifdef MP-WEIXIN
+			if (option.scene) {
+				uni.setStorageSync('parentWechatId', option.scene || "");
+			}
+			// #endif
+			// #ifdef H5
+			if (option.parent_wechat_id) {
+				uni.setStorageSync('parentWechatId', option.parent_wechat_id || "");
+			}
+			this.initConfig()
+			// #endif
+			uni.showLoading({
+				title: "加载中"
+			})
+			this.getDiyData(() => {
+				uni.hideLoading()
+				this.loadEnd = true
+			})
+		},
+		onShow() {
+			if (this.loadEnd) this.getDiyData()
+		},
+		onPullDownRefresh() {
+			this.getDiyData(() => {
+				uni.stopPullDownRefresh()
+			})
+		},
+		onShareAppMessage(res) {
+			if (res.from == "button") {
+				return {
+					title: this.shareData.title,
+					path: this.shareData.path,
+					imageUrl: this.shareData.imageUrl || this.shareImage,
+				}
+			} else {
+				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", "wx-open-launch-weapp"],
+							openTagList: ["updateAppMessageShareData", "updateTimelineShareData", 'wx-open-launch-weapp'],
+						})
+						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
+			// 获取自定义数据
+			getDiyData(fn) {
+				this.$util.request("main.diyData").then(res => {
+					if (res.code == 1) {
+						this.diyData = res.data
+						if (res.data && res.data.page) {
+							let page = res.data.page
+							// #ifdef MP-WEIXIN
+							// 设置navbar标题、颜色
+							uni.setNavigationBarColor({
+								frontColor: page.style.titleTextColor === 'white' ? '#ffffff' : '#000000',
+								backgroundColor: page.style.titleBackgroundColor || ''
+							})
+							// #endif
+							uni.setNavigationBarTitle({
+								title: page.params.title || this.appletName || ""
+							})
+						} else {
+							uni.setNavigationBarTitle({
+								title: this.appletName || ""
+							})
+						}
+						if (this.loadEnd) {
+							this.$refs.diyMode.updateData()
+						}
+						if (fn) fn()
+						if (res.data?.items?.length) {
+							const hasMemberMap = res.data.items.some(item => item.type == "memberMapDiy");
+							if (hasMemberMap) {
+								setTimeout(() => {
+									try {
+										const query = uni.createSelectorQuery().in(this);
+										let headerHeight, footerHeight;
+										query.select('.container-header').boundingClientRect(data => {
+											headerHeight = data?.height || 0;
+										}).select('.container-footer').boundingClientRect(data => {
+											footerHeight = data?.height || 0;
+										}).exec(() => {
+											this.spaceHeight = Number(Number(headerHeight) + Number(footerHeight))
+										});
+									} catch (error) {
+										this.spaceHeight = 0
+									}
+								}, 200);
+							}
+						}
+					} else {
+						if (fn) fn()
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					if (fn) fn()
+					console.error('获取自定义数据 ', error)
+				})
+			},
+			// 获取图片地址
+			getImagePath(url) {
+				if (url.indexOf('http') > -1) {
+					return url
+				} else {
+					return this.diyData.domain + url
+				}
+			},
+			// 设置分享数据
+			setShareData(data) {
+				this.shareData = data
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		padding: 0;
+	}
+
+	.container {
+		position: relative;
+		z-index: 9;
+		min-height: 100vh;
+
+		.container-background {
+			position: fixed;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			z-index: -1;
+		}
+
+		.container-error {
+			padding: 64rpx 32rpx;
+			font-size: 32rpx;
+			line-height: 48rpx;
+			color: #5A5B6E;
+			text-align: center;
+		}
+	}
+</style>

pages/login/index.vue

@@ -0,0 +1,778 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| 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">
+			<image class="main-header" :src="loginImg" mode="aspectFit" v-if="loginImg"></image>
+			<!-- #ifdef MP-WEIXIN -->
+			<view class="main-login">
+				<view class="login-title">小程序需要登录注册才能使用相关功能，申请获取以下权限</view>
+				<view class="login-subtitle">获得你的公开信息(昵称、头像、手机号码等)</view>
+				<!-- 授权登录 -->
+				<view class="login-info" v-if="isRegister">
+					<view class="info-btn" @click="handleLogin">授权登录</view>
+					<view class="info-btn cancel" @click="goBack(2)">取消登录</view>
+				</view>
+				<!-- 授权头像昵称 -->
+				<form class="login-info" @submit="handleLogin" v-else>
+					<view class="info-item">
+						<view class="item-title">头像</view>
+						<button class="item-avatar" open-type="chooseAvatar" @chooseavatar="bindChooseAvatar">
+							<image class="image" :src="avatarPath || '/static/login.png'" mode="aspectFill"></image>
+						</button>
+					</view>
+					<view class="info-item">
+						<view class="item-title">昵称</view>
+						<input class="item-nickname" type="nickname" name="nickname" :value="userInfo.nickname" placeholder="请输入昵称" />
+					</view>
+					<button class="info-btn" style="margin-top: 48rpx;" form-type="submit">授权登录</button>
+					<button class="info-btn cancel" @click="goBack(2)">取消登录</button>
+				</form>
+			</view>
+			<!-- #endif -->
+			<!-- #ifndef MP-WEIXIN -->
+			<!-- 手机号验证码登录 -->
+			<view class="main-form" v-if="!isShowInfo">
+				<view class="form-input">
+					<input class="input" v-model="mobile" maxlength="11" type="number" placeholder="请输入您的手机号" placeholder-class="placeholder" />
+				</view>
+				<view class="form-input flex align-items-center">
+					<input class="input flex-item" v-model="captcha" type="text" placeholder="请输入验证码" placeholder-class="placeholder" />
+					<view class="countdown" v-if="countdown && countdown > 0">{{countdown}}秒</view>
+					<view class="btn" @click="getCaptcha()" v-else>发送验证码</view>
+				</view>
+				<view class="form-btn" @click="onLogin">登录</view>
+				<view class="form-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(1)">《用户协议》</text>和<text @click.stop="toAgreement(2)">《隐私政策》</text></view>
+				</view>
+			</view>
+			<!-- 授权头像昵称 -->
+			<view class="main-login" v-else>
+				<view class="login-info">
+					<view class="info-item">
+						<view class="item-title">头像</view>
+						<view class="item-avatar" @click="chooseAvatar">
+							<image class="image" :src="avatarPath || '/static/login.png'" mode="aspectFill"></image>
+						</view>
+					</view>
+					<view class="info-item">
+						<view class="item-title">昵称</view>
+						<input class="item-nickname" v-model="userInfo.nickname" placeholder="请输入昵称" />
+					</view>
+					<button class="info-btn" style="margin-top: 48rpx;" @click="handleUpdateUser">授权登录</button>
+					<button class="info-btn cancel" @click="goBack(1)">稍后授权</button>
+				</view>
+			</view>
+			<!-- #endif -->
+		</view>
+	</view>
+</template>
+<script>
+	import { mapState } from "vuex"
+	export default {
+		data() {
+			return {
+				// 加载完成
+				loadEnd: false,
+				// 微信参数
+				// #ifdef MP-WEIXIN
+				// 是否已经注册
+				isRegister: false,
+				// #endif
+				// 已选择头像
+				avatarPath: "",
+				// 用户信息
+				userInfo: {
+					avatar: "",
+					nickname: "",
+				},
+				// 公众号H5参数
+				// #ifndef MP-WEIXIN
+				// 是否已读
+				isRead: false,
+				// 手机号
+				mobile: "",
+				// 验证码
+				captcha: "",
+				// 验证码倒计时
+				countdown: 0,
+				// 定时器
+				interval: null,
+				// 是否显示设置头像昵称
+				isShowInfo: false,
+				// #endif
+				// 来源链接
+				fromPage: null,
+			}
+		},
+		onLoad(option) {
+			if (option.from) this.fromPage = decodeURIComponent(option.from)
+			// #ifdef MP-WEIXIN
+			uni.showLoading({
+				title: "加载中"
+			})
+			this.getAuthStatus(() => {
+				uni.hideLoading()
+				this.loadEnd = true
+			})
+			// #endif
+		},
+		onShow() {
+			// #ifndef MP-WEIXIN
+			if (this.isRead || this.mobile || this.captcha || this.isShowInfo) return
+			this.loadEnd = false
+			uni.showLoading({
+				title: "加载中"
+			})
+			this.getAuthCode(() => {
+				uni.hideLoading()
+				this.loadEnd = true
+			})
+			// #endif
+		},
+		// #ifndef MP-WEIXIN
+		onUnload() {
+			clearInterval(this.interval)
+		},
+		// #endif
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+				appletLogo: state => state.app.appletLogo,
+				appletName: state => state.app.appletName,
+				loginImg: state => state.app.loginImg,
+				token: state => state.user.token,
+				WeChatAppid: state => state.app.WeChatAppid,
+			})
+		},
+		methods: {
+			// 返回上一页
+			async goBack(type) {
+				try {
+					let pages = getCurrentPages()
+					if (type == 2) {
+						if (pages.length == 1 || pages[pages.length - 2].route.indexOf("pages/login/index") > -1) {
+							this.$util.toPage({
+								mode: 3,
+								path: "/pages/mine/index",
+							})
+						} else {
+							uni.navigateBack()
+						}
+					} else {
+						if (this.fromPage && this.fromPage.indexOf("pages/login/index") == -1) {
+							const isPermission = await this.$util.getPagePermission({ mode: 2, path: this.fromPage }, 2)
+							if (isPermission) {
+								this.$util.toPage({
+									mode: 2,
+									path: this.fromPage
+								})
+							} else {
+								this.$util.toPage({
+									mode: 3,
+									path: "/pages/mine/index",
+								})
+							}
+						} else {
+							if (pages.length == 1 || pages[pages.length - 2].route.indexOf("pages/login/index") > -1) {
+								this.$util.toPage({
+									mode: 3,
+									path: "/pages/mine/index",
+								})
+							} else {
+								uni.navigateBack()
+							}
+						}
+					}
+				} catch (error) {
+					this.$util.toPage({
+						mode: 3,
+						path: "/pages/mine/index",
+					})
+				}
+			},
+			// 微信登录
+			// #ifdef MP-WEIXIN
+			// 获取账号是否已注册
+			getAuthStatus(fn) {
+				uni.login({
+					provider: 'weixin',
+					success: loginRes => {
+						this.$util.request("login.isAuth", {
+							code: loginRes.code
+						}).then(res => {
+							if (fn) fn()
+							if (res.code == 1) {
+								if (res.data.auth_status == 1) {
+									this.isRegister = true
+								} else {
+									this.isRegister = false
+								}
+							} else {
+								uni.showToast({
+									title: res.msg,
+									icon: 'none'
+								})
+							}
+						}).catch(error => {
+							if (fn) fn()
+							console.error('获取账号是否已注册 ', error)
+						})
+					},
+					fail: () => {
+						uni.showToast({
+							icon: "none",
+							title: "授权失败，请重试"
+						})
+					}
+				})
+			},
+			// 选择头像
+			bindChooseAvatar(e) {
+				this.avatarPath = e.detail.avatarUrl
+			},
+			// 提交登录
+			handleLogin(e) {
+				if (!this.isRegister) {
+					this.userInfo.nickname = e.detail.value.nickname
+					if (!this.avatarPath) {
+						uni.showToast({
+							title: "请设置头像后登录",
+							icon: 'none',
+						})
+						return
+					}
+					if (!this.userInfo.nickname) {
+						uni.showToast({
+							title: "请设置昵称后登录",
+							icon: 'none',
+						})
+						return
+					}
+				}
+				uni.showLoading({
+					title: '授权中',
+					mask: true,
+				})
+				if (this.avatarPath) {
+					this.$util.uploadFile(this.avatarPath).then(result => {
+						if (result.code == 1) {
+							this.userInfo.avatar = result.data.url
+							this.loginEvent()
+						} else {
+							uni.showToast({
+								title: result?.msg || "上传失败",
+								icon: 'none'
+							})
+						}
+					}).catch(error => {
+						uni.hideLoading()
+						console.error('上传图片 ', error)
+					})
+				} else {
+					this.loginEvent()
+				}
+			},
+			// 提交事件
+			loginEvent() {
+				uni.login({
+					provider: 'weixin',
+					success: loginRes => {
+						let url = ""
+						let data = {
+							code: loginRes.code
+						}
+						if (this.isRegister) {
+							url = "login.login"
+						} else {
+							url = "login.register"
+							if (uni.getStorageSync("parentWechatId")) data.parent_wechat_id = uni.getStorageSync("parentWechatId")
+							if (this.userInfo.nickname) data.nickname = this.userInfo.nickname
+							if (this.userInfo.avatar) data.avatar = this.userInfo.avatar
+						}
+						console.log('触发')
+						this.$util.request(url, data).then(res => {
+							
+							console.log(res,'====================res==================')
+							
+							
+							
+							uni.hideLoading()
+							if (res.code == 1) {
+								console.log(res.data,'================data=================')
+								uni.setStorageSync('token', res.data.token);
+								uni.setStorageSync("userInfo", res.data)
+								console.log(res.data,'=============res.data======================')
+								this.$store.commit('user/setToken', res.data.token)
+								this.$store.commit('user/setUserInfo', res.data)
+								this.goBack(1)
+							} else {
+								uni.showToast({
+									title: res.msg,
+									icon: 'none'
+								})
+							}
+						}).catch(error => {
+							console.error('登录/注册 ', error)
+						})
+					},
+					fail: () => {
+						uni.showToast({
+							icon: "none",
+							title: "授权失败，请重试"
+						})
+					}
+				})
+			},
+			// #endif
+			// 公众号H5登录
+			// #ifndef MP-WEIXIN
+			// 获取微信授权code
+			getAuthCode(fn) {
+				let authCode = this.getUrlCode('code')
+				if (authCode) {
+					const now = new Date().getTime();
+					const item = {
+						value: authCode,
+						expiry: parseInt(now) + 240000,
+					}
+					sessionStorage.setItem('authCode', JSON.stringify(item));
+					if (document.referrer.indexOf("open.weixin.qq.com") == -1) {
+						history.back()
+					} else {
+						history.go(-2)
+					}
+				} else {
+					if (this.getSessionValue('authCode')) {
+						if (fn) fn()
+					} else {
+						var local = window.location.href;
+						var appid = this.WeChatAppid
+						location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + encodeURIComponent(local) + "&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect"
+					}
+				}
+			},
+			// 获取临时存储
+			getSessionValue(key) {
+				const itemStr = sessionStorage.getItem(key);
+				if (!itemStr) {
+					return null;
+				}
+				const item = JSON.parse(itemStr);
+				const now = new Date();
+				if (now.getTime() > item.expiry) {
+					sessionStorage.removeItem(key);
+					return null;
+				}
+				return item.value;
+			},
+			// 截取url中的code方法
+			getUrlCode(name) {
+				var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
+				let url = window.location.href.split('#')[0];
+				let search = url.split('?')[1];
+				if (search) {
+					var r = search.substr(0).match(reg);
+					if (r !== null) {
+						return unescape(r[2]);
+					}
+					return null;
+				} else return null;
+			},
+			// 跳转用户协议和隐私政策
+			toAgreement(type) {
+				this.$util.toPage({
+					mode: 1,
+					path: "/pages/mine/settings/agreement?type=" + type
+				})
+			},
+			// 获取验证码
+			getCaptcha() {
+				if (!this.mobile) {
+					uni.showToast({
+						icon: "none",
+						title: "请输入手机号"
+					})
+					return
+				}
+				if (!this.$util.validation("phone", this.mobile)) {
+					uni.showToast({
+						icon: "none",
+						title: "请输入正确的手机号"
+					})
+					return
+				}
+				this.$util.request("login.captcha", {
+					mobile: this.mobile,
+					event: "mobilelogin",
+				}).then(res => {
+					uni.hideLoading()
+					if (res.code == 1) {
+						clearInterval(this.interval)
+						this.countdown = 60
+						this.interval = setInterval(() => {
+							if (this.countdown <= 1) {
+								clearInterval(this.interval)
+								this.countdown = 0
+							} else this.countdown--
+						}, 1000)
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('发送验证码', error)
+				})
+			},
+			// 登录
+			onLogin() {
+				if (!this.isRead) {
+					uni.showToast({
+						icon: "none",
+						title: "请阅读并同意用户协议和隐私政策"
+					})
+					return
+				}
+				if (!this.mobile) {
+					uni.showToast({
+						icon: "none",
+						title: "请输入手机号"
+					})
+					return
+				}
+				if (!this.$util.validation("phone", this.mobile)) {
+					uni.showToast({
+						icon: "none",
+						title: "请输入正确的手机号"
+					})
+					return
+				}
+				if (!this.captcha) {
+					uni.showToast({
+						icon: "none",
+						title: "请输入手机验证码"
+					})
+					return
+				}
+				uni.showLoading({
+					title: "登录中",
+					mask: true
+				})
+				let data = {
+					code: this.getSessionValue('authCode'),
+					mobile: this.mobile,
+					captcha: this.captcha,
+				}
+				if (uni.getStorageSync("parentWechatId")) data.parent_wechat_id = uni.getStorageSync("parentWechatId")
+				this.$util.request("login.officialLogin", data).then(res => {
+					uni.hideLoading()
+					if (res.code == 1) {
+						sessionStorage.removeItem("authCode")
+						uni.setStorageSync('token', res.data.token);
+						uni.setStorageSync("userInfo", res.data)
+						this.$store.commit('user/setToken', res.data.token)
+						this.$store.commit('user/setUserInfo', res.data)
+						
+						
+						console.log(res.data,'=1111111111111===========================>>>>>>>>')
+						
+						if (res.data.register_state == 1) {
+							this.isShowInfo = true
+						} else {
+							this.goBack(1)
+						}
+					} else {
+						if (res.msg.indexOf("40163") > -1) {
+							sessionStorage.removeItem("authCode")
+							uni.showModal({
+								title: "提示",
+								content: "公众号授权状态已过期，请重试",
+								showCancel: false,
+								confirmColor: this.themeColor,
+								confirmText: "重新授权",
+								success: (res) => {
+									if (res.confirm) {
+										this.getAuthCode()
+									}
+								}
+							})
+						} else {
+							uni.showToast({
+								title: res.msg,
+								icon: 'none'
+							})
+						}
+					}
+				}).catch(error => {
+					console.error('登录/注册 ', error)
+				})
+			},
+			// 选择头像
+			chooseAvatar() {
+				// #ifdef MP-WEIXIN
+				uni.chooseMedia({
+					count: 1,
+					mediaType: ['image'],
+					sourceType: ['album', 'camera'],
+					sizeType: ['compressed'],
+					success: (res) => {
+						this.avatarPath = res.tempFiles[0].tempFilePath
+					}
+				})
+				// #endif
+				// #ifndef MP-WEIXIN
+				uni.chooseImage({
+					count: 1,
+					sourceType: ['album', 'camera'],
+					sizeType: ['compressed'],
+					success: (res) => {
+						this.avatarPath = res.tempFilePaths[0]
+					}
+				});
+				// #endif
+			},
+			// 更新用户头像昵称
+			handleUpdateUser() {
+				if (!this.avatarPath) {
+					uni.showToast({
+						title: "请设置头像后登录",
+						icon: 'none',
+					})
+					return
+				}
+				if (!this.userInfo.nickname) {
+					uni.showToast({
+						title: "请设置昵称后登录",
+						icon: 'none',
+					})
+					return
+				}
+				this.uploadAvatar((path) => {
+					this.userInfo.avatar = path
+					this.$util.request("mine.updateUser", this.userInfo).then(res => {
+						uni.hideLoading()
+						if (res.code == 1) {
+							var userInfo = uni.getStorageSync("userInfo")
+							userInfo.avatar = res.data.avatar
+							userInfo.nickname = res.data.nickname
+							uni.setStorageSync("userInfo", userInfo)
+							this.$store.commit('user/setUserInfo', userInfo)
+							this.goBack(1)
+						} else {
+							uni.showToast({
+								title: res.msg,
+								icon: 'none'
+							})
+						}
+					}).catch(error => {
+						uni.hideLoading()
+						console.error('更新用户信息 ' + error)
+					})
+				})
+			},
+			// 上传头像
+			uploadAvatar(fn) {
+				this.$util.uploadFile(this.avatarPath).then(result => {
+					if (result.code == 1) {
+						fn(result.data.url)
+					} else {
+						uni.showToast({
+							title: result?.msg || "上传失败",
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('上传图片 ', error)
+				})
+			},
+			// #endif
+		}
+	}
+</script>
+<style lang="scss">
+	page {
+		background: #fff;
+	}
+
+	.container {
+		.container-main {
+			padding: 96rpx 60rpx 0;
+
+			.main-header {
+				width: 100%;
+				height: 500rpx;
+				margin-bottom: 76rpx;
+			}
+
+			.main-login {
+				.login-title {
+					color: #585858;
+					font-size: 34rpx;
+				}
+
+				.login-subtitle {
+					color: #888;
+					font-size: 28rpx;
+					margin-top: 40rpx;
+				}
+
+				.login-info {
+					margin-top: 48rpx;
+
+					.info-item {
+						display: flex;
+						align-items: center;
+						background: #ffffff;
+						border-bottom: 1rpx solid #F6F7FB;
+
+						.item-title {
+							margin-right: 40rpx;
+							font-size: 28rpx;
+							line-height: 40rpx;
+							color: #000000;
+						}
+
+						.item-avatar {
+							flex: 1;
+							padding: 32rpx 0;
+							height: 80rpx;
+							background: transparent;
+							box-sizing: content-box;
+							display: flex;
+							justify-content: flex-start;
+
+							&::after {
+								border: none;
+							}
+
+							.image {
+								width: 80rpx;
+								height: 80rpx;
+								border-radius: 50%;
+							}
+						}
+
+						.item-nickname {
+							flex: 1;
+							font-size: 28rpx;
+							line-height: 40rpx;
+							padding: 32rpx 0;
+							box-sizing: content-box;
+						}
+					}
+
+					.info-btn {
+						height: 88rpx;
+						line-height: 88rpx;
+						font-size: 28rpx;
+						border-radius: 16rpx;
+						text-align: center;
+						background: var(--theme-color);
+						color: #ffffff;
+
+						&.cancel {
+							background: #eee;
+							color: #999;
+							margin-top: 24rpx;
+						}
+					}
+				}
+			}
+
+			.main-form {
+				margin-top: 96rpx;
+
+				.form-input {
+					border-radius: 16rpx;
+					border: 1rpx solid #F0F0F0;
+					background: #FFF;
+					margin-top: 32rpx;
+
+					&:first-child {
+						margin-top: 0;
+					}
+
+					.input {
+						color: #5A5B6E;
+						font-size: 28rpx;
+						line-height: 40rpx;
+						padding: 36rpx 32rpx;
+					}
+
+					.placeholder {
+						color: #ACADB7;
+					}
+
+					.btn {
+						padding: 0 24rpx;
+						color: var(--theme-color);
+						font-size: 28rpx;
+						line-height: 40rpx;
+					}
+
+					.countdown {
+						padding: 0 24rpx;
+						color: #666;
+						font-size: 28rpx;
+						line-height: 40rpx;
+					}
+				}
+
+				.form-btn {
+					color: #FFF;
+					font-size: 28rpx;
+					line-height: 40rpx;
+					padding: 36rpx;
+					border-radius: 16rpx;
+					background: var(--theme-color);
+					margin-top: 48rpx;
+					text-align: center;
+				}
+
+				.form-read {
+					margin-top: 52rpx;
+
+					.radio {
+						width: 32rpx;
+						height: 32rpx;
+						background: #D6DBDE;
+						border-radius: 50%;
+
+						&.active {
+							background: var(--theme-color);
+						}
+					}
+
+					.label {
+						margin-left: 20rpx;
+						color: #5A5B6E;
+						font-size: 24rpx;
+						line-height: 34rpx;
+
+						text {
+							color: var(--theme-color);
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

pages/mall/index.vue

@@ -0,0 +1,446 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 商城 开发者: 麦沃德科技-半夏
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="container flex-direction-column" :style="{'--theme-color': themeColor}">
+		<!-- 标题栏 -->
+		<title-bar title="商城"></title-bar>
+		<!-- 顶部轮播图 -->
+		<view class="container-carousel">
+			<carousel :show-data="carouselList" :show-type="2" height="280rpx" radius="20rpx"></carousel>
+		</view>
+		<!-- 内容区 -->
+		<view class="container-main flex-item flex" v-if="loadEnd">
+			<!-- 侧边栏分类 -->
+			<scroll-view class="main-sidebar" scroll-y>
+				<view class="sidebar-item" :class="{active: selectParentCategory == 0}">
+					<view class="item-parent select text-ellipsis-more" @click="changeParentCategory(0)">全部商品</view>
+				</view>
+				<view class="sidebar-item" :class="{active: selectParentCategory == item.id}" v-for="item in categoryList" :key="item.id">
+					<view class="item-parent text-ellipsis-more" :class="{select: selectParentCategory == item.id && selectChildCategory == 0}" @click="changeParentCategory(item.id)">
+						{{ item.name }}
+					</view>
+					<view class="item-child" v-if="selectParentCategory == item.id && item.child && item.child.length">
+						<view class="child-box text-ellipsis-more" :class="{select: selectChildCategory == child.id}" v-for="child in item.child" :key="child.id" @click="changeChildCategory(child.id)">
+							{{ child.name }}
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+			<!-- 商品列表 -->
+			<scroll-view class="main-list flex-item" scroll-y :scroll-top="scrollTop" refresher-enabled :refresher-triggered="triggered" @scrolltolower="onScrollBottom" @refresherrefresh="onScrollRefresh" @scroll="onScroll">
+				<view class="list-box" v-if="goodsList.length">
+					<view class="box-item flex" v-for="item in goodsList" :key="item.id" @click="toDetails(item.id)">
+						<image class="item-image" :src="item.image" mode="aspectFill"></image>
+						<view class="item-info flex-item flex-direction-column justify-content-between">
+							<view class="info-title text-ellipsis-more">{{ item.name }}</view>
+							<view class="info-price">￥{{ item.price }}</view>
+						</view>
+					</view>
+				</view>
+				<empty top="64rpx" title="暂无相关商品~" v-else></empty>
+			</scroll-view>
+		</view>
+		<!-- 购物车 -->
+		<view class="container-cart" @click="toShoppingCart()">
+			<image class="cart-icon" src="/static/mall/cart_icon.png" mode="aspectFit"></image>
+			<view class="cart-number" v-if="Number(cartNumber) > 0">{{cartNumber}}</view>
+		</view>
+		<!-- 底部导航 -->
+		<tab-bar></tab-bar>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	import carousel from "@/pages/component/carousel/carousel.vue"
+	// #ifdef H5
+	import wx from 'weixin-js-sdk';
+	// #endif
+	export default {
+		components: {
+			carousel,
+		},
+		data() {
+			return {
+				// 加载完成
+				loadEnd: false,
+				// 轮播图列表
+				carouselList: [],
+				// 商品分类列表
+				categoryList: [],
+				// 已选一级分类
+				selectParentCategory: 0,
+				// 已选二级分类
+				selectChildCategory: 0,
+				// 商品列表
+				goodsList: [],
+				// 下拉刷新状态
+				triggered: false,
+				// 滚动条距顶部位置
+				scrollTop: 0,
+				// 滚动条距顶部位置-以前
+				oldScrollTop: 0,
+				// 分类查询参数
+				page: 1,
+				hasMore: false,
+				limit: 20,
+				// 购物车数量
+				cartNumber: 0,
+			}
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+				shareImage: state => state.app.shareImage,
+				shareTitle: state => state.app.shareTitle,
+			}),
+		},
+		onLoad() {
+			uni.showLoading({
+				title: "加载中"
+			})
+			this.getCarousel()
+			this.getCategoay()
+			this.getGoodsList(() => {
+				uni.hideLoading()
+				this.loadEnd = true
+			});
+			// #ifdef H5
+			this.initConfig()
+			// #endif
+		},
+		onShow() {
+			if (uni.getStorageSync("token")) this.getCartNumber()
+		},
+		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
+			// 获取轮播图
+			getCarousel() {
+				this.$util.request("mall.carousel").then(res => {
+					if (res.code == 1) {
+						this.carouselList = res.data
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取轮播图', error)
+				})
+			},
+			// 获取商品分类
+			getCategoay() {
+				this.$util.request("mall.categoay").then(res => {
+					if (res.code == 1) {
+						this.categoryList = res.data
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取商品分类', error)
+				})
+			},
+			// 获取商品列表
+			getGoodsList(fn) {
+				var data = {
+					page: this.page,
+					limit: this.limit,
+				}
+				if (this.selectParentCategory != 0) {
+					if (this.selectChildCategory == 0) {
+						data.category_id = this.selectParentCategory
+					} else {
+						data.category_id = this.selectChildCategory
+					}
+				}
+				this.$util.request("mall.goodsList", 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.goodsList = this.page == 1 ? list : [...this.goodsList, ...list];
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取商品列表', error)
+				})
+			},
+			// 更换一级商品分类
+			changeParentCategory(id) {
+				this.selectParentCategory = id
+				this.selectChildCategory = 0
+				this.scrollTop = this.oldScrollTop
+				this.getGoodsList(() => {
+					this.scrollTop = this.oldScrollTop = 0
+				})
+			},
+			// 更换二级商品分类
+			changeChildCategory(id) {
+				this.selectChildCategory = id
+				this.scrollTop = this.oldScrollTop
+				this.getGoodsList(() => {
+					this.scrollTop = this.oldScrollTop = 0
+				})
+			},
+			// 商品列表懒加载
+			onScrollBottom() {
+				if (this.hasMore) {
+					this.page++
+					this.getGoodsList();
+				}
+			},
+			// 商品列表下拉刷新
+			onScrollRefresh() {
+				this.page = 1
+				this.triggered = true
+				this.getGoodsList(() => {
+					this.triggered = false
+					uni.stopPullDownRefresh();
+				});
+			},
+			// 商品列表页面滚动
+			onScroll(e) {
+				this.oldScrollTop = e.detail.scrollTop
+			},
+			// 跳转商品详情
+			toDetails(id) {
+				this.$util.toPage({
+					mode: 1,
+					path: "/pagesMall/goods/details?id=" + id
+				})
+			},
+			// 获取购物车数量
+			getCartNumber() {
+				this.$util.request("mall.cartNumber").then(res => {
+					if (res.code == 1) {
+						this.cartNumber = res.data.number || 0
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					console.error('获取购物车数量', error)
+				})
+			},
+			// 跳转购物车
+			toShoppingCart() {
+				this.$util.toPage({
+					mode: 1,
+					path: "/pagesMall/cart/index"
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		padding-bottom: 0;
+		background: #FFF;
+	}
+
+	.container {
+		height: 100vh;
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
+
+		.container-carousel {
+			padding: 32rpx;
+		}
+
+		.container-main {
+			overflow: hidden;
+
+			.main-sidebar {
+				width: 200rpx;
+				background: #F6F7FB;
+
+				.sidebar-item {
+					.item-parent {
+						padding: 32rpx 20rpx 32rpx 16rpx;
+						border-left: 4rpx solid transparent;
+						color: #5A5B6E;
+						text-align: center;
+						font-size: 28rpx;
+						line-height: 40rpx;
+					}
+
+					.item-child .child-box {
+						color: #5A5B6E;
+						text-align: center;
+						font-size: 24rpx;
+						line-height: 34rpx;
+						padding: 24rpx 20rpx 24rpx 16rpx;
+						border-left: 4rpx solid transparent;
+					}
+
+					&.active {
+						background: #FFF;
+
+						.item-parent.select {
+							border-color: var(--theme-color);
+							font-weight: 600;
+						}
+
+						.item-child .child-box.select {
+							border-color: var(--theme-color);
+							font-weight: 600;
+						}
+					}
+				}
+			}
+
+			.main-list {
+				.list-box {
+					padding: 16rpx 32rpx 32rpx;
+
+					.box-item {
+						margin-top: 32rpx;
+
+						&:first-child {
+							margin-top: 0;
+						}
+
+						.item-image {
+							width: 160rpx;
+							height: 160rpx;
+							border-radius: 16rpx;
+						}
+
+						.item-info {
+							margin-left: 24rpx;
+
+							.info-title {
+								color: #5A5B6E;
+								font-size: 28rpx;
+								font-weight: 600;
+								line-height: 40rpx;
+							}
+
+							.info-price {
+								margin-top: 16rpx;
+								color: var(--theme-color);
+								font-size: 28rpx;
+								font-weight: 600;
+								line-height: 40rpx;
+							}
+						}
+					}
+				}
+			}
+		}
+
+		.container-cart {
+			position: fixed;
+			right: 32rpx;
+			bottom: 16%;
+			z-index: 99;
+			background: var(--theme-color);
+			border-radius: 50%;
+			width: 96rpx;
+			height: 96rpx;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			.cart-icon {
+				width: 40rpx;
+				height: 36rpx;
+			}
+
+			.cart-number {
+				position: absolute;
+				top: 0;
+				left: 100%;
+				transform: translateX(-50%);
+				margin-left: -16rpx;
+				color: var(--theme-color);
+				text-align: center;
+				font-size: 24rpx;
+				line-height: 1;
+				min-width: 32rpx;
+				height: 32rpx;
+				border-radius: 16rpx;
+				border: 1px solid var(--theme-color);
+				padding: 0 6rpx;
+				background: #FFF;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+		}
+	}
+</style>

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>

pages/mine/index.vue

@@ -0,0 +1,517 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| 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="{background: diyData.headerStyle.backgroundColor}" v-if="loadEnd">
+		<!-- 顶部区域 -->
+		<view class="container-header">
+			<!-- 标题栏 -->
+			<view class="header-nav" :style="{height: titleBarHeight + 'px'}">
+				<title-bar positionMode="fixed" :frontColor="titleColor" :backgroundColor="titleBackground" :title="diyData.pageTitle || appletName"></title-bar>
+			</view>
+			<!-- 背景图 -->
+			<image class="header-image" :src="getImagePath(diyData.headerStyle.backgroundImage)" mode="aspectFill" v-if="diyData.headerStyle.backgroundImage"></image>
+			<!-- 用户信息 -->
+			<view class="header-user">
+				<user-info :showStyle="diyData.headerStyle" @getPoster="$refs.memberPoster.getPoster()" @getUserInfo="getUserInfo()"></user-info>
+			</view>
+		</view>
+		<!-- 页面内容 -->
+		<view class="container-main">
+			<block v-for="(item, index) in diyData.items" :key="index" v-if="item.show">
+				<!-- 商城订单 -->
+				<view class="main-column" v-if="item.type == 'mallOrderDiy'">
+					<view class="column-title flex justify-content-between align-items-center">
+						<view class="title">{{item.name}}</view>
+						<view class="btn" @click="toOrder()">查看全部</view>
+					</view>
+					<view class="column-content">
+						<order-menu :showStyle="item.style" :showData="item.data" :domain="diyData.domain"></order-menu>
+					</view>
+				</view>
+				<!-- 我的名片-仅微信小程序可用 -->
+				<!-- #ifdef MP-WEIXIN -->
+				<view class="main-column" v-else-if="item.type == 'cardDiy'">
+					<view class="column-title flex justify-content-between align-items-center">
+						<view class="title">{{item.name}}<text v-if="token">({{cardList.length}})</text></view>
+						<view class="btn" @click="toCard()">查看全部</view>
+					</view>
+					<view class="column-content" style="padding: 0 32rpx;" v-if="token && cardList.length">
+						<scroll-view scroll-x class="content-card">
+							<view class="card-item" v-for="card in cardList" :key="card.id" @click="toCardDetails(card.id)">
+								<image class="item-image" :src="card.image" mode="widthFix"></image>
+							</view>
+						</scroll-view>
+					</view>
+				</view>
+				<!-- #endif -->
+				<!-- 会员中心 -->
+				<view class="main-column" v-else-if="item.type == 'memberDiy' && (!item.memberHide || memberStatus)">
+					<view class="column-title">
+						<view class="title">{{item.name}}</view>
+					</view>
+					<view class="column-content">
+						<menu-center :showStyle="item.style" :showData="item.data" :domain="diyData.domain"></menu-center>
+					</view>
+				</view>
+				<!-- 管理员中心 -->
+				<view class="main-column" v-else-if="item.type == 'adminDiy' && adminStatus">
+					<view class="column-title">
+						<view class="title">{{item.name}}</view>
+					</view>
+					<view class="column-content">
+						<admin-center :showStyle="item.style" :showData="item.data" :domain="diyData.domain"></admin-center>
+					</view>
+				</view>
+				<!-- 系统中心 -->
+				<view class="main-column" v-else-if="item.type == 'navDiy'">
+					<view class="column-title">
+						<view class="title">{{item.name}}</view>
+					</view>
+					<view class="column-content">
+						<menu-center :showStyle="item.style" :showData="item.data" :domain="diyData.domain"></menu-center>
+					</view>
+				</view>
+			</block>
+			<!-- 备案号 -->
+			<view class="main-statement" v-if="statement">备案号：{{statement}}</view>
+			<!-- 技术支持 -->
+			<view class="main-support flex justify-content-center" @click="toSupport" v-if="support && support.image">
+				<!-- #ifdef MP-WEIXIN -->
+				<button class="clear" open-type="contact" v-if="support.type == 1">
+					<image class="image" :src="support.image" mode="widthFix"></image>
+				</button>
+				<image class="image" :src="support.image" mode="widthFix" v-else></image>
+				<!-- #endif -->
+				<!-- #ifndef MP-WEIXIN -->
+				<image class="image" :src="support.image" mode="widthFix"></image>
+				<!-- #endif -->
+			</view>
+		</view>
+		<!-- 底部导航 -->
+		<tab-bar></tab-bar>
+		<!-- 电子会牌 -->
+		<member-poster ref="memberPoster" @onChange="pageChange"></member-poster>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	import userInfo from "@/pages/component/mine/user-info.vue"
+	import orderMenu from "@/pages/component/mine/order.vue"
+	import menuCenter from "@/pages/component/mine/menu.vue"
+	import adminCenter from "@/pages/component/mine/admin.vue"
+	import memberPoster from "@/pages/component/member/poster.vue"
+	// #ifdef H5
+	import wx from 'weixin-js-sdk';
+	// #endif
+	export default {
+		components: {
+			userInfo,
+			orderMenu,
+			menuCenter,
+			adminCenter,
+			memberPoster,
+		},
+		data() {
+			return {
+				// 页面是否阻止滚动
+				pageShow: false,
+				// 加载完成
+				loadEnd: false,
+				// 自定义模式
+				diyData: null,
+				// 顶部导航栏背景色
+				titleBackground: "rgba(255, 255, 255, 0)",
+				// 顶部导航栏字体颜色
+				titleColor: "#000",
+				// 标题栏高度
+				titleBarHeight: 0,
+				// 名片列表
+				cardList: [],
+			}
+		},
+		computed: {
+			...mapState({
+				token: state => state.user.token,
+				adminStatus: state => {
+					let status = false
+					if (state.user.userInfo.is_verifying == 1) {
+						status = true
+					}
+					if (state.user.userInfo.set_admin == 1) {
+						status = true
+					}
+					return status
+				},
+				memberStatus: state => {
+					if (state.user.userInfo && state.user.userInfo.apply_member_state) {
+						return state.user.userInfo.apply_member_state.state == 6
+					} else {
+						return false
+					}
+				},
+				statement: state => state.app.statement,
+				support: state => state.app.support,
+				shareImage: state => state.app.shareImage,
+				shareTitle: state => state.app.shareTitle,
+			})
+		},
+		mounted() {
+			// #ifdef MP-WEIXIN
+			let statusBarHeight = uni.getSystemInfoSync().statusBarHeight
+			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
+			this.titleBarHeight = (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height + statusBarHeight
+			// #endif
+		},
+		onLoad() {
+			// #ifdef H5
+			this.initConfig()
+			// #endif
+			this.getDiyData(() => {
+				uni.hideLoading()
+				this.loadEnd = true
+			})
+		},
+		onShow() {
+			if (uni.getStorageSync("token")) {
+				this.getUserInfo()
+				this.getCardList()
+			}
+			if (this.loadEnd) {
+				this.getDiyData()
+			}
+		},
+		onPullDownRefresh() {
+			if (uni.getStorageSync("token")) {
+				this.getCardList()
+				this.getUserInfo()
+			}
+			this.getDiyData(() => {
+				uni.stopPullDownRefresh();
+			})
+		},
+		onShareAppMessage() {
+			return {
+				title: this.shareTitle,
+				imageUrl: this.shareImage,
+				path: "/pages/index/index",
+			}
+		},
+		onShareTimeline() {
+			return {
+				title: this.shareTitle,
+				imageUrl: this.shareImage,
+				path: "/pages/index/index",
+			}
+		},
+		onPageScroll(e) {
+			const scrollTop = e.scrollTop
+			if (scrollTop > 100) {
+				this.titleBackground = "#fff"
+				this.titleColor = "black"
+			} else {
+				let opacity = parseFloat(scrollTop / 100).toFixed(4)
+				this.titleBackground = "rgba(255, 255, 255, " + opacity + ")"
+				if (scrollTop > 30) {
+					this.titleColor = "black"
+					uni.setNavigationBarColor({
+						frontColor: "#000000", //文字颜色
+						backgroundColor: "#ffffff" //底部背景色
+					})
+				} else {
+					this.titleColor = this.diyData.headerStyle.titleTextColor === 'white' ? '#ffffff' : '#000000'
+					uni.setNavigationBarColor({
+						frontColor: this.titleColor, //文字颜色
+						backgroundColor: "transparent" //底部背景色
+					})
+				}
+			}
+		},
+		methods: {
+			// 改变页面滚动状态
+			pageChange(state) {
+				this.pageShow = state
+			},
+			// 获取自定义数据
+			getDiyData(fn) {
+				this.$util.request("mine.diyData").then(res => {
+					if (fn) fn()
+					if (res.code == 1) {
+						this.diyData = res.data
+						const page = this.getPageStyle(res.data)
+						this.diyData.headerStyle = page
+						this.titleColor = page.titleTextColor
+						// #ifdef MP-WEIXIN
+						// 设置navbar标题、颜色
+						uni.setNavigationBarColor({
+							frontColor: page.titleTextColor === 'white' ? '#ffffff' : '#000000',
+							backgroundColor: "transparent",
+						})
+						// #endif
+						uni.setNavigationBarTitle({
+							title: res.data.pageTitle || this.appletName || "首页",
+						})
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					if (fn) fn()
+					console.error('获取自定义数据 ', error)
+				})
+			},
+			// 获取已选页面样式
+			getPageStyle(data) {
+				var index = data.pageStyle.findIndex(item => {
+					if (item.layout == data.pageLayout) return true
+				})
+				if (index === -1) index = 0
+				return data.pageStyle[index]
+			},
+			// 获取图片地址
+			getImagePath(url) {
+				if (url.indexOf('http') > -1) {
+					return url
+				} else {
+					return this.diyData.domain + url
+				}
+			},
+			// #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.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
+			// 获取用户信息
+			getUserInfo(fn) {
+				this.$util.request("mine.user").then(res => {
+					if (fn) fn()
+					if (res.code == 1) {
+						uni.setStorageSync("userInfo", res.data)
+						this.$store.commit('user/setUserInfo', res.data)
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					if (fn) fn()
+					console.error('获取用户信息 ', error)
+				})
+			},
+			// 获取名片列表
+			getCardList(fn) {
+				this.$util.request("card.list").then(res => {
+					if (fn) fn()
+					if (res.code == 1) {
+						this.cardList = res.data
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				}).catch(error => {
+					if (error == 401) {
+						this.showLogin = true
+					} else {
+						if (fn) fn()
+						console.error('获取名片列表 ', error)
+					}
+				})
+			},
+			// 跳转全部订单
+			toOrder() {
+				this.$util.toPage({
+					mode: 1,
+					path: '/pagesMall/order/index',
+				})
+			},
+			// 跳转我的名片
+			toCard() {
+				this.$util.toPage({
+					mode: 1,
+					path: '/pagesCard/mine/index',
+				})
+			},
+			// 跳转我的名片详情
+			toCardDetails(id) {
+				this.$util.toPage({
+					mode: 1,
+					path: '/pagesCard/mine/details?id=' + id,
+				})
+			},
+			// 跳转技术支持
+			toSupport() {
+				if (this.support.type == 2) {
+					// 拨打电话
+					this.$util.toPage({
+						mode: 6,
+						phone: this.support.mobile,
+					})
+				} else if (this.support.type == 3) {
+					// 外部链接
+					this.$util.toPage({
+						mode: 4,
+						path: this.support.link,
+					})
+				}
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		padding-bottom: 0;
+	}
+
+	.container {
+		position: relative;
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
+		min-height: 100vh;
+
+		.container-header {
+			position: relative;
+			z-index: 998;
+
+			.header-image {
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				z-index: -1;
+			}
+
+			.header-user {
+				padding: 0 32rpx;
+			}
+		}
+
+		.container-main {
+			position: relative;
+			z-index: 1;
+			padding: 0 32rpx 32rpx;
+
+			.main-column {
+				padding: 32rpx 0;
+				border-radius: 16rpx;
+				background: #ffffff;
+				margin-top: 32rpx;
+
+				.column-title {
+					padding: 0 32rpx;
+
+					.title {
+						color: #5A5B6E;
+						font-size: 32rpx;
+						font-weight: 600;
+						line-height: 44rpx;
+					}
+
+					.btn {
+						color: #5A5B6E;
+						font-size: 28rpx;
+						line-height: 40rpx;
+					}
+				}
+
+				.column-content {
+					margin-top: 24rpx;
+
+					.content-card {
+						white-space: nowrap;
+
+						.card-item {
+							display: inline-block;
+							margin-left: 16rpx;
+							width: 296rpx;
+							height: 176rpx;
+							border-radius: 8rpx;
+							overflow: hidden;
+
+							&:first-child {
+								margin-left: 0;
+							}
+
+							.item-image {
+								width: 100%;
+								height: 100%;
+							}
+						}
+					}
+				}
+			}
+
+			.main-statement {
+				font-size: 24rpx;
+				line-height: 34rpx;
+				color: #8D929C;
+				margin-top: 32rpx;
+				text-align: center;
+			}
+
+			.main-support {
+				margin-top: 32rpx;
+
+				.image {
+					width: 400rpx;
+					height: auto;
+					border-radius: 16rpx;
+				}
+			}
+		}
+	}
+</style>