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

会员权益

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

197
pages/member/product/details.vue Normal file
View 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
View 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
View File

@@ -0,0 +1,116 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
+----------------------------------------------------------------------
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
+----------------------------------------------------------------------
| 编辑器 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->
<template>
<view class="container">
<!-- 标题栏 -->
<title-bar :showBack="true" title="介绍内容"></title-bar>
<!-- 内容区 -->
<view class="container-main">
<sp-editor :toolbar-config="toolbarConfig" @init="initEditor" @upinImage="upinImage" @overMax="overMax" @exportHtml="exportHtml"></sp-editor>
</view>
<view class="safe-padding"></view>
</view>
</template>
<script>
import { mapState } from "vuex"
export default {
data() {
return {
// 页面参数
params: null,
// 编辑器实例
editorIns: null,
// 编辑器配置
toolbarConfig: {
excludeKeys: ['direction', 'date', 'lineHeight', 'letterSpacing', 'listCheck'],
iconSize: '18px'
}
}
},
computed: {
...mapState({
editorContent: state => state.app.editorContent,
})
},
onLoad(option) {
if (option.params) this.params = option.params;
},
methods: {
// 超出最大内容限制
overMax(e) {
uni.showToast({
title: "输入内容已超过最大字数限制"
})
},
// 初始化编辑器
initEditor(editor) {
this.editorIns = editor
this.editorIns.setContents({
html: this.editorContent || ""
})
},
// 上传图片
upinImage(tempFiles, editorCtx) {
let imageList = []
// #ifdef MP-WEIXIN
imageList = tempFiles.map(item => item.tempFilePath)
// #endif
// #ifndef MP-WEIXIN
imageList = tempFiles.map(item => item.path)
// #endif
uni.showLoading({
title: '上传中请稍后',
mask: true
})
this.$util.uploadFileMultiple(imageList, [], 2).then(result => {
result.forEach((item) => {
editorCtx.insertImage({
src: item,
width: '80%',
success: () => {
uni.hideLoading()
}
})
});
}).catch(error => {
console.error('上传图片 ', error)
})
},
// 完成编辑
exportHtml(e) {
let pages = getCurrentPages()
let prevPage = pages[pages.length - 2]
prevPage.$vm.editorContent = e
uni.navigateBack()
},
}
}
</script>
<style lang="scss">
page {
padding-bottom: 0;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
.container-main {
flex: 1;
overflow: hidden;
}
}
</style>

108
pages/member/product/success.vue Normal file
View File

@@ -0,0 +1,108 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
+----------------------------------------------------------------------
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
+----------------------------------------------------------------------
| 添加成功 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->
<template>
<view class="container" :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>