init commit
This commit is contained in:
291
uniapp/小程序代码/App.vue
Normal file
291
uniapp/小程序代码/App.vue
Normal file
@@ -0,0 +1,291 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<script>
|
||||
export default {
|
||||
globalData: {
|
||||
// 接口地址
|
||||
adminPath: "https://www.example.com",
|
||||
// 入会字段
|
||||
applyField: [],
|
||||
},
|
||||
onLaunch: function() {
|
||||
// #ifdef MP-WEIXIN
|
||||
// 微信版本更新
|
||||
if (wx.canIUse('getUpdateManager')) {
|
||||
const updateManager = wx.getUpdateManager()
|
||||
if (updateManager && updateManager.onCheckForUpdate) {
|
||||
updateManager.onCheckForUpdate(function(res) {
|
||||
// 请求完新版本信息的回调
|
||||
if (res.hasUpdate) {
|
||||
updateManager.onUpdateReady(function() {
|
||||
wx.showModal({
|
||||
title: '更新提示',
|
||||
content: '新版本已经准备好，是否重启应用？',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
updateManager.applyUpdate()
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
updateManager.onUpdateFailed(function() {
|
||||
wx.showModal({
|
||||
title: '已经有新版本了哟~',
|
||||
content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~'
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
} else {
|
||||
wx.showModal({
|
||||
title: '提示',
|
||||
content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
|
||||
})
|
||||
}
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
// 判断是否为公众号模拟器环境
|
||||
let ua = navigator.userAgent.toLowerCase();
|
||||
if (ua.match(/MicroMessenger/i) != "micromessenger") {
|
||||
uni.reLaunch({
|
||||
url: "/pages/error/browser"
|
||||
})
|
||||
return
|
||||
}
|
||||
// #endif
|
||||
// 设置登录信息
|
||||
const token = uni.getStorageSync("token")
|
||||
if (token) {
|
||||
const userInfo = uni.getStorageSync("userInfo")
|
||||
this.$store.commit('user/setToken', token)
|
||||
this.$store.commit('user/setUserInfo', userInfo)
|
||||
}
|
||||
this.getAssociation()
|
||||
this.getTabBar()
|
||||
this.getConfig()
|
||||
},
|
||||
onShow: function() {},
|
||||
onHide: function() {},
|
||||
methods: {
|
||||
// 获取商协信息
|
||||
getAssociation() {
|
||||
this.$util.request("main.association", {}, this.globalData.adminPath).then(res => {
|
||||
if (res.code == 1) {
|
||||
this.$store.commit('app/setAppletInfo', {
|
||||
name: res.data.name,
|
||||
logo: res.data.logo,
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error("获取商协信息", error)
|
||||
})
|
||||
},
|
||||
// 获取底部导航
|
||||
getTabBar() {
|
||||
this.$util.request("main.tabbar", {}, this.globalData.adminPath).then(res => {
|
||||
if (res.code == 1) {
|
||||
this.$store.commit('app/setTabBar', res.data)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error("获取底部导航", error)
|
||||
})
|
||||
},
|
||||
// 获取系统配置
|
||||
getConfig() {
|
||||
this.$util.request("main.config", {}, this.globalData.adminPath).then(res => {
|
||||
if (res.code == 1) {
|
||||
this.$store.commit('app/setConfig', {
|
||||
themeColor: res.data.theme_colors,
|
||||
organize: res.data.organize,
|
||||
subscribeNotifyIds: res.data.subscribe_msg_tpl_ids,
|
||||
statement: res.data.applet_record_number,
|
||||
support: {
|
||||
image: res.data.technical_support_image,
|
||||
type: res.data.jump_type,
|
||||
link: res.data.jump_link,
|
||||
mobile: res.data.call_mobile,
|
||||
},
|
||||
loginImg: res.data.login_img,
|
||||
jielongImg: res.data.jielong_img,
|
||||
questionnaireImg: res.data.questionnaire_img,
|
||||
shareImage: res.data.share_image,
|
||||
shareTitle: res.data.share_title,
|
||||
WeChatAppid: res.data.wananchi_appid,
|
||||
deliveryManagement: res.data.delivery_management,
|
||||
joinConfig: res.data.join_config,
|
||||
})
|
||||
this.$isResolve()
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error("获取配置信息", error)
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* #ifndef APP-NVUE */
|
||||
/*每个页面公共css */
|
||||
|
||||
page {
|
||||
background: #F6F7FB;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
view {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
._root {
|
||||
image {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
view {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
}
|
||||
|
||||
button::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
button.clear {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
button.clear::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.inline-flex {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.flex-item {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flex-direction-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.align-items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.align-items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.align-items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.justify-content-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.justify-content-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.justify-content-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.justify-content-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.justify-content-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.wbcentre {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-ellipsis {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.text-ellipsis-more {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.safe-padding {
|
||||
width: 100%;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
// H5样式
|
||||
/* #ifdef H5 */
|
||||
.uni-app--showtabbar uni-page-wrapper::after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
</style>
|
||||
113
uniapp/小程序代码/common/api/activity.js
Normal file
113
uniapp/小程序代码/common/api/activity.js
Normal file
@@ -0,0 +1,113 @@
|
||||
// +----------------------------------------------------------------------
|
||||
// | 麦沃德科技赋能开发者，助力商协会发展
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
// +----------------------------------------------------------------------
|
||||
// | 活动接口列表文件 开发者: 麦沃德科技-半夏
|
||||
// +----------------------------------------------------------------------
|
||||
|
||||
export default {
|
||||
// 活动列表
|
||||
list: {
|
||||
url: '/api/wdsxh/activity/activity/index',
|
||||
method: 'GET',
|
||||
},
|
||||
// 活动详情
|
||||
details: {
|
||||
url: '/api/wdsxh/activity/activity/details',
|
||||
method: 'GET',
|
||||
},
|
||||
// 活动报名字段
|
||||
field: {
|
||||
url: '/api/wdsxh/activity/activity_fieldset/field',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 提交报名
|
||||
submit: {
|
||||
url: '/api/wdsxh/activity/activity_apply/submit',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 订单列表
|
||||
orderList: {
|
||||
url: '/api/wdsxh/activity/activity/user_index',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 订单详情
|
||||
orderDetails: {
|
||||
url: '/api/wdsxh/activity/activity_apply/details',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 活动核销列表
|
||||
verifyList: {
|
||||
url: '/api/wdsxh/activity/verifying/activity_list',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 核销会员列表
|
||||
verifyMemberList: {
|
||||
url: '/api/wdsxh/activity/verifying/verifying_member_list',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 核销活动
|
||||
verifying: {
|
||||
url: '/api/wdsxh/activity/verifying/verifying',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 申请退款
|
||||
applyRefund: {
|
||||
url: '/api/wdsxh/activity/activity/apply_refund',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 取消参加
|
||||
applyCancel: {
|
||||
url: '/api/wdsxh/activity/activity_apply/cancel',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 参会凭证
|
||||
attendance: {
|
||||
url: '/api/wdsxh/activity/activity/attendance_voucher',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 扫码签到
|
||||
scanSign: {
|
||||
url: '/api/wdsxh/activity/verifying/self_service_check_in',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 删除未支付订单
|
||||
applyDel: {
|
||||
url: '/api/wdsxh/activity/activity_apply/del',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 签到码参数解析
|
||||
decryptData: {
|
||||
url: '/api/wdsxh/activity/verifying/get_decrypt_data',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 参会证书
|
||||
certificate: {
|
||||
url: '/api/wdsxh/activity/activity_electronic_certificate/index',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 活动权限
|
||||
limit: {
|
||||
url: '/api/wdsxh/activity/activity/activity_config',
|
||||
method: 'GET',
|
||||
},
|
||||
};
|
||||
34
uniapp/小程序代码/common/api/album.js
Normal file
34
uniapp/小程序代码/common/api/album.js
Normal file
@@ -0,0 +1,34 @@
|
||||
// +----------------------------------------------------------------------
|
||||
// | 麦沃德科技赋能开发者，助力商协会发展
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
// +----------------------------------------------------------------------
|
||||
// | 商会相册接口列表文件 开发者: 麦沃德科技-暴雨
|
||||
// +----------------------------------------------------------------------
|
||||
|
||||
export default {
|
||||
// 相册列表
|
||||
albumList: {
|
||||
url: '/api/wdsxh/album/index',
|
||||
method: 'GET',
|
||||
},
|
||||
// 自定义装修相册列表
|
||||
albumDiyList: {
|
||||
url: '/api/wdsxh/album/diy_list',
|
||||
method: 'GET',
|
||||
},
|
||||
// 相册详情
|
||||
albumDetails: {
|
||||
url: '/api/wdsxh/album/details',
|
||||
method: 'GET',
|
||||
},
|
||||
// 相册权限
|
||||
albumLimit: {
|
||||
url: '/api/wdsxh/album/album_config',
|
||||
method: 'GET',
|
||||
},
|
||||
};
|
||||
85
uniapp/小程序代码/common/api/card.js
Normal file
85
uniapp/小程序代码/common/api/card.js
Normal file
@@ -0,0 +1,85 @@
|
||||
// +----------------------------------------------------------------------
|
||||
// | 麦沃德科技赋能开发者，助力商协会发展
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
// +----------------------------------------------------------------------
|
||||
// | 电子名片接口列表文件 开发者: 麦沃德科技-半夏
|
||||
// +----------------------------------------------------------------------
|
||||
|
||||
export default {
|
||||
// 名片列表
|
||||
list: {
|
||||
url: '/api/wdsxh/corporate/card/index',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 名片详情
|
||||
details: {
|
||||
url: '/api/wdsxh/corporate/card/details',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 名片统计
|
||||
statistics: {
|
||||
url: '/api/wdsxh/corporate/card/center',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 名片样式
|
||||
background: {
|
||||
url: '/api/wdsxh/corporate/card_background/index',
|
||||
method: 'GET',
|
||||
},
|
||||
// 添加名片
|
||||
add: {
|
||||
url: '/api/wdsxh/corporate/card/add',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 编辑名片
|
||||
edit: {
|
||||
url: '/api/wdsxh/corporate/card/edit',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 编辑详情
|
||||
editDetails: {
|
||||
url: '/api/wdsxh/corporate/card/edit_details',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 删除名片
|
||||
delete: {
|
||||
url: '/api/wdsxh/corporate/card/del',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 设置默认名片
|
||||
setDefault: {
|
||||
url: '/api/wdsxh/corporate/card/set_default',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 获取默认名片
|
||||
getDefault: {
|
||||
url: '/api/wdsxh/corporate/card/default_card',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 设置名片靠谱
|
||||
setReliable: {
|
||||
url: '/api/wdsxh/corporate/reliable/reliable',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 取消名片靠谱
|
||||
cancelReliable: {
|
||||
url: '/api/wdsxh/corporate/reliable/cancel',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
};
|
||||
69
uniapp/小程序代码/common/api/demand.js
Normal file
69
uniapp/小程序代码/common/api/demand.js
Normal file
@@ -0,0 +1,69 @@
|
||||
// +----------------------------------------------------------------------
|
||||
// | 麦沃德科技赋能开发者，助力商协会发展
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
// +----------------------------------------------------------------------
|
||||
// | 供需接口列表文件 开发者: 麦沃德科技-暴雨
|
||||
// +----------------------------------------------------------------------
|
||||
|
||||
export default {
|
||||
// 商圈列表
|
||||
businessIndexList: {
|
||||
url: '/api/wdsxh/business/index',
|
||||
method: 'GET',
|
||||
},
|
||||
// 自定义装修商圈列表
|
||||
businessDiyList: {
|
||||
url: '/api/wdsxh/business/diy_list',
|
||||
method: 'GET',
|
||||
},
|
||||
// 商圈分类
|
||||
businessCat: {
|
||||
url: '/api/wdsxh/business/business_cat',
|
||||
method: 'GET',
|
||||
},
|
||||
// 商圈详情
|
||||
businessDetails: {
|
||||
url: '/api/wdsxh/business/details',
|
||||
method: 'GET',
|
||||
},
|
||||
// 发布
|
||||
businessAdd: {
|
||||
url: '/api/wdsxh/business/add',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 发布列表
|
||||
businessList: {
|
||||
url: '/api/wdsxh/business/user_index',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 发布删除
|
||||
businessDel: {
|
||||
url: '/api/wdsxh/business/del',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 发布详情
|
||||
businessUserDetails: {
|
||||
url: '/api/wdsxh/business/user_details',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 修改
|
||||
businessEdit: {
|
||||
url: '/api/wdsxh/business/edit',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 商圈限制
|
||||
businessLimit: {
|
||||
url: '/api/wdsxh/business/business_config',
|
||||
method: 'GET',
|
||||
},
|
||||
};
|
||||
53
uniapp/小程序代码/common/api/index.js
Normal file
53
uniapp/小程序代码/common/api/index.js
Normal file
@@ -0,0 +1,53 @@
|
||||
// +----------------------------------------------------------------------
|
||||
// | 麦沃德科技赋能开发者，助力商协会发展
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
// +----------------------------------------------------------------------
|
||||
// | 接口列表文件 开发者: 麦沃德科技-半夏
|
||||
// +----------------------------------------------------------------------
|
||||
|
||||
import main from "./main.js"
|
||||
import login from "./login.js"
|
||||
import mine from "./mine.js"
|
||||
import member from "./member.js"
|
||||
import mall from "./mall.js"
|
||||
import demand from "./demand.js"
|
||||
import activity from "./activity.js"
|
||||
import album from "./album.js"
|
||||
import sequence from "./sequence.js"
|
||||
import questionnaire from "./questionnaire.js"
|
||||
import card from "./card.js"
|
||||
import institution from "./institution.js"
|
||||
import points from "./points.js"
|
||||
export default {
|
||||
// 公共模块
|
||||
main,
|
||||
// 登录模块
|
||||
login,
|
||||
// 个人中心模块
|
||||
mine,
|
||||
// 会员模块
|
||||
member,
|
||||
// 商城模块
|
||||
mall,
|
||||
// 供需模块
|
||||
demand,
|
||||
// 活动模块
|
||||
activity,
|
||||
// 商会相册模块
|
||||
album,
|
||||
// 活动接龙模块
|
||||
sequence,
|
||||
// 问卷调查模块
|
||||
questionnaire,
|
||||
// 电子名片模块
|
||||
card,
|
||||
// 机构模块
|
||||
institution,
|
||||
// 积分模块
|
||||
points,
|
||||
};
|
||||
51
uniapp/小程序代码/common/api/institution.js
Normal file
51
uniapp/小程序代码/common/api/institution.js
Normal file
@@ -0,0 +1,51 @@
|
||||
// +----------------------------------------------------------------------
|
||||
// | 麦沃德科技赋能开发者，助力商协会发展
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
// +----------------------------------------------------------------------
|
||||
// | 机构管理接口列表文件 开发者: 麦沃德科技-半夏
|
||||
// +----------------------------------------------------------------------
|
||||
|
||||
export default {
|
||||
// 机构列表
|
||||
list: {
|
||||
url: '/api/wdsxh/institution/institution/index',
|
||||
method: 'GET',
|
||||
},
|
||||
// 机构详情
|
||||
details: {
|
||||
url: '/api/wdsxh/institution/institution/details',
|
||||
method: 'GET',
|
||||
},
|
||||
// 成员列表
|
||||
member: {
|
||||
url: '/api/wdsxh/institution/member/index',
|
||||
method: 'GET',
|
||||
},
|
||||
// 机构权限
|
||||
limit: {
|
||||
url: '/api/wdsxh/institution/institution/institution_config',
|
||||
method: 'GET',
|
||||
},
|
||||
// 申请加入
|
||||
apply: {
|
||||
url: '/api/wdsxh/institution/institution_member_apply/submit',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 机构级别
|
||||
level: {
|
||||
url: '/api/wdsxh/institution/level/index',
|
||||
method: 'GET',
|
||||
},
|
||||
// 申请详情
|
||||
applyDetails: {
|
||||
url: '/api/wdsxh/institution/institution_member_apply/details',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
};
|
||||
51
uniapp/小程序代码/common/api/login.js
Normal file
51
uniapp/小程序代码/common/api/login.js
Normal file
@@ -0,0 +1,51 @@
|
||||
// +----------------------------------------------------------------------
|
||||
// | 麦沃德科技赋能开发者，助力商协会发展
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
// +----------------------------------------------------------------------
|
||||
// | 登录接口列表文件 开发者: 麦沃德科技-半夏
|
||||
// +----------------------------------------------------------------------
|
||||
|
||||
export default {
|
||||
// 查询用户是否已注册-微信小程序
|
||||
isAuth: {
|
||||
url: '/api/wdsxh/applet_user_wechat/is_register',
|
||||
method: 'GET',
|
||||
},
|
||||
// 绑定手机号-微信小程序
|
||||
bindMobile: {
|
||||
url: '/api/wdsxh/applet_user_wechat/bind_mobile',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 登录-微信小程序
|
||||
login: {
|
||||
url: '/api/wdsxh/applet_user_wechat/login',
|
||||
method: 'POST',
|
||||
},
|
||||
// 注册-微信小程序
|
||||
register: {
|
||||
url: '/api/wdsxh/applet_user_wechat/register',
|
||||
method: 'POST',
|
||||
},
|
||||
// 登录-微信公众号
|
||||
officialLogin: {
|
||||
url: '/api/wdsxh/wananchi_user_wechat/mobile_login',
|
||||
method: 'POST',
|
||||
},
|
||||
// 发送验证码-微信公众号
|
||||
captcha: {
|
||||
url: '/api/sms/send',
|
||||
method: 'POST',
|
||||
},
|
||||
// 获取手机号
|
||||
getMobile: {
|
||||
url: '/api/wdsxh/user_wechat/get_mobile',
|
||||
method: 'GET',
|
||||
auth: true,
|
||||
},
|
||||
};
|
||||
125
uniapp/小程序代码/common/api/main.js
Normal file
125
uniapp/小程序代码/common/api/main.js
Normal file
@@ -0,0 +1,125 @@
|
||||
// +----------------------------------------------------------------------
|
||||
// | 麦沃德科技赋能开发者，助力商协会发展
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
// +----------------------------------------------------------------------
|
||||
// | 公共接口列表文件 开发者: 麦沃德科技-半夏
|
||||
// +----------------------------------------------------------------------
|
||||
|
||||
export default {
|
||||
// 系统配置
|
||||
config: {
|
||||
url: '/api/wdsxh/config/config',
|
||||
method: 'GET',
|
||||
},
|
||||
// 底部导航
|
||||
tabbar: {
|
||||
url: '/api/wdsxh/index/tabbar_index',
|
||||
method: 'GET',
|
||||
},
|
||||
// 底部导航详情
|
||||
tabbarDetails: {
|
||||
url: '/api/wdsxh/index/tabbar_details',
|
||||
method: 'GET',
|
||||
},
|
||||
// 自定义装修数据
|
||||
diyData: {
|
||||
url: '/api/wdsxh/diy/getPage',
|
||||
method: 'GET',
|
||||
},
|
||||
// 自定义搜索数据
|
||||
diySearch: {
|
||||
url: '/api/wdsxh/search/search_result',
|
||||
method: 'GET',
|
||||
},
|
||||
// 首页轮播图
|
||||
carousel: {
|
||||
url: '/api/wdsxh/banner/index',
|
||||
method: 'GET',
|
||||
},
|
||||
// 轮播图详情
|
||||
carouselDetails: {
|
||||
url: '/api/wdsxh/banner/details',
|
||||
method: 'GET',
|
||||
},
|
||||
// 省市区管理
|
||||
address: {
|
||||
// 获取省份
|
||||
province: {
|
||||
url: '/api/wdsxh/goods/address/address_province',
|
||||
method: 'GET',
|
||||
},
|
||||
// 获取城市
|
||||
city: {
|
||||
url: '/api/wdsxh/goods/address/address_city',
|
||||
method: 'GET',
|
||||
},
|
||||
// 获取区县
|
||||
area: {
|
||||
url: '/api/wdsxh/goods/address/address_area',
|
||||
method: 'GET',
|
||||
},
|
||||
},
|
||||
// 需求建议提交
|
||||
addDemand: {
|
||||
url: '/api/wdsxh/demand/add',
|
||||
method: 'POST',
|
||||
},
|
||||
// 商协信息
|
||||
association: {
|
||||
url: '/api/wdsxh/association/index',
|
||||
method: 'GET',
|
||||
},
|
||||
// 文章管理
|
||||
article: {
|
||||
// 分类
|
||||
category: {
|
||||
url: '/api/wdsxh/article/article_cat',
|
||||
method: 'GET',
|
||||
},
|
||||
// 列表
|
||||
list: {
|
||||
url: '/api/wdsxh/article/index',
|
||||
method: 'GET',
|
||||
},
|
||||
// 详情
|
||||
details: {
|
||||
url: '/api/wdsxh/article/details',
|
||||
method: 'GET',
|
||||
},
|
||||
// 增加阅读量
|
||||
updateReadNum: {
|
||||
url: '/api/wdsxh/article/update_read_num',
|
||||
method: 'POST',
|
||||
},
|
||||
},
|
||||
// 协议内容
|
||||
agreement: {
|
||||
url: '/api/wdsxh/config/agreement',
|
||||
method: 'GET',
|
||||
},
|
||||
// 消息订阅
|
||||
message: {
|
||||
// 订阅数量
|
||||
count: {
|
||||
url: '/api/wdsxh/member/member/subscribe_count',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 消息订阅
|
||||
subscribe: {
|
||||
url: '/api/wdsxh/member/member/submit_subscribe',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
},
|
||||
// 系统配置
|
||||
WeChatConfig: {
|
||||
url: '/api/wdsxh/wananchi_user_wechat/get_wechat_config',
|
||||
method: 'GET',
|
||||
},
|
||||
};
|
||||
173
uniapp/小程序代码/common/api/mall.js
Normal file
173
uniapp/小程序代码/common/api/mall.js
Normal file
@@ -0,0 +1,173 @@
|
||||
// +----------------------------------------------------------------------
|
||||
// | 麦沃德科技赋能开发者，助力商协会发展
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
// +----------------------------------------------------------------------
|
||||
// | 商城接口列表文件 开发者: 麦沃德科技-暴雨
|
||||
// +----------------------------------------------------------------------
|
||||
|
||||
export default {
|
||||
// 地址管理
|
||||
address: {
|
||||
// 列表
|
||||
list: {
|
||||
url: '/api/wdsxh/goods/address/index',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 添加
|
||||
add: {
|
||||
url: '/api/wdsxh/goods/address/add',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 修改
|
||||
edit: {
|
||||
url: '/api/wdsxh/goods/address/edit',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 删除
|
||||
delete: {
|
||||
url: '/api/wdsxh/goods/address/del',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 设置默认
|
||||
setDefault: {
|
||||
url: '/api/wdsxh/goods/address/set_default',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
},
|
||||
// 轮播图
|
||||
carousel: {
|
||||
url: '/api/wdsxh/goods/goods/banner_index',
|
||||
method: 'GET',
|
||||
},
|
||||
// 商城轮播图
|
||||
carouselDetails: {
|
||||
url: '/api/wdsxh/goods/goods/banner_details',
|
||||
method: 'GET',
|
||||
},
|
||||
// 商品分类
|
||||
categoay: {
|
||||
url: '/api/wdsxh/goods/goods/category_index',
|
||||
method: 'GET',
|
||||
},
|
||||
// 商品列表
|
||||
goodsList: {
|
||||
url: '/api/wdsxh/goods/goods/index',
|
||||
method: 'GET',
|
||||
},
|
||||
// 商品详情
|
||||
goodsDetails: {
|
||||
url: '/api/wdsxh/goods/goods/details',
|
||||
method: 'GET',
|
||||
},
|
||||
// 计算邮费
|
||||
getPostage: {
|
||||
url: '/api/wdsxh/goods/order/postage',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 订单预支付
|
||||
preparePay: {
|
||||
url: '/api/wdsxh/goods/order/prepare_pay',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 订单创建
|
||||
createOrder: {
|
||||
url: '/api/wdsxh/goods/order/create',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 订单详情
|
||||
orderDetails: {
|
||||
url: '/api/wdsxh/goods/order/details',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 订单列表
|
||||
orderList: {
|
||||
url: '/api/wdsxh/goods/order/index',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 确认收货
|
||||
orderCollect: {
|
||||
url: '/api/wdsxh/goods/order/sing',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 申请退款
|
||||
orderRefund: {
|
||||
url: '/api/wdsxh/goods/order/refund',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 退款列表
|
||||
refundList: {
|
||||
url: '/api/wdsxh/goods/order/refund_index',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 提交快递
|
||||
receipt: {
|
||||
url: '/api/wdsxh/goods/order/receipt',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 取消退款
|
||||
cancelRefund: {
|
||||
url: '/api/wdsxh/goods/order/cancel_refund',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 取消订单
|
||||
delOrder: {
|
||||
url: '/api/wdsxh/goods/order/del_order',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 加入购物车
|
||||
addCart: {
|
||||
url: '/api/wdsxh/mall/cart/add',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 购物车数量
|
||||
cartNumber: {
|
||||
url: '/api/wdsxh/mall/cart/cart_goods_number',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 购物车列表
|
||||
cartList: {
|
||||
url: '/api/wdsxh/mall/cart/list',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 更新购物车商品数量
|
||||
updateCartNumber: {
|
||||
url: '/api/wdsxh/mall/cart/update_goods_number',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 删除购物车商品
|
||||
deleteCart: {
|
||||
url: '/api/wdsxh/mall/cart/del',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 商城配置
|
||||
config: {
|
||||
url: '/api/wdsxh/mall/self_pickup/config',
|
||||
method: 'GET',
|
||||
},
|
||||
};
|
||||
238
uniapp/小程序代码/common/api/member.js
Normal file
238
uniapp/小程序代码/common/api/member.js
Normal file
@@ -0,0 +1,238 @@
|
||||
// +----------------------------------------------------------------------
|
||||
// | 麦沃德科技赋能开发者，助力商协会发展
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
// +----------------------------------------------------------------------
|
||||
// | 会员接口列表文件 开发者: 麦沃德科技-暴雨
|
||||
// +----------------------------------------------------------------------
|
||||
|
||||
export default {
|
||||
// 会员列表
|
||||
list: {
|
||||
url: '/api/wdsxh/member/member/index',
|
||||
method: 'GET',
|
||||
},
|
||||
// 自定义装修会员列表
|
||||
diyList: {
|
||||
url: '/api/wdsxh/member/member/diy_list',
|
||||
method: 'GET',
|
||||
},
|
||||
// 自定义装修搜索会员列表
|
||||
diySearchList: {
|
||||
url: '/api/wdsxh/search/search_member_name',
|
||||
method: 'GET',
|
||||
},
|
||||
// 会员地图会员列表
|
||||
memberMapList: {
|
||||
url: '/api/wdsxh/member/member/member_map_list',
|
||||
method: 'GET',
|
||||
},
|
||||
// 会员单位
|
||||
units: {
|
||||
url: '/api/wdsxh/member/member/unit',
|
||||
method: 'GET',
|
||||
},
|
||||
// 会员详情
|
||||
details: {
|
||||
url: '/api/wdsxh/member/member/details',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 企业详情
|
||||
enterprise: {
|
||||
url: '/api/wdsxh/member/member/company_details',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 团体详情
|
||||
organization: {
|
||||
url: '/api/wdsxh/member/member/organize_details',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 对外限制
|
||||
limit: {
|
||||
url: '/api/wdsxh/member/member/auth',
|
||||
method: 'GET',
|
||||
},
|
||||
// 会员级别
|
||||
level: {
|
||||
url: '/api/wdsxh/member/member_apply/level_list',
|
||||
method: 'GET',
|
||||
},
|
||||
// 入会类型
|
||||
type: {
|
||||
url: '/api/wdsxh/config/join_config',
|
||||
method: 'GET',
|
||||
},
|
||||
// 会员状态
|
||||
state: {
|
||||
url: '/api/wdsxh/user_wechat/apply_member_state',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 入会字段
|
||||
field: {
|
||||
url: '/api/wdsxh/member/join_config/custom_field',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 入会申请
|
||||
apply: {
|
||||
url: '/api/wdsxh/member/member_apply/submit',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 申请详情
|
||||
applyDetails: {
|
||||
url: '/api/wdsxh/member/member_apply/details',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 入会申请验证
|
||||
applyCheck: {
|
||||
url: '/api/wdsxh/member/member_apply/check_mobile_use',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 会员资料
|
||||
information: {
|
||||
url: '/api/wdsxh/member/member/information_details',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 编辑资料
|
||||
editInformation: {
|
||||
url: '/api/wdsxh/member/member/submit_information',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 会费缴纳详情
|
||||
payDetails: {
|
||||
url: '/api/wdsxh/member/member/membershipPayDetail',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 线上缴费
|
||||
accountInfo: {
|
||||
url: '/api/wdsxh/association/public_account_information',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 线上缴费
|
||||
payOnline: {
|
||||
url: '/api/wdsxh/member/member/membershipPay',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 线下缴费
|
||||
payOffline: {
|
||||
url: '/api/wdsxh/member/member/submit_pay_voucher',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 免费入会
|
||||
payFree: {
|
||||
url: '/api/wdsxh/member/member/freeMembershipPay',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 证书查询
|
||||
certificate: {
|
||||
url: '/api/wdsxh/member/cert/index',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 行业分类
|
||||
industry: {
|
||||
url: '/api/wdsxh/member/member_apply/industry_category_list',
|
||||
method: 'GET',
|
||||
},
|
||||
// 通讯录
|
||||
addressBook: {
|
||||
url: '/api/wdsxh/member/member/address_book',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 通讯录限制
|
||||
addressBookLimit: {
|
||||
url: '/api/wdsxh/member/member/address_book_auth',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 推广会员列表
|
||||
promotionList: {
|
||||
url: '/api/wdsxh/member/promotion/index',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 审核会员
|
||||
examine: {
|
||||
// 审核会员列表
|
||||
list: {
|
||||
url: '/api/wdsxh/member/member_apply_examine/index',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 审核会员详情
|
||||
details: {
|
||||
url: '/api/wdsxh/member/member_apply_examine/details',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 审核入会申请
|
||||
examineApply: {
|
||||
url: '/api/wdsxh/member/member_apply_examine/examine',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 审核线下支付
|
||||
examineOffline: {
|
||||
url: '/api/wdsxh/member/member_apply_examine/offline_examine',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
},
|
||||
// 产品维护
|
||||
product: {
|
||||
// 产品列表
|
||||
list: {
|
||||
url: '/api/wdsxh/company_goods/index',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 添加产品
|
||||
add: {
|
||||
url: '/api/wdsxh/company_goods/add',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 删除产品
|
||||
delete: {
|
||||
url: '/api/wdsxh/company_goods/del',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 修改产品
|
||||
edit: {
|
||||
url: '/api/wdsxh/company_goods/edit',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 编辑详情
|
||||
editDetails: {
|
||||
url: '/api/wdsxh/company_goods/detail',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 产品详情
|
||||
details: {
|
||||
url: '/api/wdsxh/member/member/companyGoodsDetail',
|
||||
method: 'GET',
|
||||
},
|
||||
},
|
||||
};
|
||||
63
uniapp/小程序代码/common/api/mine.js
Normal file
63
uniapp/小程序代码/common/api/mine.js
Normal file
@@ -0,0 +1,63 @@
|
||||
// +----------------------------------------------------------------------
|
||||
// | 麦沃德科技赋能开发者，助力商协会发展
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
// +----------------------------------------------------------------------
|
||||
// | 个人中心接口列表文件 开发者: 麦沃德科技-半夏
|
||||
// +----------------------------------------------------------------------
|
||||
|
||||
export default {
|
||||
// 用户信息
|
||||
user: {
|
||||
url: '/api/wdsxh/user_wechat/center',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 个人中心自定义数据
|
||||
diyData: {
|
||||
url: '/api/wdsxh/person_center_diy_page/details',
|
||||
method: 'GET',
|
||||
},
|
||||
// 电子会牌
|
||||
poster: {
|
||||
url: '/api/wdsxh/willbrand/index',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 更新用户信息
|
||||
updateUser: {
|
||||
url: '/api/wdsxh/user_wechat/update_nickname_avatar',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 常见问题
|
||||
problem: {
|
||||
// 列表
|
||||
list: {
|
||||
url: '/api/wdsxh/faq/index',
|
||||
method: 'GET',
|
||||
},
|
||||
// 详情
|
||||
details: {
|
||||
url: '/api/wdsxh/faq/details',
|
||||
method: 'GET',
|
||||
},
|
||||
},
|
||||
// 消息通知
|
||||
notice: {
|
||||
// 列表
|
||||
list: {
|
||||
url: '/api/wdsxh/message/member_notification/index',
|
||||
method: 'GET',
|
||||
},
|
||||
// 详情
|
||||
details: {
|
||||
url: '/api/wdsxh/message/member_notification/detail',
|
||||
method: 'GET',
|
||||
},
|
||||
},
|
||||
};
|
||||
58
uniapp/小程序代码/common/api/points.js
Normal file
58
uniapp/小程序代码/common/api/points.js
Normal file
@@ -0,0 +1,58 @@
|
||||
// +----------------------------------------------------------------------
|
||||
// | 麦沃德科技赋能开发者，助力商协会发展
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
// +----------------------------------------------------------------------
|
||||
// | 积分商城接口列表文件 开发者: 麦沃德科技-半夏
|
||||
// +----------------------------------------------------------------------
|
||||
|
||||
export default {
|
||||
// 积分信息
|
||||
info: {
|
||||
url: '/api/wdsxh/points/my_points/index',
|
||||
method: 'GET',
|
||||
},
|
||||
// 商品列表
|
||||
goodsList: {
|
||||
url: '/api/wdsxh/points/goods/index',
|
||||
method: 'GET',
|
||||
},
|
||||
// 商品详情
|
||||
goodsDetails: {
|
||||
url: '/api/wdsxh/points/goods/detail',
|
||||
method: 'GET',
|
||||
},
|
||||
// 订单创建
|
||||
createOrder: {
|
||||
url: '/api/wdsxh/points/order/submitSettlement',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 订单列表
|
||||
orderList: {
|
||||
url: '/api/wdsxh/points/order/index',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 订单详情
|
||||
orderDetails: {
|
||||
url: '/api/wdsxh/points/order/detail',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 确认收货
|
||||
orderConfirm: {
|
||||
url: '/api/wdsxh/points/order/confirmReceipt',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 积分明细
|
||||
record: {
|
||||
url: '/api/wdsxh/points/user_wechat_points_log/index',
|
||||
method: 'GET',
|
||||
},
|
||||
};
|
||||
47
uniapp/小程序代码/common/api/questionnaire.js
Normal file
47
uniapp/小程序代码/common/api/questionnaire.js
Normal file
@@ -0,0 +1,47 @@
|
||||
// +----------------------------------------------------------------------
|
||||
// | 麦沃德科技赋能开发者，助力商协会发展
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
// +----------------------------------------------------------------------
|
||||
// | 问卷调查接口列表文件 开发者: 麦沃德科技-暴雨
|
||||
// +----------------------------------------------------------------------
|
||||
|
||||
export default {
|
||||
// 问卷分类
|
||||
questionCategory: {
|
||||
url: '/api/wdsxh/questionnaire/category/index',
|
||||
method: 'GET',
|
||||
},
|
||||
// 问卷列表
|
||||
questionList: {
|
||||
url: '/api/wdsxh/questionnaire/index/index',
|
||||
method: 'GET',
|
||||
},
|
||||
// 问卷详情
|
||||
questionDetails: {
|
||||
url: '/api/wdsxh/questionnaire/index/details',
|
||||
method: 'GET',
|
||||
},
|
||||
// 问卷提交
|
||||
questionAdd: {
|
||||
url: '/api/wdsxh/questionnaire/index/add_topic',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 问卷反馈详情
|
||||
renderDetails: {
|
||||
url: '/api/wdsxh/questionnaire/index/render_details',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 问卷权限
|
||||
limit: {
|
||||
url: '/api/wdsxh/questionnaire/index/answer_sheet_status',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
};
|
||||
54
uniapp/小程序代码/common/api/sequence.js
Normal file
54
uniapp/小程序代码/common/api/sequence.js
Normal file
@@ -0,0 +1,54 @@
|
||||
// +----------------------------------------------------------------------
|
||||
// | 麦沃德科技赋能开发者，助力商协会发展
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
// +----------------------------------------------------------------------
|
||||
// | 活动接龙接口列表文件 开发者: 麦沃德科技-暴雨
|
||||
// +----------------------------------------------------------------------
|
||||
|
||||
export default {
|
||||
// 接龙列表
|
||||
chainsList: {
|
||||
url: '/api/wdsxh/jielong/index',
|
||||
method: 'GET',
|
||||
},
|
||||
// 接龙详情
|
||||
chainsDetails: {
|
||||
url: '/api/wdsxh/jielong/details',
|
||||
method: 'GET',
|
||||
},
|
||||
// 限定接龙资格
|
||||
chainsSeniority: {
|
||||
url: '/api/wdsxh/jielong/jielong_state',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 获取反馈结果
|
||||
feedbackResult: {
|
||||
url: '/api/wdsxh/jielong/feedback_state',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
// 提交反馈
|
||||
addFeedback: {
|
||||
url: '/api/wdsxh/jielong/add',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 反馈详情
|
||||
feedbackDetails: {
|
||||
url: '/api/wdsxh/jielong/feedback_details',
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
},
|
||||
// 接龙权限
|
||||
limit: {
|
||||
url: '/api/wdsxh/jielong/jielong_config',
|
||||
auth: true,
|
||||
method: 'GET',
|
||||
},
|
||||
};
|
||||
206
uniapp/小程序代码/common/poster.js
Normal file
206
uniapp/小程序代码/common/poster.js
Normal file
@@ -0,0 +1,206 @@
|
||||
// 获取图片信息，这里主要要获取图片缓存地址
|
||||
export function loadImage(url) {
|
||||
return new Promise(resolve => {
|
||||
uni.getImageInfo({
|
||||
src: url,
|
||||
success: (res) => {
|
||||
resolve(res.path)
|
||||
},
|
||||
fail: () => {
|
||||
resolve("")
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
// 解析海报对象，绘制canvas海报
|
||||
export function createPoster(ctx, posterItemList) {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
// 单行文本超出隐藏
|
||||
const textEllipsis = (text, maxWidth) => {
|
||||
let strWidth = ctx.measureText(text).width;
|
||||
const ellipsis = '…';
|
||||
const ellipsisWidth = ctx.measureText(ellipsis).width;
|
||||
if (strWidth > maxWidth && maxWidth > ellipsisWidth) {
|
||||
var len = text.length;
|
||||
while (strWidth >= (maxWidth - ellipsisWidth) && len-- > 0) {
|
||||
text = text.slice(0, len);
|
||||
strWidth = ctx.measureText(text).width;
|
||||
}
|
||||
text += ellipsis;
|
||||
}
|
||||
return text
|
||||
}
|
||||
// 文本换行
|
||||
const breakTextLines = (text, maxWidth) => {
|
||||
const words = text.split('');
|
||||
let line = '';
|
||||
const lines = [];
|
||||
for (let i = 0; i < words.length; i++) {
|
||||
const word = words[i];
|
||||
const testLine = line + word;
|
||||
const metrics = ctx.measureText(testLine);
|
||||
if (metrics.width > maxWidth && i > 0) {
|
||||
lines.push(line);
|
||||
line = word;
|
||||
} else {
|
||||
line = testLine;
|
||||
}
|
||||
}
|
||||
lines.push(line);
|
||||
return lines;
|
||||
};
|
||||
for (let i = 0; i < posterItemList.length; i++) {
|
||||
const temp = posterItemList[i];
|
||||
if (temp.type === 'image') {
|
||||
ctx.setStrokeStyle("rgba(255, 255, 255, 0)")
|
||||
ctx.save()
|
||||
var x = temp.config.x;
|
||||
var y = temp.config.y;
|
||||
var width = temp.config.w;
|
||||
var height = temp.config.h;
|
||||
var radius = temp.config.r || 0;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + radius, y);
|
||||
ctx.lineTo(x + width - radius, y);
|
||||
ctx.arc(x + width - radius, y + radius, radius, -Math.PI / 2, 0); // 从右边绘制圆角
|
||||
ctx.lineTo(x + width, y + height - radius);
|
||||
ctx.arc(x + width - radius, y + height - radius, radius, 0, Math.PI / 2); // 从底部绘制圆角
|
||||
ctx.lineTo(x + radius, y + height);
|
||||
ctx.arc(x + radius, y + height - radius, radius, Math.PI / 2, Math.PI); // 从左边绘制圆角
|
||||
ctx.lineTo(x, y + radius)
|
||||
ctx.arc(x + radius, y + radius, radius, -Math.PI, -Math.PI / 2);
|
||||
ctx.closePath();
|
||||
ctx.clip();
|
||||
ctx.drawImage(temp.url, temp.config.x, temp.config.y, temp.config.w, temp.config.h);
|
||||
ctx.restore()
|
||||
} else if (temp.type === 'imageGroup') {
|
||||
let itemX = parseFloat(temp.config.x)
|
||||
for (let j in temp.group) {
|
||||
if (j >= 3) break;
|
||||
ctx.drawImage(temp.group[j], itemX, temp.config.y, temp.config.w, temp.config.h);
|
||||
itemX += parseFloat(temp.config.w) + parseFloat(temp.config.space)
|
||||
}
|
||||
} else if (temp.type === 'avatar') {
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
ctx.arc(temp.config.w / 2 + temp.config.x, temp.config.h / 2 + temp.config.y, temp.config.w / 2, 0, Math.PI * 2);
|
||||
ctx.clip();
|
||||
ctx.drawImage(temp.url, temp.config.x, temp.config.y, temp.config.w, temp.config.h);
|
||||
ctx.restore();
|
||||
ctx.setStrokeStyle('#fff');
|
||||
} else if (temp.type === 'text') {
|
||||
if (temp.config.font) ctx.font = temp.config.font
|
||||
else ctx.font = "10px sans-serif"
|
||||
temp.config.fontSize && ctx.setFontSize(temp.config.fontSize);
|
||||
temp.config.color && ctx.setFillStyle(temp.config.color);
|
||||
temp.config.textAlign && ctx.setTextAlign(temp.config.textAlign);
|
||||
ctx.setTextBaseline("middle")
|
||||
if (temp.config.wrap) {
|
||||
const maxWidth = temp.config.maxWidth;
|
||||
const lineHeight = temp.config.lineHeight;
|
||||
const lines = breakTextLines(temp.text, maxWidth);
|
||||
const lineNumber = temp.config.lineNumber || 2;
|
||||
if (temp.config.isVerticalCenter) {
|
||||
temp.config.y += lineHeight * lineNumber / 2 - lines.length * lineHeight / 2
|
||||
}
|
||||
for (let index = 0; index < lineNumber; index++) {
|
||||
if (index >= lines.length) break;
|
||||
let line = lines[index]
|
||||
if (index == lineNumber - 1 && (index + 1) < lines.length) {
|
||||
line = textEllipsis(line + "...", maxWidth)
|
||||
ctx.fillText(line, temp.config.x, temp.config.y + index * lineHeight);
|
||||
} else {
|
||||
ctx.fillText(line, temp.config.x, temp.config.y + index * lineHeight);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const lineHeight = temp.config.lineHeight;
|
||||
if (temp.config.isVerticalCenter) {
|
||||
temp.config.y += lineHeight / 2
|
||||
}
|
||||
temp.text = textEllipsis(temp.text, temp.config.maxWidth)
|
||||
ctx.fillText(temp.text, temp.config.x, temp.config.y);
|
||||
}
|
||||
ctx.stroke();
|
||||
} else if (temp.type === 'textGroup') {
|
||||
let itemX = temp.config.x
|
||||
for (var j in temp.group) {
|
||||
const item = temp.group[j]
|
||||
if (temp.font) ctx.font = temp.font
|
||||
else ctx.font = "10px sans-serif"
|
||||
item.fontSize && ctx.setFontSize(item.fontSize);
|
||||
item.color && ctx.setFillStyle(item.color);
|
||||
temp.config.textAlign && ctx.setTextAlign(temp.config.textAlign);
|
||||
ctx.setTextBaseline("middle")
|
||||
if (item.wrap) {
|
||||
const maxWidth = temp.config.maxWidth - itemX + parseFloat(temp.config.x); // 最大宽度
|
||||
const lineHeight = item.lineHeight; // 行高
|
||||
const lines = breakTextLines(item.text, maxWidth);
|
||||
const lineNumber = item.lineNumber || 2;
|
||||
for (let index = 0; index < lineNumber; index++) {
|
||||
if (index >= lines.length) break;
|
||||
let line = lines[index]
|
||||
if (index == lineNumber - 1 && (index + 1) < lines.length) {
|
||||
line = textEllipsis(line + "...", maxWidth)
|
||||
ctx.fillText(line, itemX, temp.config.y + index * lineHeight);
|
||||
} else {
|
||||
ctx.fillText(line, itemX, temp.config.y + index * lineHeight);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
ctx.fillText(item.text, itemX, temp.config.y);
|
||||
}
|
||||
ctx.stroke();
|
||||
itemX += parseFloat(ctx.measureText(item.text).width)
|
||||
}
|
||||
} else if (temp.type === 'line') {
|
||||
ctx.beginPath()
|
||||
ctx.setLineWidth(temp.config.w)
|
||||
ctx.moveTo(temp.config.xo, temp.config.y)
|
||||
ctx.lineTo(temp.config.xt, temp.config.y)
|
||||
ctx.setStrokeStyle(temp.config.color)
|
||||
ctx.stroke()
|
||||
} else if (temp.type === 'function') {
|
||||
temp.function()
|
||||
}
|
||||
}
|
||||
ctx.draw();
|
||||
resolve()
|
||||
} catch (e) {
|
||||
reject(e)
|
||||
}
|
||||
})
|
||||
}
|
||||
// canvas转image图片
|
||||
export function canvasToTempFilePath(canvasId, vm, delay = 50) {
|
||||
return new Promise((resolve, reject) => {
|
||||
// 这里canvas绘制完成之后想要存缓存需要一定时间，这里设置了50毫秒
|
||||
setTimeout(() => {
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: canvasId,
|
||||
success(res) {
|
||||
if (res.errMsg && res.errMsg.indexOf('ok') != -1) resolve(res.tempFilePath);
|
||||
else reject(res)
|
||||
},
|
||||
fail(err) {
|
||||
reject(err)
|
||||
}
|
||||
}, vm);
|
||||
}, delay)
|
||||
})
|
||||
}
|
||||
// 保存图片到相册
|
||||
export function saveImageToPhotosAlbum(imagePath) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: imagePath,
|
||||
success(res) {
|
||||
resolve(res)
|
||||
},
|
||||
fail(err) {
|
||||
reject(err)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
254
uniapp/小程序代码/common/svg.js
Normal file
254
uniapp/小程序代码/common/svg.js
Normal file
@@ -0,0 +1,254 @@
|
||||
const svgData = {
|
||||
more: `<svg width="16.000000" height="16.000000" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<desc>
|
||||
Created with maiwd-zct.
|
||||
</desc>
|
||||
<defs/>
|
||||
<path d="M8 0C6.41772 0 4.87103 0.46875 3.55542 1.34863C2.23987 2.22754 1.21448 3.47656 0.608948 4.93848C0.003479 6.40039 -0.154968 8.00879 0.153748 9.56055C0.462402 11.1123 1.2243 12.5381 2.34314 13.6572C3.46198 14.7754 4.88745 15.5371 6.43927 15.8467C7.99115 16.1553 9.59967 15.9961 11.0615 15.3906C12.5233 14.7852 13.7727 13.7598 14.6517 12.4443C15.5308 11.1289 16 9.58203 16 8C15.9976 5.87891 15.154 3.8457 13.6542 2.3457C12.1544 0.845703 10.121 0.00195312 8 0ZM8 14.4004C6.73419 14.4004 5.49683 14.0244 4.44434 13.3213C3.39191 12.6182 2.57159 11.6182 2.08716 10.4492C1.60278 9.2793 1.47601 7.99316 1.72296 6.75098C1.96991 5.50977 2.57947 4.36914 3.47449 3.47461C4.36957 2.5791 5.50995 1.96973 6.7514 1.72266C7.99292 1.47559 9.27972 1.60254 10.4492 2.08691C11.6186 2.57129 12.6182 3.3916 13.3214 4.44434C14.0247 5.49707 14.4 6.73438 14.4 8C14.3981 9.69727 13.7231 11.3232 12.5233 12.5234C11.3235 13.7227 9.69678 14.3984 8 14.4004Z" fill="#325DFF" fill-opacity="1.000000" fill-rule="nonzero"/>
|
||||
<path d="M5.76703 4.62012L9.27338 8.00098L5.76703 11.3818L6.92072 12.4932L11.5827 8.00098L6.92072 3.50684L5.76703 4.62012Z" fill="#325DFF" fill-opacity="1.000000" fill-rule="nonzero"/>
|
||||
</svg>`,
|
||||
time: `<svg width="16.000000" height="16.000000" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<desc>
|
||||
Created with maiwd-zct.
|
||||
</desc>
|
||||
<defs/>
|
||||
<rect width="16.000000" height="16.000000" fill="#FFFFFF" fill-opacity="0"/>
|
||||
<path d="M8 1.33301C4.32666 1.33301 1.33337 4.32617 1.33337 8C1.33337 11.6729 4.32666 14.666 8 14.666C11.6733 14.666 14.6667 11.6729 14.6667 8C14.6667 4.32617 11.6733 1.33301 8 1.33301ZM10.9 10.3799C10.8068 10.54 10.64 10.626 10.4667 10.626C10.38 10.626 10.2933 10.6064 10.2134 10.5527L8.14673 9.31934C7.63342 9.0127 7.25342 8.33984 7.25342 7.74609L7.25342 5.0127C7.25342 4.73926 7.47998 4.5127 7.75342 4.5127C8.02673 4.5127 8.25342 4.73926 8.25342 5.0127L8.25342 7.74609C8.25342 7.98633 8.45337 8.33984 8.66003 8.45996L10.7267 9.69336C10.9667 9.83301 11.0468 10.1396 10.9 10.3799Z" fill="#325DFF" fill-opacity="1.000000" fill-rule="nonzero"/>
|
||||
<g opacity="0.000000"/>
|
||||
</svg>`,
|
||||
location: `<svg width="16.000000" height="16.000000" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<desc>
|
||||
Created with maiwd-zct.
|
||||
</desc>
|
||||
<defs>
|
||||
<clipPath id="clip4930_3326">
|
||||
<rect id="location" width="16.000000" height="16.000000" fill="white" fill-opacity="0"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<rect id="location" width="16.000000" height="16.000000" fill="#FFFFFF" fill-opacity="0"/>
|
||||
<g clip-path="url(#clip4930_3326)">
|
||||
<path id="Vector" d="M13.7467 5.63379C13.0468 2.55371 10.3601 1.16699 8.00012 1.16699C8.00012 1.16699 8.00012 1.16699 7.99341 1.16699C5.64001 1.16699 2.94678 2.54688 2.2467 5.62695C1.46667 9.06738 3.57336 11.9805 5.4801 13.8135C6.18677 14.4941 7.09338 14.834 8.00012 14.834C8.90674 14.834 9.81335 14.4941 10.5134 13.8135C12.42 11.9805 14.5267 9.07324 13.7467 5.63379ZM8.00012 8.97363C6.84009 8.97363 5.90002 8.0332 5.90002 6.87402C5.90002 5.71387 6.84009 4.77344 8.00012 4.77344C9.16003 4.77344 10.1001 5.71387 10.1001 6.87402C10.1001 8.0332 9.16003 8.97363 8.00012 8.97363Z" fill="#325DFF" fill-opacity="1.000000" fill-rule="nonzero"/>
|
||||
<g opacity="0.000000"/>
|
||||
<g opacity="0.000000"/>
|
||||
</g>
|
||||
</svg>`,
|
||||
invite: `<svg width="16.000000" height="16.000000" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<desc>
|
||||
Created with maiwd-zct.
|
||||
</desc>
|
||||
<defs/>
|
||||
<g opacity="0.000000"/>
|
||||
<path d="M10.7933 1.33301L5.20667 1.33301C2.78003 1.33301 1.33337 2.7793 1.33337 5.20605L1.33337 10.7861C1.33337 13.2197 2.78003 14.666 5.20667 14.666L10.7867 14.666C13.2134 14.666 14.66 13.2197 14.66 10.793L14.66 5.20605C14.6667 2.7793 13.2201 1.33301 10.7933 1.33301ZM10.9401 6.55273C10.5333 7.71289 9.44006 8.49316 8.21338 8.49316C8.20667 8.49316 8.20667 8.49316 8.20007 8.49316L6.82666 8.48633C6.82666 8.48633 6.82666 8.48633 6.82007 8.48633C6.31335 8.48633 5.87341 8.82617 5.73999 9.31348C6.33337 9.5 6.76672 10.0527 6.76672 10.7061C6.76672 11.5127 6.10669 12.1729 5.30005 12.1729C4.49341 12.1729 3.83337 11.5127 3.83337 10.7061C3.83337 10.1133 4.19336 9.59961 4.70007 9.37305L4.70007 6.4668C4.19336 6.2666 3.83337 5.77344 3.83337 5.19922C3.83337 4.44629 4.44666 3.83301 5.20007 3.83301C5.95337 3.83301 6.56665 4.44629 6.56665 5.19922C6.56665 5.7793 6.20667 6.2666 5.70007 6.4668L5.70007 7.81348C6.02673 7.60645 6.41333 7.48633 6.82007 7.48633L6.82666 7.48633L8.20007 7.49316C8.98669 7.51953 9.68677 7.0127 9.96667 6.2793C9.64001 6.02637 9.42676 5.63965 9.42676 5.19922C9.42676 4.44629 10.04 3.83301 10.7933 3.83301C11.5468 3.83301 12.16 4.44629 12.16 5.19922C12.1667 5.90625 11.6267 6.47949 10.9401 6.55273Z" fill="#325DFF" fill-opacity="1.000000" fill-rule="nonzero"/>
|
||||
</svg>`,
|
||||
phone: `<svg width="16.000000" height="16.000000" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<desc>
|
||||
Created with maiwd-zct.
|
||||
</desc>
|
||||
<defs/>
|
||||
<circle id="Ellipse 52" cx="8.000000" cy="7.500000" r="8.000000" fill="#FFFFFF" fill-opacity="0"/>
|
||||
<path id="合并" d="M5.20996 0.833008L10.7966 0.833008C13.2234 0.833008 14.67 2.2793 14.6633 4.70605L14.6633 10.293C14.6633 12.7197 13.2167 14.166 10.79 14.166L5.20996 14.166C2.78333 14.166 1.33667 12.7197 1.33667 10.2861L1.33667 4.70605C1.33667 2.2793 2.78333 0.833008 5.20996 0.833008Z" clip-rule="evenodd" fill="#325DFF" fill-opacity="1.000000" fill-rule="evenodd"/>
|
||||
<path id="Vector" d="M5.6 6.96C6.24 8.21 7.28 9.24 8.53 9.89L9.51 8.91C9.63 8.79 9.81 8.75 9.96 8.8C10.46 8.97 11 9.05 11.55 9.05C11.8 9.05 12 9.25 12 9.5L12 11.05C12 11.29 11.8 11.5 11.55 11.5C7.38 11.5 4 8.11 4 3.94C4 3.7 4.19 3.5 4.44 3.5L6 3.5C6.24 3.5 6.44 3.7 6.44 3.94C6.44 4.5 6.53 5.03 6.69 5.53C6.74 5.68 6.71 5.86 6.58 5.98L5.6 6.96Z" fill="#FFFFFF" fill-opacity="1.000000" fill-rule="nonzero"/>
|
||||
</svg>`,
|
||||
clock: `<svg width="20.000000" height="20.000000" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<desc>
|
||||
Created with maiwd-zct.
|
||||
</desc>
|
||||
<g clip-path="url(#clip4609_5448)">
|
||||
<path id="Vector" d="M10 2.125C5.1875 2.125 1.25 6.0625 1.25 10.875C1.25 15.6875 5.1875 19.625 10 19.625C14.8125 19.625 18.75 15.6875 18.75 10.875C18.75 6.0625 14.8125 2.125 10 2.125ZM10 18.375C5.875 18.375 2.5 15 2.5 10.875C2.5 6.6875 5.875 3.3125 10 3.3125C14.125 3.3125 17.5625 6.6875 17.5625 10.875C17.5625 15 14.1875 18.375 10 18.375ZM17.1875 3.75C17.3125 3.8125 17.375 3.875 17.5 3.875C17.6875 3.875 17.875 3.75 18 3.625L18.125 3.4375C18.1875 3.3125 18.25 3.125 18.25 3C18.25 2.8125 18.125 2.6875 18 2.625L15.9375 1.1875C15.8125 1.125 15.75 1.0625 15.625 1.0625C15.4375 1.0625 15.25 1.1875 15.125 1.3125L15 1.5C14.9375 1.625 14.875 1.8125 14.875 1.9375C14.875 2.0625 15 2.25 15.125 2.3125L17.1875 3.75ZM2 3.875C2.125 4 2.3125 4.125 2.5 4.125C2.625 4.125 2.75 4.0625 2.875 4L4.75 2.375C5 2.125 5.0625 1.75 4.8125 1.5L4.75 1.375C4.625 1.25 4.4375 1.1875 4.25 1.1875C4.125 1.1875 4 1.25 3.875 1.3125L2 2.9375C1.75 3.125 1.6875 3.5 1.9375 3.75L2 3.875Z" fill="#325DFF" fill-opacity="1.000000" fill-rule="nonzero"/>
|
||||
<path id="Vector" d="M12.875 10.3125L9.8125 10.3125L9.8125 7C9.8125 6.6875 9.5625 6.375 9.1875 6.3125L9.125 6.3125C8.75 6.3125 8.4375 6.625 8.4375 7L8.4375 11.625L12.875 11.625C13.25 11.625 13.5625 11.3125 13.5625 10.9375C13.5625 10.625 13.25 10.3125 12.875 10.3125Z" fill="#325DFF" fill-opacity="1.000000" fill-rule="nonzero"/>
|
||||
</g>
|
||||
</svg>`,
|
||||
down: `<svg width="10.000000" height="8.000000" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<desc>
|
||||
Created with maiwd-zct.
|
||||
</desc>
|
||||
<defs/>
|
||||
<path id="Polygon 2" d="M5.54607 7.71387C5.30338 8.0957 4.69662 8.0957 4.45393 7.71387L0.0854187 0.857422C-0.157272 0.476562 0.146088 0 0.631485 0L9.36852 0C9.85391 0 10.1573 0.476562 9.91458 0.857422L5.54607 7.71387Z" fill="#325DFF" fill-opacity="1.000000" fill-rule="nonzero"/>
|
||||
</svg>`,
|
||||
release: `<svg width="20.000000" height="20.000000" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<desc>
|
||||
Created with maiwd-zct.
|
||||
</desc>
|
||||
<g clip-path="url(#clip4557_5025)">
|
||||
<circle id="Ellipse 67" cx="10.000000" cy="10.000000" r="10.000000" fill="#FFFFFF" fill-opacity="1.000000"/>
|
||||
<path id="Vector" d="M11.917 17.9775C11.775 17.9775 11.6371 17.9092 11.5511 17.791L11.5492 17.7871L8.57495 13.0439C8.573 13.042 8.57092 13.04 8.56897 13.04L2.50659 12.5967L2.50061 12.5967C2.3147 12.5723 2.16077 12.4346 2.11682 12.251C2.07288 12.0703 2.14685 11.8789 2.29871 11.7725L15.5367 3.38379L15.5388 3.38184C15.6587 3.30176 15.8086 3.28027 15.9425 3.32812C16.1644 3.41016 16.2823 3.62988 16.2363 3.84766L12.3586 17.6172C12.3207 17.791 12.1848 17.9287 12.0109 17.9668C11.9789 17.9727 11.9469 17.9775 11.917 17.9775Z" fill="#325DFF" fill-opacity="1.000000" fill-rule="nonzero"/>
|
||||
</g>
|
||||
</svg>`,
|
||||
security: `<svg width="16.000000" height="16.000000" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<desc>
|
||||
Created with maiwd-zct.
|
||||
</desc>
|
||||
<g clip-path="url(#clip4557_7034)">
|
||||
<path id="Vector" d="M8 0.666992L2 3.33398L2 7.33398C2 11.0332 4.56006 14.4941 8 15.334C11.4399 14.4941 14 11.0332 14 7.33398L14 3.33398L8 0.666992ZM8 7.99414L12.6666 7.99414C12.3134 10.7402 10.48 13.1865 8 13.9541L8 8L3.33337 8L3.33337 4.2002L8 2.12695L8 7.99414Z" fill="#325DFF" fill-opacity="1.000000" fill-rule="nonzero"/>
|
||||
</g>
|
||||
</svg>`,
|
||||
sheet: `<svg width="109.000008" height="99.000000" viewBox="0 0 109 99" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<desc>
|
||||
Created with maiwd-zct.
|
||||
</desc>
|
||||
<defs>
|
||||
<linearGradient id="paint_linear_4474_1306_0" x1="31.000008" y1="20.500000" x2="68.500000" y2="82.499992" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#325DFF"/>
|
||||
<stop offset="1.000000" stop-color="#325DFF" stop-opacity="0.000000"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint_linear_4474_1307_0" x1="31.500008" y1="12.500000" x2="69.000000" y2="74.499992" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#325DFF"/>
|
||||
<stop offset="1.000000" stop-color="#325DFF" stop-opacity="0.000000"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M0 38C10 33.667 45.2 15.2002 52 8C59 18.5 95.5 63.5 100.5 64.5C95 69.5 46.5 94 42.5 99C38.5 93 17.5 49.5 0 38Z" fill="url(#paint_linear_4474_1306_0)" fill-opacity="1.000000" fill-rule="evenodd"/>
|
||||
<path d="M0.5 30C10.5 25.667 45.7 7.2002 52.5 0C59.5 10.5 96 55.5 101 56.5C95.5 61.5 47 86 43 91C39 85 18 41.5 0.5 30Z" fill="url(#paint_linear_4474_1307_0)" fill-opacity="1.000000" fill-rule="evenodd"/>
|
||||
<rect x="18.000000" y="35.036133" rx="2.000000" width="32.000000" height="4.000000" transform="rotate(-30.0748 18.000000 35.036133)" fill="#FFFFFF" fill-opacity="1.000000"/>
|
||||
<rect x="23.000000" y="43.036133" rx="2.000000" width="32.000000" height="4.000000" transform="rotate(-30.0748 23.000000 43.036133)" fill="#FFFFFF" fill-opacity="1.000000"/>
|
||||
<rect x="28.000000" y="51.036133" rx="2.000000" width="32.000000" height="4.000000" transform="rotate(-30.0748 28.000000 51.036133)" fill="#FFFFFF" fill-opacity="1.000000"/>
|
||||
<path d="M48.8848 74.2119L48.9126 74.2168C49.0707 74.4482 49.0134 74.7539 48.7823 74.9121C48.5512 75.0703 48.2454 75.0127 48.0873 74.7822L48.0925 74.7539L48.8848 74.2119ZM70.3253 58.1465L70.3535 58.1465C70.5515 58.3438 70.5515 58.6553 70.3535 58.8535C70.1556 59.0508 69.8444 59.0508 69.6465 58.8535L69.6465 58.8252L70.3253 58.1465Z" fill="#FFFFFF" fill-opacity="1.000000" fill-rule="nonzero"/>
|
||||
<path d="M48.5 74.5C46.3333 71.333 43.9 65.1992 51.5 66C61 67 65 70 65 66C65 62 60.5 57 65 57.5C68.6 57.8994 69.8333 58.333 70 58.5" stroke="#FFFFFF" stroke-opacity="1.000000" stroke-width="1.000000" stroke-linecap="round"/>
|
||||
<path d="M71.2453 59C69.7148 52.8887 75.733 49.2129 78.5889 43.0098C89.0602 25.2285 76.821 10.7539 108.915 4C109.459 15.5791 107.283 23.8496 105.515 28.123L97.2197 31.9824C99.1689 31.6611 103.448 30.7969 104.971 29.915C103.475 36.2559 101.027 40.2529 99.2596 41.3555C96.7573 42.1279 93.8652 42.7803 92.732 43.0098L98.5796 43.5615C97.129 45.4453 92.5416 49.792 86.3404 49.9023C83.5117 49.9023 79.1782 48.4775 78.3169 48.248L97.2197 18.749C91.916 25.7793 79.296 43.6719 71.2453 59Z" fill="#FFFFFF" fill-opacity="1.000000" fill-rule="evenodd"/>
|
||||
<path d="M70.2453 59C68.7148 52.8887 74.733 49.2129 77.5889 43.0098C88.0602 25.2285 75.821 10.7539 107.915 4C108.459 15.5791 106.283 23.8496 104.515 28.123L96.2197 31.9824C98.1689 31.6611 102.448 30.7969 103.971 29.915C102.475 36.2559 100.027 40.2529 98.2596 41.3555C95.7573 42.1279 92.8652 42.7803 91.732 43.0098L97.5796 43.5615C96.129 45.4453 91.5416 49.792 85.3404 49.9023C82.5117 49.9023 78.1782 48.4775 77.3169 48.248L96.2197 18.749C90.916 25.7793 78.296 43.6719 70.2453 59Z" fill="#325DFF" fill-opacity="1.000000" fill-rule="evenodd"/>
|
||||
</svg>`,
|
||||
fees: `<svg width="375.262451" height="60.000000" viewBox="0 0 375.262 60" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<desc>
|
||||
Created with maiwd-zct.
|
||||
</desc>
|
||||
<defs>
|
||||
<linearGradient id="paint_linear_4557_7531_0" x1="8.283279" y1="54.999969" x2="362.449951" y2="54.999969" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#325DFF"/>
|
||||
<stop offset="1.000000" stop-color="#325DFF"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path id="Vector 18" d="M0.131104 0L187.7 50.4648L375.131 0L375.131 59.9268L187.7 60L0.131104 59.9268L0.131104 0Z" fill="#FFFFFF" fill-opacity="1.000000" fill-rule="evenodd"/>
|
||||
<path id="Vector 19" d="" fill="#FFFFFF" fill-opacity="1.000000" fill-rule="nonzero"/>
|
||||
<path id="Vector 19" d="M0.131104 4L187.7 55L375.131 4" stroke="url(#paint_linear_4557_7531_0)" stroke-opacity="1.000000" stroke-width="1.000000"/>
|
||||
</svg>`,
|
||||
pay: `<svg width="16.000000" height="16.000000" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<desc>
|
||||
Created with maiwd-zct.
|
||||
</desc>
|
||||
<defs>
|
||||
<clipPath id="clip5365_4444">
|
||||
<rect width="16.000000" height="16.000000" fill="white" fill-opacity="0"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<rect width="16.000000" height="16.000000" fill="#FFFFFF" fill-opacity="0"/>
|
||||
<g clip-path="url(#clip5365_4444)">
|
||||
<path id="Vector" d="M13.6331 4.13574C13.9661 4.46875 14.137 4.88086 14.146 5.37305L14.146 12.373C14.137 12.8652 13.9661 13.2773 13.6331 13.6104C13.3 13.9434 12.8879 14.1143 12.396 14.123L3.646 14.123C3.15405 14.1143 2.74097 13.9434 2.40894 13.6104C2.07593 13.2773 1.90503 12.8652 1.896 12.373L1.896 5.37305C1.90503 4.88086 2.07593 4.46875 2.40894 4.13574C2.74194 3.80273 3.15405 3.63184 3.646 3.62305L12.396 3.62305C12.8879 3.63281 13.3 3.80273 13.6331 4.13574ZM2.88696 2.63184C2.80908 2.55469 2.771 2.44727 2.771 2.31055C2.771 2.1748 2.81006 2.06738 2.88696 1.99023C2.96411 1.91309 3.07202 1.87402 3.20801 1.87402L12.833 1.87402C12.97 1.87402 13.0769 1.91309 13.1541 1.99023C13.231 2.06836 13.27 2.1748 13.27 2.31055C13.27 2.44727 13.231 2.55469 13.1541 2.63184C13.0759 2.70996 12.969 2.74805 12.833 2.74805L3.20801 2.74805C3.07104 2.74805 2.96411 2.70996 2.88696 2.63184ZM8.45801 9.39258L8.45801 8.87305L9.77002 8.87305C9.90698 8.87305 10.0139 8.83398 10.0911 8.75684C10.168 8.67969 10.207 8.57227 10.207 8.43555C10.207 8.2998 10.168 8.19238 10.0911 8.11523C10.0129 8.03809 9.90601 7.99902 9.77002 7.99902L8.97705 7.99902L9.85205 7.12402C9.94312 7.0332 9.98901 6.92969 9.98901 6.81641C9.98901 6.70215 9.94312 6.60156 9.85205 6.51465C9.76099 6.42773 9.66089 6.38477 9.55103 6.38477C9.44092 6.38477 9.34106 6.42578 9.25 6.50781L8.02002 7.73828L6.79004 6.60449C6.69897 6.5127 6.59888 6.4668 6.48901 6.4668C6.37891 6.4668 6.27905 6.5127 6.18799 6.60449C6.09692 6.69531 6.05103 6.79492 6.05103 6.90527C6.05103 7.01465 6.09692 7.11523 6.18799 7.20605L7.06299 7.99902L6.27002 7.99902C6.13306 7.99902 6.02588 8.03809 5.94897 8.11523C5.87109 8.19336 5.83301 8.2998 5.83301 8.43555C5.83301 8.57227 5.87207 8.67969 5.94897 8.75684C6.02588 8.83496 6.13403 8.87305 6.27002 8.87305L7.58203 8.87305L7.58203 9.39258L6.271 9.39258C6.13403 9.40234 6.0271 9.44629 5.94995 9.52344C5.87207 9.60059 5.83398 9.70508 5.83398 9.83691C5.83398 9.96875 5.87305 10.0742 5.94995 10.1514C6.0271 10.2295 6.13501 10.2666 6.271 10.2666L7.58301 10.2666L7.58301 10.9775C7.58301 11.1064 7.62207 11.208 7.69897 11.2861C7.77588 11.3643 7.88403 11.4023 8.02002 11.4023C8.15601 11.4023 8.26392 11.3633 8.34106 11.2861C8.41797 11.209 8.45703 11.1064 8.45703 10.9775L8.45703 10.2666L9.76904 10.2666C9.90601 10.2666 10.0129 10.2275 10.0901 10.1514C10.167 10.0742 10.2061 9.96875 10.2061 9.83691C10.2061 9.70508 10.167 9.59961 10.0901 9.52344C10.012 9.44629 9.90503 9.40234 9.76904 9.39258L8.45801 9.39258Z" fill="#325DFF" fill-opacity="1.000000" fill-rule="nonzero"/>
|
||||
</g>
|
||||
</svg>`,
|
||||
edit: `<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<desc>
|
||||
Created with maiwd-zct.
|
||||
</desc>
|
||||
<defs>
|
||||
<clipPath id="clip4609_5918">
|
||||
<rect id="border_color" width="24.000000" height="24.000000" fill="white" fill-opacity="0"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<rect id="border_color" width="24.000000" height="24.000000" fill="#FFFFFF" fill-opacity="0"/>
|
||||
<g clip-path="url(#clip4609_5918)">
|
||||
<path id="Vector" d="M15.8958 8.53125L13.4696 6.10352L7 12.5742L7 15L9.42612 15L15.8958 8.53125ZM17.8108 6.61523C18.0631 6.36328 18.0631 5.95508 17.8108 5.70312L16.2969 4.18945C16.0446 3.9375 15.637 3.9375 15.3846 4.18945L14.1166 5.45703L16.5427 7.88281L17.8108 6.61523Z" fill="#325DFF" fill-opacity="1.000000" fill-rule="nonzero"/>
|
||||
<path id="Vector" d="M4 17L20 17L20 20L4 20L4 17Z" fill="#325DFF" fill-opacity="1.000000" fill-rule="nonzero"/>
|
||||
</g>
|
||||
</svg>`,
|
||||
navigation: `<svg width="16.000000" height="16.000000" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<desc>
|
||||
Created with maiwd-zct.
|
||||
</desc>
|
||||
<defs>
|
||||
<clipPath id="clip4934_3111">
|
||||
<rect id="route-square" width="16.000000" height="16.000000" fill="white" fill-opacity="0"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<rect id="route-square" width="16.000000" height="16.000000" fill="#FFFFFF" fill-opacity="0"/>
|
||||
<g clip-path="url(#clip4934_3111)">
|
||||
<g opacity="0.000000"/>
|
||||
<path id="Vector" d="M10.7934 1.33301L5.20668 1.33301C2.78001 1.33301 1.33334 2.7793 1.33334 5.20605L1.33334 10.7861C1.33334 13.2197 2.78001 14.666 5.20668 14.666L10.7867 14.666C13.2133 14.666 14.66 13.2197 14.66 10.793L14.66 5.20605C14.6667 2.7793 13.22 1.33301 10.7934 1.33301ZM11.5667 6.0332L10.0067 11.0596C9.63335 12.2529 7.96001 12.2734 7.56668 11.0859L7.10001 9.70605C6.97334 9.32617 6.67334 9.01953 6.29335 8.89941L4.90668 8.43262C3.73334 8.04004 3.74667 6.35254 4.94002 5.99316L9.96667 4.42676C10.9533 4.12598 11.88 5.05273 11.5667 6.0332Z" fill="#325DFF" fill-opacity="1.000000" fill-rule="nonzero"/>
|
||||
</g>
|
||||
</svg>`,
|
||||
network: `<svg width="16.000000" height="16.000000" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<desc>
|
||||
Created with maiwd-zct.
|
||||
</desc>
|
||||
<defs>
|
||||
<clipPath id="clip241_6749">
|
||||
<rect width="16.000000" height="16.000000" fill="white" fill-opacity="0"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g clip-path="url(#clip241_6749)">
|
||||
<circle cx="8.000000" cy="8.500000" r="7.000000" fill="#325DFF" fill-opacity="1.000000"/>
|
||||
<path id="path" d="M8 3.5C5.23859 3.5 3 5.73828 3 8.5C3 11.2617 5.23859 13.5 8 13.5C10.7614 13.5 13 11.2617 13 8.5C13 5.73828 10.7614 3.5 8 3.5ZM7.64288 6.33789C7.16315 6.29785 6.70569 6.18066 6.28406 5.99414C6.62555 5.0957 7.13013 4.48535 7.64288 4.28711L7.64288 6.33789ZM7.64288 7.05273L7.64288 8.14258L5.86707 8.14258C5.88995 7.61328 5.96216 7.12207 6.07233 6.67871C6.56104 6.88477 7.08905 7.0127 7.64288 7.05273ZM7.64288 8.85742L7.64288 9.94727C7.08905 9.9873 6.56104 10.1152 6.07233 10.3213C5.96204 9.87793 5.88995 9.38672 5.86707 8.85742L7.64288 8.85742ZM7.64288 10.6621L7.64288 12.7129C7.13013 12.5146 6.62555 11.9043 6.28406 11.0059C6.70569 10.8193 7.16315 10.7021 7.64288 10.6621ZM8.35712 10.6621C8.83685 10.7021 9.29431 10.8193 9.71594 11.0059C9.37445 11.9043 8.86987 12.5146 8.35712 12.7129L8.35712 10.6621ZM8.35712 9.94727L8.35712 8.85742L10.1329 8.85742C10.11 9.38672 10.038 9.87793 9.92767 10.3213C9.43896 10.1152 8.91095 9.9873 8.35712 9.94727ZM8.35712 8.14258L8.35712 7.05273C8.91095 7.0127 9.43896 6.88477 9.92767 6.67871C10.038 7.12207 10.11 7.61328 10.1329 8.14258L8.35712 8.14258ZM8.35712 6.33789L8.35712 4.28711C8.86987 4.48535 9.37445 5.0957 9.71594 5.99414C9.29431 6.18066 8.83685 6.29785 8.35712 6.33789ZM9.79645 4.61426C10.1715 4.78809 10.5142 5.01172 10.8246 5.28516C10.6744 5.41797 10.5123 5.53613 10.3447 5.64648C10.1902 5.25879 10.0058 4.91113 9.79645 4.61426ZM5.65546 5.64648C5.48785 5.53613 5.32568 5.41797 5.17548 5.28516C5.48584 5.01172 5.82861 4.78809 6.20367 4.61426C5.9942 4.91113 5.80981 5.25879 5.65546 5.64648ZM5.42401 6.34863C5.27356 6.89844 5.17914 7.50391 5.15326 8.14258L3.73248 8.14258C3.80591 7.25879 4.14679 6.44922 4.67688 5.79883C4.90723 6.00488 5.15839 6.1875 5.42401 6.34863ZM5.15314 8.85742C5.17902 9.49609 5.27344 10.1016 5.42389 10.6514C5.15826 10.8125 4.90723 10.9951 4.6767 11.2012C4.14655 10.5508 3.80566 9.74121 3.73224 8.85742L5.15314 8.85742ZM5.65546 11.3535C5.80981 11.7412 5.9942 12.0889 6.20367 12.3857C5.82861 12.2119 5.4859 11.9883 5.17548 11.7148C5.32568 11.582 5.48785 11.4639 5.65546 11.3535ZM10.3445 11.3535C10.5121 11.4639 10.6743 11.582 10.8246 11.7148C10.5142 11.9883 10.1714 12.2119 9.79633 12.3857C10.0058 12.0889 10.1902 11.7412 10.3445 11.3535ZM10.576 10.6514C10.7264 10.1016 10.8209 9.49609 10.8467 8.85742L12.2675 8.85742C12.1941 9.74121 11.8532 10.5508 11.3231 11.2012C11.0928 10.9951 10.8416 10.8125 10.576 10.6514ZM10.8469 8.14258C10.821 7.50391 10.7266 6.89844 10.5761 6.34863C10.8417 6.1875 11.0928 6.00488 11.3233 5.79883C11.8535 6.44922 12.1943 7.25879 12.2678 8.14258L10.8469 8.14258Z" fill="#FFFFFF" fill-opacity="1.000000" fill-rule="nonzero"/>
|
||||
</g>
|
||||
</svg>`,
|
||||
share: `<svg width="16.000000" height="16.000000" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<desc>
|
||||
Created with maiwd-zct.
|
||||
</desc>
|
||||
<defs/>
|
||||
<path id="Vector" d="M14.7356 8.4209C14.7356 8.25391 14.8021 8.09277 14.9207 7.97461C15.0391 7.85645 15.1997 7.78906 15.3672 7.78906C15.5347 7.78906 15.6953 7.85645 15.8137 7.97461C15.9321 8.09277 15.9987 8.25391 15.9987 8.4209L15.9987 13.6846C15.9987 14.9629 14.9619 16 13.6831 16L2.31555 16C1.03674 16 0 14.9629 0 13.6846L0 2.94727C0 1.66895 1.03674 0.631836 2.31555 0.631836L7.78882 0.631836C7.9563 0.631836 8.11694 0.698242 8.23535 0.816406C8.35388 0.93457 8.42041 1.0957 8.42041 1.26367C8.42041 1.43066 8.35388 1.5918 8.23535 1.70996C8.11694 1.82812 7.9563 1.89453 7.78882 1.89453L2.31555 1.89453C2.0365 1.89453 1.76868 2.00586 1.57129 2.20312C1.3739 2.40039 1.26306 2.66797 1.26306 2.94727L1.26306 13.6846C1.26306 13.9639 1.3739 14.2314 1.57129 14.4287C1.76868 14.626 2.0365 14.7373 2.31555 14.7373L13.6831 14.7373C13.9623 14.7373 14.23 14.626 14.4274 14.4287C14.6248 14.2314 14.7356 13.9639 14.7356 13.6846L14.7356 8.4209ZM13.9056 2.94727L12.1335 1.06445C12.0187 0.942383 11.9572 0.780273 11.9622 0.612305C11.9673 0.445312 12.0387 0.286133 12.1606 0.171875C12.2827 0.0566406 12.4453 -0.00488281 12.6127 0C12.7802 0.00585938 12.9387 0.0771484 13.0535 0.199219L15.8271 3.14648C16.2064 3.54883 15.9205 4.21094 15.3672 4.21094L12.1971 4.21094C10.5852 4.21094 9.26245 5.61621 9.26245 7.36816L9.26245 11.1582C9.26245 11.3252 9.1958 11.4863 9.07739 11.6045C8.95898 11.7227 8.79834 11.7891 8.63086 11.7891C8.46338 11.7891 8.30273 11.7227 8.18433 11.6045C8.06592 11.4863 7.99939 11.3252 7.99939 11.1582L7.99939 7.36816C7.99939 4.93457 9.86987 2.94727 12.1971 2.94727L13.9056 2.94727Z" fill="#325DFF" fill-opacity="1.000000" fill-rule="nonzero"/>
|
||||
</svg>`,
|
||||
download: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<desc>
|
||||
Created with maiwd-zct.
|
||||
</desc>
|
||||
<defs/>
|
||||
<path d="M10.7933 1.33301H5.20659C2.77992 1.33301 1.33325 2.77967 1.33325 5.20634V10.7863C1.33325 13.2197 2.77992 14.6663 5.20659 14.6663H10.7866C13.2133 14.6663 14.6599 13.2197 14.6599 10.793V5.20634C14.6666 2.77967 13.2199 1.33301 10.7933 1.33301ZM5.64659 7.31967C5.83992 7.12634 6.15992 7.12634 6.35325 7.31967L7.49992 8.46634V4.33967C7.49992 4.06634 7.72659 3.83967 7.99992 3.83967C8.27325 3.83967 8.49992 4.06634 8.49992 4.33967V8.46634L9.64659 7.31967C9.83992 7.12634 10.1599 7.12634 10.3533 7.31967C10.5466 7.51301 10.5466 7.83301 10.3533 8.02634L8.35325 10.0263C8.30659 10.073 8.25325 10.1063 8.19325 10.133C8.13325 10.1597 8.06659 10.173 7.99992 10.173C7.93325 10.173 7.87325 10.1597 7.80659 10.133C7.74659 10.1063 7.69325 10.073 7.64659 10.0263L5.64659 8.02634C5.45325 7.83301 5.45325 7.51967 5.64659 7.31967ZM12.1599 11.4797C10.8199 11.9263 9.41325 12.153 7.99992 12.153C6.58659 12.153 5.17992 11.9263 3.83992 11.4797C3.57992 11.393 3.43992 11.1063 3.52659 10.8463C3.61325 10.5863 3.89325 10.4397 4.15992 10.533C6.63992 11.3597 9.36659 11.3597 11.8466 10.533C12.1066 10.4463 12.3933 10.5863 12.4799 10.8463C12.5599 11.113 12.4199 11.393 12.1599 11.4797Z" fill="#325DFF"/>
|
||||
</svg>`,
|
||||
upload: `<svg width="36" height="32" viewBox="0 0 36 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<desc>
|
||||
Created with maiwd-zct.
|
||||
</desc>
|
||||
<defs/>
|
||||
<path d="M3.6002 24.3258C3.59361 25.1258 3.91496 25.8955 4.49359 26.4658C5.07221 27.036 5.86072 27.36 6.68568 27.3665H12.4674C12.9136 27.3658 13.3542 27.2705 13.7585 27.0875C14.1628 26.9045 14.521 26.6381 14.8081 26.3069L16.3081 24.5825C16.5952 24.2514 16.9534 23.985 17.3577 23.8019C17.762 23.6189 18.2027 23.5237 18.6488 23.5229H29.8238C30.6487 23.5164 31.4372 23.1924 32.0159 22.6221C32.5945 22.0519 32.9158 21.2822 32.9092 20.4822V3.04073C32.9158 2.24076 32.5945 1.47101 32.0159 0.900776C31.4372 0.330545 30.6487 0.0065318 29.8238 0H6.68568C5.86072 0.0065318 5.07221 0.330545 4.49359 0.900776C3.91496 1.47101 3.59361 2.24076 3.6002 3.04073V24.3258Z" fill="#0059FF" fill-opacity="0.6"/>
|
||||
<path d="M0.000120755 7.68835C-0.00826585 6.62201 0.420494 5.5961 1.19209 4.83629C1.96369 4.07647 3.01493 3.64498 4.11459 3.63672L10.95 3.63672C11.4861 3.6375 12.0167 3.74066 12.5116 3.94032C13.0066 4.13998 13.4561 4.43222 13.8345 4.80036L15.5475 6.45854C15.926 6.82667 16.3755 7.11891 16.8704 7.31857C17.3653 7.51823 17.896 7.62139 18.432 7.62217H31.8854C32.9847 7.63044 34.0356 8.06163 34.8071 8.82097C35.5786 9.58031 36.0077 10.6057 35.9999 11.6716V27.948C36.0041 28.4761 35.9011 28.9998 35.6966 29.4892C35.4921 29.9786 35.1902 30.4242 34.8082 30.8005C34.4261 31.1768 33.9713 31.4765 33.4698 31.6823C32.9684 31.8882 32.43 31.9963 31.8854 32.0004H4.11459C3.01493 31.9921 1.96369 31.5606 1.19209 30.8008C0.420494 30.041 -0.00826585 29.0151 0.000120755 27.9487V7.68835Z" fill="#0059FF"/>
|
||||
<path d="M13.6441 20.2883C13.4483 20.2885 13.2568 20.2329 13.0933 20.1286C12.9297 20.0242 12.8014 19.8756 12.7241 19.7011C12.6468 19.5267 12.624 19.3341 12.6585 19.1472C12.693 18.9604 12.7832 18.7874 12.9181 18.6498L17.4683 13.9996C17.5644 13.9013 17.6801 13.823 17.8084 13.7696C17.9367 13.7161 18.0749 13.6885 18.2146 13.6885C18.3542 13.6885 18.4924 13.7161 18.6207 13.7696C18.749 13.823 18.8647 13.9013 18.9608 13.9996L23.511 18.6491C23.6459 18.7867 23.7362 18.9596 23.7707 19.1465C23.8052 19.3334 23.7824 19.526 23.7051 19.7004C23.6278 19.8748 23.4994 20.0235 23.3359 20.1278C23.1723 20.2322 22.9808 20.2878 22.785 20.2876H20.9701C20.8336 20.2876 20.7027 20.3402 20.6062 20.4337C20.5098 20.5273 20.4556 20.6542 20.4556 20.7865V22.7123C20.4557 22.8433 20.4291 22.9731 20.3775 23.0941C20.3259 23.2152 20.2501 23.3252 20.1547 23.4179C20.0592 23.5105 19.9458 23.584 19.821 23.6342C19.6962 23.6843 19.5624 23.7102 19.4273 23.7102H17.0018C16.7291 23.7102 16.4676 23.6051 16.2748 23.4181C16.0819 23.2311 15.9736 22.9775 15.9736 22.7131V20.7865C15.9736 20.6542 15.9194 20.5273 15.8229 20.4337C15.7264 20.3402 15.5955 20.2876 15.4591 20.2876L13.6441 20.2883Z" fill="white" fill-opacity="0.9"/>
|
||||
</svg>`,
|
||||
address: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M6 11C8.75 11 11 8.75 11 6C11 3.25 8.75 1 6 1C3.25 1 1 3.25 1 6C1 8.75 3.25 11 6 11Z" stroke="#325DFF" stroke-miterlimit="10"/>
|
||||
<path d="M6.75 4.00012C5.235 4.00012 4 5.24012 4 6.75012C4 8.00012 4 8.00012 5.25 8.00012C6.76 8.00012 8 6.76012 8 5.25012C8 3.96225 8 4.00012 6.75 4.00012Z" stroke="#325DFF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>`,
|
||||
details: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M10.6667 1.33398H5.33333C2.66666 1.33398 1.33333 2.66732 1.33333 5.33398V14.0007C1.33333 14.3673 1.63333 14.6673 1.99999 14.6673H10.6667C13.3333 14.6673 14.6667 13.334 14.6667 10.6673V5.33398C14.6667 2.66732 13.3333 1.33398 10.6667 1.33398ZM9.33333 10.1673H4.66666C4.39333 10.1673 4.16666 9.94065 4.16666 9.66732C4.16666 9.39398 4.39333 9.16732 4.66666 9.16732H9.33333C9.60666 9.16732 9.83333 9.39398 9.83333 9.66732C9.83333 9.94065 9.60666 10.1673 9.33333 10.1673ZM11.3333 6.83398H4.66666C4.39333 6.83398 4.16666 6.60732 4.16666 6.33398C4.16666 6.06065 4.39333 5.83398 4.66666 5.83398H11.3333C11.6067 5.83398 11.8333 6.06065 11.8333 6.33398C11.8333 6.60732 11.6067 6.83398 11.3333 6.83398Z" fill="#325DFF"/>
|
||||
</svg>`,
|
||||
auth: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M8.90473 2.745V3.115L7.13473 2.09C6.46473 1.705 5.52973 1.705 4.86473 2.09L3.09473 3.12V2.745C3.09473 1.62 3.70973 1 4.83473 1H7.16473C8.28973 1 8.90473 1.62 8.90473 2.745Z" fill="#325DFF"/>
|
||||
<path d="M8.92 3.98512L8.85 3.95012L8.17 3.56012L6.76 2.74512C6.33 2.49512 5.67 2.49512 5.24 2.74512L3.83 3.55512L3.15 3.95512L3.06 4.00012C2.185 4.59012 2.125 4.70012 2.125 5.64512V7.90512C2.125 8.85012 2.185 8.96012 3.08 9.56512L5.24 10.8101C5.455 10.9401 5.725 10.9951 6 10.9951C6.27 10.9951 6.545 10.9351 6.76 10.8101L8.94 9.55012C9.82 8.96012 9.875 8.85512 9.875 7.90512V5.64512C9.875 4.70012 9.815 4.59012 8.92 3.98512ZM7.395 6.75012L7.09 7.12512C7.04 7.18012 7.005 7.28512 7.01 7.36012L7.04 7.84012C7.06 8.13512 6.85 8.28512 6.575 8.18012L6.13 8.00012C6.06 7.97512 5.945 7.97512 5.875 8.00012L5.43 8.17512C5.155 8.28512 4.945 8.13012 4.965 7.83512L4.995 7.35512C5 7.28012 4.965 7.17512 4.915 7.12012L4.605 6.75012C4.415 6.52512 4.5 6.27512 4.785 6.20012L5.25 6.08012C5.325 6.06012 5.41 5.99012 5.45 5.93012L5.71 5.53012C5.87 5.28012 6.125 5.28012 6.29 5.53012L6.55 5.93012C6.59 5.99512 6.68 6.06012 6.75 6.08012L7.215 6.20012C7.5 6.27512 7.585 6.52512 7.395 6.75012Z" fill="#325DFF"/>
|
||||
</svg>`,
|
||||
rectangle: `<svg xmlns="http://www.w3.org/2000/svg" width="58" height="53" viewBox="0 0 58 53" fill="none">
|
||||
<path d="M34 0H58L24 53H0L34 0Z" fill="url(#paint0_linear_95_16249)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_95_16249" x1="21" y1="0" x2="21" y2="53" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#325DFF" stop-opacity="0.2"/>
|
||||
<stop offset="1" stop-color="#325DFF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>`,
|
||||
search: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<g clip-path="url(#clip0_3907_10643)">
|
||||
<path d="M12.9167 11.6667H12.2583L12.025 11.4417C12.8417 10.4917 13.3333 9.25833 13.3333 7.91667C13.3333 4.925 10.9083 2.5 7.91667 2.5C4.925 2.5 2.5 4.925 2.5 7.91667C2.5 10.9083 4.925 13.3333 7.91667 13.3333C9.25833 13.3333 10.4917 12.8417 11.4417 12.025L11.6667 12.2583V12.9167L15.8333 17.075L17.075 15.8333L12.9167 11.6667ZM7.91667 11.6667C5.84167 11.6667 4.16667 9.99167 4.16667 7.91667C4.16667 5.84167 5.84167 4.16667 7.91667 4.16667C9.99167 4.16667 11.6667 5.84167 11.6667 7.91667C11.6667 9.99167 9.99167 11.6667 7.91667 11.6667Z" fill="#325DFF"/>
|
||||
</g>
|
||||
</svg>`,
|
||||
expand: `<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none">
|
||||
<path d="M8.50001 11.6994C8.03335 11.6994 7.56668 11.5194 7.21335 11.1661L2.86668 6.81944C2.67335 6.62611 2.67335 6.30611 2.86668 6.11277C3.06001 5.91944 3.38001 5.91944 3.57335 6.11277L7.92001 10.4594C8.24001 10.7794 8.76001 10.7794 9.08001 10.4594L13.4267 6.11277C13.62 5.91944 13.94 5.91944 14.1333 6.11277C14.3267 6.30611 14.3267 6.62611 14.1333 6.81944L9.78668 11.1661C9.43335 11.5194 8.96668 11.6994 8.50001 11.6994Z" fill="#325DFF" />
|
||||
</svg>`,
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
svgToUrl(key, color) {
|
||||
var url = svgData[key]
|
||||
var encoded = url
|
||||
.replace(/<!--(.*)-->/g, "")
|
||||
.replace(/[\r\n]/g, " ")
|
||||
.replace(/"/g, `'`)
|
||||
.replace(/%/g, "%25")
|
||||
.replace(/&/g, "%26")
|
||||
.replace(/#/g, "%23")
|
||||
.replace(/{/g, "%7B")
|
||||
.replace(/}/g, "%7D")
|
||||
.replace(/</g, "%3C")
|
||||
.replace(/>/g, "%3E")
|
||||
let res = '"' + `data:image/svg+xml,${encoded}` + '"';
|
||||
if (color) {
|
||||
res = res.replaceAll("%23325DFF", color.replace("#", "%23"))
|
||||
}
|
||||
return res
|
||||
},
|
||||
}
|
||||
2206
uniapp/小程序代码/common/tools.js
Normal file
2206
uniapp/小程序代码/common/tools.js
Normal file
File diff suppressed because it is too large
Load Diff
38
uniapp/小程序代码/components/u-alert-tips/theme.scss
Normal file
38
uniapp/小程序代码/components/u-alert-tips/theme.scss
Normal file
@@ -0,0 +1,38 @@
|
||||
// 此文件为uView的主题变量，这些变量目前只能通过uni.scss引入才有效，另外由于
|
||||
// uni.scss中引入的样式会同时混入到全局样式文件和单独每一个页面的样式中，造成微信程序包太大，
|
||||
// 故uni.scss只建议放scss变量名相关样式，其他的样式可以通过main.js或者App.vue引入
|
||||
|
||||
$u-main-color: #303133;
|
||||
$u-content-color: #606266;
|
||||
$u-tips-color: #909399;
|
||||
$u-light-color: #c0c4cc;
|
||||
$u-border-color: #e4e7ed;
|
||||
$u-bg-color: #f3f4f6;
|
||||
|
||||
$u-type-primary: #2979ff;
|
||||
$u-type-primary-light: #ecf5ff;
|
||||
$u-type-primary-disabled: #a0cfff;
|
||||
$u-type-primary-dark: #2b85e4;
|
||||
|
||||
$u-type-warning: #ff9900;
|
||||
$u-type-warning-disabled: #fcbd71;
|
||||
$u-type-warning-dark: #f29100;
|
||||
$u-type-warning-light: #fdf6ec;
|
||||
|
||||
$u-type-success: #19be6b;
|
||||
$u-type-success-disabled: #71d5a1;
|
||||
$u-type-success-dark: #18b566;
|
||||
$u-type-success-light: #dbf1e1;
|
||||
|
||||
$u-type-error: #fa3534;
|
||||
$u-type-error-disabled: #fab6b6;
|
||||
$u-type-error-dark: #dd6161;
|
||||
$u-type-error-light: #fef0f0;
|
||||
|
||||
$u-type-info: #909399;
|
||||
$u-type-info-disabled: #c8c9cc;
|
||||
$u-type-info-dark: #82848a;
|
||||
$u-type-info-light: #f4f4f5;
|
||||
|
||||
$u-form-item-height: 70rpx;
|
||||
$u-form-item-border-color: #dcdfe6;
|
||||
341
uniapp/小程序代码/components/u-alert-tips/u-alert-tips.vue
Normal file
341
uniapp/小程序代码/components/u-alert-tips/u-alert-tips.vue
Normal file
@@ -0,0 +1,341 @@
|
||||
<template>
|
||||
<view class="u-alert-tips" v-if="show" :class="[
|
||||
!show ? 'u-close-alert-tips': '',
|
||||
type ? 'u-alert-tips--bg--' + type + '-light' : '',
|
||||
type ? 'u-alert-tips--border--' + type + '-disabled' : '',
|
||||
]" :style="{
|
||||
backgroundColor: bgColor,
|
||||
borderColor: borderColor
|
||||
}">
|
||||
<view class="u-icon-wrap">
|
||||
<u-icon v-if="showIcon" :name="uIcon + '-fill'" :size="description ? 56 : 40" class="u-icon" :color="uIconType" :custom-style="iconStyle"></u-icon>
|
||||
</view>
|
||||
<view class="u-alert-content" @tap.stop="click">
|
||||
<view class="u-alert-title" :class="'u-alert-tips--color--' + type" :style="[uTitleStyle]">
|
||||
{{title}}
|
||||
</view>
|
||||
<view v-if="description" class="u-alert-desc" :class="'u-alert-tips--color--' + type" :style="[descStyle]">
|
||||
{{description}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-icon-wrap">
|
||||
<u-icon @click="close" v-if="closeAble && !closeText" hoverClass="u-type-error-hover-color" name="close" color="#c0c4cc"
|
||||
:size="22" class="u-close-icon" :style="{
|
||||
top: description ? '18rpx' : '24rpx'
|
||||
}"></u-icon>
|
||||
</view>
|
||||
<text v-if="closeAble && closeText" class="u-close-text" :style="{
|
||||
top: description ? '18rpx' : '24rpx'
|
||||
}">{{closeText}}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* alertTips 警告提示
|
||||
* @description 警告提示，展现需要关注的信息
|
||||
* @tutorial https://uviewui.com/components/alertTips.html
|
||||
* @property {String} title 显示的标题文字
|
||||
* @property {String} description 辅助性文字，颜色比title浅一点，字号也小一点，可选
|
||||
* @property {String} type 关闭按钮(默认为叉号icon图标)
|
||||
* @property {String} icon 图标名称
|
||||
* @property {Object} icon-style 图标的样式，对象形式
|
||||
* @property {Object} title-style 标题的样式，对象形式
|
||||
* @property {Object} desc-style 描述的样式，对象形式
|
||||
* @property {String} close-able 用文字替代关闭图标，close-able为true时有效
|
||||
* @property {Boolean} show-icon 是否显示左边的辅助图标
|
||||
* @property {Boolean} show 显示或隐藏组件
|
||||
* @event {Function} click 点击组件时触发
|
||||
* @event {Function} close 点击关闭按钮时触发
|
||||
*/
|
||||
export default {
|
||||
name: 'u-alert-tips',
|
||||
props: {
|
||||
// 显示文字
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 主题，success/warning/info/error
|
||||
type: {
|
||||
type: String,
|
||||
default: 'warning'
|
||||
},
|
||||
// 辅助性文字
|
||||
description: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 是否可关闭
|
||||
closeAble: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 关闭按钮自定义文本
|
||||
closeText: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 是否显示图标
|
||||
showIcon: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 文字颜色，如果定义了color值，icon会失效
|
||||
color: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 背景颜色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 边框颜色
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 是否显示
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 左边显示的icon
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// icon的样式
|
||||
iconStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 标题的样式
|
||||
titleStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 描述文字的样式
|
||||
descStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
uTitleStyle() {
|
||||
let style = {};
|
||||
// 如果有描述文字的话，标题进行加粗
|
||||
style.fontWeight = this.description ? 'bold' : 'normal';
|
||||
// 将用户传入样式对象和style合并，传入的优先级比style高，同属性会被覆盖
|
||||
return this.deepMerge(style, this.titleStyle);
|
||||
},
|
||||
uIcon() {
|
||||
// 如果有设置icon名称就使用，否则根据type主题，推定一个默认的图标
|
||||
return this.icon ? this.icon : this.type2icon(this.type);
|
||||
},
|
||||
uIconType() {
|
||||
// 如果有设置图标的样式，优先使用，没有的话，则用type的样式
|
||||
return Object.keys(this.iconStyle).length ? '' : this.type;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
deepMerge(target, source) {
|
||||
if (source) {
|
||||
for (var s in source) {
|
||||
if (source.hasOwnProperty(s)) {
|
||||
var value = source[s];
|
||||
|
||||
if (typeof value === 'object' && typeof target[s] === 'object') {
|
||||
target[s] = this._extends({}, target[s], {}, value);
|
||||
} else {
|
||||
target[s] = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return target;
|
||||
},
|
||||
type2icon(type = 'success', fill = false) {
|
||||
// 如果非预置值,默认为success
|
||||
if (['primary', 'info', 'error', 'warning', 'success'].indexOf(type) == -1) type = 'success';
|
||||
let iconName = '';
|
||||
// 目前(2019-12-12),info和primary使用同一个图标
|
||||
switch (type) {
|
||||
case 'primary':
|
||||
iconName = 'info-circle';
|
||||
break;
|
||||
case 'info':
|
||||
iconName = 'info-circle';
|
||||
break;
|
||||
case 'error':
|
||||
iconName = 'close-circle';
|
||||
break;
|
||||
case 'warning':
|
||||
iconName = 'error-circle';
|
||||
break;
|
||||
case 'success':
|
||||
iconName = 'checkmark-circle';
|
||||
break;
|
||||
default:
|
||||
iconName = 'checkmark-circle';
|
||||
}
|
||||
// 是否是实体类型,加上-fill,在icon组件库中,实体的类名是后面加-fill的
|
||||
if (fill) iconName += '-fill';
|
||||
return iconName;
|
||||
},
|
||||
_extends() {
|
||||
_extends = Object.assign || function(target) {
|
||||
for (var i = 1; i < arguments.length; i++) {
|
||||
var source = arguments[i];
|
||||
|
||||
for (var key in source) {
|
||||
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
||||
target[key] = source[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return target;
|
||||
};
|
||||
|
||||
return _extends.apply(this, arguments);
|
||||
},
|
||||
// 点击内容
|
||||
click() {
|
||||
this.$emit('click');
|
||||
},
|
||||
// 点击关闭按钮
|
||||
close() {
|
||||
this.$emit('close');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './theme.scss';
|
||||
|
||||
.u-alert-tips {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
padding: 16rpx 30rpx;
|
||||
border-radius: 8rpx;
|
||||
position: relative;
|
||||
transition: all 0.3s linear;
|
||||
border: 1px solid #fff;
|
||||
|
||||
&--bg--primary-light {
|
||||
background-color: $u-type-primary-light;
|
||||
}
|
||||
|
||||
&--bg--info-light {
|
||||
background-color: $u-type-info-light;
|
||||
}
|
||||
|
||||
&--bg--success-light {
|
||||
background-color: $u-type-success-light;
|
||||
}
|
||||
|
||||
&--bg--warning-light {
|
||||
background-color: $u-type-warning-light;
|
||||
}
|
||||
|
||||
&--bg--error-light {
|
||||
background-color: $u-type-error-light;
|
||||
}
|
||||
|
||||
&--color--primary {
|
||||
color: $u-type-primary !important;
|
||||
}
|
||||
|
||||
&--color--info {
|
||||
color: $u-type-info !important;
|
||||
}
|
||||
|
||||
&--color--success {
|
||||
color: $u-type-success !important;
|
||||
}
|
||||
|
||||
&--color--warning {
|
||||
color: $u-type-warning !important;
|
||||
}
|
||||
|
||||
&--color--error {
|
||||
color: $u-type-error !important;
|
||||
}
|
||||
|
||||
&--border--primary-disabled {
|
||||
border-color: $u-type-primary-disabled;
|
||||
}
|
||||
|
||||
&--border--success-disabled {
|
||||
border-color: $u-type-success-disabled;
|
||||
}
|
||||
|
||||
&--border--error-disabled {
|
||||
border-color: $u-type-error-disabled;
|
||||
}
|
||||
|
||||
&--border--warning-disabled {
|
||||
border-color: $u-type-warning-disabled;
|
||||
}
|
||||
|
||||
&--border--info-disabled {
|
||||
border-color: $u-type-info-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
.u-close-alert-tips {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.u-icon {
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.u-alert-title {
|
||||
font-size: 28rpx;
|
||||
color: $u-main-color;
|
||||
}
|
||||
|
||||
.u-alert-desc {
|
||||
font-size: 24rpx;
|
||||
text-align: left;
|
||||
color: $u-content-color;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.u-close-icon {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 20rpx;
|
||||
}
|
||||
|
||||
.u-close-hover {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.u-close-text {
|
||||
font-size: 24rpx;
|
||||
color: $u-tips-color;
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 20rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
910
uniapp/小程序代码/components/u-icon/iconfont.css
Normal file
910
uniapp/小程序代码/components/u-icon/iconfont.css
Normal file
File diff suppressed because one or more lines are too long
38
uniapp/小程序代码/components/u-icon/theme.scss
Normal file
38
uniapp/小程序代码/components/u-icon/theme.scss
Normal file
@@ -0,0 +1,38 @@
|
||||
// 此文件为uView的主题变量，这些变量目前只能通过uni.scss引入才有效，另外由于
|
||||
// uni.scss中引入的样式会同时混入到全局样式文件和单独每一个页面的样式中，造成微信程序包太大，
|
||||
// 故uni.scss只建议放scss变量名相关样式，其他的样式可以通过main.js或者App.vue引入
|
||||
|
||||
$u-main-color: #303133;
|
||||
$u-content-color: #606266;
|
||||
$u-tips-color: #909399;
|
||||
$u-light-color: #c0c4cc;
|
||||
$u-border-color: #e4e7ed;
|
||||
$u-bg-color: #f3f4f6;
|
||||
|
||||
$u-type-primary: #2979ff;
|
||||
$u-type-primary-light: #ecf5ff;
|
||||
$u-type-primary-disabled: #a0cfff;
|
||||
$u-type-primary-dark: #2b85e4;
|
||||
|
||||
$u-type-warning: #ff9900;
|
||||
$u-type-warning-disabled: #fcbd71;
|
||||
$u-type-warning-dark: #f29100;
|
||||
$u-type-warning-light: #fdf6ec;
|
||||
|
||||
$u-type-success: #19be6b;
|
||||
$u-type-success-disabled: #71d5a1;
|
||||
$u-type-success-dark: #18b566;
|
||||
$u-type-success-light: #dbf1e1;
|
||||
|
||||
$u-type-error: #fa3534;
|
||||
$u-type-error-disabled: #fab6b6;
|
||||
$u-type-error-dark: #dd6161;
|
||||
$u-type-error-light: #fef0f0;
|
||||
|
||||
$u-type-info: #909399;
|
||||
$u-type-info-disabled: #c8c9cc;
|
||||
$u-type-info-dark: #82848a;
|
||||
$u-type-info-light: #f4f4f5;
|
||||
|
||||
$u-form-item-height: 70rpx;
|
||||
$u-form-item-border-color: #dcdfe6;
|
||||
351
uniapp/小程序代码/components/u-icon/u-icon.vue
Normal file
351
uniapp/小程序代码/components/u-icon/u-icon.vue
Normal file
@@ -0,0 +1,351 @@
|
||||
<template>
|
||||
<view :style="[customStyle]" class="u-icon" @tap="click" :class="['u-icon--' + labelPos]">
|
||||
<image class="u-icon__img" v-if="isImg" :src="name" :mode="imgMode" :style="[imgStyle]"></image>
|
||||
<text v-else class="u-icon__icon" :class="customClass" :style="[iconStyle]" :hover-class="hoverClass"
|
||||
@touchstart="touchstart">
|
||||
<text v-if="showDecimalIcon" :style="[decimalIconStyle]" :class="decimalIconClass" :hover-class="hoverClass"
|
||||
class="u-icon__decimal">
|
||||
</text>
|
||||
</text>
|
||||
<!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
|
||||
<text v-if="label !== ''" class="u-icon__label" :style="{
|
||||
color: labelColor,
|
||||
fontSize: $u.addUnit(labelSize),
|
||||
marginLeft: labelPos == 'right' ? $u.addUnit(marginLeft) : 0,
|
||||
marginTop: labelPos == 'bottom' ? $u.addUnit(marginTop) : 0,
|
||||
marginRight: labelPos == 'left' ? $u.addUnit(marginRight) : 0,
|
||||
marginBottom: labelPos == 'top' ? $u.addUnit(marginBottom) : 0,
|
||||
}">{{ label }}
|
||||
</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* icon 图标
|
||||
* @description 基于字体的图标集，包含了大多数常见场景的图标。
|
||||
* @tutorial https://www.uviewui.com/components/icon.html
|
||||
* @property {String} name 图标名称，见示例图标集
|
||||
* @property {String} color 图标颜色（默认inherit）
|
||||
* @property {String | Number} size 图标字体大小，单位rpx（默认32）
|
||||
* @property {String | Number} label-size label字体大小，单位rpx（默认28）
|
||||
* @property {String} label 图标右侧的label文字（默认28）
|
||||
* @property {String} label-pos label文字相对于图标的位置，只能right或bottom（默认right）
|
||||
* @property {String} label-color label字体颜色（默认#606266）
|
||||
* @property {Object} custom-style icon的样式，对象形式
|
||||
* @property {String} custom-prefix 自定义字体图标库时，需要写上此值
|
||||
* @property {String | Number} margin-left label在右侧时与图标的距离，单位rpx（默认6）
|
||||
* @property {String | Number} margin-top label在下方时与图标的距离，单位rpx（默认6）
|
||||
* @property {String | Number} margin-bottom label在上方时与图标的距离，单位rpx（默认6）
|
||||
* @property {String | Number} margin-right label在左侧时与图标的距离，单位rpx（默认6）
|
||||
* @property {String} label-pos label相对于图标的位置，只能right或bottom（默认right）
|
||||
* @property {String} index 一个用于区分多个图标的值，点击图标时通过click事件传出
|
||||
* @property {String} hover-class 图标按下去的样式类，用法同uni的view组件的hover-class参数，详情见官网
|
||||
* @property {String} width 显示图片小图标时的宽度
|
||||
* @property {String} height 显示图片小图标时的高度
|
||||
* @property {String} top 图标在垂直方向上的定位
|
||||
* @property {String} top 图标在垂直方向上的定位
|
||||
* @property {String} top 图标在垂直方向上的定位
|
||||
* @property {Boolean} show-decimal-icon 是否为DecimalIcon
|
||||
* @property {String} inactive-color 背景颜色，可接受主题色，仅Decimal时有效
|
||||
* @property {String | Number} percent 显示的百分比，仅Decimal时有效
|
||||
* @event {Function} click 点击图标时触发
|
||||
* @example <u-icon name="photo" color="#2979ff" size="28"></u-icon>
|
||||
*/
|
||||
|
||||
var config_type=[
|
||||
'primary',
|
||||
'success',
|
||||
'info',
|
||||
'error',
|
||||
'warning'
|
||||
]
|
||||
export default {
|
||||
name: 'u-icon',
|
||||
props: {
|
||||
// 图标类名
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 图标颜色，可接受主题色
|
||||
color: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 字体大小，单位rpx
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 'inherit'
|
||||
},
|
||||
// 是否显示粗体
|
||||
bold: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
|
||||
index: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
// 触摸图标时的类名
|
||||
hoverClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 自定义扩展前缀，方便用户扩展自己的图标库
|
||||
customPrefix: {
|
||||
type: String,
|
||||
default: 'uicon'
|
||||
},
|
||||
// 图标右边或者下面的文字
|
||||
label: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
// label的位置，只能右边或者下边
|
||||
labelPos: {
|
||||
type: String,
|
||||
default: 'right'
|
||||
},
|
||||
// label的大小
|
||||
labelSize: {
|
||||
type: [String, Number],
|
||||
default: '28'
|
||||
},
|
||||
// label的颜色
|
||||
labelColor: {
|
||||
type: String,
|
||||
default: '#606266'
|
||||
},
|
||||
// label与图标的距离(横向排列)
|
||||
marginLeft: {
|
||||
type: [String, Number],
|
||||
default: '6'
|
||||
},
|
||||
// label与图标的距离(竖向排列)
|
||||
marginTop: {
|
||||
type: [String, Number],
|
||||
default: '6'
|
||||
},
|
||||
// label与图标的距离(竖向排列)
|
||||
marginRight: {
|
||||
type: [String, Number],
|
||||
default: '6'
|
||||
},
|
||||
// label与图标的距离(竖向排列)
|
||||
marginBottom: {
|
||||
type: [String, Number],
|
||||
default: '6'
|
||||
},
|
||||
// 图片的mode
|
||||
imgMode: {
|
||||
type: String,
|
||||
default: 'widthFix'
|
||||
},
|
||||
// 自定义样式
|
||||
customStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 用于显示图片小图标时，图片的宽度
|
||||
width: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
// 用于显示图片小图标时，图片的高度
|
||||
height: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
// 用于解决某些情况下，让图标垂直居中的用途
|
||||
top: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// 是否为DecimalIcon
|
||||
showDecimalIcon: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 背景颜色，可接受主题色，仅Decimal时有效
|
||||
inactiveColor: {
|
||||
type: String,
|
||||
default: '#ececec'
|
||||
},
|
||||
// 显示的百分比，仅Decimal时有效
|
||||
percent: {
|
||||
type: [Number, String],
|
||||
default: '50'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
customClass() {
|
||||
let classes = []
|
||||
classes.push(this.customPrefix + '-' + this.name)
|
||||
// uView的自定义图标类名为u-iconfont
|
||||
if (this.customPrefix == 'uicon') {
|
||||
classes.push('u-iconfont')
|
||||
} else {
|
||||
classes.push(this.customPrefix)
|
||||
}
|
||||
// 主题色，通过类配置
|
||||
if (this.showDecimalIcon && this.inactiveColor && config_type.includes(this.inactiveColor)) {
|
||||
classes.push('u-icon__icon--' + this.inactiveColor)
|
||||
} else if (this.color && config_type.includes(this.color)) classes.push('u-icon__icon--' + this.color)
|
||||
// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
|
||||
// 故需将其拆成一个字符串的形式，通过空格隔开各个类名
|
||||
//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
|
||||
classes = classes.join(' ')
|
||||
//#endif
|
||||
return classes
|
||||
},
|
||||
iconStyle() {
|
||||
let style = {}
|
||||
style = {
|
||||
fontSize: this.size == 'inherit' ? 'inherit' : this.addUnit(this.size),
|
||||
fontWeight: this.bold ? 'bold' : 'normal',
|
||||
// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
|
||||
top: this.addUnit(this.top)
|
||||
}
|
||||
// 非主题色值时，才当作颜色值
|
||||
if (this.showDecimalIcon && this.inactiveColor && !config_type.includes(this.inactiveColor)) {
|
||||
style.color = this.inactiveColor
|
||||
} else if (this.color && !config_type.includes(this.color)) style.color = this.color
|
||||
|
||||
return style
|
||||
},
|
||||
// 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
|
||||
isImg() {
|
||||
return this.name.indexOf('/') !== -1
|
||||
},
|
||||
|
||||
imgStyle() {
|
||||
let style = {}
|
||||
// 如果设置width和height属性，则优先使用，否则使用size属性
|
||||
style.width = this.width ? this.addUnit(this.width) : this.addUnit(this.size)
|
||||
style.height = this.height ? this.addUnit(this.height) : this.addUnit(this.size)
|
||||
return style
|
||||
},
|
||||
decimalIconStyle() {
|
||||
let style = {}
|
||||
style = {
|
||||
fontSize: this.size == 'inherit' ? 'inherit' : this.addUnit(this.size),
|
||||
fontWeight: this.bold ? 'bold' : 'normal',
|
||||
// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
|
||||
top: this.addUnit(this.top),
|
||||
width: this.percent + '%'
|
||||
}
|
||||
// 非主题色值时，才当作颜色值
|
||||
if (this.color && !config_type.includes(this.color)) style.color = this.color
|
||||
return style
|
||||
},
|
||||
decimalIconClass() {
|
||||
let classes = []
|
||||
classes.push(this.customPrefix + '-' + this.name)
|
||||
// uView的自定义图标类名为u-iconfont
|
||||
if (this.customPrefix == 'uicon') {
|
||||
classes.push('u-iconfont')
|
||||
} else {
|
||||
classes.push(this.customPrefix)
|
||||
}
|
||||
// 主题色，通过类配置
|
||||
if (this.color && config_type.includes(this.color)) classes.push('u-icon__icon--' + this.color)
|
||||
else classes.push('u-icon__icon--primary')
|
||||
// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
|
||||
// 故需将其拆成一个字符串的形式，通过空格隔开各个类名
|
||||
//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
|
||||
classes = classes.join(' ')
|
||||
//#endif
|
||||
return classes
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addUnit(value = 'auto', unit = 'rpx'){
|
||||
value = String(value);
|
||||
// 用uView内置验证规则中的number判断是否为数值
|
||||
return (/^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value)) ? `${value}${unit}` : value;
|
||||
},
|
||||
click() {
|
||||
this.$emit('click', this.index)
|
||||
},
|
||||
touchstart() {
|
||||
this.$emit('touchstart', this.index)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './theme.scss';
|
||||
@import './iconfont.css';
|
||||
|
||||
|
||||
.u-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
&--left {
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&--right {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&--top {
|
||||
flex-direction: column-reverse;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&--bottom {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
position: relative;
|
||||
|
||||
&--primary {
|
||||
color: $u-type-primary;
|
||||
}
|
||||
|
||||
&--success {
|
||||
color: $u-type-success;
|
||||
}
|
||||
|
||||
&--error {
|
||||
color: $u-type-error;
|
||||
}
|
||||
|
||||
&--warning {
|
||||
color: $u-type-warning;
|
||||
}
|
||||
|
||||
&--info {
|
||||
color: $u-type-info;
|
||||
}
|
||||
}
|
||||
|
||||
&__decimal {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__img {
|
||||
height: auto;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
&__label {
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<view class="u-time-axis-item">
|
||||
<slot name="content" />
|
||||
<view class="u-time-axis-node">
|
||||
<slot name="node">
|
||||
<view class="u-dot" :style="[nodeStyle]">
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* timeLineItem 时间轴Item
|
||||
* @description 时间轴组件一般用于物流信息展示，各种跟时间相关的记录等场景。(搭配u-time-line使用)
|
||||
* @tutorial https://www.uviewui.com/components/timeLine.html
|
||||
* @property {String} bg-color 左边节点的背景颜色，一般通过slot内容自定义背景颜色即可（默认#ffffff）
|
||||
* @property {String Number} node-top 节点左边图标绝对定位的top值，单位rpx
|
||||
* @example <u-time-line-item node-top="2">...</u-time-line-item>
|
||||
*/
|
||||
export default {
|
||||
name: "u-time-line-item",
|
||||
props: {
|
||||
// 节点的背景颜色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: "#ffffff"
|
||||
},
|
||||
// 节点左边图标绝对定位的top值
|
||||
nodeTop: {
|
||||
type: [String, Number],
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
nodeStyle() {
|
||||
let style = {
|
||||
backgroundColor: this.bgColor,
|
||||
};
|
||||
if (this.nodeTop != "") style.top = this.nodeTop + 'rpx';
|
||||
return style;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.u-time-axis-item {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
// flex-direction: $direction;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.u-time-axis-node {
|
||||
position: absolute;
|
||||
top: 12rpx;
|
||||
left: -40rpx;
|
||||
transform-origin: 0;
|
||||
transform: translateX(-50%);
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
// flex-direction: $direction;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.u-dot {
|
||||
height: 16rpx;
|
||||
width: 16rpx;
|
||||
border-radius: 100rpx;
|
||||
background: #ddd;
|
||||
}
|
||||
</style>
|
||||
36
uniapp/小程序代码/components/u-time-line/u-time-line.vue
Normal file
36
uniapp/小程序代码/components/u-time-line/u-time-line.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<view class="u-time-axis">
|
||||
<slot />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "u-time-line",
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.u-time-axis {
|
||||
padding-left: 40rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.u-time-axis::before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 12rpx;
|
||||
width: 1px;
|
||||
bottom: 0;
|
||||
border-left: 1px solid #ddd;
|
||||
transform-origin: 0 0;
|
||||
transform: scaleX(0.5);
|
||||
}
|
||||
</style>
|
||||
30
uniapp/小程序代码/index.html
Normal file
30
uniapp/小程序代码/index.html
Normal file
@@ -0,0 +1,30 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<script>
|
||||
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
|
||||
CSS.supports('top: constant(a)'))
|
||||
document.write(
|
||||
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
|
||||
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
|
||||
</script>
|
||||
<title></title>
|
||||
<!--preload-links-->
|
||||
<!--app-context-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><!--app-html--></div>
|
||||
<script type="module" src="/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
37
uniapp/小程序代码/main.js
Normal file
37
uniapp/小程序代码/main.js
Normal file
@@ -0,0 +1,37 @@
|
||||
// +----------------------------------------------------------------------
|
||||
// | 麦沃德科技赋能开发者，助力商协会发展
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
// +----------------------------------------------------------------------
|
||||
|
||||
import App from './App'
|
||||
|
||||
import Vue from 'vue'
|
||||
import store from './store'
|
||||
import './uni.promisify.adaptor'
|
||||
import tools from './common/tools.js'
|
||||
import titleBar from '@/pages/component/title-bar/title-bar.vue'
|
||||
import tabBar from '@/pages/component/tab-bar/tab-bar.vue'
|
||||
import empty from '@/pages/component/empty/empty.vue'
|
||||
Vue.component("title-bar", titleBar)
|
||||
Vue.component("tab-bar", tabBar)
|
||||
Vue.component("empty", empty)
|
||||
// #ifdef H5
|
||||
Vue.config.ignoredElements.push('wx-open-launch-weapp')
|
||||
// #endif
|
||||
Vue.prototype.$store = store
|
||||
Vue.prototype.$util = tools
|
||||
Vue.prototype.$onLaunched = new Promise(resolve => {
|
||||
Vue.prototype.$isResolve = resolve
|
||||
})
|
||||
Vue.config.productionTip = false
|
||||
App.mpType = 'app'
|
||||
const app = new Vue({
|
||||
...App,
|
||||
store
|
||||
})
|
||||
app.$mount()
|
||||
100
uniapp/小程序代码/manifest.json
Normal file
100
uniapp/小程序代码/manifest.json
Normal file
@@ -0,0 +1,100 @@
|
||||
|
||||
// +----------------------------------------------------------------------
|
||||
// | 麦沃德科技赋能开发者，助力商协会发展
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
// +----------------------------------------------------------------------
|
||||
{
|
||||
"name" : "商协会",
|
||||
"appid" : "",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.0",
|
||||
"versionCode" : "100",
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
"usingComponents" : true,
|
||||
"nvueStyleCompiler" : "uni-app",
|
||||
"compilerVersion" : 3,
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : true,
|
||||
"waiting" : true,
|
||||
"autoclose" : true,
|
||||
"delay" : 0
|
||||
},
|
||||
/* 模块配置 */
|
||||
"modules" : {},
|
||||
/* 应用发布信息 */
|
||||
"distribute" : {
|
||||
/* android打包配置 */
|
||||
"android" : {
|
||||
"permissions" : [
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
]
|
||||
},
|
||||
/* ios打包配置 */
|
||||
"ios" : {},
|
||||
/* SDK配置 */
|
||||
"sdkConfigs" : {}
|
||||
}
|
||||
},
|
||||
/* 快应用特有相关 */
|
||||
"quickapp" : {},
|
||||
/* 小程序特有相关 */
|
||||
"mp-weixin" : {
|
||||
"appid" : "",
|
||||
"setting" : {
|
||||
"urlCheck" : false
|
||||
},
|
||||
"usingComponents" : true,
|
||||
"requiredPrivateInfos" : [ "chooseLocation", "getLocation" ],
|
||||
"permission" : {
|
||||
"scope.userLocation" : {
|
||||
"desc" : "为了完善个人信息，小程序将获取您的位置"
|
||||
}
|
||||
}
|
||||
},
|
||||
"mp-alipay" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-baidu" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-toutiao" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"uniStatistics" : {
|
||||
"enable" : false
|
||||
},
|
||||
"vueVersion" : "2",
|
||||
"h5" : {
|
||||
"router" : {
|
||||
"mode" : "hash",
|
||||
"base" : "./"
|
||||
},
|
||||
"sdkConfigs" : {
|
||||
"maps" : {}
|
||||
},
|
||||
"unipush" : {
|
||||
"enable" : false
|
||||
}
|
||||
}
|
||||
}
|
||||
17
uniapp/小程序代码/package-lock.json
generated
Normal file
17
uniapp/小程序代码/package-lock.json
generated
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"name": "商协会-高级版",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"dependencies": {
|
||||
"weixin-js-sdk": "^1.6.5"
|
||||
}
|
||||
},
|
||||
"node_modules/weixin-js-sdk": {
|
||||
"version": "1.6.5",
|
||||
"resolved": "https://registry.npmjs.org/weixin-js-sdk/-/weixin-js-sdk-1.6.5.tgz",
|
||||
"integrity": "sha512-Gph1WAWB2YN/lMOFB/ymb+hbU/wYazzJgu6PMMktCy9cSCeW5wA6Zwt0dpahJbJ+RJEwtTv2x9iIu0U4enuVSQ=="
|
||||
}
|
||||
}
|
||||
}
|
||||
5
uniapp/小程序代码/package.json
Normal file
5
uniapp/小程序代码/package.json
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"weixin-js-sdk": "^1.6.5"
|
||||
}
|
||||
}
|
||||
791
uniapp/小程序代码/pages.json
Normal file
791
uniapp/小程序代码/pages.json
Normal file
@@ -0,0 +1,791 @@
|
||||
// +----------------------------------------------------------------------
|
||||
// | 麦沃德科技赋能开发者，助力商协会发展
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
// +----------------------------------------------------------------------
|
||||
|
||||
{
|
||||
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/member/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "会员风采",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mall/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商城"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/demand/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "供需",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/login/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "登录"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/webview/webview",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "default"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/webview/imageText",
|
||||
"style": {
|
||||
"navigationBarTitleText": "详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/settings/system",
|
||||
"style": {
|
||||
"navigationBarTitleText": "系统设置"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/problem/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "常见问题",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/problem/details",
|
||||
"style": {
|
||||
"navigationBarTitleText": "常见问题"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/notice/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "消息通知",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/notice/details",
|
||||
"style": {
|
||||
"navigationBarTitleText": "通知详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/settings/user",
|
||||
"style": {
|
||||
"navigationBarTitleText": "修改信息"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/settings/agreement",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/subscribe/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "消息订阅",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/association",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/article/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "平台动态",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/article/details",
|
||||
"style": {
|
||||
"navigationBarTitleText": "平台动态"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/member/search/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "会员搜索"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/member/search/result",
|
||||
"style": {
|
||||
"navigationBarTitleText": "搜索结果"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/member/details",
|
||||
"style": {
|
||||
"navigationBarTitleText": "会员详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/member/industry",
|
||||
"style": {
|
||||
"navigationBarTitleText": "会员风采"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/member/units",
|
||||
"style": {
|
||||
"navigationBarTitleText": "会员单位"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/member/enterprise",
|
||||
"style": {
|
||||
"navigationBarTitleText": "会员企业"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/member/organization",
|
||||
"style": {
|
||||
"navigationBarTitleText": "会员团体"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/member/apply/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "申请入会"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/member/apply/enterprise",
|
||||
"style": {
|
||||
"navigationBarTitleText": "申请入会"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/member/apply/editor",
|
||||
"style": {
|
||||
"navigationBarTitleText": "编辑内容"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/member/apply/success",
|
||||
"style": {
|
||||
"navigationBarTitleText": "提交成功"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/member/fees/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "会费缴纳"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/member/fees/pay",
|
||||
"style": {
|
||||
"navigationBarTitleText": "会费缴纳"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/member/fees/success",
|
||||
"style": {
|
||||
"navigationBarTitleText": "提交成功"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/member/information",
|
||||
"style": {
|
||||
"navigationBarTitleText": "编辑资料"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/member/product/edit",
|
||||
"style": {
|
||||
"navigationBarTitleText": "产品维护"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/member/product/success",
|
||||
"style": {
|
||||
"navigationBarTitleText": "提交成功"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/member/product/editor",
|
||||
"style": {
|
||||
"navigationBarTitleText": "介绍内容"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/member/product/details",
|
||||
"style": {
|
||||
"navigationBarTitleText": "产品详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/demand/search/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "供需搜索"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/demand/search/result",
|
||||
"style": {
|
||||
"navigationBarTitleText": "搜索结果"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/diy/index",
|
||||
"style": {
|
||||
// #ifdef MP-WEIXIN
|
||||
"enablePullDownRefresh": true,
|
||||
// #endif
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/diy/richText",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/diy/search",
|
||||
"style": {
|
||||
"navigationBarTitleText": "搜索结果"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/error/error",
|
||||
"style": {
|
||||
"navigationBarTitleText": "系统维护"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/error/browser",
|
||||
"style": {
|
||||
"navigationBarTitleText": "系统错误"
|
||||
}
|
||||
}
|
||||
],
|
||||
"subPackages": [{
|
||||
"root": "pagesMall",
|
||||
"pages": [{
|
||||
"path": "goods/details",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商品详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "goods/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "goods/order",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单确认"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "address/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "地址管理"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "address/add",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "order/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的订单",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "order/details",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "order/payment",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单支付"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "order/success",
|
||||
"style": {
|
||||
"navigationBarTitleText": "支付成功"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "refund/apply",
|
||||
"style": {
|
||||
"navigationBarTitleText": "申请退款"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "refund/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "退款列表",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "refund/details",
|
||||
"style": {
|
||||
"navigationBarTitleText": "退款详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "refund/goods",
|
||||
"style": {
|
||||
"navigationBarTitleText": "填写信息"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "refund/success",
|
||||
"style": {
|
||||
"navigationBarTitleText": "提交成功"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "cart/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "购物车",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pagesDemand",
|
||||
"pages": [{
|
||||
"path": "demand/details",
|
||||
"style": {
|
||||
"navigationBarTitleText": "供需详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "demand/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的发布",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "demand/publish",
|
||||
"style": {
|
||||
"navigationBarTitleText": "供需详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "demand/add",
|
||||
"style": {
|
||||
"navigationBarTitleText": "发布供需"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "demand/edit",
|
||||
"style": {
|
||||
"navigationBarTitleText": "发布供需"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pagesTools",
|
||||
"pages": [{
|
||||
"path": "certificate/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "证书查询"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "certificate/result",
|
||||
"style": {
|
||||
"navigationBarTitleText": "查询结果"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "album/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "album/details",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "phoneBook/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "通讯录",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "sequence/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "活动接龙",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "sequence/details",
|
||||
"style": {
|
||||
"navigationBarTitleText": "活动接龙详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "sequence/feedback",
|
||||
"style": {
|
||||
"navigationBarTitleText": "活动接龙反馈"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "sequence/feedInfo",
|
||||
"style": {
|
||||
"navigationBarTitleText": "反馈信息"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "suggest/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "需求建议"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "publicize/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "推广会员",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "questionnaire/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "问卷调查",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "suggest/success",
|
||||
"style": {
|
||||
"navigationBarTitleText": "提交成功"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "questionnaire/details",
|
||||
"style": {
|
||||
"navigationBarTitleText": "问卷详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "questionnaire/info",
|
||||
"style": {
|
||||
"navigationBarTitleText": "问卷反馈详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "institution/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "机构列表",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "institution/details",
|
||||
"style": {
|
||||
"navigationBarTitleText": "机构详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "institution/apply",
|
||||
"style": {
|
||||
"navigationBarTitleText": "申请加入"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "institution/editor",
|
||||
"style": {
|
||||
"navigationBarTitleText": "介绍内容"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "institution/success",
|
||||
"style": {
|
||||
"navigationBarTitleText": "提交成功"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pagesActivity",
|
||||
"pages": [{
|
||||
"path": "index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "活动列表",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "index/details",
|
||||
"style": {
|
||||
"navigationBarTitleText": "活动详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "index/apply",
|
||||
"style": {
|
||||
"navigationBarTitleText": "填写报名信息"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "index/order",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "index/success",
|
||||
"style": {
|
||||
"navigationBarTitleText": "支付成功"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "order/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的活动",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "order/details",
|
||||
"style": {
|
||||
"navigationBarTitleText": "活动详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "order/success",
|
||||
"style": {
|
||||
"navigationBarTitleText": "提交成功"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "verification/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "活动核销"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "verification/details",
|
||||
"style": {
|
||||
"navigationBarTitleText": "活动核销"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "search/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "活动搜索"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "search/result",
|
||||
"style": {
|
||||
"navigationBarTitleText": "搜索结果"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pagesCard",
|
||||
"pages": [{
|
||||
"path": "mine/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的名片",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "mine/details",
|
||||
"style": {
|
||||
"navigationBarTitleText": "名片详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "mine/edit",
|
||||
"style": {
|
||||
"navigationBarTitleText": "新建名片"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "mine/manage",
|
||||
"style": {
|
||||
"navigationBarTitleText": "名片管理",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "mine/custom",
|
||||
"style": {
|
||||
"navigationBarTitleText": "自定义背景"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "mine/editor",
|
||||
"style": {
|
||||
"navigationBarTitleText": "编辑内容"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "card/details",
|
||||
"style": {
|
||||
"navigationBarTitleText": "名片详情"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pagesAdmin",
|
||||
"pages": [{
|
||||
"path": "examine/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "审核会员",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "examine/details",
|
||||
"style": {
|
||||
"navigationBarTitleText": "审核会员详情"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pagesPoints",
|
||||
"pages": [{
|
||||
"path": "index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "积分商城",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "index/details",
|
||||
"style": {
|
||||
"navigationBarTitleText": "积分明细"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "goods/details",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商品详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "goods/order",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单确认"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "goods/success",
|
||||
"style": {
|
||||
"navigationBarTitleText": "支付成功"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "order/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的订单",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "order/details",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单详情"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor": "#FFFFFF",
|
||||
"navigationStyle": "custom",
|
||||
"backgroundColor": "#FFFFFF"
|
||||
},
|
||||
"tabBar": {
|
||||
"color": "#ffffff",
|
||||
"selectedColor": "#ffffff",
|
||||
"borderStyle": "white",
|
||||
"backgroundColor": "#ffffff",
|
||||
"custom": true,
|
||||
"list": [{
|
||||
"pagePath": "pages/index/index",
|
||||
"text": "首页",
|
||||
"visible": false
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/member/index",
|
||||
"text": "会员",
|
||||
"visible": false
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/mall/index",
|
||||
"text": "商城",
|
||||
"visible": false
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/demand/index",
|
||||
"text": "供需",
|
||||
"visible": false
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/mine/index",
|
||||
"text": "我的",
|
||||
"visible": false
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
265
uniapp/小程序代码/pages/article/details.vue
Normal file
265
uniapp/小程序代码/pages/article/details.vue
Normal file
@@ -0,0 +1,265 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 平台动态-详情 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="container" :style="{'--theme-color': themeColor}">
|
||||
<!-- 标题栏 -->
|
||||
<title-bar :title="pageTitle || '平台动态'"></title-bar>
|
||||
<!-- 内容区 -->
|
||||
<view class="container-main" v-if="loadEnd">
|
||||
<view class="main-title">{{articleInfo.title}}</view>
|
||||
<view class="main-tag flex justify-content-between align-items-center">
|
||||
<view class="tag-item flex-item">
|
||||
<text class="item-name">{{articleInfo.release}}</text>
|
||||
<text class="item-time">{{articleInfo.createtime}}</text>
|
||||
</view>
|
||||
<view class="tag-item flex align-items-center">
|
||||
<image class="item-icon" src="/static/see.png" mode="aspectFit"></image>
|
||||
<text class="item-number">{{articleInfo.read_num}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="main-content">
|
||||
<mp-html :content="articleInfo.content"></mp-html>
|
||||
</view>
|
||||
<view class="main-annex">
|
||||
<view class="annex-file" v-for="(item, index) in annexList" :key="index" @click="handleDownload(item.file, item.name)">
|
||||
<view class="file-name text-ellipsis">{{item.name}}</view>
|
||||
<view class="file-btn">下载附件</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 底部导航 -->
|
||||
<tab-bar></tab-bar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
// #ifdef H5
|
||||
import wx from 'weixin-js-sdk';
|
||||
// #endif
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 加载完成
|
||||
loadEnd: false,
|
||||
// 页面标题
|
||||
pageTitle: "",
|
||||
// 新闻id
|
||||
articleId: null,
|
||||
// 新闻详情
|
||||
articleInfo: {},
|
||||
// 附件列表
|
||||
annexList: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
shareTitle: state => state.app.shareTitle,
|
||||
})
|
||||
},
|
||||
onLoad(option) {
|
||||
this.articleId = option.id
|
||||
if (option.title) this.pageTitle = decodeURIComponent(option.title)
|
||||
uni.showLoading({
|
||||
title: "加载中"
|
||||
})
|
||||
this.getArticle(() => {
|
||||
this.loadEnd = true
|
||||
uni.hideLoading()
|
||||
// #ifdef H5
|
||||
this.initConfig()
|
||||
// #endif
|
||||
})
|
||||
},
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: this.articleInfo.title,
|
||||
imageUrl: this.articleInfo.image,
|
||||
}
|
||||
},
|
||||
onShareTimeline() {
|
||||
return {
|
||||
title: this.articleInfo.title,
|
||||
imageUrl: this.articleInfo.image,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// #ifdef H5
|
||||
// 微信公众号初始化方法
|
||||
initConfig() {
|
||||
this.$util.request("main.WeChatConfig", {
|
||||
url: location.href.split('#')[0]
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
wx.config({
|
||||
debug: false,
|
||||
appId: res.data.appId,
|
||||
timestamp: Number(res.data.timestamp),
|
||||
nonceStr: res.data.nonceStr,
|
||||
signature: res.data.signature,
|
||||
jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
|
||||
openTagList: ["updateAppMessageShareData", "updateTimelineShareData"],
|
||||
})
|
||||
wx.ready(() => {
|
||||
wx.updateAppMessageShareData({
|
||||
title: this.articleInfo.title,
|
||||
imageUrl: this.articleInfo.image,
|
||||
desc: "",
|
||||
link: window.location.href,
|
||||
});
|
||||
wx.updateTimelineShareData({
|
||||
title: this.articleInfo.title,
|
||||
imageUrl: this.articleInfo.image,
|
||||
link: window.location.href,
|
||||
});
|
||||
});
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('通过config接口注入权限验证配置 ', error)
|
||||
})
|
||||
},
|
||||
// #endif
|
||||
// 获取文章详情
|
||||
getArticle(fn) {
|
||||
this.$util.request("main.article.details", {
|
||||
id: this.articleId
|
||||
}).then(res => {
|
||||
if (fn) fn()
|
||||
if (res.code == 1) {
|
||||
this.articleInfo = res.data
|
||||
this.annexList = res.data?.files || []
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
if (fn) fn()
|
||||
console.error('获取文章详情 ', error)
|
||||
})
|
||||
},
|
||||
// 下载附件
|
||||
handleDownload(file, name) {
|
||||
if (file) {
|
||||
uni.showLoading({
|
||||
mask: true,
|
||||
title: '加载中',
|
||||
})
|
||||
this.$util.downloadFile(file, 2, name).then(() => {
|
||||
uni.hideLoading()
|
||||
}).catch((error) => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: error?.errMsg || '附件下载失败',
|
||||
})
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '暂无可下载附件',
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.container {
|
||||
.container-main {
|
||||
padding: 32rpx;
|
||||
|
||||
.main-title {
|
||||
font-weight: 600;
|
||||
font-size: 36rpx;
|
||||
line-height: 60rpx;
|
||||
color: #5A5B6E;
|
||||
}
|
||||
|
||||
.main-tag {
|
||||
margin-top: 16rpx;
|
||||
|
||||
.tag-item {
|
||||
.item-name {
|
||||
color: var(--theme-color);
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.item-time {
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
color: #8D929C;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.item-number {
|
||||
margin-left: 8rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
color: #8D929C;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
|
||||
.main-annex {
|
||||
.annex-file {
|
||||
margin-top: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
border: 2rpx dashed var(--theme-color);
|
||||
padding: 24rpx 32rpx;
|
||||
|
||||
.file-name {
|
||||
flex: 1;
|
||||
color: var(--theme-color);
|
||||
font-size: 28rpx;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.file-btn {
|
||||
color: var(--theme-color);
|
||||
font-size: 28rpx;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
271
uniapp/小程序代码/pages/article/index.vue
Normal file
271
uniapp/小程序代码/pages/article/index.vue
Normal file
@@ -0,0 +1,271 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 平台动态-列表 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="container" :style="{'--theme-color': themeColor}">
|
||||
<!-- 标题栏 -->
|
||||
<title-bar :title="getPageTitle()"></title-bar>
|
||||
<!-- 内容区 -->
|
||||
<view class="container-main" v-if="loadEnd">
|
||||
<!-- 顶部导航 -->
|
||||
<scroll-view scroll-x class="main-screen" :style="{top: titleBarHeight + 'px'}" v-if="showScreen && screenList.length">
|
||||
<view class="screen-item" @click="changeScreen(0)">
|
||||
<view class="text" :class="{active: selectScreen == 0}">全部</view>
|
||||
</view>
|
||||
<view class="screen-item" v-for="item in screenList" :key="item.id" @click="changeScreen(item.id)">
|
||||
<view class="text" :class="{active: selectScreen == item.id}">{{item.name}}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- 新闻列表 -->
|
||||
<view class="main-list">
|
||||
<article-item :show-data="articleList" :show-title="getPageTitle()" v-if="articleList.length"></article-item>
|
||||
<empty top="30%" title="暂无相关内容~" v-else></empty>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 底部导航 -->
|
||||
<tab-bar></tab-bar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
import articleItem from "@/pages/component/article/index.vue"
|
||||
// #ifdef H5
|
||||
import wx from 'weixin-js-sdk';
|
||||
// #endif
|
||||
export default {
|
||||
components: {
|
||||
articleItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 加载完成
|
||||
loadEnd: false,
|
||||
// 标题栏高度
|
||||
titleBarHeight: 0,
|
||||
// 是否显示分类筛选
|
||||
showScreen: true,
|
||||
// 分类列表
|
||||
screenList: [],
|
||||
// 已选分类
|
||||
selectScreen: 0,
|
||||
// 页面标题
|
||||
pageTitle: "",
|
||||
// 新闻列表
|
||||
articleList: [],
|
||||
// 分类查询参数
|
||||
page: 1,
|
||||
limit: 20,
|
||||
hasMore: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
shareImage: state => state.app.shareImage,
|
||||
shareTitle: state => state.app.shareTitle,
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
// #ifdef MP-WEIXIN
|
||||
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight
|
||||
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||||
this.titleBarHeight = statusBarHeight + (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
|
||||
// #endif
|
||||
},
|
||||
onLoad(option) {
|
||||
uni.showLoading({
|
||||
title: "加载中"
|
||||
})
|
||||
if (option.id) {
|
||||
this.selectScreen = option.id
|
||||
this.showScreen = false
|
||||
} else {
|
||||
this.showScreen = true
|
||||
}
|
||||
this.getArticleCategory()
|
||||
if (option.title) this.pageTitle = decodeURIComponent(option.title)
|
||||
this.getArticleList(() => {
|
||||
uni.hideLoading()
|
||||
this.loadEnd = true
|
||||
})
|
||||
// #ifdef H5
|
||||
this.initConfig()
|
||||
// #endif
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.page = 1
|
||||
this.getArticleList(() => {
|
||||
uni.stopPullDownRefresh()
|
||||
})
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.hasMore) {
|
||||
this.page++
|
||||
this.getArticleList()
|
||||
}
|
||||
},
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: this.shareTitle,
|
||||
imageUrl: this.shareImage,
|
||||
}
|
||||
},
|
||||
onShareTimeline() {
|
||||
return {
|
||||
title: this.shareTitle,
|
||||
imageUrl: this.shareImage,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// #ifdef H5
|
||||
// 微信公众号初始化方法
|
||||
initConfig() {
|
||||
this.$util.request("main.WeChatConfig", {
|
||||
url: location.href.split('#')[0]
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
wx.config({
|
||||
debug: false,
|
||||
appId: res.data.appId,
|
||||
timestamp: Number(res.data.timestamp),
|
||||
nonceStr: res.data.nonceStr,
|
||||
signature: res.data.signature,
|
||||
jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
|
||||
openTagList: ["updateAppMessageShareData", "updateTimelineShareData"],
|
||||
})
|
||||
wx.ready(() => {
|
||||
wx.updateAppMessageShareData({
|
||||
title: this.shareTitle,
|
||||
desc: "",
|
||||
link: window.location.href,
|
||||
imgUrl: this.shareImage,
|
||||
});
|
||||
wx.updateTimelineShareData({
|
||||
title: this.shareTitle,
|
||||
link: window.location.href,
|
||||
imgUrl: this.shareImage,
|
||||
});
|
||||
});
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('通过config接口注入权限验证配置 ', error)
|
||||
})
|
||||
},
|
||||
// #endif
|
||||
// 获取页面标题
|
||||
getPageTitle() {
|
||||
if (this.pageTitle) {
|
||||
return this.pageTitle || "平台动态"
|
||||
} else {
|
||||
var pageTitle = "平台动态"
|
||||
if (this.selectScreen) {
|
||||
const index = this.screenList.findIndex(item => item.id == this.selectScreen)
|
||||
if (index > -1) pageTitle = this.screenList[index].name
|
||||
}
|
||||
return pageTitle
|
||||
}
|
||||
},
|
||||
// 获取文章分类
|
||||
getArticleCategory() {
|
||||
this.$util.request("main.article.category").then(res => {
|
||||
if (res.code == 1) {
|
||||
this.screenList = res.data
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取文章列表 ', error)
|
||||
})
|
||||
},
|
||||
// 获取文章列表
|
||||
getArticleList(fn) {
|
||||
let data = {
|
||||
page: this.page,
|
||||
limit: this.limit,
|
||||
}
|
||||
if (this.selectScreen) data.cat_id = this.selectScreen
|
||||
this.$util.request("main.article.list", data).then(res => {
|
||||
if (fn) fn()
|
||||
if (res.code == 1) {
|
||||
let list = res.data.data
|
||||
this.hasMore = this.page < res.data.total / this.limit ? true : false
|
||||
this.articleList = this.page == 1 ? list : [...this.articleList, ...list];
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
if (fn) fn()
|
||||
console.error('获取文章列表 ', error)
|
||||
})
|
||||
},
|
||||
// 更改分类
|
||||
changeScreen(id) {
|
||||
this.selectScreen = id
|
||||
this.page = 1
|
||||
this.getArticleList()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
.container-main {
|
||||
.main-screen {
|
||||
white-space: nowrap;
|
||||
background: #ffffff;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
|
||||
.screen-item {
|
||||
padding: 0 24rpx;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
min-width: 25%;
|
||||
|
||||
.text {
|
||||
padding: 36rpx 0;
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
border-bottom: 4rpx solid transparent;
|
||||
|
||||
&.active {
|
||||
color: var(--theme-color);
|
||||
border-color: var(--theme-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-list {
|
||||
padding: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
537
uniapp/小程序代码/pages/component/activity/apply.vue
Normal file
537
uniapp/小程序代码/pages/component/activity/apply.vue
Normal file
@@ -0,0 +1,537 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-活动报名 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="component-activity-apply">
|
||||
<!-- 表单数据 -->
|
||||
<form class="apply-form">
|
||||
<view class="form-item" v-for="(item, index) in applyField" :key="index">
|
||||
<!-- 标题 -->
|
||||
<view class="item-title">
|
||||
<text class="required" v-if="item.required == 1">*</text>
|
||||
<text class="text">{{item.label}}</text>
|
||||
<text class="tips" v-if="item.type == 'image' || item.type == 'video'">（{{item.option}}）</text>
|
||||
</view>
|
||||
<!-- 文本字段 -->
|
||||
<block v-if="item.type == 'text'">
|
||||
<view class="item-input" :class="{disabled: item.disabled}">
|
||||
<input class="input" :disabled="item.disabled" type="text" v-model="item.value" :placeholder="item.option" placeholder-class="placeholder" />
|
||||
</view>
|
||||
</block>
|
||||
<!-- 数字字段 -->
|
||||
<block v-else-if="item.type == 'number'">
|
||||
<view class="item-input" :class="{disabled: item.disabled}">
|
||||
<input class="input" :disabled="item.disabled" type="number" :maxlength="item.field == 'mobile' ? 11 : -1" v-model="item.value" :placeholder="item.option" placeholder-class="placeholder" />
|
||||
</view>
|
||||
</block>
|
||||
<!-- 单选按钮 -->
|
||||
<block v-else-if="item.type == 'radio'">
|
||||
<view class="item-radio">
|
||||
<view class="radio" :class="{active: item.value == option}" v-for="(option, num) in getOption(item.option)" :key="num" @click="selectRadio(index, option)">
|
||||
<image src="/static/select.png" mode="aspectFit"></image>
|
||||
<text>{{option}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 复选按钮 -->
|
||||
<block v-else-if="item.type == 'checkbox'">
|
||||
<view class="item-radio">
|
||||
<view class="radio" :class="{active: item.value.includes(option)}" v-for="(option, num) in getOption(item.option)" :key="num" @click="selectCheckbox(index, option)">
|
||||
<image src="/static/select.png" mode="aspectFit"></image>
|
||||
<text>{{option}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 下拉列表 -->
|
||||
<block v-else-if="item.type == 'select'">
|
||||
<view class="item-input" @click="openSelectPicker(index)">
|
||||
<view class="input text-ellipsis" v-if="item.value">{{item.value}}</view>
|
||||
<view class="input placeholder text-ellipsis" v-else>请选择{{item.label}}</view>
|
||||
<image class="icon" src="/static/del.png" mode="aspectFit" v-if="item.value" @click.stop="clearValue(index)"></image>
|
||||
<image class="icon" src="/static/right.png" mode="aspectFit" v-else></image>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 日期字段 -->
|
||||
<block v-else-if="item.type == 'date'">
|
||||
<view class="item-input" @click="openDatePicker(index)">
|
||||
<view class="input text-ellipsis" v-if="item.value">{{item.value}}</view>
|
||||
<view class="input placeholder text-ellipsis" v-else>请选择{{item.label}}</view>
|
||||
<image class="icon" src="/static/del.png" mode="aspectFit" v-if="item.value" @click.stop="clearValue(index)"></image>
|
||||
<image class="icon" src="/static/date.png" mode="aspectFit" v-else></image>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 时间字段 -->
|
||||
<block v-else-if="item.type == 'time'">
|
||||
<view class="item-input" @click="openTimePicker(index)">
|
||||
<view class="input text-ellipsis" v-if="item.value">{{item.value}}</view>
|
||||
<view class="input placeholder text-ellipsis" v-else>请选择{{item.label}}</view>
|
||||
<image class="icon" src="/static/del.png" mode="aspectFit" v-if="item.value" @click.stop="clearValue(index)"></image>
|
||||
<image class="icon" src="/static/time.png" mode="aspectFit" v-else></image>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 日期时间 -->
|
||||
<block v-else-if="item.type == 'datetime'">
|
||||
<uni-datetime-picker v-model="item.value" :is-meeting="true" @show="pageChange(true)" @maskClick="pageChange(false)" @change="pageChange(false)">
|
||||
<view class="item-input">
|
||||
<view class="input text-ellipsis" v-if="item.value">{{item.value}}</view>
|
||||
<view class="input placeholder text-ellipsis" v-else>请选择{{item.label}}</view>
|
||||
<image class="icon" src="/static/del.png" mode="aspectFit" v-if="item.value" @click.stop="clearValue(index)"></image>
|
||||
<image class="icon" src="/static/date.png" mode="aspectFit" v-else></image>
|
||||
</view>
|
||||
</uni-datetime-picker>
|
||||
</block>
|
||||
<!-- 文本域 -->
|
||||
<block v-else-if="item.type == 'textarea'">
|
||||
<view class="item-input">
|
||||
<textarea class="textarea" type="text" maxlength="-1" v-model="item.value" :placeholder="'请输入' + item.label" placeholder-class="placeholder" />
|
||||
</view>
|
||||
</block>
|
||||
<!-- 图片上传 -->
|
||||
<block v-else-if="item.type == 'image'">
|
||||
<view class="item-upload">
|
||||
<view class="upload-image" v-if="item.value && item.value.length > 0" v-for="(img, num) in item.value" :key="num" @click="previewImage(index, num)">
|
||||
<image class="image-select" :src="img" mode="aspectFill"></image>
|
||||
<image class="image-delete" src="/static/delete.png" mode="aspectFit" @click.stop="deleteImage(index, num)"></image>
|
||||
</view>
|
||||
<view class="upload-image" v-if="!item.value || item.value.length < 9" @click="chooseImage(index, 9)">
|
||||
<view class="image-background"></view>
|
||||
<view class="image-choose">
|
||||
<view class="icon">
|
||||
<image src="/static/camera.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="text">上传图片</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 视频上传 -->
|
||||
<block v-else-if="item.type == 'video'">
|
||||
<view class="item-upload">
|
||||
<view class="upload-image" v-if="item.value">
|
||||
<view class="image-video">
|
||||
<image class="video" src="/static/video.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
<image class="image-delete" src="/static/delete.png" mode="aspectFit" @click="deleteVideo(index)"></image>
|
||||
</view>
|
||||
<view class="upload-image" v-else @click="chooseVideo(index)">
|
||||
<view class="image-background"></view>
|
||||
<view class="image-choose">
|
||||
<view class="icon">
|
||||
<image src="/static/camera.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="text">上传视频</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 地图选址 -->
|
||||
<block v-else-if="item.type == 'map'">
|
||||
<view class="item-input" @click="chooseLocation(index)">
|
||||
<view class="input text-ellipsis" v-if="item.value.address">{{item.value.address}}</view>
|
||||
<view class="input placeholder text-ellipsis" v-else>请选择{{item.label}}</view>
|
||||
<image class="icon" src="/static/del.png" mode="aspectFit" v-if="item.value.address" @click.stop="clearLocation(index)"></image>
|
||||
<image class="icon" src="/static/right.png" mode="aspectFit" v-else></image>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</form>
|
||||
<!-- 单项选择框 -->
|
||||
<select-picker ref="selectPicker" :is-meeting="true" :title="selectTitle" @onChange="pageChange" @confirm="changeSelectPicker"></select-picker>
|
||||
<!-- 日期选择框 -->
|
||||
<date-picker ref="datePicker" :is-meeting="true" @onChange="pageChange" @confirm="changeDatePicker"></date-picker>
|
||||
<!-- 时间选择框 -->
|
||||
<time-picker ref="timePicker" :is-meeting="true" @onChange="pageChange" @confirm="changeTimePicker"></time-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import selectPicker from "@/pages/component/picker/select.vue"
|
||||
import datePicker from "@/pages/component/picker/date.vue"
|
||||
import timePicker from "@/pages/component/picker/time.vue"
|
||||
export default {
|
||||
name: "activityApply",
|
||||
props: ["showData"],
|
||||
components: {
|
||||
selectPicker,
|
||||
datePicker,
|
||||
timePicker,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 入会字段
|
||||
applyField: [],
|
||||
// 会员级别
|
||||
levelList: [],
|
||||
// 行业分类
|
||||
industryList: [],
|
||||
// 单选标题
|
||||
selectTitle: "",
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
showData: {
|
||||
handler(value) {
|
||||
this.applyField = value || [];
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 改变页面滚动状态
|
||||
pageChange(state) {
|
||||
this.$emit("onChange", state)
|
||||
},
|
||||
// 获取选项数据
|
||||
getOption(option) {
|
||||
return option.split(",")
|
||||
},
|
||||
// 选择单选
|
||||
selectRadio(index, option) {
|
||||
if (this.applyField[index].value == option) {
|
||||
this.applyField[index].value = ""
|
||||
} else {
|
||||
this.applyField[index].value = option
|
||||
}
|
||||
},
|
||||
// 选择复选
|
||||
selectCheckbox(index, option) {
|
||||
if (this.applyField[index].value.includes(option)) {
|
||||
this.$delete(this.applyField[index].value, this.applyField[index].value.indexOf(option))
|
||||
} else {
|
||||
this.applyField[index].value.push(option)
|
||||
}
|
||||
},
|
||||
// 选择图片
|
||||
chooseImage(index, limit = 9) {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.chooseMedia({
|
||||
count: Number(limit) > 1 ? (limit - this.applyField[index].value.length) : 1,
|
||||
mediaType: ['image'],
|
||||
sourceType: ['album', 'camera'],
|
||||
sizeType: ['compressed'],
|
||||
success: (res) => {
|
||||
let list = res.tempFiles.map(item => item.tempFilePath)
|
||||
this.applyField[index].value = [...this.applyField[index].value, ...list]
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
uni.chooseImage({
|
||||
count: Number(limit) > 1 ? (limit - this.applyField[index].value.length) : 1,
|
||||
sourceType: ['album', 'camera '],
|
||||
sizeType: ['compressed'],
|
||||
success: (res) => {
|
||||
let list = res.tempFilePaths
|
||||
this.applyField[index].value = [...this.applyField[index].value, ...list]
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
// 删除图片
|
||||
deleteImage(i, j) {
|
||||
this.$delete(this.applyField[i].value, j)
|
||||
},
|
||||
// 预览图片
|
||||
previewImage(i, j = 0) {
|
||||
let list = this.applyField[i].value
|
||||
uni.previewImage({
|
||||
urls: list,
|
||||
current: j
|
||||
});
|
||||
},
|
||||
// 选择视频
|
||||
chooseVideo(index) {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.chooseMedia({
|
||||
count: 1,
|
||||
mediaType: ['video'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
this.applyField[index].value = res.tempFiles[0].tempFilePath
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
uni.chooseVideo({
|
||||
sourceType: ['camera', 'album'],
|
||||
success: (res) => {
|
||||
this.applyField[index].value = res.tempFilePath;
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
// 删除视频
|
||||
deleteVideo(index) {
|
||||
this.applyField[index].value = ""
|
||||
},
|
||||
// 选择下拉选项
|
||||
openSelectPicker(index) {
|
||||
if (this.applyField[index].disabled) return
|
||||
this.selectTitle = this.applyField[index].label
|
||||
let list = this.applyField[index].option.split(",")
|
||||
this.$refs.selectPicker.open(list, this.applyField[index].value, index)
|
||||
},
|
||||
// 改变下拉选项
|
||||
changeSelectPicker(value, index) {
|
||||
this.applyField[index].value = value
|
||||
},
|
||||
// 选择日期
|
||||
openDatePicker(index) {
|
||||
this.$refs.datePicker.open(this.applyField[index].value, index)
|
||||
},
|
||||
// 改变日期
|
||||
changeDatePicker(value, index) {
|
||||
this.applyField[index].value = value
|
||||
},
|
||||
// 选择时间
|
||||
openTimePicker(index) {
|
||||
this.$refs.timePicker.open(this.applyField[index].value, index)
|
||||
},
|
||||
// 改变时间
|
||||
changeTimePicker(value, index) {
|
||||
this.applyField[index].value = value
|
||||
},
|
||||
// 清空已选数据
|
||||
clearValue(index) {
|
||||
this.applyField[index].value = ""
|
||||
},
|
||||
// 地址选择
|
||||
chooseLocation(index) {
|
||||
uni.chooseLocation({
|
||||
success: (res) => {
|
||||
this.applyField[index].value = {
|
||||
latitude: res.latitude,
|
||||
longitude: res.longitude,
|
||||
name: res.name,
|
||||
address: res.address
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 清空地址
|
||||
clearLocation(index) {
|
||||
this.applyField[index].value = {
|
||||
latitude: "",
|
||||
longitude: "",
|
||||
name: "",
|
||||
address: "",
|
||||
}
|
||||
},
|
||||
// 获取表单数据
|
||||
getApplyField(fn) {
|
||||
fn(JSON.parse(JSON.stringify(this.applyField)))
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.component-activity-apply {
|
||||
.apply-form {
|
||||
.form-item {
|
||||
margin-top: 32rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
|
||||
.required {
|
||||
color: #E60012;
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.item-input {
|
||||
margin-top: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 16rpx;
|
||||
background: #FFF;
|
||||
|
||||
&.disabled {
|
||||
.input {
|
||||
color: #8D929C;
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
height: 104rpx;
|
||||
line-height: 104rpx;
|
||||
flex: 1;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
flex: 1;
|
||||
padding: 32rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: #8D929C;
|
||||
font-size: 28rpx;
|
||||
line-height: 104rpx;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
padding-right: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-radio {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -26rpx;
|
||||
padding-top: 8rpx;
|
||||
|
||||
.radio {
|
||||
border-radius: 8rpx;
|
||||
background: #FFF;
|
||||
padding: 16rpx;
|
||||
margin-left: 26rpx;
|
||||
margin-top: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
margin-right: 8rpx;
|
||||
display: none;
|
||||
}
|
||||
|
||||
text {
|
||||
color: #8D929C;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--theme-color);
|
||||
|
||||
image {
|
||||
display: block;
|
||||
}
|
||||
|
||||
text {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-upload {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 32rpx;
|
||||
column-gap: 3.5%;
|
||||
row-gap: 24rpx;
|
||||
|
||||
.upload-image {
|
||||
position: relative;
|
||||
width: 31%;
|
||||
height: 0;
|
||||
padding-top: 31%;
|
||||
|
||||
.image-select {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.image-video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 10rpx;
|
||||
background: var(--theme-color);
|
||||
padding: 56rpx;
|
||||
}
|
||||
|
||||
.image-delete {
|
||||
position: absolute;
|
||||
top: -16rpx;
|
||||
right: -16rpx;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
.image-choose {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
left: 20rpx;
|
||||
right: 20rpx;
|
||||
bottom: 20rpx;
|
||||
z-index: 6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
|
||||
.icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
padding: 18rpx;
|
||||
background: var(--theme-color);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-top: 16rpx;
|
||||
color: var(--theme-color);
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.image-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
background: var(--theme-color);
|
||||
opacity: 0.08;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
295
uniapp/小程序代码/pages/component/activity/certificate.vue
Normal file
295
uniapp/小程序代码/pages/component/activity/certificate.vue
Normal file
@@ -0,0 +1,295 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.maiwd.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-参会证书 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="component-activity-certificate">
|
||||
<!-- 参会证书 -->
|
||||
<canvas class="poster-canvas" :style="{width: posterWidth + 'px', height: posterHeight + 'px'}" canvas-id="myCanvas" id="myCanvas"></canvas>
|
||||
<!-- 参会证书模态框 -->
|
||||
<uni-popup ref="popupModal" type="center" @change="onChange">
|
||||
<view class="poster-popup flex-direction-column align-items-center" :style="{'--theme-color': themeColor, paddingTop: titleBarHeight + 'px'}">
|
||||
<view class="popup-close" @click="onClose()">
|
||||
<image class="icon" src="/static/closePopup.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<scroll-view scroll-y class="popup-content flex justify-content-center">
|
||||
<image class="image" :src="posterPath" mode="widthFix"></image>
|
||||
</scroll-view>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="popup-btn" @click="saveImage">保存相册</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<view class="popup-btn">长按图片保存相册</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
import { loadImage, createPoster, canvasToTempFilePath } from "@/common/poster.js";
|
||||
export default {
|
||||
name: "activityCertificate",
|
||||
data() {
|
||||
return {
|
||||
// 标题栏高度
|
||||
titleBarHeight: 0,
|
||||
// 参会证书数据
|
||||
posterInfo: {},
|
||||
// 参会证书宽度
|
||||
posterWidth: 0,
|
||||
// 参会证书高度
|
||||
posterHeight: 0,
|
||||
// 图片资源是否准备完成
|
||||
posterReady: false,
|
||||
// 参会证书背景图片
|
||||
posterBackground: "",
|
||||
// 参会证书图片路径
|
||||
posterPath: "",
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
// #ifdef MP-WEIXIN
|
||||
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight
|
||||
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||||
this.titleBarHeight = statusBarHeight + (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
// 获取参会证书
|
||||
getPoster(activityId, applyId) {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true
|
||||
})
|
||||
this.$util.request("activity.certificate", {
|
||||
id: activityId,
|
||||
apply_id: applyId,
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
this.posterInfo = res.data
|
||||
this.posterWidth = res.data.data.bg.width
|
||||
this.posterHeight = res.data.data.bg.height
|
||||
this.$nextTick(() => {
|
||||
this.showNucleus()
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取参会证书 ', error)
|
||||
})
|
||||
},
|
||||
// 获取图片资源
|
||||
async showNucleus() {
|
||||
this.loadingResources().then((state) => {
|
||||
// 状态为 true 表示加载完成
|
||||
if (state) {
|
||||
this.posterReady = true
|
||||
this.createImage()
|
||||
}
|
||||
});
|
||||
},
|
||||
// 加载图片资源
|
||||
async loadingResources() {
|
||||
this.posterBackground = await loadImage(this.posterInfo.data.bg.img);
|
||||
return true;
|
||||
},
|
||||
// 生成参会证书
|
||||
async createImage() {
|
||||
if (!this.posterReady) {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '参会证书图片资源加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
};
|
||||
// 获取上下文对象
|
||||
const ctx = uni.createCanvasContext("myCanvas", this);
|
||||
// 创建参会证书
|
||||
let posterData = [{
|
||||
type: "image",
|
||||
url: this.posterBackground,
|
||||
config: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
w: parseFloat(this.posterWidth),
|
||||
h: parseFloat(this.posterHeight),
|
||||
},
|
||||
}]
|
||||
this.posterInfo.data.data.forEach((item) => {
|
||||
if (item.type == "text") {
|
||||
let content = ""
|
||||
if (item.item == "activity_name") content = this.posterInfo.activity_name || ""
|
||||
else if (item.item == "name") content = this.posterInfo.participant || ""
|
||||
else if (item.item == "time") content = this.posterInfo.time || ""
|
||||
let itemX = 0
|
||||
if (item.textAlign == "center") itemX = parseFloat(item.left) + parseFloat(item.width) / 2
|
||||
else if (item.textAlign == "right") itemX = parseFloat(item.left) + parseFloat(item.width)
|
||||
else itemX = parseFloat(item.left)
|
||||
let itemFont = "10px sans-serif"
|
||||
if (item.fontStyle == 2) {
|
||||
itemFont = `italic ${item.size} sans-serif`
|
||||
} else if (item.fontStyle == 3) {
|
||||
itemFont = `bold ${item.size} sans-serif`
|
||||
} else if (item.fontStyle == 4) {
|
||||
itemFont = `italic bold ${item.size} sans-serif`
|
||||
} else {
|
||||
itemFont = `${item.size} sans-serif`
|
||||
}
|
||||
posterData.push({
|
||||
type: "text",
|
||||
text: content || "",
|
||||
config: {
|
||||
x: itemX,
|
||||
y: parseFloat(item.top),
|
||||
color: item.color,
|
||||
font: itemFont,
|
||||
textAlign: item.textAlign,
|
||||
maxWidth: parseFloat(item.width),
|
||||
lineHeight: parseInt(item.height),
|
||||
isVerticalCenter: true
|
||||
},
|
||||
})
|
||||
}
|
||||
})
|
||||
await createPoster(ctx, posterData)
|
||||
const imagePath = await canvasToTempFilePath("myCanvas", this);
|
||||
this.posterPath = imagePath;
|
||||
this.$refs.popupModal.open()
|
||||
uni.hideLoading()
|
||||
},
|
||||
// 保存参会证书
|
||||
saveImage() {
|
||||
uni.authorize({
|
||||
scope: 'scope.writePhotosAlbum',
|
||||
success: () => {
|
||||
uni.getImageInfo({
|
||||
src: this.posterPath,
|
||||
success: (img) => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: img.path,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: "保存成功",
|
||||
icon: "success",
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error(err);
|
||||
},
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error(err)
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: () => {
|
||||
uni.showModal({
|
||||
title: '图片保存失败',
|
||||
content: '请确认是否已开启授权',
|
||||
confirmText: '开启授权',
|
||||
confirmColor: this.themeColor,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.openSetting({
|
||||
success: (setting) => {
|
||||
if (setting.authSetting["scope.writePhotosAlbum"]) {
|
||||
uni.showToast({
|
||||
title: '授权成功，请重新保存',
|
||||
icon: "none"
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '请确定已打开保存权限',
|
||||
icon: "none"
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 关闭弹窗
|
||||
onClose() {
|
||||
this.$refs.popupModal.close()
|
||||
},
|
||||
// 改变页面滚动状态
|
||||
onChange(e) {
|
||||
this.$emit("onChange", e.show)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.component-activity-certificate {
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
|
||||
.poster-canvas {
|
||||
position: fixed;
|
||||
top: 100vw;
|
||||
left: 100vh;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.poster-popup {
|
||||
.popup-close {
|
||||
width: 100%;
|
||||
margin-top: -112rpx;
|
||||
margin-bottom: 32rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
max-height: 55vh;
|
||||
|
||||
.image {
|
||||
width: 92vw;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-btn {
|
||||
margin-top: 32rpx;
|
||||
width: 336rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
padding: 26rpx 32rpx;
|
||||
border-radius: 16rpx;
|
||||
color: #FFFFFF;
|
||||
background: var(--theme-color);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
686
uniapp/小程序代码/pages/component/activity/index.vue
Normal file
686
uniapp/小程序代码/pages/component/activity/index.vue
Normal file
@@ -0,0 +1,686 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-活动列表 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="component-activity" :style="{'--theme-color': themeColor}">
|
||||
<view class="activity-item" :class="{special: showType == 1}" v-for="item in showData" :key="item.id" @click="toDetails(item)">
|
||||
<view class="item-header flex justify-content-between align-items-center" v-if="showType == 2">
|
||||
<view class="header-number">订单号：{{item.order_no}}</view>
|
||||
<view class="header-status">
|
||||
<text style="color: #FF626E;" v-if="item.pay_state == 1">待付款</text>
|
||||
<block v-else-if="item.pay_state == 2">
|
||||
<text style="color: #FF9100;" v-if="item.activity_state == 1">报名中</text>
|
||||
<text v-else-if="item.activity_state == 2">进行中</text>
|
||||
<text style="color: #666666;" v-else-if="item.activity_state == 3">已结束</text>
|
||||
</block>
|
||||
<text style="color: #FF9100;" v-else-if="item.pay_state == 3">退款中</text>
|
||||
<text style="color: #666666;" v-else-if="item.pay_state == 4">已退款</text>
|
||||
<text style="color: #FF626E;" v-else-if="item.pay_state == 5">已驳回</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-info flex">
|
||||
<image class="info-image" :src="item.images" mode="aspectFill"></image>
|
||||
<view class="info-box flex-item">
|
||||
<view class="box-title text-ellipsis">{{item.name}}</view>
|
||||
<view class="box-tag flex align-items-center">
|
||||
<view class="icon" :style="{'background-image': 'url('+ iconTime +')'}" v-if="iconTime"></view>
|
||||
<text class="text flex-item text-ellipsis">{{item.start_time}} | {{item.week}}</text>
|
||||
</view>
|
||||
<view class="box-tag flex align-items-center" v-if="item.organizing_method == 1">
|
||||
<view class="icon" :style="{'background-image': 'url('+ iconNetwork +')'}" v-if="iconNetwork"></view>
|
||||
<text class="text flex-item text-ellipsis">报名成功后查看</text>
|
||||
</view>
|
||||
<view class="box-tag flex align-items-center" v-else-if="item.organizing_method == 2">
|
||||
<view class="icon" :style="{'background-image': 'url('+ iconLocation +')'}" v-if="iconLocation"></view>
|
||||
<text class="text flex-item text-ellipsis">{{item.address}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-footer flex align-items-center" v-if="showType == 2">
|
||||
<view class="footer-label">
|
||||
<text v-if="item.organizing_method == 1">线上活动</text>
|
||||
<text v-else-if="item.organizing_method == 2">线下活动</text>
|
||||
</view>
|
||||
<view class="footer-price flex-item">
|
||||
<block v-if="item.fees > 0">
|
||||
<text>￥</text>{{item.fees}}
|
||||
</block>
|
||||
<block v-else>免费</block>
|
||||
</view>
|
||||
<view class="footer-btn flex">
|
||||
<!-- 报名中 -->
|
||||
<block v-if="item.activity_state == 1">
|
||||
<!-- 待付款 -->
|
||||
<block v-if="item.pay_state == 1">
|
||||
<view class="btn" style="background: #FF626E;" @click.stop="toCancel(item.id)">取消参加</view>
|
||||
<view class="btn" @click.stop="toPayment(item.activity_id)">去支付</view>
|
||||
</block>
|
||||
<!-- 已付款 -->
|
||||
<block v-else-if="item.pay_state == 2">
|
||||
<view style="background: #FF626E;" class="btn" @click.stop="handleCancel(item.id)" v-if="parseFloat(item.fees) == 0">取消参加</view>
|
||||
<view style="background: #FF626E;" class="btn" @click.stop="handleRefund(item.id,item.activity_id)" v-else-if="item.refund == 1">申请退款</view>
|
||||
<view class="btn" style="background: #FFB656;" @click.stop="showWebsite(item.url)" v-if="item.organizing_method == 1">线上地址</view>
|
||||
<view class="btn" style="background: #FFB656;" @click.stop="handleVerification(item.activity_id, item.verification_method)" v-else-if="item.organizing_method == 2 && item.is_verifying == 1 && item.is_sign_in == 2">
|
||||
<text v-if="item.verification_method == 1">扫码签到</text>
|
||||
<text v-else>参会凭证</text>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 已驳回 -->
|
||||
<block v-else-if="item.pay_state == 5">
|
||||
<view class="btn" style="background: #FF626E;">驳回原因</view>
|
||||
</block>
|
||||
</block>
|
||||
<!-- 进行中 -->
|
||||
<block v-else-if="item.activity_state == 2 && item.pay_state == 2">
|
||||
<view class="btn" style="background: #FFB656;" @click.stop="showWebsite(item.url)" v-if="item.organizing_method == 1">线上地址</view>
|
||||
<view class="btn" style="background: #FFB656;" @click.stop="handleVerification(item.activity_id, item.verification_method)" v-else-if="item.organizing_method == 2 && item.is_verifying == 1 && item.is_sign_in == 2">
|
||||
<text v-if="item.verification_method == 1">扫码签到</text>
|
||||
<text v-else>参会凭证</text>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 已结束 -->
|
||||
<block v-else-if="item.activity_state == 3 && item.pay_state == 2">
|
||||
<view class="btn" @click.stop="showCertificate(item.activity_id, item.id)">参会证书</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 参会凭证 -->
|
||||
<activity-poster ref="activityPoster" @onChange="pageChange"></activity-poster>
|
||||
<!-- 参会证书 -->
|
||||
<activity-certificate ref="activityCertificate" @onChange="pageChange"></activity-certificate>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
import activityPoster from "@/pages/component/activity/poster.vue"
|
||||
import activityCertificate from "@/pages/component/activity/certificate.vue"
|
||||
import svgData from "@/common/svg.js"
|
||||
// #ifdef H5
|
||||
import wx from 'weixin-js-sdk';
|
||||
// #endif
|
||||
export default {
|
||||
name: "activityIndex",
|
||||
props: ["showData", "showType"],
|
||||
components: {
|
||||
activityPoster,
|
||||
activityCertificate,
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
iconTime: state => {
|
||||
return svgData.svgToUrl("time", state.app.themeColor)
|
||||
},
|
||||
iconLocation: state => {
|
||||
return svgData.svgToUrl("location", state.app.themeColor)
|
||||
},
|
||||
iconNetwork: state => {
|
||||
return svgData.svgToUrl("network", state.app.themeColor)
|
||||
},
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 改变页面滚动状态
|
||||
pageChange(state) {
|
||||
this.$emit("onChange", state)
|
||||
},
|
||||
// 申请退款
|
||||
handleRefund(applyId, activity_id) {
|
||||
uni.showModal({
|
||||
content: "确认申请退款此活动？",
|
||||
confirmColor: "#FF626E",
|
||||
confirmText: "确认退款",
|
||||
cancelColor: "#999999",
|
||||
cancelText: "取消退款",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true
|
||||
})
|
||||
this.$util.request("activity.applyRefund", {
|
||||
activity_id: activity_id,
|
||||
apply_id: applyId
|
||||
}).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.code == 1) {
|
||||
uni.redirectTo({
|
||||
url: "/pagesActivity/order/success"
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('申请退款 ', error)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 未支付取消参加
|
||||
toCancel(applyId) {
|
||||
uni.showModal({
|
||||
content: "确认取消参加此活动？",
|
||||
confirmColor: "#FF626E",
|
||||
confirmText: "确认取消",
|
||||
cancelColor: "#999999",
|
||||
cancelText: "我再想想",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true
|
||||
})
|
||||
this.$util.request("activity.applyDel", {
|
||||
id: applyId
|
||||
}).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.code == 1) {
|
||||
uni.showToast({
|
||||
title: "取消成功",
|
||||
icon: "success",
|
||||
mask: true,
|
||||
duration: 1500
|
||||
})
|
||||
this.$emit("getOrderList");
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('取消参加 ', error)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 去支付
|
||||
toPayment(id) {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pagesActivity/index/order?id=" + id
|
||||
})
|
||||
},
|
||||
// 取消参加
|
||||
handleCancel(applyId) {
|
||||
uni.showModal({
|
||||
content: "确认取消参加此活动？",
|
||||
confirmColor: "#FF626E",
|
||||
confirmText: "确认取消",
|
||||
cancelColor: "#999999",
|
||||
cancelText: "我再想想",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true
|
||||
})
|
||||
this.$util.request("activity.applyCancel", {
|
||||
id: applyId
|
||||
}).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.code == 1) {
|
||||
uni.showToast({
|
||||
title: "取消成功",
|
||||
icon: "success",
|
||||
mask: true,
|
||||
duration: 1500
|
||||
})
|
||||
this.$emit("getOrderList");
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('取消参加 ', error)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 线上地址
|
||||
showWebsite(url) {
|
||||
if (url) {
|
||||
uni.showModal({
|
||||
content: url,
|
||||
confirmColor: this.themeColor,
|
||||
confirmText: "复制链接",
|
||||
cancelColor: "#999999",
|
||||
cancelText: "关闭页面",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.$util.toPage({
|
||||
mode: 8,
|
||||
content: url
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "暂无线上地址，请稍后再试"
|
||||
})
|
||||
}
|
||||
},
|
||||
// 跳转详情
|
||||
toDetails(item) {
|
||||
if (this.showType == 2) {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: `/pagesActivity/order/details?id=${item.id}&activity_id=${item.activity_id}`
|
||||
})
|
||||
} else if (this.showType == 3) {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pagesActivity/verification/details?id=" + item.id
|
||||
})
|
||||
} else {
|
||||
if (item.activity_auth == 2) {
|
||||
if (!uni.getStorageSync("token")) {
|
||||
uni.showModal({
|
||||
title: "系统提示",
|
||||
content: "该活动为会员专属，请登录后查看",
|
||||
confirmColor: this.themeColor,
|
||||
confirmText: "前往登录",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/login/index"
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pagesActivity/index/details?id=" + item.id
|
||||
})
|
||||
} else {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pagesActivity/index/details?id=" + item.id
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 活动核销
|
||||
handleVerification(id, method) {
|
||||
if (method == 1) {
|
||||
this.handleScan(id)
|
||||
} else {
|
||||
this.$refs.activityPoster.getPoster(id)
|
||||
}
|
||||
},
|
||||
// 扫码核销
|
||||
handleScan(id) {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true
|
||||
})
|
||||
this.getAuthSetting(() => {
|
||||
uni.hideLoading()
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.scanCode({
|
||||
success: (res) => {
|
||||
if (res.path) {
|
||||
const parameter = this.getUrlParam(res.path)
|
||||
if (parameter && parameter.scene) {
|
||||
this.scanSign(parameter.scene, id)
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "签到失败，请检查签到码是否正确",
|
||||
duration: 2500
|
||||
})
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "签到失败，请检查签到码是否正确",
|
||||
duration: 2500
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
wx.scanQRCode({
|
||||
needResult: 1,
|
||||
scanType: ["qrCode"],
|
||||
success: (res) => {
|
||||
if (res.resultStr) {
|
||||
const parameter = this.getUrlParam(res.resultStr)
|
||||
if (parameter && parameter.scene) {
|
||||
this.scanSign(parameter.scene, id)
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "签到失败，请检查签到码是否正确",
|
||||
duration: 2500
|
||||
})
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "签到失败，请检查签到码是否正确",
|
||||
duration: 2500
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
uni.showModal({
|
||||
title: "系统提示",
|
||||
content: "当前设备暂不支持扫码核销，请稍后再试",
|
||||
showCancel: false,
|
||||
confirmText: "我知道了"
|
||||
})
|
||||
},
|
||||
});
|
||||
// #endif
|
||||
})
|
||||
},
|
||||
// 自助核销
|
||||
scanSign(value, id) {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true
|
||||
})
|
||||
this.getLocation((location) => {
|
||||
if (!location) {
|
||||
uni.showToast({
|
||||
title: '位置获取失败，请确定已打开定位权限',
|
||||
icon: 'none',
|
||||
duration: 2000,
|
||||
})
|
||||
return
|
||||
}
|
||||
this.$util.request("activity.scanSign", {
|
||||
activity_id: id,
|
||||
validate_value: value,
|
||||
lng: location.longitude,
|
||||
lat: location.latitude,
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
uni.showToast({
|
||||
icon: "success",
|
||||
title: "签到成功",
|
||||
duration: 2000
|
||||
})
|
||||
this.$emit("getOrderList");
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('核销签到', error)
|
||||
})
|
||||
})
|
||||
},
|
||||
// 获取位置权限
|
||||
getAuthSetting(fn) {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.getSetting({
|
||||
success: (setting) => {
|
||||
if (setting.authSetting && setting.authSetting.hasOwnProperty("scope.userLocation")) {
|
||||
if (setting.authSetting["scope.userLocation"]) {
|
||||
if (fn) fn()
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '请重新授权获取您的地理位置，否则部分功能将无法使用',
|
||||
confirmColor: this.themeColor,
|
||||
confirmText: "授权",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.openSetting({
|
||||
success: (result) => {
|
||||
if (result.authSetting["scope.userLocation"]) {
|
||||
if (fn) fn()
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '请确定已打开定位权限',
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '位置获取失败',
|
||||
icon: 'none',
|
||||
duration: 2000,
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '请授权获取您的地理位置，否则部分功能将无法使用',
|
||||
icon: 'none',
|
||||
duration: 2000,
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
if (fn) fn()
|
||||
}
|
||||
})
|
||||
}
|
||||
} else {
|
||||
if (fn) fn()
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '位置获取失败',
|
||||
icon: 'none',
|
||||
duration: 2000,
|
||||
})
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
if (fn) fn()
|
||||
// #endif
|
||||
},
|
||||
// 获取当前地址
|
||||
getLocation(fn) {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
geocode: true,
|
||||
success: (res) => {
|
||||
fn({
|
||||
latitude: res.latitude,
|
||||
longitude: res.longitude,
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
fn()
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
wx.ready(() => {
|
||||
wx.getLocation({
|
||||
type: 'wgs84',
|
||||
success: (res) => {
|
||||
fn({
|
||||
latitude: res.latitude,
|
||||
longitude: res.longitude,
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
fn()
|
||||
},
|
||||
cancel: () => {
|
||||
fn()
|
||||
}
|
||||
});
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
// 截取地址栏参数
|
||||
getUrlParam(url) {
|
||||
const query = url.split("?")[1] || "";
|
||||
const params = {};
|
||||
query.split("&").forEach((pair) => {
|
||||
const [key, value] = pair.split("=");
|
||||
if (key) {
|
||||
params[key] = decodeURIComponent(value || "");
|
||||
}
|
||||
});
|
||||
return params;
|
||||
},
|
||||
// 参会证书
|
||||
showCertificate(activityId, applyId) {
|
||||
this.$refs.activityCertificate.getPoster(activityId, applyId)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.component-activity {
|
||||
.activity-item {
|
||||
margin-top: 32rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
padding: 32rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&.special {
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.item-header {
|
||||
padding-bottom: 32rpx;
|
||||
border-bottom: 1rpx solid #E4E4E4;
|
||||
margin-bottom: 32rpx;
|
||||
|
||||
.header-number {
|
||||
color: #999999;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.header-status {
|
||||
color: var(--theme-color);
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-info {
|
||||
.info-image {
|
||||
width: 220rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
margin-left: 32rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.box-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.box-tag {
|
||||
.icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
background-size: 32rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #8D929C;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-footer {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.footer-label {
|
||||
color: var(--theme-color);
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #F6F7FB;
|
||||
}
|
||||
|
||||
.footer-price {
|
||||
margin-left: 16rpx;
|
||||
color: var(--theme-color);
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
line-height: 50rpx;
|
||||
|
||||
text {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-btn {
|
||||
margin-left: 16rpx;
|
||||
|
||||
.btn {
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
padding: 14rpx 24rpx;
|
||||
border-radius: 8rpx;
|
||||
background: var(--theme-color);
|
||||
margin-left: 12rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
508
uniapp/小程序代码/pages/component/activity/poster.vue
Normal file
508
uniapp/小程序代码/pages/component/activity/poster.vue
Normal file
@@ -0,0 +1,508 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.maiwd.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-参会凭证 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="component-activity-poster">
|
||||
<!-- 参会凭证 -->
|
||||
<canvas class="poster-canvas" :style="{width: posterWidth + 'px', height: posterHeight + 'px'}" canvas-id="myCanvas" id="myCanvas"></canvas>
|
||||
<!-- 二维码生成 -->
|
||||
<uqrcode class="poster-canvas" ref="qrcode" canvas-id="qrcode" :value="codeData" :options="{ margin: 4 }" v-if="codeData"></uqrcode>
|
||||
<!-- 参会凭证模态框 -->
|
||||
<uni-popup ref="popupModal" type="center" @change="onChange">
|
||||
<view class="poster-popup flex-direction-column align-items-center" :style="{'--theme-color': themeColor, paddingTop: titleBarHeight + 'px'}">
|
||||
<view class="popup-close" @click="onClose()">
|
||||
<image class="icon" src="/static/closePopup.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="popup-content flex justify-content-center">
|
||||
<image class="image" :src="posterPath" mode="aspectFit"></image>
|
||||
</view>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="popup-btn" @click="saveImage">保存相册</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<view class="popup-btn">长按图片保存相册</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
import { loadImage, createPoster, canvasToTempFilePath } from "@/common/poster.js";
|
||||
export default {
|
||||
name: "activityPoster",
|
||||
data() {
|
||||
return {
|
||||
// 标题栏高度
|
||||
titleBarHeight: 0,
|
||||
// 参会凭证数据
|
||||
posterInfo: {},
|
||||
// 参会凭证宽度
|
||||
posterWidth: 0,
|
||||
// 参会凭证高度
|
||||
posterHeight: 0,
|
||||
// 图片资源是否准备完成
|
||||
posterReady: false,
|
||||
// 参会凭证用户头像
|
||||
posterAvatar: "",
|
||||
// 参会凭证二维码数据
|
||||
codeData: "",
|
||||
// 参会凭证二维码图片
|
||||
posterCode: "",
|
||||
// 参会凭证图片路径
|
||||
posterPath: "",
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
// #ifdef MP-WEIXIN
|
||||
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight
|
||||
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||||
this.titleBarHeight = statusBarHeight + (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
// 获取参会凭证
|
||||
getPoster(id) {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true
|
||||
})
|
||||
this.posterWidth = uni.getSystemInfoSync().windowWidth;
|
||||
this.posterHeight = parseInt(this.posterWidth * (456 / 311));
|
||||
this.$util.request("activity.attendance", {
|
||||
activity_id: id,
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
this.posterInfo = res.data
|
||||
this.codeData = {
|
||||
wechatId: res.data.wechat_id,
|
||||
}
|
||||
this.codeData = JSON.stringify(this.codeData)
|
||||
this.createQrcode()
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取参会凭证 ', error)
|
||||
})
|
||||
},
|
||||
// base64转临时路径
|
||||
base64ToPath(base64) {
|
||||
let arr = base64.split(',');
|
||||
let mime = arr[0].match(/:(.*?);/)[1];
|
||||
let bstr = atob(arr[1]);
|
||||
let n = bstr.length;
|
||||
let u8arr = new Uint8Array(n);
|
||||
while (n--) {
|
||||
u8arr[n] = bstr.charCodeAt(n);
|
||||
}
|
||||
let blob = new Blob([u8arr], {
|
||||
type: mime
|
||||
});
|
||||
let url = URL.createObjectURL(blob);
|
||||
return url;
|
||||
},
|
||||
// 生成二维码
|
||||
createQrcode() {
|
||||
if (this.$refs.qrcode && this.$refs.qrcode.toTempFilePath) {
|
||||
this.$refs.qrcode.toTempFilePath({
|
||||
success: res => {
|
||||
// #ifdef MP-WEIXIN
|
||||
const base64Data = res.tempFilePath.replace(/^data:image\/\w+;base64,/, '');
|
||||
const filePath = `${wx.env.USER_DATA_PATH}/qrcode.jpg`
|
||||
uni.getFileSystemManager().writeFile({
|
||||
filePath,
|
||||
data: base64Data,
|
||||
encoding: "base64",
|
||||
success: () => {
|
||||
this.posterCode = filePath
|
||||
this.showNucleus()
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
this.posterCode = this.base64ToPath(res.tempFilePath);
|
||||
this.showNucleus()
|
||||
// #endif
|
||||
},
|
||||
fail: () => {
|
||||
setTimeout(() => {
|
||||
this.createQrcode()
|
||||
}, 200);
|
||||
},
|
||||
});
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
this.createQrcode()
|
||||
}, 200);
|
||||
}
|
||||
},
|
||||
// 获取图片资源
|
||||
async showNucleus() {
|
||||
this.loadingResources().then((state) => {
|
||||
if (state) {
|
||||
this.posterReady = true
|
||||
this.createImage()
|
||||
}
|
||||
});
|
||||
},
|
||||
// 加载图片资源
|
||||
async loadingResources() {
|
||||
this.posterCode = await loadImage(this.posterCode);
|
||||
this.posterAvatar = await loadImage(this.posterInfo.member_avatar);
|
||||
return true;
|
||||
},
|
||||
// 生成参会凭证
|
||||
async createImage() {
|
||||
if (!this.posterReady) {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '参会凭证图片资源加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
};
|
||||
// 获取上下文对象
|
||||
const ctx = uni.createCanvasContext("myCanvas", this);
|
||||
// 设置背景色1
|
||||
const x1 = 0;
|
||||
const y1 = 0;
|
||||
const width1 = this.posterWidth;
|
||||
const height1 = this.posterHeight;
|
||||
const radius1 = parseInt(this.posterWidth * (20 / 311));
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x1 + radius1, y1);
|
||||
ctx.lineTo(x1 + width1 - radius1, y1);
|
||||
ctx.arc(x1 + width1 - radius1, y1 + radius1, radius1, -Math.PI / 2, 0);
|
||||
ctx.lineTo(x1 + width1, y1 + height1 - radius1);
|
||||
ctx.arc(x1 + width1 - radius1, y1 + height1 - radius1, radius1, 0, Math.PI / 2);
|
||||
ctx.lineTo(x1 + radius1, y1 + height1);
|
||||
ctx.arc(x1 + radius1, y1 + height1 - radius1, radius1, Math.PI / 2, Math.PI);
|
||||
ctx.lineTo(x1, y1 + radius1);
|
||||
ctx.arc(x1 + radius1, y1 + radius1, radius1, Math.PI, -Math.PI / 2);
|
||||
ctx.closePath();
|
||||
ctx.setFillStyle('#ffffff')
|
||||
ctx.fill();
|
||||
ctx.setStrokeStyle('#ffffff')
|
||||
ctx.stroke();
|
||||
// 设置背景色2
|
||||
const x2 = 2;
|
||||
const y2 = 2;
|
||||
const width2 = parseInt(this.posterWidth - 4);
|
||||
const height2 = parseInt(this.posterHeight - 4);
|
||||
const radius2 = parseInt(this.posterWidth * (20 / 311));
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x2 + radius2, y2);
|
||||
ctx.lineTo(x2 + width2 - radius2, y2);
|
||||
ctx.arc(x2 + width2 - radius2, y2 + radius2, radius2, -Math.PI / 2, 0);
|
||||
ctx.lineTo(x2 + width2, y2 + height2 - radius2);
|
||||
ctx.arc(x2 + width2 - radius2, y2 + height2 - radius2, radius2, 0, Math.PI / 2);
|
||||
ctx.lineTo(x2 + radius2, y2 + height2);
|
||||
ctx.arc(x2 + radius2, y2 + height2 - radius2, radius2, Math.PI / 2, Math.PI);
|
||||
ctx.lineTo(x2, y2 + radius2);
|
||||
ctx.arc(x2 + radius2, y2 + radius2, radius2, Math.PI, -Math.PI / 2);
|
||||
ctx.closePath();
|
||||
ctx.setFillStyle(this.$util.hexToRgb(this.themeColor, .1))
|
||||
ctx.fill();
|
||||
ctx.setStrokeStyle('rgba(255, 255, 255, 0)')
|
||||
ctx.stroke();
|
||||
// 设置背景色3
|
||||
const x3 = parseInt(this.posterWidth * (16 / 311));
|
||||
const y3 = parseInt(this.posterWidth * (64 / 311));
|
||||
const width3 = parseInt(this.posterWidth - this.posterWidth * (32 / 311));
|
||||
const height3 = parseInt(this.posterWidth * (228 / 311));
|
||||
const radius3 = parseInt(this.posterWidth * (10 / 311));
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x3 + radius3, y3);
|
||||
ctx.lineTo(x3 + width3 - radius3, y3);
|
||||
ctx.arc(x3 + width3 - radius3, y3 + radius3, radius3, -Math.PI / 2, 0);
|
||||
ctx.lineTo(x3 + width3, y3 + height3 - radius3);
|
||||
ctx.arc(x3 + width3 - radius3, y3 + height3 - radius3, radius3, 0, Math.PI / 2);
|
||||
ctx.lineTo(x3 + radius3, y3 + height3);
|
||||
ctx.arc(x3 + radius3, y3 + height3 - radius3, radius3, Math.PI / 2, Math.PI);
|
||||
ctx.lineTo(x3, y3 + radius3);
|
||||
ctx.arc(x3 + radius3, y3 + radius3, radius3, Math.PI, -Math.PI / 2);
|
||||
ctx.closePath();
|
||||
const grd2 = ctx.createLinearGradient(0, 0, 0, parseInt(this.posterWidth * (321 / 311)))
|
||||
grd2.addColorStop(0, "#ffffff")
|
||||
grd2.addColorStop(1, "rgba(255, 255, 255, 0.4)")
|
||||
ctx.setFillStyle(grd2)
|
||||
ctx.fill();
|
||||
ctx.setStrokeStyle('rgba(255, 255, 255, 0)')
|
||||
ctx.stroke();
|
||||
// 创建参会凭证
|
||||
await createPoster(ctx, [{
|
||||
type: "text",
|
||||
text: "活动参会凭证",
|
||||
config: {
|
||||
x: parseInt(this.posterWidth / 2),
|
||||
y: parseInt(this.posterWidth * (36 / 311)),
|
||||
color: this.themeColor,
|
||||
font: `bold ${parseInt(this.posterWidth * (24 / 311))}px sans-serif`,
|
||||
textAlign: "center",
|
||||
lineHeight: parseInt(this.posterWidth * (28 / 311)),
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
url: this.posterAvatar,
|
||||
config: {
|
||||
x: parseInt(this.posterWidth * (32 / 311)),
|
||||
y: parseInt(this.posterWidth * (80 / 311)),
|
||||
w: parseInt(this.posterWidth * (68 / 311)),
|
||||
h: parseInt(this.posterWidth * (68 / 311)),
|
||||
r: parseInt(this.posterWidth * (6 / 248))
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: this.posterInfo.member_name,
|
||||
config: {
|
||||
x: parseInt(this.posterWidth * (108 / 311)),
|
||||
y: parseInt(this.posterWidth * (92 / 311)),
|
||||
color: "#5A5B6E",
|
||||
font: `bold ${parseInt(this.posterWidth * (18 / 311))}px sans-serif`,
|
||||
textAlign: "left",
|
||||
maxWidth: parseInt(this.posterWidth * (177 / 311)),
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: this.posterInfo.mobile,
|
||||
config: {
|
||||
x: parseInt(this.posterWidth * (108 / 311)),
|
||||
y: parseInt(this.posterWidth * (118 / 311)),
|
||||
color: "#5A5B6E",
|
||||
fontSize: parseInt(this.posterWidth * (12 / 311)).toString(),
|
||||
textAlign: "left",
|
||||
maxWidth: parseInt(this.posterWidth * (177 / 311)),
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: this.posterInfo.member_level_name,
|
||||
config: {
|
||||
x: parseInt(this.posterWidth * (108 / 311)),
|
||||
y: parseInt(this.posterWidth * (142 / 311)),
|
||||
color: "#5A5B6E",
|
||||
fontSize: parseInt(this.posterWidth * (12 / 311)).toString(),
|
||||
textAlign: "left",
|
||||
maxWidth: parseInt(this.posterWidth * (177 / 311)),
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "活动",
|
||||
config: {
|
||||
x: parseInt(this.posterWidth * (32 / 311)),
|
||||
y: parseInt(this.posterWidth * (172 / 311)),
|
||||
color: "#5A5B6E",
|
||||
font: `bold ${parseInt(this.posterWidth * (14 / 311))}px sans-serif`,
|
||||
textAlign: "left",
|
||||
maxWidth: parseInt(this.posterWidth * (247 / 311)),
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: this.posterInfo.activity_name,
|
||||
config: {
|
||||
x: parseInt(this.posterWidth * (32 / 311)),
|
||||
y: parseInt(this.posterWidth * (196 / 311)),
|
||||
color: this.themeColor,
|
||||
fontSize: parseInt(this.posterWidth * (14 / 311)).toString(),
|
||||
textAlign: "left",
|
||||
maxWidth: parseInt(this.posterWidth * (247 / 311)),
|
||||
wrap: true,
|
||||
lineNumber: 2,
|
||||
lineHeight: parseInt(this.posterWidth * (18 / 311)),
|
||||
isVerticalCenter: false
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "地址",
|
||||
config: {
|
||||
x: parseInt(this.posterWidth * (32 / 311)),
|
||||
y: parseInt(this.posterWidth * (235 / 311)),
|
||||
color: "#5A5B6E",
|
||||
font: `bold ${parseInt(this.posterWidth * (14 / 311))}px sans-serif`,
|
||||
textAlign: "left",
|
||||
maxWidth: parseInt(this.posterWidth * (247 / 311)),
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: this.posterInfo.address,
|
||||
config: {
|
||||
x: parseInt(this.posterWidth * (32 / 311)),
|
||||
y: parseInt(this.posterWidth * (259 / 311)),
|
||||
color: this.themeColor,
|
||||
fontSize: parseInt(this.posterWidth * (14 / 311)).toString(),
|
||||
textAlign: "left",
|
||||
maxWidth: parseInt(this.posterWidth * (247 / 311)),
|
||||
wrap: true,
|
||||
lineNumber: 2,
|
||||
lineHeight: parseInt(this.posterWidth * (18 / 311)),
|
||||
isVerticalCenter: false
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
url: this.posterCode,
|
||||
config: {
|
||||
x: parseInt(this.posterWidth * (106 / 311)),
|
||||
y: parseInt(this.posterWidth * (308 / 311)),
|
||||
w: parseInt(this.posterWidth * (100 / 311)),
|
||||
h: parseInt(this.posterWidth * (100 / 311)),
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "参会时，请出示二维码进行核销",
|
||||
config: {
|
||||
x: parseInt(this.posterWidth / 2),
|
||||
y: parseInt(this.posterWidth * (428 / 311)),
|
||||
color: "#5A5B6E",
|
||||
fontSize: parseInt(this.posterWidth * (14 / 311)).toString(),
|
||||
textAlign: "center",
|
||||
lineHeight: parseInt(this.posterWidth * (24 / 311)),
|
||||
},
|
||||
},
|
||||
])
|
||||
const imagePath = await canvasToTempFilePath("myCanvas", this);
|
||||
this.posterPath = imagePath;
|
||||
this.$refs.popupModal.open()
|
||||
uni.hideLoading()
|
||||
},
|
||||
// 保存参会凭证
|
||||
saveImage() {
|
||||
uni.authorize({
|
||||
scope: 'scope.writePhotosAlbum',
|
||||
success: () => {
|
||||
uni.getImageInfo({
|
||||
src: this.posterPath,
|
||||
success: (img) => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: img.path,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: "保存成功",
|
||||
icon: "success",
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error(err);
|
||||
},
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error(err)
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: () => {
|
||||
uni.showModal({
|
||||
title: '图片保存失败',
|
||||
content: '请确认是否已开启授权',
|
||||
confirmText: '开启授权',
|
||||
confirmColor: this.themeColor,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.openSetting({
|
||||
success: (setting) => {
|
||||
if (setting.authSetting["scope.writePhotosAlbum"]) {
|
||||
uni.showToast({
|
||||
title: '授权成功，请重新保存',
|
||||
icon: "none"
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '请确定已打开保存权限',
|
||||
icon: "none"
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 关闭弹窗
|
||||
onClose() {
|
||||
this.$refs.popupModal.close()
|
||||
},
|
||||
// 改变页面滚动状态
|
||||
onChange(e) {
|
||||
this.$emit("onChange", e.show)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.component-activity-poster {
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
|
||||
.poster-canvas {
|
||||
position: fixed;
|
||||
top: 100vw;
|
||||
left: 100vh;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.poster-popup {
|
||||
.popup-close {
|
||||
width: 100%;
|
||||
margin-top: -112rpx;
|
||||
margin-bottom: 32rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
.image {
|
||||
width: 80vw;
|
||||
height: 65vh;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-btn {
|
||||
margin-top: 32rpx;
|
||||
width: 336rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
padding: 26rpx 32rpx;
|
||||
border-radius: 16rpx;
|
||||
color: #FFFFFF;
|
||||
background: var(--theme-color);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
112
uniapp/小程序代码/pages/component/article/index.vue
Normal file
112
uniapp/小程序代码/pages/component/article/index.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-平台动态 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="component-article">
|
||||
<view class="article-item flex" :class="{special: showType == 1}" v-for="item in showData" :key="item.id" @click="toDetails(item)">
|
||||
<image class="item-image" :src="item.image" mode="aspectFill"></image>
|
||||
<view class="item-box flex-item flex-direction-column justify-content-between">
|
||||
<view class="box-title text-ellipsis-more">{{item.title}}</view>
|
||||
<view class="box-bottom flex justify-content-between align-items-center">
|
||||
<view class="bottom-view flex align-items-center">
|
||||
<image class="icon" src="/static/see.png" mode="aspectFit"></image>
|
||||
<text class="number">{{item.read_num}}</text>
|
||||
</view>
|
||||
<view class="bottom-time">{{item.createtime}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "articleIndex",
|
||||
props: ["showData", "showType", "showTitle"],
|
||||
methods: {
|
||||
// 跳转详情
|
||||
toDetails(item) {
|
||||
if (item.type == 2) {
|
||||
this.$util.toPage({
|
||||
mode: 4,
|
||||
path: item.link,
|
||||
})
|
||||
this.$util.request("main.article.updateReadNum", { id: item.id })
|
||||
} else {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: `/pages/article/details?id=${item.id}&title=${encodeURIComponent(this.showTitle || "")}`
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.component-article {
|
||||
.article-item {
|
||||
margin-top: 32rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
padding: 32rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&.special {
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.item-image {
|
||||
width: 220rpx;
|
||||
height: 192rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.item-box {
|
||||
margin-left: 16rpx;
|
||||
|
||||
.box-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.box-bottom {
|
||||
.bottom-view {
|
||||
.icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.number {
|
||||
margin-left: 8rpx;
|
||||
color: #8D929C;
|
||||
font-size: 24rpx;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-time {
|
||||
color: #8D929C;
|
||||
font-size: 24rpx;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
183
uniapp/小程序代码/pages/component/carousel/carousel.vue
Normal file
183
uniapp/小程序代码/pages/component/carousel/carousel.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-轮播图 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="component-carousel" :style="{height: height}">
|
||||
<swiper class="carousel-swiper" :style="{'border-radius': radius}" autoplay circular :interval="4000" :duration="800" @change="imgChange">
|
||||
<swiper-item v-for="(item, index) in showData" :key="index">
|
||||
<view class="swiper-item" :style="{'border-radius': radius}" @click="toDetails(index)">
|
||||
<image class="item-thumb" :src="item.image || item" mode="aspectFill"></image>
|
||||
<!-- #ifdef H5 -->
|
||||
<wx-open-launch-weapp class="item-absolute" :appid="stringifyToParse(item.content).appid" :path="stringifyToParse(item.content).path" v-if="item.jump_type == 4">
|
||||
<script type="text/wxtag-template">
|
||||
<style> .btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
|
||||
<view class="btn"></view>
|
||||
</script>
|
||||
</wx-open-launch-weapp>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="carousel-dots" :style="{right: right, bottom: bottom, '--theme-color': themeColor}">
|
||||
<view class="dots-item" :class="{active: imgIndex == index}" v-for="(item, index) in showData" :key="index"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
name: "carouselIndex",
|
||||
props: {
|
||||
// 组件内容
|
||||
showData: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 组件高度
|
||||
height: {
|
||||
type: String,
|
||||
default: "334rpx",
|
||||
},
|
||||
// 组件圆角
|
||||
radius: {
|
||||
type: String,
|
||||
default: "16rpx",
|
||||
},
|
||||
// 指示点位置
|
||||
right: {
|
||||
type: String,
|
||||
default: "16rpx",
|
||||
},
|
||||
// 指示点距底部距离
|
||||
bottom: {
|
||||
type: String,
|
||||
default: "16rpx",
|
||||
},
|
||||
// 组件类型 1.普通轮播图，2.商城轮播图
|
||||
showType: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
imgIndex: 0,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// JSON字符串转对象
|
||||
stringifyToParse(str) {
|
||||
try {
|
||||
return JSON.parse(str)
|
||||
} catch (e) {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 轮播图切换
|
||||
imgChange(e) {
|
||||
this.imgIndex = e.detail.current
|
||||
},
|
||||
// 跳转页面
|
||||
toDetails(index) {
|
||||
if (this.showData[index].jump_type == 1) {
|
||||
// 图文
|
||||
uni.navigateTo({
|
||||
url: `/pages/webview/imageText?type=${this.showType == 2 ? 3 : 1}&id=${this.showData[index].id}`
|
||||
})
|
||||
} else if (this.showData[index].jump_type == 2) {
|
||||
// 内部页面
|
||||
this.$util.toPage({
|
||||
path: this.showData[index].content,
|
||||
mode: 1,
|
||||
})
|
||||
} else if (this.showData[index].jump_type == 3) {
|
||||
// 外部链接
|
||||
this.$util.toPage({
|
||||
path: this.showData[index].content,
|
||||
mode: 4,
|
||||
})
|
||||
} else if (this.showData[index].jump_type == 4) {
|
||||
// 小程序
|
||||
this.$util.toPage({
|
||||
appId: JSON.parse(this.showData[index].content).appid,
|
||||
path: JSON.parse(this.showData[index].content).path,
|
||||
mode: 5,
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.component-carousel {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.carousel-swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.swiper-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.item-thumb {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.item-absolute {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-dots {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
|
||||
.dots-item {
|
||||
width: 24rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #FFFFFF;
|
||||
margin-right: 4rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--theme-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
161
uniapp/小程序代码/pages/component/chains/index.vue
Normal file
161
uniapp/小程序代码/pages/component/chains/index.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-接龙列表 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="component-chains">
|
||||
<view class="chains-item" :class="{'chains-list-item': showType == 1}" v-for="item in showData" :key="item.id" @click="toDetails(item)">
|
||||
<view class="item-title text-ellipsis">{{item.name}}</view>
|
||||
<view class="item-tag flex justify-content-between">
|
||||
<view class="tag-box flex">
|
||||
<text style="margin-left: 0;">{{item.expire_time}}</text>
|
||||
<text v-if="item.type == 1">自由接龙</text>
|
||||
<text v-else>限定接龙</text>
|
||||
</view>
|
||||
<view class="tag-box flex">
|
||||
<text>浏览{{item.page_view}}</text>
|
||||
<text>参与{{item.part_total}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-btn flex align-items-center">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<button open-type="share" class="btn-box clear flex align-items-center" @click.stop="setShareData(item)">
|
||||
<view class="icon" :style="{'background-image': 'url('+ iconInvite +')'}" v-if="iconInvite"></view>
|
||||
<text class="text">邀请填写</text>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<view class="btn-box flex align-items-center">
|
||||
<view class="icon" :style="{'background-image': 'url('+ iconInvite +')'}" v-if="iconInvite"></view>
|
||||
<text class="text">填写接龙</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view class="btn-line"></view>
|
||||
<view class="btn-box justify-content-end flex align-items-center" @click.stop="onContact(item.mobile)">
|
||||
<view class="icon" :style="{'background-image': 'url('+ iconPhone +')'}" v-if="iconPhone"></view>
|
||||
<text class="text">联系电话</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
import svgData from "@/common/svg.js"
|
||||
export default {
|
||||
name: "chainsIndex",
|
||||
props: ["showData", "showType"],
|
||||
computed: {
|
||||
...mapState({
|
||||
jielongImg: state => state.app.jielongImg,
|
||||
themeColor: state => state.app.themeColor,
|
||||
iconInvite: state => {
|
||||
return svgData.svgToUrl("invite", state.app.themeColor)
|
||||
},
|
||||
iconPhone: state => {
|
||||
return svgData.svgToUrl("phone", state.app.themeColor)
|
||||
},
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 设置分享数据
|
||||
setShareData(item) {
|
||||
this.$emit('setShareData', {
|
||||
title: item.name,
|
||||
path: '/pagesTools/sequence/details?id=' + item.id,
|
||||
imageUrl: this.jielongImg,
|
||||
})
|
||||
},
|
||||
// 去详情
|
||||
toDetails(item) {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pagesTools/sequence/details?id=" + item.id
|
||||
})
|
||||
},
|
||||
// 联系电话
|
||||
onContact(phone) {
|
||||
this.$util.toPage({
|
||||
mode: 6,
|
||||
phone: phone,
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.component-chains {
|
||||
.chains-item {
|
||||
margin-top: 32rpx;
|
||||
|
||||
&.chains-list-item {
|
||||
padding: 32rpx;
|
||||
border-radius: 10rpx;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.item-tag {
|
||||
margin-top: 16rpx;
|
||||
|
||||
.tag-box {
|
||||
text {
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-btn {
|
||||
margin-top: 32rpx;
|
||||
border-top: 1rpx solid #E8E8E8;
|
||||
padding-top: 32rpx;
|
||||
|
||||
.btn-box {
|
||||
flex: 1;
|
||||
padding: 0 48rpx;
|
||||
|
||||
.icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
background-size: 32rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-left: 8rpx;
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-line {
|
||||
width: 0;
|
||||
height: 32rpx;
|
||||
border-left: 1rpx solid #E8E8E8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
481
uniapp/小程序代码/pages/component/demand/index.vue
Normal file
481
uniapp/小程序代码/pages/component/demand/index.vue
Normal file
@@ -0,0 +1,481 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-供需列表 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="component-demand" :style="{'--theme-color': themeColor}">
|
||||
<view class="demand-item" v-for="item in showData" :key="item.id" @click="toDetails(item.id)">
|
||||
<view class="item-top">
|
||||
<view class="top-order flex align-items-center" v-if="showType == 2">
|
||||
<view class="order-number flex-item">编号：{{item.number}}</view>
|
||||
<view class="order-status">
|
||||
<view class="status-label" style="color: #FF9100;" v-if="item.state == 1">审核中</view>
|
||||
<view class="status-label" :style="{ color: themeColor }" v-else-if="item.state == 2">发布中</view>
|
||||
<view class="status-label" style="color: #FF626E;" v-else-if="item.state == 3">已驳回</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="top-info flex align-items-center" v-else>
|
||||
<image class="info-avatar" :src="item.member.avatar" mode="aspectFill"></image>
|
||||
<view class="info-box flex-item">
|
||||
<view class="title text-ellipsis">{{ item.member.name }}</view>
|
||||
<view class="subtitle text-ellipsis">{{ item.member.level_name }} | {{ item.time }}</view>
|
||||
</view>
|
||||
<view class="info-btn" @click.stop="onContact(item.member.mobile)">联系TA</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-center">
|
||||
<view class="center-title text-ellipsis">{{ item.title }}</view>
|
||||
<view class="center-content text-ellipsis-more">{{ item.content }}</view>
|
||||
<view class="center-image" :class="{'special-image': (item.images.length < 3 || item.images.length === 4)}" v-if="item.images.length">
|
||||
<view class="image-box" v-for="(img, num) in item.images" :key="num" @click.stop="previewImage(item.images, num)">
|
||||
<image class="image" :src="img" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-bottom">
|
||||
<view class="bottom-order" v-if="showType == 2">
|
||||
<view class="order-box flex justify-content-between align-items-center" v-if="item.address || item.page_view">
|
||||
<view class="box-label flex-item">
|
||||
<view class="label-box inline-flex align-items-center" v-if="item.address">
|
||||
<view class="box-icon" :style="{'background-image': 'url('+ iconAddress +')'}" v-if="iconAddress"></view>
|
||||
<text class="box-text flex-item text-ellipsis">{{item.address}}</text>
|
||||
<view class="box-bg"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="box-btn flex align-items-center">
|
||||
<image class="icon" src="/static/see.png" mode="aspectFit"></image>
|
||||
<text class="text">{{ item.page_view }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-btn flex justify-content-end">
|
||||
<view class="btn" style="background: #FFB656;" @click.stop="handleEdit(item.id)">修改</view>
|
||||
<view class="btn" style="background: #FF626E;" @click.stop="handleDelete(item.id)">删除</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom-info flex justify-content-between align-items-center" v-else>
|
||||
<view class="info-label flex-item">
|
||||
<view class="label-box inline-flex align-items-center" v-if="item.address">
|
||||
<view class="box-icon" :style="{'background-image': 'url('+ iconAddress +')'}" v-if="iconAddress"></view>
|
||||
<text class="box-text flex-item text-ellipsis">{{item.address}}</text>
|
||||
<view class="box-bg"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-other flex align-items-center">
|
||||
<view class="other-item flex align-items-center">
|
||||
<image class="icon" src="/static/see.png" mode="aspectFit"></image>
|
||||
<text class="text">{{ item.page_view }}</text>
|
||||
</view>
|
||||
<button open-type="share" class="other-item clear flex align-items-center" @click.stop="setShareData(item)">
|
||||
<image class="icon" src="/static/share.png" mode="aspectFit"></image>
|
||||
<text class="text">分享</text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
import svgData from "@/common/svg.js"
|
||||
export default {
|
||||
name: "componentDemand",
|
||||
props: ["showData", "showType"],
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
iconAddress: state => {
|
||||
return svgData.svgToUrl("address", state.app.themeColor)
|
||||
},
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 跳转详情
|
||||
toDetails(id) {
|
||||
if (this.showType == 2) {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: `/pagesDemand/demand/publish?id=${id}`
|
||||
})
|
||||
} else {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: `/pagesDemand/demand/details?id=${id}`
|
||||
})
|
||||
}
|
||||
},
|
||||
// 联系ta
|
||||
onContact(phone) {
|
||||
// 获取商圈限制
|
||||
this.$util.request("demand.businessLimit", {
|
||||
type: 2
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
if (res.data.show_status == 1) {
|
||||
this.$util.toPage({
|
||||
mode: 6,
|
||||
phone: phone,
|
||||
})
|
||||
} else {
|
||||
if (uni.getStorageSync("token")) {
|
||||
uni.showModal({
|
||||
title: "系统提示",
|
||||
content: "联系电话需成为会员后可拨打!",
|
||||
confirmColor: this.themeColor,
|
||||
confirmText: "去加入",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.switchTab({
|
||||
url: "/pages/mine/index"
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: "/pages/login/index",
|
||||
animationType: "fade-in"
|
||||
})
|
||||
}
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取商圈分类', error)
|
||||
})
|
||||
},
|
||||
// 预览图片
|
||||
previewImage(list, index) {
|
||||
uni.previewImage({
|
||||
urls: list,
|
||||
current: index
|
||||
});
|
||||
},
|
||||
// 设置分享数据
|
||||
setShareData(item) {
|
||||
this.$emit('setShareData', {
|
||||
title: item.title,
|
||||
path: '/pagesDemand/demand/details?id=' + item.id,
|
||||
imageUrl: item.images.length ? item.images[0] : item.member.avatar,
|
||||
})
|
||||
},
|
||||
// 修改供需
|
||||
handleEdit(id) {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pagesDemand/demand/edit?id=" + id
|
||||
})
|
||||
},
|
||||
// 删除供需
|
||||
handleDelete(id) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认删除此条吗?',
|
||||
confirmText: '确认删除',
|
||||
confirmColor: '#E50002',
|
||||
cancelText: '我再想想',
|
||||
cancelColor: '#999999',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true
|
||||
})
|
||||
this.$util.request("demand.businessDel", {
|
||||
id: id,
|
||||
}).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.code == 1) {
|
||||
uni.showToast({
|
||||
title: "删除成功"
|
||||
})
|
||||
this.$emit("onReset")
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('删除发布', error)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.component-demand {
|
||||
.demand-item {
|
||||
margin-top: 32rpx;
|
||||
padding: 32rpx 32rpx 24rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #FFF;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.item-top {
|
||||
.top-info {
|
||||
.info-avatar {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
margin-left: 24rpx;
|
||||
|
||||
.title {
|
||||
color: #5A5B6E;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-top: 12rpx;
|
||||
color: #666;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.info-btn {
|
||||
margin-left: 24rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
background: var(--theme-color);
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.top-order {
|
||||
padding-bottom: 32rpx;
|
||||
border-bottom: 1px solid #E4E4E4;
|
||||
|
||||
.order-number {
|
||||
color: #979797;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.order-status {
|
||||
.status-label {
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-center {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.center-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.center-content {
|
||||
margin-top: 24rpx;
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.center-image {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 16rpx;
|
||||
column-gap: 2%;
|
||||
row-gap: 14rpx;
|
||||
|
||||
.image-box {
|
||||
width: 32%;
|
||||
height: 0;
|
||||
padding-top: 32%;
|
||||
position: relative;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.special-image {
|
||||
justify-content: space-between;
|
||||
column-gap: 0;
|
||||
|
||||
.image-box {
|
||||
width: calc(50% - 8rpx);
|
||||
padding-top: calc(50% - 8rpx);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-bottom {
|
||||
.bottom-info {
|
||||
margin-top: 24rpx;
|
||||
|
||||
.info-label {
|
||||
max-width: 280rpx;
|
||||
|
||||
.label-box {
|
||||
max-width: 100%;
|
||||
padding: 6rpx 18rpx 6rpx 8rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.box-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: var(--theme-color);
|
||||
z-index: -1;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.box-icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background-size: 24rpx;
|
||||
}
|
||||
|
||||
.box-text {
|
||||
margin-left: 8rpx;
|
||||
color: var(--theme-color);
|
||||
font-size: 20rpx;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-other {
|
||||
.other-item {
|
||||
margin-left: 32rpx;
|
||||
|
||||
.icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-left: 8rpx;
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-order {
|
||||
.order-box {
|
||||
margin-top: 24rpx;
|
||||
|
||||
.box-label {
|
||||
max-width: 280rpx;
|
||||
|
||||
.label-box {
|
||||
max-width: 100%;
|
||||
padding: 6rpx 18rpx 6rpx 8rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.box-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: var(--theme-color);
|
||||
z-index: -1;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.box-icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background-size: 24rpx;
|
||||
}
|
||||
|
||||
.box-text {
|
||||
margin-left: 8rpx;
|
||||
color: var(--theme-color);
|
||||
font-size: 20rpx;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-btn {
|
||||
margin-left: 32rpx;
|
||||
|
||||
.icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-left: 8rpx;
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-btn {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.btn {
|
||||
padding: 16rpx 32rpx;
|
||||
border-radius: 8rpx;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
227
uniapp/小程序代码/pages/component/diy/activityDiy.vue
Normal file
227
uniapp/小程序代码/pages/component/diy/activityDiy.vue
Normal file
@@ -0,0 +1,227 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-商会活动 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="diy-activity" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
|
||||
<view class="activity-title" :style="{marginBottom: titleSpace}" v-if="showParams.showTitle">
|
||||
<view :style="{fontSize: titleFontSize,fontWeight: showStyle.titleFontStyle, color: showStyle.titleColor}">{{showParams.titleText}}</view>
|
||||
<view :style="{fontSize: titleBtnSize, color: showStyle.titleBtnColor}" @click="toMore()">
|
||||
<text v-if="showParams.titleBtnType == 'text'">{{showParams.titleBtnText}}</text>
|
||||
<view :style="{'background-image': 'url('+ titleIconMore +')', width: titleIconSize, height: titleIconSize, backgroundSize: titleIconSize}" v-else-if="titleIconMore"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="activity-list" :style="{rowGap: itemSpace}" v-if="activityList.length">
|
||||
<view class="list-item flex" v-for="item in activityList" :key="item.id" @click="toDetails(item.id, item.activity_auth)">
|
||||
<image class="item-image" :src="item.images" mode="aspectFill" v-if="showParams.showImg" :style="{ width: imgWidth, height: imgHeight, borderRadius: borderRadius}"></image>
|
||||
<view class="item-info flex-item" :style="{height: imgHeight}">
|
||||
<view class="info-title text-ellipsis" :style="{fontSize: nameSize, fontWeight: showStyle.nameWeight}">{{item.name}}</view>
|
||||
<view class="info-tag flex align-items-center">
|
||||
<view class="icon" :style="{width: iconSize, height: iconSize, backgroundSize: iconSize, backgroundImage: 'url('+ iconTime +')'}" v-if="showStyle.showIcon && iconTime"></view>
|
||||
<text class="text flex-item text-ellipsis" :style="{fontSize: contentSize}">{{item.start_time}} | {{item.week}}</text>
|
||||
</view>
|
||||
<view class="info-tag flex align-items-center" v-if="item.organizing_method == 1">
|
||||
<view class="icon" :style="{width: iconSize, height: iconSize, backgroundSize: iconSize, backgroundImage: 'url('+ iconNetwork +')'}" v-if="showStyle.showIcon && iconNetwork"></view>
|
||||
<text class="text flex-item text-ellipsis" :style="{fontSize: contentSize}">报名成功后查看</text>
|
||||
</view>
|
||||
<view class="info-tag flex align-items-center" v-else-if="item.organizing_method == 2">
|
||||
<view class="icon" :style="{width: iconSize, height: iconSize, backgroundSize: iconSize, backgroundImage: 'url('+ iconLocation +')'}" v-if="showStyle.showIcon && iconLocation"></view>
|
||||
<text class="text flex-item text-ellipsis" :style="{fontSize: contentSize}">{{item.address}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<empty top="0" padding="0" width="200rpx" size="28rpx" title="暂无相关内容~" v-else></empty>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
import svgData from "@/common/svg.js"
|
||||
export default {
|
||||
name: "activityDiy",
|
||||
props: ['showStyle', 'showParams'],
|
||||
data() {
|
||||
return {
|
||||
// 活动列表
|
||||
activityList: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor
|
||||
}),
|
||||
titleFontSize() {
|
||||
return uni.upx2px(this.showStyle.titleFontSize * 2) + 'px';
|
||||
},
|
||||
titleBtnSize() {
|
||||
return uni.upx2px(this.showStyle.titleBtnSize * 2) + 'px';
|
||||
},
|
||||
titleIconMore() {
|
||||
return svgData.svgToUrl("more", this.showStyle.titleBtnColor)
|
||||
},
|
||||
titleIconSize() {
|
||||
return uni.upx2px(this.showStyle.titleIconSize * 2) + 'px';
|
||||
},
|
||||
titleSpace() {
|
||||
return uni.upx2px(this.showStyle.titleSpace * 2) + 'px';
|
||||
},
|
||||
itemBorderRadius() {
|
||||
return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
|
||||
},
|
||||
imgWidth() {
|
||||
return uni.upx2px(this.showStyle.imgWidth * 2) + 'px';
|
||||
},
|
||||
imgHeight() {
|
||||
return uni.upx2px(this.showStyle.imgHeight * 2) + 'px';
|
||||
},
|
||||
borderRadius() {
|
||||
return uni.upx2px(this.showStyle.borderRadius * 2) + 'px';
|
||||
},
|
||||
nameSize() {
|
||||
return uni.upx2px(this.showStyle.nameSize * 2) + 'px';
|
||||
},
|
||||
iconSize() {
|
||||
return uni.upx2px(this.showStyle.iconSize * 2) + 'px';
|
||||
},
|
||||
iconTime() {
|
||||
return svgData.svgToUrl("time", this.showStyle.iconColor)
|
||||
},
|
||||
iconLocation() {
|
||||
return svgData.svgToUrl("location", this.showStyle.iconColor)
|
||||
},
|
||||
iconNetwork() {
|
||||
return svgData.svgToUrl("network", this.showStyle.iconColor)
|
||||
},
|
||||
contentSize() {
|
||||
return uni.upx2px(this.showStyle.contentSize * 2) + 'px';
|
||||
},
|
||||
paddingTop() {
|
||||
return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
|
||||
},
|
||||
paddingLeft() {
|
||||
return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
|
||||
},
|
||||
itemSpace() {
|
||||
return uni.upx2px(this.showStyle.itemSpace * 2) + 'px';
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
showParams: {
|
||||
handler(value) {
|
||||
if (value) this.getActivityList()
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取活动列表
|
||||
getActivityList() {
|
||||
this.$util.request("activity.list", {
|
||||
page: 1,
|
||||
limit: this.showParams.count
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
this.activityList = res.data.data
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取活动列表 ', error)
|
||||
})
|
||||
},
|
||||
// 跳转详情
|
||||
toDetails(id, state) {
|
||||
if (state == 2) {
|
||||
if (!uni.getStorageSync("token")) {
|
||||
uni.showModal({
|
||||
title: "系统提示",
|
||||
content: "该活动为会员专属，请登录后查看",
|
||||
confirmColor: this.themeColor,
|
||||
confirmText: "前往登录",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/login/index"
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pagesActivity/index/details?id=" + id
|
||||
})
|
||||
} else {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pagesActivity/index/details?id=" + id
|
||||
})
|
||||
}
|
||||
},
|
||||
// 跳转活动列表
|
||||
toMore() {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pagesActivity/index/index"
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-activity {
|
||||
.activity-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.activity-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.list-item {
|
||||
.item-image {
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.info-title {
|
||||
color: #5A5B6E;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.info-tag {
|
||||
.icon {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #8D929C;
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
299
uniapp/小程序代码/pages/component/diy/albumDiy.vue
Normal file
299
uniapp/小程序代码/pages/component/diy/albumDiy.vue
Normal file
@@ -0,0 +1,299 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-商会相册 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="component-album" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
|
||||
<view class="album-title" :style="{marginBottom: titleSpace}" v-if="showParams.showTitle">
|
||||
<view :style="{fontSize: titleFontSize,fontWeight: showStyle.titleFontStyle, color: showStyle.titleColor}">{{showParams.titleText}}</view>
|
||||
<view :style="{fontSize: titleBtnSize, color: showStyle.titleBtnColor}" @click="toMore()">
|
||||
<text v-if="showParams.titleBtnType == 'text'">{{showParams.titleBtnText}}</text>
|
||||
<view :style="{'background-image': 'url('+ titleIconMore +')', width: titleIconSize, height: titleIconSize, backgroundSize: titleIconSize}" v-else-if="titleIconMore"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="album-list" :style="{rowGap: itemSpace}" v-if="albumList.length">
|
||||
<view class="list-item flex" v-for="item in albumList" :key="item.id" @click="toDetails(item.id)">
|
||||
<view class="item-timeline">
|
||||
<view class="timeline-time" v-if="item.showTime.month && item.showTime.day">
|
||||
<text :style="{fontSize: timeSize}">{{item.showTime.month}}/</text>
|
||||
<text :style="{fontSize: timeSizeSmall}">{{item.showTime.day}}</text>
|
||||
</view>
|
||||
<view class="timeline-time" v-else>{{item.release_date}}</view>
|
||||
<view class="timeline-point" :style="{background: showStyle.iconColor}"></view>
|
||||
<view class="timeline-line"></view>
|
||||
</view>
|
||||
<view class="item-content flex-item">
|
||||
<view class="content-title text-ellipsis-more" :style="{fontSize: nameSize, fontWeight: showStyle.nameWeight}">{{item.name}}</view>
|
||||
<view class="content-box" v-if="item.files">
|
||||
<block v-if="item.type == 1">
|
||||
<view class="box-single" v-if="item.showImages.length == 1">
|
||||
<image class="image" :src="item.showImages[0]" :style="{borderRadius: borderRadius}" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="box-multiple" v-else-if="item.showImages.length">
|
||||
<view class="multiple-image" v-for="(img, index) in item.showImages" :key="index">
|
||||
<image class="image" :src="img" :style="{borderRadius: borderRadius}" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="box-cover" v-else-if="item.type == 2">
|
||||
<image class="cover-image" :src="item.image" mode="aspectFill"></image>
|
||||
<image class="cover-play" src="/static/play.png" mode="aspectFit"></image>
|
||||
<view class="cover-mask"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<empty top="0" padding="0" width="200rpx" size="28rpx" title="暂无相关内容~" v-else></empty>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import svgData from "@/common/svg.js"
|
||||
export default {
|
||||
name: "albumDiy",
|
||||
props: ['showStyle', 'showParams'],
|
||||
data() {
|
||||
return {
|
||||
// 相册列表
|
||||
albumList: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
titleFontSize() {
|
||||
return uni.upx2px(this.showStyle.titleFontSize * 2) + 'px';
|
||||
},
|
||||
titleBtnSize() {
|
||||
return uni.upx2px(this.showStyle.titleBtnSize * 2) + 'px';
|
||||
},
|
||||
titleIconMore() {
|
||||
return svgData.svgToUrl("more", this.showStyle.titleBtnColor)
|
||||
},
|
||||
titleIconSize() {
|
||||
return uni.upx2px(this.showStyle.titleIconSize * 2) + 'px';
|
||||
},
|
||||
titleSpace() {
|
||||
return uni.upx2px(this.showStyle.titleSpace * 2) + 'px';
|
||||
},
|
||||
itemBorderRadius() {
|
||||
return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
|
||||
},
|
||||
timeSize() {
|
||||
return uni.upx2px(this.showStyle.timeSize * 2) + 'px';
|
||||
},
|
||||
timeSizeSmall() {
|
||||
return uni.upx2px((this.showStyle.timeSize - 4) * 2) + 'px';
|
||||
},
|
||||
nameSize() {
|
||||
return uni.upx2px(this.showStyle.nameSize * 2) + 'px';
|
||||
},
|
||||
borderRadius() {
|
||||
return uni.upx2px(this.showStyle.borderRadius * 2) + 'px';
|
||||
},
|
||||
paddingTop() {
|
||||
return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
|
||||
},
|
||||
paddingLeft() {
|
||||
return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
|
||||
},
|
||||
itemSpace() {
|
||||
return uni.upx2px(this.showStyle.itemSpace * 2) + 'px';
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
showParams: {
|
||||
handler(value) {
|
||||
if (value) this.getAlbumList()
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取商会相册
|
||||
getAlbumList() {
|
||||
this.$util.request("album.albumDiyList", {
|
||||
limit: this.showParams.count,
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
this.albumList = res.data
|
||||
for (let i in this.albumList) {
|
||||
if (this.albumList[i].release_date) {
|
||||
this.albumList[i].showTime = this.cutDate(this.albumList[i].release_date)
|
||||
}
|
||||
if (this.albumList[i].type == 1 && this.albumList[i].files) {
|
||||
if (typeof(this.albumList[i].files) == "string") {
|
||||
this.albumList[i].showImages = this.albumList[i].files.split(",")
|
||||
} else {
|
||||
this.albumList[i].showImages = this.albumList[i].files
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取相册列表', error)
|
||||
})
|
||||
},
|
||||
// 截取日期
|
||||
cutDate(time) {
|
||||
let parts = time.split('/');
|
||||
let result = {}
|
||||
if (parts && parts.length == 3) {
|
||||
result = {
|
||||
month: parts[1],
|
||||
day: parts[2]
|
||||
};
|
||||
}
|
||||
return result
|
||||
},
|
||||
// 跳转相册详情
|
||||
toDetails(id) {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pagesTools/album/details?id=" + id
|
||||
})
|
||||
},
|
||||
// 跳转相册列表
|
||||
toMore() {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pagesTools/album/index"
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.component-album {
|
||||
.album-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.album-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.list-item {
|
||||
.item-timeline {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.timeline-time {
|
||||
color: #5A5B6E;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.timeline-point {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
border-radius: 4rpx;
|
||||
background: var(--theme-color);
|
||||
}
|
||||
|
||||
.timeline-line {
|
||||
width: 2rpx;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
background: #F0F0F0;
|
||||
}
|
||||
}
|
||||
|
||||
.item-content {
|
||||
margin-left: 16rpx;
|
||||
position: relative;
|
||||
|
||||
.content-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.content-box {
|
||||
margin-top: 16rpx;
|
||||
|
||||
.box-single {
|
||||
width: 100%;
|
||||
height: 240rpx;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.box-multiple {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 2%;
|
||||
row-gap: 16rpx;
|
||||
|
||||
.multiple-image {
|
||||
width: 32%;
|
||||
height: 0;
|
||||
padding-top: 32%;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-cover {
|
||||
width: 100%;
|
||||
height: 240rpx;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.cover-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cover-play {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.cover-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
231
uniapp/小程序代码/pages/component/diy/articleDiy.vue
Normal file
231
uniapp/小程序代码/pages/component/diy/articleDiy.vue
Normal file
@@ -0,0 +1,231 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-平台动态 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="diy-article" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
|
||||
<view class="article-title" :style="{marginBottom: titleSpace}" v-if="showParams.showTitle">
|
||||
<view :style="{fontSize: titleFontSize,fontWeight: showStyle.titleFontStyle, color: showStyle.titleColor}">{{showParams.titleText}}</view>
|
||||
<view :style="{fontSize: titleBtnSize, color: showStyle.titleBtnColor}" @click="toMore()">
|
||||
<text v-if="showParams.titleBtnType == 'text'">{{showParams.titleBtnText}}</text>
|
||||
<view :style="{'background-image': 'url('+ titleIconMore +')', width: titleIconSize, height: titleIconSize, backgroundSize: titleIconSize}" v-else-if="titleIconMore"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="article-list" :style="{rowGap: itemSpace }" v-if="articleList.length">
|
||||
<view class="list-item" :class="{'flex-row-reverse': showStyle.imgFloat == 'right'}" v-for="(item,index) in articleList" :key="index" @click="toDetails(item)">
|
||||
<view class="item-left" v-if="showParams.showImg">
|
||||
<image mode="aspectFill" :src="item.image" :style="{ width: imgWidth, height: imgHeight, float: showStyle.imgFloat || 'left', borderRadius: borderRadius}"></image>
|
||||
</view>
|
||||
<view class="item-right" :style="{height: imgHeight}">
|
||||
<view class="right-title" :style="{fontSize: nameSize, fontWeight: showStyle.nameWeight}">{{item.title}}</view>
|
||||
<view class="right-group flex align-items-center">
|
||||
<view class="group-view flex align-items-center" v-if="showParams.showReadNum">
|
||||
<image class="icon" src="/static/see.png" mode="aspectFit" :style="{width: viewSize, height: viewSize}"></image>
|
||||
<text class="number" :style="{fontSize: dateSize}">{{item.read_num}}</text>
|
||||
</view>
|
||||
<view class="group-date flex-item" :style="{fontSize: dateSize, textAlign: (!showParams.showReadNum && showStyle.imgFloat == 'right') ? 'left' : 'right'}">{{item.createtime}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<empty top="0" padding="0" width="200rpx" size="28rpx" title="暂无相关内容~" v-else></empty>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import svgData from "@/common/svg.js"
|
||||
export default {
|
||||
name: 'articleDiy',
|
||||
props: ['showStyle', 'showParams'],
|
||||
data() {
|
||||
return {
|
||||
articleList: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
titleFontSize() {
|
||||
return uni.upx2px(this.showStyle.titleFontSize * 2) + 'px';
|
||||
},
|
||||
titleBtnSize() {
|
||||
return uni.upx2px(this.showStyle.titleBtnSize * 2) + 'px';
|
||||
},
|
||||
titleIconMore() {
|
||||
return svgData.svgToUrl("more", this.showStyle.titleBtnColor)
|
||||
},
|
||||
titleIconSize() {
|
||||
return uni.upx2px(this.showStyle.titleIconSize * 2) + 'px';
|
||||
},
|
||||
titleSpace() {
|
||||
return uni.upx2px(this.showStyle.titleSpace * 2) + 'px';
|
||||
},
|
||||
itemBorderRadius() {
|
||||
return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
|
||||
},
|
||||
imgWidth() {
|
||||
return uni.upx2px(this.showStyle.imgWidth * 2) + 'px';
|
||||
},
|
||||
imgHeight() {
|
||||
return uni.upx2px(this.showStyle.imgHeight * 2) + 'px';
|
||||
},
|
||||
borderRadius() {
|
||||
return uni.upx2px(this.showStyle.borderRadius * 2) + 'px';
|
||||
},
|
||||
nameSize() {
|
||||
return uni.upx2px(this.showStyle.nameSize * 2) + 'px';
|
||||
},
|
||||
dateSize() {
|
||||
return uni.upx2px(this.showStyle.dateSize * 2) + 'px';
|
||||
},
|
||||
viewSize() {
|
||||
return uni.upx2px((this.showStyle.dateSize + 4) * 2) + 'px';
|
||||
},
|
||||
paddingTop() {
|
||||
return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
|
||||
},
|
||||
paddingLeft() {
|
||||
return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
|
||||
},
|
||||
itemSpace() {
|
||||
return uni.upx2px(this.showStyle.itemSpace * 2) + 'px';
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
showParams: {
|
||||
handler(value) {
|
||||
if (value) this.getArticleList()
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取新闻列表
|
||||
getArticleList() {
|
||||
let catId = ""
|
||||
if (this.showParams.category) {
|
||||
catId = this.showParams.category
|
||||
} else if (this.showParams.link && this.showParams.link.type == "Article") {
|
||||
catId = this.showParams.link.path.split("?id=")[1]
|
||||
}
|
||||
this.$util.request("main.article.list", {
|
||||
page: 1,
|
||||
limit: this.showParams.count,
|
||||
cat_id: catId
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
this.articleList = res.data.data
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取新闻列表 ', error)
|
||||
})
|
||||
},
|
||||
// 跳转查看更多
|
||||
toMore() {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: `/pages/article/index?id=${this.showParams.category}&title=${encodeURIComponent(this.showParams.titleText || "")}`
|
||||
})
|
||||
},
|
||||
// 跳转新闻详情
|
||||
toDetails(item) {
|
||||
if (item.type == 2) {
|
||||
this.$util.toPage({
|
||||
mode: 4,
|
||||
path: item.link,
|
||||
})
|
||||
this.$util.request("main.article.updateReadNum", { id: item.id })
|
||||
} else {
|
||||
var title = ""
|
||||
if (this.showTitle) title = this.showParams.titleText || ""
|
||||
else title = this.showParams.categoryName || ""
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: `/pages/article/details?id=${item.id}&title=${title || ""}`
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-article {
|
||||
.article-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.article-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.list-item {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 10px;
|
||||
|
||||
&.flex-row-reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.item-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
|
||||
.right-title {
|
||||
line-height: 1.3;
|
||||
color: #333;
|
||||
display: -webkit-box;
|
||||
word-break: break-all;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
|
||||
.right-group {
|
||||
margin-top: 16rpx;
|
||||
column-gap: 8px;
|
||||
|
||||
.group-view {
|
||||
.icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.number {
|
||||
margin-left: 8rpx;
|
||||
color: #5A5B6E;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
.group-date {
|
||||
color: #5A5B6E;
|
||||
line-height: 1.2;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
30
uniapp/小程序代码/pages/component/diy/blankDiy.vue
Normal file
30
uniapp/小程序代码/pages/component/diy/blankDiy.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-辅助空白 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="diy-blank" :style="{height: height, background: showStyle.background, borderRadius: itemBorderRadius}"></view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'blankDiy',
|
||||
props: ['showStyle'],
|
||||
computed: {
|
||||
itemBorderRadius() {
|
||||
return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
|
||||
},
|
||||
height() {
|
||||
return uni.upx2px(this.showStyle.height * 2) + 'px';
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
147
uniapp/小程序代码/pages/component/diy/carouselDiy.vue
Normal file
147
uniapp/小程序代码/pages/component/diy/carouselDiy.vue
Normal file
@@ -0,0 +1,147 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-图片轮播 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="diy-carousel" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
|
||||
<swiper class="carousel-list" autoplay :interval="showParams.interval" :duration="500" circular @change='change' :previous-margin="showParams.type === 'card' ? '120rpx' : '0rpx'" :next-margin="showParams.type === 'card' ? '120rpx' : '0rpx'" :style="{height: height, marginTop:showParams.type === 'card' ? '20rpx' : '0rpx', borderRadius: borderRadius}">
|
||||
<swiper-item v-for="(item, index) in showData" :key='index'>
|
||||
<button class="list-item clear" :class="[showParams.type != 'card' ? '' : (current == index ? 'crown-active' : 'crown')]" open-type="contact" :style="{width: iconSize, height: iconSize}" v-if="item.link && item.link.type == 'Service'">
|
||||
<image class="item-img" :src="getImagePath(item.imgUrl)" :style="{ borderRadius: showParams.type === 'card' ? '10rpx' : '0rpx'}" mode="aspectFill" @click="onClick(item.link)"></image>
|
||||
</button>
|
||||
<view class="list-item" :class="[showParams.type != 'card' ? '' : (current == index ? 'crown-active' : 'crown')]" v-else>
|
||||
<image class="item-img" :src="getImagePath(item.imgUrl)" :style="{ borderRadius: showParams.type === 'card' ? '10rpx' : '0rpx'}" mode="aspectFill" @click="onClick(item.link)"></image>
|
||||
<!-- #ifdef H5 -->
|
||||
<wx-open-launch-weapp class="item-absolute" :appid="item.link.appid" :path="item.link.path" v-if="item.link && item.link.type == 'WXMp'">
|
||||
<script type="text/wxtag-template">
|
||||
<style> .btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
|
||||
<view class="btn"></view>
|
||||
</script>
|
||||
</wx-open-launch-weapp>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="carousel-dots flex" :style="{paddingBottom: paddingTop}">
|
||||
<view class="dots-item" :style="{background: current == i ? (showStyle.dotColor || themeColor) : '#ffffff'}" v-for="(d, i) in showData" :key='i'></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
name: 'carouselDiy',
|
||||
props: ['showStyle', 'showData', 'showParams', 'domain'],
|
||||
data() {
|
||||
return {
|
||||
current: 0,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
}),
|
||||
itemBorderRadius() {
|
||||
return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
|
||||
},
|
||||
height() {
|
||||
return uni.upx2px(this.showStyle.height * 2) + 'px';
|
||||
},
|
||||
borderRadius() {
|
||||
return uni.upx2px(this.showStyle.borderRadius * 2) + 'px';
|
||||
},
|
||||
paddingTop() {
|
||||
return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
|
||||
},
|
||||
paddingLeft() {
|
||||
return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 获取图片地址
|
||||
getImagePath(url) {
|
||||
if (url.indexOf('http') > -1) {
|
||||
return url
|
||||
} else {
|
||||
return this.domain + url
|
||||
}
|
||||
},
|
||||
// 点击事件
|
||||
onClick(e) {
|
||||
if (!e) return;
|
||||
this.$emit("onClick", e)
|
||||
},
|
||||
// 改变事件
|
||||
change(event) {
|
||||
this.current = event.detail.current
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.diy-carousel {
|
||||
position: relative;
|
||||
|
||||
.carousel-list {
|
||||
overflow: hidden;
|
||||
|
||||
.list-item {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
transition: 1.2s;
|
||||
|
||||
&.crown {
|
||||
transform: scale(0.93, 0.85);
|
||||
}
|
||||
|
||||
&.crown-active {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.item-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.item-absolute {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-dots {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 24rpx;
|
||||
|
||||
.dots-item {
|
||||
width: 24rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #FFFFFF;
|
||||
margin-right: 4rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
299
uniapp/小程序代码/pages/component/diy/chainsDiy.vue
Normal file
299
uniapp/小程序代码/pages/component/diy/chainsDiy.vue
Normal file
@@ -0,0 +1,299 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-活动接龙 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="diy-chains" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
|
||||
<view class="chains-title" :style="{marginBottom: titleSpace}" v-if="showParams.showTitle">
|
||||
<view :style="{fontSize: titleFontSize,fontWeight: showStyle.titleFontStyle, color: showStyle.titleColor}">{{showParams.titleText}}</view>
|
||||
<view :style="{fontSize: titleBtnSize, color: showStyle.titleBtnColor}" @click="toMore()">
|
||||
<text v-if="showParams.titleBtnType == 'text'">{{showParams.titleBtnText}}</text>
|
||||
<view :style="{'background-image': 'url('+ titleIconMore +')', width: titleIconSize, height: titleIconSize, backgroundSize: titleIconSize}" v-else-if="titleIconMore"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="chains-list" :style="{rowGap: itemSpace}" v-if="chainsList.length">
|
||||
<view class="list-item" v-for="item in chainsList" :key="item.id" @click="toDetails(item.id, item.jielong_auth)">
|
||||
<view class="item-title text-ellipsis" :style="{fontSize: nameSize, fontWeight: showStyle.nameWeight}">{{item.name}}</view>
|
||||
<view class="item-tag flex justify-content-between">
|
||||
<view class="tag-box flex" :style="{fontSize: contentSize}">
|
||||
<text style="margin-left: 0;">{{item.expire_time}}</text>
|
||||
<text v-if="item.type == 1">自由接龙</text>
|
||||
<text v-else>限定接龙</text>
|
||||
</view>
|
||||
<view class="tag-box flex" :style="{fontSize: contentSize}">
|
||||
<text>浏览{{item.page_view}}</text>
|
||||
<text>参与{{item.part_total}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-btn flex align-items-center">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<button open-type="share" class="btn-box clear flex align-items-center" @click.stop="setShareData(item)">
|
||||
<view class="icon" :style="{width: iconSize, height: iconSize, backgroundSize: iconSize, backgroundImage: 'url('+ iconInvite +')'}" v-if="showStyle.showIcon && iconInvite"></view>
|
||||
<text class="text" :style="{fontSize: btnSize}">邀请填写</text>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<view class="btn-box flex align-items-center">
|
||||
<view class="icon" :style="{width: iconSize, height: iconSize, backgroundSize: iconSize, backgroundImage: 'url('+ iconInvite +')'}" v-if="showStyle.showIcon && iconInvite"></view>
|
||||
<text class="text" :style="{fontSize: btnSize}">填写接龙</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view class="btn-line"></view>
|
||||
<view class="btn-box justify-content-end flex align-items-center" @click.stop="onContact(item.mobile)">
|
||||
<view class="icon" :style="{width: iconSize, height: iconSize, backgroundSize: iconSize, backgroundImage: 'url('+ iconPhone +')'}" v-if="showStyle.showIcon && iconPhone"></view>
|
||||
<text class="text" :style="{fontSize: btnSize}">电话</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<empty top="0" padding="0" width="200rpx" size="28rpx" title="暂无相关内容~" v-else></empty>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
import svgData from "@/common/svg.js"
|
||||
export default {
|
||||
name: "chainsDiy",
|
||||
props: ['showStyle', 'showParams'],
|
||||
data() {
|
||||
return {
|
||||
chainsList: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
jielongImg: state => state.app.jielongImg,
|
||||
}),
|
||||
titleFontSize() {
|
||||
return uni.upx2px(this.showStyle.titleFontSize * 2) + 'px';
|
||||
},
|
||||
titleBtnSize() {
|
||||
return uni.upx2px(this.showStyle.titleBtnSize * 2) + 'px';
|
||||
},
|
||||
titleIconMore() {
|
||||
return svgData.svgToUrl("more", this.showStyle.titleBtnColor)
|
||||
},
|
||||
titleIconSize() {
|
||||
return uni.upx2px(this.showStyle.titleIconSize * 2) + 'px';
|
||||
},
|
||||
titleSpace() {
|
||||
return uni.upx2px(this.showStyle.titleSpace * 2) + 'px';
|
||||
},
|
||||
itemBorderRadius() {
|
||||
return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
|
||||
},
|
||||
nameSize() {
|
||||
return uni.upx2px(this.showStyle.nameSize * 2) + 'px';
|
||||
},
|
||||
contentSize() {
|
||||
return uni.upx2px(this.showStyle.contentSize * 2) + 'px';
|
||||
},
|
||||
iconSize() {
|
||||
return uni.upx2px(this.showStyle.iconSize * 2) + 'px';
|
||||
},
|
||||
btnSize() {
|
||||
return uni.upx2px(this.showStyle.btnSize * 2) + 'px';
|
||||
},
|
||||
iconInvite() {
|
||||
return svgData.svgToUrl("invite", this.showStyle.iconColor)
|
||||
},
|
||||
iconPhone() {
|
||||
return svgData.svgToUrl("phone", this.showStyle.iconColor)
|
||||
},
|
||||
paddingTop() {
|
||||
return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
|
||||
},
|
||||
paddingLeft() {
|
||||
return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
|
||||
},
|
||||
itemSpace() {
|
||||
return uni.upx2px(this.showStyle.itemSpace * 2) + 'px';
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
showParams: {
|
||||
handler(value) {
|
||||
if (value) this.getChainsList()
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取活动接龙
|
||||
getChainsList() {
|
||||
this.$util.request("sequence.chainsList", {
|
||||
page: 1,
|
||||
limit: this.showParams.count,
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
this.chainsList = res.data.data
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取接龙列表', error)
|
||||
})
|
||||
},
|
||||
// 跳转接龙详情
|
||||
toDetails(id, state) {
|
||||
if (state == 2) {
|
||||
this.getMemberState(() => {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pagesTools/sequence/details?id=" + id
|
||||
})
|
||||
})
|
||||
} else {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pagesTools/sequence/details?id=" + id
|
||||
})
|
||||
}
|
||||
},
|
||||
// 获取会员状态
|
||||
getMemberState(fn) {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true,
|
||||
})
|
||||
this.$util.request("member.state").then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.code == 1) {
|
||||
if (res.data.state.state == 6) {
|
||||
fn()
|
||||
} else if (res.data.state.state == -1) {
|
||||
uni.showModal({
|
||||
title: "系统提示",
|
||||
content: "此页面需成为会员后可查看！",
|
||||
confirmColor: this.themeColor,
|
||||
confirmText: "去加入",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pages/member/apply/index"
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.showModal({
|
||||
title: "系统提示",
|
||||
content: "此页面需成为会员后可查看！",
|
||||
confirmColor: this.themeColor,
|
||||
confirmText: "前往查看",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.switchTab({
|
||||
url: "/pages/mine/index"
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取会员状态 ', error)
|
||||
})
|
||||
},
|
||||
// 跳转接龙列表
|
||||
toMore() {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pagesTools/sequence/index"
|
||||
})
|
||||
},
|
||||
// 联系电话
|
||||
onContact(phone) {
|
||||
this.$util.toPage({
|
||||
mode: 6,
|
||||
phone: phone,
|
||||
})
|
||||
},
|
||||
// 设置分享数据
|
||||
setShareData(item) {
|
||||
this.$emit('setShareData', {
|
||||
title: item.name,
|
||||
path: '/pagesTools/sequence/details?id=' + item.id,
|
||||
imageUrl: this.jielongImg,
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-chains {
|
||||
.chains-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.chains-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.list-item {
|
||||
.item-title {
|
||||
color: #5A5B6E;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.item-tag {
|
||||
margin-top: 16rpx;
|
||||
|
||||
.tag-box {
|
||||
text {
|
||||
color: #999999;
|
||||
line-height: 1.4;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-btn {
|
||||
margin-top: 32rpx;
|
||||
border-top: 1rpx solid #E8E8E8;
|
||||
padding-top: 32rpx;
|
||||
|
||||
.btn-box {
|
||||
flex: 1;
|
||||
padding: 0 48rpx;
|
||||
|
||||
.text {
|
||||
margin-left: 8rpx;
|
||||
color: #5A5B6E;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-line {
|
||||
width: 0;
|
||||
height: 32rpx;
|
||||
border-left: 1rpx solid #E8E8E8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
266
uniapp/小程序代码/pages/component/diy/cubeDiy.vue
Normal file
266
uniapp/小程序代码/pages/component/diy/cubeDiy.vue
Normal file
@@ -0,0 +1,266 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-图片魔方 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="diy-cube" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
|
||||
<!-- 橱窗布局 -->
|
||||
<view class="cube-display" v-if="showStyle.layout == -1 ">
|
||||
<view class="display-left" :style="{width: showStyle.imgWidth + '%', paddingReft: itemSpace}" v-if="showStyle.imgFloat == 'left'">
|
||||
<button class="clear" open-type="contact" v-if="showData[0].link && showData[0].link.type == 'Service'">
|
||||
<image class="image" :src="getImagePath(showData[0].imgUrl)" mode="widthFix" :style="{borderRadius: borderRadius}"></image>
|
||||
</button>
|
||||
<block v-else>
|
||||
<image class="image" @click="onClick(showData[0].link)" :src="getImagePath(showData[0].imgUrl)" mode="widthFix" :style="{borderRadius: borderRadius}"></image>
|
||||
<!-- #ifdef H5 -->
|
||||
<wx-open-launch-weapp class="diy-cube-absolute" :appid="showData[0].link.appid" :path="showData[0].link.path" v-if="showData[0].link && showData[0].link.type == 'WXMp'">
|
||||
<script type="text/wxtag-template">
|
||||
<style> .btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
|
||||
<view class="btn"></view>
|
||||
</script>
|
||||
</wx-open-launch-weapp>
|
||||
<!-- #endif -->
|
||||
</block>
|
||||
</view>
|
||||
<view class="display-right" :style="'width:' + (100 - showStyle.imgWidth) + '%; ' + (showStyle.imgFloat == 'right' ? ('padding-right:' + itemSpace) : ('padding-left:' + itemSpace))" v-if="showStyle.model == 1">
|
||||
<view class="right-1" v-if="showData.length >= 2" :style="{paddingBottom: itemSpace}">
|
||||
<button class="clear" open-type="contact" v-if="showData[1].link && showData[1].link.type == 'Service'">
|
||||
<image class="image" :src="getImagePath(showData[1].imgUrl)" mode="widthFix" :style="{borderRadius: borderRadius}"></image>
|
||||
</button>
|
||||
<block v-else>
|
||||
<image class="image" @click="onClick(showData[1].link)" :src="getImagePath(showData[1].imgUrl)" mode="widthFix" :style="{borderRadius: borderRadius}"></image>
|
||||
<!-- #ifdef H5 -->
|
||||
<wx-open-launch-weapp class="diy-cube-absolute" :appid="showData[1].link.appid" :path="showData[1].link.path" v-if="showData[1].link && showData[1].link.type == 'WXMp'">
|
||||
<script type="text/wxtag-template">
|
||||
<style> .btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
|
||||
<view class="btn"></view>
|
||||
</script>
|
||||
</wx-open-launch-weapp>
|
||||
<!-- #endif -->
|
||||
</block>
|
||||
</view>
|
||||
<view class="right-2" :style="{paddingTop: itemSpace}">
|
||||
<view class="right-2-left" v-if="showData.length >= 3" :style="{paddingRight: itemSpace}">
|
||||
<button class="clear" open-type="contact" v-if="showData[2].link && showData[2].link.type == 'Service'">
|
||||
<image class="image" :src="getImagePath(showData[2].imgUrl)" mode="widthFix" :style="{borderRadius: borderRadius}"></image>
|
||||
</button>
|
||||
<block v-else>
|
||||
<image class="image" @click="onClick(showData[2].link)" :src="getImagePath(showData[2].imgUrl)" mode="widthFix" :style="{borderRadius: borderRadius}"></image>
|
||||
<!-- #ifdef H5 -->
|
||||
<wx-open-launch-weapp class="diy-cube-absolute" :appid="showData[2].link.appid" :path="showData[2].link.path" v-if="showData[2].link && showData[2].link.type == 'WXMp'">
|
||||
<script type="text/wxtag-template">
|
||||
<style> .btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
|
||||
<view class="btn"></view>
|
||||
</script>
|
||||
</wx-open-launch-weapp>
|
||||
<!-- #endif -->
|
||||
</block>
|
||||
</view>
|
||||
<view class="right-2-right" v-if="showData.length >= 4" :style="{paddingLeft: itemSpace}">
|
||||
<button class="clear" open-type="contact" v-if="showData[3].link && showData[3].link.type == 'Service'">
|
||||
<image class="image" :src="getImagePath(showData[3].imgUrl)" mode="widthFix" :style="{borderRadius: borderRadius}"></image>
|
||||
</button>
|
||||
<block v-else>
|
||||
<image class="image" @click="onClick(showData[3].link)" :src="getImagePath(showData[3].imgUrl)" mode="widthFix" :style="{borderRadius: borderRadius}"></image>
|
||||
<!-- #ifdef H5 -->
|
||||
<wx-open-launch-weapp class="diy-cube-absolute" :appid="showData[3].link.appid" :path="showData[3].link.path" v-if="showData[3].link && showData[3].link.type == 'WXMp'">
|
||||
<script type="text/wxtag-template">
|
||||
<style> .btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
|
||||
<view class="btn"></view>
|
||||
</script>
|
||||
</wx-open-launch-weapp>
|
||||
<!-- #endif -->
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="display-right" :style="'width:' + (100 - showStyle.imgWidth) + '%; ' + (showStyle.imgFloat == 'right' ? ('padding-right:' + itemSpace) : ('padding-left:' + itemSpace))" v-else>
|
||||
<view class="right-3" :style="{margin: '-' + itemSpace + ' 0', height: `calc(100% + ${itemSpace} + ${itemSpace})`}">
|
||||
<view class="item" v-for="(img, num) in showData" :key="num" v-if="num > 0 && num < 4" :style="{height:`calc(100% / ${showData.length > 4 ? 3 : showData.length - 1})`, padding: itemSpace + ' 0'}">
|
||||
<button class="clear" open-type="contact" v-if="img.link && img.link.type == 'Service'">
|
||||
<image class="image" :src="getImagePath(img.imgUrl)" mode="widthFix" :style="{borderRadius: borderRadius}"></image>
|
||||
</button>
|
||||
<block v-else>
|
||||
<image class="image" @click="onClick(img.link)" :src="getImagePath(img.imgUrl)" mode="widthFix" :style="{borderRadius: borderRadius}"></image>
|
||||
<!-- #ifdef H5 -->
|
||||
<wx-open-launch-weapp class="diy-cube-absolute" :appid="img.link.appid" :path="img.link.path" v-if="img.link && img.link.type == 'WXMp'">
|
||||
<script type="text/wxtag-template">
|
||||
<style> .btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
|
||||
<view class="btn"></view>
|
||||
</script>
|
||||
</wx-open-launch-weapp>
|
||||
<!-- #endif -->
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="display-left" :style="{width: showStyle.imgWidth + '%', paddingLeft: itemSpace}" v-if="showStyle.imgFloat == 'right'">
|
||||
<button class="clear" open-type="contact" v-if="showData[0].link && showData[0].link.type == 'Service'">
|
||||
<image class="image" :src="getImagePath(showData[0].imgUrl)" mode="widthFix" :style="{borderRadius: borderRadius}"></image>
|
||||
</button>
|
||||
<block v-else>
|
||||
<image class="image" @click="onClick(showData[0].link)" :src="getImagePath(showData[0].imgUrl)" mode="widthFix" :style="{borderRadius: borderRadius}"></image>
|
||||
<!-- #ifdef H5 -->
|
||||
<wx-open-launch-weapp class="diy-cube-absolute" :appid="showData[0].link.appid" :path="showData[0].link.path" v-if="showData[0].link && showData[0].link.type == 'WXMp'">
|
||||
<script type="text/wxtag-template">
|
||||
<style> .btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
|
||||
<view class="btn"></view>
|
||||
</script>
|
||||
</wx-open-launch-weapp>
|
||||
<!-- #endif -->
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 分列布局 -->
|
||||
<view class="cube-list" :style="{margin: '-' + itemSpace}" v-else>
|
||||
<view class="list-item" :style="{width: `calc(100% / ${showStyle.layout})`, padding: itemSpace}" v-for="(item, index) in showData" :key="index">
|
||||
<button class="clear" open-type="contact" v-if="item.link && item.link.type == 'Service'">
|
||||
<image :src="getImagePath(item.imgUrl)" mode="widthFix" :style="{borderRadius: borderRadius}"></image>
|
||||
</button>
|
||||
<block v-else>
|
||||
<image :src="getImagePath(item.imgUrl)" mode="widthFix" :style="{borderRadius: borderRadius}" @click="onClick(item.link)"></image>
|
||||
<!-- #ifdef H5 -->
|
||||
<wx-open-launch-weapp class="diy-cube-absolute" :appid="item.link.appid" :path="item.link.path" v-if="item.link && item.link.type == 'WXMp'">
|
||||
<script type="text/wxtag-template">
|
||||
<style> .btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
|
||||
<view class="btn"></view>
|
||||
</script>
|
||||
</wx-open-launch-weapp>
|
||||
<!-- #endif -->
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'cubeDiy',
|
||||
props: ['showStyle', 'showData', 'domain'],
|
||||
computed: {
|
||||
itemBorderRadius() {
|
||||
return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
|
||||
},
|
||||
height() {
|
||||
return uni.upx2px(this.showStyle.height * 2) + 'px';
|
||||
},
|
||||
borderRadius() {
|
||||
return uni.upx2px(this.showStyle.borderRadius * 2) + 'px';
|
||||
},
|
||||
paddingTop() {
|
||||
return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
|
||||
},
|
||||
paddingLeft() {
|
||||
return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
|
||||
},
|
||||
itemSpace() {
|
||||
return uni.upx2px(this.showStyle.itemSpace) + 'px';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 获取图片地址
|
||||
getImagePath(url) {
|
||||
if (url.indexOf('http') > -1) {
|
||||
return url
|
||||
} else {
|
||||
return this.domain + url
|
||||
}
|
||||
},
|
||||
// 点击事件
|
||||
onClick(e) {
|
||||
if (!e) return;
|
||||
this.$emit("onClick", e)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-cube {
|
||||
overflow: hidden;
|
||||
|
||||
.cube-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.list-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.cube-display {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.display-left {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.display-right {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.right-1 {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.right-2 {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
display: flex;
|
||||
|
||||
.right-2-left {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.right-2-right {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.right-3 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.diy-cube-absolute {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
335
uniapp/小程序代码/pages/component/diy/demandDiy.vue
Normal file
335
uniapp/小程序代码/pages/component/diy/demandDiy.vue
Normal file
@@ -0,0 +1,335 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-会员供需 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="diy-demand" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
|
||||
<view class="demand-title" :style="{marginBottom: titleSpace}" v-if="showParams.showTitle">
|
||||
<view :style="{fontSize: titleFontSize,fontWeight: showStyle.titleFontStyle, color: showStyle.titleColor}">{{showParams.titleText}}</view>
|
||||
<view :style="{fontSize: titleBtnSize, color: showStyle.titleBtnColor}" @click="toMore()">
|
||||
<text v-if="showParams.titleBtnType == 'text'">{{showParams.titleBtnText}}</text>
|
||||
<view :style="{'background-image': 'url('+ titleIconMore +')', width: titleIconSize, height: titleIconSize, backgroundSize: titleIconSize}" v-else-if="titleIconMore"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="demand-list" :style="{rowGap: itemSpace }" v-if="demandList.length">
|
||||
<view class="list-item" v-for="(item, index) in demandList" :key="index" @click="toDetails(item.id)">
|
||||
<view class="item-top flex align-items-center">
|
||||
<image class="top-avatar" :src="item.member.avatar" mode="aspectFill"></image>
|
||||
<view class="top-info flex-item">
|
||||
<view class="info-title text-ellipsis">{{ item.member.name }}</view>
|
||||
<view class="info-subtitle text-ellipsis">{{ item.member.level_name }} | {{ item.time }}</view>
|
||||
</view>
|
||||
<view class="top-btn" @click.stop="onContact(item.member.mobile)" :style="{background: showStyle.btnColor, color: showStyle.btnTextColor}" v-if="showParams.showContact">联系TA</view>
|
||||
</view>
|
||||
<view class="item-center">
|
||||
<view class="center-title text-ellipsis" :style="{fontSize: nameSize, fontWeight: showStyle.nameWeight}">{{ item.title }}</view>
|
||||
<view class="center-content text-ellipsis-more" :style="{fontSize: contentSize}">{{ item.content }}</view>
|
||||
<view class="center-image" :class="{'special-image': (item.images.length < 3 || item.images.length === 4)}" v-if="item.images.length">
|
||||
<view class="image-box" v-for="(img, num) in item.images" :key="num" @click.stop="previewImage(item.images, num)">
|
||||
<image class="image" :src="img" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-bottom flex justify-content-between align-items-center">
|
||||
<view class="bottom-label flex-item">
|
||||
<view class="label-box inline-flex align-items-center" v-if="item.address">
|
||||
<view class="box-icon" :style="{'background-image': 'url('+ iconAddress +')'}" v-if="iconAddress"></view>
|
||||
<text class="box-text flex-item text-ellipsis" :style="{color: showStyle.addressColor}">{{item.address}}</text>
|
||||
<view class="box-bg" :style="{background: showStyle.addressColor}"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom-other flex align-items-center">
|
||||
<view class="other-item flex align-items-center">
|
||||
<image class="icon" src="/static/see.png" mode="aspectFit"></image>
|
||||
<text class="text">{{ item.page_view }}</text>
|
||||
</view>
|
||||
<button open-type="share" class="other-item clear flex align-items-center" @click.stop="setShareData(item)">
|
||||
<image class="icon" src="/static/share.png" mode="aspectFit"></image>
|
||||
<text class="text">分享</text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<empty top="0" padding="0" width="200rpx" size="28rpx" title="暂无相关内容~" v-else></empty>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import svgData from "@/common/svg.js"
|
||||
export default {
|
||||
name: 'demandDiy',
|
||||
props: ['showStyle', 'showParams'],
|
||||
data() {
|
||||
return {
|
||||
demandList: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
titleFontSize() {
|
||||
return uni.upx2px(this.showStyle.titleFontSize * 2) + 'px';
|
||||
},
|
||||
titleBtnSize() {
|
||||
return uni.upx2px(this.showStyle.titleBtnSize * 2) + 'px';
|
||||
},
|
||||
titleIconMore() {
|
||||
return svgData.svgToUrl("more", this.showStyle.titleBtnColor)
|
||||
},
|
||||
titleIconSize() {
|
||||
return uni.upx2px(this.showStyle.titleIconSize * 2) + 'px';
|
||||
},
|
||||
titleSpace() {
|
||||
return uni.upx2px(this.showStyle.titleSpace * 2) + 'px';
|
||||
},
|
||||
itemBorderRadius() {
|
||||
return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
|
||||
},
|
||||
nameSize() {
|
||||
return uni.upx2px(this.showStyle.nameSize * 2) + 'px';
|
||||
},
|
||||
contentSize() {
|
||||
return uni.upx2px(this.showStyle.contentSize * 2) + 'px';
|
||||
},
|
||||
iconAddress() {
|
||||
return svgData.svgToUrl("address", this.showStyle.addressColor)
|
||||
},
|
||||
paddingTop() {
|
||||
return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
|
||||
},
|
||||
paddingLeft() {
|
||||
return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
|
||||
},
|
||||
itemSpace() {
|
||||
return uni.upx2px(this.showStyle.itemSpace * 2) + 'px';
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
showParams: {
|
||||
handler(value) {
|
||||
if (value) this.getDemandList()
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取供需列表
|
||||
getDemandList() {
|
||||
this.$util.request("demand.businessDiyList", {
|
||||
limit: this.showParams.count,
|
||||
category_id: this.showParams.category || ""
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
let list = res.data || []
|
||||
list.forEach((el) => {
|
||||
el.images = this.splitImages(el.images)
|
||||
if (el.createtime) el.time = this.$util.getDateBeforeNow(el.createtime)
|
||||
});
|
||||
this.demandList = list;
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取供需列表 ', error)
|
||||
})
|
||||
},
|
||||
// 字符串转数组格式图片
|
||||
splitImages(images) {
|
||||
try {
|
||||
if (images) return images.split(',');
|
||||
else return []
|
||||
} catch (error) {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// 跳转查看更多
|
||||
toMore() {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: `/pages/demand/index`
|
||||
})
|
||||
},
|
||||
// 跳转供需详情
|
||||
toDetails(id) {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: `/pagesDemand/demand/details?id=${id}`
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-demand {
|
||||
.demand-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.demand-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.list-item {
|
||||
.item-top {
|
||||
.top-avatar {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.top-info {
|
||||
margin-left: 24rpx;
|
||||
|
||||
.info-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.info-subtitle {
|
||||
margin-top: 12rpx;
|
||||
color: #666;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.top-btn {
|
||||
margin-left: 24rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-center {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.center-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.center-content {
|
||||
margin-top: 24rpx;
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.center-image {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 16rpx;
|
||||
column-gap: 2%;
|
||||
row-gap: 14rpx;
|
||||
|
||||
.image-box {
|
||||
width: 32%;
|
||||
height: 0;
|
||||
padding-top: 32%;
|
||||
position: relative;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.special-image {
|
||||
justify-content: space-between;
|
||||
column-gap: 0;
|
||||
|
||||
.image-box {
|
||||
width: calc(50% - 8rpx);
|
||||
padding-top: calc(50% - 8rpx);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-bottom {
|
||||
margin-top: 24rpx;
|
||||
|
||||
.bottom-label {
|
||||
max-width: 280rpx;
|
||||
|
||||
.label-box {
|
||||
max-width: 100%;
|
||||
padding: 6rpx 18rpx 6rpx 8rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.box-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.box-icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background-size: 24rpx;
|
||||
}
|
||||
|
||||
.box-text {
|
||||
margin-left: 8rpx;
|
||||
font-size: 20rpx;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-other {
|
||||
.other-item {
|
||||
margin-left: 32rpx;
|
||||
|
||||
.icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-left: 8rpx;
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
124
uniapp/小程序代码/pages/component/diy/floatDiy.vue
Normal file
124
uniapp/小程序代码/pages/component/diy/floatDiy.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会与发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-悬浮按钮 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="diy-float" :style="{right: right, bottom: bottom, opacity: showStyle.opacity / 100}">
|
||||
<block v-if="showParams.type == 'service'">
|
||||
<button open-type="contact" class="btn-normal">
|
||||
<view class="float-icon">
|
||||
<image :src="getImagePath(showParams.image)"></image>
|
||||
</view>
|
||||
</button>
|
||||
</block>
|
||||
<block v-else>
|
||||
<button class="btn-normal" @click="onClick(showParams.link)">
|
||||
<view class="float-icon">
|
||||
<image :src="getImagePath(showParams.image)"></image>
|
||||
</view>
|
||||
<!-- #ifdef H5 -->
|
||||
<wx-open-launch-weapp class="float-absolute" :appid="showParams.link.appid" :path="showParams.link.path" v-if="showParams.link && showParams.link.type == 'WXMp'">
|
||||
<script type="text/wxtag-template">
|
||||
<style> .btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
|
||||
<view class="btn"></view>
|
||||
</script>
|
||||
</wx-open-launch-weapp>
|
||||
<!-- #endif -->
|
||||
</button>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'floatDiy',
|
||||
props: ['showStyle', 'showParams', 'domain'],
|
||||
computed: {
|
||||
right() {
|
||||
return uni.upx2px(this.showStyle.right * 2) + '%';
|
||||
},
|
||||
bottom() {
|
||||
return uni.upx2px(this.showStyle.bottom * 2) + '%';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取图片地址
|
||||
getImagePath(url) {
|
||||
if (url.indexOf('http') > -1) {
|
||||
return url
|
||||
} else {
|
||||
return this.domain + url
|
||||
}
|
||||
},
|
||||
// 点击事件
|
||||
onClick(e) {
|
||||
if (this.showParams.type != 'link' && !this.showParams.link) return;
|
||||
this.$emit("onClick", e)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 在线客服 */
|
||||
.diy-float {
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.diy-float .float-icon {
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.diy-float .float-icon image {
|
||||
display: block;
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
}
|
||||
|
||||
.diy-float .float-absolute {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.btn-normal {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: normal;
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
font-size: unset;
|
||||
text-align: unset;
|
||||
overflow: visible;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.btn-normal:after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-normal.button-hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
button:after {
|
||||
content: none;
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
165
uniapp/小程序代码/pages/component/diy/goodsDiy.vue
Normal file
165
uniapp/小程序代码/pages/component/diy/goodsDiy.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="diy-goods" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
|
||||
<view class="goods-title" :style="{marginBottom: titleSpace}" v-if="showParams.showTitle">
|
||||
<view :style="{fontSize: titleFontSize,fontWeight: showStyle.titleFontStyle, color: showStyle.titleColor}">{{showParams.titleText}}</view>
|
||||
<view :style="{fontSize: titleBtnSize, color: showStyle.titleBtnColor}" @click="toMore()">
|
||||
<text v-if="showParams.titleBtnType == 'text'">{{showParams.titleBtnText}}</text>
|
||||
<view :style="{'background-image': 'url('+ titleIconMore +')', width: titleIconSize, height: titleIconSize, backgroundSize: titleIconSize}" v-else-if="titleIconMore"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-list flex flex-wrap justify-content-between" :style="{rowGap: itemSpace}" v-if="goodsList">
|
||||
<view class="list-item" v-for="item in goodsList" :key="item.id" @click="toDetails(item.id)">
|
||||
<image class="item-image" :src="item.image" :style="{height: imgHeight, borderRadius: `${borderRadius} ${borderRadius} 0 0`}" mode="aspectFill"></image>
|
||||
<view class="item-name text-ellipsis-more" :style="{fontSize: nameSize, fontWeight: showStyle.nameWeight}">{{item.name}}</view>
|
||||
<view class="item-price" :style="{fontSize: priceSize, color: showStyle.priceColor}">￥{{item.price}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<empty top="0" padding="0" width="200rpx" size="28rpx" title="暂无相关内容~" v-else></empty>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import svgData from "@/common/svg.js"
|
||||
export default {
|
||||
name: "goodsDiy",
|
||||
props: ['showStyle', 'showParams'],
|
||||
data() {
|
||||
return {
|
||||
goodsList: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
titleFontSize() {
|
||||
return uni.upx2px(this.showStyle.titleFontSize * 2) + 'px';
|
||||
},
|
||||
titleBtnSize() {
|
||||
return uni.upx2px(this.showStyle.titleBtnSize * 2) + 'px';
|
||||
},
|
||||
titleIconMore() {
|
||||
return svgData.svgToUrl("more", this.showStyle.titleBtnColor)
|
||||
},
|
||||
titleIconSize() {
|
||||
return uni.upx2px(this.showStyle.titleIconSize * 2) + 'px';
|
||||
},
|
||||
titleSpace() {
|
||||
return uni.upx2px(this.showStyle.titleSpace * 2) + 'px';
|
||||
},
|
||||
itemBorderRadius() {
|
||||
return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
|
||||
},
|
||||
imgHeight() {
|
||||
return uni.upx2px(this.showStyle.imgHeight * 2) + 'px';
|
||||
},
|
||||
borderRadius() {
|
||||
return uni.upx2px(this.showStyle.borderRadius * 2) + 'px';
|
||||
},
|
||||
nameSize() {
|
||||
return uni.upx2px(this.showStyle.nameSize * 2) + 'px';
|
||||
},
|
||||
priceSize() {
|
||||
return uni.upx2px(this.showStyle.priceSize * 2) + 'px';
|
||||
},
|
||||
paddingTop() {
|
||||
return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
|
||||
},
|
||||
paddingLeft() {
|
||||
return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
|
||||
},
|
||||
itemSpace() {
|
||||
return uni.upx2px(this.showStyle.itemSpace * 2) + 'px';
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
showParams: {
|
||||
handler(value) {
|
||||
if (value) this.getGoodsList()
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取商城商品
|
||||
getGoodsList() {
|
||||
this.$util.request("mall.goodsList", {
|
||||
page: 1,
|
||||
limit: 4
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
this.goodsList = res.data.data
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取商城商品', error)
|
||||
})
|
||||
},
|
||||
// 跳转商城详情
|
||||
toDetails(id) {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pagesMall/goods/details?id=" + id
|
||||
})
|
||||
},
|
||||
// 跳转商城列表
|
||||
toMore() {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pages/mall/index"
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-goods {
|
||||
.goods-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.goods-list {
|
||||
.list-item {
|
||||
width: calc(50% - 16rpx);
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
.item-image {
|
||||
width: 100%;
|
||||
height: 296rpx;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
line-height: 40rpx;
|
||||
height: 80rpx;
|
||||
color: #000000;
|
||||
margin-top: 16rpx;
|
||||
padding: 0 16rpx;
|
||||
}
|
||||
|
||||
.item-price {
|
||||
margin-top: 16rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
padding: 0 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
94
uniapp/小程序代码/pages/component/diy/imagesDiy.vue
Normal file
94
uniapp/小程序代码/pages/component/diy/imagesDiy.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-单图组 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="diy-images" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
|
||||
<view class="item-image" v-for="(item, index) in showData" :key="index" :style="{paddingTop: paddingTop}">
|
||||
<button class="clear" open-type="contact" v-if="item.link && item.link.type == 'Service'">
|
||||
<image :src="getImagePath(item.imgUrl)" mode="widthFix" :style="{borderRadius: borderRadius}"></image>
|
||||
</button>
|
||||
<block v-else>
|
||||
<image :src="getImagePath(item.imgUrl)" mode="widthFix" @click="onClick(item.link)" :style="{borderRadius: borderRadius}"></image>
|
||||
<!-- #ifdef H5 -->
|
||||
<wx-open-launch-weapp class="item-absolute" :appid="item.link.appid" :path="item.link.path" v-if="item.link && item.link.type == 'WXMp'">
|
||||
<script type="text/wxtag-template">
|
||||
<style> .btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
|
||||
<view class="btn"></view>
|
||||
</script>
|
||||
</wx-open-launch-weapp>
|
||||
<!-- #endif -->
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'imagesDiy',
|
||||
props: ['showStyle', 'showData', 'domain'],
|
||||
computed: {
|
||||
itemBorderRadius() {
|
||||
return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
|
||||
},
|
||||
borderRadius() {
|
||||
return uni.upx2px(this.showStyle.borderRadius * 2) + 'px';
|
||||
},
|
||||
paddingTop() {
|
||||
return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
|
||||
},
|
||||
paddingLeft() {
|
||||
return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 获取图片地址
|
||||
getImagePath(url) {
|
||||
if (url.indexOf('http') > -1) {
|
||||
return url
|
||||
} else {
|
||||
return this.domain + url
|
||||
}
|
||||
},
|
||||
// 跳转
|
||||
onClick(e) {
|
||||
if (!e) return;
|
||||
this.$emit("onClick", e)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-images {
|
||||
.item-image {
|
||||
position: relative;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.item-absolute {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
246
uniapp/小程序代码/pages/component/diy/index.vue
Normal file
246
uniapp/小程序代码/pages/component/diy/index.vue
Normal file
@@ -0,0 +1,246 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-自定义装修 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view :style="{padding: paddingTop + ' ' + paddingLeft}">
|
||||
<block v-for="(item,index) in showData.items" :key='index'>
|
||||
<!-- 图片轮播 -->
|
||||
<block v-if="item.type == 'carouselDiy'">
|
||||
<carousel-diy :showStyle="item.style" :showData="item.data" :showParams="item.params" :domain="showData.domain" @onClick="onClick"></carousel-diy>
|
||||
</block>
|
||||
<!-- 单图组 -->
|
||||
<block v-if="item.type == 'imagesDiy'">
|
||||
<images-diy :showStyle="item.style" :showData="item.data" :domain="showData.domain" @onClick="onClick"></images-diy>
|
||||
</block>
|
||||
<!-- 导航组 -->
|
||||
<block v-if="item.type == 'navDiy'">
|
||||
<nav-diy :showStyle="item.style" :showData="item.data" :domain="showData.domain" @onClick="onClick"></nav-diy>
|
||||
</block>
|
||||
<!-- 图片魔方 -->
|
||||
<block v-if="item.type == 'cubeDiy'">
|
||||
<cube-diy :showStyle="item.style" :showData="item.data" :domain="showData.domain" @onClick="onClick"></cube-diy>
|
||||
</block>
|
||||
<!-- 信息卡片 -->
|
||||
<block v-if="item.type == 'infoCardDiy'">
|
||||
<info-card-diy :showStyle="item.style" :showParams="item.params" :domain="showData.domain" @onClick="onClick"></info-card-diy>
|
||||
</block>
|
||||
<!-- 按钮组 -->
|
||||
<block v-if="item.type == 'textButtonDiy'">
|
||||
<text-button-diy :showStyle="item.style" :showData="item.data" @onClick="onClick"></text-button-diy>
|
||||
</block>
|
||||
<!-- 标题 -->
|
||||
<block v-if="item.type == 'titleDiy'">
|
||||
<title-diy :showStyle="item.style" :showParams="item.params" @onClick="onClick"></title-diy>
|
||||
</block>
|
||||
<!-- 视频 -->
|
||||
<block v-if="item.type == 'videoDiy'">
|
||||
<video-diy :showStyle="item.style" :showParams="item.params" :domain="showData.domain"></video-diy>
|
||||
</block>
|
||||
<!-- 地图 -->
|
||||
<block v-if="item.type == 'mapDiy'">
|
||||
<map-diy :showStyle="item.style" :showParams="item.params"></map-diy>
|
||||
</block>
|
||||
<!-- 平台动态 -->
|
||||
<block v-if="item.type == 'articleDiy'">
|
||||
<article-diy :ref="'articleDiy_' + index" :showStyle="item.style" :showParams="item.params"></article-diy>
|
||||
</block>
|
||||
<!-- 商会介绍 -->
|
||||
<block v-if="item.type == 'introduceDiy'">
|
||||
<introduce-diy :showStyle="item.style" :showParams="item.params" :domain="showData.domain"></introduce-diy>
|
||||
</block>
|
||||
<!-- 会员展示 -->
|
||||
<block v-if="item.type == 'memberDiy'">
|
||||
<member-diy :ref="'memberDiy_' + index" :showStyle="item.style" :showParams="item.params"></member-diy>
|
||||
</block>
|
||||
<!-- 商会活动 -->
|
||||
<block v-if="item.type == 'activityDiy'">
|
||||
<activity-diy :ref="'activityDiy_' + index" :showStyle="item.style" :showParams="item.params"></activity-diy>
|
||||
</block>
|
||||
<!-- 活动接龙 -->
|
||||
<block v-if="item.type == 'chainsDiy'">
|
||||
<chains-diy :ref="'chainsDiy_' + index" :showStyle="item.style" :showParams="item.params" @setShareData="setShareData"></chains-diy>
|
||||
</block>
|
||||
<!-- 商会相册 -->
|
||||
<block v-if="item.type == 'albumDiy'">
|
||||
<album-diy :ref="'albumDiy_' + index" :showStyle="item.style" :showParams="item.params"></album-diy>
|
||||
</block>
|
||||
<!-- 商城商品 -->
|
||||
<block v-if="item.type == 'goodsDiy'">
|
||||
<goods-diy :ref="'goodsDiy_' + index" :showStyle="item.style" :showParams="item.params"></goods-diy>
|
||||
</block>
|
||||
<!-- 会员供需 -->
|
||||
<block v-if="item.type == 'demandDiy'">
|
||||
<demand-diy :ref="'demandDiy_' + index" :showStyle="item.style" :showParams="item.params"></demand-diy>
|
||||
</block>
|
||||
<!-- 会员地图 -->
|
||||
<block v-if="item.type == 'memberMapDiy'">
|
||||
<member-map-diy :ref="'memberMapDiy_' + index" :showMap="item.map" :showCategory="item.category" :spaceHeight="spaceHeight"></member-map-diy>
|
||||
</block>
|
||||
<!-- 搜索 -->
|
||||
<block v-if="item.type == 'searchDiy'">
|
||||
<search-diy :showStyle="item.style" :showParams="item.params"></search-diy>
|
||||
</block>
|
||||
<!-- 辅助线条 -->
|
||||
<block v-if="item.type == 'lineDiy'">
|
||||
<line-diy :showStyle="item.style"></line-diy>
|
||||
</block>
|
||||
<!-- 辅助空白 -->
|
||||
<block v-if="item.type == 'blankDiy'">
|
||||
<blank-diy :showStyle="item.style"></blank-diy>
|
||||
</block>
|
||||
<!-- 消息通知 -->
|
||||
<block v-if="item.type == 'noticeDiy'">
|
||||
<notice-diy :showStyle="item.style" :showParams="item.params" :domain="showData.domain"></notice-diy>
|
||||
</block>
|
||||
<!-- 文本组 -->
|
||||
<block v-if="item.type == 'textDiy'">
|
||||
<text-diy :showStyle="item.style"></text-diy>
|
||||
</block>
|
||||
<!-- 富文本 -->
|
||||
<block v-if="item.type == 'richTextDiy'">
|
||||
<rich-text-diy :showStyle="item.style" :showParams="item.params"></rich-text-diy>
|
||||
</block>
|
||||
<!-- 警告提示 -->
|
||||
<block v-if="item.type == 'warnDiy'">
|
||||
<warn-diy :showStyle="item.style" :showParams="item.params"></warn-diy>
|
||||
</block>
|
||||
<!-- 时间线 -->
|
||||
<block v-if="item.type == 'timelineDiy'">
|
||||
<timeline-diy :showStyle="item.style" :showData="item.data"></timeline-diy>
|
||||
</block>
|
||||
<!-- 悬浮按钮 -->
|
||||
<block v-if="item.type == 'floatDiy'">
|
||||
<float-diy :showStyle="item.style" :showParams="item.params" :domain="showData.domain" @onClick="onClick"></float-diy>
|
||||
</block>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import carouselDiy from './carouselDiy.vue'
|
||||
import imagesDiy from './imagesDiy.vue'
|
||||
import navDiy from './navDiy.vue'
|
||||
import cubeDiy from './cubeDiy.vue'
|
||||
import infoCardDiy from './infoCardDiy.vue'
|
||||
import textButtonDiy from './textButtonDiy.vue'
|
||||
import titleDiy from './titleDiy.vue'
|
||||
import videoDiy from './videoDiy.vue'
|
||||
import mapDiy from './mapDiy.vue'
|
||||
import articleDiy from './articleDiy.vue'
|
||||
import introduceDiy from './introduceDiy.vue'
|
||||
import memberDiy from './memberDiy.vue'
|
||||
import activityDiy from './activityDiy.vue'
|
||||
import chainsDiy from './chainsDiy.vue'
|
||||
import albumDiy from './albumDiy.vue'
|
||||
import goodsDiy from './goodsDiy.vue'
|
||||
import demandDiy from './demandDiy.vue'
|
||||
import memberMapDiy from './memberMapDiy.vue'
|
||||
import searchDiy from './searchDiy.vue'
|
||||
import lineDiy from './lineDiy.vue'
|
||||
import blankDiy from './blankDiy.vue'
|
||||
import noticeDiy from './noticeDiy.vue'
|
||||
import textDiy from './textDiy.vue'
|
||||
import richTextDiy from './richTextDiy.vue'
|
||||
import warnDiy from './warnDiy.vue'
|
||||
import timelineDiy from './timelineDiy.vue'
|
||||
import floatDiy from './floatDiy.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
carouselDiy,
|
||||
imagesDiy,
|
||||
navDiy,
|
||||
cubeDiy,
|
||||
infoCardDiy,
|
||||
textButtonDiy,
|
||||
titleDiy,
|
||||
videoDiy,
|
||||
mapDiy,
|
||||
articleDiy,
|
||||
introduceDiy,
|
||||
memberDiy,
|
||||
activityDiy,
|
||||
chainsDiy,
|
||||
albumDiy,
|
||||
goodsDiy,
|
||||
demandDiy,
|
||||
memberMapDiy,
|
||||
searchDiy,
|
||||
lineDiy,
|
||||
blankDiy,
|
||||
noticeDiy,
|
||||
textDiy,
|
||||
richTextDiy,
|
||||
warnDiy,
|
||||
timelineDiy,
|
||||
floatDiy,
|
||||
},
|
||||
props: ['showData', 'spaceHeight'],
|
||||
computed: {
|
||||
paddingTop() {
|
||||
return uni.upx2px(this.showData.page.style.paddingTop * 2) + 'px';
|
||||
},
|
||||
paddingLeft() {
|
||||
return uni.upx2px(this.showData.page.style.paddingLeft * 2) + 'px';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 更新数据
|
||||
updateData() {
|
||||
for (var key in this.$refs) {
|
||||
const type = key.split("_")[0]
|
||||
switch (type) {
|
||||
case "articleDiy":
|
||||
this.$refs[key][0].getArticleList()
|
||||
break;
|
||||
case "memberDiy":
|
||||
this.$refs[key][0].getMemberList()
|
||||
break;
|
||||
case "activityDiy":
|
||||
this.$refs[key][0].getActivityList()
|
||||
break;
|
||||
case "chainsDiy":
|
||||
this.$refs[key][0].getChainsList()
|
||||
break;
|
||||
case "albumDiy":
|
||||
this.$refs[key][0].getAlbumList()
|
||||
break;
|
||||
case "goodsDiy":
|
||||
this.$refs[key][0].getGoodsList()
|
||||
break;
|
||||
case "demandDiy":
|
||||
this.$refs[key][0].getDemandList()
|
||||
break;
|
||||
case "memberMapDiy":
|
||||
this.$refs[key][0].getMemberList()
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 按钮点击
|
||||
onClick(e) {
|
||||
if (!e) return;
|
||||
if (e.type == "Fixed" && (e.Fixed_type == "Fixed_type_7" || e.Fixed_type == "Fixed_type_8")) {
|
||||
this.$emit("toPage", e)
|
||||
} else {
|
||||
this.$util.openLink(e);
|
||||
}
|
||||
},
|
||||
// 设置分享数据
|
||||
setShareData(data) {
|
||||
this.$emit('setShareData', data)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
135
uniapp/小程序代码/pages/component/diy/infoCardDiy.vue
Normal file
135
uniapp/小程序代码/pages/component/diy/infoCardDiy.vue
Normal file
@@ -0,0 +1,135 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-信息卡片 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="diy-info-card" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
|
||||
<image class="card-image" mode="aspectFill" :src="getImagePath(showParams.image)" :style="{borderRadius: borderRadius}"></image>
|
||||
<view class="card-box">
|
||||
<view class="title">{{showParams.title}}</view>
|
||||
<view class="content">{{showParams.content}}</view>
|
||||
<button class="btn clear" open-type="contact" :style="{background: showStyle.btnBackground, borderRadius: btnBorderRadius, color: showStyle.btnColor}" v-if="showParams.link && showParams.link.type == 'Service'">{{showParams.btnTxt}}</button>
|
||||
<view class="btn" @click="onClick(showParams.link)" :style="{background: showStyle.btnBackground, borderRadius: btnBorderRadius, color: showStyle.btnColor}" v-else>
|
||||
<text>{{showParams.btnTxt}}</text>
|
||||
<!-- #ifdef H5 -->
|
||||
<wx-open-launch-weapp class="absolute" :appid="showParams.link.appid" :path="showParams.link.path" v-if="showParams.link && showParams.link.type == 'WXMp'">
|
||||
<script type="text/wxtag-template">
|
||||
<style> .wx-btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
|
||||
<view class="wx-btn"></view>
|
||||
</script>
|
||||
</wx-open-launch-weapp>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'infoCardDiy',
|
||||
props: ['showStyle', 'showParams', 'domain'],
|
||||
computed: {
|
||||
itemBorderRadius() {
|
||||
return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
|
||||
},
|
||||
borderRadius() {
|
||||
return uni.upx2px(this.showStyle.borderRadius * 2) + 'px';
|
||||
},
|
||||
btnBorderRadius() {
|
||||
return uni.upx2px(this.showStyle.btnBorderRadius * 2) + 'px';
|
||||
},
|
||||
paddingTop() {
|
||||
return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
|
||||
},
|
||||
paddingLeft() {
|
||||
return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 获取图片地址
|
||||
getImagePath(url) {
|
||||
if (url.indexOf('http') > -1) {
|
||||
return url
|
||||
} else {
|
||||
return this.domain + url
|
||||
}
|
||||
},
|
||||
onClick(e) {
|
||||
if (!e) return;
|
||||
this.$emit("onClick", e)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-info-card {
|
||||
display: flex;
|
||||
|
||||
.card-image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
|
||||
.card-box {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
margin-left: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.3;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.4;
|
||||
margin: 16rpx 0;
|
||||
color: #333;
|
||||
word-wrap: normal;
|
||||
display: -webkit-box;
|
||||
word-break: break-all;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: relative;
|
||||
width: auto;
|
||||
height: auto;
|
||||
display: inline-block;
|
||||
padding: 0 28rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 54rpx;
|
||||
text-align: center;
|
||||
|
||||
.absolute {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
90
uniapp/小程序代码/pages/component/diy/introduceDiy.vue
Normal file
90
uniapp/小程序代码/pages/component/diy/introduceDiy.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-商会介绍 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="diy-introduce" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
|
||||
<image class="introduce-image" :src="getImagePath(showParams.imgUrl)" :style="{width: iconSize, height: iconSize, borderRadius: borderRadius}" mode="aspectFill"></image>
|
||||
<text class="introduce-title" :style="{fontSize: nameSize, fontWeight: showStyle.nameWeight}">{{showParams.name}}</text>
|
||||
<view class="introduce-btn" :style="{fontSize: btnSize, borderRadius: btnBorderRadius, background: `linear-gradient(90deg, ${showStyle.btnColor1} 0, ${showStyle.btnColor2} 100%)`}" @click="onClick()">{{showParams.btnName}}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'introduceDiy',
|
||||
props: ['showStyle', 'showParams', 'domain'],
|
||||
computed: {
|
||||
itemBorderRadius() {
|
||||
return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
|
||||
},
|
||||
borderRadius() {
|
||||
return uni.upx2px(this.showStyle.borderRadius * 2) + 'px';
|
||||
},
|
||||
iconSize() {
|
||||
return uni.upx2px(this.showStyle.iconSize * 2) + 'px';
|
||||
},
|
||||
btnBorderRadius() {
|
||||
return uni.upx2px(this.showStyle.btnBorderRadius * 2) + 'px';
|
||||
},
|
||||
btnSize() {
|
||||
return uni.upx2px(this.showStyle.btnSize * 2) + 'px';
|
||||
},
|
||||
nameSize() {
|
||||
return uni.upx2px(this.showStyle.nameSize * 2) + 'px';
|
||||
},
|
||||
paddingTop() {
|
||||
return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
|
||||
},
|
||||
paddingLeft() {
|
||||
return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 获取图片地址
|
||||
getImagePath(url) {
|
||||
if (url.indexOf('http') > -1) {
|
||||
return url
|
||||
} else {
|
||||
return this.domain + url
|
||||
}
|
||||
},
|
||||
// 点击事件
|
||||
onClick() {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pages/index/association"
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-introduce {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.introduce-title {
|
||||
margin-left: 16rpx;
|
||||
color: #5A5B6E;
|
||||
line-height: 1.3;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.introduce-btn {
|
||||
margin-left: 16rpx;
|
||||
color: #ffffff;
|
||||
line-height: 1.3;
|
||||
padding: 14rpx 40rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
45
uniapp/小程序代码/pages/component/diy/lineDiy.vue
Normal file
45
uniapp/小程序代码/pages/component/diy/lineDiy.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-辅助线 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="diy-line" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
|
||||
<view class="line" :style="{borderTop: line}">
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'lineDiy',
|
||||
props: ['showStyle'],
|
||||
computed: {
|
||||
itemBorderRadius() {
|
||||
return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
|
||||
},
|
||||
line() {
|
||||
return uni.upx2px(this.showStyle.lineHeight * 2) + 'px' + ' ' + this.showStyle.lineStyle + ' ' + this.showStyle.lineColor;
|
||||
},
|
||||
paddingTop() {
|
||||
return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
|
||||
},
|
||||
paddingLeft() {
|
||||
return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-line .line {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
56
uniapp/小程序代码/pages/component/diy/mapDiy.vue
Normal file
56
uniapp/小程序代码/pages/component/diy/mapDiy.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-地图组 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="diy-map" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
|
||||
<map class="map" :latitude="showParams.latitude" :longitude="showParams.longitude" :style="{height: height}" @click="onClick"></map>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'mapDiy',
|
||||
props: ['showStyle', 'showParams'],
|
||||
computed: {
|
||||
itemBorderRadius() {
|
||||
return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
|
||||
},
|
||||
height() {
|
||||
return uni.upx2px(this.showStyle.height * 2) + 'px';
|
||||
},
|
||||
paddingTop() {
|
||||
return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
|
||||
},
|
||||
paddingLeft() {
|
||||
return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 点击事件
|
||||
onClick() {
|
||||
this.$util.toPage({
|
||||
mode: 7,
|
||||
address: {
|
||||
latitude: this.showParams.latitude,
|
||||
longitude: this.showParams.longitude,
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-map .map {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
218
uniapp/小程序代码/pages/component/diy/memberDiy.vue
Normal file
218
uniapp/小程序代码/pages/component/diy/memberDiy.vue
Normal file
@@ -0,0 +1,218 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-可滚动会员列表 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="diy-member" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
|
||||
<view class="member-title" :style="{marginBottom: titleSpace}" v-if="showParams.showTitle">
|
||||
<view :style="{fontSize: titleFontSize,fontWeight: showStyle.titleFontStyle, color: showStyle.titleColor}">{{showParams.titleText}}</view>
|
||||
<view :style="{fontSize: titleBtnSize, color: showStyle.titleBtnColor}" @click="toMore()">
|
||||
<text v-if="showParams.titleBtnType == 'text'">{{showParams.titleBtnText}}</text>
|
||||
<view :style="{'background-image': 'url('+ titleIconMore +')', width: titleIconSize, height: titleIconSize, backgroundSize: titleIconSize}" v-else-if="titleIconMore"></view>
|
||||
</view>
|
||||
</view>
|
||||
<block v-if="memberList.length">
|
||||
<view class="member-swiper" v-if="showStyle.isAutoRoll">
|
||||
<z-swiper v-model="memberList" :options="{loop: (memberList.length > 9 ? true : false), autoplay: {delay: showStyle.rollDelay || 2000, disableOnInteraction: false}, speed: showStyle.rollSpeed || 1000, slidesPerView: 'auto', spaceBetween: showStyle.itemSpace}">
|
||||
<z-swiper-item v-for="(item, index) in memberList" :key="index" :custom-style="{width: iconSize}">
|
||||
<view class="swiper-item" @click="toDetails(item.id)">
|
||||
<image class="item-avatar" :style="{width: iconSize, height: iconSize, borderRadius: iconRadius}" :src="item.avatar" mode="aspectFill"></image>
|
||||
<view class="item-label text-ellipsis" :style="{fontSize: pSize, color: showStyle.pColor, background: showStyle.pBackground, borderRadius: showStyle.pRadiusType == 'full' ? pRadius : showStyle.pRadiusType == 'half' ? `0 ${pRadius} 0 ${pRadius}` : 0}">{{item.level_name}}</view>
|
||||
<view class="item-name text-ellipsis" :style="{fontSize: nameSize, color: showStyle.nameColor,}">{{item.name}}</view>
|
||||
</view>
|
||||
</z-swiper-item>
|
||||
</z-swiper>
|
||||
</view>
|
||||
<scroll-view scroll-x class="member-scroll" v-else>
|
||||
<view class="scroll-item" :style="{width: iconSize, marginLeft: itemSpace}" v-for="item in memberList" :key="item.id" @click="toDetails(item.id)">
|
||||
<image class="item-avatar" :style="{width: iconSize, height: iconSize, borderRadius: iconRadius}" :src="item.avatar" mode="aspectFill"></image>
|
||||
<view class="item-label text-ellipsis" :style="{
|
||||
fontSize: pSize,
|
||||
color: showStyle.pColor,
|
||||
background: showStyle.pBackground,
|
||||
borderRadius: showStyle.pRadiusType == 'full' ? pRadius : showStyle.pRadiusType == 'half' ? `0 ${pRadius} 0 ${pRadius}` : 0
|
||||
}">{{item.level_name}}</view>
|
||||
<view class="item-name text-ellipsis" :style="{fontSize: nameSize, color: showStyle.nameColor,}">{{item.name}}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</block>
|
||||
<empty top="0" padding="0" width="200rpx" size="28rpx" title="暂无相关内容~" v-else></empty>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import svgData from "@/common/svg.js"
|
||||
export default {
|
||||
name: "memberDiy",
|
||||
props: ['showStyle', 'showParams'],
|
||||
data() {
|
||||
return {
|
||||
// 会员列表
|
||||
memberList: [],
|
||||
// 轮播图高度
|
||||
carouselHeight: 0,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
titleFontSize() {
|
||||
return uni.upx2px(this.showStyle.titleFontSize * 2) + 'px';
|
||||
},
|
||||
titleBtnSize() {
|
||||
return uni.upx2px(this.showStyle.titleBtnSize * 2) + 'px';
|
||||
},
|
||||
titleIconMore() {
|
||||
return svgData.svgToUrl("more", this.showStyle.titleBtnColor)
|
||||
},
|
||||
titleIconSize() {
|
||||
return uni.upx2px(this.showStyle.titleIconSize * 2) + 'px';
|
||||
},
|
||||
titleSpace() {
|
||||
return uni.upx2px(this.showStyle.titleSpace * 2) + 'px';
|
||||
},
|
||||
itemBorderRadius() {
|
||||
return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
|
||||
},
|
||||
iconRadius() {
|
||||
return uni.upx2px(this.showStyle.iconRadius * 2) + 'px';
|
||||
},
|
||||
iconSize() {
|
||||
return uni.upx2px(this.showStyle.iconSize * 2) + 'px';
|
||||
},
|
||||
pSize() {
|
||||
return uni.upx2px(this.showStyle.pSize * 2) + 'px';
|
||||
},
|
||||
pRadius() {
|
||||
return uni.upx2px(this.showStyle.pRadius * 2) + 'px';
|
||||
},
|
||||
nameSize() {
|
||||
return uni.upx2px(this.showStyle.nameSize * 2) + 'px';
|
||||
},
|
||||
paddingTop() {
|
||||
return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
|
||||
},
|
||||
paddingLeft() {
|
||||
return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
|
||||
},
|
||||
itemSpace() {
|
||||
return uni.upx2px(this.showStyle.itemSpace * 2) + 'px';
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
showParams: {
|
||||
handler(value) {
|
||||
if (value) this.getMemberList()
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
},
|
||||
showStyle: {
|
||||
handler(value) {
|
||||
if (value) {
|
||||
this.carouselHeight = `calc(${uni.upx2px((value.iconSize + value.pSize + value.nameSize) * 2)}px + 22rpx)`
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 跳转会员详情
|
||||
toDetails(id) {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pages/member/details?id=" + id
|
||||
})
|
||||
},
|
||||
// 获取会员列表
|
||||
getMemberList() {
|
||||
this.$util.request("member.diyList", {
|
||||
limit: this.showParams.count,
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
this.memberList = res.data
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取会员列表 ', error)
|
||||
})
|
||||
},
|
||||
// 跳转会员列表
|
||||
toMore() {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pages/member/index"
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-member {
|
||||
.member-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.member-scroll {
|
||||
white-space: nowrap;
|
||||
|
||||
.scroll-item {
|
||||
display: inline-block;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
line-height: 1;
|
||||
padding: 10rpx 8rpx;
|
||||
margin-top: -16rpx;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
color: #5A5B6E;
|
||||
line-height: 1;
|
||||
margin-top: 18rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.member-swiper {
|
||||
.swiper-item {
|
||||
.item-label {
|
||||
line-height: 1;
|
||||
padding: 10rpx 8rpx;
|
||||
margin-top: -16rpx;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
color: #5A5B6E;
|
||||
line-height: 1;
|
||||
margin-top: 18rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
695
uniapp/小程序代码/pages/component/diy/memberMapDiy.vue
Normal file
695
uniapp/小程序代码/pages/component/diy/memberMapDiy.vue
Normal file
@@ -0,0 +1,695 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-会员地图 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="diy-member-map" :class="{'flex-column': showCategory.styleMode == 2 && showMap.heightType == 1}" :style="{height: showMap.heightType == 2 ? `auto` : `calc(100vh - ${spaceHeight}px)`, background: showMap.background, borderRadius: mapItemBorderRadius}" v-if="loadEnd">
|
||||
<view class="map-classify style-2" v-if="showCategory.styleMode == 2 && classifyList.length" @scrolltolower="scrollBottom" :style="{background: showCategory.background, padding: `0 ${categoryPaddingLeft}`}">
|
||||
<scroll-view scroll-x class="classify-list" :style="{padding: `${categoryPaddingTop} 0`}">
|
||||
<view class="list-item" @click="changeClassify(-1)" :style="{
|
||||
background: (!selectClassify.length ? showCategory.btnActiveBackground : showCategory.btnBackground),
|
||||
borderRadius: categoryBtnBorderRadius,
|
||||
padding: categoryBtnPadding,
|
||||
color: !selectClassify.length ? showCategory.btnActiveColor : showCategory.btnColor}">
|
||||
<text>全部</text>
|
||||
</view>
|
||||
<view class="list-item" v-for="(item, index) in classifyList" :key="index" @click="changeClassify(item.id)" :style="{
|
||||
marginLeft: categoryItemSpace,
|
||||
background: (selectClassify.includes(item.id) ? showCategory.btnActiveBackground : showCategory.btnBackground),
|
||||
borderRadius: categoryBtnBorderRadius,
|
||||
padding: categoryBtnPadding,
|
||||
color: selectClassify.includes(item.id) ? showCategory.btnActiveColor : showCategory.btnColor}">
|
||||
<text>{{item.name}}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="classify-more" @click="handleExpand(1)">
|
||||
<view class="more-icon" :style="{'background-image': 'url('+ categoryIconDown +')'}" v-if="categoryIconDown"></view>
|
||||
<text class="more-text" :style="{color: showCategory.expandColor}">展开列表</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="map-classify style-1" v-else-if="classifyList.length" :style="{
|
||||
top: categoryMarginTop,
|
||||
left: showCategory.position == 'right' ? 'initial' : categoryMarginLeft,
|
||||
right: showCategory.position == 'right' ? categoryMarginLeft : 'initial',
|
||||
width: showCategory.widthType == 2 ? `${showCategory.widthNumber}%` : 'auto',
|
||||
maxWidth: `calc((100% - ${categoryMarginLeft} - ${categoryMarginLeft}) * ${showCategory.widthType == 2 ? `${showCategory.widthNumber / 100}` : 1})`,
|
||||
maxHeight: showMap.heightType == 2 ? categoryMaxHeight : `calc(100vh - ${spaceHeight}px - ${categoryMaxHeight})`,
|
||||
alignItems: showCategory.position == 'right' ? 'flex-end' : 'flex-start'}">
|
||||
<view class="classify-more" :class="{collapse: !isExpandCategory1}" @click="handleExpand()" :style="{
|
||||
background: showCategory.background,
|
||||
borderRadius: isExpandCategory1 ? categoryBorderRadius : (showCategory.position == 'right' ? `${categoryBorderRadius} 0 0 ${categoryBorderRadius}` : `0 ${categoryBorderRadius} ${categoryBorderRadius} 0`),
|
||||
left: showCategory.position == 'right' ? 'initial' : `-${categoryMarginLeft}`,
|
||||
right: showCategory.position == 'right' ? `-${categoryMarginLeft}` : 'initial',}">
|
||||
<text class="more-text" :style="{color: showCategory.expandColor}">{{isExpandCategory1 ? "收起" : "展开"}}列表</text>
|
||||
<view class="more-icon" :style="{'background-image': 'url('+ categoryIconDown +')'}" v-if="categoryIconDown"></view>
|
||||
</view>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<uni-transition style="width: 100%;" :mode-class="showCategory.position == 'right' ? 'slide-right' : 'slide-left'" :duration="80" :show="isExpandCategory1">
|
||||
<scroll-view scroll-y @scrolltolower="scrollBottom" :style="{
|
||||
borderRadius: categoryBorderRadius,
|
||||
background: showCategory.background,
|
||||
maxHeight: showMap.heightType == 2 ? `calc(${categoryMaxHeight} - 80rpx)` : `calc(100vh - 80rpx - ${spaceHeight}px - ${categoryMaxHeight})`}">
|
||||
<view class="classify-list" :style="{rowGap: categoryItemSpace, padding: `${categoryPaddingTop} ${categoryPaddingLeft}`}">
|
||||
<view class="list-item" @click="changeClassify(-1)" :style="{
|
||||
background: (!selectClassify.length ? showCategory.btnActiveBackground : showCategory.btnBackground),
|
||||
borderRadius: categoryBtnBorderRadius,
|
||||
padding: categoryBtnPadding,
|
||||
color: !selectClassify.length ? showCategory.btnActiveColor : showCategory.btnColor}">
|
||||
<text>全部</text>
|
||||
</view>
|
||||
<view class="list-item" v-for="(item, index) in classifyList" :key="index" @click="changeClassify(item.id)" :style="{
|
||||
background: (selectClassify.includes(item.id) ? showCategory.btnActiveBackground : showCategory.btnBackground),
|
||||
borderRadius: categoryBtnBorderRadius,
|
||||
padding: categoryBtnPadding,
|
||||
color: selectClassify.includes(item.id) ? showCategory.btnActiveColor : showCategory.btnColor}">
|
||||
<text>{{item.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</uni-transition>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<scroll-view scroll-y @scrolltolower="scrollBottom" v-if="isExpandCategory1" :style="{
|
||||
borderRadius: categoryBorderRadius,
|
||||
background: showCategory.background,
|
||||
maxHeight: showMap.heightType == 2 ? `calc(${categoryMaxHeight} - 80rpx)` : `calc(100vh - 80rpx - ${spaceHeight}px - ${categoryMaxHeight})`}">
|
||||
<view class="classify-list" :style="{rowGap: categoryItemSpace, padding: `${categoryPaddingTop} ${categoryPaddingLeft}`}">
|
||||
<view class="list-item" @click="changeClassify(-1)" :style="{
|
||||
background: (!selectClassify.length ? showCategory.btnActiveBackground : showCategory.btnBackground),
|
||||
borderRadius: categoryBtnBorderRadius,
|
||||
padding: categoryBtnPadding,
|
||||
color: !selectClassify.length ? showCategory.btnActiveColor : showCategory.btnColor}">
|
||||
<text>全部</text>
|
||||
</view>
|
||||
<view class="list-item" v-for="(item, index) in classifyList" :key="index" @click="changeClassify(item.id)" :style="{
|
||||
background: (selectClassify.includes(item.id) ? showCategory.btnActiveBackground : showCategory.btnBackground),
|
||||
borderRadius: categoryBtnBorderRadius,
|
||||
padding: categoryBtnPadding,
|
||||
color: selectClassify.includes(item.id) ? showCategory.btnActiveColor : showCategory.btnColor}">
|
||||
<text>{{item.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<view class="map-context" :style="{height: showMap.heightType == 2 ? mapHeight : '100%', padding: mapPadding}">
|
||||
<map class="map" id="map" :style="{borderRadius: mapBorderRadius}" :markers="markersList" :include-points="includePoints" @callouttap="toMemberDetails" @markertap="toMemberDetails">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<cover-view slot="callout" class="map-callout" v-if="memberList.length">
|
||||
<cover-view :marker-id="Number(item.id)" v-for="item in memberList" :key="item.id">
|
||||
<cover-view class="callout-item">
|
||||
<cover-image class="item-avatar" :src="item.avatar"></cover-image>
|
||||
<cover-view class="item-name">{{item.name}}</cover-view>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
<!-- #endif -->
|
||||
</map>
|
||||
</view>
|
||||
<view class="map-popup" v-if="showCategory.styleMode == 2 && isExpandCategory2">
|
||||
<view class="popup-classify" :style="{background: showCategory.background, padding: `0 ${categoryPaddingLeft}`}">
|
||||
<scroll-view scroll-y class="classify-scroll" :style="{maxHeight: `${componentHeight}px`, padding: `${categoryPaddingTop} 0`}">
|
||||
<view class="scroll-list" :style="{gap: categoryItemSpace}">
|
||||
<view class="list-item" @click="changeClassify(-1)" :style="{
|
||||
background: (!selectClassify.length ? showCategory.btnActiveBackground : showCategory.btnBackground),
|
||||
borderRadius: categoryBtnBorderRadius,
|
||||
padding: categoryBtnPadding,
|
||||
color: !selectClassify.length ? showCategory.btnActiveColor : showCategory.btnColor}">
|
||||
<text>全部</text>
|
||||
</view>
|
||||
<view class="list-item" v-for="(item, index) in classifyList" :key="index" @click="changeClassify(item.id)" :style="{
|
||||
background: (selectClassify.includes(item.id) ? showCategory.btnActiveBackground : showCategory.btnBackground),
|
||||
borderRadius: categoryBtnBorderRadius,
|
||||
padding: categoryBtnPadding,
|
||||
color: selectClassify.includes(item.id) ? showCategory.btnActiveColor : showCategory.btnColor}">
|
||||
<text>{{item.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="scroll-space"></view>
|
||||
</scroll-view>
|
||||
<view class="classify-more" :style="{background: showCategory.background}" @click="handleExpand(2)">
|
||||
<view class="more-icon" style="transform: rotate(180deg);" :style="{'background-image': 'url('+ categoryIconDown +')'}" v-if="categoryIconDown"></view>
|
||||
<text class="more-text" :style="{color: showCategory.expandColor}">收起列表</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import svgData from "@/common/svg.js"
|
||||
export default {
|
||||
name: "memberMapDiy",
|
||||
props: ['showMap', 'showCategory', 'spaceHeight'],
|
||||
data() {
|
||||
return {
|
||||
// 加载完成
|
||||
loadEnd: false,
|
||||
// 分类列表 1.行业分类，2.分支机构，3.会员级别
|
||||
classifyList: [],
|
||||
// 已选分类
|
||||
selectClassify: [],
|
||||
// 分类查询参数
|
||||
page: 1,
|
||||
limit: 100,
|
||||
hasMore: false,
|
||||
// 会员列表
|
||||
memberList: [],
|
||||
// 地图标记点
|
||||
markersList: [],
|
||||
// 所有标记点
|
||||
includePoints: [],
|
||||
// 查询数据防抖延时器
|
||||
loadTimer: null,
|
||||
// 页面跳转防抖延时器
|
||||
toPageTimer: null,
|
||||
// 分类弹窗是否展开-样式1
|
||||
isExpandCategory1: true,
|
||||
// 分类弹窗是否展开-样式2
|
||||
isExpandCategory2: false,
|
||||
// 组件高度
|
||||
componentHeight: 0,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
mapItemBorderRadius() {
|
||||
return uni.upx2px(this.showMap.itemBorderRadius * 2) + 'px';
|
||||
},
|
||||
mapHeight() {
|
||||
if (this.showMap.heightType == 2) {
|
||||
return uni.upx2px(this.showMap.height * 2) + 'px';
|
||||
} else {
|
||||
return '100%';
|
||||
}
|
||||
},
|
||||
mapBorderRadius() {
|
||||
return uni.upx2px(this.showMap.borderRadius * 2) + 'px';
|
||||
},
|
||||
mapPadding() {
|
||||
return `${uni.upx2px(this.showMap.paddingTop * 2)}px ${uni.upx2px(this.showMap.paddingLeft * 2)}px`;
|
||||
},
|
||||
categoryBorderRadius() {
|
||||
return uni.upx2px(this.showCategory.borderRadius * 2) + 'px';
|
||||
},
|
||||
categoryMaxHeight() {
|
||||
var maxHeight = 0
|
||||
if (this.showMap.heightType == 2) {
|
||||
maxHeight = this.showMap.height - (this.showCategory.marginTop * 2)
|
||||
return uni.upx2px(maxHeight * 2) + 'px';
|
||||
} else {
|
||||
maxHeight = this.showCategory.marginTop * 2
|
||||
return uni.upx2px(maxHeight * 2) + 'px';
|
||||
}
|
||||
},
|
||||
categoryMarginTop() {
|
||||
return `${uni.upx2px(this.showCategory.marginTop * 2)}px`
|
||||
},
|
||||
categoryMarginLeft() {
|
||||
return `${uni.upx2px(this.showCategory.marginLeft * 2)}px`
|
||||
},
|
||||
categoryIconDown() {
|
||||
return svgData.svgToUrl("expand", this.showCategory.expandColor)
|
||||
},
|
||||
categoryPaddingTop() {
|
||||
return `${uni.upx2px(this.showCategory.paddingTop * 2)}px`
|
||||
},
|
||||
categoryPaddingLeft() {
|
||||
return `${uni.upx2px(this.showCategory.paddingLeft * 2)}px`
|
||||
},
|
||||
categoryItemSpace() {
|
||||
return uni.upx2px(this.showCategory.itemSpace * 2) + 'px';
|
||||
},
|
||||
categoryBtnBorderRadius() {
|
||||
return uni.upx2px(this.showCategory.btnBorderRadius * 2) + 'px';
|
||||
},
|
||||
categoryBtnPadding() {
|
||||
return `${uni.upx2px(this.showCategory.btnPaddingTop * 2)}px ${uni.upx2px(this.showCategory.btnPaddingLeft * 2)}px`
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
showCategory: {
|
||||
handler(value) {
|
||||
if (value) {
|
||||
this.getClassifyList()
|
||||
this.getMemberList()
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
},
|
||||
},
|
||||
destroyed() {
|
||||
if (this.loadTimer) clearTimeout(this.loadTimer)
|
||||
if (this.toPageTimer) clearTimeout(this.toPageTimer)
|
||||
},
|
||||
methods: {
|
||||
// 获取会员列表
|
||||
getMemberList() {
|
||||
var data = { type: this.showCategory.type }
|
||||
if (this.selectClassify.length) {
|
||||
if (this.showCategory.type == 1) {
|
||||
data.member_level_id = this.selectClassify.join(",")
|
||||
} else if (this.showCategory.type == 2) {
|
||||
data.industry_category_id = this.selectClassify.join(",")
|
||||
} else if (this.showCategory.type == 3) {
|
||||
data.institution_id = this.selectClassify.join(",")
|
||||
}
|
||||
}
|
||||
this.$util.request("member.memberMapList", data).then(res => {
|
||||
if (res.code == 1) {
|
||||
this.memberList = res.data || []
|
||||
var markersPoints = []
|
||||
res.data.forEach((item) => {
|
||||
if (item.latitude && item.longitude) {
|
||||
markersPoints.push({
|
||||
id: Number(item.id),
|
||||
latitude: item.latitude,
|
||||
longitude: item.longitude,
|
||||
// #ifdef H5
|
||||
iconPath: item.avatar,
|
||||
width: 28,
|
||||
height: 28,
|
||||
callout: {
|
||||
display: "ALWAYS",
|
||||
content: item.name,
|
||||
fontSize: 12,
|
||||
borderRadius: 4,
|
||||
padding: 5,
|
||||
},
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
iconPath: "/static/point.png",
|
||||
width: 20,
|
||||
height: 20,
|
||||
customCallout: {
|
||||
anchorX: 0,
|
||||
anchorY: 28,
|
||||
display: "ALWAYS",
|
||||
},
|
||||
// #endif
|
||||
})
|
||||
}
|
||||
});
|
||||
// #ifdef MP-WEIXIN
|
||||
this.markersList = markersPoints
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
this.markersList = []
|
||||
this.$nextTick(() => {
|
||||
this.markersList = markersPoints
|
||||
})
|
||||
// #endif
|
||||
const allPoints = res.data.filter(el => el.latitude && el.longitude).map(item => ({
|
||||
latitude: item.latitude,
|
||||
longitude: item.longitude,
|
||||
}));
|
||||
// #ifdef MP-WEIXIN
|
||||
this._mapContext = uni.createMapContext('map', this);
|
||||
this._mapContext.initMarkerCluster({
|
||||
enableDefaultStyle: false,
|
||||
zoomOnClick: true,
|
||||
gridSize: 60,
|
||||
});
|
||||
this._mapContext.includePoints({
|
||||
padding: [100, 100, 100, 100],
|
||||
points: allPoints,
|
||||
});
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
this.includePoints = this.calculateBounds(allPoints)
|
||||
// #endif
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取会员列表 ', error)
|
||||
})
|
||||
},
|
||||
// 计算所有点的边界
|
||||
calculateBounds(points) {
|
||||
if (!points || points.length === 0) return null;
|
||||
let minLat = Infinity;
|
||||
let maxLat = -Infinity;
|
||||
let minLng = Infinity;
|
||||
let maxLng = -Infinity;
|
||||
points.forEach(point => {
|
||||
const lat = point.latitude;
|
||||
const lng = point.longitude;
|
||||
minLat = Math.min(minLat, lat);
|
||||
maxLat = Math.max(maxLat, lat);
|
||||
minLng = Math.min(minLng, lng);
|
||||
maxLng = Math.max(maxLng, lng);
|
||||
});
|
||||
const latRange = maxLat - minLat;
|
||||
const lngRange = maxLng - minLng;
|
||||
const topPadding = latRange * 0.4;
|
||||
const bottomPadding = latRange * 0.3;
|
||||
const leftPadding = lngRange * 0.3;
|
||||
const rightPadding = lngRange * 0.3;
|
||||
minLat = minLat - bottomPadding;
|
||||
maxLat = maxLat + topPadding;
|
||||
minLng = minLng - leftPadding;
|
||||
maxLng = maxLng + rightPadding;
|
||||
return [{ latitude: minLat, longitude: minLng }, { latitude: maxLat, longitude: maxLng }];
|
||||
},
|
||||
// 获取分类列表
|
||||
getClassifyList() {
|
||||
// type: 1.会员级别，2.行业分类，3.分支机构
|
||||
const endFunction = () => {
|
||||
this.loadEnd = true
|
||||
setTimeout(() => {
|
||||
uni.createSelectorQuery().in(this).select('.diy-member-map').boundingClientRect(data => {
|
||||
this.componentHeight = data?.height
|
||||
}).exec();
|
||||
}, 200);
|
||||
}
|
||||
if (this.showCategory.type == 2) {
|
||||
this.getIndustry(() => {
|
||||
endFunction()
|
||||
})
|
||||
} else if (this.showCategory.type == 3) {
|
||||
this.page = 1
|
||||
this.getInstitution(() => {
|
||||
endFunction()
|
||||
})
|
||||
} else {
|
||||
this.getMemberLevel(() => {
|
||||
endFunction()
|
||||
})
|
||||
}
|
||||
},
|
||||
// 获取会员级别
|
||||
getMemberLevel(fn) {
|
||||
this.$util.request("member.level").then(res => {
|
||||
if (res.code == 1) {
|
||||
this.classifyList = res.data || []
|
||||
if (fn) fn()
|
||||
} else {
|
||||
if (fn) fn()
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
if (fn) fn()
|
||||
console.error('获取会员级别 ', error)
|
||||
})
|
||||
},
|
||||
// 获取行业分类
|
||||
getIndustry(fn) {
|
||||
this.$util.request("member.industry").then(res => {
|
||||
if (res.code == 1) {
|
||||
this.classifyList = res.data || []
|
||||
if (fn) fn()
|
||||
} else {
|
||||
if (fn) fn()
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
if (fn) fn()
|
||||
console.error('获取行业分类 ', error)
|
||||
})
|
||||
},
|
||||
// 获取分支机构
|
||||
getInstitution(fn) {
|
||||
this.$util.request("institution.list", {
|
||||
page: this.page,
|
||||
limit: this.limit
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
let list = res.data.data
|
||||
this.hasMore = this.page < res.data.total / this.limit ? true : false
|
||||
this.classifyList = this.page == 1 ? list : [...this.classifyList, ...list];
|
||||
if (fn) fn()
|
||||
} else {
|
||||
if (fn) fn()
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
if (fn) fn()
|
||||
console.error('获取机构列表', error)
|
||||
})
|
||||
},
|
||||
// 滚动到底部
|
||||
scrollBottom() {
|
||||
if (this.hasMore) {
|
||||
this.page++
|
||||
this.getInstitution()
|
||||
}
|
||||
},
|
||||
// 更换分类
|
||||
changeClassify(id) {
|
||||
if (id == -1) {
|
||||
this.selectClassify = []
|
||||
} else {
|
||||
const index = this.selectClassify.findIndex(item => item == id)
|
||||
if (index > -1) {
|
||||
this.$delete(this.selectClassify, index)
|
||||
} else {
|
||||
this.selectClassify.push(id)
|
||||
}
|
||||
}
|
||||
if (this.loadTimer) clearTimeout(this.loadTimer)
|
||||
this.loadTimer = setTimeout(() => {
|
||||
this.getMemberList()
|
||||
}, 400);
|
||||
},
|
||||
// 跳转会员详情
|
||||
toMemberDetails(res) {
|
||||
if (this.toPageTimer) clearTimeout(this.toPageTimer)
|
||||
this.toPageTimer = setTimeout(() => {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pages/member/details?id=" + res.detail.markerId,
|
||||
})
|
||||
}, 50);
|
||||
},
|
||||
// 展开/折叠分类列表
|
||||
handleExpand(type) {
|
||||
uni.createSelectorQuery().in(this).select('.diy-member-map').boundingClientRect(data => {
|
||||
this.componentHeight = data?.height
|
||||
}).exec();
|
||||
if (this.showCategory.styleMode == 2) {
|
||||
this.isExpandCategory2 = type == 1 ? true : false
|
||||
} else {
|
||||
this.isExpandCategory1 = !this.isExpandCategory1
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-member-map {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&.flex-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.map-context {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.callout-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #FFF;
|
||||
|
||||
.item-avatar {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 16rpx;
|
||||
object-fit: cover;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.map-classify {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
|
||||
.classify-list {
|
||||
height: 100%;
|
||||
|
||||
.list-item {
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
.classify-more {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 12rpx 24rpx;
|
||||
gap: 8rpx;
|
||||
|
||||
.more-icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.more-text {
|
||||
font-size: 24rpx;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&.style-1 {
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
|
||||
.classify-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.classify-more {
|
||||
min-width: 184rpx;
|
||||
margin-bottom: 16rpx;
|
||||
width: 100%;
|
||||
|
||||
.more-icon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
&.collapse {
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
|
||||
.more-icon {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.style-2 {
|
||||
.classify-list {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
.list-item {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.map-more {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 12rpx 24rpx;
|
||||
|
||||
.more-icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.more-text {
|
||||
font-size: 24rpx;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.map-popup {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
|
||||
.popup-classify {
|
||||
position: relative;
|
||||
|
||||
.classify-scroll {
|
||||
box-sizing: border-box;
|
||||
|
||||
.scroll-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.list-item {
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-space {
|
||||
width: 100%;
|
||||
height: 56rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.classify-more {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 12rpx 24rpx;
|
||||
|
||||
.more-icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.more-text {
|
||||
font-size: 24rpx;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
124
uniapp/小程序代码/pages/component/diy/menuDiy.vue
Normal file
124
uniapp/小程序代码/pages/component/diy/menuDiy.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-按钮组 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="diy-menu">
|
||||
<block v-for="(item, index) in showData" :key="index">
|
||||
<button class="menu-item clear" open-type="contact" :style="{marginTop: (index >= parseInt(showStyle.rowsNum) ? itemSpace : 0), width: `calc(100% / ${showStyle.rowsNum})`}" v-if="item.link && item.link.type == 'Service'">
|
||||
<view class="item-image" :style="{width: iconSize, height: iconSize}">
|
||||
<image mode="widthFix" :src="getImagePath(item.imgUrl)" :style="{borderRadius: borderRadius}"></image>
|
||||
</view>
|
||||
<view class="item-text text-ellipsis" :style="{color: showStyle.textColor, fontSize: fontSize}">{{ item.text }}</view>
|
||||
</button>
|
||||
<view class="menu-item" :style="{marginTop: (index >= parseInt(showStyle.rowsNum) ? itemSpace : 0), width: `calc(100% / ${showStyle.rowsNum})`}" @click="onClick(item.link, item.text)" v-else>
|
||||
<view class="item-image" :style="{width: iconSize, height: iconSize}">
|
||||
<image mode="widthFix" :src="getImagePath(item.imgUrl)" :style="{borderRadius: borderRadius}"></image>
|
||||
</view>
|
||||
<view class="item-text text-ellipsis" :style="{color: showStyle.textColor, fontSize: fontSize}">{{ item.text }}</view>
|
||||
<!-- #ifdef H5 -->
|
||||
<wx-open-launch-weapp class="item-absolute" :appid="item.link.appid" :path="item.link.path" v-if="item.link && item.link.type == 'WXMp'">
|
||||
<script type="text/wxtag-template">
|
||||
<style> .btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
|
||||
<view class="btn"></view>
|
||||
</script>
|
||||
</wx-open-launch-weapp>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'menuDiy',
|
||||
props: ['showStyle', 'showData', 'domain'],
|
||||
computed: {
|
||||
itemBorderRadius() {
|
||||
return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
|
||||
},
|
||||
iconSize() {
|
||||
let size = this.showStyle.iconSize || 44
|
||||
return uni.upx2px(size * 2) + 'px';
|
||||
},
|
||||
borderRadius() {
|
||||
return uni.upx2px(this.showStyle.borderRadius * 2) + 'px';
|
||||
},
|
||||
fontSize() {
|
||||
let size = this.showStyle.fontSize || 14
|
||||
return uni.upx2px(size * 2) + 'px';
|
||||
},
|
||||
paddingTop() {
|
||||
return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
|
||||
},
|
||||
paddingLeft() {
|
||||
return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
|
||||
},
|
||||
itemSpace() {
|
||||
return uni.upx2px(this.showStyle.itemSpace * 2) + 'px';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 获取图片地址
|
||||
getImagePath(url) {
|
||||
if (url.indexOf('http') > -1) {
|
||||
return url
|
||||
} else {
|
||||
return this.domain + url
|
||||
}
|
||||
},
|
||||
// 点击事件
|
||||
onClick(e, title) {
|
||||
if (!e) return;
|
||||
if (e.type == "Custom" && e.path.indexOf('/pages/article/index') > -1) {
|
||||
if (e.path.indexOf("?") > -1) e.path += `&title=${encodeURIComponent(title || "")}`
|
||||
else e.path += `?title=${encodeURIComponent(title || "")}`
|
||||
}
|
||||
this.$emit("onClick", e)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.diy-menu {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.menu-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.item-image {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.item-text {
|
||||
width: 100%;
|
||||
line-height: 1;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item-absolute {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
139
uniapp/小程序代码/pages/component/diy/navDiy.vue
Normal file
139
uniapp/小程序代码/pages/component/diy/navDiy.vue
Normal file
@@ -0,0 +1,139 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-导航组 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="diy-nav" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
|
||||
<block v-if="!showStyle.rowsLimit || showStyle.rowsLimit == -1">
|
||||
<menu-diy :showStyle="showStyle" :showData="showData" :domain="domain" @onClick="onClick"></menu-diy>
|
||||
</block>
|
||||
<block v-else-if="menuList.length == 1">
|
||||
<menu-diy :showStyle="showStyle" :showData="menuList[0]" :domain="domain" @onClick="onClick"></menu-diy>
|
||||
</block>
|
||||
<block v-else>
|
||||
<swiper :style="{height: carouselHeight}" @change="carouselChange">
|
||||
<swiper-item v-for="(menu, number) in menuList" :key="number">
|
||||
<menu-diy :showStyle="showStyle" :showData="menu" :domain="domain" @onClick="onClick"></menu-diy>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="carousel-dots">
|
||||
<view class="dots-item" :style="{background: carouseIndex == i ? (showStyle.dotColor || themeColor) : '#F1F1F1'}" v-for="(d, i) in menuList" :key="i"></view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
import menuDiy from './menuDiy.vue'
|
||||
export default {
|
||||
name: 'navDiy',
|
||||
components: {
|
||||
menuDiy
|
||||
},
|
||||
props: ['showStyle', 'showData', 'showParams', 'domain'],
|
||||
data() {
|
||||
return {
|
||||
// 已选索引
|
||||
carouseIndex: 0,
|
||||
// 菜单列表
|
||||
menuList: [],
|
||||
// 轮播图高度
|
||||
carouselHeight: 0,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
showData: {
|
||||
handler(value) {
|
||||
if (value && value.length) {
|
||||
this.menuList = this.splitArray(value);
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
},
|
||||
showStyle: {
|
||||
handler(value) {
|
||||
if (value) {
|
||||
let height = 0
|
||||
let iconSize = value.iconSize || 44
|
||||
let fontSize = value.fontSize || 14
|
||||
if (value.rowsLimit) {
|
||||
height = `calc(${uni.upx2px(((iconSize + fontSize) * value.rowsLimit + value.itemSpace * (value.rowsLimit - 1)) * 2)}px + ${12 * value.rowsLimit}rpx)`
|
||||
}
|
||||
this.carouselHeight = height;
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
}),
|
||||
itemBorderRadius() {
|
||||
return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
|
||||
},
|
||||
paddingTop() {
|
||||
return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
|
||||
},
|
||||
paddingLeft() {
|
||||
return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 轮播图切换
|
||||
carouselChange(e) {
|
||||
this.carouseIndex = e.detail.current
|
||||
},
|
||||
// 切割数组
|
||||
splitArray(arr) {
|
||||
var result = [];
|
||||
if (this.showStyle.rowsLimit && this.showStyle.rowsLimit > 0 && arr.length > this.showStyle.rowsNum * this.showStyle.rowsLimit) {
|
||||
for (var i = 0; i < arr.length; i += parseInt(this.showStyle.rowsNum * this.showStyle.rowsLimit)) {
|
||||
var chunk = arr.slice(i, i + parseInt(this.showStyle.rowsNum * this.showStyle.rowsLimit));
|
||||
result.push(chunk);
|
||||
}
|
||||
} else {
|
||||
result[0] = arr
|
||||
}
|
||||
return result;
|
||||
},
|
||||
// 点击事件
|
||||
onClick(e) {
|
||||
if (!e) return;
|
||||
this.$emit("onClick", e)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.diy-nav {
|
||||
.carousel-dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 20px;
|
||||
|
||||
.dots-item {
|
||||
width: 24rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #F1F1F1;
|
||||
margin-right: 4rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
386
uniapp/小程序代码/pages/component/diy/noticeDiy.vue
Normal file
386
uniapp/小程序代码/pages/component/diy/noticeDiy.vue
Normal file
@@ -0,0 +1,386 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-消息通知 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view v-if="show" class="uni-noticebar" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}" @click="onClick">
|
||||
<view v-if="showParams.showImg && showParams.icon" class="zan-noticebar__left-icon" style="float: left;">
|
||||
<image :src="getImagePath(showParams.icon)" mode="aspectFit" />
|
||||
</view>
|
||||
<view ref="textBox" class="uni-noticebar__content-wrapper" :class="{'uni-noticebar__content-wrapper--scrollable':scrollable, 'uni-noticebar__content-wrapper--single':!scrollable && (single || moreText)}">
|
||||
<view :id="elIdBox" class="uni-noticebar__content" :class="{'uni-noticebar__content--scrollable':scrollable, 'uni-noticebar__content--single':!scrollable && (single || moreText)}">
|
||||
<text :id="elId" ref="animationEle" class="uni-noticebar__content-text" :class="{'uni-noticebar__content-text--scrollable':scrollable,'uni-noticebar__content-text--single':!scrollable && (single || moreText)}" :style="{color: showStyle.textColor, width:wrapWidth+'px', 'animationDuration': animationDuration, '-webkit-animationDuration': animationDuration ,animationPlayState: webviewHide?'paused':animationPlayState,'-webkit-animationPlayState':webviewHide?'paused':animationPlayState, animationDelay: animationDelay, '-webkit-animationDelay':animationDelay}">{{showParams.text}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="showGetMore === true || showGetMore === 'true'" class="uni-noticebar__more" @click="clickMore">
|
||||
<text v-if="moreText" :style="{ color: moreColor }" class="uni-noticebar__more-text">{{ moreText }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef APP-NVUE
|
||||
const dom = weex.requireModule('dom');
|
||||
const animation = weex.requireModule('animation');
|
||||
// #endif
|
||||
export default {
|
||||
name: 'notice',
|
||||
props: {
|
||||
moreText: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
speed: {
|
||||
// 默认1s滚动100px
|
||||
type: Number,
|
||||
default: 100
|
||||
},
|
||||
moreColor: {
|
||||
type: String,
|
||||
default: '#999999'
|
||||
},
|
||||
single: {
|
||||
// 是否单行
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
scrollable: {
|
||||
// 是否滚动，添加后控制单行效果取消
|
||||
type: [Boolean, String],
|
||||
default: true
|
||||
},
|
||||
showGetMore: {
|
||||
// 是否显示右侧查看更多
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
showClose: {
|
||||
// 是否显示左侧关闭按钮
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
showStyle: {},
|
||||
showParams: {},
|
||||
domain: '',
|
||||
},
|
||||
computed: {
|
||||
itemBorderRadius() {
|
||||
return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
|
||||
},
|
||||
paddingTop() {
|
||||
return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
|
||||
},
|
||||
paddingLeft() {
|
||||
return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
|
||||
},
|
||||
},
|
||||
data() {
|
||||
const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
|
||||
const elIdBox = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
|
||||
return {
|
||||
textWidth: 0,
|
||||
boxWidth: 0,
|
||||
wrapWidth: '',
|
||||
webviewHide: false,
|
||||
// #ifdef APP-NVUE
|
||||
stopAnimation: false,
|
||||
// #endif
|
||||
elId: elId,
|
||||
elIdBox: elIdBox,
|
||||
show: true,
|
||||
animationDuration: 'none',
|
||||
animationPlayState: 'paused',
|
||||
animationDelay: '0s',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// #ifdef APP-PLUS
|
||||
var pages = getCurrentPages();
|
||||
var page = pages[pages.length - 1];
|
||||
var currentWebview = page.$getAppWebview();
|
||||
currentWebview.addEventListener('hide', () => {
|
||||
this.webviewHide = true
|
||||
})
|
||||
currentWebview.addEventListener('show', () => {
|
||||
this.webviewHide = false
|
||||
})
|
||||
// #endif
|
||||
this.$nextTick(() => {
|
||||
this.initSize()
|
||||
})
|
||||
},
|
||||
// #ifdef APP-NVUE
|
||||
beforeDestroy() {
|
||||
this.stopAnimation = true
|
||||
},
|
||||
// #endif
|
||||
methods: {
|
||||
// 获取图片地址
|
||||
getImagePath(url) {
|
||||
if (url.indexOf('http') > -1) {
|
||||
return url
|
||||
} else {
|
||||
return this.domain + url
|
||||
}
|
||||
},
|
||||
initSize() {
|
||||
if (this.scrollable) {
|
||||
// #ifndef APP-NVUE
|
||||
let query = [],
|
||||
boxWidth = 0,
|
||||
textWidth = 0;
|
||||
let textQuery = new Promise((resolve, reject) => {
|
||||
uni.createSelectorQuery()
|
||||
// #ifndef MP-ALIPAY
|
||||
.in(this)
|
||||
// #endif
|
||||
.select(`#${this.elId}`)
|
||||
.boundingClientRect()
|
||||
.exec(ret => {
|
||||
this.textWidth = ret[0].width
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
let boxQuery = new Promise((resolve, reject) => {
|
||||
uni.createSelectorQuery()
|
||||
// #ifndef MP-ALIPAY
|
||||
.in(this)
|
||||
// #endif
|
||||
.select(`#${this.elIdBox}`)
|
||||
.boundingClientRect()
|
||||
.exec(ret => {
|
||||
this.boxWidth = ret[0].width
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
query.push(textQuery)
|
||||
query.push(boxQuery)
|
||||
Promise.all(query).then(() => {
|
||||
this.animationDuration = `${this.textWidth / this.speed}s`
|
||||
this.animationDelay = `-${this.boxWidth / this.speed}s`
|
||||
setTimeout(() => {
|
||||
this.animationPlayState = 'running'
|
||||
}, 1000)
|
||||
})
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
dom.getComponentRect(this.$refs['animationEle'], (res) => {
|
||||
let winWidth = uni.getSystemInfoSync().windowWidth
|
||||
this.textWidth = res.size.width
|
||||
animation.transition(this.$refs['animationEle'], {
|
||||
styles: {
|
||||
transform: `translateX(-${winWidth}px)`
|
||||
},
|
||||
duration: 0,
|
||||
timingFunction: 'linear',
|
||||
delay: 0
|
||||
}, () => {
|
||||
if (!this.stopAnimation) {
|
||||
animation.transition(this.$refs['animationEle'], {
|
||||
styles: {
|
||||
transform: `translateX(-${this.textWidth}px)`
|
||||
},
|
||||
timingFunction: 'linear',
|
||||
duration: (this.textWidth - winWidth) / this.speed * 1000,
|
||||
delay: 1000
|
||||
}, () => {
|
||||
if (!this.stopAnimation) {
|
||||
this.loopAnimation()
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
// #ifdef APP-NVUE
|
||||
if (!this.scrollable && (this.single || this.moreText)) {
|
||||
dom.getComponentRect(this.$refs['textBox'], (res) => {
|
||||
this.wrapWidth = res.size.width
|
||||
})
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
loopAnimation() {
|
||||
// #ifdef APP-NVUE
|
||||
animation.transition(this.$refs['animationEle'], {
|
||||
styles: {
|
||||
transform: `translateX(0px)`
|
||||
},
|
||||
duration: 0
|
||||
}, () => {
|
||||
if (!this.stopAnimation) {
|
||||
animation.transition(this.$refs['animationEle'], {
|
||||
styles: {
|
||||
transform: `translateX(-${this.textWidth}px)`
|
||||
},
|
||||
duration: this.textWidth / this.speed * 1000,
|
||||
timingFunction: 'linear',
|
||||
delay: 0
|
||||
}, () => {
|
||||
if (!this.stopAnimation) {
|
||||
this.loopAnimation()
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
clickMore() {
|
||||
this.$emit('getmore')
|
||||
},
|
||||
close() {
|
||||
this.show = false;
|
||||
this.$emit('close')
|
||||
},
|
||||
onClick() {
|
||||
this.$emit('click')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.uni-noticebar {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 6px 12px;
|
||||
// margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.uni-noticebar-close {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.uni-noticebar-icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.uni-noticebar__content-wrapper {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.uni-noticebar__content-wrapper--single {
|
||||
/* #ifndef APP-NVUE */
|
||||
line-height: 18px;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-noticebar__content-wrapper--single,
|
||||
.uni-noticebar__content-wrapper--scrollable {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.uni-noticebar__content-wrapper--scrollable {
|
||||
position: relative;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.uni-noticebar__content--scrollable {
|
||||
/* #ifdef APP-NVUE */
|
||||
flex: 0;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
flex: 1;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-noticebar__content--single {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
flex: none;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-noticebar__content-text {
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
/* #ifndef APP-NVUE */
|
||||
word-break: break-all;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-noticebar__content-text--single {
|
||||
/* #ifdef APP-NVUE */
|
||||
lines: 1;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
/* #endif */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.uni-noticebar__content-text--scrollable {
|
||||
/* #ifdef APP-NVUE */
|
||||
lines: 1;
|
||||
padding-left: 750rpx;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
white-space: nowrap;
|
||||
padding-left: 100%;
|
||||
animation: notice 10s 0s linear infinite both;
|
||||
animation-play-state: paused;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-noticebar__more {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: inline-flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.uni-noticebar__more-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@keyframes notice {
|
||||
100% {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.zan-noticebar__left-icon {
|
||||
height: 36upx;
|
||||
min-width: 40upx;
|
||||
padding-top: 2upx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.zan-noticebar__left-icon>image {
|
||||
width: 32upx;
|
||||
height: 32upx;
|
||||
}
|
||||
</style>
|
||||
36
uniapp/小程序代码/pages/component/diy/richTextDiy.vue
Normal file
36
uniapp/小程序代码/pages/component/diy/richTextDiy.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-富文本 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<!-- 富文本 -->
|
||||
<view class="diy-richText" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
|
||||
<mp-html :content="showParams.content" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'richTextDiy',
|
||||
props: ['showStyle', 'showParams'],
|
||||
computed: {
|
||||
itemBorderRadius() {
|
||||
return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
|
||||
},
|
||||
paddingTop() {
|
||||
return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
|
||||
},
|
||||
paddingLeft() {
|
||||
return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
95
uniapp/小程序代码/pages/component/diy/searchDiy.vue
Normal file
95
uniapp/小程序代码/pages/component/diy/searchDiy.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-搜索 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="diy-search" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
|
||||
<view class="search-input" :style="{'--placeholder-color': showStyle.placeholderColor, padding: inputPaddingTop + ' ' + inputPaddingLeft, background: showStyle.inputBackground, borderRadius: inputBorderRadius}">
|
||||
<view :style="{'background-image': 'url('+ iconSearch +')', width: iconSize, height: iconSize, backgroundSize: iconSize}" v-if="iconSearch"></view>
|
||||
<input class="input-box" type="text" confirm-type="search" :style="{fontSize: fontSize, color: showStyle.inputColor}" :placeholder="showParams.placeholder" placeholder-class="placeholder" @confirm="handleSearch" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import svgData from "@/common/svg.js"
|
||||
export default {
|
||||
name: "searchDiy",
|
||||
props: ['showStyle', 'showParams'],
|
||||
computed: {
|
||||
itemBorderRadius() {
|
||||
return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
|
||||
},
|
||||
iconSearch() {
|
||||
return svgData.svgToUrl("search", this.showStyle.iconColor)
|
||||
},
|
||||
iconSize() {
|
||||
return uni.upx2px(this.showStyle.iconSize * 2) + 'px';
|
||||
},
|
||||
fontSize() {
|
||||
return uni.upx2px(this.showStyle.fontSize * 2) + 'px';
|
||||
},
|
||||
inputBorderRadius() {
|
||||
return uni.upx2px(this.showStyle.inputBorderRadius * 2) + 'px';
|
||||
},
|
||||
inputPaddingTop() {
|
||||
return uni.upx2px(this.showStyle.inputPaddingTop * 2) + 'px';
|
||||
},
|
||||
inputPaddingLeft() {
|
||||
return uni.upx2px(this.showStyle.inputPaddingLeft * 2) + 'px';
|
||||
},
|
||||
paddingTop() {
|
||||
return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
|
||||
},
|
||||
paddingLeft() {
|
||||
return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 搜索
|
||||
handleSearch(e) {
|
||||
if (!e.detail.value) {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: this.showParams.placeholder,
|
||||
duration: 2000
|
||||
})
|
||||
return
|
||||
}
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: `/pages/diy/search?keyword=${encodeURIComponent(e.detail.value)}`
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-search {
|
||||
.search-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.input-box {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: auto;
|
||||
line-height: 1.4;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: var(--placeholder-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
88
uniapp/小程序代码/pages/component/diy/textButtonDiy.vue
Normal file
88
uniapp/小程序代码/pages/component/diy/textButtonDiy.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-按钮组 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="diy-text-button" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
|
||||
<block v-for="(item, index) in showData" :key="index">
|
||||
<button class="item clear" open-type="contact" :style="{color: showStyle.textColor, fontSize: fontSize}" v-if="item.link && item.link.type == 'Service'">
|
||||
{{item.text}}
|
||||
</button>
|
||||
<view class="item" :style="{color: showStyle.textColor, fontSize: fontSize}" @click="onClick(item.link)" v-else>
|
||||
<text>{{item.text}}</text>
|
||||
<!-- #ifdef H5 -->
|
||||
<wx-open-launch-weapp class="item-absolute" :appid="item.link.appid" :path="item.link.path" v-if="item.link && item.link.type == 'WXMp'">
|
||||
<script type="text/wxtag-template">
|
||||
<style> .btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
|
||||
<view class="btn"></view>
|
||||
</script>
|
||||
</wx-open-launch-weapp>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'textButtonDiy',
|
||||
props: ['showStyle', 'showData'],
|
||||
computed: {
|
||||
itemBorderRadius() {
|
||||
return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
|
||||
},
|
||||
fontSize() {
|
||||
return uni.upx2px(this.showStyle.fontSize * 2) + 'px';
|
||||
},
|
||||
paddingTop() {
|
||||
return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
|
||||
},
|
||||
paddingLeft() {
|
||||
return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onClick(e) {
|
||||
if (!e) return;
|
||||
this.$emit("onClick", e)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.diy-text-button {
|
||||
height: auto;
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
padding: 0.5rem;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
color: #666;
|
||||
font-size: 0.75rem;
|
||||
width: 1%;
|
||||
display: table-cell;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
transition: background-color 300ms;
|
||||
-webkit-transition: background-color 300ms;
|
||||
|
||||
.item-absolute {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
40
uniapp/小程序代码/pages/component/diy/textDiy.vue
Normal file
40
uniapp/小程序代码/pages/component/diy/textDiy.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-文本组 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view :style="{background: showStyle.background, borderRadius: itemBorderRadius, padding: paddingTop +' '+ paddingLeft, textAlign: showStyle.textAlign, color: showStyle.textColor, fontSize: fontSize}">
|
||||
<text v-if="showStyle.fontStyle == 'bold'" style="font-weight: bold;">{{showStyle.text}}</text>
|
||||
<text v-else-if="showStyle.fontStyle == 'italic'" style="font-style: italic;">{{showStyle.text}}</text>
|
||||
<text v-else>{{showStyle.text}}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'textDiy',
|
||||
props: ['showStyle'],
|
||||
computed: {
|
||||
itemBorderRadius() {
|
||||
return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
|
||||
},
|
||||
fontSize() {
|
||||
return uni.upx2px(this.showStyle.fontSize * 2) + 'px';
|
||||
},
|
||||
paddingTop() {
|
||||
return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
|
||||
},
|
||||
paddingLeft() {
|
||||
return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
55
uniapp/小程序代码/pages/component/diy/timelineDiy.vue
Normal file
55
uniapp/小程序代码/pages/component/diy/timelineDiy.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-时间线 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="diy-timeline" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
|
||||
<u-time-line>
|
||||
<u-time-line-item v-for="(item,index) in showData" :key="index" :bgColor="item.color">
|
||||
<template v-slot:content>
|
||||
<view>
|
||||
<view class="u-order-desc">{{item.content}}</view>
|
||||
<view class="u-order-time" v-if="item.hide">{{item.time}}</view>
|
||||
</view>
|
||||
</template>
|
||||
</u-time-line-item>
|
||||
</u-time-line>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['showStyle', 'showData'],
|
||||
computed: {
|
||||
itemBorderRadius() {
|
||||
return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
|
||||
},
|
||||
paddingTop() {
|
||||
return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
|
||||
},
|
||||
paddingLeft() {
|
||||
return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-timeline .u-order-time {
|
||||
color: rgb(200, 200, 200);
|
||||
font-size: 26rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.diy-timeline .u-time-axis-item {
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
</style>
|
||||
106
uniapp/小程序代码/pages/component/diy/titleDiy.vue
Normal file
106
uniapp/小程序代码/pages/component/diy/titleDiy.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-标题 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="diy-title" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
|
||||
<view class="title-text" :style="{fontSize: fontSize, color: showStyle.color}">
|
||||
<text class="italic" v-if="showStyle.fontStyle == 'italic'">{{showParams.title}}</text>
|
||||
<text class="bold" v-else-if="showStyle.fontStyle == 'bold'">{{showParams.title}}</text>
|
||||
<text v-else>{{showParams.title}}</text>
|
||||
</view>
|
||||
<button class="title-btn clear" open-type="contact" v-if="showParams.link && showParams.link.type == 'Service'">
|
||||
<text :style="{fontSize: btnSize, color: showStyle.btnColor}" v-if="showParams.btnType == 'text'">{{showParams.btnText}}</text>
|
||||
<view class="btn" :style="{width: iconSize, height: iconSize, backgroundSize: iconSize, backgroundImage: 'url('+ iconMore +')'}" v-else-if="iconMore && showParams.btnType == 'icon'"></view>
|
||||
</button>
|
||||
<view class="title-btn" @click="onClick(showParams.link)" v-else>
|
||||
<text :style="{fontSize: btnSize, color: showStyle.btnColor}" v-if="showParams.btnType == 'text'">{{showParams.btnText}}</text>
|
||||
<view class="btn" :style="{width: iconSize, height: iconSize, backgroundSize: iconSize, backgroundImage: 'url('+ iconMore +')'}" v-else-if="iconMore && showParams.btnType == 'icon'"></view>
|
||||
<!-- #ifdef H5 -->
|
||||
<wx-open-launch-weapp class="btn-absolute" :appid="showParams.link.appid" :path="showParams.link.path" v-if="showParams.link && showParams.link.type == 'WXMp'">
|
||||
<script type="text/wxtag-template">
|
||||
<style> .wx-btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
|
||||
<view class="wx-btn"></view>
|
||||
</script>
|
||||
</wx-open-launch-weapp>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import svgData from "@/common/svg.js"
|
||||
export default {
|
||||
name: 'titleDiy',
|
||||
props: ['showStyle', 'showParams'],
|
||||
computed: {
|
||||
itemBorderRadius() {
|
||||
return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
|
||||
},
|
||||
fontSize() {
|
||||
return uni.upx2px(this.showStyle.fontSize * 2) + 'px';
|
||||
},
|
||||
btnSize() {
|
||||
return uni.upx2px(this.showStyle.btnSize * 2) + 'px';
|
||||
},
|
||||
iconSize() {
|
||||
return uni.upx2px(this.showStyle.iconSize * 2) + 'px';
|
||||
},
|
||||
iconMore() {
|
||||
return svgData.svgToUrl("more", this.showStyle.btnColor)
|
||||
},
|
||||
paddingTop() {
|
||||
return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
|
||||
},
|
||||
paddingLeft() {
|
||||
return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 点击事件
|
||||
onClick(e) {
|
||||
if (!e) return;
|
||||
this.$emit("onClick", e)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.title-text {
|
||||
.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.title-btn {
|
||||
position: relative;
|
||||
|
||||
.btn-absolute {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
52
uniapp/小程序代码/pages/component/diy/videoDiy.vue
Normal file
52
uniapp/小程序代码/pages/component/diy/videoDiy.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-视频 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="diy-video" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
|
||||
<video :src="showParams.videoUrl" :poster="getImagePath(showParams.poster)" :autoplay="showParams.autoplay == 1" controls="false"></video>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'videoDiy',
|
||||
props: ['showStyle', 'showParams', 'domain'],
|
||||
computed: {
|
||||
paddingTop() {
|
||||
return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
|
||||
},
|
||||
paddingLeft() {
|
||||
return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
|
||||
},
|
||||
itemBorderRadius() {
|
||||
return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 获取图片地址
|
||||
getImagePath(url) {
|
||||
if (url.indexOf('http') > -1) {
|
||||
return url
|
||||
} else {
|
||||
return this.domain + url
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-video video {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
48
uniapp/小程序代码/pages/component/diy/warnDiy.vue
Normal file
48
uniapp/小程序代码/pages/component/diy/warnDiy.vue
Normal file
@@ -0,0 +1,48 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-警告提示 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<block v-if="isshow">
|
||||
<view :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
|
||||
<u-alert-tips :type="showStyle.type" :title="showParams.title" :description="showParams.description" :close-able="showParams.closable" :show="show" @close="onClick" :show-icon="showParams.showIcon"></u-alert-tips>
|
||||
</view>
|
||||
</block>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['showStyle', 'showParams'],
|
||||
computed: {
|
||||
itemBorderRadius() {
|
||||
return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
|
||||
},
|
||||
paddingTop() {
|
||||
return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
|
||||
},
|
||||
paddingLeft() {
|
||||
return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: true,
|
||||
isshow: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick() {
|
||||
this.show = false;
|
||||
this.isshow = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
92
uniapp/小程序代码/pages/component/empty/empty.vue
Normal file
92
uniapp/小程序代码/pages/component/empty/empty.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-内容为空 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="component-empty" :style="{marginTop: top, padding: padding}">
|
||||
<image class="image" :style="{width: width, height: width}" src="/static/empty.png" mode="widthFix"></image>
|
||||
<view class="text" :style="{fontSize: size}">
|
||||
<text>{{title}}</text>
|
||||
<view class="btn" @click="callback" v-if="btnText" :style="{ color: themeColor }">{{btnText}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
name: "emptyIndex",
|
||||
props: {
|
||||
// 距顶部位置 注：center为居中显示
|
||||
top: {
|
||||
type: String,
|
||||
default: "32rpx"
|
||||
},
|
||||
// 盒子内边距
|
||||
padding: {
|
||||
type: String,
|
||||
default: "32rpx"
|
||||
},
|
||||
// 图标尺寸
|
||||
width: {
|
||||
type: String,
|
||||
default: "260rpx"
|
||||
},
|
||||
// 文字大小
|
||||
size: {
|
||||
type: String,
|
||||
default: "32rpx"
|
||||
},
|
||||
// 标题
|
||||
title: {
|
||||
type: String,
|
||||
default: "暂无相关内容~"
|
||||
},
|
||||
// 快捷按钮文字 注：为空则不显示
|
||||
btnText: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 快捷按钮回调函数
|
||||
callback() {
|
||||
this.$emit("callback")
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.component-empty {
|
||||
text-align: center;
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
margin: 0 auto 32rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #888;
|
||||
line-height: 1.4;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
85
uniapp/小程序代码/pages/component/mall/goods.vue
Normal file
85
uniapp/小程序代码/pages/component/mall/goods.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-商会商品 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="component-mall-goods">
|
||||
<view class="goods-item flex" v-for="item in showData" :key="item.id" @click="toDetails(item.id)">
|
||||
<image class="item-image" :src="item.image" mode="aspectFill"></image>
|
||||
<view class="item-info flex-item flex-direction-column justify-content-between">
|
||||
<view class="info-title text-ellipsis-more">{{ item.name }}</view>
|
||||
<view class="info-price">￥{{ item.price }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
name: "mallGoods",
|
||||
props: ["showData"],
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 跳转商品详情
|
||||
toDetails(id) {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pagesMall/goods/details?id=" + id
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.component-mall-goods {
|
||||
.goods-item {
|
||||
margin-top: 32rpx;
|
||||
padding: 32rpx;
|
||||
background: #FFF;
|
||||
border-radius: 10rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.item-image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
margin-left: 24rpx;
|
||||
|
||||
.info-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.info-price {
|
||||
margin-top: 16rpx;
|
||||
color: var(--theme-color);
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
969
uniapp/小程序代码/pages/component/member/apply.vue
Normal file
969
uniapp/小程序代码/pages/component/member/apply.vue
Normal file
@@ -0,0 +1,969 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-申请入会 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="component-member-apply" :style="{'--theme-color': themeColor}">
|
||||
<!-- 表单数据 -->
|
||||
<form class="component-member-apply-form">
|
||||
<view class="component-member-apply-form-item" v-for="(item, index) in applyField" :key="index" v-if="!isApply || item.apply_show != 2">
|
||||
<!-- 标题 -->
|
||||
<view class="item-title">
|
||||
<text class="required" v-if="item.required == 1">*</text>
|
||||
<text class="text">{{item.label}}</text>
|
||||
<text class="tips" v-if="item.type == 'image' || item.type == 'cert' || item.type == 'video' || item.type == 'file'">（{{item.option}}）</text>
|
||||
</view>
|
||||
<!-- 文本字段 -->
|
||||
<block v-if="item.type == 'text'">
|
||||
<!-- 地址选择 -->
|
||||
<view class="item-input" @click="chooseLocation(index)" v-if="showType == 1 && item.field == 'address'">
|
||||
<view class="input text-ellipsis" v-if="item.value.address">{{item.value.address}}</view>
|
||||
<view class="input placeholder text-ellipsis" v-else>请选择{{item.label}}</view>
|
||||
<image class="icon" src="/static/del.png" mode="aspectFit" v-if="item.value.address" @click.stop="clearLocation(index)"></image>
|
||||
<image class="icon" src="/static/right.png" mode="aspectFit" v-else></image>
|
||||
</view>
|
||||
<!-- 文本框 -->
|
||||
<view class="item-input" :class="{disabled: item.disabled}" v-else>
|
||||
<input class="input" :disabled="item.disabled" type="text" v-model="item.value" :placeholder="item.option" placeholder-class="placeholder" />
|
||||
</view>
|
||||
</block>
|
||||
<!-- 数字字段 -->
|
||||
<block v-else-if="item.type == 'number'">
|
||||
<view class="item-input" :class="{disabled: item.disabled}">
|
||||
<input class="input" :disabled="item.disabled" type="number" :maxlength="(showType == 1 && item.field == 'mobile') ? 11 : -1" v-model="item.value" :placeholder="item.option" placeholder-class="placeholder" />
|
||||
</view>
|
||||
<view class="item-switch" @click="changeMobileAuth()" v-if="showType == 1 && item.field == 'mobile' && mobileAuth">
|
||||
<view class="switch-label">手机号是否对外</view>
|
||||
<view class="switch-box" :class="{'select': mobileAuth == 1}">
|
||||
<view class="round"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 单选按钮 -->
|
||||
<block v-else-if="item.type == 'radio'">
|
||||
<view class="item-radio">
|
||||
<view class="radio" :class="{active: item.value == option}" v-for="(option, num) in getOption(item.option)" :key="num" @click="selectRadio(index, option)">
|
||||
<image src="/static/select.png" mode="aspectFit"></image>
|
||||
<text>{{option}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 复选按钮 -->
|
||||
<block v-else-if="item.type == 'checkbox'">
|
||||
<view class="item-radio">
|
||||
<view class="radio" :class="{active: item.value.includes(option)}" v-for="(option, num) in getOption(item.option)" :key="num" @click="selectCheckbox(index, option)">
|
||||
<image src="/static/select.png" mode="aspectFit"></image>
|
||||
<text>{{option}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 下拉列表 -->
|
||||
<block v-else-if="item.type == 'select'">
|
||||
<!-- 会员级别 -->
|
||||
<view class="item-input" :class="{disabled: item.disabled}" @click="openSelectPicker(index)" v-if="showType == 1 && item.field == 'member_level_id'">
|
||||
<view class="input text-ellipsis" v-if="item.value">{{getMemberLevelName(item.value)}}</view>
|
||||
<view class="input placeholder text-ellipsis" v-else>请选择{{item.label}}</view>
|
||||
<image class="icon" src="/static/right.png" mode="aspectFit" v-if="!item.disabled"></image>
|
||||
</view>
|
||||
<!-- 行业分类 -->
|
||||
<view class="item-input" @click="openSelectPicker(index)" v-else-if="showType == 1 && item.field == 'industry_category_id'">
|
||||
<view class="input text-ellipsis" v-if="item.value">{{getIndustryName(item.value)}}</view>
|
||||
<view class="input placeholder text-ellipsis" v-else>请选择{{item.label}}</view>
|
||||
<image class="icon" src="/static/del.png" mode="aspectFit" v-if="item.value" @click.stop="clearValue(index)"></image>
|
||||
<image class="icon" src="/static/right.png" mode="aspectFit" v-else></image>
|
||||
</view>
|
||||
<!-- 籍贯 -->
|
||||
<view class="item-input" @click="openSelectPicker(index)" v-else-if="showType == 1 && item.field == 'native_place'">
|
||||
<view class="input text-ellipsis" v-if="item.value">{{item.value}}</view>
|
||||
<view class="input placeholder text-ellipsis" v-else>{{item.option}}</view>
|
||||
<image class="icon" src="/static/del.png" mode="aspectFit" v-if="item.value" @click.stop="clearValue(index)"></image>
|
||||
<image class="icon" src="/static/right.png" mode="aspectFit" v-else></image>
|
||||
</view>
|
||||
<!-- 下拉列表 -->
|
||||
<view class="item-input" @click="openSelectPicker(index)" v-else>
|
||||
<view class="input text-ellipsis" v-if="item.value">{{item.value}}</view>
|
||||
<view class="input placeholder text-ellipsis" v-else>请选择{{item.label}}</view>
|
||||
<image class="icon" src="/static/del.png" mode="aspectFit" v-if="item.value" @click.stop="clearValue(index)"></image>
|
||||
<image class="icon" src="/static/right.png" mode="aspectFit" v-else></image>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 日期字段 -->
|
||||
<block v-else-if="item.type == 'date'">
|
||||
<view class="item-input" @click="openDatePicker(index)">
|
||||
<view class="input text-ellipsis" v-if="item.value">{{item.value}}</view>
|
||||
<view class="input placeholder text-ellipsis" v-else>请选择{{item.label}}</view>
|
||||
<image class="icon" src="/static/del.png" mode="aspectFit" v-if="item.value" @click.stop="clearValue(index)"></image>
|
||||
<image class="icon" src="/static/date.png" mode="aspectFit" v-else></image>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 时间字段 -->
|
||||
<block v-else-if="item.type == 'time'">
|
||||
<view class="item-input" @click="openTimePicker(index)">
|
||||
<view class="input text-ellipsis" v-if="item.value">{{item.value}}</view>
|
||||
<view class="input placeholder text-ellipsis" v-else>请选择{{item.label}}</view>
|
||||
<image class="icon" src="/static/del.png" mode="aspectFit" v-if="item.value" @click.stop="clearValue(index)"></image>
|
||||
<image class="icon" src="/static/time.png" mode="aspectFit" v-else></image>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 日期时间 -->
|
||||
<block v-else-if="item.type == 'datetime'">
|
||||
<uni-datetime-picker v-model="item.value">
|
||||
<view class="item-input">
|
||||
<view class="input text-ellipsis" v-if="item.value">{{item.value}}</view>
|
||||
<view class="input placeholder text-ellipsis" v-else>请选择{{item.label}}</view>
|
||||
<image class="icon" src="/static/del.png" mode="aspectFit" v-if="item.value" @click.stop="clearValue(index)"></image>
|
||||
<image class="icon" src="/static/date.png" mode="aspectFit" v-else></image>
|
||||
</view>
|
||||
</uni-datetime-picker>
|
||||
</block>
|
||||
<!-- 文本域 -->
|
||||
<block v-else-if="item.type == 'textarea'">
|
||||
<view class="item-input" @click="toEditor(index)" v-if="showType == 1 && item.field == 'introduce_content'">
|
||||
<view class="input text-ellipsis" v-if="item.value">{{getEditorText(item.value) || ('编辑' + item.label)}}</view>
|
||||
<view class="input placeholder text-ellipsis" v-else>{{item.option}}</view>
|
||||
<image class="icon" src="/static/right.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="item-input" @click="toEditor(index)" v-else-if="showType == 2 && item.field == 'company_introduction'">
|
||||
<view class="input text-ellipsis" v-if="item.value">{{getEditorText(item.value) || ('编辑' + item.label)}}</view>
|
||||
<view class="input placeholder text-ellipsis" v-else>{{item.option}}</view>
|
||||
<image class="icon" src="/static/right.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="item-input" @click="toEditor(index)" v-else-if="showType == 3 && item.field == 'organize_introduction'">
|
||||
<view class="input text-ellipsis" v-if="item.value">{{getEditorText(item.value) || ('编辑' + item.label)}}</view>
|
||||
<view class="input placeholder text-ellipsis" v-else>{{item.option}}</view>
|
||||
<image class="icon" src="/static/right.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="item-input" v-else>
|
||||
<textarea class="textarea" type="text" maxlength="-1" v-model="item.value" :placeholder="item.option" placeholder-class="placeholder" />
|
||||
</view>
|
||||
</block>
|
||||
<!-- 证书上传 -->
|
||||
<block v-else-if="item.type == 'cert'">
|
||||
<view class="item-input">
|
||||
<input class="input" type="text" v-model="item.value.name" placeholder="请输入姓名" placeholder-class="placeholder" />
|
||||
</view>
|
||||
<view class="item-input">
|
||||
<input class="input" type="text" v-model="item.value.number" placeholder="请输入证书编号" placeholder-class="placeholder" />
|
||||
</view>
|
||||
<view class="item-upload">
|
||||
<view class="upload-image" v-if="item.value.image" @click="previewImage(index)">
|
||||
<image class="image-select" :src="item.value.image" mode="aspectFill"></image>
|
||||
<image class="image-delete" src="/static/delete.png" mode="aspectFit" @click.stop="deleteImage(index)"></image>
|
||||
</view>
|
||||
<view class="upload-image" v-else @click="chooseImage(index, 1)">
|
||||
<view class="image-background"></view>
|
||||
<view class="image-choose">
|
||||
<view class="icon">
|
||||
<image src="/static/camera.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="text">上传证书</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 图片上传 -->
|
||||
<block v-else-if="item.type == 'image'">
|
||||
<!-- 单图上传 -->
|
||||
<view class="item-upload" v-if="(showType == 1 && item.field == 'avatar') || (showType == 2 && item.field == 'company_logo') || (showType == 3 && item.field == 'organize_logo')">
|
||||
<view class="upload-image" v-if="item.value" @click="previewImage(index)">
|
||||
<image class="image-select" :src="item.value" mode="aspectFill"></image>
|
||||
<image class="image-delete" src="/static/delete.png" mode="aspectFit" @click.stop="deleteImage(index)"></image>
|
||||
</view>
|
||||
<view class="upload-image" v-else @click="chooseImage(index, 1)">
|
||||
<view class="image-background"></view>
|
||||
<view class="image-choose">
|
||||
<view class="icon">
|
||||
<image src="/static/camera.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="text">点击上传</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 多图上传 -->
|
||||
<view class="item-upload" v-else>
|
||||
<view class="upload-image" v-if="item.value && item.value.length > 0" v-for="(img, num) in item.value" :key="num" @click="previewImage(index, num)">
|
||||
<image class="image-select" :src="img" mode="aspectFill"></image>
|
||||
<image class="image-delete" src="/static/delete.png" mode="aspectFit" @click.stop="deleteImage(index, num)"></image>
|
||||
</view>
|
||||
<view class="upload-image" v-if="!item.value || item.value.length < 9" @click="chooseImage(index, 9)">
|
||||
<view class="image-background"></view>
|
||||
<view class="image-choose">
|
||||
<view class="icon">
|
||||
<image src="/static/camera.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="text">上传图片</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 视频上传 -->
|
||||
<block v-else-if="item.type == 'video'">
|
||||
<view class="item-upload">
|
||||
<view class="upload-image" v-if="item.value">
|
||||
<view class="image-video">
|
||||
<image class="video" src="/static/video.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
<image class="image-delete" src="/static/delete.png" mode="aspectFit" @click="deleteVideo(index)"></image>
|
||||
</view>
|
||||
<view class="upload-image" v-else @click="chooseVideo(index)">
|
||||
<view class="image-background"></view>
|
||||
<view class="image-choose">
|
||||
<view class="icon">
|
||||
<image src="/static/camera.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="text">上传视频</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 文件上传 -->
|
||||
<block v-else-if="item.type == 'file'">
|
||||
<view class="item-files">
|
||||
<view class="files-upload flex align-items-center" v-if="!item.value || item.value.length < 9" @click="chooseFiles(index)">
|
||||
<view class="upload-icon" :style="{'background-image': 'url('+ iconUpload +')'}" v-if="iconUpload"></view>
|
||||
<view class="upload-info flex-item">
|
||||
<view class="info-title">点击上传</view>
|
||||
<view class="info-tips" v-if="item.value.length">已上传{{item.value.length}}/9，每个附件大小不能超过10M</view>
|
||||
<view class="info-tips" v-else>可上传9个，每个附件大小不能超过10M</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="files-list" v-if="item.value && item.value.length > 0">
|
||||
<view class="list-item flex align-items-center" v-for="(file, num) in item.value" :key="num">
|
||||
<view class="item-name flex-item">{{file.name}}</view>
|
||||
<image class="item-delete" src="/static/delete.png" mode="aspectFit" @click="deleteFiles(index, num)"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</form>
|
||||
<!-- 单项选择框 -->
|
||||
<select-picker ref="selectPicker" :title="selectTitle" @onChange="pageChange" @confirm="changeSelectPicker"></select-picker>
|
||||
<!-- 省市区选择框 -->
|
||||
<address-picker ref="addressPicker" @onChange="pageChange" @confirm="changeSelectPicker"></address-picker>
|
||||
<!-- 日期选择框 -->
|
||||
<date-picker ref="datePicker" @onChange="pageChange" @confirm="changeDatePicker"></date-picker>
|
||||
<!-- 时间选择框 -->
|
||||
<time-picker ref="timePicker" @onChange="pageChange" @confirm="changeTimePicker"></time-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
import selectPicker from "@/pages/component/picker/select.vue"
|
||||
import addressPicker from "@/pages/component/picker/address.vue"
|
||||
import datePicker from "@/pages/component/picker/date.vue"
|
||||
import timePicker from "@/pages/component/picker/time.vue"
|
||||
import svgData from "@/common/svg.js"
|
||||
export default {
|
||||
name: "memberApply",
|
||||
props: ["isApply", "showData", "showType", "mobileAuth"],
|
||||
components: {
|
||||
selectPicker,
|
||||
addressPicker,
|
||||
datePicker,
|
||||
timePicker,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 入会字段
|
||||
applyField: [],
|
||||
// 会员级别
|
||||
levelList: [],
|
||||
// 行业分类
|
||||
industryList: [],
|
||||
// 单选标题
|
||||
selectTitle: "",
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
showData: {
|
||||
handler(value) {
|
||||
this.applyField = value || [];
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
iconUpload: state => {
|
||||
return svgData.svgToUrl("upload", state.app.themeColor)
|
||||
}
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
if (this.showType == 1) {
|
||||
this.getIndustry()
|
||||
this.getMemberLevel()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 改变页面滚动状态
|
||||
pageChange(state) {
|
||||
this.$emit("onChange", state)
|
||||
},
|
||||
// 获取选项数据
|
||||
getOption(option) {
|
||||
return option.split(",")
|
||||
},
|
||||
// 获取会员级别
|
||||
getMemberLevel(fn) {
|
||||
this.$util.request("member.level").then(res => {
|
||||
if (res.code == 1) {
|
||||
this.levelList = res.data
|
||||
if (fn) fn()
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取会员级别 ', error)
|
||||
})
|
||||
},
|
||||
// 获取行业分类
|
||||
getIndustry(fn) {
|
||||
this.$util.request("member.industry").then(res => {
|
||||
if (res.code == 1) {
|
||||
this.industryList = res.data
|
||||
if (fn) fn()
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取行业分类 ', error)
|
||||
})
|
||||
},
|
||||
// 获取会员级别名称
|
||||
getMemberLevelName(id) {
|
||||
for (let i in this.levelList) {
|
||||
if (this.levelList[i].id == id) return this.levelList[i].name
|
||||
}
|
||||
},
|
||||
// 获取行业分类
|
||||
getIndustryName(id) {
|
||||
for (let i in this.industryList) {
|
||||
if (this.industryList[i].id == id) return this.industryList[i].name
|
||||
}
|
||||
},
|
||||
// 选择单选
|
||||
selectRadio(index, option) {
|
||||
if (this.applyField[index].value == option) {
|
||||
this.applyField[index].value = ""
|
||||
} else {
|
||||
this.applyField[index].value = option
|
||||
}
|
||||
},
|
||||
// 选择复选
|
||||
selectCheckbox(index, option) {
|
||||
if (this.applyField[index].value.includes(option)) {
|
||||
this.$delete(this.applyField[index].value, this.applyField[index].value.indexOf(option))
|
||||
} else {
|
||||
this.applyField[index].value.push(option)
|
||||
}
|
||||
},
|
||||
// 选择图片
|
||||
chooseImage(index, limit = 9) {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.chooseMedia({
|
||||
count: Number(limit) > 1 ? (limit - this.applyField[index].value.length) : 1,
|
||||
mediaType: ['image'],
|
||||
sourceType: ['album', 'camera'],
|
||||
sizeType: ['compressed'],
|
||||
success: (res) => {
|
||||
let list = res.tempFiles.map(item => item.tempFilePath)
|
||||
if ((this.showType == 1 && this.applyField[index].field == "avatar") || (this.showType == 2 && this.applyField[index].field == 'company_logo') || (this.showType == 3 && this.applyField[index].field == 'organize_logo')) {
|
||||
this.applyField[index].value = list[0]
|
||||
} else if (this.applyField[index].type == "cert") {
|
||||
this.applyField[index].value.image = list[0]
|
||||
} else {
|
||||
this.applyField[index].value = [...this.applyField[index].value, ...list]
|
||||
}
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
uni.chooseImage({
|
||||
count: Number(limit) > 1 ? (limit - this.applyField[index].value.length) : 1,
|
||||
mediaType: ['image'],
|
||||
sourceType: ['album', 'camera'],
|
||||
sizeType: ['compressed'],
|
||||
success: (res) => {
|
||||
let list = res.tempFilePaths
|
||||
if ((this.showType == 1 && this.applyField[index].field == "avatar") || (this.showType == 2 && this.applyField[index].field == 'company_logo') || (this.showType == 3 && this.applyField[index].field == 'organize_logo')) {
|
||||
this.applyField[index].value = list[0]
|
||||
} else if (this.applyField[index].type == "cert") {
|
||||
this.applyField[index].value.image = list[0]
|
||||
} else {
|
||||
this.applyField[index].value = [...this.applyField[index].value, ...list]
|
||||
}
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
// 删除图片
|
||||
deleteImage(i, j) {
|
||||
if ((this.showType == 1 && this.applyField[i].field == "avatar") || (this.showType == 2 && this.applyField[i].field == 'company_logo') || (this.showType == 3 && this.applyField[i].field == 'organize_logo')) {
|
||||
this.applyField[i].value = ""
|
||||
} else if (this.applyField[i].type == "cert") {
|
||||
this.applyField[i].value.image = ""
|
||||
} else {
|
||||
this.$delete(this.applyField[i].value, j)
|
||||
}
|
||||
},
|
||||
// 预览图片
|
||||
previewImage(i, j = 0) {
|
||||
let list = []
|
||||
if ((this.showType == 1 && this.applyField[i].field == "avatar") || (this.showType == 2 && this.applyField[i].field == 'company_logo') || (this.showType == 3 && this.applyField[i].field == 'organize_logo')) {
|
||||
list = [this.applyField[i].value]
|
||||
} else if (this.applyField[i].type == "cert") {
|
||||
list = [this.applyField[i].value.image]
|
||||
} else {
|
||||
list = this.applyField[i].value
|
||||
}
|
||||
uni.previewImage({
|
||||
urls: list,
|
||||
current: j
|
||||
});
|
||||
},
|
||||
// 选择视频
|
||||
chooseVideo(index) {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.chooseMedia({
|
||||
count: 1,
|
||||
mediaType: ['video'],
|
||||
sourceType: ['album', 'camera'],
|
||||
camera: 'back',
|
||||
success: (res) => {
|
||||
this.applyField[index].value = res.tempFiles[0].tempFilePath
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
uni.chooseVideo({
|
||||
sourceType: ['camera', 'album'],
|
||||
success: (res) => {
|
||||
this.applyField[index].value = res.tempFilePath;
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
// 删除视频
|
||||
deleteVideo(index) {
|
||||
this.applyField[index].value = ""
|
||||
},
|
||||
// 选择文件
|
||||
chooseFiles(index) {
|
||||
// #ifdef MP-WEIXIN
|
||||
wx.chooseMessageFile({
|
||||
count: 9 - this.applyField[index].value.length,
|
||||
type: 'file',
|
||||
extension: ['.pdf', '.doc', '.docx', '.xls', '.xlsx'],
|
||||
success: (res) => {
|
||||
let list = []
|
||||
let exceed = []
|
||||
res.tempFiles.forEach(item => {
|
||||
if (parseFloat(item.size / 1024) <= 10240) {
|
||||
list.push({
|
||||
name: item.name,
|
||||
path: item.path,
|
||||
})
|
||||
} else {
|
||||
exceed.push(item.name)
|
||||
}
|
||||
})
|
||||
if (exceed.length) {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: exceed.join("、") + "超过10M",
|
||||
duration: 1500
|
||||
})
|
||||
}
|
||||
this.applyField[index].value = [...this.applyField[index].value, ...list]
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
let extensionLimit = ['.pdf', '.doc', '.docx', '.xls', '.xlsx']
|
||||
uni.chooseFile({
|
||||
count: 9 - this.applyField[index].value.length,
|
||||
type: "all",
|
||||
extension: extensionLimit,
|
||||
success: (res) => {
|
||||
let list = []
|
||||
let typeError = []
|
||||
let exceed = []
|
||||
res.tempFiles.forEach(item => {
|
||||
let extension = item.name.split('.')
|
||||
extension = extension[extension.length - 1]
|
||||
if (!extensionLimit.includes('.' + extension)) {
|
||||
typeError.push(item.name)
|
||||
} else if (parseFloat(item.size / 1024) <= 10240) {
|
||||
list.push({
|
||||
name: item.name,
|
||||
path: item.path,
|
||||
})
|
||||
} else {
|
||||
exceed.push(item.name)
|
||||
}
|
||||
})
|
||||
if (typeError.length) {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: typeError.join("、") + "文件类型错误，请选择pdf、doc、docx、xls、xlsx格式文件",
|
||||
showCancel: false,
|
||||
confirmColor: this.themeColor,
|
||||
confirmText: "我知道了"
|
||||
})
|
||||
} else if (exceed.length) {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: exceed.join("、") + "超过10M",
|
||||
showCancel: false,
|
||||
confirmColor: this.themeColor,
|
||||
confirmText: "我知道了"
|
||||
})
|
||||
} else this.applyField[index].value = [...this.applyField[index].value, ...list]
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
// 删除文件
|
||||
deleteFiles(i, j) {
|
||||
this.$delete(this.applyField[i].value, j)
|
||||
},
|
||||
// 选择下拉选项
|
||||
openSelectPicker(index) {
|
||||
if (this.applyField[index].disabled) return
|
||||
this.selectTitle = this.applyField[index].label
|
||||
if (this.showType == 1 && this.applyField[index].field == "member_level_id") {
|
||||
if (this.levelList.length) this.$refs.selectPicker.open(this.levelList, this.applyField[index].value, index)
|
||||
else {
|
||||
this.getMemberLevel(() => {
|
||||
this.$refs.selectPicker.open(this.levelList, this.applyField[index].value, index)
|
||||
})
|
||||
}
|
||||
} else if (this.showType == 1 && this.applyField[index].field == "industry_category_id") {
|
||||
if (this.industryList.length) this.$refs.selectPicker.open(this.industryList, this.applyField[index].value, index)
|
||||
else {
|
||||
this.getIndustry(() => {
|
||||
this.$refs.selectPicker.open(this.industryList, this.applyField[index].value, index)
|
||||
})
|
||||
}
|
||||
} else if (this.showType == 1 && this.applyField[index].field == "native_place") {
|
||||
this.$refs.addressPicker.open(this.applyField[index].value, index)
|
||||
} else {
|
||||
let list = this.applyField[index].option.split(",")
|
||||
this.$refs.selectPicker.open(list, this.applyField[index].value, index)
|
||||
}
|
||||
},
|
||||
// 改变下拉选项
|
||||
changeSelectPicker(value, index) {
|
||||
if (this.showType == 1 && this.applyField[index].field == "native_place") {
|
||||
this.applyField[index].value = value.province + "/" + value.city + "/" + value.area
|
||||
} else if (this.showType == 1 && (this.applyField[index].field == "member_level_id" || this.applyField[index].field == "industry_category_id")) {
|
||||
this.applyField[index].value = value.id
|
||||
} else {
|
||||
this.applyField[index].value = value
|
||||
}
|
||||
},
|
||||
// 打开地图选择位置
|
||||
chooseLocation(index) {
|
||||
uni.chooseLocation({
|
||||
success: (res) => {
|
||||
this.applyField[index].value = {
|
||||
latitude: res.latitude,
|
||||
longitude: res.longitude,
|
||||
name: res.name,
|
||||
address: res.address
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 清空地址
|
||||
clearLocation(index) {
|
||||
this.applyField[index].value = {
|
||||
latitude: "",
|
||||
longitude: "",
|
||||
name: "",
|
||||
address: "",
|
||||
}
|
||||
},
|
||||
// 改变手机号对外状态
|
||||
changeMobileAuth() {
|
||||
const result = this.mobileAuth == 1 ? 2 : 1
|
||||
this.$emit("changeMobileAuth", result)
|
||||
},
|
||||
// 选择日期
|
||||
openDatePicker(index) {
|
||||
this.$refs.datePicker.open(this.applyField[index].value, index)
|
||||
},
|
||||
// 改变日期
|
||||
changeDatePicker(value, index) {
|
||||
this.applyField[index].value = value
|
||||
},
|
||||
// 选择时间
|
||||
openTimePicker(index) {
|
||||
this.$refs.timePicker.open(this.applyField[index].value, index)
|
||||
},
|
||||
// 改变时间
|
||||
changeTimePicker(value, index) {
|
||||
this.applyField[index].value = value
|
||||
},
|
||||
// 清空已选数据
|
||||
clearValue(index) {
|
||||
this.applyField[index].value = ""
|
||||
},
|
||||
// 跳转编辑器页面
|
||||
toEditor(index) {
|
||||
this.$store.commit('app/setEditorContent', this.applyField[index].value)
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: `/pages/member/apply/editor?params=${index}`
|
||||
})
|
||||
},
|
||||
// 设置编辑器内容
|
||||
setEditorData(e) {
|
||||
this.applyField[e.params].value = e.content
|
||||
},
|
||||
// 提取富文本文字
|
||||
getEditorText(e) {
|
||||
if (e) return e.replace(/<[^>]+>/g, '')
|
||||
else return ""
|
||||
},
|
||||
// 获取表单数据
|
||||
getApplyField(fn) {
|
||||
fn(JSON.parse(JSON.stringify(this.applyField)))
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.component-member-apply {
|
||||
.component-member-apply-form {
|
||||
.component-member-apply-form-item {
|
||||
margin-top: 32rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
|
||||
.required {
|
||||
color: #E60012;
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.item-input {
|
||||
margin-top: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 16rpx;
|
||||
background: #ffffff;
|
||||
|
||||
&.disabled {
|
||||
.input {
|
||||
color: #ACADB7
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
height: 104rpx;
|
||||
line-height: 104rpx;
|
||||
flex: 1;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
flex: 1;
|
||||
padding: 32rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: #ACADB7;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
padding-right: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-radio {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -26rpx;
|
||||
padding-top: 8rpx;
|
||||
|
||||
.radio {
|
||||
border-radius: 8rpx;
|
||||
background: #ffffff;
|
||||
padding: 16rpx;
|
||||
margin-left: 26rpx;
|
||||
margin-top: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
margin-right: 8rpx;
|
||||
display: none;
|
||||
}
|
||||
|
||||
text {
|
||||
color: #ACADB7;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--theme-color);
|
||||
|
||||
image {
|
||||
display: block;
|
||||
}
|
||||
|
||||
text {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-upload {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 32rpx;
|
||||
column-gap: 3.5%;
|
||||
row-gap: 24rpx;
|
||||
|
||||
.upload-image {
|
||||
position: relative;
|
||||
width: 31%;
|
||||
height: 0;
|
||||
padding-top: 31%;
|
||||
|
||||
.image-select {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.image-video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 10rpx;
|
||||
background: var(--theme-color);
|
||||
padding: 56rpx;
|
||||
}
|
||||
|
||||
.image-delete {
|
||||
position: absolute;
|
||||
top: -16rpx;
|
||||
right: -16rpx;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
.image-choose {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
left: 20rpx;
|
||||
right: 20rpx;
|
||||
bottom: 20rpx;
|
||||
z-index: 6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
|
||||
.icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
padding: 18rpx;
|
||||
background: var(--theme-color);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-top: 16rpx;
|
||||
color: var(--theme-color);
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.image-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
background: var(--theme-color);
|
||||
opacity: 0.08;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-files {
|
||||
.files-upload {
|
||||
position: relative;
|
||||
margin-top: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #FFF;
|
||||
padding: 52rpx;
|
||||
|
||||
.upload-icon {
|
||||
width: 72rpx;
|
||||
height: 64rpx;
|
||||
background-size: 72rpx 64rpx;
|
||||
}
|
||||
|
||||
.upload-info {
|
||||
margin-left: 32rpx;
|
||||
|
||||
.info-title {
|
||||
color: var(--theme-color);
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.info-tips {
|
||||
margin-top: 8rpx;
|
||||
color: #BBBDBF;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
left: 20rpx;
|
||||
right: 20rpx;
|
||||
bottom: 20rpx;
|
||||
border-radius: 16rpx;
|
||||
border: 1px dashed #D4D6D9;
|
||||
}
|
||||
}
|
||||
|
||||
.files-list {
|
||||
margin-top: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #FFF;
|
||||
padding: 36rpx 32rpx;
|
||||
|
||||
.list-item {
|
||||
margin-top: 32rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
color: #ACADB7;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.item-delete {
|
||||
margin-left: 20rpx;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-switch {
|
||||
margin-top: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 16rpx;
|
||||
background: #ffffff;
|
||||
padding: 32rpx;
|
||||
|
||||
.switch-label {
|
||||
flex: 1;
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.switch-box {
|
||||
margin-left: 20rpx;
|
||||
width: 72rpx;
|
||||
height: 36rpx;
|
||||
padding: 2rpx;
|
||||
background: #D9D9D9;
|
||||
border-radius: 18rpx;
|
||||
transition: all .3s;
|
||||
|
||||
.round {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border-radius: 50%;
|
||||
background: #FFFFFF;
|
||||
margin-left: 0;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
&.select {
|
||||
background: var(--theme-color);
|
||||
|
||||
.round {
|
||||
margin-left: calc(100% - 32rpx);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
139
uniapp/小程序代码/pages/component/member/custom.vue
Normal file
139
uniapp/小程序代码/pages/component/member/custom.vue
Normal file
@@ -0,0 +1,139 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-会员自定义字段 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="component-member-custom">
|
||||
<block v-for="(item, index) in showData" :key="index" v-if="item.show == 1">
|
||||
<!-- 图片 -->
|
||||
<view class="custom-item" v-if="item.type == 'image'">
|
||||
<view class="item-title">{{item.label}}</view>
|
||||
<view class="item-list" v-if="item.value">
|
||||
<view class="list-image" v-for="(img, num) in item.value.split(',')" :key="num">
|
||||
<image class="image" :src="img" mode="aspectFill" @click="previewImage(index, num)"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-value" v-else>暂未完善</view>
|
||||
</view>
|
||||
<!-- 视频 -->
|
||||
<view class="custom-item" v-else-if="item.type == 'video'">
|
||||
<view class="item-title">{{item.label}}</view>
|
||||
<view class="item-video" v-if="item.value">
|
||||
<video class="video" :src="item.value" controls></video>
|
||||
</view>
|
||||
<view class="item-value" v-else>暂未完善</view>
|
||||
</view>
|
||||
<!-- 证书 -->
|
||||
<view class="custom-item" v-else-if="item.type == 'cert'">
|
||||
<view class="item-title">{{item.label}}</view>
|
||||
<view class="item-image" v-if="item.value">
|
||||
<image class="image" :src="item.value" mode="widthFix" @click="previewImage(index)"></image>
|
||||
</view>
|
||||
<view class="item-value" v-else>暂未完善</view>
|
||||
</view>
|
||||
<!-- 其他 -->
|
||||
<view class="custom-item flex flex-wrap justify-content-between" v-else>
|
||||
<view class="item-title">{{item.label}}</view>
|
||||
<view class="item-value">{{item.value || "暂未完善"}}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "memberCustom",
|
||||
props: ["showData"],
|
||||
methods: {
|
||||
// 预览图片
|
||||
previewImage(i, j = 0) {
|
||||
let list = []
|
||||
if (this.showData[i].type == "cert") {
|
||||
list = [this.showData[i].value]
|
||||
} else {
|
||||
list = this.showData[i].value.split(",")
|
||||
}
|
||||
uni.previewImage({
|
||||
urls: list,
|
||||
current: j
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.component-member-custom {
|
||||
.custom-item {
|
||||
margin-top: 32rpx;
|
||||
padding: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #ffffff;
|
||||
row-gap: 24rpx;
|
||||
column-gap: 48rpx;
|
||||
|
||||
.item-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.item-value {
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.item-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 32rpx;
|
||||
column-gap: 3.5%;
|
||||
row-gap: 24rpx;
|
||||
|
||||
.list-image {
|
||||
position: relative;
|
||||
width: 31%;
|
||||
height: 0;
|
||||
padding-top: 31%;
|
||||
|
||||
.image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-video {
|
||||
margin-top: 24rpx;
|
||||
|
||||
.video {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.item-image {
|
||||
margin-top: 24rpx;
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
105
uniapp/小程序代码/pages/component/member/index.vue
Normal file
105
uniapp/小程序代码/pages/component/member/index.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-会员列表 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="component-member" :style="{'--theme-color': themeColor}">
|
||||
<view class="member-item flex" v-for="item in showData" :key="item.id" @click="toDetails(item.id)">
|
||||
<image class="item-avatar" :src="item.avatar" mode="aspectFill"></image>
|
||||
<view class="item-info flex-item flex-direction-column justify-content-between">
|
||||
<view class="info-head flex">
|
||||
<view class="head-name flex-item text-ellipsis">{{item.name}}</view>
|
||||
<view class="head-tag" v-if="item.distance">{{item.distance}}</view>
|
||||
</view>
|
||||
<view class="info-tag text-ellipsis" v-if="item.native_place">{{item.native_place}}</view>
|
||||
<view class="info-label flex justify-content-between">
|
||||
<text class="text-ellipsis">{{item.level_name}}</text>
|
||||
<text class="text-ellipsis" style="margin-left: 16rpx;" v-if="item.industry_category_name">{{item.industry_category_name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
name: "memberIndex",
|
||||
props: ["showData"],
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 跳转会员详情
|
||||
toDetails(id) {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pages/member/details?id=" + id
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.component-member {
|
||||
white-space: nowrap;
|
||||
|
||||
.member-item {
|
||||
margin-top: 32rpx;
|
||||
padding: 32rpx;
|
||||
border-radius: 10rpx;
|
||||
background: #ffffff;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.item-avatar {
|
||||
width: 144rpx;
|
||||
height: 144rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
margin-left: 32rpx;
|
||||
|
||||
.info-head {
|
||||
.head-name {
|
||||
color: #5A5B6E;
|
||||
font-size: 32rpx;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.head-tag {
|
||||
color: var(--theme-color);
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.info-tag {
|
||||
color: #C4C4C4;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
color: var(--theme-color);
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
322
uniapp/小程序代码/pages/component/member/poster.vue
Normal file
322
uniapp/小程序代码/pages/component/member/poster.vue
Normal file
@@ -0,0 +1,322 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.maiwd.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-电子会牌 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="component-member-poster">
|
||||
<!-- 电子会牌 -->
|
||||
<canvas class="poster-canvas" :style="{width: posterWidth + 'px', height: posterHeight + 'px'}" canvas-id="myCanvas" id="myCanvas"></canvas>
|
||||
<!-- 电子会牌模态框 -->
|
||||
<uni-popup ref="popupModal" type="center" @change="onChange">
|
||||
<view class="poster-popup flex-direction-column align-items-center" :style="{'--theme-color': themeColor, paddingTop: titleBarHeight + 'px'}">
|
||||
<view class="popup-close" @click="onClose()">
|
||||
<image class="icon" src="/static/closePopup.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="popup-content flex justify-content-center">
|
||||
<image class="image" :src="posterPath" mode="aspectFit"></image>
|
||||
</view>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="popup-btn" @click="saveImage">保存相册</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<view class="popup-btn">长按图片保存相册</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
import { loadImage, createPoster, canvasToTempFilePath } from "@/common/poster.js";
|
||||
export default {
|
||||
name: "memberPoster",
|
||||
data() {
|
||||
return {
|
||||
// 标题栏高度
|
||||
titleBarHeight: 0,
|
||||
// 电子会牌数据
|
||||
posterInfo: {},
|
||||
// 电子会牌宽度
|
||||
posterWidth: 0,
|
||||
// 电子会牌高度
|
||||
posterHeight: 0,
|
||||
// 图片资源是否准备完成
|
||||
posterReady: false,
|
||||
// 电子会牌背景图片
|
||||
posterBackground: "",
|
||||
// 电子会牌用户头像图片
|
||||
posterAvatar: "",
|
||||
// 电子会牌二维码图片
|
||||
posterCode: "",
|
||||
// 电子会牌图片路径
|
||||
posterPath: "",
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
// #ifdef MP-WEIXIN
|
||||
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight
|
||||
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||||
this.titleBarHeight = statusBarHeight + (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
// 获取电子会牌
|
||||
getPoster() {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true
|
||||
})
|
||||
this.$util.request("mine.poster").then(res => {
|
||||
if (res.code == 1) {
|
||||
this.posterInfo = res.data
|
||||
this.posterWidth = res.data.willbrand.bg.width
|
||||
this.posterHeight = res.data.willbrand.bg.height
|
||||
this.$nextTick(() => {
|
||||
this.showNucleus()
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取电子会牌 ', error)
|
||||
})
|
||||
},
|
||||
// 获取图片资源
|
||||
async showNucleus() {
|
||||
this.loadingResources().then((state) => {
|
||||
// 状态为 true 表示加载完成
|
||||
if (state) {
|
||||
this.posterReady = true
|
||||
this.createImage()
|
||||
}
|
||||
});
|
||||
},
|
||||
// 加载图片资源
|
||||
async loadingResources() {
|
||||
this.posterBackground = await loadImage(this.posterInfo.willbrand.bg.img);
|
||||
this.posterCode = await loadImage(this.posterInfo.applet_qrcode_path);
|
||||
if (this.posterInfo.avatar) this.posterAvatar = await loadImage(this.posterInfo.avatar);
|
||||
return true;
|
||||
},
|
||||
// 生成电子会牌
|
||||
async createImage() {
|
||||
if (!this.posterReady) {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '电子会牌图片资源加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
};
|
||||
// 获取上下文对象
|
||||
const ctx = uni.createCanvasContext("myCanvas", this);
|
||||
// 创建电子会牌
|
||||
let posterData = [{
|
||||
type: "image",
|
||||
url: this.posterBackground,
|
||||
config: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
w: parseFloat(this.posterWidth),
|
||||
h: parseFloat(this.posterHeight),
|
||||
},
|
||||
}]
|
||||
this.posterInfo.willbrand.data.forEach((item) => {
|
||||
if (item.type == "text") {
|
||||
let content = ""
|
||||
if (item.item == "name") content = this.posterInfo.member_name || ""
|
||||
else if (item.item == "post") content = this.posterInfo.member_level_name || ""
|
||||
else if (item.item == "cardid") content = this.posterInfo.number || ""
|
||||
else if (item.item == "period") content = this.posterInfo.join_time || ""
|
||||
else if (item.item == "expire") content = this.posterInfo.expire_time || ""
|
||||
else if (item.item == "company_organize") content = this.posterInfo.company_name || this.posterInfo.organize_name || ""
|
||||
let itemX = 0
|
||||
if (item.textAlign == "center") itemX = parseFloat(item.left) + parseFloat(item.width) / 2
|
||||
else if (item.textAlign == "right") itemX = parseFloat(item.left) + parseFloat(item.width)
|
||||
else itemX = parseFloat(item.left)
|
||||
let itemFont = "10px sans-serif"
|
||||
if (item.fontStyle == 2) {
|
||||
itemFont = `italic ${item.size} sans-serif`
|
||||
} else if (item.fontStyle == 3) {
|
||||
itemFont = `bold ${item.size} sans-serif`
|
||||
} else if (item.fontStyle == 4) {
|
||||
itemFont = `italic bold ${item.size} sans-serif`
|
||||
} else {
|
||||
itemFont = `${item.size} sans-serif`
|
||||
}
|
||||
posterData.push({
|
||||
type: "text",
|
||||
text: content || "",
|
||||
config: {
|
||||
x: itemX,
|
||||
y: parseFloat(item.top),
|
||||
color: item.color,
|
||||
font: itemFont,
|
||||
textAlign: item.textAlign,
|
||||
maxWidth: parseFloat(item.width),
|
||||
lineHeight: parseInt(item.height),
|
||||
isVerticalCenter: true
|
||||
},
|
||||
})
|
||||
} else if (item.type == "img") {
|
||||
let imgUrl = ""
|
||||
let radius = 0
|
||||
if (item.item == "qr") {
|
||||
imgUrl = this.posterCode
|
||||
radius = 0
|
||||
} else if (item.item == "avatar") {
|
||||
imgUrl = this.posterAvatar
|
||||
radius = parseFloat(item.width) / 2
|
||||
}
|
||||
if (imgUrl) {
|
||||
posterData.push({
|
||||
type: "image",
|
||||
url: imgUrl,
|
||||
config: {
|
||||
x: parseFloat(item.left),
|
||||
y: parseFloat(item.top),
|
||||
w: parseFloat(item.width),
|
||||
h: parseFloat(item.height),
|
||||
r: parseInt(radius),
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
await createPoster(ctx, posterData)
|
||||
const imagePath = await canvasToTempFilePath("myCanvas", this);
|
||||
this.posterPath = imagePath;
|
||||
this.$refs.popupModal.open()
|
||||
uni.hideLoading()
|
||||
},
|
||||
// 保存电子会牌
|
||||
saveImage() {
|
||||
uni.authorize({
|
||||
scope: 'scope.writePhotosAlbum',
|
||||
success: () => {
|
||||
uni.getImageInfo({
|
||||
src: this.posterPath,
|
||||
success: (img) => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: img.path,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: "保存成功",
|
||||
icon: "success",
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error(err);
|
||||
},
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error(err)
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: () => {
|
||||
uni.showModal({
|
||||
title: '图片保存失败',
|
||||
content: '请确认是否已开启授权',
|
||||
confirmText: '开启授权',
|
||||
confirmColor: this.themeColor,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.openSetting({
|
||||
success: (setting) => {
|
||||
if (setting.authSetting["scope.writePhotosAlbum"]) {
|
||||
uni.showToast({
|
||||
title: '授权成功，请重新保存',
|
||||
icon: "none"
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '请确定已打开保存权限',
|
||||
icon: "none"
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 关闭弹窗
|
||||
onClose() {
|
||||
this.$refs.popupModal.close()
|
||||
},
|
||||
// 改变页面滚动状态
|
||||
onChange(e) {
|
||||
this.$emit("onChange", e.show)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.component-member-poster {
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
|
||||
.poster-canvas {
|
||||
position: fixed;
|
||||
top: 100vw;
|
||||
left: 100vh;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.poster-popup {
|
||||
.popup-close {
|
||||
width: 100%;
|
||||
margin-top: -112rpx;
|
||||
margin-bottom: 32rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
.image {
|
||||
width: 80vw;
|
||||
height: 65vh;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-btn {
|
||||
margin-top: 32rpx;
|
||||
width: 336rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
padding: 26rpx 32rpx;
|
||||
border-radius: 16rpx;
|
||||
color: #FFFFFF;
|
||||
background: var(--theme-color);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
167
uniapp/小程序代码/pages/component/member/product.vue
Normal file
167
uniapp/小程序代码/pages/component/member/product.vue
Normal file
@@ -0,0 +1,167 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-产品维护 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="component-member-product" v-if="loadEnd">
|
||||
<view class="product-list" v-if="productList.length">
|
||||
<view class="list-item" v-for="item in productList" :key="item.id">
|
||||
<image class="item-image" :src="item.image" mode="aspectFill"></image>
|
||||
<view class="item-name text-ellipsis-more">{{item.name}}</view>
|
||||
<view class="item-group flex flex-center">
|
||||
<view class="group-btn" style="background: #FFB656;" @click="handleEdit(item.id)">修改</view>
|
||||
<view class="group-btn" style="background: #FF626E;" @click="handleDelete(item.id)">删除</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<empty top="30%" title="暂无相关内容~" v-else></empty>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
name: "componentMemberProduct",
|
||||
data() {
|
||||
return {
|
||||
// 加载完成
|
||||
loadEnd: false,
|
||||
// 产品列表
|
||||
productList: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
uni.showLoading({
|
||||
title: "加载中"
|
||||
})
|
||||
this.getProductList(() => {
|
||||
this.loadEnd = true
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 获取产品列表
|
||||
getProductList(fn) {
|
||||
this.$util.request("member.product.list").then(res => {
|
||||
if (fn) fn()
|
||||
if (res.code == 1) {
|
||||
this.productList = res.data
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
if (fn) fn()
|
||||
console.error('获取产品列表 ', error)
|
||||
})
|
||||
},
|
||||
// 修改产品
|
||||
handleEdit(id) {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pages/member/product/edit?id=" + id
|
||||
})
|
||||
},
|
||||
// 删除产品
|
||||
handleDelete(id) {
|
||||
uni.showModal({
|
||||
title: "系统提示",
|
||||
content: "是否删除该产品？",
|
||||
confirmColor: "#E50002",
|
||||
confirmText: "删除",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({
|
||||
mask: true,
|
||||
title: "加载中"
|
||||
})
|
||||
this.$util.request("member.product.delete", {
|
||||
id: id
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
this.getProductList(() => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
icon: "success",
|
||||
title: "删除成功"
|
||||
})
|
||||
})
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('删除产品 ', error)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.component-member-product {
|
||||
.product-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 2fr);
|
||||
column-gap: 28rpx;
|
||||
row-gap: 32rpx;
|
||||
|
||||
.list-item {
|
||||
padding: 32rpx;
|
||||
background: #FFF;
|
||||
border-radius: 16rpx;
|
||||
|
||||
.item-image {
|
||||
width: 100%;
|
||||
height: 266rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
margin-top: 24rpx;
|
||||
color: #5A5B6E;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
line-height: 34rpx;
|
||||
height: 68rpx;
|
||||
}
|
||||
|
||||
.item-group {
|
||||
margin-top: 24rpx;
|
||||
column-gap: 16rpx;
|
||||
|
||||
.group-btn {
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
103
uniapp/小程序代码/pages/component/member/scroll.vue
Normal file
103
uniapp/小程序代码/pages/component/member/scroll.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-可滚动会员列表 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<scroll-view scroll-x :scroll-left="scrollLeft" class="component-member-scroll" :style="{'--theme-color': themeColor}" @scrolltolower="scrolltolower">
|
||||
<view class="scroll-item" v-for="item in showData" :key="item.id" @click="toDetails(item.id)">
|
||||
<image class="item-avatar" :src="item.avatar" mode="aspectFill"></image>
|
||||
<view class="item-label text-ellipsis">{{item.level_name}}</view>
|
||||
<view class="item-name text-ellipsis">{{item.name}}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
name: "memberScroll",
|
||||
props: ["showData"],
|
||||
data() {
|
||||
return {
|
||||
// 横向滚动条位置
|
||||
scrollLeft: 0,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 重置横向滚动条位置
|
||||
resetScrollLeft() {
|
||||
this.scrollLeft = 0.1
|
||||
this.$nextTick(() => {
|
||||
this.scrollLeft = 0
|
||||
})
|
||||
},
|
||||
// 滚动到最右侧
|
||||
scrolltolower() {
|
||||
this.$emit("scrolltolower")
|
||||
},
|
||||
// 跳转会员详情
|
||||
toDetails(id) {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pages/member/details?id=" + id
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.component-member-scroll {
|
||||
white-space: nowrap;
|
||||
|
||||
.scroll-item {
|
||||
display: inline-block;
|
||||
width: 128rpx;
|
||||
margin-left: 36rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.item-avatar {
|
||||
width: 128rpx;
|
||||
height: 128rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
color: #ffffff;
|
||||
font-size: 20rpx;
|
||||
line-height: 28rpx;
|
||||
padding: 8rpx;
|
||||
border-radius: 4rpx 20rpx 4rpx 20rpx;
|
||||
background: var(--theme-color);
|
||||
margin-top: -16rpx;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
margin-top: 16rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
124
uniapp/小程序代码/pages/component/member/units.vue
Normal file
124
uniapp/小程序代码/pages/component/member/units.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-会员单位列表 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="component-member-units">
|
||||
<view class="units-item flex" v-for="item in showData" :key="item.id" @click="toDetails(item.id, item.type)">
|
||||
<image class="item-logo" :src="item.logo" mode="aspectFill"></image>
|
||||
<view class="item-info flex-item flex-direction-column justify-content-between">
|
||||
<view class="info-name text-ellipsis">{{item.name}}</view>
|
||||
<view class="info-introduction text-ellipsis-more">{{item.introduction}}</view>
|
||||
</view>
|
||||
<view class="item-level">
|
||||
<view class="bg" :style="{background: themeColor}"></view>
|
||||
<view class="text">{{item.level_name}}单位</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
name: "memberUnits",
|
||||
props: ["showData"],
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 跳转会员详情
|
||||
toDetails(id, type) {
|
||||
if (type == 2) {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pages/member/enterprise?id=" + id
|
||||
})
|
||||
} else {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pages/member/organization?id=" + id
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.component-member-units {
|
||||
.units-item {
|
||||
position: relative;
|
||||
margin-top: 32rpx;
|
||||
padding: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.item-logo {
|
||||
width: 156rpx;
|
||||
height: 156rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
margin-left: 32rpx;
|
||||
|
||||
.info-name {
|
||||
color: #333;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.info-introduction {
|
||||
margin-top: 16rpx;
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-level {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
border-bottom-right-radius: 16rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #FFF;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
181
uniapp/小程序代码/pages/component/menu/carousel.vue
Normal file
181
uniapp/小程序代码/pages/component/menu/carousel.vue
Normal file
@@ -0,0 +1,181 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-轮播菜单 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="component-menu-carousel" v-if="menuList && menuList.length">
|
||||
<block v-if="menuList.length === 1">
|
||||
<menu-nav :show-data="menuList[0]" :row-number="rowNumber" :icon-size="iconSize" :font-size="fontSize" :line-height="lineHeight" :font-color="fontColor" :space="space" :margin-top="marginTop" @toPage="toPage"></menu-nav>
|
||||
</block>
|
||||
<block v-else>
|
||||
<swiper class="carousel-swiper" :style="{height: height}" @change="carouselChange">
|
||||
<swiper-item v-for="(item, index) in menuList" :key="index">
|
||||
<menu-nav :show-data="item" :row-number="rowNumber" :icon-size="iconSize" :font-size="fontSize" :line-height="lineHeight" :font-color="fontColor" :space="space" :margin-top="marginTop" @toPage="toPage"></menu-nav>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="carousel-dots" :style="{'--theme-color': themeColor}">
|
||||
<view class="dots-item" :class="{active: carouseIndex == index}" v-for="(item, index) in menuList" :key="index"></view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
import menuNav from "@/pages/component/menu/menu.vue"
|
||||
export default {
|
||||
name: "menuCarousel",
|
||||
components: {
|
||||
menuNav,
|
||||
},
|
||||
props: {
|
||||
// 组件内容
|
||||
showData: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 组件高度
|
||||
height: {
|
||||
type: String,
|
||||
default: "390rpx",
|
||||
},
|
||||
// 每排数量
|
||||
rowNumber: {
|
||||
type: Number,
|
||||
default: 4,
|
||||
},
|
||||
// 图标尺寸
|
||||
iconSize: {
|
||||
type: String,
|
||||
default: "96rpx",
|
||||
},
|
||||
// 文字尺寸
|
||||
fontSize: {
|
||||
type: String,
|
||||
default: "28rpx",
|
||||
},
|
||||
// 文字行高
|
||||
lineHeight: {
|
||||
type: String,
|
||||
default: "40rpx",
|
||||
},
|
||||
// 文字颜色
|
||||
fontColor: {
|
||||
type: String,
|
||||
default: "#5A5B6E",
|
||||
},
|
||||
// 图文间隔
|
||||
space: {
|
||||
type: String,
|
||||
default: "16rpx",
|
||||
},
|
||||
// 上下间隔
|
||||
marginTop: {
|
||||
type: String,
|
||||
default: "32rpx",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 已选索引
|
||||
carouseIndex: 0,
|
||||
// 菜单列表
|
||||
menuList: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
showData: {
|
||||
handler(value) {
|
||||
if (value && value.length) {
|
||||
this.menuList = this.splitArray(value);
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 轮播图切换
|
||||
carouselChange(e) {
|
||||
this.carouseIndex = e.detail.current
|
||||
},
|
||||
// 切割数组
|
||||
splitArray(arr) {
|
||||
var result = [];
|
||||
for (var i = 0; i < arr.length; i += 8) {
|
||||
var chunk = arr.slice(i, i + 8);
|
||||
result.push(chunk);
|
||||
}
|
||||
return result;
|
||||
},
|
||||
// 跳转详情
|
||||
toPage(item) {
|
||||
this.$emit("toPage", item)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.component-menu-carousel {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.carousel-swiper {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.swiper-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.item-thumb {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-dots {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
|
||||
.dots-item {
|
||||
width: 24rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #F1F1F1;
|
||||
margin-right: 4rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--theme-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
160
uniapp/小程序代码/pages/component/menu/menu.vue
Normal file
160
uniapp/小程序代码/pages/component/menu/menu.vue
Normal file
@@ -0,0 +1,160 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-菜单 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="component-menu flex flex-wrap">
|
||||
<block v-for="(item, index) in showData" :key="index" @click="toPage(index)">
|
||||
<button class="menu-item clear" open-type="contact" :style="{width: (parseFloat(100 / rowNumber).toFixed(2) + '%'), marginTop: (index < rowNumber ? 0 : marginTop)}" v-if="item.info == 'contact'">
|
||||
<image :src="item.icon" :style="{width: iconSize, height: iconSize}" mode="aspectFit"></image>
|
||||
<text class="text-ellipsis" :style="{fontSize: fontSize, color: fontColor, lineHeight: lineHeight, marginTop: space}">{{item.name}}</text>
|
||||
</button>
|
||||
<view class="menu-item" :style="{width: (parseFloat(100 / rowNumber).toFixed(2) + '%'), marginTop: (index < rowNumber ? 0 : marginTop)}" @click="toPage(index)" v-else>
|
||||
<view class="item-icon" :style="{width: iconSize, height: iconSize}">
|
||||
<image :src="item.icon" mode="aspectFit"></image>
|
||||
<view class="count" :style="{background: themeColor}" v-if="item.count && parseInt(countData[item.count]) > 0">{{parseInt(countData[item.count]) > 99 ? '99+' : countData[item.count]}}</view>
|
||||
</view>
|
||||
<text class="text-ellipsis" :style="{fontSize: fontSize, color: fontColor, lineHeight: lineHeight, marginTop: space}">{{item.name}}</text>
|
||||
<!-- #ifdef H5 -->
|
||||
<wx-open-launch-weapp class="item-absolute" :appid="item.content.appid" :path="item.content.path" v-if="item.skip_type == 3">
|
||||
<script type="text/wxtag-template">
|
||||
<style> .btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
|
||||
<view class="btn"></view>
|
||||
</script>
|
||||
</wx-open-launch-weapp>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
name: "menuIndex",
|
||||
props: {
|
||||
// 组件内容
|
||||
showData: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 组件数量
|
||||
countData: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 每排数量
|
||||
rowNumber: {
|
||||
type: Number,
|
||||
default: 4,
|
||||
},
|
||||
// 图标尺寸
|
||||
iconSize: {
|
||||
type: String,
|
||||
default: "96rpx",
|
||||
},
|
||||
// 文字尺寸
|
||||
fontSize: {
|
||||
type: String,
|
||||
default: "28rpx",
|
||||
},
|
||||
// 文字行高
|
||||
lineHeight: {
|
||||
type: String,
|
||||
default: "40rpx",
|
||||
},
|
||||
// 文字颜色
|
||||
fontColor: {
|
||||
type: String,
|
||||
default: "#5A5B6E",
|
||||
},
|
||||
// 图文间隔
|
||||
space: {
|
||||
type: String,
|
||||
default: "16rpx",
|
||||
},
|
||||
// 上下间隔
|
||||
marginTop: {
|
||||
type: String,
|
||||
default: "32rpx",
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
toPage(index) {
|
||||
// #ifdef H5
|
||||
if (this.showData[index].skip_type == 3) return
|
||||
// #endif
|
||||
if (this.showData[index].info) {
|
||||
this.$util.toPage(this.showData[index].info)
|
||||
} else {
|
||||
this.$emit("toPage", this.showData[index])
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.component-menu {
|
||||
.menu-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
|
||||
.item-icon {
|
||||
position: relative;
|
||||
|
||||
.count {
|
||||
position: absolute;
|
||||
top: -8rpx;
|
||||
left: 50%;
|
||||
margin-left: 16rpx;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
line-height: 32rpx;
|
||||
padding: 0 8rpx;
|
||||
min-width: 32rpx;
|
||||
border-radius: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
text {
|
||||
width: 100%;
|
||||
padding: 0 8rpx;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item-absolute {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
206
uniapp/小程序代码/pages/component/mine/admin.vue
Normal file
206
uniapp/小程序代码/pages/component/mine/admin.vue
Normal file
@@ -0,0 +1,206 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-按钮组 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="diy-menu" :class="{'vertical-layout': showStyle.layout == 2}" :style="{'row-gap': `${showStyle.itemSpace}px`}">
|
||||
<block v-for="(item, index) in showData" :key="index">
|
||||
<!-- 核销活动 -->
|
||||
<view class="menu-item" :style="{width: `calc(100% / ${showStyle.rowsNum})`}" @click="toPage(item.type)" v-if="item.type == 'verificationActivity' && userInfo.is_verifying == 1">
|
||||
<view class="item-image" :style="{width: iconSize, height: iconSize}">
|
||||
<image mode="aspectFit" :src="getImagePath(item.imgUrl)"></image>
|
||||
</view>
|
||||
<view class="item-space" :style="{width: graphicSpace, height: graphicSpace}"></view>
|
||||
<view class="item-text text-ellipsis" :style="{color: showStyle.textColor, fontSize: fontSize}">{{ item.text }}</view>
|
||||
<image class="item-icon" src="/static/right.png" mode="aspectFit" :style="{width: fontSize, height: fontSize}"></image>
|
||||
</view>
|
||||
<!-- 审核会员 -->
|
||||
<view class="menu-item" :style="{width: `calc(100% / ${showStyle.rowsNum})`}" @click="toPage(item.type)" v-else-if="item.type == 'examineMember' && userInfo.set_admin == 1">
|
||||
<view class="item-image" :style="{width: iconSize, height: iconSize}">
|
||||
<image class="image" mode="aspectFit" :src="getImagePath(item.imgUrl)"></image>
|
||||
<view class="count" v-if="userInfo && parseInt(userInfo.member_apply_count) > 0">{{parseInt(userInfo.member_apply_count) > 99 ? '99+' : userInfo.member_apply_count}}</view>
|
||||
</view>
|
||||
<view class="item-space" :style="{width: graphicSpace, height: graphicSpace}"></view>
|
||||
<view class="item-text text-ellipsis" :style="{color: showStyle.textColor, fontSize: fontSize}">{{ item.text }}</view>
|
||||
<view class="item-count" v-if="userInfo && parseInt(userInfo.member_apply_count) > 0">{{parseInt(userInfo.member_apply_count) > 99 ? '99+' : userInfo.member_apply_count}}</view>
|
||||
<image class="item-icon" src="/static/right.png" mode="aspectFit" :style="{width: fontSize, height: fontSize}"></image>
|
||||
</view>
|
||||
<!-- 消息订阅 -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="menu-item" :style="{width: `calc(100% / ${showStyle.rowsNum})`}" @click="toPage(item.type)" v-else-if="item.type == 'subscribeMessage' && userInfo.set_admin == 1">
|
||||
<view class="item-image" :style="{width: iconSize, height: iconSize}">
|
||||
<image class="image" mode="aspectFit" :src="getImagePath(item.imgUrl)"></image>
|
||||
</view>
|
||||
<view class="item-space" :style="{width: graphicSpace, height: graphicSpace}"></view>
|
||||
<view class="item-text text-ellipsis" :style="{color: showStyle.textColor, fontSize: fontSize}">{{ item.text }}</view>
|
||||
<image class="item-icon" src="/static/right.png" mode="aspectFit" :style="{width: fontSize, height: fontSize}"></image>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
name: 'mineMenu',
|
||||
props: ['showStyle', 'showData', 'domain'],
|
||||
computed: {
|
||||
...mapState({
|
||||
userInfo: state => state.user.userInfo,
|
||||
adminStatus: state => {
|
||||
let status = false
|
||||
if (state.user.userInfo.is_verifying == 1) {
|
||||
status = true
|
||||
}
|
||||
if (state.user.userInfo.set_admin == 1) {
|
||||
status = true
|
||||
}
|
||||
return status
|
||||
},
|
||||
adminCount: state => {
|
||||
return {
|
||||
member_apply_count: state.user.userInfo.member_apply_count || 0
|
||||
}
|
||||
},
|
||||
}),
|
||||
iconSize() {
|
||||
let size = this.showStyle.iconSize || 44
|
||||
return uni.upx2px(size * 2) + 'px';
|
||||
},
|
||||
fontSize() {
|
||||
let size = this.showStyle.fontSize || 14
|
||||
return uni.upx2px(size * 2) + 'px';
|
||||
},
|
||||
graphicSpace() {
|
||||
return uni.upx2px(this.showStyle.graphicSpace * 2) + 'px';
|
||||
},
|
||||
itemSpace() {
|
||||
return uni.upx2px(this.showStyle.itemSpace * 2) + 'px';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 获取图片地址
|
||||
getImagePath(url) {
|
||||
if (url.indexOf('http') > -1) {
|
||||
return url
|
||||
} else {
|
||||
return this.domain + url
|
||||
}
|
||||
},
|
||||
// 跳转页面
|
||||
toPage(type) {
|
||||
var path = ""
|
||||
if (type == "subscribeMessage") {
|
||||
path = "/pages/mine/subscribe/index"
|
||||
} else if (type == "verificationActivity") {
|
||||
path = "/pagesActivity/verification/index"
|
||||
} else if (type == "examineMember") {
|
||||
path = "/pagesAdmin/examine/index"
|
||||
}
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: path,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.diy-menu {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.menu-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0 8rpx;
|
||||
|
||||
.item-image {
|
||||
position: relative;
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.count {
|
||||
position: absolute;
|
||||
top: -12rpx;
|
||||
right: -16rpx;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
font-size: 20rpx;
|
||||
line-height: 28rpx;
|
||||
padding: 0 8rpx;
|
||||
min-width: 28rpx;
|
||||
background: #FF4646;
|
||||
border-radius: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-text {
|
||||
width: 100%;
|
||||
line-height: 1.4;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item-count {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical-layout {
|
||||
flex-direction: column;
|
||||
padding: 0 16px;
|
||||
|
||||
.menu-item {
|
||||
flex-direction: row;
|
||||
width: 100% !important;
|
||||
padding: 0;
|
||||
|
||||
.item-image .count {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item-text {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.item-count {
|
||||
display: block;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
font-size: 20rpx;
|
||||
line-height: 28rpx;
|
||||
padding: 0 8rpx;
|
||||
min-width: 28rpx;
|
||||
background: #FF4646;
|
||||
border-radius: 28rpx;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
display: block;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
143
uniapp/小程序代码/pages/component/mine/menu.vue
Normal file
143
uniapp/小程序代码/pages/component/mine/menu.vue
Normal file
@@ -0,0 +1,143 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-按钮组 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="diy-menu" :class="{'vertical-layout': showStyle.layout == 2}" :style="{'row-gap': `${showStyle.itemSpace}px`}">
|
||||
<block v-for="(item, index) in showData" :key="index">
|
||||
<view class="menu-item" :style="{width: `calc(100% / ${showStyle.rowsNum})`}" @click="onClick(item.link)" v-if="!item.link || item.link.type != 'Service'">
|
||||
<view class="item-image" :style="{width: iconSize, height: iconSize}">
|
||||
<image mode="aspectFit" :src="getImagePath(item.imgUrl)"></image>
|
||||
</view>
|
||||
<view class="item-space" :style="{width: graphicSpace, height: graphicSpace}"></view>
|
||||
<view class="item-text text-ellipsis" :style="{color: showStyle.textColor, fontSize: fontSize}">{{ item.text }}</view>
|
||||
<image class="item-icon" src="/static/right.png" mode="aspectFit" :style="{width: fontSize, height: fontSize}"></image>
|
||||
<!-- #ifdef H5 -->
|
||||
<wx-open-launch-weapp class="item-absolute" :appid="item.link.appid" :path="item.link.path" v-if="item.link && item.link.type == 'WXMp'">
|
||||
<script type="text/wxtag-template">
|
||||
<style> .btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
|
||||
<view class="btn"></view>
|
||||
</script>
|
||||
</wx-open-launch-weapp>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<button class="menu-item clear" open-type="contact" :style="{width: `calc(100% / ${showStyle.rowsNum})`}" v-else-if="item.link.type == 'Service'">
|
||||
<view class="item-image" :style="{width: iconSize, height: iconSize}">
|
||||
<image mode="aspectFit" :src="getImagePath(item.imgUrl)"></image>
|
||||
</view>
|
||||
<view class="item-space" :style="{width: graphicSpace, height: graphicSpace}"></view>
|
||||
<view class="item-text text-ellipsis" :style="{color: showStyle.textColor, fontSize: fontSize}">{{ item.text }}</view>
|
||||
<image class="item-icon" src="/static/right.png" mode="aspectFit" :style="{width: fontSize, height: fontSize}"></image>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
name: 'mineMenu',
|
||||
props: ['showStyle', 'showData', 'domain'],
|
||||
computed: {
|
||||
iconSize() {
|
||||
let size = this.showStyle.iconSize || 44
|
||||
return uni.upx2px(size * 2) + 'px';
|
||||
},
|
||||
fontSize() {
|
||||
let size = this.showStyle.fontSize || 14
|
||||
return uni.upx2px(size * 2) + 'px';
|
||||
},
|
||||
graphicSpace() {
|
||||
return uni.upx2px(this.showStyle.graphicSpace * 2) + 'px';
|
||||
},
|
||||
itemSpace() {
|
||||
return uni.upx2px(this.showStyle.itemSpace * 2) + 'px';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 获取图片地址
|
||||
getImagePath(url) {
|
||||
if (url.indexOf('http') > -1) {
|
||||
return url
|
||||
} else {
|
||||
return this.domain + url
|
||||
}
|
||||
},
|
||||
// 点击事件
|
||||
onClick(e) {
|
||||
if (!e) return;
|
||||
this.$util.openLink(e);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.diy-menu {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.menu-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0 8rpx;
|
||||
|
||||
.item-image {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
}
|
||||
|
||||
.item-text {
|
||||
width: 100%;
|
||||
line-height: 1.4;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item-absolute {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical-layout {
|
||||
flex-direction: column;
|
||||
padding: 0 16px;
|
||||
|
||||
.menu-item {
|
||||
flex-direction: row;
|
||||
width: 100% !important;
|
||||
padding: 0;
|
||||
|
||||
.item-text {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
display: block;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
136
uniapp/小程序代码/pages/component/mine/order.vue
Normal file
136
uniapp/小程序代码/pages/component/mine/order.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-订单菜单 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
<template>
|
||||
<view class="component-menu-order">
|
||||
<view class="order-cloumn" :style="{width: (100 / showData.length) + '%'}" v-for="(item, index) in showData" :key="index">
|
||||
<view class="cloumn-item" @click="toPage(item.type)">
|
||||
<view class="item-image" :style="{width: iconSize, height: iconSize}">
|
||||
<image class="image" :src="getImagePath(item.imgUrl)" mode="aspectFit" v-if="item.imgUrl"></image>
|
||||
<view class="count" v-if="parseInt(getOrderNumber(item.type)) > 0">{{parseInt(getOrderNumber(item.type)) > 99 ? '99+' : getOrderNumber(item.type)}}</view>
|
||||
</view>
|
||||
<view class="item-text" :style="{fontSize: fontSize, color: showStyle.textColor, marginTop: graphicSpace}">{{item.text}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
name: "mineOrder",
|
||||
props: ['showStyle', 'showData', 'domain'],
|
||||
computed: {
|
||||
...mapState({
|
||||
orderInfo: state => state.user.userInfo.order || {},
|
||||
}),
|
||||
iconSize() {
|
||||
return uni.upx2px(this.showStyle.iconSize * 2) + 'px';
|
||||
},
|
||||
fontSize() {
|
||||
return uni.upx2px(this.showStyle.fontSize * 2) + 'px';
|
||||
},
|
||||
graphicSpace() {
|
||||
return uni.upx2px(this.showStyle.graphicSpace * 2) + 'px';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 获取图片地址
|
||||
getImagePath(url) {
|
||||
if (url.indexOf('http') > -1) {
|
||||
return url
|
||||
} else {
|
||||
return this.domain + url
|
||||
}
|
||||
},
|
||||
// 获取该状态的订单数量
|
||||
getOrderNumber(type) {
|
||||
if (type == 1) {
|
||||
return this.orderInfo.unpaid_count || 0
|
||||
} else if (type == 2) {
|
||||
return this.orderInfo.to_be_shipped_count || 0
|
||||
} else if (type == 3) {
|
||||
return this.orderInfo.to_be_received_count || 0
|
||||
} else if (type == 4) {
|
||||
return this.orderInfo.refund_count || 0
|
||||
}
|
||||
return 0
|
||||
},
|
||||
// 跳转页面
|
||||
toPage(type) {
|
||||
var path = ""
|
||||
if (type == 1) {
|
||||
path = "/pagesMall/order/index?id=1"
|
||||
} else if (type == 2) {
|
||||
path = "/pagesMall/order/index?id=2"
|
||||
} else if (type == 3) {
|
||||
path = "/pagesMall/order/index?id=3"
|
||||
} else if (type == 4) {
|
||||
path = "/pagesMall/refund/index"
|
||||
}
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: path,
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.component-menu-order {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
.order-cloumn {
|
||||
width: 25%;
|
||||
|
||||
.cloumn-item {
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
|
||||
.item-image {
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.count {
|
||||
position: absolute;
|
||||
top: -12rpx;
|
||||
right: -16rpx;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
font-size: 20rpx;
|
||||
line-height: 26rpx;
|
||||
padding: 0 8rpx;
|
||||
min-width: 26rpx;
|
||||
background: #FF4646;
|
||||
border-radius: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-text {
|
||||
text-align: center;
|
||||
line-height: 1.4;
|
||||
color: #5A5B6E;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1060
uniapp/小程序代码/pages/component/mine/user-info.vue
Normal file
1060
uniapp/小程序代码/pages/component/mine/user-info.vue
Normal file
File diff suppressed because it is too large
Load Diff
180
uniapp/小程序代码/pages/component/modal/confirm.vue
Normal file
180
uniapp/小程序代码/pages/component/modal/confirm.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<!-- 组件-确认弹窗 开发者: 麦沃德科技-半夏 -->
|
||||
|
||||
<template>
|
||||
<view class="component-modal-confirm">
|
||||
<uni-popup ref="popup" type="center" @change="onChange">
|
||||
<view class="modal-confirm" :style="{width: editable ? '688rpx' : '544rpx'}">
|
||||
<view class="confirm-title" v-if="title">{{title}}</view>
|
||||
<view class="confirm-input" v-if="editable">
|
||||
<textarea class="textarea" v-model="inputData" :placeholder="placeholderText" :placeholder-class="placeholder" />
|
||||
</view>
|
||||
<view class="confirm-content" v-else>
|
||||
<rich-text :nodes="content"></rich-text>
|
||||
</view>
|
||||
<view class="confirm-footer">
|
||||
<view class="footer-btn" :style="{color: cancelColor}" v-if="showCancel" @click="handleCancel()">{{cancelText}}</view>
|
||||
<view class="footer-btn" :style="{color: confirmColor}" @click="handleConfirm()">{{confirmText}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 模态框标题
|
||||
title: "",
|
||||
// 模态框内容
|
||||
content: "",
|
||||
// 是否显示取消按钮
|
||||
showCancel: true,
|
||||
// 取消按钮文字
|
||||
cancelText: "取消",
|
||||
// 取消按钮颜色
|
||||
cancelColor: "#8D929C",
|
||||
// 确认按钮文字
|
||||
confirmText: "确定",
|
||||
// 确认按钮颜色
|
||||
confirmColor: "#DE2828",
|
||||
// 是否显示输入框
|
||||
editable: false,
|
||||
// 显示输入框时的提示文本
|
||||
placeholderText: "请输入",
|
||||
// 回调函数
|
||||
callback: null,
|
||||
// 输入内容
|
||||
inputData: "",
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 打开弹窗
|
||||
open(e) {
|
||||
this.title = e.title || ""
|
||||
this.content = e.content || ""
|
||||
this.showCancel = e.showCancel === false ? false : true
|
||||
this.cancelText = e.cancelText || "取消"
|
||||
this.cancelColor = e.cancelColor || "#8D929C"
|
||||
this.confirmText = e.confirmText || "确定"
|
||||
this.confirmColor = e.confirmColor || "#325DFF"
|
||||
this.editable = e.editable || false
|
||||
this.placeholderText = e.placeholderText || "请输入"
|
||||
this.callback = e.success
|
||||
this.inputData = ""
|
||||
this.$refs.popup.open()
|
||||
},
|
||||
// 改变事件
|
||||
onChange(e) {
|
||||
this.$emit("onChange", e.show)
|
||||
},
|
||||
// 取消按钮
|
||||
handleCancel() {
|
||||
if (this.callback) {
|
||||
this.callback({
|
||||
cancel: true,
|
||||
})
|
||||
}
|
||||
this.$refs.popup.close()
|
||||
},
|
||||
// 确认按钮
|
||||
handleConfirm() {
|
||||
if (this.callback) {
|
||||
if (this.editable) {
|
||||
if (!this.inputData) {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: this.placeholderText
|
||||
})
|
||||
return
|
||||
}
|
||||
this.callback({
|
||||
confirm: true,
|
||||
content: this.inputData
|
||||
})
|
||||
this.$refs.popup.close()
|
||||
} else {
|
||||
this.callback({
|
||||
confirm: true
|
||||
})
|
||||
this.$refs.popup.close()
|
||||
}
|
||||
} else {
|
||||
this.$refs.popup.close()
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.component-modal-confirm {
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
|
||||
.modal-confirm {
|
||||
width: 544rpx;
|
||||
max-width: 92vw;
|
||||
border-radius: 16rpx;
|
||||
background: #FFF;
|
||||
padding-top: 32rpx;
|
||||
|
||||
.confirm-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
padding: 0 32rpx 16rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.confirm-content {
|
||||
padding: 32rpx 48rpx 64rpx;
|
||||
color: #5A5B6E;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
line-height: 44rpx;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.confirm-input {
|
||||
padding: 16rpx 32rpx 32rpx;
|
||||
|
||||
.textarea {
|
||||
padding: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #F6F7FB;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
height: 240rpx;
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: #8D929C;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-footer {
|
||||
border-top: 1px solid #E5E5E5;
|
||||
display: flex;
|
||||
|
||||
.footer-btn {
|
||||
flex: 1;
|
||||
width: 50%;
|
||||
padding: 28rpx 20rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
line-height: 48rpx;
|
||||
border-left: 1px solid #E5E5E5;
|
||||
|
||||
&:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
204
uniapp/小程序代码/pages/component/modal/level.vue
Normal file
204
uniapp/小程序代码/pages/component/modal/level.vue
Normal file
@@ -0,0 +1,204 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-级别选择弹窗 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="component-modal-level" @click.stop>
|
||||
<uni-popup ref="popupModal" type="bottom" :safe-area="false" @change="onChange">
|
||||
<view class="popup-box" :style="{'--theme-color': themeColor}">
|
||||
<view class="popup-header">
|
||||
<view class="title">会员级别</view>
|
||||
<image class="close" src="/static/close.png" mode="aspectFit" @click="onClose"></image>
|
||||
</view>
|
||||
<view class="popup-content flex-direction-column">
|
||||
<scroll-view scroll-y class="contetnt-scroll flex-item">
|
||||
<view class="scroll-list flex flex-wrap">
|
||||
<view class="list-item" :class="{active: selectItem.includes(item)}" v-for="item in levelList" :key="item.id" @click="selectLevel(item)">{{item.name}}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="popup-btn">
|
||||
<view class="btn" @click="onReset">重置</view>
|
||||
<view class="btn confirm" @click="onConfirm">确认</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
name: "modalLevel",
|
||||
data() {
|
||||
return {
|
||||
// 级别列表
|
||||
levelList: [],
|
||||
// 已选项目
|
||||
selectItem: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 打开模态框
|
||||
open(value) {
|
||||
this.levelList = []
|
||||
this.getLevelList(value)
|
||||
this.$refs.popupModal.open()
|
||||
},
|
||||
// 获取级别数据
|
||||
getLevelList(value) {
|
||||
// 获取会员级别
|
||||
this.$util.request("member.level").then(res => {
|
||||
if (res.code == 1) {
|
||||
this.levelList = res.data
|
||||
this.selectItem = []
|
||||
for (let i in this.levelList) {
|
||||
for (let j in value) {
|
||||
if (this.levelList[i].id == value[j].id) {
|
||||
this.selectItem.push(this.levelList[i])
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取会员级别 ', error)
|
||||
})
|
||||
},
|
||||
// 选择级别
|
||||
selectLevel(item) {
|
||||
if (this.selectItem.includes(item)) {
|
||||
this.$delete(this.selectItem, this.selectItem.indexOf(item))
|
||||
} else {
|
||||
this.selectItem.push(item)
|
||||
}
|
||||
},
|
||||
// 关闭弹窗
|
||||
onClose() {
|
||||
this.$refs.popupModal.close()
|
||||
},
|
||||
// 重置
|
||||
onReset() {
|
||||
this.selectItem = []
|
||||
this.$emit("callback", [])
|
||||
this.onClose()
|
||||
},
|
||||
// 确认
|
||||
onConfirm() {
|
||||
this.$emit("callback", this.selectItem)
|
||||
this.onClose()
|
||||
},
|
||||
// 改变事件
|
||||
onChange(e) {
|
||||
this.$emit("onChange", e.show)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.component-modal-level {
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
|
||||
.popup-box {
|
||||
background: #FFFFFF;
|
||||
border-radius: 40rpx 40rpx 0 0;
|
||||
padding-top: 32rpx;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
|
||||
.popup-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 32rpx 0 64rpx;
|
||||
|
||||
.title {
|
||||
color: #333;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.close {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
padding: 12rpx 32rpx 32rpx;
|
||||
height: 60vh;
|
||||
|
||||
.contetnt-scroll {
|
||||
overflow: hidden;
|
||||
padding: 0 12rpx;
|
||||
|
||||
.scroll-list {
|
||||
margin-left: -32rpx;
|
||||
|
||||
.list-item {
|
||||
margin-top: 32rpx;
|
||||
color: #666666;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
padding: 16rpx;
|
||||
min-width: 200rpx;
|
||||
border-radius: 10rpx;
|
||||
background: #F6F7FB;
|
||||
margin-left: 32rpx;
|
||||
|
||||
&.active {
|
||||
background: var(--theme-color);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup-btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-top: 1rpx solid #F6F7FB;
|
||||
padding: 16rpx 32rpx;
|
||||
|
||||
.btn {
|
||||
width: 48%;
|
||||
color: #666666;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
padding: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
background: #F0F0F0;
|
||||
text-align: center;
|
||||
|
||||
&.confirm {
|
||||
color: #FFFFFF;
|
||||
background: var(--theme-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
328
uniapp/小程序代码/pages/component/modal/region.vue
Normal file
328
uniapp/小程序代码/pages/component/modal/region.vue
Normal file
@@ -0,0 +1,328 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-地区选择弹窗 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="component-modal-region" @click.stop>
|
||||
<uni-popup ref="popupModal" type="bottom" :safe-area="false" @change="onChange">
|
||||
<view class="popup-box" :style="{'--theme-color': themeColor}">
|
||||
<view class="popup-header">
|
||||
<view class="title">地区选择</view>
|
||||
<image class="close" src="/static/close.png" mode="aspectFit" @click="onClose"></image>
|
||||
</view>
|
||||
<view class="popup-content flex-direction-column">
|
||||
<view class="contetnt-select flex">
|
||||
<view class="select-item flex" @click="selectProvince = '';selectCity = '';selectArea = '';">
|
||||
<view class="item-title">省：</view>
|
||||
<view class="item-value">{{selectProvince || "请选择"}}</view>
|
||||
</view>
|
||||
<view class="select-item flex" @click="selectCity = '';selectArea = '';">
|
||||
<view class="item-title">市：</view>
|
||||
<view class="item-value">{{selectCity || "请选择"}}</view>
|
||||
</view>
|
||||
<view class="select-item flex">
|
||||
<view class="item-title">区/县：</view>
|
||||
<view class="item-value" v-if="selectCity">{{selectArea || "全部"}}</view>
|
||||
<view class="item-value" v-else>请选择</view>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-y class="contetnt-city flex-item">
|
||||
<view class="city-list">
|
||||
<block v-if="provinceList.length && !selectProvince">
|
||||
<view class="list-item" v-for="(item, index) in provinceList" :key="index" @click="changeProvince(item.id, item.name)">{{item.name}}</view>
|
||||
</block>
|
||||
<block v-if="cityList.length && !selectCity">
|
||||
<view class="list-item" v-for="(item, index) in cityList" :key="index" @click="changeCity(item.id, item.name)">{{item.name}}</view>
|
||||
</block>
|
||||
<block v-if="areaList.length">
|
||||
<view class="list-item" :class="{active: selectArea == ''}" @click="changeArea('')">全部</view>
|
||||
<view class="list-item" :class="{active: selectArea == item.name}" v-for="(item, index) in areaList" :key="index" @click="changeArea(item.name)">{{item.name}}</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="city-empty" v-if="!provinceList.length && !cityList.length && !areaList.length">暂无相关数据</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="popup-btn">
|
||||
<view class="btn" @click="onReset">重置</view>
|
||||
<view class="btn confirm" @click="onConfirm">确认</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
name: "modalRegion",
|
||||
data() {
|
||||
return {
|
||||
// 省份列表
|
||||
provinceList: [],
|
||||
// 城市列表
|
||||
cityList: [],
|
||||
// 区县列表
|
||||
areaList: [],
|
||||
// 已选省份
|
||||
selectProvince: "",
|
||||
// 已选城市
|
||||
selectCity: "",
|
||||
// 已选区县
|
||||
selectArea: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 打开模态框
|
||||
open(value) {
|
||||
this.provinceList = []
|
||||
this.cityList = []
|
||||
this.areaList = []
|
||||
this.selectProvince = value.province || ""
|
||||
this.selectCity = value.city || ""
|
||||
this.selectArea = value.area || ""
|
||||
this.getProvinceList()
|
||||
this.$refs.popupModal.open()
|
||||
},
|
||||
// 获取省份数据
|
||||
getProvinceList() {
|
||||
this.$util.request("main.address.province").then(res => {
|
||||
if (res.code == 1) {
|
||||
this.provinceList = res.data.data
|
||||
for (let i in this.provinceList) {
|
||||
if (this.provinceList[i].name == this.selectProvince) {
|
||||
this.getCityList(this.provinceList[i].id)
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取省份数据 ', error)
|
||||
})
|
||||
},
|
||||
// 获取城市数据
|
||||
getCityList(id) {
|
||||
this.$util.request("main.address.city", {
|
||||
crea_id: id
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
this.cityList = res.data.data
|
||||
for (let i in this.cityList) {
|
||||
if (this.cityList[i].name == this.selectCity) {
|
||||
this.getAreaList(this.cityList[i].id)
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取城市数据 ', error)
|
||||
})
|
||||
},
|
||||
// 获取区县数据
|
||||
getAreaList(id) {
|
||||
this.$util.request("main.address.area", {
|
||||
crea_id: id
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
this.areaList = res.data.data
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取区县数据 ', error)
|
||||
})
|
||||
},
|
||||
// 关闭弹窗
|
||||
onClose() {
|
||||
this.$refs.popupModal.close()
|
||||
},
|
||||
// 重置
|
||||
onReset() {
|
||||
this.cityList = []
|
||||
this.areaList = []
|
||||
this.selectProvince = ""
|
||||
this.selectCity = ""
|
||||
this.selectArea = ""
|
||||
this.$emit("callback", {
|
||||
province: "",
|
||||
city: "",
|
||||
area: "",
|
||||
})
|
||||
this.onClose()
|
||||
},
|
||||
// 选择省份
|
||||
changeProvince(id, name) {
|
||||
this.selectProvince = name
|
||||
this.getCityList(id)
|
||||
},
|
||||
// 选择城市
|
||||
changeCity(id, name) {
|
||||
this.selectCity = name
|
||||
this.getAreaList(id)
|
||||
},
|
||||
// 选择区县
|
||||
changeArea(name) {
|
||||
this.selectArea = name
|
||||
},
|
||||
// 确认
|
||||
onConfirm() {
|
||||
if (this.selectProvince && this.selectCity) {
|
||||
this.$emit("callback", {
|
||||
province: this.selectProvince,
|
||||
city: this.selectCity,
|
||||
area: this.selectArea,
|
||||
})
|
||||
} else {
|
||||
this.$emit("callback", {})
|
||||
}
|
||||
this.onClose()
|
||||
},
|
||||
// 改变事件
|
||||
onChange(e) {
|
||||
this.$emit("onChange", e.show)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.component-modal-region {
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
|
||||
.popup-box {
|
||||
background: #FFFFFF;
|
||||
border-radius: 40rpx 40rpx 0 0;
|
||||
padding: 32rpx 32rpx 0;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
|
||||
.popup-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 32rpx;
|
||||
|
||||
.title {
|
||||
color: #333;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.close {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
padding: 32rpx 0;
|
||||
height: 65vh;
|
||||
|
||||
.contetnt-select {
|
||||
margin-top: 16rpx;
|
||||
|
||||
.select-item {
|
||||
margin-left: 32rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
|
||||
.item-value {
|
||||
color: var(--theme-color);
|
||||
font-size: 28rpx;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contetnt-city {
|
||||
padding-top: 32rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.city-list {
|
||||
.list-item {
|
||||
margin-top: 32rpx;
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
line-height: 50rpx;
|
||||
|
||||
&.active {
|
||||
color: var(--theme-color);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.city-empty {
|
||||
padding: 48rpx 0 24rpx;
|
||||
color: #A0A2B3;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup-btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-top: 1rpx solid #F6F7FB;
|
||||
padding: 16rpx 32rpx;
|
||||
|
||||
.btn {
|
||||
width: 48%;
|
||||
color: #666666;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
padding: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
background: #F0F0F0;
|
||||
text-align: center;
|
||||
|
||||
&.confirm {
|
||||
color: #FFFFFF;
|
||||
background: var(--theme-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
264
uniapp/小程序代码/pages/component/picker/address.vue
Normal file
264
uniapp/小程序代码/pages/component/picker/address.vue
Normal file
@@ -0,0 +1,264 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-省市区选择器 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="component-picker-address" @click.stop>
|
||||
<uni-popup ref="popupModal" type="bottom" :safe-area="false" @change="onChange">
|
||||
<view class="modal-box" :style="{'--theme-color': themeColor}">
|
||||
<view class="modal-head">
|
||||
<view class="head-title">地址选择</view>
|
||||
<view class="head-btn" @click="handleConfirm">确认</view>
|
||||
</view>
|
||||
<view class="modal-content flex align-items-center">
|
||||
<picker-view class="content-picker" indicator-style="height: 70rpx;" :value="selectValue" @change="handleChange">
|
||||
<picker-view-column>
|
||||
<view class="picker-column" v-for="(item, index) in provinceList" :key="index">{{item.name}}</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="picker-column" v-for="(item, index) in cityList" :key="index">{{item.name}}</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="picker-column" v-for="(item, index) in areaList" :key="index">{{item.name}}</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
<view class="modal-btn" @click="onClose">取消</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
name: "addressPicker",
|
||||
data() {
|
||||
return {
|
||||
// 省份列表
|
||||
provinceList: [],
|
||||
// 城市列表
|
||||
cityList: [],
|
||||
// 地区列表
|
||||
areaList: [],
|
||||
// 已选地址
|
||||
addressList: [],
|
||||
// 已选数据
|
||||
selectValue: [0, 0, 0],
|
||||
// 参数
|
||||
parameter: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
this.getProvinceList()
|
||||
},
|
||||
methods: {
|
||||
// 打开模态框
|
||||
open(value, parameter) {
|
||||
const list = value.split("/")
|
||||
this.addressList = list
|
||||
this.parameter = parameter
|
||||
this.setValueChange()
|
||||
this.$refs.popupModal.open()
|
||||
},
|
||||
// 关闭弹窗
|
||||
onClose() {
|
||||
this.$refs.popupModal.close()
|
||||
},
|
||||
// 改变事件
|
||||
onChange(e) {
|
||||
this.$emit("onChange", e.show)
|
||||
},
|
||||
// 数值改变
|
||||
async handleChange(e) {
|
||||
if (this.selectValue[0] != e.target.value[0]) {
|
||||
this.selectValue = [e.target.value[0], 0, 0]
|
||||
this.cityList = await this.getCityList(this.provinceList[this.selectValue[0]].id)
|
||||
this.areaList = await this.getAreaList(this.cityList[this.selectValue[1]].id)
|
||||
} else if (this.selectValue[1] != e.target.value[1]) {
|
||||
this.selectValue = [e.target.value[0], e.target.value[1], 0]
|
||||
this.areaList = await this.getAreaList(this.cityList[this.selectValue[1]].id)
|
||||
} else {
|
||||
this.selectValue = e.target.value
|
||||
}
|
||||
},
|
||||
// 设置选中数值
|
||||
async setValueChange() {
|
||||
var selectData = [0, 0, 0]
|
||||
if (this.addressList[0]) {
|
||||
for (var i = 0; i < this.provinceList.length; i++) {
|
||||
if (this.provinceList[i].name == this.addressList[0]) {
|
||||
selectData[0] = i
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
this.cityList = await this.getCityList(this.provinceList[selectData[0]].id)
|
||||
if (this.addressList[1]) {
|
||||
for (var i = 0; i < this.cityList.length; i++) {
|
||||
if (this.cityList[i].name == this.addressList[1]) {
|
||||
selectData[1] = i
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
this.areaList = await this.getAreaList(this.cityList[selectData[1]].id)
|
||||
if (this.addressList[2]) {
|
||||
for (var i = 0; i < this.areaList.length; i++) {
|
||||
if (this.areaList[i].name == this.addressList[2]) {
|
||||
selectData[2] = i
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.selectValue = selectData
|
||||
this.$forceUpdate()
|
||||
})
|
||||
},
|
||||
// 确认
|
||||
handleConfirm() {
|
||||
var data = {
|
||||
province: this.provinceList[this.selectValue[0]].name,
|
||||
city: this.cityList[this.selectValue[1]].name,
|
||||
area: this.areaList[this.selectValue[2]].name,
|
||||
}
|
||||
this.$emit("confirm", data, this.parameter)
|
||||
this.onClose()
|
||||
},
|
||||
// 获取省份数据
|
||||
getProvinceList() {
|
||||
this.$util.request("main.address.province").then(res => {
|
||||
if (res.code == 1) {
|
||||
this.provinceList = res.data.data
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取省份数据 ', error)
|
||||
})
|
||||
},
|
||||
// 获取城市数据
|
||||
getCityList(id) {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$util.request("main.address.city", {
|
||||
crea_id: id
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
resolve(res.data.data)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
reject(false)
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取城市数据 ', error)
|
||||
reject(false)
|
||||
})
|
||||
})
|
||||
},
|
||||
// 获取地区数据
|
||||
getAreaList(id) {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$util.request("main.address.area", {
|
||||
crea_id: id
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
resolve(res.data.data)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
reject(false)
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取省份数据 ', error)
|
||||
reject(false)
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.component-picker-address {
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
|
||||
.modal-box {
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
width: 100vw;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
|
||||
.modal-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 32rpx;
|
||||
|
||||
.head-title {
|
||||
flex: 1;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
padding-left: 128rpx;
|
||||
}
|
||||
|
||||
.head-btn {
|
||||
color: #FFF;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
padding: 12rpx 36rpx;
|
||||
border-radius: 10rpx;
|
||||
background: var(--theme-color);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding-bottom: 32rpx;
|
||||
|
||||
.content-picker {
|
||||
height: 400rpx;
|
||||
flex: 1;
|
||||
|
||||
.picker-column {
|
||||
line-height: 70rpx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-btn {
|
||||
color: #E10602;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
line-height: 44rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
192
uniapp/小程序代码/pages/component/picker/date.vue
Normal file
192
uniapp/小程序代码/pages/component/picker/date.vue
Normal file
@@ -0,0 +1,192 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-日期选择框 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="component-picker-date" @click.stop>
|
||||
<uni-popup ref="popupModal" type="bottom" :safe-area="false" @change="onChange">
|
||||
<view class="modal-box" :style="{'--theme-color': themeColor}">
|
||||
<view class="modal-head">
|
||||
<view class="head-btn cancel" @click="onClose">取消</view>
|
||||
<view class="head-title">选择日期</view>
|
||||
<view class="head-btn" @click="handleConfirm">确认</view>
|
||||
</view>
|
||||
<view class="modal-content flex-item">
|
||||
<picker-view class="picker-view" indicator-style="height: 50px;" :immediate-change="true" :value="selectValue" @change="handleChange">
|
||||
<picker-view-column>
|
||||
<view class="picker-column" v-for="(item,index) in yearList" :key="index">{{item}}年</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="picker-column" v-for="(item,index) in monthList" :key="index">{{item}}月</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="picker-column" v-for="(item,index) in dayList" :key="index">{{item}}日</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
name: "datePicker",
|
||||
data() {
|
||||
const date = new Date()
|
||||
const year = date.getFullYear()
|
||||
const month = date.getMonth() + 1
|
||||
const day = date.getDate()
|
||||
let years = []
|
||||
let months = []
|
||||
let days = []
|
||||
for (let i = parseInt(year) - 150; i <= parseInt(year) + 150; i++) {
|
||||
years.push(i)
|
||||
}
|
||||
for (let i = 1; i <= 12; i++) {
|
||||
months.push(i)
|
||||
}
|
||||
for (let i = 1; i <= new Date(year, month, 0).getDate(); i++) {
|
||||
days.push(i)
|
||||
}
|
||||
return {
|
||||
// 当前日期
|
||||
nowDate: [year, month, day],
|
||||
// 年列表
|
||||
yearList: years,
|
||||
// 月列表
|
||||
monthList: months,
|
||||
// 日列表
|
||||
dayList: days,
|
||||
// 已选数据
|
||||
selectValue: [year, month - 1, day - 1],
|
||||
// 参数
|
||||
parameter: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 打开模态框
|
||||
open(value, parameter) {
|
||||
this.parameter = parameter
|
||||
if (value) {
|
||||
var date = value.split("-")
|
||||
var yearIndex = this.yearList.findIndex(item => {
|
||||
if (item == date[0]) return true
|
||||
})
|
||||
var monthIndex = this.monthList.findIndex(item => {
|
||||
if (item == date[1]) return true
|
||||
})
|
||||
var dayIndex = this.dayList.findIndex(item => {
|
||||
if (item == date[2]) return true
|
||||
})
|
||||
this.selectValue = [yearIndex, monthIndex, dayIndex]
|
||||
} else {
|
||||
this.selectValue = [this.yearList.indexOf(this.nowDate[0]), this.monthList.indexOf(this.nowDate[1]), this.dayList.indexOf(this.nowDate[2])]
|
||||
}
|
||||
this.$refs.popupModal.open()
|
||||
},
|
||||
// 关闭弹窗
|
||||
onClose() {
|
||||
this.$refs.popupModal.close()
|
||||
},
|
||||
// 改变事件
|
||||
onChange(e) {
|
||||
this.$emit("onChange", e.show)
|
||||
},
|
||||
// 时间改变
|
||||
handleChange(e) {
|
||||
if (this.selectValue[0] != e.target.value[0] || this.selectValue[1] != e.target.value[1]) {
|
||||
var days = []
|
||||
var year = this.yearList[e.target.value[0]]
|
||||
var month = this.monthList[e.target.value[1]]
|
||||
for (let i = 1; i <= new Date(year, month, 0).getDate(); i++) {
|
||||
days.push(i)
|
||||
}
|
||||
this.dayList = days
|
||||
}
|
||||
this.selectValue = e.target.value
|
||||
if (this.selectValue[2] > this.dayList.length - 1) {
|
||||
this.selectValue[2] = this.dayList.length - 1
|
||||
}
|
||||
},
|
||||
// 确认
|
||||
handleConfirm() {
|
||||
var year = parseInt(this.yearList[this.selectValue[0]]) < 10 ? "0" + this.yearList[this.selectValue[0]] : this.yearList[this.selectValue[0]]
|
||||
var month = parseInt(this.monthList[this.selectValue[1]]) < 10 ? "0" + this.monthList[this.selectValue[1]] : this.monthList[this.selectValue[1]]
|
||||
var day = parseInt(this.dayList[this.selectValue[2]]) < 10 ? "0" + this.dayList[this.selectValue[2]] : this.dayList[this.selectValue[2]]
|
||||
var data = year + "-" + month + "-" + day
|
||||
this.$emit("confirm", data, this.parameter)
|
||||
this.onClose()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.component-picker-date {
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
|
||||
.modal-box {
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
width: 100vw;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
|
||||
.modal-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 32rpx;
|
||||
|
||||
.head-title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
line-height: 40rpx;
|
||||
padding: 0 16rpx;
|
||||
}
|
||||
|
||||
.head-btn {
|
||||
color: var(--theme-color);
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
|
||||
&.cancel {
|
||||
color: #979797;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding-bottom: 32rpx;
|
||||
|
||||
.picker-view {
|
||||
height: 400rpx;
|
||||
flex: 1;
|
||||
|
||||
.picker-column {
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
166
uniapp/小程序代码/pages/component/picker/select.vue
Normal file
166
uniapp/小程序代码/pages/component/picker/select.vue
Normal file
@@ -0,0 +1,166 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-单项选择框 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="component-picker-select" @click.stop>
|
||||
<uni-popup ref="popupModal" type="bottom" :safe-area="false" @change="onChange">
|
||||
<view class="modal-box" :style="{'--theme-color': themeColor}">
|
||||
<view class="modal-head">
|
||||
<view class="head-title text-ellipsis">{{title}}</view>
|
||||
<view class="head-btn" @click="handleConfirm">确认</view>
|
||||
</view>
|
||||
<view class="modal-content flex align-items-center" v-if="loadEnd">
|
||||
<picker-view class="content-picker" indicator-style="height: 50px;" :immediate-change="true" :value="selectValue" @change="handleChange">
|
||||
<picker-view-column>
|
||||
<view class="picker-column" v-for="(item, index) in selectList" :key="index">{{item.name || item}}</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
<view class="modal-btn" @click="onClose">取消</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
name: "selectPicker",
|
||||
props: ["title"],
|
||||
data() {
|
||||
return {
|
||||
// 加载完成
|
||||
loadEnd: false,
|
||||
// 参数
|
||||
parameter: null,
|
||||
// 数据列表
|
||||
selectList: [],
|
||||
// 已选数据
|
||||
selectValue: [0],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 打开模态框
|
||||
open(list, value, parameter) {
|
||||
this.selectList = list
|
||||
this.parameter = parameter
|
||||
if (value) {
|
||||
for (var i = 0; i < list.length; i++) {
|
||||
if (typeof(list[i]) == "object") {
|
||||
if (list[i].id == value) {
|
||||
this.selectValue = [i]
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
if (list[i] == value) {
|
||||
this.selectValue = [i]
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.selectValue = [0]
|
||||
}
|
||||
this.selectValue = [...this.selectValue]
|
||||
this.loadEnd = true
|
||||
this.$refs.popupModal.open()
|
||||
},
|
||||
// 关闭弹窗
|
||||
onClose() {
|
||||
this.loadEnd = false
|
||||
this.$refs.popupModal.close()
|
||||
},
|
||||
// 改变事件
|
||||
onChange(e) {
|
||||
this.$emit("onChange", e.show)
|
||||
},
|
||||
// 改变值
|
||||
handleChange(e) {
|
||||
this.selectValue = [...e.target.value]
|
||||
},
|
||||
// 确认
|
||||
handleConfirm() {
|
||||
this.$emit("confirm", this.selectList[this.selectValue[0]], this.parameter)
|
||||
this.onClose()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.component-picker-select {
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
|
||||
.modal-box {
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
width: 100vw;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
|
||||
.modal-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 32rpx;
|
||||
|
||||
.head-title {
|
||||
flex: 1;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
padding-left: 128rpx;
|
||||
padding: 0 32rpx 0 160rpx;
|
||||
}
|
||||
|
||||
.head-btn {
|
||||
color: #FFF;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
padding: 12rpx 36rpx;
|
||||
border-radius: 10rpx;
|
||||
background: var(--theme-color);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding-bottom: 32rpx;
|
||||
|
||||
.content-picker {
|
||||
height: 400rpx;
|
||||
flex: 1;
|
||||
|
||||
.picker-column {
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-btn {
|
||||
color: #E10602;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
line-height: 44rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
148
uniapp/小程序代码/pages/component/picker/time.vue
Normal file
148
uniapp/小程序代码/pages/component/picker/time.vue
Normal file
@@ -0,0 +1,148 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-时间选择框 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="component-picker-time" @click.stop>
|
||||
<uni-popup ref="popupModal" type="bottom" :safe-area="false" @change="onChange">
|
||||
<view class="modal-box" :style="{'--theme-color': themeColor}">
|
||||
<view class="modal-head">
|
||||
<view class="head-btn cancel" @click="onClose">取消</view>
|
||||
<view class="head-title">选择时间</view>
|
||||
<view class="head-btn" @click="handleConfirm">确认</view>
|
||||
</view>
|
||||
<view class="modal-content flex-item">
|
||||
<picker-view class="picker-view" indicator-style="height: 50px;" :immediate-change="true" :value="selectValue" @change="handleChange">
|
||||
<picker-view-column>
|
||||
<view class="picker-column" v-for="item in 24" :key="item">{{item < 10 ? "0" + item : item}}时</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="picker-column" v-for="item in 60" :key="item">{{item < 10 ? "0" + item : item}}分</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
name: "timePicker",
|
||||
data() {
|
||||
const date = new Date()
|
||||
const hours = date.getHours();
|
||||
const minutes = date.getMinutes();
|
||||
return {
|
||||
// 当前时间
|
||||
nowTime: [hours, minutes],
|
||||
// 已选数据
|
||||
selectValue: [hours, minutes],
|
||||
// 参数
|
||||
parameter: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 打开模态框
|
||||
open(value, parameter) {
|
||||
this.parameter = parameter
|
||||
if (value) {
|
||||
var time = value.split(":")
|
||||
this.selectValue = [parseInt(time[0]), parseInt(time[1])]
|
||||
} else {
|
||||
this.selectValue = [parseInt(this.nowTime[0]), parseInt(this.nowTime[1])]
|
||||
}
|
||||
this.$refs.popupModal.open()
|
||||
},
|
||||
// 关闭弹窗
|
||||
onClose() {
|
||||
this.$refs.popupModal.close()
|
||||
},
|
||||
// 改变事件
|
||||
onChange(e) {
|
||||
this.$emit("onChange", e.show)
|
||||
},
|
||||
// 时间改变
|
||||
handleChange(e) {
|
||||
this.selectValue = e.target.value
|
||||
},
|
||||
// 确认
|
||||
handleConfirm() {
|
||||
var hours = parseInt(this.selectValue[0]) < 10 ? "0" + this.selectValue[0] : this.selectValue[0]
|
||||
var minutes = parseInt(this.selectValue[1]) < 10 ? "0" + this.selectValue[1] : this.selectValue[1]
|
||||
var time = hours + ":" + minutes
|
||||
this.$emit("confirm", time, this.parameter)
|
||||
this.onClose()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.component-picker-time {
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
|
||||
.modal-box {
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
width: 100vw;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
|
||||
.modal-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 32rpx;
|
||||
|
||||
.head-title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
line-height: 40rpx;
|
||||
padding: 0 16rpx;
|
||||
}
|
||||
|
||||
.head-btn {
|
||||
color: var(--theme-color);
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
|
||||
&.cancel {
|
||||
color: #979797;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding-bottom: 32rpx;
|
||||
|
||||
.picker-view {
|
||||
height: 400rpx;
|
||||
flex: 1;
|
||||
|
||||
.picker-column {
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
144
uniapp/小程序代码/pages/component/tab-bar/tab-bar.vue
Normal file
144
uniapp/小程序代码/pages/component/tab-bar/tab-bar.vue
Normal file
@@ -0,0 +1,144 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 组件-底部导航 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="component-tab-bar" v-if="tabBarList && tabBarList.length">
|
||||
<view class="tab-bar-main" :style="{'--theme-color': themeColor}">
|
||||
<view class="main-item wbcentre" v-for="(item, index) in tabBarList" :key="index" @click="tabBarPages(index)">
|
||||
<image class="item-img" :src="item.selicon" mode="aspectFit" v-if="item.path == currentPath"></image>
|
||||
<image class="item-img" :src="item.icon" mode="aspectFit" v-else></image>
|
||||
<view class="item-text" :class="{active: item.path == currentPath}">{{ item.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
name: "tabBar",
|
||||
data() {
|
||||
return {
|
||||
// 当前页面路径
|
||||
currentPath: ""
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
tabBarList: state => {
|
||||
let list = state.app.tabBarList
|
||||
let pages = getCurrentPages();
|
||||
let isShow = false
|
||||
if (pages && pages.length) {
|
||||
let currentPath = "/" + pages[pages.length - 1].route;
|
||||
if (list.length) {
|
||||
for (let i in list) {
|
||||
if (currentPath == list[i].path) {
|
||||
isShow = true
|
||||
// #ifdef MP-WEIXIN
|
||||
wx.hideHomeButton();
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!isShow) list = []
|
||||
return list
|
||||
},
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
let pages = getCurrentPages();
|
||||
this.currentPath = "/" + pages[pages.length - 1].route;
|
||||
},
|
||||
methods: {
|
||||
// 跳转底部导航
|
||||
tabBarPages(index) {
|
||||
const item = this.tabBarList[index]
|
||||
if (item.jump_type == 1) {
|
||||
// 图文
|
||||
if (item.path == this.currentPath) return
|
||||
uni.navigateTo({
|
||||
url: "/pages/webview/imageText?type=2&id=" + item.id
|
||||
})
|
||||
} else if (item.jump_type == 2) {
|
||||
// 内部页面
|
||||
if (item.path == this.currentPath) return
|
||||
this.$util.toPage({
|
||||
path: item.path,
|
||||
mode: 3
|
||||
})
|
||||
} else if (item.jump_type == 3) {
|
||||
// 外部链接
|
||||
this.$util.toPage({
|
||||
path: item.path,
|
||||
mode: 4,
|
||||
})
|
||||
} else if (item.jump_type == 4) {
|
||||
// 小程序
|
||||
this.$util.toPage({
|
||||
appId: JSON.parse(item.path).appid,
|
||||
path: JSON.parse(item.path).path,
|
||||
mode: 5,
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.component-tab-bar {
|
||||
width: 100%;
|
||||
height: 126rpx;
|
||||
|
||||
.tab-bar-main {
|
||||
background: #fff;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 998;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
border-top: 2rpx solid #F6F7FB;
|
||||
|
||||
.main-item {
|
||||
flex: 1;
|
||||
height: 124rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.item-img {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.item-text {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
margin-top: 4rpx;
|
||||
text-align: center;
|
||||
|
||||
&.active {
|
||||
color: var(--theme-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
176
uniapp/小程序代码/pages/component/title-bar/title-bar.vue
Normal file
176
uniapp/小程序代码/pages/component/title-bar/title-bar.vue
Normal file
@@ -0,0 +1,176 @@
|
||||
<!-- 组件-标题栏 开发者: 麦沃德科技半夏 -->
|
||||
<template>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="component-title-bar" :style="{background: backgroundColor, position: positionMode}">
|
||||
<view class="title-bar-status" :style="{height: statusBarHeight + 'px'}"></view>
|
||||
<view class="title-bar-main" :style="{height: titleBarHeight + 'px'}">
|
||||
<view class="main-back" v-if="showBack || !isHideBtn" @click="goBack()">
|
||||
<image class="icon" src="/static/back.png" mode="aspectFit" v-if="frontColor == 'white'"></image>
|
||||
<image class="icon" src="/static/back_b.png" mode="aspectFit" v-else></image>
|
||||
</view>
|
||||
<view class="main-title">
|
||||
<view class="title text-ellipsis" :style="{color: frontColor, fontSize: titleFontSize + 'px'}">{{title}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title-bar-border" v-if="backgroundColor == '#fff'"></view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<view></view>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
name: 'titleBar',
|
||||
props: {
|
||||
// 组件标题
|
||||
title: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
// 组件背景色
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: "#fff"
|
||||
},
|
||||
// 组件文字颜色
|
||||
frontColor: {
|
||||
type: String,
|
||||
default: "black"
|
||||
},
|
||||
// 是否总是显示返回按钮
|
||||
showBack: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 定位模式
|
||||
positionMode: {
|
||||
type: String,
|
||||
default: "sticky"
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 状态栏高度
|
||||
statusBarHeight: 0,
|
||||
// 标题栏高度
|
||||
titleBarHeight: 0,
|
||||
// 标题文字尺寸
|
||||
titleFontSize: 16,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
isHideBtn: state => {
|
||||
let list = state.app.tabBarList
|
||||
let pages = getCurrentPages();
|
||||
let isHide = false
|
||||
if (pages && pages.length) {
|
||||
let currentPath = "/" + pages[pages.length - 1].route;
|
||||
if (list.length) {
|
||||
for (let i in list) {
|
||||
if (currentPath == list[i].path) {
|
||||
isHide = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return isHide
|
||||
},
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
// #ifdef MP-WEIXIN
|
||||
let systemInfo = uni.getSystemInfoSync()
|
||||
this.titleFontSize = systemInfo.fontSizeSetting || 16
|
||||
this.statusBarHeight = systemInfo.statusBarHeight
|
||||
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||||
this.titleBarHeight = (menuButtonInfo.top - this.statusBarHeight) * 2 + menuButtonInfo.height
|
||||
// #endif
|
||||
},
|
||||
watch: {
|
||||
title: {
|
||||
handler(value) {
|
||||
// #ifndef MP-WEIXIN
|
||||
if (value) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: value
|
||||
});
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 返回上一页
|
||||
goBack() {
|
||||
if (getCurrentPages().length == 1) {
|
||||
uni.switchTab({
|
||||
url: "/pages/index/index"
|
||||
})
|
||||
} else {
|
||||
uni.navigateBack()
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.component-title-bar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 998;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
|
||||
.title-bar-status {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title-bar-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
padding: 0 25%;
|
||||
|
||||
.main-back {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
position: absolute;
|
||||
left: 32rpx;
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.main-title {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
|
||||
.title {
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title-bar-border {
|
||||
width: 100%;
|
||||
height: 1rpx;
|
||||
background: #F6F7FB;
|
||||
margin-top: -1rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
401
uniapp/小程序代码/pages/demand/index.vue
Normal file
401
uniapp/小程序代码/pages/demand/index.vue
Normal file
@@ -0,0 +1,401 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 供需 开发者: 麦沃德科技-暴雨
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="container" :style="{'--theme-color': themeColor}">
|
||||
<!-- 标题栏 -->
|
||||
<title-bar title="供需"></title-bar>
|
||||
<!-- 内容区 -->
|
||||
<view class="container-main" v-if="loadEnd">
|
||||
<view class="main-header" :style="{top: titleBarHeight + 'px'}">
|
||||
<view class="header-search flex align-items-center">
|
||||
<view class="search-input flex-item flex align-items-center" @click="toSearch()">
|
||||
<image class="icon" src="/static/search.png" mode="aspectFit"></image>
|
||||
<view class="text">请输入关键词搜索</view>
|
||||
</view>
|
||||
<view class="search-btn flex align-items-center" @click="toPublish()">
|
||||
<view class="icon" :style="{'background-image': 'url('+ iconRelease +')'}" v-if="iconRelease"></view>
|
||||
<view class="text">发布</view>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-x class="header-screen">
|
||||
<view class="screen-item" :class="{active: selectScreen == 0}" @click="screenChange(0)">
|
||||
<text class="item-text">全部</text>
|
||||
</view>
|
||||
<view class="screen-item" :class="{active: selectScreen == item.id}" v-for="item in demandScreen" :key="item.id" @click="screenChange(item.id)">
|
||||
<text class="item-text">{{ item.name }}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="main-content">
|
||||
<demand-item :show-data="demandList" @setShareData="setShareData" v-if="demandList.length"></demand-item>
|
||||
<empty top="30%" title="暂无相关内容~" v-else></empty>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 未登录状态 -->
|
||||
<view class="container-login" v-if="!loadEnd && showLogin">
|
||||
<image class="login-image" :src="loginImg" mode="aspectFit"></image>
|
||||
<view class="login-tips">小程序需要登录注册才能使用相关功能，请登录后查看该页面</view>
|
||||
<view class="login-btn" :style="{ background: themeColor }" @click="toLogin()">前往登录</view>
|
||||
</view>
|
||||
<!-- 底部导航 -->
|
||||
<tab-bar></tab-bar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
import demandItem from "@/pages/component/demand/index.vue"
|
||||
import svgData from "@/common/svg.js"
|
||||
// #ifdef H5
|
||||
import wx from 'weixin-js-sdk';
|
||||
// #endif
|
||||
export default {
|
||||
components: {
|
||||
demandItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 加载完成
|
||||
loadEnd: false,
|
||||
// 标题栏高度
|
||||
titleBarHeight: 0,
|
||||
// 分类查询参数
|
||||
page: 1,
|
||||
limit: 20,
|
||||
hasMore: false,
|
||||
// 供需筛选
|
||||
demandScreen: [],
|
||||
// 已选筛选
|
||||
selectScreen: 0,
|
||||
// 供需列表
|
||||
demandList: [],
|
||||
// 分享数据
|
||||
shareData: {},
|
||||
// 是否显示登录提示
|
||||
showLogin: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
iconRelease: state => {
|
||||
return svgData.svgToUrl("release", state.app.themeColor)
|
||||
},
|
||||
shareImage: state => state.app.shareImage,
|
||||
shareTitle: state => state.app.shareTitle,
|
||||
loginImg: state => state.app.loginImg,
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
// #ifdef MP-WEIXIN
|
||||
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight
|
||||
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||||
this.titleBarHeight = statusBarHeight + (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
|
||||
// #endif
|
||||
},
|
||||
onLoad() {
|
||||
uni.showLoading({
|
||||
title: "加载中"
|
||||
})
|
||||
this.getDemandScreen()
|
||||
this.getDemandList(() => {
|
||||
uni.hideLoading()
|
||||
this.loadEnd = true
|
||||
})
|
||||
// #ifdef H5
|
||||
this.initConfig()
|
||||
// #endif
|
||||
},
|
||||
onShow() {
|
||||
if (this.loadEnd) {
|
||||
this.page = 1
|
||||
this.getDemandList()
|
||||
}
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.page = 1
|
||||
this.getDemandList(() => {
|
||||
uni.stopPullDownRefresh();
|
||||
})
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.hasMore) {
|
||||
this.page++
|
||||
this.getDemandList();
|
||||
}
|
||||
},
|
||||
onShareAppMessage(res) {
|
||||
if (res.from == "button") {
|
||||
return {
|
||||
title: this.shareData.title,
|
||||
path: this.shareData.path,
|
||||
imageUrl: this.shareData.imageUrl || this.shareImage,
|
||||
}
|
||||
} else if (res.from == "menu") {
|
||||
return {
|
||||
title: this.shareTitle,
|
||||
imageUrl: this.shareImage,
|
||||
}
|
||||
}
|
||||
},
|
||||
onShareTimeline() {
|
||||
return {
|
||||
title: this.shareTitle,
|
||||
imageUrl: this.shareImage,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// #ifdef H5
|
||||
// 微信公众号初始化方法
|
||||
initConfig() {
|
||||
this.$util.request("main.WeChatConfig", {
|
||||
url: location.href.split('#')[0]
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
wx.config({
|
||||
debug: false,
|
||||
appId: res.data.appId,
|
||||
timestamp: Number(res.data.timestamp),
|
||||
nonceStr: res.data.nonceStr,
|
||||
signature: res.data.signature,
|
||||
jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
|
||||
openTagList: ["updateAppMessageShareData", "updateTimelineShareData"],
|
||||
})
|
||||
wx.ready(() => {
|
||||
wx.updateAppMessageShareData({
|
||||
title: this.shareTitle,
|
||||
desc: "",
|
||||
link: window.location.href,
|
||||
imgUrl: this.shareImage,
|
||||
});
|
||||
wx.updateTimelineShareData({
|
||||
title: this.shareTitle,
|
||||
link: window.location.href,
|
||||
imgUrl: this.shareImage,
|
||||
});
|
||||
});
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('通过config接口注入权限验证配置 ', error)
|
||||
})
|
||||
},
|
||||
// #endif
|
||||
// 获取商圈分类
|
||||
getDemandScreen() {
|
||||
this.$util.request("demand.businessCat").then(res => {
|
||||
if (res.code == 1) {
|
||||
this.demandScreen = res.data;
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取商圈分类', error)
|
||||
})
|
||||
},
|
||||
// 获取供需列表
|
||||
getDemandList(fn) {
|
||||
this.$util.request("demand.businessIndexList", {
|
||||
category_id: this.selectScreen,
|
||||
page: this.page,
|
||||
limit: this.limit
|
||||
}).then(res => {
|
||||
if (fn) fn()
|
||||
if (res.code == 1) {
|
||||
let list = res.data.data || []
|
||||
list.forEach((el) => {
|
||||
el.images = this.splitImages(el.images)
|
||||
if (el.createtime) el.time = this.$util.getDateBeforeNow(el.createtime)
|
||||
});
|
||||
this.hasMore = this.page < res.data.total / this.limit ? true : false
|
||||
this.demandList = this.page == 1 ? list : [...this.demandList, ...list];
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
if (error == 401) {
|
||||
this.showLogin = true
|
||||
} else {
|
||||
if (fn) fn()
|
||||
console.error('获取供需列表', error)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 字符串转数组格式图片
|
||||
splitImages(images) {
|
||||
try {
|
||||
if (images) return images.split(',');
|
||||
else return []
|
||||
} catch (error) {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// 发布供需
|
||||
toPublish() {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pagesDemand/demand/edit"
|
||||
})
|
||||
},
|
||||
// 顶部导航筛选
|
||||
screenChange(id) {
|
||||
if (this.selectScreen == id) {
|
||||
return
|
||||
}
|
||||
this.selectScreen = id
|
||||
this.page = 1
|
||||
this.getDemandList()
|
||||
},
|
||||
// 去搜索
|
||||
toSearch() {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pages/demand/search/index"
|
||||
})
|
||||
},
|
||||
// 前往登录
|
||||
toLogin() {
|
||||
uni.redirectTo({
|
||||
url: "/pages/demand/index",
|
||||
})
|
||||
},
|
||||
// 设置分享数据
|
||||
setShareData(data) {
|
||||
this.shareData = data
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
.container-main {
|
||||
.main-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
background: #fff;
|
||||
|
||||
.header-search {
|
||||
padding: 16rpx 32rpx;
|
||||
|
||||
.search-input {
|
||||
padding: 20rpx 32rpx;
|
||||
border-radius: 10rpx;
|
||||
background: #F9F9F9;
|
||||
|
||||
.icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-left: 16rpx;
|
||||
font-size: 32rpx;
|
||||
color: #BBB;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
margin-left: 32rpx;
|
||||
|
||||
.icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background-size: 40rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-left: 8rpx;
|
||||
color: var(--theme-color);
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-screen {
|
||||
white-space: nowrap;
|
||||
|
||||
.screen-item {
|
||||
display: inline-block;
|
||||
padding: 0 24rpx;
|
||||
min-width: 152rpx;
|
||||
text-align: center;
|
||||
|
||||
.item-text {
|
||||
color: #333333;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
display: inline-block;
|
||||
padding: 36rpx 0 32rpx;
|
||||
border-bottom: 4rpx solid transparent;
|
||||
}
|
||||
|
||||
&.active .item-text {
|
||||
color: var(--theme-color);
|
||||
font-weight: 600;
|
||||
border-color: var(--theme-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.container-login {
|
||||
padding: 96rpx 60rpx 0;
|
||||
|
||||
.login-image {
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
}
|
||||
|
||||
.login-tips {
|
||||
color: #585858;
|
||||
font-size: 36rpx;
|
||||
line-height: 50rpx;
|
||||
margin-top: 48rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
margin-top: 56rpx;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
font-size: 28rpx;
|
||||
border-radius: 16rpx;
|
||||
text-align: center;
|
||||
background: var(--theme-color);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
220
uniapp/小程序代码/pages/demand/search/index.vue
Normal file
220
uniapp/小程序代码/pages/demand/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('demandHistory')
|
||||
},
|
||||
mounted() {
|
||||
// #ifdef MP-WEIXIN
|
||||
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight
|
||||
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||||
this.titleBarHeight = statusBarHeight + (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
// 返回
|
||||
toBack() {
|
||||
if (getCurrentPages().length == 1) {
|
||||
this.$util.toPage({
|
||||
mode: 3,
|
||||
path: "/pages/demand/index"
|
||||
})
|
||||
} else {
|
||||
uni.navigateBack()
|
||||
}
|
||||
},
|
||||
// 删除历史记录
|
||||
clearRecords() {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "是否删除全部历史记录？",
|
||||
confirmText: "删除",
|
||||
confirmColor: this.themeColor,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.removeStorageSync('demandHistory')
|
||||
this.recordList = []
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交搜索
|
||||
confirmSearch(e) {
|
||||
this.doSearch(e.detail.value)
|
||||
},
|
||||
// 搜索
|
||||
doSearch(keyword) {
|
||||
if (!keyword) {
|
||||
uni.showToast({
|
||||
title: '请输入要搜索的内容',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
var demandHistory = uni.getStorageSync('demandHistory') || []
|
||||
if (!demandHistory.includes(keyword)) {
|
||||
demandHistory.push(keyword)
|
||||
uni.setStorageSync('demandHistory', demandHistory)
|
||||
}
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: `/pages/demand/search/result?keyword=${encodeURIComponent(keyword)}`
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
.container-main {
|
||||
.main-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
padding: 20rpx 32rpx;
|
||||
background: #fff;
|
||||
|
||||
.header-search {
|
||||
padding: 20rpx 32rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #F6F7FB;
|
||||
|
||||
.icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.input {
|
||||
margin-left: 16rpx;
|
||||
color: #333;
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: #A0A2B3;
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
color: var(--theme-color);
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.main-history {
|
||||
background: #fff;
|
||||
padding: 32rpx;
|
||||
|
||||
.history-title {
|
||||
.name {
|
||||
color: #333;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.clear {
|
||||
image {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
margin-left: 8rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.history-cont {
|
||||
margin-top: 16rpx;
|
||||
margin-left: -16rpx;
|
||||
|
||||
.item {
|
||||
margin-top: 16rpx;
|
||||
margin-left: 16rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
color: #999999;
|
||||
padding: 8rpx 16rpx;
|
||||
background: rgba(6, 50, 119, 0.05);
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
239
uniapp/小程序代码/pages/demand/search/result.vue
Normal file
239
uniapp/小程序代码/pages/demand/search/result.vue
Normal file
@@ -0,0 +1,239 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 供需搜索结果 开发者: 麦沃德科技-暴雨
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 标题栏 -->
|
||||
<title-bar :showBack="true" title="搜索结果"></title-bar>
|
||||
<!-- 供需列表 -->
|
||||
<view class="container-main" v-if="loadEnd">
|
||||
<demand-item :show-data="demandList" @setShareData="setShareData" v-if="demandList.length"></demand-item>
|
||||
<empty top="30%" title="暂无相关内容~" v-else></empty>
|
||||
</view>
|
||||
<!-- 未登录状态 -->
|
||||
<view class="container-login" v-else-if="showLogin">
|
||||
<image class="login-image" :src="loginImg" mode="aspectFit"></image>
|
||||
<view class="login-tips">小程序需要登录注册才能使用相关功能，请登录后查看该页面</view>
|
||||
<view class="login-btn" :style="{ background: themeColor }" @click="toLogin()">前往登录</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
import demandItem from "@/pages/component/demand/index.vue"
|
||||
// #ifdef H5
|
||||
import wx from 'weixin-js-sdk';
|
||||
// #endif
|
||||
export default {
|
||||
components: {
|
||||
demandItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 加载完成
|
||||
loadEnd: false,
|
||||
// 搜索关键词
|
||||
keywords: '',
|
||||
// 分页参数
|
||||
page: 1,
|
||||
limit: 20,
|
||||
hasMore: false,
|
||||
// 供需列表
|
||||
demandList: [],
|
||||
// 分享数据
|
||||
shareData: {},
|
||||
// 是否显示登录提示
|
||||
showLogin: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
shareImage: state => state.app.shareImage,
|
||||
shareTitle: state => state.app.shareTitle,
|
||||
loginImg: state => state.app.loginImg,
|
||||
})
|
||||
},
|
||||
onLoad(option) {
|
||||
uni.showLoading({
|
||||
title: "加载中"
|
||||
})
|
||||
this.keywords = decodeURIComponent(option.keyword)
|
||||
this.getDemandList(() => {
|
||||
uni.hideLoading()
|
||||
this.loadEnd = true
|
||||
})
|
||||
// #ifdef H5
|
||||
this.initConfig()
|
||||
// #endif
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.hasMore) {
|
||||
this.page++
|
||||
this.getDemandList();
|
||||
}
|
||||
},
|
||||
onShareAppMessage(res) {
|
||||
if (res.from == "button") {
|
||||
return {
|
||||
title: this.shareData.title,
|
||||
path: this.shareData.path,
|
||||
imageUrl: this.shareData.imageUrl || this.shareImage,
|
||||
}
|
||||
} else if (res.from == "menu") {
|
||||
return {
|
||||
title: this.shareTitle,
|
||||
imageUrl: this.shareImage,
|
||||
path: "/pages/demand/index"
|
||||
}
|
||||
}
|
||||
},
|
||||
onShareTimeline() {
|
||||
return {
|
||||
title: this.shareTitle,
|
||||
imageUrl: this.shareImage,
|
||||
path: "/pages/demand/index"
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// #ifdef H5
|
||||
// 微信公众号初始化方法
|
||||
initConfig() {
|
||||
this.$util.request("main.WeChatConfig", {
|
||||
url: location.href.split('#')[0]
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
wx.config({
|
||||
debug: false,
|
||||
appId: res.data.appId,
|
||||
timestamp: Number(res.data.timestamp),
|
||||
nonceStr: res.data.nonceStr,
|
||||
signature: res.data.signature,
|
||||
jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
|
||||
openTagList: ["updateAppMessageShareData", "updateTimelineShareData"],
|
||||
})
|
||||
wx.ready(() => {
|
||||
wx.updateAppMessageShareData({
|
||||
title: this.shareTitle,
|
||||
desc: "",
|
||||
link: window.location.href,
|
||||
imgUrl: this.shareImage,
|
||||
});
|
||||
wx.updateTimelineShareData({
|
||||
title: this.shareTitle,
|
||||
link: window.location.href,
|
||||
imgUrl: this.shareImage,
|
||||
});
|
||||
});
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('通过config接口注入权限验证配置 ', error)
|
||||
})
|
||||
},
|
||||
// #endif
|
||||
// 获取供需列表
|
||||
getDemandList(fn) {
|
||||
this.$util.request("demand.businessIndexList", {
|
||||
title: this.keywords,
|
||||
page: this.page,
|
||||
limit: this.limit
|
||||
}).then(res => {
|
||||
if (fn) fn()
|
||||
if (res.code == 1) {
|
||||
let list = res.data.data || []
|
||||
list.forEach((el) => {
|
||||
el.images = this.splitImages(el.images)
|
||||
if (el.createtime) el.time = this.$util.getDateBeforeNow(el.createtime)
|
||||
});
|
||||
this.hasMore = this.page < res.data.total / this.limit ? true : false
|
||||
this.demandList = this.page == 1 ? list : [...this.demandList, ...list];
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
if (error == 401) {
|
||||
this.showLogin = true
|
||||
} else {
|
||||
if (fn) fn()
|
||||
console.error('获取供需列表', error)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 字符串转数组格式图片
|
||||
splitImages(images) {
|
||||
try {
|
||||
if (images) return images.split(',');
|
||||
else return []
|
||||
} catch (error) {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// 前往登录
|
||||
toLogin() {
|
||||
uni.redirectTo({
|
||||
url: `/pages/demand/search/result?keyword=${encodeURIComponent(this.keywords)}`,
|
||||
})
|
||||
},
|
||||
// 设置分享数据
|
||||
setShareData(data) {
|
||||
this.shareData = data
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
.container-main {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.container-login {
|
||||
padding: 96rpx 60rpx 0;
|
||||
|
||||
.login-image {
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
}
|
||||
|
||||
.login-tips {
|
||||
color: #585858;
|
||||
font-size: 36rpx;
|
||||
line-height: 50rpx;
|
||||
margin-top: 48rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
margin-top: 56rpx;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
font-size: 28rpx;
|
||||
border-radius: 16rpx;
|
||||
text-align: center;
|
||||
background: var(--theme-color);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
250
uniapp/小程序代码/pages/diy/index.vue
Normal file
250
uniapp/小程序代码/pages/diy/index.vue
Normal file
@@ -0,0 +1,250 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 首页 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view v-if="loadEnd">
|
||||
<view class="container" :style="{backgroundColor: diyData.page.style.backgroundColor || ''}" v-if="diyData && diyData.page && diyData.page.style">
|
||||
<title-bar class="container-header" :frontColor="diyData.page.style.titleTextColor" :backgroundColor="diyData.page.style.titleBackgroundColor || ''" :title="diyData.page.params.title || ''"></title-bar>
|
||||
<image class="container-background" :src="getImagePath(diyData.page.style.backgroundImage)" mode="aspectFill" v-if="diyData.page.style.backgroundImage"></image>
|
||||
<view class="container-main">
|
||||
<diy-mode ref="diyMode" :show-data="diyData" :spaceHeight="spaceHeight" @setShareData="setShareData"></diy-mode>
|
||||
</view>
|
||||
<view class="container-footer safe-padding">
|
||||
<tab-bar></tab-bar>
|
||||
</view>
|
||||
</view>
|
||||
<view class="container" v-else>
|
||||
<view class="container-header">
|
||||
<title-bar></title-bar>
|
||||
</view>
|
||||
<view class="container-error">未配置首页样式，请于后台进行首页装修</view>
|
||||
<view class="container-footer safe-padding">
|
||||
<tab-bar></tab-bar>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
import diyMode from '@/pages/component/diy/index.vue';
|
||||
// #ifdef H5
|
||||
import wx from 'weixin-js-sdk';
|
||||
// #endif
|
||||
export default {
|
||||
components: {
|
||||
diyMode,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 加载完成
|
||||
loadEnd: false,
|
||||
// 页面ID
|
||||
pageId: null,
|
||||
// 自定义数据
|
||||
diyData: null,
|
||||
// 分享数据
|
||||
shareData: {},
|
||||
// 头部与底部高度（仅会员地图占满屏幕时使用）
|
||||
spaceHeight: 0,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
shareImage: state => state.app.shareImage,
|
||||
shareTitle: state => state.app.shareTitle,
|
||||
})
|
||||
},
|
||||
onLoad(option) {
|
||||
this.pageId = option.page_id;
|
||||
// #ifdef H5
|
||||
this.initConfig()
|
||||
// #endif
|
||||
uni.showLoading({
|
||||
title: "加载中"
|
||||
})
|
||||
this.getDiyData(() => {
|
||||
uni.hideLoading()
|
||||
this.loadEnd = true
|
||||
});
|
||||
},
|
||||
onShow() {
|
||||
if (this.loadEnd) this.getDiyData()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.getDiyData(() => {
|
||||
uni.stopPullDownRefresh();
|
||||
});
|
||||
},
|
||||
onShareAppMessage(res) {
|
||||
if (res.from == "button") {
|
||||
return {
|
||||
title: this.shareData.title,
|
||||
path: this.shareData.path,
|
||||
imageUrl: this.shareData.imageUrl || this.shareImage,
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
title: this.shareTitle,
|
||||
imageUrl: this.shareImage,
|
||||
}
|
||||
}
|
||||
},
|
||||
onShareTimeline() {
|
||||
return {
|
||||
title: this.shareTitle,
|
||||
imageUrl: this.shareImage,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// #ifdef H5
|
||||
// 微信公众号初始化方法
|
||||
initConfig() {
|
||||
this.$util.request("main.WeChatConfig", {
|
||||
url: location.href.split('#')[0]
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
wx.config({
|
||||
debug: false,
|
||||
appId: res.data.appId,
|
||||
timestamp: Number(res.data.timestamp),
|
||||
nonceStr: res.data.nonceStr,
|
||||
signature: res.data.signature,
|
||||
jsApiList: ["updateAppMessageShareData", "updateTimelineShareData", "wx-open-launch-weapp"],
|
||||
openTagList: ["updateAppMessageShareData", "updateTimelineShareData", 'wx-open-launch-weapp'],
|
||||
})
|
||||
wx.ready(() => {
|
||||
wx.updateAppMessageShareData({
|
||||
title: this.shareTitle,
|
||||
desc: "",
|
||||
link: window.location.href,
|
||||
imgUrl: this.shareImage,
|
||||
});
|
||||
wx.updateTimelineShareData({
|
||||
title: this.shareTitle,
|
||||
link: window.location.href,
|
||||
imgUrl: this.shareImage,
|
||||
});
|
||||
});
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('通过config接口注入权限验证配置 ', error)
|
||||
})
|
||||
},
|
||||
// #endif
|
||||
// 获取自定义数据
|
||||
getDiyData(fn) {
|
||||
this.$util.request("main.diyData", {
|
||||
page_id: this.pageId
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
this.diyData = res.data
|
||||
if (res.data && res.data.page) {
|
||||
let page = res.data.page
|
||||
// #ifdef MP-WEIXIN
|
||||
// 设置navbar标题、颜色
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: page.style.titleTextColor === 'white' ? '#ffffff' : '#000000',
|
||||
backgroundColor: page.style.titleBackgroundColor || ''
|
||||
})
|
||||
// #endif
|
||||
uni.setNavigationBarTitle({
|
||||
title: page.params.title || ""
|
||||
})
|
||||
}
|
||||
if (this.loadEnd) {
|
||||
this.$refs.diyMode.updateData()
|
||||
}
|
||||
if (fn) fn()
|
||||
if (res.data?.items?.length) {
|
||||
const hasMemberMap = res.data.items.some(item => item.type == "memberMapDiy");
|
||||
if (hasMemberMap) {
|
||||
setTimeout(() => {
|
||||
try {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
let headerHeight, footerHeight;
|
||||
query.select('.container-header').boundingClientRect(data => {
|
||||
headerHeight = data?.height || 0;
|
||||
}).select('.container-footer').boundingClientRect(data => {
|
||||
footerHeight = data?.height || 0;
|
||||
}).exec(() => {
|
||||
this.spaceHeight = Number(Number(headerHeight) + Number(footerHeight))
|
||||
});
|
||||
} catch (error) {
|
||||
this.spaceHeight = 0
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (fn) fn()
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
if (fn) fn()
|
||||
console.error('获取自定义数据 ', error)
|
||||
})
|
||||
},
|
||||
// 获取图片地址
|
||||
getImagePath(url) {
|
||||
if (url.indexOf('http') > -1) {
|
||||
return url
|
||||
} else {
|
||||
return this.diyData.domain + url
|
||||
}
|
||||
},
|
||||
// 设置分享数据
|
||||
setShareData(data) {
|
||||
this.shareData = data
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
min-height: 100vh;
|
||||
|
||||
.container-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.container-error {
|
||||
padding: 64rpx 32rpx;
|
||||
font-size: 32rpx;
|
||||
line-height: 48rpx;
|
||||
color: #5A5B6E;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
125
uniapp/小程序代码/pages/diy/richText.vue
Normal file
125
uniapp/小程序代码/pages/diy/richText.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.maiwd.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 富文本 开发者: 麦沃德科技半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 标题栏 -->
|
||||
<title-bar :title="navigationBarTitle"></title-bar>
|
||||
<!-- 内容区 -->
|
||||
<view class="container-main" v-if="loadEnd">
|
||||
<mp-html :content="editorContent" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
// #ifdef H5
|
||||
import wx from 'weixin-js-sdk';
|
||||
// #endif
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 页面标题
|
||||
navigationBarTitle: "详情",
|
||||
// 加载完成
|
||||
loadEnd: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
shareInfo: state => state.app.shareInfo,
|
||||
editorContent: state => state.app.editorContent,
|
||||
})
|
||||
},
|
||||
onLoad(option) {
|
||||
this.navigationBarTitle = option.name ? decodeURIComponent(option.name) : "详情"
|
||||
this.$nextTick(() => {
|
||||
this.loadEnd = true
|
||||
})
|
||||
// #ifdef H5
|
||||
this.initConfig()
|
||||
// #endif
|
||||
},
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: this.shareInfo.title,
|
||||
imageUrl: this.shareInfo.image,
|
||||
}
|
||||
},
|
||||
onShareTimeline() {
|
||||
return {
|
||||
title: this.shareInfo.title,
|
||||
imageUrl: this.shareInfo.image,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// #ifdef H5
|
||||
// 微信公众号初始化方法
|
||||
initConfig() {
|
||||
this.$util.request("main.WeChatConfig", {
|
||||
url: location.href.split('#')[0]
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
wx.config({
|
||||
debug: false,
|
||||
appId: res.data.appId,
|
||||
timestamp: Number(res.data.timestamp),
|
||||
nonceStr: res.data.nonceStr,
|
||||
signature: res.data.signature,
|
||||
jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
|
||||
openTagList: ["updateAppMessageShareData", "updateTimelineShareData"],
|
||||
})
|
||||
wx.ready(() => {
|
||||
wx.updateAppMessageShareData({
|
||||
title: this.shareTitle,
|
||||
desc: "",
|
||||
link: window.location.href,
|
||||
imgUrl: this.shareImage,
|
||||
});
|
||||
wx.updateTimelineShareData({
|
||||
title: this.shareTitle,
|
||||
link: window.location.href,
|
||||
imgUrl: this.shareImage,
|
||||
});
|
||||
});
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('通过config接口注入权限验证配置 ', error)
|
||||
})
|
||||
},
|
||||
// #endif
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.container {
|
||||
.container-main {
|
||||
padding: 32rpx;
|
||||
font-size: 32rpx;
|
||||
line-height: 60rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
331
uniapp/小程序代码/pages/diy/search.vue
Normal file
331
uniapp/小程序代码/pages/diy/search.vue
Normal file
@@ -0,0 +1,331 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 搜索结果 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="container" :style="{'--theme-color': themeColor}">
|
||||
<!-- 标题栏 -->
|
||||
<title-bar :showBack="true" title="搜索结果"></title-bar>
|
||||
<!-- 内容区 -->
|
||||
<view class="container-main" v-if="loadEnd">
|
||||
<view class="main-column" v-if="memberList.length">
|
||||
<view class="column-title">会员列表</view>
|
||||
<member-item :show-data="memberList"></member-item>
|
||||
<view class="column-more" v-if="parseInt(memberTotal) > parseInt(firstLimit) && memberList.length < parseInt(memberTotal)" @click="memberLoadMore()">
|
||||
<view class="more-bg"></view>
|
||||
<view class="more-text">加载更多</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="main-column" v-if="unitsList.length">
|
||||
<view class="column-title">会员单位列表</view>
|
||||
<member-units :show-data="unitsList"></member-units>
|
||||
<view class="column-more" v-if="parseInt(unitsTotal) > parseInt(firstLimit) && unitsList.length < parseInt(unitsTotal)" @click="unitsLoadMore()">
|
||||
<view class="more-bg"></view>
|
||||
<view class="more-text">加载更多</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="main-column" v-if="activityList.length">
|
||||
<view class="column-title">活动列表</view>
|
||||
<activity-item :show-data="activityList"></activity-item>
|
||||
<view class="column-more" v-if="parseInt(activityTotal) > parseInt(firstLimit) && activityList.length < parseInt(activityTotal)" @click="activityLoadMore()">
|
||||
<view class="more-bg"></view>
|
||||
<view class="more-text">加载更多</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="main-column" v-if="articleList.length">
|
||||
<view class="column-title">资讯列表</view>
|
||||
<article-item :show-data="articleList"></article-item>
|
||||
<view class="column-more" v-if="parseInt(articleTotal) > parseInt(firstLimit) && articleList.length < parseInt(articleTotal)" @click="articleLoadMore()">
|
||||
<view class="more-bg"></view>
|
||||
<view class="more-text">加载更多</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="main-column" v-if="goodsList.length">
|
||||
<view class="column-title">商品列表</view>
|
||||
<goods-item :show-data="goodsList"></goods-item>
|
||||
<view class="column-more" v-if="parseInt(goodsTotal) > parseInt(firstLimit) && goodsList.length < parseInt(goodsTotal)" @click="goodsLoadMore()">
|
||||
<view class="more-bg"></view>
|
||||
<view class="more-text">加载更多</view>
|
||||
</view>
|
||||
</view>
|
||||
<empty top="30%" title="暂无相关内容~" v-if="!memberList.length && !unitsList.length && !activityList.length && !articleList.length && !goodsList.length"></empty>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
import memberItem from "@/pages/component/member/index.vue"
|
||||
import memberUnits from "@/pages/component/member/units.vue"
|
||||
import activityItem from "@/pages/component/activity/index.vue"
|
||||
import articleItem from "@/pages/component/article/index.vue"
|
||||
import goodsItem from '@/pages/component/mall/goods.vue'
|
||||
export default {
|
||||
components: {
|
||||
memberItem,
|
||||
memberUnits,
|
||||
activityItem,
|
||||
articleItem,
|
||||
goodsItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 加载完成
|
||||
loadEnd: false,
|
||||
// 搜索关键词
|
||||
keyword: "",
|
||||
// 首次搜索数量限制
|
||||
firstLimit: 5,
|
||||
// 会员查询参数
|
||||
memberList: [],
|
||||
memberPage: 0,
|
||||
memberLimit: 50,
|
||||
memberTotal: 0,
|
||||
// 会员单位查询参数
|
||||
unitsList: [],
|
||||
unitsPage: 0,
|
||||
unitsLimit: 50,
|
||||
unitsTotal: 0,
|
||||
// 活动查询参数
|
||||
activityList: [],
|
||||
activityPage: 0,
|
||||
activityLimit: 50,
|
||||
activityTotal: 0,
|
||||
// 新闻查询参数
|
||||
articleList: [],
|
||||
articlePage: 0,
|
||||
articleLimit: 50,
|
||||
articleTotal: 0,
|
||||
// 商品查询参数
|
||||
goodsList: [],
|
||||
goodsPage: 0,
|
||||
goodsLimit: 50,
|
||||
goodsTotal: 0,
|
||||
// 是否授权位置信息
|
||||
isLocation: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
memberTypeConfig: state => state.app.memberTypeConfig,
|
||||
})
|
||||
},
|
||||
onLoad(option) {
|
||||
this.keyword = decodeURIComponent(option.keyword)
|
||||
uni.showLoading({
|
||||
title: "加载中"
|
||||
})
|
||||
this.getSearchData(() => {
|
||||
uni.hideLoading()
|
||||
this.loadEnd = true
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 获取搜索数据
|
||||
getSearchData(fn) {
|
||||
this.$util.request("main.diySearch", {
|
||||
keywords: this.keyword,
|
||||
limit: this.firstLimit,
|
||||
}).then(res => {
|
||||
if (fn) fn()
|
||||
if (res.code == 1) {
|
||||
this.memberList = res.data?.member_data?.data || []
|
||||
this.memberTotal = res.data?.member_data?.total || 0
|
||||
this.unitsList = res.data?.unit_data?.data || []
|
||||
this.unitsTotal = res.data?.unit_data?.total || 0
|
||||
this.activityList = res.data?.activity_data?.data || []
|
||||
this.activityTotal = res.data?.activity_data?.total || 0
|
||||
this.articleList = res.data?.article_data?.data || []
|
||||
this.articleTotal = res.data?.article_data?.total || 0
|
||||
this.goodsList = res.data?.goods_data?.data || []
|
||||
this.goodsTotal = res.data?.goods_data?.total || 0
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取自定义搜索数据 ', error)
|
||||
})
|
||||
},
|
||||
// 会员加载更多数据
|
||||
memberLoadMore() {
|
||||
if (this.memberList.length >= parseInt(this.memberTotal)) return
|
||||
this.memberPage++
|
||||
this.$util.request("member.diySearchList", {
|
||||
page: this.memberPage,
|
||||
limit: this.memberLimit,
|
||||
keywords: this.keyword,
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
let list = res.data.data
|
||||
this.memberTotal = res.data.total
|
||||
this.memberList = this.memberPage == 1 ? list : [...this.memberList, ...list];
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取自定义搜索会员列表 ', error)
|
||||
})
|
||||
},
|
||||
// 会员单位加载更多数据
|
||||
unitsLoadMore() {
|
||||
if (this.unitsList.length >= parseInt(this.unitsTotal)) return
|
||||
this.unitsPage++
|
||||
this.$util.request("member.units", {
|
||||
page: this.unitsPage,
|
||||
limit: this.unitsLimit,
|
||||
keywords: this.keyword,
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
let list = res.data.data
|
||||
this.unitsTotal = res.data.total
|
||||
this.unitsList = this.unitsPage == 1 ? list : [...this.unitsList, ...list];
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取自定义搜索会员单位列表 ', error)
|
||||
})
|
||||
},
|
||||
// 活动加载更多数据
|
||||
activityLoadMore() {
|
||||
if (this.activityList.length >= parseInt(this.activityTotal)) return
|
||||
this.activityPage++
|
||||
this.$util.request("activity.list", {
|
||||
page: this.activityPage,
|
||||
limit: this.activityLimit,
|
||||
keywords: this.keyword,
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
let list = res.data.data
|
||||
this.activityTotal = res.data.total
|
||||
this.activityList = this.activityPage == 1 ? list : [...this.activityList, ...list];
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取自定义搜索活动列表 ', error)
|
||||
})
|
||||
},
|
||||
// 资讯加载更多数据
|
||||
articleLoadMore() {
|
||||
if (this.articleList.length >= parseInt(this.articleTotal)) return
|
||||
this.articlePage++
|
||||
this.$util.request("main.article.list", {
|
||||
page: this.articlePage,
|
||||
limit: this.articleLimit,
|
||||
keywords: this.keyword,
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
let list = res.data.data
|
||||
this.articleTotal = res.data.total
|
||||
this.articleList = this.articlePage == 1 ? list : [...this.articleList, ...list];
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取自定义搜索资讯列表 ', error)
|
||||
})
|
||||
},
|
||||
// 商品加载更多数据
|
||||
goodsLoadMore() {
|
||||
if (this.goodsList.length >= parseInt(this.goodsTotal)) return
|
||||
this.goodsPage++
|
||||
this.$util.request("mall.goodsList", {
|
||||
page: this.goodsPage,
|
||||
limit: this.goodsLimit,
|
||||
keywords: this.keyword,
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
let list = res.data.data
|
||||
this.goodsTotal = res.data.total
|
||||
this.goodsList = this.goodsPage == 1 ? list : [...this.goodsList, ...list];
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取自定义搜索商品列表 ', error)
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
.container-main {
|
||||
padding: 32rpx;
|
||||
|
||||
.main-column {
|
||||
margin-top: 32rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.column-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.column-more {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 72rpx;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
background: #FFF;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.more-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: var(--theme-color);
|
||||
opacity: .1;
|
||||
}
|
||||
|
||||
.more-text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
color: var(--theme-color);
|
||||
font-size: 12px;
|
||||
line-height: 72rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user