yangchunlong/wdsxh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

会员权益

Browse Source
This commit is contained in:
yangchunlong
2026-04-29 15:33:58 +08:00
commit 54965243da
2787 changed files with 242809 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

319
pagesTools/album/details.vue Normal file
View File

@@ -0,0 +1,319 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| 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="organize + '相册详情'"></title-bar>
<!-- 内容区 -->
<view class="container-main" v-if="loadEnd">
<view class="main-content">
<view class="content-head flex align-items-center">
<text class="head-date flex-item">{{albumInfo.release_date}}</text>
<view class="head-btn flex align-items-center" @click="handleDownload(albumInfo.files)" v-if="albumInfo.type == 2">
<view class="btn-icon" :style="{'background-image': 'url('+ iconDownload +')'}" v-if="iconDownload"></view>
<text class="btn-text">下载视频</text>
</view>
</view>
<view class="content-info">{{albumInfo.name}}</view>
<view class="content-list" v-if="albumInfo.files">
<view class="list-item" v-for="(item, index) in splitImages(albumInfo.files)" :key="index">
<image class="item-box" :src="item" mode="widthFix" @click="previewImage(index)" v-if="albumInfo.type == 1"></image>
<video class="item-box" :src="item" :loop="true" object-fit="cover" :show-mute-btn="true" :show-fullscreen-btn="true" play-btn-position="center" v-else-if="albumInfo.type == 2"></video>
</view>
</view>
</view>
</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>
<!-- 底部导航 -->
<tab-bar></tab-bar>
</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,
// 相册id
albumId: null,
// 相册详情
albumInfo: {},
// 是否显示登录提示
showLogin: false,
};
},
computed: {
...mapState({
themeColor: state => state.app.themeColor,
organize: state => state.app.organize,
iconDownload: state => {
return svgData.svgToUrl("download", state.app.themeColor)
},
shareImage: state => state.app.shareImage,
loginImg: state => state.app.loginImg,
})
},
onLoad(option) {
uni.showLoading({
title: "加载中"
})
this.albumId = option.id
this.getAlbumDetails(() => {
uni.hideLoading()
this.loadEnd = true
// #ifdef H5
this.initConfig()
// #endif
})
},
onShareAppMessage() {
let shareImage = ""
if (this.albumInfo.files && this.albumInfo.type == 1) {
shareImage = this.splitImages(this.albumInfo.files)[0]
} else {
shareImage = this.shareImage
}
return {
title: this.albumInfo.name,
imageUrl: shareImage || this.shareImage,
}
},
onShareTimeline() {
let shareImage = ""
if (this.albumInfo.files && this.albumInfo.type == 1) {
shareImage = this.splitImages(this.albumInfo.files)[0]
} else {
shareImage = this.shareImage
}
return {
title: this.albumInfo.name,
imageUrl: shareImage || 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(() => {
let shareImage = ""
if (this.albumInfo.files && this.albumInfo.type == 1) {
shareImage = this.splitImages(this.albumInfo.files)[0]
} else {
shareImage = this.shareImage
}
wx.updateAppMessageShareData({
title: this.albumInfo.name,
desc: "",
link: window.location.href,
imgUrl: shareImage || this.shareImage,
});
wx.updateTimelineShareData({
title: this.albumInfo.name,
link: window.location.href,
imgUrl: shareImage || this.shareImage,
});
});
} else {
uni.hideLoading()
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
uni.hideLoading()
console.error('通过config接口注入权限验证配置 ', error)
})
},
// #endif
// 下载视频
handleDownload(url) {
if (url) {
uni.showLoading({
mask: true,
title: '加载中',
})
this.$util.downloadFile(url).then(() => {
uni.hideLoading()
}).catch((error) => {
uni.hideLoading()
uni.showToast({
icon: 'none',
title: error?.errMsg || '视频下载失败',
})
})
} else {
uni.showToast({
icon: 'none',
title: '暂无可下载视频',
})
}
},
// 获取相册详情
getAlbumDetails(fn) {
this.$util.request("album.albumDetails", {
album_id: this.albumId
}).then(res => {
if (fn) fn()
if (res.code == 1) {
this.albumInfo = 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)
}
})
},
// 预览图片
previewImage(index) {
const urls = this.splitImages(this.albumInfo.files);
uni.previewImage({
urls: urls,
current: index,
});
},
// 字符串转数组格式图片
splitImages(images) {
try {
if (images) return images.split(',');
else return []
} catch (error) {
return [];
}
},
// 前往登录
toLogin() {
uni.redirectTo({
url: `/pagesTools/album/details?id=${this.albumId}`,
})
},
}
}
</script>
<style lang="scss">
.container {
.container-main {
padding: 32rpx;
.main-content {
padding: 32rpx;
border-radius: 12rpx;
background: #FFF;
.content-head {
.head-date {
color: #5A5B6E;
font-size: 28rpx;
font-weight: 600;
line-height: 32rpx;
}
.head-btn {
margin-left: 32rpx;
.btn-icon {
width: 32rpx;
height: 32rpx;
background-size: 32rpx;
margin-right: 8rpx;
}
.btn-text {
color: var(--theme-color);
font-size: 28rpx;
line-height: 32rpx;
}
}
}
.content-info {
margin-top: 16rpx;
color: #8D929C;
font-size: 28rpx;
line-height: 40rpx;
}
.content-list {
.list-item {
margin-top: 16rpx;
.item-box {
width: 100%;
border-radius: 16rpx;
}
}
}
}
}
.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;
color: #ffffff;
}
}
}
</style>

176
pagesTools/album/index.vue Normal file
View File

@@ -0,0 +1,176 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| 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="organize + '相册'"></title-bar>
<!-- 内容区 -->
<view class="container-main" v-if="loadEnd">
<view class="main-column" v-if="albumList.length">
<album-item :show-data="albumList"></album-item>
</view>
<empty top="30%" title="暂无相关内容~" v-else></empty>
</view>
<!-- 底部导航 -->
<tab-bar></tab-bar>
</view>
</template>
<script>
import { mapState } from "vuex"
import albumItem from "@/pagesTools/component/album/index.vue"
// #ifdef H5
import wx from 'weixin-js-sdk';
// #endif
export default {
components: {
albumItem
},
data() {
return {
// 加载完成
loadEnd: false,
// 相册列表
albumList: [],
// 分类查询参数
page: 1,
limit: 20,
hasMore: false,
};
},
computed: {
...mapState({
themeColor: state => state.app.themeColor,
organize: state => state.app.organize,
shareImage: state => state.app.shareImage,
shareTitle: state => state.app.shareTitle,
})
},
onLoad() {
uni.showLoading({
title: "加载中"
})
this.getAlbumList(() => {
uni.hideLoading()
this.loadEnd = true
})
// #ifdef H5
this.initConfig()
// #endif
},
onPullDownRefresh() {
this.page = 1
this.getAlbumList(() => {
uni.stopPullDownRefresh()
})
},
onReachBottom() {
if (this.hasMore) {
this.page++
this.getAlbumList();
}
},
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
// 获取相册列表
getAlbumList(fn) {
this.$util.request("album.albumList", {
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.albumList = this.page == 1 ? list : [...this.albumList, ...list];
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
if (fn) fn()
console.error('获取相册列表', error)
})
}
}
}
</script>
<style lang="scss">
.container {
.container-main {
padding: 32rpx;
.main-column {
border-radius: 16rpx;
background: #FFF;
padding: 32rpx;
}
}
}
</style>

170
pagesTools/certificate/index.vue Normal file
View File

@@ -0,0 +1,170 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| 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">
<!-- 顶部图片 -->
<view class="main-image">
<image src="/static/ground.png" mode="aspectFill" class="image"></image>
</view>
<!-- 输入框 -->
<view class="main-form">
<view class="main-form-item">
<input type="text" placeholder="请输入姓名" placeholder-class="placeholder" v-model="name" @confirm="getCertificate" />
</view>
<view class="main-form-item">
<input type="text" placeholder="请输入证书编号查询" placeholder-class="placeholder" v-model="number" @confirm="getCertificate" />
</view>
<view class="main-form-button" :style="{background: themeColor}" @click="getCertificate()">
证书查询
</view>
<view class="main-form-item">
<view class="main-form-item-tip">温馨提示:输入任一数据即可查询。</view>
</view>
</view>
</view>
<!-- 底部导航 -->
<tab-bar></tab-bar>
</view>
</template>
<script>
import { mapState } from "vuex"
export default {
data() {
return {
// 加载完成
loadEnd: false,
// 名称
name: '',
// 编号
number: ''
};
},
computed: {
...mapState({
themeColor: state => state.app.themeColor,
loginImg: state => state.app.loginImg,
})
},
onReady() {
this.loadEnd = true
},
methods: {
// 获取证书
getCertificate() {
if (this.name == '' && this.number == '') {
uni.showToast({
title: "请输入姓名或证书编号查询",
icon: "none"
})
return
}
uni.showLoading({
title: "查询中"
})
this.$util.request("member.certificate", {
name: this.name,
number: this.number
}).then(res => {
if (res.code == 1) {
uni.hideLoading()
if (res.data?.length) {
const images = res.data.map(item => item.image)
this.$util.toPage({
mode: 1,
path: "/pagesTools/certificate/result?images=" + JSON.stringify(images)
})
} else {
uni.showToast({
title: "暂无相关证书~",
icon: "none",
duration: 1000
})
}
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
console.error('获取证书', error)
})
}
}
}
</script>
<style lang="scss">
page {
background: #FFF;
}
.container {
.container-main {
.main-image {
position: absolute;
top: 0;
left: 0;
right: 0;
.image {
width: 100vw;
height: 800rpx;
display: block;
}
}
.main-form {
position: relative;
top: 750rpx;
padding: 32rpx;
border-radius: 16rpx 16rpx 0rpx;
background: #FFFFFF;
.main-form-item {
padding: 34rpx;
margin-bottom: 32rpx;
border-radius: 16rpx;
text-align: center;
background: #F6F7FB;
.placeholder {
text-align: center;
font-size: 32rpx;
color: #8D929C;
}
.main-form-item-tip {
font-size: 24rpx;
line-height: 48rpx;
color: #5A5B6E;
}
}
.main-form-button {
padding: 34rpx;
border-radius: 16rpx;
margin-bottom: 32rpx;
font-size: 32rpx;
text-align: center;
color: #FFFFFF;
}
}
}
}
</style>

64
pagesTools/certificate/result.vue Normal file
View File

@@ -0,0 +1,64 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| 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-image" :src="item" mode="widthFix" v-for="(item, index) in imageList" :key="index" @click="previewImage(index)"></image>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 图片列表
imageList: [],
};
},
onLoad(option) {
this.imageList = JSON.parse(option.images);
},
methods: {
// 预览图片
previewImage(index) {
uni.previewImage({
urls: this.imageList,
current: index
});
}
}
}
</script>
<style lang="scss">
page {
background: #FFF;
}
.container {
.container-main {
padding: 48rpx 64rpx;
display: flex;
flex-direction: column;
row-gap: 32rpx;
.main-image {
width: 100%;
}
}
}
</style>

191
pagesTools/component/album/index.vue Normal file
View File

@@ -0,0 +1,191 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| 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="{'--theme-color': themeColor}">
<view class="album-item" v-for="item in showData" :key="item.id" @click="toDetails(item.id)">
<view class="item-date">{{item.release_date}}</view>
<view class="item-title">{{item.name}}</view>
<view class="item-content flex" v-if="item.files">
<view class="content-timeline">
<view class="timeline-point"></view>
<view class="timeline-line"></view>
</view>
<view class="content-box flex-item">
<block v-if="item.type == 1">
<view class="box-single" v-if="splitImages(item.files).length == 1">
<image class="image" :src="item.files" mode="aspectFill"></image>
</view>
<view class="box-multiple" v-else-if="item.files.length">
<view class="multiple-image" v-for="(img, index) in splitImages(item.files)" :key="index">
<image class="image" :src="img" 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>
</template>
<script>
import { mapState } from "vuex"
export default {
name: "componentAlbum",
props: ["showData"],
computed: {
...mapState({
themeColor: state => state.app.themeColor,
})
},
methods: {
// 字符串转数组格式图片
splitImages(images) {
try {
if (images) return images.split(',');
else return []
} catch (error) {
return [];
}
},
// 去详情
toDetails(id) {
this.$util.toPage({
mode: 1,
path: "/pagesTools/album/details?id=" + id
})
}
},
}
</script>
<style lang="scss">
.component-album {
.album-item {
margin-top: 32rpx;
&:first-child {
margin-top: 0;
}
.item-date {
color: #5A5B6E;
font-size: 28rpx;
font-weight: 600;
line-height: 32rpx;
}
.item-title {
margin-top: 16rpx;
color: #8D929C;
font-size: 28rpx;
line-height: 40rpx;
}
.item-content {
margin-top: 16rpx;
.content-timeline {
display: flex;
flex-direction: column;
.timeline-point {
width: 20rpx;
height: 20rpx;
border-radius: 4rpx;
background: var(--theme-color);
}
.timeline-line {
width: 2rpx;
height: 100%;
flex: 1;
background: #F0F0F0;
}
}
.content-box {
margin-left: 64rpx;
.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;
background: rgba(0, 0, 0, 0.3);
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>

296
pagesTools/component/publicize/poster.vue Normal file
View File

@@ -0,0 +1,296 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| Copyright (c) 2017～2024 www.maiwd.cn All rights reserved.
+----------------------------------------------------------------------
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
+----------------------------------------------------------------------
| 组件-推广会员 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->
<template>
<view class="component-publicize-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: "publicizePoster",
props: ["showData"],
data() {
return {
// 标题栏高度
titleBarHeight: 0,
// 推广会员海报宽度
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: {
// 获取推广会员
generatePoster() {
uni.showLoading({
title: "加载中",
mask: true
})
this.posterWidth = uni.getSystemInfoSync().windowWidth;
this.posterHeight = parseInt(this.posterWidth * (337 / 248));
this.showNucleus()
},
// 获取图片资源
async showNucleus() {
this.loadingResources().then((state) => {
if (state) {
this.posterReady = true
this.createImage()
}
});
},
// 加载图片资源
async loadingResources() {
this.posterBackground = await loadImage(this.showData.image);
this.posterAvatar = await loadImage(this.showData.avatar);
this.posterCode = await loadImage(this.showData.code);
return true;
},
// 生成推广会员
async createImage() {
if (!this.posterReady) {
uni.hideLoading()
uni.showToast({
title: '推广海报图片资源加载失败',
icon: 'none'
})
return
};
// 获取上下文对象
const ctx = uni.createCanvasContext("myCanvas", this);
// 设置背景色
ctx.setFillStyle('#FFFFFF')
ctx.fillRect(0, 0, this.posterWidth, this.posterHeight)
// 创建推广会员
await createPoster(ctx, [{
type: "image",
url: this.posterBackground,
config: {
x: 0,
y: 0,
w: this.posterWidth,
h: this.posterWidth,
},
},
{
type: "image",
url: this.posterAvatar,
config: {
x: parseInt(this.posterWidth * (16 / 248)),
y: parseInt(this.posterWidth * (265 / 248)),
w: parseInt(this.posterWidth * (24 / 248)),
h: parseInt(this.posterWidth * (24 / 248)),
r: parseInt(this.posterWidth * (4 / 248)),
},
},
{
type: "text",
text: this.showData.name,
config: {
x: parseInt(this.posterWidth * (46 / 248)),
y: parseInt(this.posterWidth * (276 / 248)),
color: "#333333",
fontSize: parseInt(this.posterWidth * (12 / 248)).toString(),
textAlign: "left",
},
},
{
type: "text",
text: "邀请您参加" + this.showData.businessName,
config: {
x: parseInt(this.posterWidth * (16 / 248)),
y: parseInt(this.posterWidth * (306 / 248)),
color: "#333333",
fontSize: parseInt(this.posterWidth * (12 / 248)).toString(),
textAlign: "left",
maxWidth: parseInt(this.posterWidth * (140 / 248)),
wrap: true,
lineNumber: 2,
lineHeight: parseInt(this.posterWidth * (20 / 311)),
isVerticalCenter: true
},
},
{
type: "image",
url: this.posterCode,
config: {
x: parseInt(this.posterWidth * (168 / 248)),
y: parseInt(this.posterWidth * (258 / 248)),
w: parseInt(this.posterWidth * (64 / 248)),
h: parseInt(this.posterWidth * (64 / 248)),
r: parseInt(this.posterWidth * (8 / 248)),
},
},
])
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-publicize-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>

167
pagesTools/component/questionnaire/index.vue Normal file
View File

@@ -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-chains">
<view class="chains-item" v-for="item in showData" :key="item.id" @click="toDetails(item.id, item.state)">
<view class="item-title text-ellipsis">{{item.title}}</view>
<view class="item-tag flex">
<view class="tag-box flex-item">
<text class="text">{{item.end_time}}</text>
<text class="text flex-item text-ellipsis">{{item.category_name || ""}}</text>
</view>
<view class="tag-box">
<text class="text">浏览{{item.page_view}}</text>
<text class="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: "chains",
props: ["showData"],
computed: {
...mapState({
questionnaireImg: state => state.app.questionnaireImg,
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.title,
path: '/pagesTools/questionnaire/details?id=' + item.id,
imageUrl: this.questionnaireImg,
})
},
// 跳转详情
toDetails(id, state) {
if (state == 2) {
this.$util.toPage({
mode: 1,
path: "/pagesTools/questionnaire/details?id=" + id
})
} else {
this.$util.toPage({
mode: 1,
path: "/pagesTools/questionnaire/info?id=" + id
})
}
},
// 联系电话
onContact(phone) {
this.$util.toPage({
mode: 6,
phone: phone,
})
}
},
}
</script>
<style lang="scss">
.component-chains {
.chains-item {
margin-top: 32rpx;
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;
column-gap: 16rpx;
.tag-box {
display: flex;
column-gap: 16rpx;
.text {
color: #999999;
font-size: 24rpx;
line-height: 34rpx;
}
}
}
.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>

182
pagesTools/component/questionnaire/info.vue Normal file
View File

@@ -0,0 +1,182 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
+----------------------------------------------------------------------
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
+----------------------------------------------------------------------
| 调查问卷-详情组件 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->
<template>
<view class="component-problem">
<view class="problem-item" v-for="(item, index) in problemField" :key="index">
<!-- 标题 -->
<view class="item-title">
{{item.topic}}<text style="color: #E60012;" v-if="item.must == 1">*</text>
</view>
<!-- 多选字段 -->
<block v-if="item.type == 'checkbox'">
<view class="item-content" v-for="(checkboxItem, checkboxIndex) in getContent(item.content)" :key="checkboxIndex">
<text class="text">{{checkboxItem}}</text>
</view>
<view class="item-content" v-if="!item.content">
<text class="text"></text>
</view>
</block>
<!-- 日期选择 -->
<block v-else-if="item.type == 'datetime'">
<view class="item-content">
<text class="text">{{item.content}}</text>
<image class="icon" src="/static/date.png" mode="aspectFit"></image>
</view>
</block>
<!-- 上传图片 -->
<block v-else-if="item.type == 'images'">
<view class="item-upload" v-if="item.content && item.content.length">
<view class="upload-image" v-for="(itemImages, imgIndex) in item.content" :key="imgIndex" @click="previewImage(index, imgIndex)">
<image class="image" :src="itemImages" mode="aspectFill"></image>
</view>
</view>
<view class="item-empty" v-else>未上传相关图片</view>
</block>
<!-- 其他字段 -->
<block v-else>
<view class="item-content">
<text class="text">{{item.content}}</text>
</view>
</block>
<!-- 说明字段 -->
<block v-if="(item.type == 'radio' || item.type == 'checkbox') && item.is_explain == 1">
<view class="item-content">
<text class="text">{{item.explain}}</text>
</view>
</block>
</view>
</view>
</template>
<script>
import selectPicker from "@/pages/component/picker/select.vue"
import datePicker from "@/pages/component/picker/date.vue"
export default {
name: "questionProblem",
props: ["showData"],
components: {
selectPicker,
datePicker
},
data() {
return {
// 问卷字段
problemField: [],
};
},
watch: {
showData: {
handler(value) {
this.problemField = value || [];
},
immediate: true,
deep: true
}
},
methods: {
// 预览图片
previewImage(i, j) {
uni.previewImage({
urls: this.problemField[i].content,
current: j
});
},
// 获取填写数据
getContent(content) {
try {
const parsedContent = content ? content.split(",") : [];
if (Array.isArray(parsedContent)) {
return parsedContent;
} else {
return [];
}
} catch (error) {
return [];
}
},
}
}
</script>
<style lang="scss">
.component-problem {
.problem-item {
margin-top: 32rpx;
&:first-child {
margin-top: 0;
}
.item-title {
font-size: 32rpx;
font-weight: 600;
color: #5A5B6E;
}
.item-content {
margin-top: 32rpx;
padding: 36rpx 32rpx;
border-radius: 16rpx;
background: #FFFFFF;
display: flex;
align-items: center;
.text {
flex: 1;
font-size: 28rpx;
line-height: 40rpx;
min-height: 40rpx;
color: #5A5B6E;
word-break: break-all;
}
.icon {
width: 48rpx;
height: 48rpx;
margin-left: 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 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 10rpx;
}
}
}
.item-empty {
color: #5A5B6E;
font-size: 28rpx;
line-height: 40rpx;
margin-top: 24rpx;
}
}
}
</style>

513
pagesTools/component/questionnaire/problem.vue Normal file
View File

@@ -0,0 +1,513 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
+----------------------------------------------------------------------
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
+----------------------------------------------------------------------
| 调查问卷-问题组件 开发者: 麦沃德科技-暴雨
+---------------------------------------------------------------------- -->
<template>
<view class="component-problem">
<view class="problem-form">
<view class="problem-form-item" v-for="(item, index) in problemField" :key="index">
<!-- 标题 -->
<view class="item-title">
{{item.topic}}<text style="color: #E60012;" v-if="item.must == 1">*</text>
</view>
<!-- 文本字段 -->
<block v-if="item.type == 'text'">
<view class="item-text">
<input v-model="item.value" type="text" :placeholder="item.message || '请输入'" placeholder-class="placeholder" />
</view>
</block>
<!-- 数字字段 -->
<block v-else-if="item.type == 'number'">
<view class="item-text">
<input v-model="item.value" type="number" :placeholder="item.message || '请输入'" placeholder-class="placeholder" />
</view>
</block>
<!-- 单选按钮 -->
<block v-else-if="item.type == 'radio'">
<view class="item-radio">
<view class="item-radio-option" v-for="(radioItem, radioIndex) in getOptions(item.content)" :key="radioIndex" @click="selectRadio(index, radioItem.title)">
<view class="item-radio-button">
<image src="/static/mark.png" class="radio-image" v-if="item.value == radioItem.title"></image>
</view>
<view class="item-radio-txt">{{radioItem.title}}</view>
</view>
</view>
<view class="item-text" v-if="item.is_explain == 1">
<input v-model="item.explain" type="text" :placeholder="item.explain_message" placeholder-class="placeholder" />
</view>
</block>
<!-- 多选按钮 -->
<block v-else-if="item.type == 'checkbox'">
<view class="item-checkbox">
<view class="item-checkbox-option" v-for="(checkboxItem, checkboxIndex) in getOptions(item.content)" :key="checkboxIndex" @click="toggleCheckbox(index, checkboxItem.title)">
<view class="item-checkbox-button">
<image src="/static/mark.png" class="checkbox-image" v-if="item.value && item.value.includes(checkboxItem.title)"></image>
</view>
<view class="item-checkbox-txt">{{checkboxItem.title}}</view>
</view>
</view>
<view class="item-text" v-if="item.is_explain == 1">
<input v-model="item.explain" type="text" :placeholder="item.explain_message" placeholder-class="placeholder" />
</view>
</block>
<!-- 日期选择 -->
<block v-else-if="item.type == 'datetime'">
<view class="item-date" @click="openDatePicker(index)">
<view class="input" v-if="item.value">{{item.value}}</view>
<view class="input placeholder" v-else>{{item.message || '请选择'}}</view>
<image class="icon" src="/static/date.png" mode="aspectFit"></image>
</view>
</block>
<!-- 下拉选择 -->
<block v-else-if="item.type == 'select'">
<view class="item-select" @click="openSelectPicker(index)">
<view class="input" v-if="item.value">{{item.value}}</view>
<view class="input placeholder" v-else>{{item.message || '请选择'}}</view>
<image class="icon" src="/static/right.png" mode="aspectFit"></image>
</view>
</block>
<!-- 文本域 -->
<block v-else-if="item.type == 'textarea'">
<view class="item-textarea">
<textarea v-model="item.value" class="item-textarea-height" :placeholder="item.message || '请输入'" placeholder-class="placeholder"></textarea>
</view>
</block>
<!-- 上传图片 -->
<block v-else-if="item.type == 'images'">
<view class="item-upload">
<view class="upload-image" v-if="item.value && item.value.length > 0" v-for="(itemImages, imgIndex) in item.value" :key="imgIndex" @click="previewImage(index, imgIndex)">
<image class="image-select" :src="itemImages" mode="aspectFill"></image>
<image class="image-delete" src="/static/delete.png" mode="aspectFit" @click.stop="deleteImage(index, imgIndex)"></image>
</view>
<view class="upload-image" v-if="!item.value || item.value.length < 9" @click="chooseImage(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>
</view>
</view>
<!-- 单项选择框弹窗组件 -->
<select-picker ref="selectPicker" title="下拉选择" @onChange="pageChange" @confirm="changeSelectPicker"></select-picker>
<!-- 日期选择框弹窗组件 -->
<date-picker ref="datePicker" @onChange="pageChange" @confirm="changeDatePicker"></date-picker>
</view>
</template>
<script>
import selectPicker from "@/pages/component/picker/select.vue"
import datePicker from "@/pages/component/picker/date.vue"
export default {
name: "questionProblem",
props: ["showData"],
components: {
selectPicker,
datePicker
},
data() {
return {
// 问卷字段
problemField: [],
};
},
watch: {
showData: {
handler(value) {
this.problemField = value || [];
},
immediate: true,
deep: true
}
},
methods: {
// 单选按钮
selectRadio(index, radioItem) {
this.$set(this.problemField[index], 'value', radioItem);
},
// 多选按钮
toggleCheckbox(index, checkboxItem) {
if (this.problemField[index].value) {
if (this.problemField[index].value.includes(checkboxItem)) {
this.$delete(this.problemField[index].value, this.problemField[index].value.indexOf(checkboxItem))
} else {
this.problemField[index].value.push(checkboxItem)
}
} else {
this.problemField[index].value = [checkboxItem]
}
this.$forceUpdate()
},
// 选择下拉选项
openSelectPicker(index) {
let list = this.getOptions(this.problemField[index].content)
list = list.map(item => item.title)
this.$refs.selectPicker.open(list, this.problemField[index].value, index)
},
// 改变下拉选项
changeSelectPicker(value, index) {
this.$set(this.problemField[index], 'value', value);
},
// 选择日期
openDatePicker(index) {
this.$refs.datePicker.open(this.problemField[index].value, index)
},
// 改变日期
changeDatePicker(value, index) {
this.$set(this.problemField[index], 'value', value);
},
// 获取表单数据
getApplyField(fn) {
fn(JSON.parse(JSON.stringify(this.problemField)))
},
// 获取选项数据
getOptions(content) {
try {
const parsedContent = JSON.parse(content);
if (Array.isArray(parsedContent)) {
return parsedContent;
} else {
return [];
}
} catch (error) {
return [];
}
},
// 获取已选数据
getSelectData(content) {
try {
const parsedContent = content ? content.split(",") : [];
if (Array.isArray(parsedContent)) {
return parsedContent;
} else {
return [];
}
} catch (error) {
return [];
}
},
// 选择图片
chooseImage(index) {
let limit = this.problemField[index].value ? (9 - this.problemField[index].value.length) : 9
// #ifdef MP-WEIXIN
uni.chooseMedia({
count: limit,
mediaType: ['image'],
sourceType: ['album', 'camera'],
sizeType: ['compressed'],
success: (res) => {
let list = res.tempFiles.map(item => item.tempFilePath)
if (!this.problemField[index].value) this.problemField[index].value = []
this.problemField[index].value = [...this.problemField[index].value, ...list]
this.$forceUpdate()
}
})
// #endif
// #ifndef MP-WEIXIN
uni.chooseImage({
count: limit,
sourceType: ['album', 'camera'],
sizeType: ['compressed'],
success: (res) => {
let list = res.tempFilePaths
if (!this.problemField[index].value) this.problemField[index].value = []
this.problemField[index].value = [...this.problemField[index].value, ...list]
this.$forceUpdate()
}
});
// #endif
},
// 删除图片
deleteImage(i, j) {
this.$delete(this.problemField[i].value, j)
this.$forceUpdate()
},
// 预览图片
previewImage(i, j) {
let list = []
if (this.problemField[i].status == 1) list = this.problemField[i].content || []
else list = this.problemField[i].value || []
uni.previewImage({
urls: list,
current: j
});
},
// 改变页面滚动状态
pageChange(state) {
this.$emit("onChange", state)
}
}
}
</script>
<style lang="scss">
.component-problem {
.problem-form {
.problem-form-item {
margin-top: 32rpx;
&:first-child {
margin-top: 0;
}
.item-title {
font-size: 32rpx;
font-weight: 600;
color: #5A5B6E;
}
.item-text {
margin-top: 32rpx;
padding: 36rpx 32rpx;
border-radius: 16rpx;
background: #FFFFFF;
.placeholder {
font-size: 28rpx;
line-height: 40rpx;
color: #8D929C;
}
}
.item-radio {
.item-radio-option {
margin-top: 32rpx;
display: flex;
align-items: center;
.item-radio-button {
width: 48rpx;
height: 48rpx;
border-radius: 8rpx;
background: #FFFFFF;
position: relative; // 设置相对定位，用于放置图片
.radio-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
}
}
.item-radio-txt {
padding-left: 16rpx;
font-size: 28rpx;
line-height: 40rpx;
color: #5A5B6E;
}
}
}
.item-checkbox {
.item-checkbox-option {
margin-top: 32rpx;
display: flex;
align-items: center;
.item-checkbox-button {
width: 48rpx;
height: 48rpx;
border-radius: 8rpx;
background: #FFFFFF;
position: relative; // 设置相对定位，用于放置图片
.checkbox-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
}
}
.item-checkbox-txt {
padding-left: 16rpx;
font-size: 28rpx;
line-height: 40rpx;
color: #5A5B6E;
}
}
}
.item-date {
margin-top: 32rpx;
padding: 36rpx 32rpx;
border-radius: 16rpx;
background: #FFFFFF;
display: flex;
align-items: center;
.input {
color: #5A5B6E;
font-size: 28rpx;
line-height: 40rpx;
flex: 1;
}
.placeholder {
color: #ACADB7;
font-size: 28rpx;
line-height: 40rpx;
}
.icon {
width: 32rpx;
height: 32rpx;
}
}
.item-select {
margin-top: 32rpx;
padding: 36rpx 32rpx;
border-radius: 16rpx;
background: #FFFFFF;
display: flex;
align-items: center;
.input {
color: #5A5B6E;
font-size: 28rpx;
line-height: 40rpx;
flex: 1;
}
.placeholder {
color: #ACADB7;
font-size: 28rpx;
line-height: 40rpx;
}
.icon {
width: 32rpx;
height: 32rpx;
}
}
.item-textarea {
margin-top: 32rpx;
padding: 36rpx 32rpx;
border-radius: 16rpx;
background: #FFFFFF;
.item-textarea-height {
height: 136rpx;
width: 100%;
}
.placeholder {
font-size: 28rpx;
line-height: 40rpx;
color: #8D929C;
}
}
.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;
}
}
.upload-empty {
color: #5A5B6E;
font-size: 28rpx;
line-height: 40rpx;
margin-top: 24rpx;
}
}
}
}
}
</style>

418
pagesTools/institution/apply.vue Normal file
View File

@@ -0,0 +1,418 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| 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">
<!-- 标题栏 -->
<title-bar :showBack="true" title="申请加入"></title-bar>
<!-- 内容区 -->
<view class="container-main" v-if="loadEnd">
<view class="main-tips" :style="{top: titleBarHeight + 'px'}" v-if="applyInfo.state == 3">驳回原因：{{applyInfo.reject}}</view>
<view class="main-form">
<view class="form-item">
<view class="item-title"><text>*</text>选择级别</view>
<view class="item-input" @click="openSelectLevel()">
<view class="input text-ellipsis" v-if="selectLevel.id">{{selectLevel.name}}</view>
<view class="input placeholder text-ellipsis" v-else>请选择机构级别</view>
<image class="icon" src="/static/right.png" mode="aspectFit"></image>
</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" :style="{background: themeColor}" @click="heandleSubmit()" v-if="userMobile">提交申请</view>
<button class="footer-btn clear" :style="{background: themeColor}" open-type="getPhoneNumber" @getphonenumber="bindPhoneNumber" v-else>提交申请</button>
<view class="safe-padding"></view>
</view>
</view>
<!-- 机构级别选择 -->
<select-level ref="selectLevel" title="选择级别" @onChange="pageChange" @confirm="changeLevel"></select-level>
</view>
</template>
<script>
import { mapState } from "vuex"
import selectLevel from "@/pages/component/picker/select.vue"
export default {
components: {
selectLevel,
},
data() {
return {
// 页面是否阻止滚动
pageShow: false,
// 加载完成
loadEnd: false,
// 标题栏高度
titleBarHeight: 0,
// 机构级别列表
levelList: [],
// 已选机构级别
selectLevel: {},
// 申请信息
applyInfo: {},
// 编辑器实例
editorIns: null,
// 编辑器配置
toolbarConfig: {
excludeKeys: ['direction', 'date', 'lineHeight', 'letterSpacing', 'listCheck', 'export'],
iconSize: '18px',
showFullscreen: true,
},
}
},
computed: {
...mapState({
themeColor: state => state.app.themeColor,
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(option) {
this.institutionId = option.id
this.getLevelList()
if (option.state == -1) {
this.loadEnd = true
} else {
uni.showLoading({
title: "加载中",
mask: true,
})
this.getApplyInfo(() => {
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.editorIns.setContents({
html: result || ""
})
delete pages[pages.length - 1].$vm.editorContent;
}
},
methods: {
// 改变页面滚动状态
pageChange(state) {
this.pageShow = state
},
// 获取申请信息
getApplyInfo(fn) {
this.$util.request("institution.applyDetails", {
institution_id: this.institutionId
}).then(res => {
if (res.code == 1) {
if (res.data) {
this.applyInfo = res.data
this.selectLevel = {
id: res.data.level_id,
name: res.data.level_name
}
} else {
this.applyInfo = { state: null }
}
if (fn) fn()
} else {
if (fn) fn()
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
})
}
}).catch(error => {
if (fn) fn()
console.error('获取申请信息 ', error)
})
},
// 获取机构级别
getLevelList(fn) {
this.$util.request("institution.level", {
institution_id: this.institutionId
}).then(res => {
if (res.code == 1) {
this.levelList = res.data.map(item => {
return { id: item.id, name: item.level_name }
})
if (fn) fn()
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
console.error('获取机构级别 ', error)
})
},
// 选择机构级别
openSelectLevel() {
if (this.levelList.length) {
this.$refs.selectLevel.open(this.levelList, this.selectLevel.id)
} else {
uni.showLoading({
title: "加载中",
mask: true
})
this.getLevelList(() => {
uni.hideLoading()
this.$refs.selectLevel.open(this.levelList, this.selectLevel.id)
})
}
},
// 改变机构级别
changeLevel(value) {
this.selectLevel = value
},
// 超出最大内容限制
overMax() {
uni.showToast({
title: "输入内容已超过最大字数限制"
})
},
// 初始化编辑器
initEditor(editor) {
this.editorIns = editor
this.editorIns.setContents({
html: this.applyInfo.introduction || ""
})
},
// 上传图片
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: "/pagesTools/institution/editor",
animationType: "fade-in",
complete: () => {
uni.hideLoading()
},
})
},
// 提交申请
async heandleSubmit() {
if (!this.selectLevel?.id) {
uni.showToast({
icon: "none",
title: "机构级别不能为空",
duration: 2000,
})
return
}
uni.showLoading({
title: "加载中",
mask: true,
})
const introduction = await this.$refs.spEditor.getHtml()
this.$util.request("institution.apply", {
institution_id: this.institutionId,
level_id: this.selectLevel.id,
introduction: introduction,
}).then(res => {
uni.hideLoading()
if (res.code == 1) {
this.$util.toPage({
mode: 2,
path: "/pagesTools/institution/success"
})
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000,
})
}
}).catch(error => {
uni.hideLoading()
console.error('申请加入机构 ', error)
})
},
// 绑定手机号
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',
duration: 2000,
})
}
}).catch(error => {
uni.hideLoading()
console.error('获取用户手机号码 ', error)
})
},
fail: () => {
uni.hideLoading()
uni.showToast({
icon: "none",
title: "授权手机号失败，请重试"
})
}
});
} else {
uni.showToast({
title: '获取手机号失败，请重新获取',
icon: 'none'
})
}
},
}
}
</script>
<style lang="scss">
.container {
.container-main {
padding-bottom: 192rpx;
.main-tips {
color: #FFF;
font-size: 24rpx;
font-weight: 400;
line-height: 34rpx;
padding: 30rpx 32rpx;
background: #FF6868;
}
.main-form {
padding: 22rpx 32rpx 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;
overflow: hidden;
.input {
color: #5A5B6E;
font-size: 28rpx;
line-height: 40rpx;
flex: 1;
padding: 32rpx;
min-height: 104rpx;
}
.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: 12rpx 24rpx;
.footer-btn {
color: #ffffff;
font-size: 32rpx;
line-height: 44rpx;
padding: 22rpx 24rpx;
border-radius: 16rpx;
background: var(--theme-color);
text-align: center;
}
}
}
}
</style>

535
pagesTools/institution/details.vue Normal file
View File

@@ -0,0 +1,535 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| 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>
<!-- 内容区 -->
<view class="container-main">
<block v-if="loadEnd">
<!-- 轮播图 -->
<carousel :show-data="institutionInfo.image_list" height="320rpx" radius="10rpx" bottom="24rpx" right="24rpx"></carousel>
<!-- 机构信息 -->
<view class="main-info flex align-items-center">
<image class="info-logo" :src="institutionInfo.icon" mode="aspectFill"></image>
<view class="info-name flex-item">{{ appletName }} | {{ institutionInfo.name }}</view>
</view>
<!-- 机构简介 -->
<view class="main-column">
<view class="column-title">机构简介</view>
<view class="column-content">
<mp-html :content="institutionInfo.introduction"></mp-html>
</view>
</view>
<!-- 成员列表 -->
<view class="main-column" v-if="memberList && memberList.length">
<view class="column-title">成员列表</view>
<view class="column-list">
<view class="list-item" v-for="(item, index) in memberList" :key="index">
<view class="item-info flex align-items-center">
<image class="info-avatar" :src="item.usermember.avatar" mode="aspectFill"></image>
<view class="info-box flex-item">
<view class="box-title text-ellipsis">{{ item.usermember.name }}</view>
<view class="box-subtitle text-ellipsis">{{ appletName }} | {{ item.member_level }}</view>
<view class="box-subtitle text-ellipsis" :style="{color: themeColor}">{{ item.institution_level.level_name }}</view>
</view>
</view>
<view class="item-introduce flex">
<view class="introduce-text text-ellipsis-more">
<view class="btn" @click="openMemberDetails(item)">详情</view>
{{ item.introduction }}
<view class="mask"></view>
</view>
</view>
</view>
</view>
</view>
<!-- 申请加入 -->
<view class="main-apply" @click="toApply()" v-if="institutionInfo.apply_state != 2">
<image class="apply-icon" src="/static/add.png" mode="aspectFit"></image>
<text class="apply-text">申请加入</text>
</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>
<!-- 成员详情弹窗 -->
<uni-popup ref="popupModal" type="center" @change="onModalChange">
<view class="container-popup">
<view class="popup-close" @click="$refs.popupModal.close()">
<image src="/static/close.png" mode="aspectFit"></image>
</view>
<view class="popup-content flex-direction-column">
<view class="content-info flex align-items-center" v-if="popupInfo && popupInfo.usermember">
<image class="info-avatar" :src="popupInfo.usermember.avatar" mode="aspectFill"></image>
<view class="info-box flex-item">
<view class="box-title text-ellipsis">{{ popupInfo.usermember.name }}</view>
<view class="box-subtitle text-ellipsis">{{ appletName }} | {{ popupInfo.member_level }}</view>
<view class="box-subtitle text-ellipsis" :style="{color: themeColor}">{{ popupInfo.institution_level.level_name }}</view>
</view>
</view>
<scroll-view scroll-y class="contetnt-scroll flex-item">
<mp-html :content="popupInfo.content"></mp-html>
</scroll-view>
</view>
</view>
</uni-popup>
</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 {
// 页面是否阻止滚动
pageShow: false,
// 加载完成
loadEnd: false,
// 机构id
institutionId: null,
// 机构详情
institutionInfo: {},
// 成员列表
memberList: [],
// 分类查询参数
page: 1,
limit: 20,
hasMore: false,
// 弹窗信息
popupInfo: {},
// 是否显示登录提示
showLogin: false,
}
},
computed: {
...mapState({
themeColor: state => state.app.themeColor,
appletName: state => state.app.appletName,
})
},
onLoad(option) {
this.institutionId = option.id
uni.showLoading({
title: "加载中"
})
this.getMemberList()
this.getInstitution(() => {
this.loadEnd = true
uni.hideLoading()
// #ifdef H5
this.initConfig()
// #endif
})
},
onShow() {
if (this.loadEnd) {
this.getMemberList()
this.getInstitution()
}
},
onReachBottom() {
if (this.hasMore) {
this.page++
this.getMemberList()
}
},
onShareAppMessage() {
return {
title: this.institutionInfo.name,
imageUrl: this.institutionInfo.image_list[0],
}
},
onShareTimeline() {
return {
title: this.institutionInfo.name,
imageUrl: this.institutionInfo.image_list[0],
}
},
methods: {
// 获取机构详情
getInstitution(fn) {
this.$util.request("institution.details", {
id: this.institutionId
}).then(res => {
if (fn) fn()
if (res.code == 1) {
this.institutionInfo = res.data
if (this.institutionInfo.images) this.institutionInfo.image_list = this.institutionInfo.images.split(",")
else this.institutionInfo.image_list = []
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
if (error == 401) {
this.showLogin = true
} else {
console.error('获取机构详情 ', error)
}
})
},
// 获取成员列表
getMemberList() {
this.$util.request("institution.member", {
page: this.page,
limit: this.limit,
institution_id: this.institutionId
}).then(res => {
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)
})
},
// 跳转申请
toApply() {
if (this.institutionInfo.apply_state == 1) {
uni.showToast({
icon: "none",
title: "您已提交申请正在审核",
duration: 2500
})
} else {
this.$util.toPage({
mode: 1,
path: `/pagesTools/institution/apply?id=${this.institutionId}&state=${this.institutionInfo.apply_state || -1}`,
})
}
},
// 打开成员介绍弹窗
openMemberDetails(item) {
this.popupInfo = item
this.$refs.popupModal.open()
},
// 弹窗改变事件
onModalChange(e) {
this.pageShow = e.show
},
// #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.institutionInfo.name,
desc: "",
link: window.location.href,
imgUrl: this.institutionInfo.image_list[0],
});
wx.updateTimelineShareData({
title: this.institutionInfo.name,
link: window.location.href,
imgUrl: this.institutionInfo.image_list[0],
});
});
} else {
uni.hideLoading()
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
uni.hideLoading()
console.error('通过config接口注入权限验证配置 ', error)
})
},
// #endif
// 前往登录
toLogin() {
uni.redirectTo({
url: `/pagesTools/institution/details?id=${this.institutionId}`,
})
},
}
}
</script>
<style lang="scss">
.container {
.container-main {
padding: 32rpx;
.main-info {
margin-top: 32rpx;
border-radius: 16rpx;
background: #FFF;
padding: 32rpx;
.info-logo {
width: 80rpx;
height: 80rpx;
border-radius: 10rpx;
}
.info-name {
margin-left: 32rpx;
color: #5A5B6E;
font-size: 28rpx;
font-weight: 600;
line-height: 40rpx;
}
}
.main-column {
margin-top: 32rpx;
.column-title {
color: #5A5B6E;
font-size: 32rpx;
font-weight: 600;
line-height: 44rpx;
}
.column-content {
margin-top: 32rpx;
border-radius: 16rpx;
background: #FFF;
padding: 32rpx;
color: #5A5B6E;
font-size: 28rpx;
line-height: 40rpx;
}
.column-list {
margin-top: 32rpx;
.list-item {
margin-top: 32rpx;
border-radius: 16rpx;
background: #FFF;
padding: 32rpx;
&:first-child {
margin-top: 0;
}
.item-info {
.info-avatar {
width: 124rpx;
height: 124rpx;
border-radius: 50%;
}
.info-box {
margin-left: 16rpx;
.box-title {
color: #5A5B6E;
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
}
.box-subtitle {
margin-top: 8rpx;
color: #8D929C;
font-size: 24rpx;
line-height: 34rpx;
}
}
}
.item-introduce {
margin-top: 16rpx;
.introduce-text {
position: relative;
color: #5A5B6E;
font-size: 28rpx;
line-height: 40rpx;
.btn {
float: right;
clear: both;
color: var(--theme-color);
margin-left: 12rpx;
}
&::before {
content: '';
float: right;
width: 0;
height: 100%;
margin-bottom: -40rpx;
}
.mask {
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
background-color: #FFF;
}
}
}
}
}
}
.main-apply {
position: fixed;
z-index: 99;
right: 32rpx;
bottom: 14%;
background: var(--theme-color);
width: 128rpx;
height: 128rpx;
border-radius: 32rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.apply-icon {
width: 48rpx;
height: 48rpx;
margin-bottom: 8rpx;
}
.apply-text {
color: #FFF;
text-align: center;
font-size: 24rpx;
font-weight: 600;
line-height: 34rpx;
}
}
.main-login {
padding: 64rpx 28rpx 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;
}
}
}
.container-popup {
position: relative;
z-index: 999;
border-radius: 16rpx;
background: #FFF;
padding: 48rpx 24rpx 64rpx;
width: 600rpx;
max-width: 95vw;
.popup-close {
position: absolute;
top: 24rpx;
right: 24rpx;
width: 40rpx;
height: 40rpx;
border-radius: 50%;
border: 1rpx solid #5A5B6E;
padding: 12rpx;
background: #FFF;
z-index: 1;
}
.popup-content {
.content-info {
padding: 0 24rpx;
.info-avatar {
width: 124rpx;
height: 124rpx;
border-radius: 50%;
}
.info-box {
margin-left: 16rpx;
.box-title {
color: #5A5B6E;
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
}
.box-subtitle {
margin-top: 8rpx;
color: #8D929C;
font-size: 24rpx;
line-height: 34rpx;
}
}
}
.contetnt-scroll {
padding: 0 24rpx;
margin-top: 40rpx;
max-height: 524rpx;
color: #5A5B6E;
font-size: 28rpx;
line-height: 40rpx;
box-sizing: border-box;
}
}
}
}
</style>

116
pagesTools/institution/editor.vue Normal file
View File

@@ -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>

200
pagesTools/institution/index.vue Normal file
View File

@@ -0,0 +1,200 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| 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">
<view class="main-list flex flex-wrap justify-content-between" v-if="institutionList.length">
<view class="list-item flex-direction-column align-items-center" v-for="item in institutionList" :key="item.id" @click="toDetails(item.id)">
<image class="item-icon" :src="item.icon" mode="aspectFill"></image>
<view class="item-text">{{ item.name }}</view>
</view>
</view>
<empty top="30%" title="暂无相关内容~" v-else></empty>
</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,
// 机构列表
institutionList: [],
// 分类查询参数
page: 1,
limit: 20,
hasMore: false,
};
},
computed: {
...mapState({
shareImage: state => state.app.shareImage,
shareTitle: state => state.app.shareTitle,
})
},
onLoad() {
uni.showLoading({
title: "加载中"
})
this.getInstitutionList(() => {
uni.hideLoading()
this.loadEnd = true
})
// #ifdef H5
this.initConfig()
// #endif
},
onPullDownRefresh() {
this.page = 1
this.getInstitutionList(() => {
uni.stopPullDownRefresh()
})
},
onReachBottom() {
if (this.hasMore) {
this.page++
this.getInstitutionList();
}
},
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
// 获取机构列表
getInstitutionList(fn) {
this.$util.request("institution.list", {
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.institutionList = this.page == 1 ? list : [...this.institutionList, ...list];
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
if (fn) fn()
console.error('获取机构列表', error)
})
},
// 跳转机构详情
toDetails(id) {
this.$util.toPage({
mode: 1,
path: "/pagesTools/institution/details?id=" + id
})
},
}
}
</script>
<style lang="scss">
.container {
.container-main {
padding: 32rpx;
.main-list {
row-gap: 32rpx;
.list-item {
width: calc(50% - 16rpx);
padding: 48rpx 32rpx;
border-radius: 16rpx;
background: #FFF;
.item-icon {
width: 144rpx;
height: 144rpx;
border-radius: 10rpx;
}
.item-text {
margin-top: 16rpx;
color: #5A5B6E;
font-size: 28rpx;
font-weight: 600;
line-height: 40rpx;
text-align: center;
}
}
}
}
}
</style>

120
pagesTools/institution/success.vue Normal file
View File

@@ -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="toBack">返回列表</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: {
// 返回列表
toBack() {
if (getCurrentPages().length == 1) {
this.$util.toPage({
mode: 1,
path: "/pages/index/index"
})
} else {
uni.navigateBack({
delta: 2,
})
}
},
}
}
</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>

283
pagesTools/phoneBook/index.vue Normal file
View File

@@ -0,0 +1,283 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| 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-search" :style="{top: titleBarHeight + 'px'}">
<view class="search-box flex align-items-center">
<image class="icon" src="/static/search.png" mode="aspectFit"></image>
<input class="input flex-item" placeholder="请输入关键词搜索" placeholder-class="placeholder" v-model="keyword" @confirm="getPhoneList()" />
</view>
</view>
<!-- 通讯录列表 -->
<view class="main-content" v-if="phoneList.length">
<!-- 正常排序 -->
<view class="content-list" v-if="sortOrder == 3">
<view class="list-box flex align-items-center" v-for="item in phoneList" :key="item.id" @click="onContact(item.mobile)">
<image class="box-avatar" :src="item.avatar" mode="aspectFill"></image>
<view class="box-info flex-item">
<view class="info-head flex align-items-center">
<view class="name">{{item.name}}</view>
<view class="level">{{item.level_name}}</view>
</view>
<view class="info-mobile">{{item.mobile}}</view>
</view>
<view class="box-btn">
<image class="icon" src="/static/contact/phone.png" mode="aspectFit"></image>
</view>
</view>
</view>
<!-- 首字母排序 -->
<view class="content-initial" v-else>
<view class="initial-item" v-for="(list, index) in phoneList" :key="index">
<view class="item-title">{{ list.key }}</view>
<view class="item-list">
<view class="list-box flex align-items-center" v-for="item in list.value" :key="item.id" @click="onContact(item.mobile)">
<image class="box-avatar" :src="item.avatar" mode="aspectFill"></image>
<view class="box-info flex-item">
<view class="info-head flex align-items-center">
<view class="name">{{item.name}}</view>
<view class="level">{{item.level_name}}</view>
</view>
<view class="info-mobile">{{item.mobile}}</view>
</view>
<view class="box-btn">
<image class="icon" src="/static/contact/phone.png" mode="aspectFit"></image>
</view>
</view>
</view>
</view>
</view>
</view>
<empty top="36%" title="暂无通讯人员~" v-else></empty>
</view>
<!-- 底部导航 -->
<tab-bar></tab-bar>
</view>
</template>
<script>
import { mapState } from "vuex"
export default {
data() {
return {
// 是否加载完成
loadEnd: false,
// 标题栏高度
titleBarHeight: 0,
// 搜索关键词
keyword: "",
// 排序方式
sortOrder: 0,
// 通讯列表
phoneList: []
};
},
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
},
onLoad() {
uni.showLoading({
title: "加载中"
})
this.getPhoneList(() => {
this.loadEnd = true
uni.hideLoading()
})
},
onPullDownRefresh() {
this.getPhoneList(() => {
uni.stopPullDownRefresh();
})
},
methods: {
// 获取通讯录
getPhoneList(fn) {
this.$util.request("member.addressBook", {
keywords: this.keyword,
}).then(res => {
if (fn) fn()
if (res.code == 1) {
this.sortOrder = res.data.address_book_sort_order
if (res.data.address_book_sort_order == 3) {
this.phoneList = res.data.data
} else {
this.phoneList = []
if (this.phoneList) {
try {
for (var key in res.data.data) {
this.phoneList.push({ key, value: res.data.data[key] })
}
} catch (error) {
this.phoneList = []
}
}
}
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
if (fn) fn()
console.error('获取通讯录', error)
})
},
// 拨打电话
onContact(phone) {
this.$util.toPage({
mode: 6,
phone: phone,
})
},
}
}
</script>
<style lang="scss">
.container {
.container-main {
.main-search {
position: sticky;
top: 0;
z-index: 99;
background: #FFF;
padding: 16rpx 32rpx;
.search-box {
border-radius: 10rpx;
background: #F9F9F9;
padding-left: 32rpx;
.icon {
width: 40rpx;
height: 40rpx;
}
.input {
color: #5A5B6E;
font-size: 28rpx;
line-height: 40rpx;
padding: 20rpx 32rpx 20rpx 16rpx;
}
.placeholder {
color: #BBB;
}
}
}
.main-content {
padding: 32rpx;
border-radius: 10rpx;
.content-initial {
padding: 32rpx;
border-radius: 10rpx;
background: #FFF;
.initial-item {
margin-top: 32rpx;
&:first-child {
margin-top: 0;
}
.item-title {
color: #5A5B6E;
font-size: 28rpx;
line-height: 40rpx;
}
.item-list {
margin-top: 32rpx;
}
}
}
.content-list {
padding: 32rpx;
border-radius: 10rpx;
background: #FFF;
.list-box {
margin-top: 48rpx;
}
}
.list-box {
margin-top: 32rpx;
&:first-child {
margin-top: 0;
}
.box-avatar {
width: 84rpx;
height: 84rpx;
border-radius: 50%;
}
.box-info {
margin-left: 32rpx;
.info-head {
.name {
color: #5A5B6E;
font-size: 32rpx;
font-weight: 600;
line-height: 44rpx;
}
.level {
margin-left: 16rpx;
color: #8D929C;
font-size: 28rpx;
line-height: 40rpx;
}
}
.info-mobile {
color: #5A5B6E;
font-size: 28rpx;
line-height: 40rpx;
}
}
.box-btn {
margin-left: 32rpx;
width: 64rpx;
height: 64rpx;
border-radius: 50%;
background: var(--theme-color);
padding: 8rpx;
}
}
}
}
}
</style>

253
pagesTools/publicize/index.vue Normal file
View File

@@ -0,0 +1,253 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| 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">
<!-- 标题栏 -->
<title-bar title="推广会员"></title-bar>
<!-- 内容区 -->
<view class="container-main flex-column" v-if="loadEnd">
<!-- 推广信息 -->
<view class="main-publicize">
<image class="publicize-image" src="/static/mine_bg.png" mode="widthFix"></image>
<view class="publicize-title">推广会员</view>
<view class="publicize-introduce">推广{{organize}}会员，为{{organize}}带来新活力</view>
<view class="publicize-button" :style="{background: themeColor}" @click="$refs.publicizePoster.generatePoster()">生成推广海报</view>
</view>
<!-- 推广人员列表 -->
<view class="main-list flex-item">
<!-- 筛选tab -->
<view class="main-list-title">
<view :style="{ color: isSelect == 0 ? themeColor : '#5A5B6E' }" @click="selectType(0)">普通用户({{userData.total || 0}}人)</view>
<view :style="{ color: isSelect == 1 ? themeColor : '#5A5B6E' }" @click="selectType(1)">{{organize}}会员({{memberData.total || 0}}人)</view>
</view>
<!-- 人员信息 -->
<view class="main-list-item">
<view class="list-item" v-if="isSelect == 0 && userData.total != 0" v-for="(item, index) in userData.data" :key="index">
<image :src="item.avatar" mode="aspectFit" class="list-item-img"></image>
<view class="list-item-phone text-ellipsis">{{item.mobile}}</view>
<view class="list-item-time">{{item.join_time}}</view>
</view>
<empty top="20%" title="暂无相关人员~" v-if="isSelect == 0 && userData.total == 0"></empty>
<view class="list-item" v-if="isSelect == 1 && memberData.total != 0" v-for="(item, index) in memberData.data" :key="index">
<image :src="item.member_avatar" mode="aspectFit" class="list-item-img"></image>
<view class="list-item-name text-ellipsis">{{item.member_name}}</view>
<view class="list-item-level text-ellipsis" :style="{color: themeColor}">{{item.level_name}}</view>
<view class="list-item-time">{{item.join_time}}</view>
</view>
<empty top="20%" title="暂无相关会员~" v-if="isSelect == 1 && memberData.total == 0"></empty>
</view>
</view>
</view>
<!-- 底部导航 -->
<tab-bar></tab-bar>
<!-- 推广海报 -->
<publicize-poster ref="publicizePoster" :show-data="posterData" @onChange="pageChange"></publicize-poster>
</view>
</template>
<script>
import { mapState } from "vuex"
import publicizePoster from "@/pagesTools/component/publicize/poster.vue"
export default {
components: {
publicizePoster,
},
data() {
return {
// 加载完成
loadEnd: false,
// 页面是否阻止滚动
pageShow: false,
// 列表类型
isSelect: 0,
// 会员数据
memberData: {},
// 用户列表
userData: {},
// 推广海报数据
posterData: {},
};
},
computed: {
...mapState({
themeColor: state => state.app.themeColor,
organize: state => state.app.organize,
})
},
onLoad() {
uni.showLoading({
title: "加载中"
})
this.getManList(() => {
uni.hideLoading()
this.loadEnd = true
})
},
onPullDownRefresh() {
this.getManList(() => {
uni.stopPullDownRefresh()
})
},
methods: {
// 改变页面滚动状态
pageChange(state) {
this.pageShow = state
},
// 获取推广会员数据
getManList(fn) {
this.$util.request("member.promotionList").then(res => {
if (fn) fn()
if (res.code == 1) {
this.memberData = res.data.member
this.userData = res.data.user
this.posterData = {
name: res.data.member_name,
avatar: res.data.member_avatar,
image: res.data.promotion_img,
businessName: res.data.business_association_name,
code: res.data.applet_qrcode_path
}
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
if (fn) fn()
console.error('获取推广人员', error)
})
},
// 切换人员类型
selectType(type) {
this.isSelect = type
this.getManList()
}
}
}
</script>
<style lang="scss">
page {
background: #FFFFFF;
}
.container {
.container-main {
.main-publicize {
padding: 48rpx 48rpx 68rpx;
position: relative;
overflow: hidden;
z-index: 1;
.publicize-image {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: -1;
}
.publicize-title {
font-size: 48rpx;
line-height: 68rpx;
color: #5A5B6E;
}
.publicize-introduce {
margin-top: 16rpx;
font-size: 28rpx;
line-height: 40rpx;
color: #5A5B6E;
}
.publicize-button {
margin-top: 16rpx;
padding: 14rpx 24rpx;
font-size: 24rpx;
line-height: 34rpx;
border-radius: 8rpx;
width: 192rpx;
color: #FFFFFF;
}
}
.main-list {
margin-top: -20rpx;
border-radius: 32rpx 32rpx 0rpx 0rpx;
background: #FFFFFF;
.main-list-title {
display: flex;
justify-content: space-between;
padding: 32rpx 114rpx 0rpx;
font-size: 28rpx;
line-height: 40rpx;
color: #5A5B6E;
}
.main-list-item {
padding: 48rpx;
.list-item {
display: flex;
align-items: center;
margin-top: 32rpx;
.list-item-img {
width: 64rpx;
height: 64rpx;
border-radius: 50%;
}
.list-item-name {
padding-left: 32rpx;
font-size: 28rpx;
line-height: 40rpx;
color: #5A5B6E;
}
.list-item-level {
flex: 1;
padding-left: 32rpx;
font-size: 28rpx;
line-height: 40rpx;
color: #5A5B6E;
}
.list-item-phone {
flex: 1;
padding-left: 32rpx;
font-size: 28rpx;
line-height: 40rpx;
color: #5A5B6E;
}
.list-item-time {
padding-left: 16rpx;
font-size: 28rpx;
line-height: 40rpx;
color: #5A5B6E;
}
&:first-child {
margin-top: 0;
}
}
}
}
}
}
</style>

468
pagesTools/questionnaire/details.vue Normal file
View File

@@ -0,0 +1,468 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| 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-question-info">
<view class="question-info-title text-ellipsis-more">{{questionDetails.data.title}}</view>
<view class="question-info-person flex align-items-center">
<image :src="questionDetails.data.avatar" mode="aspectFill" class="info-person-img"></image>
<view class="info-person-item">
<view class="flex align-items-center">
<view class="info-person-item-name">{{questionDetails.data.member_name}}</view>
<view class="info-person-item-level" :style="{ color: themeColor }">{{questionDetails.data.level_name}}</view>
</view>
<view class="info-person-item-time">{{questionDetails.data.createtime}}</view>
</view>
<!-- #ifdef MP-WEIXIN -->
<button open-type="share" class="info-person-button flex align-items-center" :style="{ background: themeColor }">
<image src="/static/invite.png" mode="aspectFill" class="info-person-button-icon"></image>邀请填写
</button>
<!-- #endif -->
</view>
<view class="question-info-time">结束时间：{{questionDetails.data.end_time}}</view>
<view class="question-info-introduce">
<text>{{questionDetails.data.content}}</text>
</view>
</view>
<!-- 问卷列表 -->
<question-problem ref="questionProblem" :show-data="questionDetails.topic" @onChange="pageChange"></question-problem>
<empty top="26%" title="暂无问题~" v-if="questionDetails.topic.length == 0"></empty>
<!-- 提交按钮 -->
<view class="main-bottom">
<view class="harmless-content-button" style="background: #bbb" v-if="questionDetails.data.non_member_answer_sheet_status == 2">仅会员可填写</view>
<view class="harmless-content-button" :style="{ background: themeColor }" @click="handleSubmit()" v-else>完成填写</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 questionProblem from "@/pagesTools/component/questionnaire/problem.vue"
// #ifdef H5
import wx from 'weixin-js-sdk';
// #endif
export default {
components: {
questionProblem
},
data() {
return {
// 加载完成
loadEnd: false,
// 问卷id
questionId: null,
// 问卷详情
questionDetails: {},
// 页面是否阻止滚动
pageShow: false,
// 是否显示登录提示
showLogin: false,
// 延时器
delayer: null,
};
},
computed: {
...mapState({
themeColor: state => state.app.themeColor,
questionnaireImg: state => state.app.questionnaireImg,
loginImg: state => state.app.loginImg,
})
},
onLoad(option) {
uni.showLoading({
title: "加载中"
})
this.questionId = option.id || option.scene
this.getQuestionDetails(() => {
uni.hideLoading()
this.loadEnd = true
// #ifdef H5
this.initConfig()
// #endif
})
},
onUnload() {
clearTimeout(this.delayer)
},
onShareAppMessage() {
return {
title: this.questionDetails.data.title,
path: '/pagesTools/questionnaire/details?id=' + this.questionId,
imageUrl: this.questionnaireImg,
}
},
onShareTimeline() {
return {
title: this.questionDetails.data.title,
path: '/pagesTools/questionnaire/details?id=' + this.questionId,
imageUrl: this.questionnaireImg,
}
},
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.questionDetails.data.title,
desc: "",
link: window.location.href,
imgUrl: this.questionnaireImg,
});
wx.updateTimelineShareData({
title: this.questionDetails.data.title,
link: window.location.href,
imgUrl: this.questionnaireImg,
});
});
} else {
uni.hideLoading()
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
uni.hideLoading()
console.error('通过config接口注入权限验证配置 ', error)
})
},
// #endif
// 完成填写
handleSubmit() {
uni.showLoading({
title: "提交中",
mask: true
})
this.$refs.questionProblem.getApplyField((data) => {
let fileList = []
for (let i in data) {
// 判断必填项是否为空
if (data[i].must == 1) {
let isEmpty = false
if (data[i].type == "text") {
if (!data[i].value) isEmpty = true
} else if (data[i].type == "checkbox") {
if (!data[i].value || !data[i].value.length) isEmpty = true
} else if (data[i].type == "images") {
if (!data[i].value || !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].topic + "不能为空"
})
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 == "images") {
for (let j in data[i].value) {
fileList.push({
index: i,
number: j,
value: data[i].value[j]
})
}
}
}
if (fileList.length) {
this.uploadFiles(fileList, (files) => {
for (let i in fileList) {
if (data[fileList[i].index].type == "images") {
data[fileList[i].index].value[fileList[i].number] = files[i]
}
}
this.submitQuestion(data)
})
} else {
this.submitQuestion(data)
}
})
},
// 提交事件
submitQuestion(data) {
data.forEach(item => {
if (item.value) {
item.content = item.value;
} else {
item.content = ''
}
if (item.explain) {
item.explain = item.explain;
} else {
item.explain = ''
}
if (item.type == 'images' || item.type == 'checkbox') {
item.content = item.content.toString()
}
});
this.$util.request("questionnaire.questionAdd", {
questionnaire_id: this.questionId,
content: JSON.stringify(data)
}).then(res => {
uni.hideLoading()
if (res.code == 1) {
uni.showToast({
title: "提交成功",
icon: "success",
mask: true,
duration: 1500
})
this.delayer = setTimeout(() => {
uni.navigateBack()
}, 1500)
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
})
}
}).catch(error => {
uni.hideLoading()
console.error('提交问卷', error)
})
},
// 上传文件
uploadFiles(list, fn) {
this.$util.uploadFileMultiple(list.map(item => item.value)).then(result => {
fn(result)
}).catch(error => {
console.error('上传文件 ', error)
})
},
// 获取问卷详情
getQuestionDetails(fn) {
this.$util.request("questionnaire.questionDetails", {
id: this.questionId
}).then(res => {
if (fn) fn()
if (res.code == 1) {
this.questionDetails = res.data
if (res.data.data.non_member_answer_sheet_status == 2) {
uni.showToast({
title: "该问卷仅会员可填写",
icon: "none",
duration: 2000
})
}
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
if (error == 401) {
this.showLogin = true
} else {
if (fn) fn()
console.error('获取问卷列表 ', error)
}
})
},
// 改变页面滚动状态
pageChange(state) {
this.pageShow = state
},
// 前往登录
toLogin() {
uni.redirectTo({
url: `/pagesTools/questionnaire/details?id=${this.questionId}`,
})
},
}
}
</script>
<style lang="scss">
.container {
.container-main {
padding: 32rpx 32rpx 144rpx 32rpx;
.main-question-info {
padding: 32rpx;
margin-bottom: 32rpx;
border-radius: 12rpx;
background: #FFFFFF;
.question-info-title {
margin-bottom: 32rpx;
font-size: 32rpx;
line-height: 44rpx;
font-weight: 600;
color: #5A5B6E;
}
.question-info-person {
margin-bottom: 32rpx;
.info-person-img {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
}
.info-person-item {
flex: 1;
padding-left: 16rpx;
.info-person-item-name {
font-size: 28rpx;
line-height: 40rpx;
color: #5A5B6E;
}
.info-person-item-level {
padding-left: 8rpx;
font-size: 28rpx;
line-height: 40rpx;
}
.info-person-item-time {
font-size: 24rpx;
line-height: 34rpx;
color: #8D929C;
}
}
.info-person-button {
padding: 12rpx;
font-size: 24rpx;
line-height: 34rpx;
border-radius: 8rpx;
color: #FFFFFF;
.info-person-button-icon {
padding-right: 8rpx;
width: 32rpx;
height: 32rpx;
}
}
}
.question-info-time {
margin-bottom: 32rpx;
padding: 16rpx 0rpx;
font-size: 24rpx;
line-height: 34rpx;
color: #5A5B6E;
border-radius: 8rpx;
text-align: center;
background: #EEF2FF;
}
.question-info-introduce {
font-size: 28rpx;
line-height: 40rpx;
color: #8D929C;
}
}
.main-bottom {
padding-top: 16rpx;
padding-bottom: 16rpx;
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
text-align: center;
background: #FFF;
z-index: 99;
.harmless-content-button {
margin-left: 26rpx;
margin-right: 26rpx;
width: 700rpx;
height: 80rpx;
background: rgba(50, 93, 255, 1);
color: rgba(255, 255, 255, 1);
text-align: center;
line-height: 80rpx;
border-radius: 16rpx;
}
.safe-padding {
width: 100%;
padding-bottom: constant(safe-area-inset-bottom);
/* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom);
/* 兼容 iOS >= 11.2 */
}
}
.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>

316
pagesTools/questionnaire/index.vue Normal file
View File

@@ -0,0 +1,316 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| 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">
<block v-if="loadEnd">
<view class="main-category" :style="{top: titleBarHeight + 'px'}">
<scroll-view scroll-x style="white-space: nowrap;">
<view class="category-item" @click="changeCategory(0)">
<view class="text" :class="{active: selectCategory == 0}">全部</view>
</view>
<view class="category-item" v-for="item in categoryList" :key="item.id" @click="changeCategory(item.id)">
<view class="text" :class="{active: selectCategory == item.id}">{{item.name}}</view>
</view>
</scroll-view>
</view>
<view class="main-column">
<question-item :show-data="questionList" @setShareData="setShareData"></question-item>
<empty top="36%" title="暂无问卷调查~" v-if="questionList.length == 0"></empty>
</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" :style="{background: themeColor}" @click="toLogin()">前往登录</view>
</view>
</view>
<!-- 底部导航 -->
<tab-bar></tab-bar>
</view>
</template>
<script>
import { mapState } from "vuex"
import questionItem from "@/pagesTools/component/questionnaire/index.vue"
// #ifdef H5
import wx from 'weixin-js-sdk';
// #endif
export default {
components: {
questionItem
},
data() {
return {
// 加载完成
loadEnd: false,
// 标题栏高度
titleBarHeight: 0,
// 分类列表
categoryList: [],
// 已选分类
selectCategory: 0,
// 问卷列表
questionList: [],
// 分类查询参数
page: 1,
limit: 20,
hasMore: false,
// 分享数据
shareData: {},
// 是否显示登录提示
showLogin: false,
};
},
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.getQuestionCategory()
this.getQuestionList()
// #ifdef H5
this.initConfig()
// #endif
},
onShow() {
if (this.loadEnd) {
uni.pageScrollTo({
scrollTop: 0,
duration: 0
});
this.page = 1
this.getQuestionList()
}
},
computed: {
...mapState({
themeColor: state => state.app.themeColor,
shareImage: state => state.app.shareImage,
shareTitle: state => state.app.shareTitle,
loginImg: state => state.app.loginImg,
})
},
onPullDownRefresh() {
this.page = 1
this.getQuestionList(() => {
uni.stopPullDownRefresh();
})
},
onReachBottom() {
if (this.hasMore) {
this.page++
this.getQuestionList();
}
},
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
// 获取问卷分类
getQuestionCategory() {
this.$util.request("questionnaire.questionCategory").then(res => {
if (res.code == 1) {
this.categoryList = res.data;
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
console.error('获取问卷分类', error)
})
},
// 获取问卷列表
getQuestionList(fn) {
let data = {
page: this.page,
limit: this.limit,
}
if (this.selectCategory) data.questionnaire_category_id = this.selectCategory
this.$util.request("questionnaire.questionList", 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.questionList = this.page == 1 ? list : [...this.questionList, ...list];
uni.hideLoading()
this.loadEnd = true
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
if (error == 401) {
this.showLogin = true
} else {
console.error('获取问卷列表', error)
}
})
},
// 更改分类
changeCategory(id) {
this.selectCategory = id
this.page = 1
this.getQuestionList()
},
// 设置分享数据
setShareData(data) {
this.shareData = data
},
// 前往登录
toLogin() {
uni.redirectTo({
url: "/pagesTools/questionnaire/index",
})
},
}
}
</script>
<style lang="scss">
.container {
.container-main {
.main-category {
background: #ffffff;
position: sticky;
top: 0;
z-index: 99;
padding: 0 32rpx;
.category-item {
padding: 0 32rpx;
display: inline-flex;
justify-content: center;
.text {
padding: 36rpx 0 32rpx;
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-column {
padding: 32rpx;
}
.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>

89
pagesTools/questionnaire/info.vue Normal file
View File

@@ -0,0 +1,89 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| 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">
<question-info :show-data="questionDetails" v-if="questionDetails.length"></question-info>
<empty top="26%" title="暂无问题~" v-else></empty>
</view>
<!-- 底部导航 -->
<tab-bar></tab-bar>
</view>
</template>
<script>
import { mapState } from "vuex"
import questionInfo from "@/pagesTools/component/questionnaire/info.vue"
export default {
components: {
questionInfo
},
data() {
return {
// 加载完成
loadEnd: false,
// 问卷id
questionId: 0,
// 问卷详情
questionDetails: [],
};
},
computed: {
...mapState({
themeColor: state => state.app.themeColor,
})
},
onLoad(option) {
uni.showLoading({
title: "加载中"
})
this.questionId = option.id
this.getQuestionDetails(() => {
uni.hideLoading()
this.loadEnd = true
})
},
methods: {
// 获取问卷详情
getQuestionDetails(fn) {
this.$util.request("questionnaire.renderDetails", {
questionnaire_id: this.questionId
}).then(res => {
if (fn) fn()
if (res.code == 1) {
this.questionDetails = res.data
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
if (fn) fn()
console.error('获取问卷详情', error)
})
},
}
}
</script>
<style lang="scss">
.container {
.container-main {
padding: 32rpx;
}
}
</style>

699
pagesTools/sequence/details.vue Normal file
View File

@@ -0,0 +1,699 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| 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-column">
<view class="column-title text-ellipsis-more">{{ chainsInfo.name }}</view>
<view class="column-publisher flex align-items-center">
<image class="publisher-avatar" :src="chainsInfo.avatar" mode="aspectFill"></image>
<view class="publisher-info">
<view class="info-top flex align-items-center">
<view class="top-name">{{ chainsInfo.member_name }}</view>
<view class="top-level">{{ chainsInfo.level_name }}</view>
</view>
<view class="info-time">{{ chainsInfo.createtime }}</view>
</view>
<!-- #ifdef MP-WEIXIN -->
<button class="publisher-share flex align-items-center" open-type="share">
<image class="share-icon" src="/static/invite.png" mode="aspectFill"></image>
<text class="share-text">邀请填写</text>
</button>
<!-- #endif -->
</view>
<view class="column-time">
<view class="time-text">结束时间：{{ chainsInfo.expire_time }}</view>
<view class="time-bg"></view>
</view>
<view class="column-content">
<text user-select>{{ chainsInfo.content }}</text>
</view>
</view>
<!-- 接龙完成情况 -->
<view class="main-situation">
<view class="situation-title">接龙完成情况</view>
<view class="situation-list" v-if="situationList.length">
<view class="list-item" :class="{select: item.status == 1}" v-for="(item, index) in situationList" :key="index" @click="handleFeedback(index)">
<text class="item-name">{{item.member_name}}</text>
<view class="item-select" v-if="item.status == 1">
<image src="/static/tick.png" mode="aspectFit"></image>
</view>
</view>
</view>
<view class="situation-empty" v-else>
<image class="empty-icon" src="/static/empty.png" mode="aspectFit"></image>
<view class="empty-text flex align-items-center">
<text class="text">暂无接龙人员，</text>
<view class="btn" @click="toFeedback()" v-if="userMobile">去反馈</view>
<button class="btn clear" open-type="getPhoneNumber" @getphonenumber="bindPhoneNumber" v-else>去反馈</button>
</view>
</view>
</view>
<!-- 底部按钮 -->
<view class="main-footer">
<view class="flex align-items-center">
<view class="footer-label" @click="onContact()">
<image class="label-icon" src="/static/phone.png" mode="aspectFit"></image>
<view class="label-text">联系电话</view>
</view>
<block v-if="feedbackResult.status == 2">
<view class="footer-btn flex-item" @click="toFeedback()" v-if="userMobile">我要接龙</view>
<button class="footer-btn flex-item clear" open-type="getPhoneNumber" @getphonenumber="bindPhoneNumber" v-else>我要接龙</button>
</block>
<view class="footer-btn flex-item" @click="viewFeedback(chainsInfo.id)" v-else>查看反馈</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" :style="{background: themeColor}" @click="toLogin()">前往登录</view>
</view>
</view>
</view>
</template>
<script>
import { mapState } from "vuex"
// #ifdef H5
import wx from 'weixin-js-sdk';
// #endif
export default {
data() {
return {
// 加载完成
loadEnd: false,
// 接龙id
chainsId: null,
// 反馈结果
feedbackResult: {},
// 接龙详情
chainsInfo: {},
// 接龙情况
situationList: [],
// 是否显示登录提示
showLogin: false,
};
},
computed: {
...mapState({
themeColor: state => state.app.themeColor,
jielongImg: state => state.app.jielongImg,
loginImg: state => state.app.loginImg,
userMobile: state => state.user.mobile,
})
},
onLoad(option) {
uni.showLoading({
title: "加载中"
})
this.chainsId = option.id || option.scene
this.getFeedbackResult()
this.getChainsInfo(() => {
uni.hideLoading()
this.loadEnd = true
// #ifdef H5
this.initConfig()
// #endif
})
},
onShow() {
if (this.loadEnd) {
this.getFeedbackResult()
this.getChainsInfo()
}
},
onShareAppMessage() {
return {
title: this.chainsInfo.name,
path: '/pagesTools/sequence/details?id=' + this.chainsId,
imageUrl: this.jielongImg,
}
},
onShareTimeline() {
return {
title: this.chainsInfo.name,
path: '/pagesTools/sequence/details?id=' + this.chainsId,
imageUrl: this.jielongImg,
}
},
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.chainsInfo.name,
desc: "",
link: window.location.href,
imgUrl: this.jielongImg,
});
wx.updateTimelineShareData({
title: this.chainsInfo.name,
link: window.location.href,
imgUrl: this.jielongImg,
});
});
} else {
uni.hideLoading()
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
uni.hideLoading()
console.error('通过config接口注入权限验证配置 ', error)
})
},
// #endif
// 获取详情
getChainsInfo(fn) {
this.$util.request("sequence.chainsDetails", {
id: this.chainsId,
}).then(res => {
if (res.code == 1) {
if (res.data.data.jielong_auth == 2) {
this.getMemberState(() => {
if (fn) fn()
this.chainsInfo = res.data.data
this.situationList = res.data.member_data
})
} else {
if (fn) fn()
this.chainsInfo = res.data.data
this.situationList = res.data.member_data
}
} else {
if (fn) fn()
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
if (fn) fn()
if (error == 401) {
this.showLogin = true
} else {
console.error('获取详情 ', error)
}
})
},
// 获取会员状态
getMemberState(fn) {
this.$util.request("member.state").then(res => {
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.switchTab({
url: "/pages/index/index"
})
}
}
})
} else {
uni.showModal({
title: "系统提示",
content: "此页面需成为会员后可查看！",
confirmColor: this.themeColor,
confirmText: "前往查看",
success: (res) => {
if (res.confirm) {
uni.switchTab({
url: "/pages/mine/index"
})
} else {
uni.switchTab({
url: "/pages/index/index"
})
}
}
})
}
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
console.error('获取会员状态 ', error)
})
},
// 获取反馈结果
getFeedbackResult() {
this.$util.request("sequence.feedbackResult", {
id: this.chainsId,
}).then(res => {
if (res.code == 1) {
this.feedbackResult = res.data
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
console.error('获取反馈结果', error)
})
},
// 点击名字去反馈
handleFeedback(index) {
if (!this.userMobile) return
const item = this.situationList[index]
if (this.chainsInfo.type == 2 && this.feedbackResult.id == item.id) {
if (this.feedbackResult.status == 1) {
uni.showToast({
title: "您已反馈过该接龙",
icon: "none",
duration: 2000,
})
} else {
this.getChainsSeniority(() => {
this.$util.toPage({
mode: 1,
path: `/pagesTools/sequence/feedback?id=${this.chainsId}`,
})
})
}
}
},
// 前往反馈
toFeedback() {
if (this.feedbackResult.status == 1) {
uni.showToast({
title: "您已反馈过该接龙",
icon: "none",
duration: 2000,
})
} else {
this.getChainsSeniority(() => {
this.$util.toPage({
mode: 1,
path: `/pagesTools/sequence/feedback?id=${this.chainsId}`,
})
})
}
},
// 获取限定接龙资格
getChainsSeniority(fn) {
if (this.chainsInfo.type == 2) {
uni.showLoading({
title: "加载中",
mask: true,
})
this.$util.request("sequence.chainsSeniority", {
id: this.chainsId,
}).then(res => {
uni.hideLoading()
if (res.code == 1) {
if (res.data.state == 1) {
fn()
} else {
uni.showToast({
title: "您无法参加此限定接龙，请联系管理员添加",
icon: 'none',
duration: 2500
})
}
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
uni.hideLoading()
console.error('获取限定接龙资格', error)
})
} else {
fn()
}
},
// 绑定手机号
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.toFeedback()
} 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'
})
}
},
// 查看反馈信息
viewFeedback(id) {
this.$util.toPage({
mode: 1,
path: "/pagesTools/sequence/feedInfo?id=" + id
})
},
// 联系电话
onContact() {
this.$util.toPage({
mode: 6,
phone: this.chainsInfo.mobile,
})
},
// 前往登录
toLogin() {
uni.redirectTo({
url: `/pagesTools/sequence/details?id=${this.chainsId}`,
})
},
}
}
</script>
<style lang="scss">
.container {
.container-main {
padding: 32rpx 32rpx 144rpx;
.main-column {
padding: 32rpx;
border-radius: 10rpx;
background: #FFFFFF;
.column-title {
color: #5A5B6E;
font-size: 32rpx;
font-weight: 600;
line-height: 44rpx;
}
.column-publisher {
margin-top: 32rpx;
.publisher-avatar {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
}
.publisher-info {
flex: 1;
margin-left: 16rpx;
.info-top {
.top-name {
color: #5A5B6E;
font-size: 28rpx;
font-weight: 600;
line-height: 40rpx;
}
.top-level {
margin-left: 8rpx;
color: var(--theme-color);
font-size: 28rpx;
line-height: 40rpx;
}
}
.info-time {
margin-top: 6rpx;
color: #8D929C;
font-size: 24rpx;
line-height: 34rpx;
}
}
.publisher-share {
margin-left: 24rpx;
padding: 12rpx;
border-radius: 8rpx;
background: var(--theme-color);
.share-icon {
width: 32rpx;
height: 32rpx;
margin-right: 8rpx;
}
.share-text {
color: #FFF;
font-size: 24rpx;
line-height: 34rpx;
}
}
}
.column-time {
position: relative;
z-index: 1;
margin-top: 32rpx;
padding: 16rpx 32rpx;
border-radius: 8rpx;
overflow: hidden;
background: #FFF;
.time-text {
color: #5A5B6E;
font-size: 24rpx;
line-height: 32rpx;
text-align: center;
}
.time-bg {
position: absolute;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: var(--theme-color);
opacity: .05;
}
}
.column-content {
margin-top: 32rpx;
color: #8D929C;
font-size: 28rpx;
line-height: 40rpx;
}
}
.main-situation {
padding: 32rpx;
border-radius: 10rpx;
background: #FFFFFF;
.situation-title {
color: #5A5B6E;
font-size: 28rpx;
font-weight: 600;
line-height: 40rpx;
}
.situation-list {
margin-top: 32rpx;
display: flex;
flex-wrap: wrap;
gap: 16rpx;
.list-item {
position: relative;
padding: 10rpx 14rpx;
border: 2rpx solid #F6F7FB;
border-radius: 8rpx;
background: #F6F7FB;
.item-name {
color: #5A5B6E;
font-size: 28rpx;
line-height: 40rpx;
}
.item-select {
position: absolute;
top: -2rpx;
right: -2rpx;
z-index: 1;
width: 16rpx;
height: 16rpx;
background: var(--theme-color);
border-radius: 50%;
overflow: hidden;
}
&.select {
border-color: var(--theme-color);
}
}
}
.situation-empty {
margin-top: 32rpx;
display: flex;
flex-direction: column;
align-items: center;
padding: 16rpx;
.empty-icon {
width: 128rpx;
height: 128rpx;
margin-bottom: 16rpx;
}
.empty-text {
.text {
color: #8D929C;
font-size: 28rpx;
line-height: 40rpx;
}
.btn {
color: var(--theme-color);
font-size: 28rpx;
line-height: 40rpx;
}
}
}
}
.main-footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: #FFF;
padding: 12rpx 24rpx;
z-index: 99;
.footer-label {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 32rpx;
.label-icon {
width: 52rpx;
height: 52rpx;
}
.label-text {
color: #5A5B6E;
text-align: center;
font-size: 20rpx;
line-height: 28rpx;
}
}
.footer-btn {
padding: 22rpx 32rpx;
background: var(--theme-color);
border-radius: 16rpx;
color: #FFF;
text-align: center;
font-size: 32rpx;
line-height: 44rpx;
}
}
.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>

205
pagesTools/sequence/feedInfo.vue Normal file
View File

@@ -0,0 +1,205 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| 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">
<view class="column-member flex align-items-center">
<image class="member-avatar" :src="memberInfo.avatar" mode="aspectFill"></image>
<view class="member-info">
<view class="info-top">
<view class="top-name">{{memberInfo.name}}</view>
<view class="top-level">{{memberInfo.member_level}}</view>
</view>
<view class="info-time">{{feedbackInfo.createtime}}</view>
</view>
</view>
<view class="column-form">
<view class="form-content" v-if="feedbackInfo.status">{{feedbackInfo.status}}</view>
<view class="form-content" v-if="feedbackInfo.content">
<text>{{feedbackInfo.content}}</text>
</view>
<view class="form-list flex flex-wrap" v-if="feedbackImages.length">
<view class="list-image" v-for="(image, index) in feedbackImages" :key="index">
<image class="image-box" :src="image" mode="aspectFill" @click="previewImage(index)"></image>
</view>
</view>
</view>
</view>
</view>
<!-- 底部导航 -->
<tab-bar></tab-bar>
</view>
</template>
<script>
import { mapState } from "vuex"
export default {
data() {
return {
// 加载状态
loadEnd: false,
// 反馈id
feedbackId: null,
// 用户信息
memberInfo: {},
// 反馈信息
feedbackInfo: {},
// 反馈图片
feedbackImages: [],
};
},
computed: {
...mapState({
themeColor: state => state.app.themeColor
}),
},
onLoad(option) {
this.feedbackId = option.id
uni.showLoading({
title: "加载中"
})
this.getDetails(() => {
this.loadEnd = true
uni.hideLoading()
})
},
methods: {
// 获取反馈详情
getDetails(fn) {
this.$util.request("sequence.feedbackDetails", {
jielong_id: this.feedbackId,
}).then(res => {
if (fn) fn()
if (res.code == 1) {
this.memberInfo = res.data.member_data
this.feedbackInfo = res.data.feedback_data
if (res.data.feedback_data.images) {
this.feedbackImages = res.data.feedback_data.images.split(",")
}
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
if (fn) fn()
console.error('获取反馈详情', error)
})
},
// 预览图片
previewImage(index) {
uni.previewImage({
urls: this.feedbackImages,
current: index,
})
},
}
}
</script>
<style lang="scss">
.container {
.container-main {
padding: 32rpx;
.main-column {
padding: 32rpx;
border-radius: 10rpx;
background: #FFFFFF;
.column-member {
.member-avatar {
margin-right: 16rpx;
width: 80rpx;
height: 80rpx;
border-radius: 50%;
}
.member-info {
.info-top {
display: flex;
align-items: center;
.top-name {
color: #5A5B6E;
font-size: 28rpx;
font-weight: 600;
line-height: 40rpx;
}
.top-level {
color: var(--theme-color);
margin-left: 8rpx;
font-size: 28rpx;
line-height: 20px;
}
}
.info-time {
margin-top: 6rpx;
color: #8D929C;
font-size: 24rpx;
line-height: 34rpx;
}
}
}
.column-form {
.form-content {
margin-top: 32rpx;
color: #8D929C;
font-size: 28rpx;
line-height: 40rpx;
}
.form-list {
margin-top: 32rpx;
border-radius: 16rpx;
row-gap: 24rpx;
column-gap: 3.5%;
.list-image {
position: relative;
width: 31%;
height: 0;
padding-top: 31%;
.image-box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 12rpx;
}
.image-close {
position: absolute;
z-index: 1;
top: -16rpx;
right: -16rpx;
width: 48rpx;
height: 48rpx;
}
}
}
}
}
}
}
</style>

370
pagesTools/sequence/feedback.vue Normal file
View File

@@ -0,0 +1,370 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| 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-form">
<view class="form-group">
<view class="group-title">1.署名<text class="symbol">*</text></view>
<input class="group-input" v-model="formData.name" type="text" />
</view>
<view class="form-group">
<view class="group-title">2.图片</view>
<view class="group-list flex flex-wrap">
<view class="list-image" v-for="(image, index) in selectImages" :key="index">
<image class="image-box" :src="image" mode="aspectFill" @click="previewImage(index)"></image>
<image class="image-close" src="/static/cancel.png" mode="aspectFit" @click="deleteImage(index)"></image>
</view>
<view class="list-upload" @click="chooseImage()" v-if="selectImages.length < 9">
<view class="upload-bg"></view>
<view class="upload-choose flex-direction-column flex-center">
<view class="choose-icon">
<image src="/static/camera.png" mode="aspectFit"></image>
</view>
<view class="choose-text">上传图片</view>
</view>
</view>
</view>
</view>
<view class="form-group">
<view class="group-title">3.内容</view>
<view class="group-textarea">
<textarea class="textarea" placeholder="请输入反馈内容" placeholder-class="placeholder" v-model="formData.content"></textarea>
</view>
</view>
</view>
<view class="main-btn">
<view class="btn" :style="{ background: themeColor }" @click="handleSubmit(1)">参加</view>
<view class="btn" :style="{ background: themeColorOne }" @click="handleSubmit(2)">不参加</view>
<view class="btn" :style="{ background: themeColorTwo }" @click="handleSubmit(3)">参加其它</view>
</view>
</view>
<!-- 底部导航 -->
<tab-bar></tab-bar>
</view>
</template>
<script>
import { mapState } from "vuex"
export default {
data() {
return {
// 加载完成
loadEnd: false,
// 接龙id
chainsId: null,
// 表单内容
formData: {},
// 已选择图片
selectImages: [],
// 延时器
delayer: null,
};
},
computed: {
...mapState({
themeColor: state => state.app.themeColor
}),
themeColorOne() {
return this.$util.hexToRgb(this.themeColor, 0.6);
},
themeColorTwo() {
return this.$util.hexToRgb(this.themeColor, 0.3);
}
},
onLoad(option) {
this.chainsId = option.id
uni.showLoading({
title: "加载中"
})
this.getFeedbackResult(() => {
uni.hideLoading()
this.loadEnd = true
})
},
onUnload() {
if (this.delayer) clearTimeout(this.delayer)
},
methods: {
// 获取反馈结果
getFeedbackResult(fn) {
this.$util.request("sequence.feedbackResult", {
id: this.chainsId,
}).then(res => {
if (fn) fn()
if (res.code == 1) {
this.formData = {
jielong_id: this.chainsId,
member_id: res.data.id,
name: res.data.member_name || res.data.name,
images: "",
content: "",
}
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
if (fn) fn()
console.error('获取反馈结果', error)
})
},
// 选择图片
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,
})
},
// 提交反馈
handleSubmit(status) {
this.formData.status = status
uni.showLoading({
title: "加载中",
mask: true
})
if (this.selectImages.length) {
this.$util.uploadFileMultiple(this.selectImages).then(result => {
this.formData.images = result.join(",")
this.submitEvent()
}).catch(error => {
uni.hideLoading()
console.error('上传文件 ', error)
})
} else {
this.submitEvent()
}
},
// 提交事件
submitEvent() {
this.$util.request("sequence.addFeedback", this.formData).then(res => {
uni.hideLoading()
if (res.code == 1) {
uni.showToast({
icon: "success",
title: "反馈成功",
mask: true,
duration: 1500
})
this.delayer = setTimeout(() => {
if (getCurrentPages().length == 1) {
this.$util.toPage({
mode: 1,
path: "/pages/index/index"
})
} else {
uni.navigateBack()
}
}, 1500)
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
uni.hideLoading()
console.error('提交反馈', error)
})
},
}
}
</script>
<style lang="scss">
.container {
.container-main {
padding: 48rpx;
.main-form {
.form-group {
margin-top: 32rpx;
&:first-child {
margin-top: 0;
}
.group-title {
color: #5A5B6E;
font-size: 32rpx;
font-weight: 600;
line-height: 44rpx;
.symbol {
color: #E60012;
}
}
.group-input {
margin-top: 32rpx;
padding: 36rpx 32rpx;
border-radius: 16rpx;
background: #FFFFFF;
color: #5A5B6E;
font-size: 28rpx;
line-height: 40rpx;
}
.group-list {
margin-top: 32rpx;
border-radius: 16rpx;
row-gap: 24rpx;
column-gap: 3.5%;
.list-image {
position: relative;
width: 31%;
height: 0;
padding-top: 31%;
.image-box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 12rpx;
}
.image-close {
position: absolute;
z-index: 1;
top: -16rpx;
right: -16rpx;
width: 48rpx;
height: 48rpx;
}
}
.list-upload {
position: relative;
width: 31%;
height: 0;
padding-top: 31%;
background: #FFF;
border-radius: 12rpx;
overflow: hidden;
.upload-bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: var(--theme-color);
opacity: 0.1;
}
.upload-choose {
position: absolute;
top: 20rpx;
right: 20rpx;
bottom: 20rpx;
left: 20rpx;
z-index: 1;
background: #FFF;
border-radius: 10rpx;
.choose-icon {
width: 80rpx;
height: 80rpx;
padding: 16rpx;
background: var(--theme-color);
border-radius: 50%;
overflow: hidden;
}
.choose-text {
margin-top: 16rpx;
color: var(--theme-color);
font-size: 28rpx;
line-height: 40rpx;
}
}
}
}
.group-textarea {
margin-top: 32rpx;
padding: 36rpx 32rpx;
border-radius: 16rpx;
background: #FFFFFF;
.textarea {
width: 100%;
height: 144rpx;
color: #ACADB7;
font-size: 28rpx;
line-height: 40rpx;
}
.placeholder {
color: #ACADB7;
}
}
}
}
.main-btn {
margin-top: 48rpx;
.btn {
margin-top: 16rpx;
padding: 28rpx 32rpx;
border-radius: 16rpx;
color: #FFFFFF;
text-align: center;
font-size: 28rpx;
line-height: 40rpx;
&:first-child {
margin-top: 0;
}
}
}
}
}
</style>

232
pagesTools/sequence/index.vue Normal file
View File

@@ -0,0 +1,232 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| 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">
<block v-if="loadEnd">
<!-- 活动接龙 -->
<view class="main-column">
<chains-item :show-data="chainsList" show-type="1" @setShareData="setShareData"></chains-item>
<empty top="36%" title="暂无活动接龙~" v-if="!chainsList.length"></empty>
</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" :style="{background: themeColor}" @click="toLogin()">前往登录</view>
</view>
</view>
<!-- 底部导航 -->
<tab-bar></tab-bar>
</view>
</template>
<script>
import { mapState } from "vuex"
import chainsItem from "@/pages/component/chains/index.vue"
// #ifdef H5
import wx from 'weixin-js-sdk';
// #endif
export default {
components: {
chainsItem,
},
data() {
return {
// 加载完成
loadEnd: false,
// 接龙列表
chainsList: [],
// 分类查询参数
page: 1,
limit: 20,
hasMore: false,
// 分享数据
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() {
uni.showLoading({
title: "加载中"
})
this.getChainsList(() => {
uni.hideLoading()
this.loadEnd = true
})
// #ifdef H5
this.initConfig()
// #endif
},
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,
}
},
onPullDownRefresh() {
this.page = 1
this.getChainsList(() => {
uni.stopPullDownRefresh();
})
},
onReachBottom() {
if (this.hasMore) {
this.page++
this.getChainsList();
}
},
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
// 获取接龙列表
getChainsList(fn) {
this.$util.request("sequence.chainsList", {
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.chainsList = this.page == 1 ? list : [...this.chainsList, ...list];
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
if (error == 401) {
this.showLogin = true
} else {
console.error('获取接龙列表 ', error)
}
})
},
// 设置分享数据
setShareData(data) {
this.shareData = data
},
// 前往登录
toLogin() {
uni.redirectTo({
url: "/pagesTools/sequence/index",
})
},
}
}
</script>
<style lang="scss">
.container {
.container-main {
padding: 32rpx;
.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>

438
pagesTools/suggest/index.vue Normal file
View File

@@ -0,0 +1,438 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| 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">
<!-- 表单 -->
<view class="main-form">
<view class="form-item">
<view class="item-title">标题</view>
<view class="item-input">
<input class="input" v-model="formData.title" type="text" placeholder="请输入需求建议标题" placeholder-class="placeholder" />
</view>
</view>
<view class="form-item">
<view class="item-title">内容</view>
<view class="item-input">
<textarea class="textarea" v-model="formData.content" placeholder="请输入需求建议内容" placeholder-class="placeholder" />
</view>
</view>
<view class="form-item">
<view class="item-title">图片</view>
<view class="item-upload">
<view class="upload-image" @click="previewImage()" v-if="selectImage">
<image class="image-select" :src="selectImage" mode="aspectFill"></image>
<image class="image-delete" src="/static/delete.png" mode="aspectFit" @click.stop="deleteImage()"></image>
</view>
<view class="upload-image" @click="chooseImage()" v-else>
<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 flex align-items-center" style="margin-top: 40rpx;">
<view class="item-radio" :class="{active: formData.is_anonymity == 1}" @click="changeAnonymity()">
<image class="radio-icon" src="/static/tick.png" mode="aspectFill"></image>
</view>
<view class="item-label" @click="changeAnonymity()">是否匿名提交</view>
<view class="item-tips flex-item flex align-items-center">
<image class="tips-icon" src="/static/warning.png" mode="aspectFill" @click="isShowTips = !isShowTips"></image>
<view class="tips-prompt flex flex-center" v-if="isShowTips">
<view class="prompt-triangle"></view>
<text class="prompt-text">不使用真实姓名进行提交</text>
</view>
</view>
</view>
</view>
<!-- 提交按钮 -->
<view class="main-footer">
<view class="footer-btn" @click="handleSubmit()">提交</view>
<view class="safe-padding"></view>
</view>
</view>
</view>
</template>
<script>
import { mapState } from "vuex"
export default {
data() {
return {
// 表单内容
formData: {
title: '',
content: '',
image: '',
is_anonymity: '',
},
// 已选择图片
selectImage: "",
// 是否显示匿名提示
isShowTips: false,
};
},
computed: {
...mapState({
themeColor: state => state.app.themeColor,
})
},
methods: {
// 选择图片
chooseImage() {
// #ifdef MP-WEIXIN
uni.chooseMedia({
count: 1,
mediaType: ['image'],
sourceType: ['album', 'camera'],
sizeType: ['compressed'],
success: (res) => {
this.selectImage = res.tempFiles[0].tempFilePath
}
})
// #endif
// #ifndef MP-WEIXIN
uni.chooseImage({
count: 1,
sourceType: ['album', 'camera'],
sizeType: ['compressed'],
success: (res) => {
this.selectImage = res.tempFilePaths[0]
}
});
// #endif
},
// 删除图片
deleteImage() {
this.selectImage = ""
},
// 预览图片
previewImage() {
uni.previewImage({
urls: this.selectImage,
current: 0,
})
},
// 修改匿名状态
changeAnonymity() {
if (this.formData.is_anonymity == 1) {
this.formData.is_anonymity = 2
} else {
this.formData.is_anonymity = 1
}
},
// 提交反馈
handleSubmit() {
if (!this.formData.title) {
uni.showToast({
title: "请输入需求建议标题",
icon: 'none',
duration: 2000
})
return
}
if (!this.formData.content) {
uni.showToast({
title: "请输入需求建议内容",
icon: 'none',
duration: 2000
})
return
}
if (this.selectImage) {
uni.showLoading({
title: "提交中",
mask: true
})
this.$util.uploadFile(this.selectImage).then(result => {
if (result.code == 1) {
this.formData.image = result.data.fullurl
this.submitEvent()
} else {
uni.hideLoading()
uni.showToast({
title: result?.msg || "上传失败",
icon: 'none',
duration: 2000
})
}
}).catch(error => {
uni.hideLoading()
console.error('上传图片 ', error)
})
} else {
uni.showLoading({
title: "提交中",
mask: true
})
this.submitEvent()
}
},
// 提交事件
submitEvent() {
this.$util.request("main.addDemand", this.formData).then(res => {
uni.hideLoading()
if (res.code == 1) {
uni.redirectTo({
url: "/pagesTools/suggest/success"
})
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
})
}
}).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;
}
.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;
}
}
.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-radio {
width: 32rpx;
height: 32rpx;
background: #D6DBDE;
border-radius: 50%;
.radio-icon {
width: 100%;
height: 100%;
display: none;
}
&.active {
background: var(--theme-color);
.radio-icon {
display: block;
}
}
}
.item-label {
padding-left: 16rpx;
color: #5A5B6E;
font-size: 28rpx;
line-height: 40rpx;
}
.item-tips {
position: relative;
margin-left: 16rpx;
.tips-icon {
width: 32rpx;
height: 32rpx;
}
.tips-prompt {
position: absolute;
left: 56rpx;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
.prompt-triangle {
width: 0;
height: 0;
margin-right: -2rpx;
border-top: 12rpx solid transparent;
border-bottom: 12rpx solid transparent;
border-right: 16rpx solid #333;
}
.prompt-text {
color: #FFF;
font-size: 24rpx;
line-height: 34rpx;
padding: 12rpx 16rpx;
background: #333;
border-radius: 10rpx;
}
}
}
}
}
.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>

108
pagesTools/suggest/success.vue Normal file
View File

@@ -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">
<!-- 标题栏 -->
<title-bar :showBack="true" title="提交成功"></title-bar>
<!-- 内容区 -->
<view class="container-main">
<view class="image" :style="{background: themeColor}">
<image src="/static/check.png" mode="aspectFit"></image>
</view>
<view class="text_black">
提交成功
</view>
<view class="text_size_28">
提交成功,感谢您提供的需求建议
</view>
<view class="back" @click="backHome" :style="{background: themeColor}">
返回首页
</view>
</view>
</view>
</template>
<script>
import { mapState } from "vuex"
export default {
computed: {
...mapState({
themeColor: state => state.app.themeColor
})
},
methods: {
// 返回首页
backHome() {
uni.switchTab({
url: "/pages/index/index"
})
}
}
}
</script>
<style lang="scss">
page {
background: #FFF;
}
.container {
.container-main {
padding: 0 24rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.image {
margin-top: 96rpx;
width: 160rpx;
height: 160rpx;
border-radius: 50%;
padding: 40rpx;
}
.back {
margin-top: 64rpx;
padding: 22rpx 0rpx 22rpx;
width: 100%;
line-height: 44rpx;
color: #FFF;
font-size: 32rpx;
text-align: center;
border-radius: 16rpx;
}
.text_black {
margin-top: 32rpx;
color: #000000;
font-size: 36rpx;
line-height: 50rpx;
}
.text_size_28 {
margin-top: 16rpx;
color: #979797;
font-size: 28rpx;
line-height: 40rpx;
}
.text_size_32 {
margin-top: 48rpx;
color: #979797;
font-size: 32rpx;
line-height: 44rpx;
}
}
}
</style>