活动按钮状态流转
This commit is contained in:
119
pages/member/apply/editor.vue
Normal file
119
pages/member/apply/editor.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 编辑器 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 标题栏 -->
|
||||
<title-bar :showBack="true" title="介绍内容"></title-bar>
|
||||
<!-- 内容区 -->
|
||||
<view class="container-main">
|
||||
<sp-editor :toolbar-config="toolbarConfig" @init="initEditor" @upinImage="upinImage" @overMax="overMax" @exportHtml="exportHtml"></sp-editor>
|
||||
</view>
|
||||
<view class="safe-padding"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 页面参数
|
||||
params: null,
|
||||
// 编辑器实例
|
||||
editorIns: null,
|
||||
// 编辑器配置
|
||||
toolbarConfig: {
|
||||
excludeKeys: ['direction', 'date', 'lineHeight', 'letterSpacing', 'listCheck'],
|
||||
iconSize: '18px'
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
editorContent: state => state.app.editorContent,
|
||||
})
|
||||
},
|
||||
onLoad(option) {
|
||||
if (option.params) this.params = option.params;
|
||||
},
|
||||
methods: {
|
||||
// 超出最大内容限制
|
||||
overMax(e) {
|
||||
uni.showToast({
|
||||
title: "输入内容已超过最大字数限制"
|
||||
})
|
||||
},
|
||||
// 初始化编辑器
|
||||
initEditor(editor) {
|
||||
this.editorIns = editor
|
||||
this.editorIns.setContents({
|
||||
html: this.editorContent || ""
|
||||
})
|
||||
},
|
||||
// 上传图片
|
||||
upinImage(tempFiles, editorCtx) {
|
||||
let imageList = []
|
||||
// #ifdef MP-WEIXIN
|
||||
imageList = tempFiles.map(item => item.tempFilePath)
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
imageList = tempFiles.map(item => item.path)
|
||||
// #endif
|
||||
uni.showLoading({
|
||||
title: '上传中请稍后',
|
||||
mask: true
|
||||
})
|
||||
this.$util.uploadFileMultiple(imageList, [], 2).then(result => {
|
||||
result.forEach((item) => {
|
||||
editorCtx.insertImage({
|
||||
src: item,
|
||||
width: '80%',
|
||||
success: () => {
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
});
|
||||
}).catch(error => {
|
||||
console.error('上传图片 ', error)
|
||||
})
|
||||
},
|
||||
// 完成编辑
|
||||
exportHtml(e) {
|
||||
let pages = getCurrentPages()
|
||||
let prevPage = pages[pages.length - 2]
|
||||
prevPage.$vm.editorContent = {
|
||||
params: this.params,
|
||||
content: e,
|
||||
}
|
||||
uni.navigateBack()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.container-main {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
564
pages/member/apply/enterprise.vue
Normal file
564
pages/member/apply/enterprise.vue
Normal file
@@ -0,0 +1,564 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 企业/团体信息 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<page-meta :page-style="'overflow:' + (pageShow ? 'hidden' : 'visible')"></page-meta>
|
||||
<view class="container" :style="{'--theme-color': themeColor}">
|
||||
<!-- 标题栏 -->
|
||||
<title-bar :showBack="true" :title="memberType == 2 ? memberTypeConfig.enterprise : memberTypeConfig.group"></title-bar>
|
||||
<!-- 内容区 -->
|
||||
<view class="container-main" v-if="loadEnd">
|
||||
<view class="main-header" :style="{top: titleBarHeight + 'px'}">
|
||||
<view class="header-image" :style="{'background-image': 'url('+ iconSheet +')'}" v-if="iconSheet"></view>
|
||||
<view class="header-title">入会申请表</view>
|
||||
<view class="header-subtitle">填写完成提交后，审核时间为1~2天</view>
|
||||
</view>
|
||||
<view class="main-form">
|
||||
<member-apply ref="memberApply" :isApply="true" :show-type="memberType" :show-data="applyField" @onChange="pageChange"></member-apply>
|
||||
</view>
|
||||
<view class="main-footer">
|
||||
<view class="footer-btn" @click="heandleSubmit()" v-if="userMobile">提交申请</view>
|
||||
<button class="footer-btn clear" open-type="getPhoneNumber" @getphonenumber="bindPhoneNumber" v-else>提交申请</button>
|
||||
<view class="safe-padding"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
import memberApply from "@/pages/component/member/apply.vue"
|
||||
import svgData from "@/common/svg.js"
|
||||
export default {
|
||||
components: {
|
||||
memberApply,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 页面是否阻止滚动
|
||||
pageShow: false,
|
||||
// 加载完成
|
||||
loadEnd: false,
|
||||
// 标题栏高度
|
||||
titleBarHeight: 0,
|
||||
// 入会字段
|
||||
applyField: [],
|
||||
// 入会类型
|
||||
memberType: null,
|
||||
// 是否为重新申请
|
||||
isReapply: false,
|
||||
// 已上传图片列表
|
||||
uploadedList: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
iconSheet: state => {
|
||||
return svgData.svgToUrl("sheet", state.app.themeColor)
|
||||
},
|
||||
subscribeIds: state => state.app.subscribeNotifyIds,
|
||||
userMobile: state => state.user.mobile,
|
||||
memberTypeConfig: state => state.app.memberTypeConfig,
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
// #ifdef MP-WEIXIN
|
||||
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight
|
||||
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||||
this.titleBarHeight = statusBarHeight + (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
|
||||
// #endif
|
||||
},
|
||||
onLoad(option) {
|
||||
this.isReapply = option.reapply == 1 ? true : false
|
||||
uni.showLoading({
|
||||
title: "加载中"
|
||||
})
|
||||
this.memberType = option.type
|
||||
if (this.isReapply) {
|
||||
this.getMemberInfo(() => {
|
||||
this.loadEnd = true
|
||||
uni.hideLoading()
|
||||
})
|
||||
} else {
|
||||
this.getField(() => {
|
||||
this.loadEnd = true
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
let pages = getCurrentPages();
|
||||
if (pages[pages.length - 1].$vm.editorContent) {
|
||||
const result = pages[pages.length - 1].$vm.editorContent
|
||||
this.$refs.memberApply.setEditorData(result)
|
||||
delete pages[pages.length - 1].$vm.editorContent;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 改变页面滚动状态
|
||||
pageChange(state) {
|
||||
this.pageShow = state
|
||||
},
|
||||
// 获取入会字段
|
||||
getField(fn) {
|
||||
this.$util.request("member.field", {
|
||||
type: this.memberType
|
||||
}).then(res => {
|
||||
if (fn) fn()
|
||||
if (res.code == 1) {
|
||||
let list = []
|
||||
if (this.memberType == 2) {
|
||||
list = res.data.company
|
||||
} else {
|
||||
list = res.data.organize
|
||||
}
|
||||
list.forEach((item) => {
|
||||
if (item.type == "checkbox") {
|
||||
item.value = []
|
||||
} else if (item.type == "image") {
|
||||
if ((this.memberType == 2 && item.field == 'company_logo') || (this.memberType == 3 && item.field == 'organize_logo')) {
|
||||
item.value = ""
|
||||
} else {
|
||||
item.value = []
|
||||
}
|
||||
} else if (item.type == "cert") {
|
||||
item.value = {
|
||||
name: "",
|
||||
number: "",
|
||||
image: "",
|
||||
}
|
||||
} else if (item.type == "file") {
|
||||
item.value = []
|
||||
} else {
|
||||
item.value = ""
|
||||
}
|
||||
});
|
||||
this.applyField = list
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取入会字段 ', error)
|
||||
})
|
||||
},
|
||||
// 获取入会信息
|
||||
getMemberInfo(fn) {
|
||||
this.$util.request("member.applyDetails").then(res => {
|
||||
if (res.code == 1) {
|
||||
let list = []
|
||||
if (this.memberType == 2) {
|
||||
list = res.data.company
|
||||
} else {
|
||||
list = res.data.organize
|
||||
}
|
||||
this.uploadedList = []
|
||||
list.forEach((item) => {
|
||||
if (item.type == "checkbox") {
|
||||
if (item.value) item.value = item.value.split(",")
|
||||
else item.value = []
|
||||
} else if (item.type == "image") {
|
||||
if ((this.memberType == 2 && item.field == 'company_logo') || (this.memberType == 3 && item.field == 'organize_logo')) {
|
||||
if (item.value) {
|
||||
this.uploadedList.push(item.value)
|
||||
} else {
|
||||
item.value = ""
|
||||
}
|
||||
} else {
|
||||
if (item.value) {
|
||||
if (typeof(item.value) == "string") {
|
||||
item.value = item.value.split(",")
|
||||
}
|
||||
this.uploadedList = [...this.uploadedList, ...item.value]
|
||||
} else {
|
||||
item.value = []
|
||||
}
|
||||
}
|
||||
} else if (item.type == "cert") {
|
||||
if (!item.value) {
|
||||
item.value = {
|
||||
name: "",
|
||||
number: "",
|
||||
image: "",
|
||||
}
|
||||
} else if (item.value.image) {
|
||||
this.uploadedList.push(item.value.image)
|
||||
}
|
||||
} else if (item.type == "video") {
|
||||
this.uploadedList.push(item.value)
|
||||
} else if (item.type == "file") {
|
||||
if (item.value) {
|
||||
if (typeof(item.value) == "string") {
|
||||
item.value = item.value.split(",")
|
||||
}
|
||||
this.uploadedList = [...this.uploadedList, ...item.value.map(item => item.path)]
|
||||
} else {
|
||||
item.value = []
|
||||
}
|
||||
}
|
||||
});
|
||||
this.applyField = list
|
||||
if (fn) fn()
|
||||
} else {
|
||||
if (fn) fn()
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
if (fn) fn()
|
||||
console.error('获取入会信息 ', error)
|
||||
})
|
||||
},
|
||||
// 跳转入会协议
|
||||
toAgreement() {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pages/mine/settings/agreement?type=3"
|
||||
})
|
||||
},
|
||||
// 提交申请
|
||||
heandleSubmit() {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true
|
||||
})
|
||||
this.$refs.memberApply.getApplyField((data) => {
|
||||
let fileList = []
|
||||
for (let i in data) {
|
||||
// 判断必填项是否为空
|
||||
if (data[i].required == 1 && data[i].apply_show != 2) {
|
||||
let isEmpty = false
|
||||
if (data[i].type == "checkbox") {
|
||||
if (!data[i].value.length) isEmpty = true
|
||||
} else if (data[i].type == "image") {
|
||||
if ((this.memberType == 2 && data[i].field == "company_logo") || (this.memberType == 3 && data[i].field == "organize_logo")) {
|
||||
if (!data[i].value) isEmpty = true
|
||||
} else {
|
||||
if (!data[i].value.length) isEmpty = true
|
||||
}
|
||||
} else if (data[i].type == "cert") {
|
||||
if (!data[i].value.name || !data[i].value.number || !data[i].value.image) isEmpty = true
|
||||
} else if (data[i].type == "file") {
|
||||
if (!data[i].value.length) isEmpty = true
|
||||
} else {
|
||||
if (!data[i].value && data[i].value !== 0) isEmpty = true
|
||||
}
|
||||
if (isEmpty) {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: data[i].label + "不能为空"
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
// 判断证书是否合规
|
||||
if (data[i].type == "cert") {
|
||||
if (data[i].value.name || data[i].value.number || data[i].value.image) {
|
||||
if (!data[i].value.name || !data[i].value.number || !data[i].value.image) {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: data[i].label + "存在未填项"
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
// 设置字段值格式
|
||||
if (data[i].type == "number") {
|
||||
data[i].value = (data[i].value || data[i].value === 0) ? Number(data[i].value) : data[i].value
|
||||
} else if (data[i].type == "checkbox") {
|
||||
data[i].value = data[i].value.join()
|
||||
} else if (data[i].type == "image") {
|
||||
if ((this.memberType == 2 && data[i].field == "company_logo") || (this.memberType == 3 && data[i].field == "organize_logo")) {
|
||||
if (data[i].value && !this.uploadedList.includes(data[i].value)) {
|
||||
fileList.push({
|
||||
index: i,
|
||||
value: data[i].value
|
||||
})
|
||||
}
|
||||
} else {
|
||||
for (let j in data[i].value) {
|
||||
if (!this.uploadedList.includes(data[i].value[j])) {
|
||||
fileList.push({
|
||||
index: i,
|
||||
number: j,
|
||||
value: data[i].value[j]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (data[i].type == "video") {
|
||||
if (data[i].value && !this.uploadedList.includes(data[i].value)) {
|
||||
fileList.push({
|
||||
index: i,
|
||||
value: data[i].value
|
||||
})
|
||||
}
|
||||
} else if (data[i].type == "cert") {
|
||||
if (data[i].value.image && !this.uploadedList.includes(data[i].value.image)) {
|
||||
fileList.push({
|
||||
index: i,
|
||||
value: data[i].value.image
|
||||
})
|
||||
}
|
||||
} else if (data[i].type == "file") {
|
||||
for (let j in data[i].value) {
|
||||
if (!this.uploadedList.includes(data[i].value[j].path)) {
|
||||
fileList.push({
|
||||
index: i,
|
||||
number: j,
|
||||
value: data[i].value[j].path
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
this.subscribeMessage(() => {
|
||||
if (fileList.length) {
|
||||
this.uploadFiles(fileList, (files) => {
|
||||
for (let i in fileList) {
|
||||
if (data[fileList[i].index].type == "image") {
|
||||
if ((this.memberType == 2 && data[fileList[i].index].field == "company_logo") || (this.memberType == 3 && data[fileList[i].index].field == "organize_logo")) {
|
||||
data[fileList[i].index].value = files[i]
|
||||
} else {
|
||||
data[fileList[i].index].value[fileList[i].number] = files[i]
|
||||
}
|
||||
} else if (data[fileList[i].index].type == "video") {
|
||||
data[fileList[i].index].value = files[i]
|
||||
} else if (data[fileList[i].index].type == "cert") {
|
||||
data[fileList[i].index].value.image = files[i]
|
||||
} else if (data[fileList[i].index].type == "file") {
|
||||
data[fileList[i].index].value[fileList[i].number].path = files[i]
|
||||
}
|
||||
}
|
||||
this.submitEvent(data)
|
||||
})
|
||||
} else {
|
||||
this.submitEvent(data)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
// 绑定手机号
|
||||
bindPhoneNumber(e) {
|
||||
if (e.detail.errMsg == "getPhoneNumber:ok") {
|
||||
uni.showLoading({
|
||||
mask: true,
|
||||
title: "加载中",
|
||||
})
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: loginRes => {
|
||||
let data = e.detail
|
||||
data.code = loginRes.code
|
||||
this.$util.request("login.bindMobile", data).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.code == 1) {
|
||||
this.$store.commit('user/updateMobile', res.data.phoneNumber)
|
||||
this.heandleSubmit()
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('获取用户手机号码 ', error)
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "授权手机号失败，请重试"
|
||||
})
|
||||
}
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '获取手机号失败，请重新获取',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
// 上传文件
|
||||
uploadFiles(list, fn) {
|
||||
this.$util.uploadFileMultiple(list.map(item => item.value)).then(result => {
|
||||
fn(result)
|
||||
}).catch(error => {
|
||||
console.error('上传文件 ', error)
|
||||
})
|
||||
},
|
||||
// 提交事件
|
||||
submitEvent(data) {
|
||||
for (let i in data) {
|
||||
if (data[i].type == "image" && typeof(data[i].value) == "object") {
|
||||
data[i].value = data[i].value.join()
|
||||
}
|
||||
}
|
||||
let fields = {
|
||||
person: getApp().globalData.applyField,
|
||||
}
|
||||
if (this.memberType == 2) fields.company = data
|
||||
else fields.organize = data
|
||||
this.$util.request("member.apply", {
|
||||
type: this.memberType,
|
||||
data: JSON.stringify(fields)
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
getApp().globalData.applyField = []
|
||||
uni.reLaunch({
|
||||
url: "/pages/member/apply/success",
|
||||
success: () => {
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('提交入会申请 ', error)
|
||||
})
|
||||
},
|
||||
// 订阅消息
|
||||
subscribeMessage(fn, number = 0) {
|
||||
// #ifdef MP-WEIXIN
|
||||
let tmplIds = []
|
||||
if (this.subscribeIds?.applet_initiation_audit) tmplIds.push(this.subscribeIds.applet_initiation_audit)
|
||||
if (this.subscribeIds?.applet_initiation_success) tmplIds.push(this.subscribeIds.applet_initiation_success)
|
||||
if (this.subscribeIds?.applet_member_expiretime) tmplIds.push(this.subscribeIds.applet_member_expiretime)
|
||||
uni.requestSubscribeMessage({
|
||||
tmplIds,
|
||||
success: () => {
|
||||
fn()
|
||||
},
|
||||
fail: (error) => {
|
||||
if (error.errCode == 20004) {
|
||||
uni.hideLoading()
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '请前往设置打开接受通知',
|
||||
confirmColor: this.themeColor,
|
||||
confirmText: '继续提交',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
fn()
|
||||
}
|
||||
},
|
||||
})
|
||||
} else if (error.errCode) {
|
||||
uni.hideLoading()
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '消息订阅失败，无法接收到会员通知，错误码：' + error.errCode,
|
||||
confirmColor: this.themeColor,
|
||||
confirmText: '继续提交',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
fn()
|
||||
}
|
||||
},
|
||||
})
|
||||
} else if (++number > 3) {
|
||||
this.subscribeMessage(fn, number)
|
||||
} else {
|
||||
fn()
|
||||
}
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
fn()
|
||||
// #endif
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
.container-main {
|
||||
padding-bottom: 112rpx;
|
||||
|
||||
.main-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 96;
|
||||
background: linear-gradient(0deg, #F6F7FB, var(--theme-color) 316.667%);
|
||||
padding: 80rpx 48rpx 68rpx;
|
||||
|
||||
.header-image {
|
||||
position: absolute;
|
||||
top: 64rpx;
|
||||
right: 48rpx;
|
||||
width: 218rpx;
|
||||
height: 198rpx;
|
||||
background-size: 218rpx 198rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
color: var(--theme-color);
|
||||
font-size: 48rpx;
|
||||
font-weight: 600;
|
||||
line-height: 68rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
margin-top: 32rpx;
|
||||
color: #999999;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.main-form {
|
||||
padding: 22rpx 48rpx 32rpx;
|
||||
}
|
||||
|
||||
.main-footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 96;
|
||||
background: #ffffff;
|
||||
border-top: 1rpx solid #F6F7FB;
|
||||
padding: 20rpx 24rpx 12rpx;
|
||||
|
||||
.footer-btn {
|
||||
color: #ffffff;
|
||||
font-size: 32rpx;
|
||||
line-height: 44rpx;
|
||||
padding: 22rpx 24rpx;
|
||||
border-radius: 16rpx;
|
||||
background: var(--theme-color);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
846
pages/member/apply/index.vue
Normal file
846
pages/member/apply/index.vue
Normal file
@@ -0,0 +1,846 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 申请入会 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<page-meta :page-style="'overflow:' + (pageShow ? 'hidden' : 'visible')"></page-meta>
|
||||
<view class="container" :style="{'--theme-color': themeColor}">
|
||||
<!-- 标题栏 -->
|
||||
<title-bar :showBack="true" title="申请入会"></title-bar>
|
||||
<!-- 内容区 -->
|
||||
<view class="container-main" v-if="loadEnd">
|
||||
<view class="main-header" :style="{top: titleBarHeight + 'px'}">
|
||||
<view class="header-tips" v-if="memberState.state == 2">驳回原因：{{memberState.reject}}</view>
|
||||
<view class="header-box">
|
||||
<view class="box-image" :style="{'background-image': 'url('+ iconSheet +')'}" v-if="iconSheet"></view>
|
||||
<view class="box-title">入会申请表</view>
|
||||
<view class="box-subtitle">填写完成提交后，审核时间为1~2天</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="main-form">
|
||||
<view class="form-item" @click="selectMemberType">
|
||||
<view class="item-title"><text>*</text>入会类型</view>
|
||||
<view class="item-input">
|
||||
<view class="input" v-if="memberType">
|
||||
<text v-for="item in typeList" :key="item.id" v-if="memberType == item.id">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="input placeholder" v-else>请选择入会类型</view>
|
||||
<image class="icon" src="/static/right.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
<member-apply ref="memberApply" :isApply="true" :show-type="1" :show-data="applyField" @onChange="pageChange"></member-apply>
|
||||
</view>
|
||||
<view class="main-footer">
|
||||
<view class="footer-read flex align-items-center" @click="isRead = !isRead">
|
||||
<view class="radio" :class="{active: isRead}">
|
||||
<image src="/static/tick.png" mode="aspectFill" v-if="isRead"></image>
|
||||
</view>
|
||||
<view class="label flex-item">请仔细阅读并同意 <text @click.stop="toAgreement()">《入会协议》</text></view>
|
||||
</view>
|
||||
<view class="footer-btn" @click="heandleSubmit()" v-if="userMobile">{{memberType == 1 ? "提交申请" : "下一步"}}</view>
|
||||
<button class="footer-btn clear" open-type="getPhoneNumber" @getphonenumber="bindPhoneNumber" v-else>{{memberType == 1 ? "提交申请" : "下一步"}}</button>
|
||||
<view class="safe-padding"></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 入会类型选择 -->
|
||||
<select-picker ref="selectPicker" title="入会类型" @onChange="pageChange" @confirm="changeMemberType"></select-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
import memberApply from "@/pages/component/member/apply.vue"
|
||||
import selectPicker from "@/pages/component/picker/select.vue"
|
||||
import svgData from "@/common/svg.js"
|
||||
export default {
|
||||
components: {
|
||||
memberApply,
|
||||
selectPicker,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 页面是否阻止滚动
|
||||
pageShow: false,
|
||||
// 加载完成
|
||||
loadEnd: false,
|
||||
// 标题栏高度
|
||||
titleBarHeight: 0,
|
||||
// 入会类型列表
|
||||
typeList: [],
|
||||
// 已选入会类型
|
||||
memberType: null,
|
||||
// 入会字段
|
||||
applyField: [],
|
||||
// 会员状态
|
||||
memberState: {},
|
||||
// 是否已读
|
||||
isRead: false,
|
||||
// 重新申请时的入会类型
|
||||
reapplyType: null,
|
||||
// 已上传图片列表
|
||||
uploadedList: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
iconSheet: state => {
|
||||
return svgData.svgToUrl("sheet", state.app.themeColor)
|
||||
},
|
||||
subscribeIds: state => state.app.subscribeNotifyIds,
|
||||
userMobile: state => state.user.mobile,
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
// #ifdef MP-WEIXIN
|
||||
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight
|
||||
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||||
this.titleBarHeight = statusBarHeight + (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
|
||||
// #endif
|
||||
},
|
||||
onLoad() {
|
||||
uni.showLoading({
|
||||
title: "加载中"
|
||||
})
|
||||
this.getMemberState(() => {
|
||||
this.loadEnd = true
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
let pages = getCurrentPages();
|
||||
if (pages[pages.length - 1].$vm.editorContent) {
|
||||
const result = pages[pages.length - 1].$vm.editorContent
|
||||
this.$refs.memberApply.setEditorData(result)
|
||||
delete pages[pages.length - 1].$vm.editorContent;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 改变页面滚动状态
|
||||
pageChange(state) {
|
||||
this.pageShow = state
|
||||
},
|
||||
// 获取入会类型
|
||||
getMemberType(fn) {
|
||||
this.$util.request("member.type").then(res => {
|
||||
if (res.code == 1) {
|
||||
this.typeList = res.data.map(item => {
|
||||
return {
|
||||
id: item.type,
|
||||
name: item.name
|
||||
}
|
||||
})
|
||||
this.memberType = this.typeList[0].id
|
||||
if (fn) fn()
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取入会类型 ', error)
|
||||
})
|
||||
},
|
||||
// 获取会员状态
|
||||
getMemberState(fn) {
|
||||
this.$util.request("member.state").then(res => {
|
||||
if (res.code == 1) {
|
||||
this.memberState = res.data.state
|
||||
if (this.memberState.state == -1) {
|
||||
this.getMemberType(() => {
|
||||
this.getField(fn)
|
||||
})
|
||||
} else if (this.memberState.state == 2) {
|
||||
this.getMemberType()
|
||||
this.getMemberInfo(fn)
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
uni.showModal({
|
||||
title: "系统提示",
|
||||
content: "您已提交入会申请，无需重复提交",
|
||||
cancelText: "返回",
|
||||
confirmText: "前往查看",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.switchTab({
|
||||
url: "/pages/mine/index"
|
||||
})
|
||||
} else {
|
||||
if (getCurrentPages().length == 1) {
|
||||
uni.switchTab({
|
||||
url: "/pages/index/index"
|
||||
})
|
||||
} else {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取会员状态 ', error)
|
||||
})
|
||||
},
|
||||
// 获取入会字段
|
||||
getField(fn) {
|
||||
this.$util.request("member.field", {
|
||||
type: this.memberType
|
||||
}).then(res => {
|
||||
if (fn) fn()
|
||||
if (res.code == 1) {
|
||||
let list = []
|
||||
if (this.memberType == 1) {
|
||||
list = res.data
|
||||
} else {
|
||||
list = res.data.person
|
||||
}
|
||||
list.forEach((item) => {
|
||||
if (item.type == "checkbox") {
|
||||
item.value = []
|
||||
} else if (item.type == "text" && item.field == "address") {
|
||||
item.value = {
|
||||
latitude: "",
|
||||
longitude: "",
|
||||
name: "",
|
||||
address: ""
|
||||
}
|
||||
} else if (item.type == "image") {
|
||||
if (item.field == "avatar") {
|
||||
item.value = ""
|
||||
} else {
|
||||
item.value = []
|
||||
}
|
||||
} else if (item.type == "cert") {
|
||||
item.value = {
|
||||
name: "",
|
||||
number: "",
|
||||
image: "",
|
||||
}
|
||||
} else if (item.type == "file") {
|
||||
item.value = []
|
||||
} else {
|
||||
item.value = ""
|
||||
}
|
||||
});
|
||||
this.applyField = list
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取入会字段 ', error)
|
||||
})
|
||||
},
|
||||
// 获取入会信息
|
||||
getMemberInfo(fn) {
|
||||
this.$util.request("member.applyDetails").then(res => {
|
||||
if (res.code == 1) {
|
||||
let list = []
|
||||
if (res.data.company) {
|
||||
this.memberType = 2
|
||||
this.reapplyType = 2
|
||||
list = res.data.person
|
||||
} else if (res.data.organize) {
|
||||
this.memberType = 3
|
||||
this.reapplyType = 3
|
||||
list = res.data.person
|
||||
} else {
|
||||
this.memberType = 1
|
||||
this.reapplyType = 1
|
||||
list = res.data
|
||||
}
|
||||
this.uploadedList = []
|
||||
list.forEach((item) => {
|
||||
if (item.type == "checkbox") {
|
||||
if (item.value) item.value = item.value.split(",")
|
||||
else item.value = []
|
||||
} else if (item.type == "text" && item.field == "address") {
|
||||
if (!item.value) {
|
||||
item.value = {
|
||||
latitude: "",
|
||||
longitude: "",
|
||||
name: "",
|
||||
address: ""
|
||||
}
|
||||
}
|
||||
} else if (item.type == "image") {
|
||||
if (item.field == "avatar") {
|
||||
if (item.value) {
|
||||
this.uploadedList.push(item.value)
|
||||
} else {
|
||||
item.value = ""
|
||||
}
|
||||
} else {
|
||||
if (item.value) {
|
||||
if (typeof(item.value) == "string") {
|
||||
item.value = item.value.split(",")
|
||||
}
|
||||
this.uploadedList = [...this.uploadedList, ...item.value]
|
||||
} else {
|
||||
item.value = []
|
||||
}
|
||||
}
|
||||
} else if (item.type == "cert") {
|
||||
if (!item.value) {
|
||||
item.value = {
|
||||
name: "",
|
||||
number: "",
|
||||
image: "",
|
||||
}
|
||||
} else if (item.value.image) {
|
||||
this.uploadedList.push(item.value.image)
|
||||
}
|
||||
} else if (item.type == "video") {
|
||||
this.uploadedList.push(item.value)
|
||||
} else if (item.type == "file") {
|
||||
if (item.value) {
|
||||
if (typeof(item.value) == "string") {
|
||||
item.value = item.value.split(",")
|
||||
}
|
||||
this.uploadedList = [...this.uploadedList, ...item.value.map(item => item.path)]
|
||||
} else {
|
||||
item.value = []
|
||||
}
|
||||
}
|
||||
});
|
||||
this.applyField = list
|
||||
if (fn) fn()
|
||||
} else {
|
||||
if (fn) fn()
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
if (fn) fn()
|
||||
console.error('获取入会信息 ', error)
|
||||
})
|
||||
},
|
||||
// 跳转入会协议
|
||||
toAgreement() {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pages/mine/settings/agreement?type=3"
|
||||
})
|
||||
},
|
||||
// 选择入会类型
|
||||
selectMemberType() {
|
||||
this.$refs.selectPicker.open(this.typeList, this.memberType)
|
||||
},
|
||||
// 改变入会类型
|
||||
changeMemberType(value) {
|
||||
this.memberType = value.id
|
||||
uni.showLoading({
|
||||
title: "加载中"
|
||||
})
|
||||
if (this.memberState.state == 2 && this.reapplyType == this.memberType) {
|
||||
this.getMemberInfo(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
} else {
|
||||
this.getField(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
},
|
||||
// 提交申请
|
||||
heandleSubmit() {
|
||||
if (!this.isRead) {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "请仔细阅读并同意《入会协议》"
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true
|
||||
})
|
||||
this.$refs.memberApply.getApplyField((data) => {
|
||||
let fileList = []
|
||||
for (let i in data) {
|
||||
// 判断必填项是否为空
|
||||
if (data[i].required == 1 && data[i].apply_show != 2) {
|
||||
let isEmpty = false
|
||||
if (data[i].type == "text" && data[i].field == "address") {
|
||||
if (!data[i].value.address) isEmpty = true
|
||||
} else if (data[i].type == "checkbox") {
|
||||
if (!data[i].value.length) isEmpty = true
|
||||
} else if (data[i].type == "image") {
|
||||
if (data[i].field == "avatar") {
|
||||
if (!data[i].value) isEmpty = true
|
||||
} else {
|
||||
if (!data[i].value.length) isEmpty = true
|
||||
}
|
||||
} else if (data[i].type == "cert") {
|
||||
if (!data[i].value.name || !data[i].value.number || !data[i].value.image) isEmpty = true
|
||||
} else if (data[i].type == "file") {
|
||||
if (!data[i].value.length) isEmpty = true
|
||||
} else {
|
||||
if (!data[i].value && data[i].value !== 0) isEmpty = true
|
||||
}
|
||||
if (isEmpty) {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: data[i].label + "不能为空"
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
// 判断手机号是否合规
|
||||
if (data[i].type == "number" && data[i].field == "mobile") {
|
||||
if (!this.$util.validation("phone", data[i].value)) {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "请输入正确的手机号"
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
// 判断证书是否合规
|
||||
if (data[i].type == "cert") {
|
||||
if (data[i].value.name || data[i].value.number || data[i].value.image) {
|
||||
if (!data[i].value.name || !data[i].value.number || !data[i].value.image) {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: data[i].label + "存在未填项"
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
// 设置字段值格式
|
||||
if (data[i].type == "number") {
|
||||
data[i].value = (data[i].value || data[i].value === 0) ? Number(data[i].value) : data[i].value
|
||||
} else if (data[i].type == "checkbox") {
|
||||
data[i].value = data[i].value.join()
|
||||
} else if (data[i].type == "image") {
|
||||
if (data[i].field == "avatar") {
|
||||
if (data[i].value && !this.uploadedList.includes(data[i].value)) {
|
||||
fileList.push({
|
||||
index: i,
|
||||
value: data[i].value
|
||||
})
|
||||
}
|
||||
} else {
|
||||
for (let j in data[i].value) {
|
||||
if (!this.uploadedList.includes(data[i].value[j])) {
|
||||
fileList.push({
|
||||
index: i,
|
||||
number: j,
|
||||
value: data[i].value[j]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (data[i].type == "cert") {
|
||||
if (data[i].value.image && !this.uploadedList.includes(data[i].value.image)) {
|
||||
fileList.push({
|
||||
index: i,
|
||||
value: data[i].value.image
|
||||
})
|
||||
}
|
||||
} else if (data[i].type == "video") {
|
||||
if (data[i].value && !this.uploadedList.includes(data[i].value)) {
|
||||
fileList.push({
|
||||
index: i,
|
||||
value: data[i].value
|
||||
})
|
||||
}
|
||||
} else if (data[i].type == "file") {
|
||||
for (let j in data[i].value) {
|
||||
if (!this.uploadedList.includes(data[i].value[j].path)) {
|
||||
fileList.push({
|
||||
index: i,
|
||||
number: j,
|
||||
value: data[i].value[j].path
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
this.subscribeMessage(() => {
|
||||
this.checkPhone(data, (result) => {
|
||||
if (result) {
|
||||
if (fileList.length) {
|
||||
this.uploadFiles(fileList, (files) => {
|
||||
for (let i in fileList) {
|
||||
if (data[fileList[i].index].type == "image") {
|
||||
if (data[fileList[i].index].field == "avatar") {
|
||||
data[fileList[i].index].value = files[i]
|
||||
} else {
|
||||
data[fileList[i].index].value[fileList[i].number] = files[i]
|
||||
}
|
||||
} else if (data[fileList[i].index].type == "video") {
|
||||
data[fileList[i].index].value = files[i]
|
||||
} else if (data[fileList[i].index].type == "cert") {
|
||||
data[fileList[i].index].value.image = files[i]
|
||||
} else if (data[fileList[i].index].type == "file") {
|
||||
data[fileList[i].index].value[fileList[i].number].path = files[i]
|
||||
}
|
||||
}
|
||||
this.submitEvent(data)
|
||||
})
|
||||
} else {
|
||||
this.submitEvent(data)
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "该手机号已被使用，请更换手机号",
|
||||
icon: "none"
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
// 绑定手机号
|
||||
bindPhoneNumber(e) {
|
||||
if (e.detail.errMsg == "getPhoneNumber:ok") {
|
||||
uni.showLoading({
|
||||
mask: true,
|
||||
title: "加载中",
|
||||
})
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: loginRes => {
|
||||
let data = e.detail
|
||||
data.code = loginRes.code
|
||||
this.$util.request("login.bindMobile", data).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.code == 1) {
|
||||
this.$store.commit('user/updateMobile', res.data.phoneNumber)
|
||||
this.heandleSubmit()
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('获取用户手机号码 ', error)
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "授权手机号失败，请重试"
|
||||
})
|
||||
}
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '获取手机号失败，请重新获取',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
// 上传文件
|
||||
uploadFiles(list, fn) {
|
||||
this.$util.uploadFileMultiple(list.map(item => item.value)).then(result => {
|
||||
fn(result)
|
||||
}).catch(error => {
|
||||
console.error('上传文件 ', error)
|
||||
})
|
||||
},
|
||||
// 提交事件
|
||||
submitEvent(data) {
|
||||
for (let i in data) {
|
||||
if (data[i].type == "image" && typeof(data[i].value) == "object") {
|
||||
data[i].value = data[i].value.join()
|
||||
}
|
||||
}
|
||||
if (this.memberType == 1) {
|
||||
this.$util.request("member.apply", {
|
||||
type: this.memberType,
|
||||
data: JSON.stringify(data)
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
uni.redirectTo({
|
||||
url: "/pages/member/apply/success",
|
||||
success: () => {
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('提交入会申请 ', error)
|
||||
})
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
getApp().globalData.applyField = data
|
||||
if (this.memberState.state == 2 && this.reapplyType == this.memberType) {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pages/member/apply/enterprise?reapply=1&type=" + this.memberType
|
||||
})
|
||||
} else {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pages/member/apply/enterprise?type=" + this.memberType
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 订阅消息
|
||||
subscribeMessage(fn, number = 0) {
|
||||
if (this.memberType == 1) {
|
||||
// #ifdef MP-WEIXIN
|
||||
let tmplIds = []
|
||||
if (this.subscribeIds?.applet_initiation_audit) tmplIds.push(this.subscribeIds.applet_initiation_audit)
|
||||
if (this.subscribeIds?.applet_initiation_success) tmplIds.push(this.subscribeIds.applet_initiation_success)
|
||||
if (this.subscribeIds?.applet_member_expiretime) tmplIds.push(this.subscribeIds.applet_member_expiretime)
|
||||
uni.requestSubscribeMessage({
|
||||
tmplIds,
|
||||
success: () => {
|
||||
fn()
|
||||
},
|
||||
fail: (error) => {
|
||||
if (error.errCode == 20004) {
|
||||
uni.hideLoading()
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '请前往设置打开接受通知',
|
||||
confirmColor: this.themeColor,
|
||||
confirmText: '继续提交',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
fn()
|
||||
}
|
||||
},
|
||||
})
|
||||
} else if (error.errCode) {
|
||||
uni.hideLoading()
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '消息订阅失败，无法接收到会员通知，错误码：' + error.errCode,
|
||||
confirmColor: this.themeColor,
|
||||
confirmText: '继续提交',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
fn()
|
||||
}
|
||||
},
|
||||
})
|
||||
} else if (++number > 3) {
|
||||
this.subscribeMessage(fn, number)
|
||||
} else {
|
||||
fn()
|
||||
}
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
fn()
|
||||
// #endif
|
||||
} else {
|
||||
fn()
|
||||
}
|
||||
},
|
||||
// 验证手机号是否重复
|
||||
checkPhone(data, fn) {
|
||||
if (this.memberType == 1) {
|
||||
fn(true)
|
||||
return
|
||||
}
|
||||
let index = data.findIndex((item) => {
|
||||
if (item.field == "mobile") return true
|
||||
})
|
||||
this.$util.request("member.applyCheck", {
|
||||
mobile: data[index].value,
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
if (res.data.use_status == 1) fn(false)
|
||||
else fn(true)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('验证手机号是否重复 ', error)
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
.container-main {
|
||||
padding-bottom: 192rpx;
|
||||
|
||||
.main-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 96;
|
||||
|
||||
.header-tips {
|
||||
padding: 24rpx 32rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
color: #F6F7FB;
|
||||
background: #FF6868;
|
||||
}
|
||||
|
||||
.header-box {
|
||||
position: relative;
|
||||
background: linear-gradient(0deg, #F6F7FB, var(--theme-color) 316.667%);
|
||||
padding: 80rpx 48rpx 68rpx;
|
||||
|
||||
.box-image {
|
||||
position: absolute;
|
||||
top: 64rpx;
|
||||
right: 48rpx;
|
||||
width: 218rpx;
|
||||
height: 198rpx;
|
||||
background-size: 218rpx 198rpx;
|
||||
}
|
||||
|
||||
.box-title {
|
||||
color: var(--theme-color);
|
||||
font-size: 48rpx;
|
||||
font-weight: 600;
|
||||
line-height: 68rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.box-subtitle {
|
||||
margin-top: 32rpx;
|
||||
color: #999999;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-form {
|
||||
padding: 22rpx 48rpx 32rpx;
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 32rpx;
|
||||
|
||||
.item-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
|
||||
text {
|
||||
color: #E60012;
|
||||
}
|
||||
}
|
||||
|
||||
.item-input {
|
||||
margin-top: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 16rpx;
|
||||
background: #ffffff;
|
||||
|
||||
.input {
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
flex: 1;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: #ACADB7;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
padding-right: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 96;
|
||||
background: #ffffff;
|
||||
border-top: 1rpx solid #F6F7FB;
|
||||
padding: 20rpx 24rpx 12rpx;
|
||||
|
||||
.footer-read {
|
||||
padding: 0 12rpx;
|
||||
|
||||
.radio {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
background: #D6DBDE;
|
||||
border-radius: 50%;
|
||||
|
||||
&.active {
|
||||
background: var(--theme-color);
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-left: 20rpx;
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
|
||||
text {
|
||||
color: var(--theme-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-btn {
|
||||
margin-top: 32rpx;
|
||||
color: #ffffff;
|
||||
font-size: 32rpx;
|
||||
line-height: 44rpx;
|
||||
padding: 22rpx 24rpx;
|
||||
border-radius: 16rpx;
|
||||
background: var(--theme-color);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
120
pages/member/apply/success.vue
Normal file
120
pages/member/apply/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="toMine">前往查看</view>
|
||||
<view class="main-back" @click="toIndex">返回首页</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 加载完成
|
||||
loadEnd: false,
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.loadEnd = true
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 跳转个人中心
|
||||
toMine() {
|
||||
uni.switchTab({
|
||||
url: "/pages/mine/index"
|
||||
})
|
||||
},
|
||||
// 返回首页
|
||||
toIndex() {
|
||||
uni.switchTab({
|
||||
url: "/pages/index/index"
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.container {
|
||||
.container-main {
|
||||
padding: 144rpx 48rpx 32rpx;
|
||||
|
||||
.main-image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin: 0 auto;
|
||||
padding: 48rpx;
|
||||
background: var(--theme-color);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
color: #333;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
line-height: 50rpx;
|
||||
margin-top: 48rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.main-subtitle {
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
margin-top: 24rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.main-btn {
|
||||
color: #FFF;
|
||||
font-size: 32rpx;
|
||||
line-height: 44rpx;
|
||||
padding: 34rpx;
|
||||
border-radius: 16rpx;
|
||||
text-align: center;
|
||||
margin-top: 48rpx;
|
||||
background: var(--theme-color);
|
||||
}
|
||||
|
||||
.main-back {
|
||||
color: #979797;
|
||||
font-size: 32rpx;
|
||||
line-height: 44rpx;
|
||||
padding: 32rpx;
|
||||
text-align: center;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
631
pages/member/details.vue
Normal file
631
pages/member/details.vue
Normal file
@@ -0,0 +1,631 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 会员详情 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="container" :style="{'--theme-color': themeColor}">
|
||||
<!-- 标题栏 -->
|
||||
<title-bar :showBack="true" title="会员详情"></title-bar>
|
||||
<!-- 内容区 -->
|
||||
<view class="container-main">
|
||||
<block v-if="loadEnd">
|
||||
<!-- 轮播图 -->
|
||||
<view class="main-carousel" v-if="carouselList.length">
|
||||
<carousel :show-data="carouselList" height="320rpx" radius="16rpx" right="24rpx" bottom="24rpx"></carousel>
|
||||
</view>
|
||||
<!-- 会员信息 -->
|
||||
<view class="main-info flex align-items-center">
|
||||
<image class="info-avatar" :src="memberInfo.avatar" mode="aspectFill"></image>
|
||||
<view class="info-box flex-item">
|
||||
<view class="box-head flex align-items-center">
|
||||
<view class="head-name">{{memberInfo.name || "暂未完善"}}</view>
|
||||
<view class="head-label">{{memberInfo.level_name || "暂未完善"}}</view>
|
||||
</view>
|
||||
<view class="box-tag">{{memberInfo.native_place || "暂未完善"}}</view>
|
||||
<view class="box-label" v-if="memberInfo.type == 2 && memberInfo.company_position">{{memberInfo.company_position}}</view>
|
||||
<view class="box-label" v-else-if="memberInfo.type == 3 && memberInfo.organize_position">{{memberInfo.organize_position}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 访客记录 -->
|
||||
<view class="main-record" v-if="memberInfo.visitor_count > 0">
|
||||
<view class="record-title flex justify-content-between align-items-center">
|
||||
<view class="title">访客记录</view>
|
||||
<view class="label">已有{{memberInfo.visitor_count}}人访问</view>
|
||||
</view>
|
||||
<view class="record-list flex flex-wrap">
|
||||
<view class="list-item" v-for="(item, index) in memberInfo.visitor_list" :key="index">
|
||||
<image class="item-avatar" :src="item.avatar" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="list-item" v-if="memberInfo.visitor_count > 23">
|
||||
<view class="item-more flex justify-content-around align-items-center">
|
||||
<view class="point"></view>
|
||||
<view class="point"></view>
|
||||
<view class="point"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 企业 -->
|
||||
<view class="main-group flex" @click="toEnterprise()" v-if="memberInfo.type == 2 && (memberInfo.company_logo || memberInfo.company_name)">
|
||||
<image class="group-avatar" :class="{large: memberInfo.company_introduction}" :src="memberInfo.company_logo" mode="aspectFill"></image>
|
||||
<view class="group-info flex-item flex-direction-column justify-content-around">
|
||||
<view class="info-title text-ellipsis">{{memberInfo.company_name}}</view>
|
||||
<view class="info-tag text-ellipsis-more" v-if="memberInfo.company_introduction">{{memberInfo.company_introduction}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 团体 -->
|
||||
<view class="main-group flex" @click="toOrganization()" v-else-if="memberInfo.type == 3 && (memberInfo.organize_logo || memberInfo.organize_name)">
|
||||
<image class="group-avatar" :class="{large: memberInfo.organize_introduction}" :src="memberInfo.organize_logo" mode="aspectFill"></image>
|
||||
<view class="group-info flex-item flex-direction-column justify-content-around">
|
||||
<view class="info-title text-ellipsis">{{memberInfo.organize_name}}</view>
|
||||
<view class="info-tag text-ellipsis-more" v-if="memberInfo.organize_introduction">{{memberInfo.organize_introduction}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 个人简介 -->
|
||||
<view class="main-introduce">
|
||||
<view class="introduce-title">个人简介</view>
|
||||
<view class="introduce-content">
|
||||
<mp-html :content="memberInfo.introduce_content || '暂未完善'"></mp-html>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 行业分类 -->
|
||||
<view class="main-industry flex justify-content-start">
|
||||
<view class="industry-title">行业分类</view>
|
||||
<view class="industry-value flex-item"> {{ memberInfo.industry_category_name || '暂未完善' }}</view>
|
||||
</view>
|
||||
<!-- 自定义字段 -->
|
||||
<member-custom :show-data="memberInfo.custom_content"></member-custom>
|
||||
<!-- 底部按钮 -->
|
||||
<view class="main-footer">
|
||||
<view class="flex justify-content-between align-items-center">
|
||||
<view class="footer-menu flex">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<button type="default" open-type="share" class="menu-btn">
|
||||
<image class="icon" src="/static/share.png" mode="aspectFit"></image>
|
||||
<view class="text">分享</view>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
<view class="menu-btn" @click="toNavigation()">
|
||||
<image class="icon" src="/static/location.png" mode="aspectFit"></image>
|
||||
<view class="text">地址</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer-btn" @click="saveAddressBook" v-if="memberInfo.mobile_auth == 1 && memberInfo.mobile">保存到通讯录</view>
|
||||
</view>
|
||||
<view class="safe-padding"></view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="main-login" v-else-if="showLogin">
|
||||
<image class="login-image" :src="loginImg" mode="aspectFit"></image>
|
||||
<view class="login-tips">小程序需要登录注册才能使用相关功能，请登录后查看该页面</view>
|
||||
<view class="login-btn" @click="toLogin()">前往登录</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
import memberCustom from "@/pages/component/member/custom.vue"
|
||||
import carousel from "@/pages/component/carousel/carousel.vue"
|
||||
// #ifdef H5
|
||||
import wx from 'weixin-js-sdk';
|
||||
// #endif
|
||||
export default {
|
||||
components: {
|
||||
memberCustom,
|
||||
carousel,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 加载完成
|
||||
loadEnd: false,
|
||||
// 会员id
|
||||
memberId: null,
|
||||
// 会员详情
|
||||
memberInfo: {},
|
||||
// 轮播图列表
|
||||
carouselList: [],
|
||||
// 是否显示登录提示
|
||||
showLogin: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
loginImg: state => state.app.loginImg,
|
||||
})
|
||||
},
|
||||
onLoad(option) {
|
||||
this.memberId = option.id
|
||||
if (uni.getStorageSync("token")) {
|
||||
uni.showLoading({
|
||||
title: "加载中"
|
||||
})
|
||||
this.getMemberInfo(() => {
|
||||
this.loadEnd = true
|
||||
uni.hideLoading()
|
||||
// #ifdef H5
|
||||
this.initConfig()
|
||||
// #endif
|
||||
})
|
||||
} else {
|
||||
this.showLogin = true
|
||||
this.$util.verifyLogin(2)
|
||||
}
|
||||
},
|
||||
onShareTimeline() {
|
||||
return {
|
||||
title: (this.memberInfo.level_name || "") + (this.memberInfo.name || ""),
|
||||
path: '/pages/member/details?id=' + this.memberId,
|
||||
imageUrl: this.memberInfo.avatar,
|
||||
}
|
||||
},
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: (this.memberInfo.level_name || "") + (this.memberInfo.name || ""),
|
||||
path: '/pages/member/details?id=' + this.memberId,
|
||||
imageUrl: this.memberInfo.avatar,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// #ifdef H5
|
||||
// 微信公众号初始化方法
|
||||
initConfig() {
|
||||
this.$util.request("main.WeChatConfig", {
|
||||
url: location.href.split('#')[0]
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
wx.config({
|
||||
debug: false,
|
||||
appId: res.data.appId,
|
||||
timestamp: Number(res.data.timestamp),
|
||||
nonceStr: res.data.nonceStr,
|
||||
signature: res.data.signature,
|
||||
jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
|
||||
openTagList: ["updateAppMessageShareData", "updateTimelineShareData"],
|
||||
})
|
||||
wx.ready(() => {
|
||||
wx.updateAppMessageShareData({
|
||||
title: this.memberInfo.name,
|
||||
desc: "",
|
||||
link: window.location.href,
|
||||
imgUrl: this.memberInfo.avatar,
|
||||
});
|
||||
wx.updateTimelineShareData({
|
||||
title: this.memberInfo.name,
|
||||
link: window.location.href,
|
||||
imgUrl: this.memberInfo.avatar,
|
||||
});
|
||||
});
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('通过config接口注入权限验证配置 ', error)
|
||||
})
|
||||
},
|
||||
// #endif
|
||||
// 获取会员详情
|
||||
getMemberInfo(fn) {
|
||||
this.$util.request("member.details", {
|
||||
id: this.memberId
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
if (fn) fn()
|
||||
this.memberInfo = res.data
|
||||
this.carouselList = this.splitImages(res.data.personal_carousel_images || "")
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
if (error == 401) {
|
||||
this.showLogin = true
|
||||
} else {
|
||||
console.error('获取会员详情 ', error)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 字符串转数组格式图片
|
||||
splitImages(images) {
|
||||
try {
|
||||
if (images) return images.split(',');
|
||||
else return []
|
||||
} catch (error) {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// 跳转地图导航
|
||||
toNavigation() {
|
||||
this.$util.toPage({
|
||||
mode: 7,
|
||||
address: {
|
||||
latitude: this.memberInfo.latitude,
|
||||
longitude: this.memberInfo.longitude,
|
||||
address: this.memberInfo.address,
|
||||
},
|
||||
})
|
||||
},
|
||||
// 保存通讯录
|
||||
saveAddressBook() {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true,
|
||||
})
|
||||
this.$util.request("member.state", {
|
||||
id: this.memberId
|
||||
}).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.code == 1) {
|
||||
if (res.data.state.state == 6) {
|
||||
// #ifdef MP-WEIXIN
|
||||
let info = {
|
||||
firstName: this.memberInfo.name, // 名字
|
||||
mobilePhoneNumber: this.memberInfo.mobile, // 手机号
|
||||
title: this.memberInfo.level_name, // 职位
|
||||
workAddressStreet: this.memberInfo.address, // 工作地址街道
|
||||
}
|
||||
if (this.memberInfo.group && this.memberInfo.group.name) info.organization = this.memberInfo.group.name
|
||||
uni.addPhoneContact(info)
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
this.$util.toPage({
|
||||
mode: 6,
|
||||
phone: this.memberInfo.mobile,
|
||||
})
|
||||
// #endif
|
||||
} else if (res.data.state.state == -1) {
|
||||
uni.showModal({
|
||||
title: "系统提示",
|
||||
content: "此页面需成为会员后可查看！",
|
||||
confirmColor: this.themeColor,
|
||||
confirmText: "去加入",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pages/member/apply/index"
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.showModal({
|
||||
title: "系统提示",
|
||||
content: "此页面需成为会员后可查看！",
|
||||
confirmColor: this.themeColor,
|
||||
confirmText: "前往查看",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.switchTab({
|
||||
url: "/pages/mine/index"
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('获取会员状态 ', error)
|
||||
})
|
||||
},
|
||||
// 跳转企业详情
|
||||
toEnterprise() {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pages/member/enterprise?id=" + this.memberId
|
||||
})
|
||||
},
|
||||
// 跳转团体详情
|
||||
toOrganization() {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pages/member/organization?id=" + this.memberId
|
||||
})
|
||||
},
|
||||
// 前往登录
|
||||
toLogin() {
|
||||
uni.redirectTo({
|
||||
url: `/pages/member/details?id=${this.memberId}`,
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
.container-main {
|
||||
padding: 32rpx 32rpx 144rpx;
|
||||
|
||||
.main-carousel {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.main-info {
|
||||
padding: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #ffffff;
|
||||
|
||||
.info-avatar {
|
||||
width: 144rpx;
|
||||
height: 144rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
margin-left: 32rpx;
|
||||
|
||||
.box-head {
|
||||
.head-name {
|
||||
color: #5A5B6E;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
|
||||
.head-label {
|
||||
margin-left: 16rpx;
|
||||
color: var(--theme-color);
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.box-tag {
|
||||
margin-top: 16rpx;
|
||||
color: #C4C4C4;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.box-label {
|
||||
margin-top: 16rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 40rpx;
|
||||
color: #8D929C;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-record {
|
||||
padding: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #ffffff;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.record-title {
|
||||
.title {
|
||||
color: #5A5B6E;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: var(--theme-color);
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.record-list {
|
||||
padding-top: 8rpx;
|
||||
margin-left: -2rpx;
|
||||
|
||||
.list-item {
|
||||
width: calc((100% / 12) - 4rpx);
|
||||
height: 0;
|
||||
padding-top: calc((100% / 12) - 4rpx);
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin-left: 4rpx;
|
||||
margin-top: 16rpx;
|
||||
background: #eee;
|
||||
|
||||
.item-avatar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.item-more {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: var(--theme-color);
|
||||
padding: 0 6rpx;
|
||||
|
||||
.point {
|
||||
width: 6rpx;
|
||||
height: 6rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-group {
|
||||
padding: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #ffffff;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.group-avatar {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 10rpx;
|
||||
|
||||
&.large {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.group-info {
|
||||
margin-left: 16rpx;
|
||||
|
||||
.info-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 32rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.info-tag {
|
||||
color: #888888;
|
||||
font-size: 24rpx;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-introduce {
|
||||
padding: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #ffffff;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.introduce-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.introduce-content {
|
||||
margin-top: 24rpx;
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.main-industry {
|
||||
margin-top: 32rpx;
|
||||
padding: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #ffffff;
|
||||
|
||||
.industry-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
margin-right: 64rpx;
|
||||
}
|
||||
|
||||
.industry-value {
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
line-height: 40rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
.main-footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 99;
|
||||
padding: 12rpx 32rpx 12rpx 48rpx;
|
||||
background: #ffffff;
|
||||
border-top: 1rpx solid #F6F7FB;
|
||||
|
||||
.footer-menu {
|
||||
.menu-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 32rpx;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
|
||||
.icon {
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #5A5B6E;
|
||||
font-size: 20rpx;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-btn {
|
||||
color: #ffffff;
|
||||
font-size: 32rpx;
|
||||
line-height: 44rpx;
|
||||
padding: 22rpx 24rpx;
|
||||
border-radius: 16rpx;
|
||||
background: var(--theme-color);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.main-login {
|
||||
padding: 96rpx 60rpx 0;
|
||||
|
||||
.login-image {
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
}
|
||||
|
||||
.login-tips {
|
||||
color: #585858;
|
||||
font-size: 36rpx;
|
||||
line-height: 50rpx;
|
||||
margin-top: 48rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
margin-top: 56rpx;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
font-size: 28rpx;
|
||||
border-radius: 16rpx;
|
||||
text-align: center;
|
||||
background: var(--theme-color);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
423
pages/member/enterprise.vue
Normal file
423
pages/member/enterprise.vue
Normal file
@@ -0,0 +1,423 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 会员企业 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="container" :style="{'--theme-color': themeColor}">
|
||||
<!-- 标题栏 -->
|
||||
<title-bar :showBack="true" :title="memberTypeConfig.enterprise"></title-bar>
|
||||
<!-- 内容区 -->
|
||||
<view class="container-main">
|
||||
<block v-if="loadEnd">
|
||||
<!-- 轮播图 -->
|
||||
<view class="main-carousel" v-if="carouselList.length">
|
||||
<carousel :show-data="carouselList" height="320rpx" radius="16rpx" right="24rpx" bottom="24rpx"></carousel>
|
||||
</view>
|
||||
<!-- 企业信息 -->
|
||||
<view class="main-info flex align-items-center">
|
||||
<image class="info-avatar" :src="memberInfo.company_logo" mode="aspectFill"></image>
|
||||
<view class="info-name flex-item text-ellipsis-more">{{memberInfo.company_name}}</view>
|
||||
</view>
|
||||
<!-- 企业简介 -->
|
||||
<view class="main-introduce">
|
||||
<view class="introduce-title">企业简介</view>
|
||||
<view class="introduce-content">
|
||||
<mp-html :content="memberInfo.company_introduction || '暂未完善'"></mp-html>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 产品列表 -->
|
||||
<view class="main-product" v-if="memberInfo.company_goods_list && memberInfo.company_goods_list.length">
|
||||
<view class="product-title">产品列表</view>
|
||||
<view class="product-list">
|
||||
<view class="list-item" v-for="item in memberInfo.company_goods_list" :key="item.id" @click="toProductDetails(item.id)">
|
||||
<image class="item-image" :src="item.image" mode="aspectFill"></image>
|
||||
<view class="item-name text-ellipsis-more">{{item.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 自定义字段 -->
|
||||
<member-custom :show-data="memberInfo.custom_content"></member-custom>
|
||||
<!-- 底部按钮 -->
|
||||
<view class="main-footer">
|
||||
<view class="flex justify-content-between align-items-center">
|
||||
<view class="footer-menu flex">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<button type="default" open-type="share" class="menu-btn">
|
||||
<image class="icon" src="/static/share.png" mode="aspectFit"></image>
|
||||
<view class="text">分享</view>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
<view class="menu-btn" @click="toNavigation()">
|
||||
<image class="icon" src="/static/location.png" mode="aspectFit"></image>
|
||||
<view class="text">地址</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer-btn" @click="onContact()" v-if="memberInfo.company_office_number">拨打电话</view>
|
||||
</view>
|
||||
<view class="safe-padding"></view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="main-login" v-else-if="showLogin">
|
||||
<image class="login-image" :src="loginImg" mode="aspectFit"></image>
|
||||
<view class="login-tips">小程序需要登录注册才能使用相关功能，请登录后查看该页面</view>
|
||||
<view class="login-btn" @click="toLogin()">前往登录</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
import memberCustom from "@/pages/component/member/custom.vue"
|
||||
import carousel from "@/pages/component/carousel/carousel.vue"
|
||||
// #ifdef H5
|
||||
import wx from 'weixin-js-sdk';
|
||||
// #endif
|
||||
export default {
|
||||
components: {
|
||||
memberCustom,
|
||||
carousel,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 加载完成
|
||||
loadEnd: false,
|
||||
// 会员id
|
||||
memberId: null,
|
||||
// 会详情
|
||||
memberInfo: {},
|
||||
// 轮播图列表
|
||||
carouselList: [],
|
||||
// 是否显示登录提示
|
||||
showLogin: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
loginImg: state => state.app.loginImg,
|
||||
memberTypeConfig: state => state.app.memberTypeConfig,
|
||||
})
|
||||
},
|
||||
onLoad(option) {
|
||||
this.memberId = option.id
|
||||
if (uni.getStorageSync("token")) {
|
||||
uni.showLoading({
|
||||
title: "加载中"
|
||||
})
|
||||
this.getMemberInfo(() => {
|
||||
this.loadEnd = true
|
||||
uni.hideLoading()
|
||||
// #ifdef H5
|
||||
this.initConfig()
|
||||
// #endif
|
||||
})
|
||||
} else {
|
||||
this.showLogin = true
|
||||
this.$util.verifyLogin(2)
|
||||
}
|
||||
},
|
||||
onShareTimeline() {
|
||||
return {
|
||||
title: `${this.memberInfo.member_level_name || ""}单位${this.memberInfo.company_name || ""}`,
|
||||
path: '/pages/member/enterprise?id=' + this.memberId,
|
||||
imageUrl: this.memberInfo.company_logo,
|
||||
}
|
||||
},
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: `${this.memberInfo.member_level_name || ""}单位${this.memberInfo.company_name || ""}`,
|
||||
path: '/pages/member/enterprise?id=' + this.memberId,
|
||||
imageUrl: this.memberInfo.company_logo,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// #ifdef H5
|
||||
// 微信公众号初始化方法
|
||||
initConfig() {
|
||||
this.$util.request("main.WeChatConfig", {
|
||||
url: location.href.split('#')[0]
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
wx.config({
|
||||
debug: false,
|
||||
appId: res.data.appId,
|
||||
timestamp: Number(res.data.timestamp),
|
||||
nonceStr: res.data.nonceStr,
|
||||
signature: res.data.signature,
|
||||
jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
|
||||
openTagList: ["updateAppMessageShareData", "updateTimelineShareData"],
|
||||
})
|
||||
wx.ready(() => {
|
||||
wx.updateAppMessageShareData({
|
||||
title: this.memberInfo.company_name,
|
||||
desc: "",
|
||||
link: window.location.href,
|
||||
imgUrl: this.memberInfo.company_logo,
|
||||
});
|
||||
wx.updateTimelineShareData({
|
||||
title: this.memberInfo.company_name,
|
||||
link: window.location.href,
|
||||
imgUrl: this.memberInfo.company_logo,
|
||||
});
|
||||
});
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('通过config接口注入权限验证配置 ', error)
|
||||
})
|
||||
},
|
||||
// #endif
|
||||
// 获取会员详情
|
||||
getMemberInfo(fn) {
|
||||
this.$util.request("member.enterprise", {
|
||||
id: this.memberId
|
||||
}).then(res => {
|
||||
if (fn) fn()
|
||||
if (res.code == 1) {
|
||||
this.memberInfo = res.data
|
||||
this.carouselList = this.splitImages(res.data.company_carousel_images || "")
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
if (error == 401) {
|
||||
this.showLogin = true
|
||||
} else {
|
||||
console.error('获取会员详情 ', error)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 字符串转数组格式图片
|
||||
splitImages(images) {
|
||||
try {
|
||||
if (images) return images.split(',');
|
||||
else return []
|
||||
} catch (error) {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// 跳转产品详情
|
||||
toProductDetails(id) {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pages/member/product/details?id=" + id,
|
||||
})
|
||||
},
|
||||
// 跳转地图导航
|
||||
toNavigation() {
|
||||
const addressInfo = JSON.parse(this.memberInfo.address_json || "{}")
|
||||
this.$util.toPage({
|
||||
mode: 7,
|
||||
address: addressInfo,
|
||||
})
|
||||
},
|
||||
// 拨打电话
|
||||
onContact() {
|
||||
this.$util.toPage({
|
||||
mode: 6,
|
||||
phone: this.memberInfo.company_office_number,
|
||||
})
|
||||
},
|
||||
// 前往登录
|
||||
toLogin() {
|
||||
uni.redirectTo({
|
||||
url: `/pages/member/enterprise?id=${this.memberId}`,
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
.container-main {
|
||||
padding: 32rpx 32rpx 144rpx;
|
||||
|
||||
.main-carousel {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.main-info {
|
||||
padding: 32rpx 24rpx 32rpx 32rpx;
|
||||
border-radius: 10rpx;
|
||||
background: #ffffff;
|
||||
|
||||
.info-avatar {
|
||||
width: 128rpx;
|
||||
height: 128rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.info-name {
|
||||
margin-left: 32rpx;
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
line-height: 40rpx;
|
||||
color: #5A5B6E;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
margin-left: 32rpx;
|
||||
border-radius: 50%;
|
||||
background: var(--theme-color);
|
||||
padding: 0;
|
||||
|
||||
.icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
padding: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-introduce {
|
||||
padding: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #ffffff;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.introduce-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.introduce-content {
|
||||
margin-top: 24rpx;
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.main-product {
|
||||
padding: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #ffffff;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.product-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.product-list {
|
||||
margin-top: 24rpx;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 2fr);
|
||||
column-gap: 28rpx;
|
||||
row-gap: 30rpx;
|
||||
|
||||
.list-item {
|
||||
.item-image {
|
||||
width: 100%;
|
||||
height: 296rpx;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
padding: 0 24rpx;
|
||||
margin-top: 24rpx;
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 99;
|
||||
padding: 12rpx 32rpx 12rpx 48rpx;
|
||||
background: #ffffff;
|
||||
border-top: 1rpx solid #F6F7FB;
|
||||
|
||||
.footer-menu {
|
||||
.menu-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 32rpx;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
|
||||
.icon {
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #5A5B6E;
|
||||
font-size: 20rpx;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-btn {
|
||||
color: #ffffff;
|
||||
font-size: 32rpx;
|
||||
line-height: 44rpx;
|
||||
padding: 22rpx 48rpx;
|
||||
border-radius: 16rpx;
|
||||
background: var(--theme-color);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.main-login {
|
||||
padding: 96rpx 60rpx 0;
|
||||
|
||||
.login-image {
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
}
|
||||
|
||||
.login-tips {
|
||||
color: #585858;
|
||||
font-size: 36rpx;
|
||||
line-height: 50rpx;
|
||||
margin-top: 48rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
margin-top: 56rpx;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
font-size: 28rpx;
|
||||
border-radius: 16rpx;
|
||||
text-align: center;
|
||||
background: var(--theme-color);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
414
pages/member/fees/index.vue
Normal file
414
pages/member/fees/index.vue
Normal file
@@ -0,0 +1,414 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 会费缴纳 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="container" :style="{'--theme-color': themeColor, paddingBottom: isShowPay ? '112rpx' : '0'}">
|
||||
<!-- 标题栏 -->
|
||||
<title-bar :showBack="true" title="会费缴纳"></title-bar>
|
||||
<!-- 内容区 -->
|
||||
<view class="container-main" v-if="loadEnd">
|
||||
<view class="main-tips" :style="{top: titleBarHeight + 'px', background: '#FFA820'}" v-if="payDetails.apply_member_state.state == 4">会费缴纳审核中</view>
|
||||
<view class="main-tips" :style="{top: titleBarHeight + 'px', background: '#FF6868'}" v-else-if="payDetails.apply_member_state.state == 5">驳回原因：{{payDetails.reject}}</view>
|
||||
<view class="main-header">
|
||||
<view class="header-box">
|
||||
<view class="box-line flex-direction-column align-items-center">
|
||||
<view class="free" v-if="payDetails.pay_method == 1">免费</view>
|
||||
<view class="price" v-else><text>￥</text>{{payDetails.fees}}</view>
|
||||
<view class="term" v-if="payDetails.apply_member_state.state == 7 && !isShowPay">
|
||||
<text>暂未开启入会申请，详情请联系客服</text>
|
||||
</view>
|
||||
<view class="term" v-else>
|
||||
<text>期限：</text>
|
||||
<text v-if="payDetails.apply_member_state.state == 6">{{payDetails.join_time}}</text>
|
||||
<text v-else>{{nowTime}}</text>
|
||||
<text>—{{payDetails.expire_time}}</text>
|
||||
</view>
|
||||
<view class="level">级别：{{payDetails.level_name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="header-pocket" :style="{'background-image': 'url('+ iconFees +')'}" v-if="iconFees"></view>
|
||||
</view>
|
||||
<view class="main-content">
|
||||
<view class="content-column">
|
||||
<view class="column-title">级别介绍</view>
|
||||
<view class="column-content column-text">
|
||||
<mp-html :content="payDetails.content"></mp-html>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content-column">
|
||||
<view class="column-title">缴纳明细</view>
|
||||
<view class="column-content">
|
||||
<view class="detail-list" v-if="payDetails.pay_list.length">
|
||||
<view class="list-item flex align-items-center" v-for="record in payDetails.pay_list" :key="record.order_no">
|
||||
<view class="item-info flex-item">
|
||||
<view class="info-name">{{record.pay_method == 2 ? "线上" : "线下"}}-会费缴纳</view>
|
||||
<view class="info-time">{{record.pay_time}}</view>
|
||||
</view>
|
||||
<view class="item-price">{{record.fees}}元</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="detail-empty" v-else>暂无记录~</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="main-footer" v-if="isShowPay">
|
||||
<view class="footer-btn flex-item" @click="handleRenew()" v-if="payDetails.pay_method == 1">续期</view>
|
||||
<view class="flex justify-content-between align-items-center" v-else>
|
||||
<view class="footer-price flex align-items-center">
|
||||
<view class="unit">￥</view>
|
||||
<view class="number">{{payDetails.fees}}</view>
|
||||
</view>
|
||||
<view class="footer-btn flex-item" @click="toPayment">会费缴纳</view>
|
||||
</view>
|
||||
<view class="safe-padding"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
import svgData from "@/common/svg.js"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 加载完成
|
||||
loadEnd: false,
|
||||
// 标题栏高度
|
||||
titleBarHeight: 0,
|
||||
// 会费缴纳详情
|
||||
payDetails: {},
|
||||
// 当前时间
|
||||
nowTime: "",
|
||||
// 是否可以支付
|
||||
isShowPay: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
iconFees: state => {
|
||||
return svgData.svgToUrl("fees", state.app.themeColor)
|
||||
},
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
// #ifdef MP-WEIXIN
|
||||
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight
|
||||
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||||
this.titleBarHeight = statusBarHeight + (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
|
||||
// #endif
|
||||
},
|
||||
onLoad() {
|
||||
uni.showLoading({
|
||||
title: "加载中"
|
||||
})
|
||||
this.getNowTime()
|
||||
this.getPayDetails()
|
||||
},
|
||||
methods: {
|
||||
// 获取当前时间
|
||||
getNowTime() {
|
||||
this.nowTime = this.$util.getCurrentDate("y/m/d")
|
||||
},
|
||||
// 获取会费缴纳详情
|
||||
getPayDetails() {
|
||||
this.$util.request("member.payDetails").then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.code == 1) {
|
||||
this.payDetails = res.data
|
||||
if (this.payDetails.apply_member_state.state == -1) {
|
||||
uni.showModal({
|
||||
title: "系统提示",
|
||||
content: "请入会后查看此页面",
|
||||
confirmText: "去申请",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.$util.toPage({
|
||||
mode: 2,
|
||||
path: "/pages/member/apply/index"
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
return
|
||||
} else if (this.payDetails.apply_member_state.state == 1 || this.payDetails.apply_member_state.state == 2) {
|
||||
uni.showModal({
|
||||
title: "系统提示",
|
||||
content: "您已提交入会申请，请审核通过后查看",
|
||||
confirmText: "前往查看",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.switchTab({
|
||||
url: "/pages/mine/index"
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
return
|
||||
} else if (this.payDetails.apply_member_state.state == 3 || this.payDetails.apply_member_state.state == 5) {
|
||||
this.isShowPay = true
|
||||
} else if (this.payDetails.apply_member_state.state == 7) {
|
||||
let startTime = new Date(this.nowTime).getTime()
|
||||
let endTime = new Date(this.payDetails.expire_time).getTime()
|
||||
let timeDif = this.$util.getTimeDifference(startTime, endTime)
|
||||
if (timeDif.day > 0) this.isShowPay = true
|
||||
else this.isShowPay = false
|
||||
} else {
|
||||
this.isShowPay = false
|
||||
}
|
||||
this.loadEnd = true
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('获取会费缴纳详情 ', error)
|
||||
})
|
||||
},
|
||||
// 跳转支付页
|
||||
toPayment() {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pages/member/fees/pay?fees=" + this.payDetails.fees + "&method=" + this.payDetails.pay_method
|
||||
})
|
||||
},
|
||||
// 免费入会续费
|
||||
handleRenew() {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true
|
||||
})
|
||||
this.$util.request("member.payFree").then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.code == 1) {
|
||||
this.$util.toPage({
|
||||
mode: 2,
|
||||
path: "/pages/member/fees/success?type=1"
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('免费入会续费 ', error)
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
.container-main {
|
||||
.main-tips {
|
||||
padding: 24rpx 32rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
color: #F6F7FB;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.main-header {
|
||||
padding: 32rpx 32rpx 20rpx;
|
||||
position: relative;
|
||||
|
||||
.header-box {
|
||||
border-radius: 10rpx;
|
||||
background: var(--theme-color);
|
||||
padding: 16rpx;
|
||||
position: relative;
|
||||
|
||||
.box-line {
|
||||
border: 1rpx solid #ffffff;
|
||||
border-bottom: none;
|
||||
border-radius: 10rpx;
|
||||
padding: 48rpx 32rpx 66rpx;
|
||||
|
||||
.price {
|
||||
color: #ffffff;
|
||||
font-size: 72rpx;
|
||||
font-weight: 600;
|
||||
line-height: 60rpx;
|
||||
|
||||
text {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.free {
|
||||
color: #ffffff;
|
||||
font-size: 44rpx;
|
||||
font-weight: 600;
|
||||
line-height: 60rpx;
|
||||
}
|
||||
|
||||
.term {
|
||||
margin-top: 24rpx;
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.level {
|
||||
position: absolute;
|
||||
top: 48rpx;
|
||||
left: 0;
|
||||
color: var(--theme-color);
|
||||
font-size: 20rpx;
|
||||
line-height: 28rpx;
|
||||
padding: 10rpx;
|
||||
border-radius: 0 8rpx 8rpx 0;
|
||||
background: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-pocket {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 120rpx;
|
||||
background-size: 100% 120rpx;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
background: linear-gradient(180deg, rgb(255, 255, 255), rgba(246, 247, 251, 0) 100%);
|
||||
padding: 32rpx;
|
||||
|
||||
.content-column {
|
||||
margin-top: 48rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.column-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.column-text {
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.column-content {
|
||||
padding: 24rpx;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.02);
|
||||
background: #ffffff;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.detail-list {
|
||||
.list-item {
|
||||
margin-top: 32rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
.info-name {
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.info-time {
|
||||
margin-top: 16rpx;
|
||||
color: #8D929C;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-price {
|
||||
margin-left: 24rpx;
|
||||
color: var(--theme-color);
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail-empty {
|
||||
color: #8D929C;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
padding: 48rpx 32rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 99;
|
||||
padding: 12rpx 32rpx;
|
||||
background: #ffffff;
|
||||
border-top: 1rpx solid #F6F7FB;
|
||||
|
||||
.footer-price {
|
||||
margin-right: 40rpx;
|
||||
|
||||
.unit {
|
||||
color: var(--theme-color);
|
||||
font-size: 32rpx;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.number {
|
||||
margin-left: 16rpx;
|
||||
color: var(--theme-color);
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
line-height: 56rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-btn {
|
||||
color: #ffffff;
|
||||
font-size: 32rpx;
|
||||
line-height: 44rpx;
|
||||
padding: 22rpx 24rpx;
|
||||
border-radius: 16rpx;
|
||||
background: var(--theme-color);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
567
pages/member/fees/pay.vue
Normal file
567
pages/member/fees/pay.vue
Normal file
@@ -0,0 +1,567 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 会费缴纳 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="container" :style="{'--theme-color': themeColor}">
|
||||
<!-- 标题栏 -->
|
||||
<title-bar :showBack="true" title="会费缴纳"></title-bar>
|
||||
<!-- 内容区 -->
|
||||
<view class="container-main" v-if="loadEnd">
|
||||
<view class="main-header">
|
||||
<view class="header-price">{{payFees}}<text>元</text></view>
|
||||
<view class="header-tag">会费缴纳</view>
|
||||
</view>
|
||||
<view class="main-content">
|
||||
<view class="content-column">
|
||||
<view class="column-title">支付方式</view>
|
||||
<view class="column-method">
|
||||
<view class="method-item flex align-items-center" @click="payMethod = 1" v-if="optionalPayMethod == 2 || optionalPayMethod == 4">
|
||||
<view class="icon" :style="{'background-image': 'url('+ iconPay +')'}" v-if="iconPay"></view>
|
||||
<view class="name flex-item">线上缴费</view>
|
||||
<view class="radio" :class="{active: payMethod == 1}">
|
||||
<image src="/static/tick.png" mode="aspectFill" v-if="payMethod == 1"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="method-item flex align-items-center" @click="payMethod = 2" v-if="optionalPayMethod == 3 || optionalPayMethod == 4">
|
||||
<view class="icon" :style="{'background-image': 'url('+ iconPay +')'}" v-if="iconPay"></view>
|
||||
<view class="name flex-item">线下缴费</view>
|
||||
<view class="radio" :class="{active: payMethod == 2}">
|
||||
<image src="/static/tick.png" mode="aspectFill" v-if="payMethod == 2"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content-column" v-if="payMethod == 2">
|
||||
<view class="column-title">支付凭证</view>
|
||||
<view class="column-upload">
|
||||
<view class="upload-image" v-if="certificate" @click="previewImage()">
|
||||
<image class="image-select" :src="certificate" mode="aspectFill"></image>
|
||||
<image class="image-delete" src="/static/delete.png" mode="aspectFit" @click.stop="deleteImage()"></image>
|
||||
</view>
|
||||
<view class="upload-image" v-else @click="chooseImage()">
|
||||
<view class="image-background"></view>
|
||||
<view class="image-choose">
|
||||
<view class="icon">
|
||||
<image src="/static/camera.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="text">上传图片</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content-column" v-if="payMethod == 2">
|
||||
<view class="column-title">汇款账户信息</view>
|
||||
<view class="column-info">
|
||||
<view class="info-item flex">
|
||||
<view class="item-content flex-item">开户名称：{{accountInfo.bank_account_name || ""}}</view>
|
||||
<view class="item-copy" @click="handleCopy(accountInfo.bank_account_name || '')">复制</view>
|
||||
</view>
|
||||
<view class="info-item flex">
|
||||
<view class="item-content flex-item">收款账号：{{accountInfo.receiving_account || ""}}</view>
|
||||
<view class="item-copy" @click="handleCopy(accountInfo.receiving_account || '')">复制</view>
|
||||
</view>
|
||||
<view class="info-item flex">
|
||||
<view class="item-content flex-item">银行名称：{{accountInfo.bank_name || ""}}</view>
|
||||
<view class="item-copy" @click="handleCopy(accountInfo.bank_name || '')">复制</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="main-footer">
|
||||
<view class="footer-btn" @click="toPayment" v-if="payMethod == 1">立即支付</view>
|
||||
<view class="footer-btn" @click="toSubmit" v-else>提交审核</view>
|
||||
<view class="safe-padding"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
import svgData from "@/common/svg.js"
|
||||
// #ifdef H5
|
||||
import wx from 'weixin-js-sdk';
|
||||
// #endif
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 加载完成
|
||||
loadEnd: false,
|
||||
// 可选支付方式 缴费方式: 2=线上缴费, 3=线下缴费, 4=线上缴费+线下缴费
|
||||
optionalPayMethod: 4,
|
||||
// 支付方式
|
||||
payMethod: 1,
|
||||
// 支付凭证
|
||||
certificate: "",
|
||||
// 支付费用
|
||||
payFees: 0,
|
||||
// 汇款账户信息
|
||||
accountInfo: {},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
iconPay: state => {
|
||||
return svgData.svgToUrl("pay", state.app.themeColor)
|
||||
},
|
||||
})
|
||||
},
|
||||
onLoad(option) {
|
||||
this.optionalPayMethod = option.method
|
||||
if (this.optionalPayMethod == 3) this.payMethod = 2
|
||||
else this.payMethod = 1
|
||||
this.payFees = option.fees
|
||||
if (this.optionalPayMethod == 3 || this.optionalPayMethod == 4) {
|
||||
uni.showLoading({
|
||||
title: "加载中"
|
||||
})
|
||||
this.getAccountInfo(() => {
|
||||
uni.hideLoading()
|
||||
this.loadEnd = true
|
||||
})
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
this.loadEnd = true
|
||||
})
|
||||
}
|
||||
// #ifdef H5
|
||||
this.initConfig()
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
// #ifdef H5
|
||||
// 微信公众号初始化方法
|
||||
initConfig() {
|
||||
this.$util.request("main.WeChatConfig", {
|
||||
url: location.href.split('#')[0]
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
wx.config({
|
||||
debug: false,
|
||||
appId: res.data.appId,
|
||||
timestamp: Number(res.data.timestamp),
|
||||
nonceStr: res.data.nonceStr,
|
||||
signature: res.data.signature,
|
||||
jsApiList: ['chooseWXPay']
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('通过config接口注入权限验证配置 ', error)
|
||||
})
|
||||
},
|
||||
// #endif
|
||||
// 线上立即支付
|
||||
toPayment() {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true
|
||||
})
|
||||
this.$util.request("member.payOnline").then(res => {
|
||||
if (res.code == 1) {
|
||||
let data = res.data
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.requestPayment({
|
||||
provider: "wxpay",
|
||||
...data,
|
||||
success: () => {
|
||||
uni.hideLoading()
|
||||
uni.reLaunch({
|
||||
url: "/pages/member/fees/success"
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '支付已取消',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
wx.ready(() => {
|
||||
uni.hideLoading()
|
||||
wx.chooseWXPay({
|
||||
timestamp: data.timeStamp,
|
||||
package: data.package,
|
||||
nonceStr: data.nonceStr,
|
||||
signType: data.signType,
|
||||
paySign: data.paySign,
|
||||
success: (res) => {
|
||||
uni.hideLoading();
|
||||
if (res.errMsg == "chooseWXPay:ok") {
|
||||
uni.reLaunch({
|
||||
url: "/pages/member/fees/success"
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '支付失败',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '支付已取消',
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
});
|
||||
});
|
||||
// #endif
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('线上缴费 ', error)
|
||||
})
|
||||
},
|
||||
// 线下提交审核
|
||||
toSubmit() {
|
||||
if (!this.certificate) {
|
||||
uni.showToast({
|
||||
title: "请上传支付凭证",
|
||||
icon: "none"
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true
|
||||
})
|
||||
this.uploadImage((url) => {
|
||||
this.$util.request("member.payOffline", {
|
||||
pay_voucher: url
|
||||
}).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.code == 1) {
|
||||
uni.reLaunch({
|
||||
url: "/pages/member/fees/success?type=1"
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('线下缴费 ', error)
|
||||
})
|
||||
})
|
||||
},
|
||||
// 上传图片
|
||||
uploadImage(fn) {
|
||||
this.$util.uploadFile(this.certificate).then(result => {
|
||||
if (result.code == 1) {
|
||||
fn(result.data.url)
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: result?.msg || "上传失败",
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('上传图片 ', error)
|
||||
})
|
||||
},
|
||||
// 选择图片
|
||||
chooseImage() {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.chooseMedia({
|
||||
count: 1,
|
||||
mediaType: ['image'],
|
||||
sourceType: ['album', 'camera'],
|
||||
sizeType: ['compressed'],
|
||||
success: (res) => {
|
||||
this.certificate = res.tempFiles[0].tempFilePath
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
mediaType: ['image'],
|
||||
sourceType: ['album', 'camera '],
|
||||
sizeType: ['compressed'],
|
||||
success: (res) => {
|
||||
this.certificate = res.tempFilePaths[0]
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
// 删除图片
|
||||
deleteImage() {
|
||||
this.certificate = ""
|
||||
},
|
||||
// 预览图片
|
||||
previewImage() {
|
||||
uni.previewImage({
|
||||
urls: [this.certificate],
|
||||
current: 0
|
||||
});
|
||||
},
|
||||
// 获取汇款账户信息
|
||||
getAccountInfo(fn) {
|
||||
this.$util.request("member.accountInfo").then(res => {
|
||||
if (fn) fn()
|
||||
if (res.code == 1) {
|
||||
this.accountInfo = res.data
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
if (fn) fn()
|
||||
console.error('获取汇款账户信息 ', error)
|
||||
})
|
||||
},
|
||||
// 复制
|
||||
handleCopy(value) {
|
||||
this.$util.toPage({
|
||||
mode: 8,
|
||||
content: value
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
.container-main {
|
||||
padding: 32rpx 32rpx 144rpx;
|
||||
|
||||
.main-header {
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.02);
|
||||
background: #ffffff;
|
||||
padding: 38rpx 32rpx;
|
||||
|
||||
.header-price {
|
||||
color: var(--theme-color);
|
||||
font-size: 48rpx;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
|
||||
text {
|
||||
font-size: 24rpx
|
||||
}
|
||||
}
|
||||
|
||||
.header-tag {
|
||||
margin-top: 26rpx;
|
||||
color: #8D929C;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
.content-column {
|
||||
margin-top: 32rpx;
|
||||
padding: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.02);
|
||||
background: #ffffff;
|
||||
|
||||
.column-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.column-method {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.method-item {
|
||||
margin-top: 32rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
background-size: 32rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
margin: 0 16rpx;
|
||||
}
|
||||
|
||||
.radio {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
background: #D6DBDE;
|
||||
border-radius: 50%;
|
||||
|
||||
&.active {
|
||||
background: var(--theme-color);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.column-upload {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 32rpx;
|
||||
column-gap: 3.5%;
|
||||
row-gap: 24rpx;
|
||||
|
||||
.upload-image {
|
||||
position: relative;
|
||||
width: 31%;
|
||||
height: 0;
|
||||
padding-top: 31%;
|
||||
|
||||
.image-select {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.image-video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 10rpx;
|
||||
background: var(--theme-color);
|
||||
padding: 56rpx;
|
||||
}
|
||||
|
||||
.image-delete {
|
||||
position: absolute;
|
||||
top: -16rpx;
|
||||
right: -16rpx;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
.image-choose {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
left: 20rpx;
|
||||
right: 20rpx;
|
||||
bottom: 20rpx;
|
||||
z-index: 6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
|
||||
.icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
padding: 18rpx;
|
||||
background: var(--theme-color);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-top: 16rpx;
|
||||
color: var(--theme-color);
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.image-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
background: var(--theme-color);
|
||||
opacity: 0.08;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.column-info {
|
||||
margin-top: 24rpx;
|
||||
|
||||
.info-item {
|
||||
margin-top: 24rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.item-copy {
|
||||
color: var(--theme-color);
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 99;
|
||||
padding: 12rpx 32rpx;
|
||||
background: #ffffff;
|
||||
border-top: 1rpx solid #F6F7FB;
|
||||
|
||||
.footer-btn {
|
||||
color: #ffffff;
|
||||
font-size: 32rpx;
|
||||
line-height: 44rpx;
|
||||
padding: 22rpx 24rpx;
|
||||
border-radius: 16rpx;
|
||||
background: var(--theme-color);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
126
pages/member/fees/success.vue
Normal file
126
pages/member/fees/success.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 提交成功 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="container" :style="{'--theme-color': themeColor}">
|
||||
<!-- 标题栏 -->
|
||||
<title-bar :showBack="true" title="提交成功"></title-bar>
|
||||
<!-- 内容区 -->
|
||||
<view class="container-main" v-if="loadEnd">
|
||||
<view class="main-image">
|
||||
<image class="icon" src="/static/check.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="main-title">提交成功</view>
|
||||
<view class="main-subtitle" v-if="payType == 1">提交成功，请等待管理员审核</view>
|
||||
<view class="main-subtitle" v-else>提交成功，请前往个人中心查看会员状态</view>
|
||||
<view class="main-btn" @click="toMine">前往查看</view>
|
||||
<view class="main-back" @click="toIndex">返回首页</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 加载完成
|
||||
loadEnd: false,
|
||||
// 支付类型
|
||||
payType: null,
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.payType = option.type
|
||||
},
|
||||
onReady() {
|
||||
this.loadEnd = true
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 跳转个人中心
|
||||
toMine() {
|
||||
uni.switchTab({
|
||||
url: "/pages/mine/index"
|
||||
})
|
||||
},
|
||||
// 返回首页
|
||||
toIndex() {
|
||||
uni.switchTab({
|
||||
url: "/pages/index/index"
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.container {
|
||||
.container-main {
|
||||
padding: 144rpx 48rpx 32rpx;
|
||||
|
||||
.main-image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin: 0 auto;
|
||||
padding: 48rpx;
|
||||
background: var(--theme-color);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
color: #333;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
line-height: 50rpx;
|
||||
margin-top: 48rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.main-subtitle {
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
margin-top: 24rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.main-btn {
|
||||
color: #FFF;
|
||||
font-size: 32rpx;
|
||||
line-height: 44rpx;
|
||||
padding: 34rpx;
|
||||
border-radius: 16rpx;
|
||||
text-align: center;
|
||||
margin-top: 48rpx;
|
||||
background: var(--theme-color);
|
||||
}
|
||||
|
||||
.main-back {
|
||||
color: #979797;
|
||||
font-size: 32rpx;
|
||||
line-height: 44rpx;
|
||||
padding: 32rpx;
|
||||
text-align: center;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
477
pages/member/index.vue
Normal file
477
pages/member/index.vue
Normal file
@@ -0,0 +1,477 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 会员风采 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<page-meta :page-style="'overflow:' + (pageShow ? 'hidden' : 'visible')"></page-meta>
|
||||
<view class="container" :style="{'--theme-color': themeColor}">
|
||||
<!-- 标题栏 -->
|
||||
<title-bar title="会员风采"></title-bar>
|
||||
<!-- 顶部搜索筛选栏 -->
|
||||
<block v-if="loadEnd">
|
||||
<view class="container-search" :style="{top: titleBarHeight + 'px'}">
|
||||
<view class="search-input flex align-items-center" @click="toSearch()">
|
||||
<image class="icon" src="/static/search.png" mode="aspectFit"></image>
|
||||
<text class="text flex-item">请输入姓名搜索</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="container-classify">
|
||||
<menu-carousel :show-data="industryList" height="370rpx" icon-size="80rpx" font-size="24rpx" line-height="34rpx" margin-top="48rpx" @toPage="toIndustry"></menu-carousel>
|
||||
</view>
|
||||
<view class="container-screen flex" :style="{top: `calc(${titleBarHeight}px + 112rpx)`}">
|
||||
<view class="screen-item flex-item" :class="{active: isNearby}" @click="changeScreen(1)">
|
||||
<text class="text">附近会员</text>
|
||||
</view>
|
||||
<view class="screen-item flex-item" :class="{active: selectRegion.city}" @click="changeScreen(2)">
|
||||
<text class="text">会员籍贯</text>
|
||||
<view class="icon" :style="{'background-image': 'url('+ iconDownActive +')'}" v-if="iconDownActive && selectRegion.city"></view>
|
||||
<view class="icon" :style="{'background-image': 'url('+ iconDown +')'}" v-else-if="iconDown"></view>
|
||||
</view>
|
||||
<view class="screen-item flex-item" :class="{active: selectLevel.length}" @click="changeScreen(3)">
|
||||
<text class="text">会员级别</text>
|
||||
<view class="icon" :style="{'background-image': 'url('+ iconDownActive +')'}" v-if="iconDownActive && selectLevel.length"></view>
|
||||
<view class="icon" :style="{'background-image': 'url('+ iconDown +')'}" v-else-if="iconDown"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 会员列表 -->
|
||||
<view class="container-main" v-if="loadEnd">
|
||||
<member-item :show-data="memberList" v-if="memberList.length"></member-item>
|
||||
<empty top="64rpx" title="暂无相关会员~" v-else></empty>
|
||||
</view>
|
||||
<!-- 底部导航 -->
|
||||
<tab-bar></tab-bar>
|
||||
<!-- 地区选择框 -->
|
||||
<region-modal ref="regionModal" @onChange="pageChange" @callback="changeRegion"></region-modal>
|
||||
<!-- 级别选择框 -->
|
||||
<level-modal ref="levelModal" @onChange="pageChange" @callback="changeLevel"></level-modal>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
import menuCarousel from "@/pages/component/menu/carousel.vue"
|
||||
import memberItem from "@/pages/component/member/index.vue"
|
||||
import regionModal from "@/pages/component/modal/region.vue"
|
||||
import levelModal from "@/pages/component/modal/level.vue"
|
||||
import svgData from "@/common/svg.js"
|
||||
// #ifdef H5
|
||||
import wx from 'weixin-js-sdk';
|
||||
// #endif
|
||||
export default {
|
||||
components: {
|
||||
menuCarousel,
|
||||
memberItem,
|
||||
regionModal,
|
||||
levelModal,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 加载完成
|
||||
loadEnd: false,
|
||||
// 标题栏高度
|
||||
titleBarHeight: 0,
|
||||
// 页面是否阻止滚动
|
||||
pageShow: false,
|
||||
// 行业分类
|
||||
industryList: [],
|
||||
// 是否筛选附近会员
|
||||
isNearby: false,
|
||||
// 已选会员籍贯
|
||||
selectRegion: {},
|
||||
// 已选会员级别
|
||||
selectLevel: [],
|
||||
// 向下图标-未选中
|
||||
iconDown: "",
|
||||
// 分类查询参数
|
||||
page: 1,
|
||||
limit: 20,
|
||||
hasMore: false,
|
||||
// 会员列表
|
||||
memberList: [],
|
||||
// 是否授权位置信息
|
||||
isLocation: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
shareImage: state => state.app.shareImage,
|
||||
shareTitle: state => state.app.shareTitle,
|
||||
iconDownActive: state => {
|
||||
return svgData.svgToUrl("down", state.app.themeColor)
|
||||
}
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
// #ifdef MP-WEIXIN
|
||||
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight
|
||||
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||||
this.titleBarHeight = statusBarHeight + (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
|
||||
// #endif
|
||||
},
|
||||
onLoad() {
|
||||
this.getSvgIcon()
|
||||
uni.showLoading({
|
||||
title: "加载中"
|
||||
})
|
||||
// #ifdef H5
|
||||
this.initConfig()
|
||||
// #endif
|
||||
this.getIndustry(() => {
|
||||
uni.hideLoading()
|
||||
this.loadEnd = true
|
||||
})
|
||||
this.getAuthSetting(() => {
|
||||
this.getMemberList()
|
||||
})
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.getIndustry()
|
||||
this.page = 1
|
||||
this.getMemberList(() => {
|
||||
uni.stopPullDownRefresh()
|
||||
})
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.hasMore) {
|
||||
this.page++
|
||||
this.getMemberList()
|
||||
}
|
||||
},
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: this.shareTitle,
|
||||
imageUrl: this.shareImage,
|
||||
}
|
||||
},
|
||||
onShareTimeline() {
|
||||
return {
|
||||
title: this.shareTitle,
|
||||
imageUrl: this.shareImage,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 改变页面滚动状态
|
||||
pageChange(state) {
|
||||
this.pageShow = state
|
||||
},
|
||||
// #ifdef H5
|
||||
// 微信公众号初始化方法
|
||||
initConfig() {
|
||||
this.$util.request("main.WeChatConfig", {
|
||||
url: location.href.split('#')[0]
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
wx.config({
|
||||
debug: false,
|
||||
appId: res.data.appId,
|
||||
timestamp: Number(res.data.timestamp),
|
||||
nonceStr: res.data.nonceStr,
|
||||
signature: res.data.signature,
|
||||
jsApiList: ["updateAppMessageShareData", "updateTimelineShareData", "getLocation"],
|
||||
openTagList: ["updateAppMessageShareData", "updateTimelineShareData"],
|
||||
})
|
||||
wx.ready(() => {
|
||||
wx.updateAppMessageShareData({
|
||||
title: this.shareTitle,
|
||||
desc: "",
|
||||
link: window.location.href,
|
||||
imgUrl: this.shareImage,
|
||||
});
|
||||
wx.updateTimelineShareData({
|
||||
title: this.shareTitle,
|
||||
link: window.location.href,
|
||||
imgUrl: this.shareImage,
|
||||
});
|
||||
});
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('通过config接口注入权限验证配置 ', error)
|
||||
})
|
||||
},
|
||||
// #endif
|
||||
// 获取向下图标
|
||||
getSvgIcon() {
|
||||
this.iconDown = svgData.svgToUrl("down", "#999999")
|
||||
},
|
||||
// 获取行业分类
|
||||
getIndustry(fn) {
|
||||
this.$util.request("member.industry").then(res => {
|
||||
if (fn) fn()
|
||||
if (res.code == 1) {
|
||||
this.industryList = res.data
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取行业分类 ', error)
|
||||
})
|
||||
},
|
||||
// 改变分类
|
||||
changeScreen(id) {
|
||||
if (id == 1) {
|
||||
this.getAuthSetting(() => {
|
||||
if (this.isLocation) {
|
||||
this.isNearby = !this.isNearby
|
||||
this.page = 1
|
||||
this.getMemberList()
|
||||
}
|
||||
})
|
||||
} else if (id == 2) {
|
||||
this.$refs.regionModal.open(this.selectRegion)
|
||||
} else if (id == 3) {
|
||||
this.$refs.levelModal.open(this.selectLevel)
|
||||
}
|
||||
},
|
||||
// 选择会员籍贯
|
||||
changeRegion(data) {
|
||||
this.selectRegion = data
|
||||
this.page = 1
|
||||
this.getMemberList()
|
||||
},
|
||||
// 选择会员级别
|
||||
changeLevel(value) {
|
||||
this.selectLevel = value
|
||||
this.page = 1
|
||||
this.getMemberList()
|
||||
},
|
||||
// 跳转搜索
|
||||
toSearch() {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pages/member/search/index"
|
||||
})
|
||||
},
|
||||
// 跳转行业分类
|
||||
toIndustry(item) {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: `/pages/member/industry?id=${item.id}&name=${encodeURIComponent(item.name)}`,
|
||||
})
|
||||
},
|
||||
// 获取位置权限
|
||||
getAuthSetting(fn) {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.getSetting({
|
||||
success: (setting) => {
|
||||
if (setting.authSetting && setting.authSetting.hasOwnProperty("scope.userLocation")) {
|
||||
if (setting.authSetting["scope.userLocation"]) {
|
||||
this.isLocation = true
|
||||
if (fn) fn()
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '请重新授权获取您的地理位置，否则部分功能将无法使用',
|
||||
confirmColor: "#E50002",
|
||||
confirmText: "授权",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.openSetting({
|
||||
success: () => {
|
||||
this.isLocation = true
|
||||
if (fn) fn()
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error(err)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.isLocation = false
|
||||
if (fn) fn()
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
this.isLocation = false
|
||||
if (fn) fn()
|
||||
}
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.isLocation = true
|
||||
if (fn) fn()
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
this.isLocation = false
|
||||
if (fn) fn()
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
this.isLocation = true
|
||||
if (fn) fn()
|
||||
// #endif
|
||||
},
|
||||
// 获取会员列表
|
||||
getMemberList(fn) {
|
||||
this.getLocation((location) => {
|
||||
let data = {
|
||||
page: this.page,
|
||||
limit: this.limit,
|
||||
}
|
||||
if (location && location.latitude && location.longitude) {
|
||||
data.latitude = location.latitude
|
||||
data.longitude = location.longitude
|
||||
if (this.isNearby) data.nearby = 1
|
||||
} else this.isNearby = false
|
||||
if (this.selectRegion.city) data.native_place = this.selectRegion.city
|
||||
if (this.selectRegion.area) data.native_place += "/" + this.selectRegion.area
|
||||
if (this.selectLevel.length) data.member_level_id = this.selectLevel.map(item => item.id).join()
|
||||
this.$util.request("member.list", data).then(res => {
|
||||
if (fn) fn()
|
||||
if (res.code == 1) {
|
||||
let list = res.data.data
|
||||
this.hasMore = this.page < res.data.total / this.limit ? true : false
|
||||
this.memberList = this.page == 1 ? list : [...this.memberList, ...list];
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取会员列表 ', error)
|
||||
})
|
||||
})
|
||||
},
|
||||
// 获取当前地址
|
||||
getLocation(fn) {
|
||||
// #ifdef MP-WEIXIN
|
||||
if (!this.isLocation) {
|
||||
fn()
|
||||
return
|
||||
}
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
geocode: true,
|
||||
success: (res) => {
|
||||
fn({
|
||||
latitude: res.latitude,
|
||||
longitude: res.longitude,
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
this.isLocation = false
|
||||
fn()
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
wx.ready(() => {
|
||||
wx.getLocation({
|
||||
type: 'wgs84',
|
||||
success: (res) => {
|
||||
fn({
|
||||
latitude: res.latitude,
|
||||
longitude: res.longitude,
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
this.isLocation = false
|
||||
fn()
|
||||
},
|
||||
cancel: () => {
|
||||
this.isLocation = false
|
||||
fn()
|
||||
}
|
||||
});
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
.container-search {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
background: #ffffff;
|
||||
padding: 0 32rpx;
|
||||
height: 112rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 20rpx 32rpx;
|
||||
background: #F9F9F9;
|
||||
border-radius: 16rpx;
|
||||
|
||||
.icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-left: 16rpx;
|
||||
color: #8D929C;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container-classify {
|
||||
background: #ffffff;
|
||||
padding: 48rpx 0 28rpx;
|
||||
}
|
||||
|
||||
.container-screen {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 98;
|
||||
background: #ffffff;
|
||||
|
||||
.screen-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 24rpx;
|
||||
|
||||
.text {
|
||||
color: #666666;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 20rpx;
|
||||
height: 16rpx;
|
||||
background-size: 20rpx 16rpx;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
&.active .text {
|
||||
color: var(--theme-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container-main {
|
||||
padding: 32rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
215
pages/member/industry.vue
Normal file
215
pages/member/industry.vue
Normal file
@@ -0,0 +1,215 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 行业分类 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 标题栏 -->
|
||||
<title-bar :title="industryName"></title-bar>
|
||||
<!-- 内容区 -->
|
||||
<view class="container-main" v-if="loadEnd">
|
||||
<member-item :show-data="memberList" v-if="memberList.length"></member-item>
|
||||
<empty top="30%" title="暂无相关内容~" v-else></empty>
|
||||
</view>
|
||||
<!-- 底部导航 -->
|
||||
<tab-bar></tab-bar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import memberItem from "@/pages/component/member/index.vue"
|
||||
// #ifdef H5
|
||||
import wx from 'weixin-js-sdk';
|
||||
// #endif
|
||||
export default {
|
||||
components: {
|
||||
memberItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 加载完成
|
||||
loadEnd: false,
|
||||
// 行业id
|
||||
industryId: "",
|
||||
// 行业名称
|
||||
industryName: "",
|
||||
// 查询参数
|
||||
page: 1,
|
||||
limit: 20,
|
||||
hasMore: false,
|
||||
// 数据列表
|
||||
memberList: [],
|
||||
// 是否授权位置信息
|
||||
isLocation: false,
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.industryId = option.id
|
||||
this.industryName = decodeURIComponent(option.name)
|
||||
uni.showLoading({
|
||||
title: "加载中"
|
||||
})
|
||||
// #ifdef H5
|
||||
this.initConfig()
|
||||
// #endif
|
||||
this.getAuthSetting(() => {
|
||||
uni.hideLoading()
|
||||
this.loadEnd = true
|
||||
})
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.hasMore) {
|
||||
this.page++
|
||||
this.getMemberList()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// #ifdef H5
|
||||
// 微信公众号初始化方法
|
||||
initConfig() {
|
||||
this.$util.request("main.WeChatConfig", {
|
||||
url: location.href.split('#')[0]
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
wx.config({
|
||||
debug: false,
|
||||
appId: res.data.appId,
|
||||
timestamp: Number(res.data.timestamp),
|
||||
nonceStr: res.data.nonceStr,
|
||||
signature: res.data.signature,
|
||||
jsApiList: ["getLocation"],
|
||||
})
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('通过config接口注入权限验证配置 ', error)
|
||||
})
|
||||
},
|
||||
// #endif
|
||||
// 获取位置权限
|
||||
getAuthSetting(fn) {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.getSetting({
|
||||
success: (setting) => {
|
||||
if (setting.authSetting && setting.authSetting.hasOwnProperty("scope.userLocation")) {
|
||||
if (setting.authSetting["scope.userLocation"]) {
|
||||
this.isLocation = true
|
||||
this.getMemberList(fn)
|
||||
} else {
|
||||
this.isLocation = false
|
||||
this.getMemberList(fn)
|
||||
}
|
||||
} else {
|
||||
this.isLocation = false
|
||||
this.getMemberList(fn)
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
this.isLocation = false
|
||||
this.getMemberList(fn)
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
this.isLocation = false
|
||||
this.getMemberList(fn)
|
||||
// #endif
|
||||
},
|
||||
// 获取会员列表
|
||||
getMemberList(fn) {
|
||||
this.getLocation((location) => {
|
||||
let data = {
|
||||
page: this.page,
|
||||
limit: this.limit,
|
||||
industry_category_id: this.industryId
|
||||
}
|
||||
if (location && location.latitude && location.longitude) {
|
||||
data.latitude = location.latitude
|
||||
data.longitude = location.longitude
|
||||
}
|
||||
this.$util.request("member.list", data).then(res => {
|
||||
if (fn) fn()
|
||||
if (res.code == 1) {
|
||||
let list = res.data.data
|
||||
this.hasMore = this.page < res.data.total / this.limit ? true : false
|
||||
this.memberList = this.page == 1 ? list : [...this.memberList, ...list];
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取会员列表 ', error)
|
||||
})
|
||||
})
|
||||
},
|
||||
// 获取当前地址
|
||||
getLocation(fn) {
|
||||
// #ifdef MP-WEIXIN
|
||||
if (!this.isLocation) {
|
||||
fn()
|
||||
return
|
||||
}
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
geocode: true,
|
||||
success: (res) => {
|
||||
fn({
|
||||
latitude: res.latitude,
|
||||
longitude: res.longitude,
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
this.isLocation = false
|
||||
fn()
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
wx.ready(() => {
|
||||
wx.getLocation({
|
||||
type: 'wgs84',
|
||||
success: (res) => {
|
||||
fn({
|
||||
latitude: res.latitude,
|
||||
longitude: res.longitude,
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
this.isLocation = false
|
||||
fn()
|
||||
},
|
||||
cancel: () => {
|
||||
this.isLocation = false
|
||||
fn()
|
||||
}
|
||||
});
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
.container-main {
|
||||
padding: 32rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1224
pages/member/information.vue
Normal file
1224
pages/member/information.vue
Normal file
File diff suppressed because it is too large
Load Diff
423
pages/member/organization.vue
Normal file
423
pages/member/organization.vue
Normal file
@@ -0,0 +1,423 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 会员团体 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="container" :style="{'--theme-color': themeColor}">
|
||||
<!-- 标题栏 -->
|
||||
<title-bar :showBack="true" :title="memberTypeConfig.group"></title-bar>
|
||||
<!-- 内容区 -->
|
||||
<view class="container-main">
|
||||
<block v-if="loadEnd">
|
||||
<!-- 轮播图 -->
|
||||
<view class="main-carousel" v-if="carouselList.length">
|
||||
<carousel :show-data="carouselList" height="320rpx" radius="16rpx" right="24rpx" bottom="24rpx"></carousel>
|
||||
</view>
|
||||
<!-- 团体信息 -->
|
||||
<view class="main-info flex align-items-center">
|
||||
<image class="info-avatar" :src="memberInfo.organize_logo" mode="aspectFill"></image>
|
||||
<view class="info-name flex-item text-ellipsis-more">{{memberInfo.organize_name}}</view>
|
||||
</view>
|
||||
<!-- 团体简介 -->
|
||||
<view class="main-introduce">
|
||||
<view class="introduce-title">团体简介</view>
|
||||
<view class="introduce-content">
|
||||
<mp-html :content="memberInfo.organize_introduction || '暂未完善'"></mp-html>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 产品列表 -->
|
||||
<view class="main-product" v-if="memberInfo.company_goods_list && memberInfo.company_goods_list.length">
|
||||
<view class="product-title">产品列表</view>
|
||||
<view class="product-list">
|
||||
<view class="list-item" v-for="item in memberInfo.company_goods_list" :key="item.id" @click="toProductDetails(item.id)">
|
||||
<image class="item-image" :src="item.image" mode="aspectFill"></image>
|
||||
<view class="item-name text-ellipsis-more">{{item.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 自定义字段 -->
|
||||
<member-custom :show-data="memberInfo.custom_content"></member-custom>
|
||||
<!-- 底部按钮 -->
|
||||
<view class="main-footer">
|
||||
<view class="flex justify-content-between align-items-center">
|
||||
<view class="footer-menu flex">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<button type="default" open-type="share" class="menu-btn">
|
||||
<image class="icon" src="/static/share.png" mode="aspectFit"></image>
|
||||
<view class="text">分享</view>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
<view class="menu-btn" @click="toNavigation()">
|
||||
<image class="icon" src="/static/location.png" mode="aspectFit"></image>
|
||||
<view class="text">地址</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer-btn" @click="onContact()" v-if="memberInfo.company_office_number">拨打电话</view>
|
||||
</view>
|
||||
<view class="safe-padding"></view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="main-login" v-else-if="showLogin">
|
||||
<image class="login-image" :src="loginImg" mode="aspectFit"></image>
|
||||
<view class="login-tips">小程序需要登录注册才能使用相关功能，请登录后查看该页面</view>
|
||||
<view class="login-btn" @click="toLogin()">前往登录</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
import memberCustom from "@/pages/component/member/custom.vue"
|
||||
import carousel from "@/pages/component/carousel/carousel.vue"
|
||||
// #ifdef H5
|
||||
import wx from 'weixin-js-sdk';
|
||||
// #endif
|
||||
export default {
|
||||
components: {
|
||||
memberCustom,
|
||||
carousel,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 加载完成
|
||||
loadEnd: false,
|
||||
// 会员id
|
||||
memberId: null,
|
||||
// 会员详情
|
||||
memberInfo: {},
|
||||
// 轮播图列表
|
||||
carouselList: [],
|
||||
// 是否显示登录提示
|
||||
showLogin: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
loginImg: state => state.app.loginImg,
|
||||
memberTypeConfig: state => state.app.memberTypeConfig,
|
||||
})
|
||||
},
|
||||
onLoad(option) {
|
||||
this.memberId = option.id
|
||||
if (uni.getStorageSync("token")) {
|
||||
uni.showLoading({
|
||||
title: "加载中"
|
||||
})
|
||||
this.getMemberInfo(() => {
|
||||
this.loadEnd = true
|
||||
uni.hideLoading()
|
||||
// #ifdef H5
|
||||
this.initConfig()
|
||||
// #endif
|
||||
})
|
||||
} else {
|
||||
this.showLogin = true
|
||||
this.$util.verifyLogin(2)
|
||||
}
|
||||
},
|
||||
onShareTimeline() {
|
||||
return {
|
||||
title: `${this.memberInfo.member_level_name || ""}单位${this.memberInfo.organize_name || ""}`,
|
||||
path: '/pages/member/organization?id=' + this.memberId,
|
||||
imageUrl: this.memberInfo.organize_logo,
|
||||
}
|
||||
},
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: `${this.memberInfo.member_level_name || ""}单位${this.memberInfo.organize_name || ""}`,
|
||||
path: '/pages/member/organization?id=' + this.memberId,
|
||||
imageUrl: this.memberInfo.organize_logo,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// #ifdef H5
|
||||
// 微信公众号初始化方法
|
||||
initConfig() {
|
||||
this.$util.request("main.WeChatConfig", {
|
||||
url: location.href.split('#')[0]
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
wx.config({
|
||||
debug: false,
|
||||
appId: res.data.appId,
|
||||
timestamp: Number(res.data.timestamp),
|
||||
nonceStr: res.data.nonceStr,
|
||||
signature: res.data.signature,
|
||||
jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
|
||||
openTagList: ["updateAppMessageShareData", "updateTimelineShareData"],
|
||||
})
|
||||
wx.ready(() => {
|
||||
wx.updateAppMessageShareData({
|
||||
title: this.memberInfo.organize_name,
|
||||
desc: "",
|
||||
link: window.location.href,
|
||||
imgUrl: this.memberInfo.organize_logo,
|
||||
});
|
||||
wx.updateTimelineShareData({
|
||||
title: this.memberInfo.organize_name,
|
||||
link: window.location.href,
|
||||
imgUrl: this.memberInfo.organize_logo,
|
||||
});
|
||||
});
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('通过config接口注入权限验证配置 ', error)
|
||||
})
|
||||
},
|
||||
// #endif
|
||||
// 获取会员详情
|
||||
getMemberInfo(fn) {
|
||||
this.$util.request("member.organization", {
|
||||
id: this.memberId
|
||||
}).then(res => {
|
||||
if (fn) fn()
|
||||
if (res.code == 1) {
|
||||
this.memberInfo = res.data
|
||||
this.carouselList = this.splitImages(res.data.company_carousel_images || "")
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
if (error == 401) {
|
||||
this.showLogin = true
|
||||
} else {
|
||||
console.error('获取会员详情 ', error)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 字符串转数组格式图片
|
||||
splitImages(images) {
|
||||
try {
|
||||
if (images) return images.split(',');
|
||||
else return []
|
||||
} catch (error) {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// 跳转产品详情
|
||||
toProductDetails(id) {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pages/member/product/details?id=" + id,
|
||||
})
|
||||
},
|
||||
// 跳转地图导航
|
||||
toNavigation() {
|
||||
const addressInfo = JSON.parse(this.memberInfo.address_json || "{}")
|
||||
this.$util.toPage({
|
||||
mode: 7,
|
||||
address: addressInfo,
|
||||
})
|
||||
},
|
||||
// 拨打电话
|
||||
onContact() {
|
||||
this.$util.toPage({
|
||||
mode: 6,
|
||||
phone: this.memberInfo.company_office_number,
|
||||
})
|
||||
},
|
||||
// 前往登录
|
||||
toLogin() {
|
||||
uni.redirectTo({
|
||||
url: `/pages/member/organization?id=${this.memberId}`,
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
.container-main {
|
||||
padding: 32rpx 32rpx 144rpx;
|
||||
|
||||
.main-carousel {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.main-info {
|
||||
padding: 32rpx 24rpx 32rpx 32rpx;
|
||||
border-radius: 10rpx;
|
||||
background: #ffffff;
|
||||
|
||||
.info-avatar {
|
||||
width: 128rpx;
|
||||
height: 128rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.info-name {
|
||||
margin-left: 32rpx;
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
line-height: 40rpx;
|
||||
color: #5A5B6E;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
margin-left: 32rpx;
|
||||
border-radius: 50%;
|
||||
background: var(--theme-color);
|
||||
padding: 0;
|
||||
|
||||
.icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
padding: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-introduce {
|
||||
padding: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #ffffff;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.introduce-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.introduce-content {
|
||||
margin-top: 24rpx;
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.main-product {
|
||||
padding: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #ffffff;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.product-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.product-list {
|
||||
margin-top: 24rpx;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 2fr);
|
||||
column-gap: 28rpx;
|
||||
row-gap: 30rpx;
|
||||
|
||||
.list-item {
|
||||
.item-image {
|
||||
width: 100%;
|
||||
height: 296rpx;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
padding: 0 24rpx;
|
||||
margin-top: 24rpx;
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 99;
|
||||
padding: 12rpx 32rpx 12rpx 48rpx;
|
||||
background: #ffffff;
|
||||
border-top: 1rpx solid #F6F7FB;
|
||||
|
||||
.footer-menu {
|
||||
.menu-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 32rpx;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
|
||||
.icon {
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #5A5B6E;
|
||||
font-size: 20rpx;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-btn {
|
||||
color: #ffffff;
|
||||
font-size: 32rpx;
|
||||
line-height: 44rpx;
|
||||
padding: 22rpx 48rpx;
|
||||
border-radius: 16rpx;
|
||||
background: var(--theme-color);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.main-login {
|
||||
padding: 96rpx 60rpx 0;
|
||||
|
||||
.login-image {
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
}
|
||||
|
||||
.login-tips {
|
||||
color: #585858;
|
||||
font-size: 36rpx;
|
||||
line-height: 50rpx;
|
||||
margin-top: 48rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
margin-top: 56rpx;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
font-size: 28rpx;
|
||||
border-radius: 16rpx;
|
||||
text-align: center;
|
||||
background: var(--theme-color);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
197
pages/member/product/details.vue
Normal file
197
pages/member/product/details.vue
Normal file
@@ -0,0 +1,197 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 产品详情 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="container" :style="{'--theme-color': themeColor}">
|
||||
<!-- 标题栏 -->
|
||||
<title-bar :showBack="true" title="产品详情"></title-bar>
|
||||
<!-- 内容区 -->
|
||||
<view class="container-main" v-if="loadEnd">
|
||||
<view class="main-carousel">
|
||||
<carousel :show-data="carouselList" height="750rpx" radius="0" right="32rpx" bottom="32rpx"></carousel>
|
||||
</view>
|
||||
<view class="main-info">
|
||||
<view class="info-title">{{productInfo.name}}</view>
|
||||
</view>
|
||||
<view class="main-content">
|
||||
<view class="content-title">产品详情</view>
|
||||
<mp-html :content="productInfo.content" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
// #ifdef H5
|
||||
import wx from 'weixin-js-sdk';
|
||||
// #endif
|
||||
import carousel from "@/pages/component/carousel/carousel.vue"
|
||||
export default {
|
||||
components: {
|
||||
carousel,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 是否加载完成
|
||||
loadEnd: false,
|
||||
// 产品Id
|
||||
productId: null,
|
||||
// 产品详情
|
||||
productInfo: {},
|
||||
// 轮播图列表
|
||||
carouselList: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
}),
|
||||
},
|
||||
onLoad(option) {
|
||||
this.productId = option.id
|
||||
uni.showLoading({
|
||||
title: "加载中"
|
||||
})
|
||||
this.getProductDetails(() => {
|
||||
uni.hideLoading()
|
||||
this.loadEnd = true
|
||||
// #ifdef H5
|
||||
this.initConfig()
|
||||
// #endif
|
||||
})
|
||||
},
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: this.productInfo.name,
|
||||
path: '/pages/member/product/details?id=' + this.productId,
|
||||
imageUrl: this.carouselList[0].image,
|
||||
}
|
||||
},
|
||||
onShareTimeline() {
|
||||
return {
|
||||
title: this.productInfo.name,
|
||||
path: '/pages/member/product/details?id=' + this.productId,
|
||||
imageUrl: this.carouselList[0].image,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 改变页面滚动状态
|
||||
pageChange(state) {
|
||||
this.pageShow = state
|
||||
},
|
||||
// #ifdef H5
|
||||
// 微信公众号初始化方法
|
||||
initConfig() {
|
||||
this.$util.request("main.WeChatConfig", {
|
||||
url: location.href.split('#')[0]
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
wx.config({
|
||||
debug: false,
|
||||
appId: res.data.appId,
|
||||
timestamp: Number(res.data.timestamp),
|
||||
nonceStr: res.data.nonceStr,
|
||||
signature: res.data.signature,
|
||||
jsApiList: ["updateAppMessageShareData", "updateTimelineShareData", "wx-open-launch-weapp"],
|
||||
openTagList: ["updateAppMessageShareData", "updateTimelineShareData", 'wx-open-launch-weapp'],
|
||||
})
|
||||
wx.ready(() => {
|
||||
wx.updateAppMessageShareData({
|
||||
title: this.productInfo.name,
|
||||
desc: "",
|
||||
link: window.location.href,
|
||||
imgUrl: this.carouselList[0].image,
|
||||
});
|
||||
wx.updateTimelineShareData({
|
||||
title: this.productInfo.name,
|
||||
link: window.location.href,
|
||||
imgUrl: this.carouselList[0].image,
|
||||
});
|
||||
});
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('通过config接口注入权限验证配置 ', error)
|
||||
})
|
||||
},
|
||||
// #endif
|
||||
// 获取产品详情
|
||||
getProductDetails(fn) {
|
||||
this.$util.request("member.product.details", {
|
||||
id: this.productId
|
||||
}).then(res => {
|
||||
if (fn) fn()
|
||||
if (res.code == 1) {
|
||||
this.productInfo = res.data
|
||||
this.carouselList = this.splitImages(res.data.images)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
if (fn) fn()
|
||||
console.error('获取产品详情', error)
|
||||
})
|
||||
},
|
||||
// 字符串转数组格式图片
|
||||
splitImages(images) {
|
||||
try {
|
||||
if (images) return images.split(',');
|
||||
else return []
|
||||
} catch (error) {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
.container-main {
|
||||
.main-info {
|
||||
padding: 32rpx;
|
||||
background: #FFF;
|
||||
|
||||
.info-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 32rpx;
|
||||
background: #FFF;
|
||||
margin-top: 16rpx;
|
||||
|
||||
.content-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
492
pages/member/product/edit.vue
Normal file
492
pages/member/product/edit.vue
Normal file
@@ -0,0 +1,492 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 添加/修改产品 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="container" :style="{ '--theme-color': themeColor }">
|
||||
<!-- 标题栏 -->
|
||||
<title-bar :showBack="true" :title="productId ? '修改产品' : '添加产品'"></title-bar>
|
||||
<!-- 内容区 -->
|
||||
<view class="container-main" v-if="loadEnd">
|
||||
<!-- 表单 -->
|
||||
<view class="main-form">
|
||||
<!-- 产品图片 -->
|
||||
<view class="form-item">
|
||||
<view class="item-title required">
|
||||
<text class="text">产品图片</text>
|
||||
<text class="tips">（图片建议尺寸1:1）</text>
|
||||
</view>
|
||||
<view class="item-upload">
|
||||
<view class="upload-image" v-for="(img, num) in selectImages" :key="num" @click="previewImage(num)">
|
||||
<image class="image-select" :src="img" mode="aspectFill"></image>
|
||||
<image class="image-delete" src="/static/delete.png" mode="aspectFit" @click.stop="deleteImage(num)"></image>
|
||||
</view>
|
||||
<view class="upload-image" v-if="selectImages.length < 9" @click="chooseImage()">
|
||||
<view class="image-background"></view>
|
||||
<view class="image-choose">
|
||||
<view class="icon">
|
||||
<image src="/static/camera.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="text">上传图片</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 产品名称 -->
|
||||
<view class="form-item">
|
||||
<view class="item-title required">产品名称</view>
|
||||
<view class="item-input">
|
||||
<input class="input" type="text" v-model="formData.name" placeholder="请输入产品名称" placeholder-class="placeholder" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 产品介绍 -->
|
||||
<view class="form-item">
|
||||
<view class="item-title">产品介绍</view>
|
||||
<view class="item-input">
|
||||
<sp-editor ref="spEditor" style="width: 100%;" :toolbar-config="toolbarConfig" @init="initEditor" @upinImage="upinImage" @overMax="overMax" @fullscreen="toEditor"></sp-editor>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 提交按钮 -->
|
||||
<view class="main-footer">
|
||||
<view class="footer-btn" @click="handleSubmit()">{{productId ? '修改' : '添加'}}</view>
|
||||
<view class="safe-padding"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 加载完成
|
||||
loadEnd: false,
|
||||
// 产品id
|
||||
productId: null,
|
||||
// 表单数据
|
||||
formData: {
|
||||
images: "",
|
||||
name: "",
|
||||
content: "",
|
||||
},
|
||||
// 已选择图片
|
||||
selectImages: [],
|
||||
// 编辑器实例
|
||||
editorIns: null,
|
||||
// 编辑器配置
|
||||
toolbarConfig: {
|
||||
excludeKeys: ['direction', 'date', 'lineHeight', 'letterSpacing', 'listCheck', 'export'],
|
||||
iconSize: '18px',
|
||||
showFullscreen: true,
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
})
|
||||
},
|
||||
onLoad(option) {
|
||||
if (option.id) {
|
||||
this.productId = option.id
|
||||
uni.showLoading({
|
||||
title: "加载中"
|
||||
})
|
||||
this.getProductdDetails(() => {
|
||||
uni.hideLoading()
|
||||
this.loadEnd = true
|
||||
})
|
||||
} else {
|
||||
this.loadEnd = true
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
let pages = getCurrentPages();
|
||||
if (pages[pages.length - 1].$vm.editorContent) {
|
||||
const result = pages[pages.length - 1].$vm.editorContent
|
||||
this.editorIns.setContents({
|
||||
html: result || ""
|
||||
})
|
||||
delete pages[pages.length - 1].$vm.editorContent;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取产品详情
|
||||
getProductdDetails(fn) {
|
||||
this.$util.request("member.product.editDetails", {
|
||||
id: this.productId
|
||||
}).then(res => {
|
||||
if (fn) fn()
|
||||
if (res.code == 1) {
|
||||
this.formData = {
|
||||
id: res.data.id,
|
||||
images: res.data.images,
|
||||
name: res.data.name,
|
||||
content: res.data.content,
|
||||
}
|
||||
this.selectImages = this.splitImages(res.data.images)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
if (fn) fn()
|
||||
console.error('获取产品详情', error)
|
||||
})
|
||||
},
|
||||
// 字符串转数组格式图片
|
||||
splitImages(images) {
|
||||
try {
|
||||
if (images) return images.split(',');
|
||||
else return []
|
||||
} catch (error) {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// 选择图片
|
||||
chooseImage() {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.chooseMedia({
|
||||
count: 9 - this.selectImages.length,
|
||||
mediaType: ['image'],
|
||||
sourceType: ['album', 'camera'],
|
||||
sizeType: ['compressed'],
|
||||
success: (res) => {
|
||||
this.selectImages = [...this.selectImages, ...res.tempFiles.map(item => item.tempFilePath)]
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
uni.chooseImage({
|
||||
count: 9 - this.selectImages.length,
|
||||
sourceType: ['album', 'camera'],
|
||||
sizeType: ['compressed'],
|
||||
success: (res) => {
|
||||
this.selectImages = [...this.selectImages, ...res.tempFilePaths]
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
// 删除图片
|
||||
deleteImage(index) {
|
||||
this.$delete(this.selectImages, index)
|
||||
},
|
||||
// 预览图片
|
||||
previewImage(index) {
|
||||
uni.previewImage({
|
||||
urls: this.selectImages,
|
||||
current: index,
|
||||
})
|
||||
},
|
||||
// 超出最大内容限制
|
||||
overMax() {
|
||||
uni.showToast({
|
||||
title: "输入内容已超过最大字数限制"
|
||||
})
|
||||
},
|
||||
// 初始化编辑器
|
||||
initEditor(editor) {
|
||||
this.editorIns = editor
|
||||
this.editorIns.setContents({
|
||||
html: this.formData.content || ""
|
||||
})
|
||||
},
|
||||
// 上传图片
|
||||
upinImage(tempFiles, editorCtx) {
|
||||
let imageList = []
|
||||
// #ifdef MP-WEIXIN
|
||||
imageList = tempFiles.map(item => item.tempFilePath)
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
imageList = tempFiles.map(item => item.path)
|
||||
// #endif
|
||||
uni.showLoading({
|
||||
title: '上传中请稍后',
|
||||
mask: true
|
||||
})
|
||||
this.$util.uploadFileMultiple(imageList, [], 2).then(result => {
|
||||
result.forEach((item) => {
|
||||
editorCtx.insertImage({
|
||||
src: item,
|
||||
width: '80%',
|
||||
success: () => {
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
});
|
||||
}).catch(error => {
|
||||
console.error('上传图片 ', error)
|
||||
})
|
||||
},
|
||||
// 跳转编辑器页面
|
||||
async toEditor() {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true,
|
||||
})
|
||||
const introduction = await this.$refs.spEditor.getHtml()
|
||||
this.$store.commit('app/setEditorContent', introduction)
|
||||
uni.navigateTo({
|
||||
url: "/pages/member/product/editor",
|
||||
animationType: "fade-in",
|
||||
complete: () => {
|
||||
uni.hideLoading()
|
||||
},
|
||||
})
|
||||
},
|
||||
// 添加/修改产品
|
||||
async handleSubmit() {
|
||||
if (!this.selectImages.length) {
|
||||
uni.showToast({
|
||||
title: "请上传产品图片",
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.formData.name) {
|
||||
uni.showToast({
|
||||
title: "请输入产品名称",
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.showLoading({
|
||||
title: "提交中",
|
||||
mask: true
|
||||
})
|
||||
try {
|
||||
this.formData.content = await this.$refs.spEditor.getHtml()
|
||||
} catch (error) {
|
||||
this.formData.content = ""
|
||||
}
|
||||
const oldImages = this.splitImages(this.formData.images)
|
||||
this.$util.uploadFileMultiple(this.selectImages, oldImages).then(result => {
|
||||
this.formData.images = result
|
||||
this.submitEvent()
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('上传图片 ', error)
|
||||
})
|
||||
},
|
||||
// 提交事件
|
||||
submitEvent() {
|
||||
var url = ""
|
||||
if (this.productId) url = "member.product.edit"
|
||||
else url = "member.product.add"
|
||||
this.$util.request(url, this.formData).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.code == 1) {
|
||||
uni.redirectTo({
|
||||
url: `/pages/member/product/success?type=${this.productId ? 2 : 1}`
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('添加/修改产品', error)
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
.container-main {
|
||||
padding-bottom: 112rpx;
|
||||
|
||||
.main-form {
|
||||
padding: 32rpx 48rpx;
|
||||
|
||||
.form-item {
|
||||
margin-top: 32rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
|
||||
.tips {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&.required::before {
|
||||
display: inline-block;
|
||||
content: "*";
|
||||
color: #E60012;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-input {
|
||||
margin-top: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 16rpx;
|
||||
background: #ffffff;
|
||||
|
||||
.input {
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
height: 112rpx;
|
||||
line-height: 112rpx;
|
||||
flex: 1;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
flex: 1;
|
||||
padding: 36rpx 32rpx;
|
||||
width: 100%;
|
||||
height: 240rpx;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: #ACADB7;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
padding-right: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-upload {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 32rpx;
|
||||
column-gap: 3.5%;
|
||||
row-gap: 24rpx;
|
||||
|
||||
.upload-image {
|
||||
position: relative;
|
||||
width: 31%;
|
||||
height: 0;
|
||||
padding-top: 31%;
|
||||
|
||||
.image-select {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.image-video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 10rpx;
|
||||
background: var(--theme-color);
|
||||
padding: 56rpx;
|
||||
}
|
||||
|
||||
.image-delete {
|
||||
position: absolute;
|
||||
top: -16rpx;
|
||||
right: -16rpx;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
.image-choose {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
left: 20rpx;
|
||||
right: 20rpx;
|
||||
bottom: 20rpx;
|
||||
z-index: 6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
|
||||
.icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
padding: 18rpx;
|
||||
background: var(--theme-color);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-top: 16rpx;
|
||||
color: var(--theme-color);
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.image-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
background: var(--theme-color);
|
||||
opacity: 0.08;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 99;
|
||||
padding: 12rpx 32rpx;
|
||||
background: #ffffff;
|
||||
border-top: 1rpx solid #F6F7FB;
|
||||
|
||||
.footer-btn {
|
||||
color: #ffffff;
|
||||
font-size: 32rpx;
|
||||
line-height: 44rpx;
|
||||
padding: 22rpx 24rpx;
|
||||
border-radius: 16rpx;
|
||||
background: var(--theme-color);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
116
pages/member/product/editor.vue
Normal file
116
pages/member/product/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>
|
||||
108
pages/member/product/success.vue
Normal file
108
pages/member/product/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" :style="{'--theme-color': themeColor}">
|
||||
<!-- 标题栏 -->
|
||||
<title-bar :showBack="true" :title="pageType == 2 ? '修改成功' : '添加成功'"></title-bar>
|
||||
<!-- 内容区 -->
|
||||
<view class="container-main">
|
||||
<view class="main-image">
|
||||
<image class="icon" src="/static/check.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="main-title">{{pageType == 2 ? '修改成功' : '添加成功'}}</view>
|
||||
<view class="main-subtitle">已成功{{pageType == 2 ? '修改' : '添加'}}产品，请前往列表查看</view>
|
||||
<view class="main-btn" @click="goBack">返回列表</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 页面类型
|
||||
pageType: 1,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
})
|
||||
},
|
||||
onLoad(option) {
|
||||
this.pageType = option.type || 1
|
||||
},
|
||||
methods: {
|
||||
// 返回列表
|
||||
goBack() {
|
||||
if (getCurrentPages().length == 1) {
|
||||
uni.switchTab({
|
||||
url: "/pages/index/index"
|
||||
})
|
||||
} else {
|
||||
uni.navigateBack()
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.container {
|
||||
.container-main {
|
||||
padding: 144rpx 48rpx 32rpx;
|
||||
|
||||
.main-image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin: 0 auto;
|
||||
padding: 48rpx;
|
||||
background: var(--theme-color);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
color: #333;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
line-height: 50rpx;
|
||||
margin-top: 48rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.main-subtitle {
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
margin-top: 24rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.main-btn {
|
||||
color: #FFF;
|
||||
font-size: 32rpx;
|
||||
line-height: 44rpx;
|
||||
padding: 34rpx;
|
||||
border-radius: 16rpx;
|
||||
text-align: center;
|
||||
margin-top: 48rpx;
|
||||
background: var(--theme-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
220
pages/member/search/index.vue
Normal file
220
pages/member/search/index.vue
Normal file
@@ -0,0 +1,220 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 会员搜索 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="container" :style="{'--theme-color': themeColor}">
|
||||
<!-- 标题栏 -->
|
||||
<title-bar title="会员搜索"></title-bar>
|
||||
<!-- 内容区 -->
|
||||
<view class="container-main" v-if="loadEnd">
|
||||
<!-- 顶部搜索筛选区 -->
|
||||
<view class="main-header flex align-items-center" :style="{top: titleBarHeight + 'px'}">
|
||||
<view class="header-search flex-item flex align-items-center">
|
||||
<image class="icon" src="/static/search.png" mode="aspectFit"></image>
|
||||
<input class="input flex-item" type="text" confirm-type="search" @confirm="confirmSearch" placeholder="请输入姓名搜索" placeholder-class="placeholder" />
|
||||
</view>
|
||||
<view class="header-btn" @click="toBack()">取消</view>
|
||||
</view>
|
||||
<!-- 历史搜索 -->
|
||||
<view class="main-history" v-if="recordList && recordList.length">
|
||||
<view class="history-title flex justify-content-between align-items-center">
|
||||
<view class="name">历史搜索</view>
|
||||
<view class="clear flex align-items-center" @click="clearRecords">
|
||||
<image src="/static/clear.png" mode="aspectFit"></image>
|
||||
<text>清除记录</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="history-cont flex flex-wrap">
|
||||
<view class="item" v-for="(item,index) in recordList" :key="index" @click="doSearch(item)">
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 底部导航 -->
|
||||
<tab-bar></tab-bar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 加载完成
|
||||
loadEnd: false,
|
||||
// 标题栏高度
|
||||
titleBarHeight: 0,
|
||||
// 搜索记录
|
||||
recordList: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
})
|
||||
},
|
||||
onReady() {
|
||||
this.loadEnd = true
|
||||
},
|
||||
onShow() {
|
||||
this.recordList = uni.getStorageSync('memberHistory')
|
||||
},
|
||||
mounted() {
|
||||
// #ifdef MP-WEIXIN
|
||||
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight
|
||||
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||||
this.titleBarHeight = statusBarHeight + (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
// 返回
|
||||
toBack() {
|
||||
if (getCurrentPages().length == 1) {
|
||||
this.$util.toPage({
|
||||
mode: 3,
|
||||
path: "/pages/member/index"
|
||||
})
|
||||
} else {
|
||||
uni.navigateBack()
|
||||
}
|
||||
},
|
||||
// 删除历史记录
|
||||
clearRecords() {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "是否删除全部历史记录？",
|
||||
confirmText: "删除",
|
||||
confirmColor: this.themeColor,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.removeStorageSync('memberHistory')
|
||||
this.recordList = []
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交搜索
|
||||
confirmSearch(e) {
|
||||
this.doSearch(e.detail.value)
|
||||
},
|
||||
// 搜索
|
||||
doSearch(keyword) {
|
||||
if (!keyword) {
|
||||
uni.showToast({
|
||||
title: '请输入要搜索的内容',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
var memberHistory = uni.getStorageSync('memberHistory') || []
|
||||
if (!memberHistory.includes(keyword)) {
|
||||
memberHistory.push(keyword)
|
||||
uni.setStorageSync('memberHistory', memberHistory)
|
||||
}
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: `/pages/member/search/result?keyword=${encodeURIComponent(keyword)}`
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
.container-main {
|
||||
.main-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
padding: 20rpx 32rpx;
|
||||
background: #fff;
|
||||
|
||||
.header-search {
|
||||
padding: 20rpx 32rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #F6F7FB;
|
||||
|
||||
.icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.input {
|
||||
margin-left: 16rpx;
|
||||
color: #333;
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: #A0A2B3;
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
color: var(--theme-color);
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.main-history {
|
||||
background: #fff;
|
||||
padding: 32rpx;
|
||||
|
||||
.history-title {
|
||||
.name {
|
||||
color: #333;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.clear {
|
||||
image {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
margin-left: 8rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.history-cont {
|
||||
margin-top: 16rpx;
|
||||
margin-left: -16rpx;
|
||||
|
||||
.item {
|
||||
margin-top: 16rpx;
|
||||
margin-left: 16rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
color: #999999;
|
||||
padding: 8rpx 16rpx;
|
||||
background: rgba(6, 50, 119, 0.05);
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
210
pages/member/search/result.vue
Normal file
210
pages/member/search/result.vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 搜索结果 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 标题栏 -->
|
||||
<title-bar :showBack="true" title="搜索结果"></title-bar>
|
||||
<!-- 内容区 -->
|
||||
<view class="container-main" v-if="loadEnd">
|
||||
<member-item :show-data="dataList" v-if="dataList.length"></member-item>
|
||||
<empty top="30%" title="暂无相关内容~" v-else></empty>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import memberItem from "@/pages/component/member/index.vue"
|
||||
// #ifdef H5
|
||||
import wx from 'weixin-js-sdk';
|
||||
// #endif
|
||||
export default {
|
||||
components: {
|
||||
memberItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 加载完成
|
||||
loadEnd: false,
|
||||
// 搜索关键词
|
||||
keyword: "",
|
||||
// 查询参数
|
||||
page: 1,
|
||||
limit: 20,
|
||||
hasMore: false,
|
||||
// 数据列表
|
||||
dataList: [],
|
||||
// 是否授权位置信息
|
||||
isLocation: false,
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.keyword = decodeURIComponent(option.keyword)
|
||||
uni.showLoading({
|
||||
title: "加载中"
|
||||
})
|
||||
// #ifdef H5
|
||||
this.initConfig()
|
||||
// #endif
|
||||
this.getAuthSetting(() => {
|
||||
uni.hideLoading()
|
||||
this.loadEnd = true
|
||||
})
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.hasMore) {
|
||||
this.page++
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// #ifdef H5
|
||||
// 微信公众号初始化方法
|
||||
initConfig() {
|
||||
this.$util.request("main.WeChatConfig", {
|
||||
url: location.href.split('#')[0]
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
wx.config({
|
||||
debug: false,
|
||||
appId: res.data.appId,
|
||||
timestamp: Number(res.data.timestamp),
|
||||
nonceStr: res.data.nonceStr,
|
||||
signature: res.data.signature,
|
||||
jsApiList: ["getLocation"],
|
||||
})
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('通过config接口注入权限验证配置 ', error)
|
||||
})
|
||||
},
|
||||
// #endif
|
||||
// 获取位置权限
|
||||
getAuthSetting(fn) {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.getSetting({
|
||||
success: (setting) => {
|
||||
if (setting.authSetting && setting.authSetting.hasOwnProperty("scope.userLocation")) {
|
||||
if (setting.authSetting["scope.userLocation"]) {
|
||||
this.isLocation = true
|
||||
this.getList(fn)
|
||||
} else {
|
||||
this.isLocation = false
|
||||
this.getList(fn)
|
||||
}
|
||||
} else {
|
||||
this.isLocation = false
|
||||
this.getList(fn)
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
this.isLocation = false
|
||||
this.getList(fn)
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
this.isLocation = true
|
||||
this.getList(fn)
|
||||
// #endif
|
||||
},
|
||||
// 获取数据列表
|
||||
getList(fn) {
|
||||
this.getLocation((location) => {
|
||||
let data = {
|
||||
page: this.page,
|
||||
limit: this.limit,
|
||||
keywords: this.keyword
|
||||
}
|
||||
if (location && location.latitude && location.longitude) {
|
||||
data.latitude = location.latitude
|
||||
data.longitude = location.longitude
|
||||
}
|
||||
this.$util.request("member.list", data).then(res => {
|
||||
if (fn) fn()
|
||||
if (res.code == 1) {
|
||||
let list = res.data.data
|
||||
this.hasMore = this.page < res.data.total / this.limit ? true : false
|
||||
this.dataList = this.page == 1 ? list : [...this.dataList, ...list];
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取会员列表 ', error)
|
||||
})
|
||||
})
|
||||
},
|
||||
// 获取当前地址
|
||||
getLocation(fn) {
|
||||
// #ifdef MP-WEIXIN
|
||||
if (!this.isLocation) {
|
||||
fn()
|
||||
return
|
||||
}
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
geocode: true,
|
||||
success: (res) => {
|
||||
fn({
|
||||
latitude: res.latitude,
|
||||
longitude: res.longitude,
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
this.isLocation = false
|
||||
fn()
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
wx.ready(() => {
|
||||
wx.getLocation({
|
||||
type: 'wgs84',
|
||||
success: (res) => {
|
||||
fn({
|
||||
latitude: res.latitude,
|
||||
longitude: res.longitude,
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
this.isLocation = false
|
||||
fn()
|
||||
},
|
||||
cancel: () => {
|
||||
this.isLocation = false
|
||||
fn()
|
||||
}
|
||||
});
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
.container-main {
|
||||
padding: 32rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
165
pages/member/units.vue
Normal file
165
pages/member/units.vue
Normal file
@@ -0,0 +1,165 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 会员单位 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 标题栏 -->
|
||||
<title-bar title="会员单位"></title-bar>
|
||||
<!-- 内容区 -->
|
||||
<view class="container-main" v-if="loadEnd">
|
||||
<member-units :show-data="unitsList" v-if="unitsList.length"></member-units>
|
||||
<empty top="64rpx" title="暂无相关会员单位~" v-else></empty>
|
||||
</view>
|
||||
<!-- 底部导航 -->
|
||||
<tab-bar></tab-bar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
import memberUnits from "@/pages/component/member/units.vue"
|
||||
// #ifdef H5
|
||||
import wx from 'weixin-js-sdk';
|
||||
// #endif
|
||||
export default {
|
||||
components: {
|
||||
memberUnits,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 加载完成
|
||||
loadEnd: false,
|
||||
// 分类查询参数
|
||||
page: 1,
|
||||
limit: 20,
|
||||
hasMore: false,
|
||||
// 会员单位列表
|
||||
unitsList: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
shareImage: state => state.app.shareImage,
|
||||
shareTitle: state => state.app.shareTitle,
|
||||
})
|
||||
},
|
||||
onLoad() {
|
||||
uni.showLoading({
|
||||
title: "加载中"
|
||||
})
|
||||
this.getMemberUnits(() => {
|
||||
uni.hideLoading()
|
||||
this.loadEnd = true
|
||||
})
|
||||
// #ifdef H5
|
||||
this.initConfig()
|
||||
// #endif
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.page = 1
|
||||
this.getMemberUnits(() => {
|
||||
uni.stopPullDownRefresh()
|
||||
})
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.hasMore) {
|
||||
this.page++
|
||||
this.getMemberUnits()
|
||||
}
|
||||
},
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: this.shareTitle,
|
||||
imageUrl: this.shareImage,
|
||||
}
|
||||
},
|
||||
onShareTimeline() {
|
||||
return {
|
||||
title: this.shareTitle,
|
||||
imageUrl: this.shareImage,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// #ifdef H5
|
||||
// 微信公众号初始化方法
|
||||
initConfig() {
|
||||
this.$util.request("main.WeChatConfig", {
|
||||
url: location.href.split('#')[0]
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
wx.config({
|
||||
debug: false,
|
||||
appId: res.data.appId,
|
||||
timestamp: Number(res.data.timestamp),
|
||||
nonceStr: res.data.nonceStr,
|
||||
signature: res.data.signature,
|
||||
jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
|
||||
openTagList: ["updateAppMessageShareData", "updateTimelineShareData"],
|
||||
})
|
||||
wx.ready(() => {
|
||||
wx.updateAppMessageShareData({
|
||||
title: this.shareTitle,
|
||||
desc: "",
|
||||
link: window.location.href,
|
||||
imgUrl: this.shareImage,
|
||||
});
|
||||
wx.updateTimelineShareData({
|
||||
title: this.shareTitle,
|
||||
link: window.location.href,
|
||||
imgUrl: this.shareImage,
|
||||
});
|
||||
});
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('通过config接口注入权限验证配置 ', error)
|
||||
})
|
||||
},
|
||||
// #endif
|
||||
// 获取会员列表
|
||||
getMemberUnits(fn) {
|
||||
this.$util.request("member.units", {
|
||||
page: this.page,
|
||||
limit: this.limit
|
||||
}).then(res => {
|
||||
if (fn) fn()
|
||||
if (res.code == 1) {
|
||||
let list = res.data.data
|
||||
this.hasMore = this.page < res.data.total / this.limit ? true : false
|
||||
this.unitsList = this.page == 1 ? list : [...this.unitsList, ...list];
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取会员单位列表 ', error)
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
.container-main {
|
||||
padding: 32rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user