活动按钮状态流转
This commit is contained in:
319
pagesTools/album/details.vue
Normal file
319
pagesTools/album/details.vue
Normal 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
176
pagesTools/album/index.vue
Normal 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
170
pagesTools/certificate/index.vue
Normal 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
64
pagesTools/certificate/result.vue
Normal 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
191
pagesTools/component/album/index.vue
Normal 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
296
pagesTools/component/publicize/poster.vue
Normal 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
167
pagesTools/component/questionnaire/index.vue
Normal 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
182
pagesTools/component/questionnaire/info.vue
Normal 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
513
pagesTools/component/questionnaire/problem.vue
Normal 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
418
pagesTools/institution/apply.vue
Normal 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
535
pagesTools/institution/details.vue
Normal 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
116
pagesTools/institution/editor.vue
Normal 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
200
pagesTools/institution/index.vue
Normal 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
120
pagesTools/institution/success.vue
Normal 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
283
pagesTools/phoneBook/index.vue
Normal 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
253
pagesTools/publicize/index.vue
Normal 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
468
pagesTools/questionnaire/details.vue
Normal 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
316
pagesTools/questionnaire/index.vue
Normal 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
89
pagesTools/questionnaire/info.vue
Normal 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
699
pagesTools/sequence/details.vue
Normal 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
205
pagesTools/sequence/feedInfo.vue
Normal 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
370
pagesTools/sequence/feedback.vue
Normal 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
232
pagesTools/sequence/index.vue
Normal 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
438
pagesTools/suggest/index.vue
Normal 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
108
pagesTools/suggest/success.vue
Normal 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>
|
||||
Reference in New Issue
Block a user