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

会员权益

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

221
pagesCard/component/card/index.vue Normal file
View File

@@ -0,0 +1,221 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
+----------------------------------------------------------------------
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
+----------------------------------------------------------------------
| 组件-名片列表 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->
<template>
<view class="component-card" :style="{'--theme-color': themeColor}">
<view class="card-item" v-for="item in showData" :key="item.id" @click="toDetails(item.id)">
<view class="item-image">
<card-item :show-data="item"></card-item>
<view class="image-btn" @click.stop="handleEdit(item.id)">
<image class="icon" src="/static/card/edit.png" mode="aspectFit"></image>
<text class="text">编辑名片</text>
</view>
</view>
<view class="item-bottom">
<view class="bottom-default" @click.stop="setDefaultCard(item.id, item.is_default)">
<view class="default-label">默认名片</view>
<view class="default-switch" :class="{'active': item.is_default == 1}">
<view class="switch-round"></view>
</view>
</view>
<button open-type="share" class="bottom-render" @click.stop="setShareData(item)">
<view class="render-icon">
<image src="/static/card/render.png" mode="aspectFit"></image>
</view>
<view class="render-text">递交名片</view>
</button>
</view>
</view>
</view>
</template>
<script>
import { mapState } from "vuex"
import cardItem from "./item.vue"
export default {
name: "componentCard",
props: ["showData"],
components: {
cardItem,
},
computed: {
...mapState({
themeColor: state => state.app.themeColor,
})
},
methods: {
// 前往详情
toDetails(id) {
this.$util.toPage({
mode: 1,
path: "/pagesCard/mine/details?id=" + id
})
},
// 前往编辑
handleEdit(id) {
this.$util.toPage({
mode: 1,
path: "/pagesCard/mine/edit?id=" + id
})
},
// 设置分享数据
setShareData(item) {
this.$emit('setShareData', {
id: item.id,
share_title: item.share_title,
image: item.image,
})
},
// 设置默认名片
setDefaultCard(id, status) {
if (status == 1) return
uni.showLoading({
mask: true,
title: "加载中",
})
this.$util.request("card.setDefault", {
id: id,
is_default: 1,
}).then(res => {
uni.hideLoading()
if (res.code == 1) {
this.$emit('getList', () => { uni.hideLoading() })
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
uni.hideLoading()
console.error('设置默认名片 ', error)
})
},
},
}
</script>
<style lang="scss">
.component-card {
.card-item {
background: #FFF;
margin-top: 32rpx;
&:first-child {
margin-top: 0;
}
.item-image {
position: relative;
border-radius: 16rpx;
overflow: hidden;
.image-btn {
position: absolute;
right: 0;
bottom: 0;
display: flex;
align-items: center;
padding: 14rpx 16rpx;
border-radius: 16rpx 0;
background: var(--theme-color);
.icon {
width: 32rpx;
height: 32rpx;
}
.text {
margin-left: 8rpx;
color: #FFF;
font-size: 24rpx;
line-height: 34rpx;
}
}
}
.item-bottom {
padding: 20rpx 32rpx;
display: flex;
justify-content: space-between;
align-items: center;
.bottom-default {
display: flex;
align-items: center;
.default-label {
color: #5A5B6E;
font-size: 28rpx;
line-height: 40rpx;
margin-right: 16rpx;
}
.default-switch {
width: 80rpx;
height: 40rpx;
padding: 3rpx;
background: #D9D9D9;
border-radius: 20rpx;
transition: all .3s;
.switch-round {
width: 34rpx;
height: 34rpx;
border-radius: 50%;
background: #fff;
margin-left: 0;
transition: all .3s;
}
&.active {
background: var(--theme-color);
.switch-round {
margin-left: calc(100% - 34rpx);
}
}
}
}
.bottom-render {
display: flex;
align-items: center;
padding: 0;
margin: 0;
border: none;
background: transparent;
line-height: 1.3;
&::after {
display: none;
}
.render-icon {
width: 28rpx;
height: 28rpx;
border-radius: 8rpx;
overflow: hidden;
background: var(--theme-color);
}
.render-text {
margin-left: 8rpx;
color: #5A5B6E;
font-size: 28rpx;
line-height: 40rpx;
}
}
}
}
}
</style>

195
pagesCard/component/card/item.vue Normal file
View File

@@ -0,0 +1,195 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
+----------------------------------------------------------------------
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
+----------------------------------------------------------------------
| 组件-名片项目 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->
<template>
<view class="component-card-item" v-if="showData">
<image class="card-image" :src="showData.card_background_image" mode="aspectFill" v-if="showData.card_background_image"></image>
<image class="card-avatar" :src="showData.avatar" mode="aspectFill" v-if="showData.avatar && showData.is_hide_avatar != 1"></image>
<view class="card-name">
<view class="name" :style="{color: showData.font_color}" v-if="showData.name">{{showData.name}}</view>
<view class="position" :style="{color: showData.font_color}" v-if="showData.company_position">{{showData.company_position}}</view>
</view>
<view class="card-company" :style="{color: showData.font_color}" v-if="showData.company_name">{{showData.company_name}}</view>
<view class="card-business" :style="{color: showData.font_color}" v-if="showData.main_business">
<text class="label" :style="{color: showData.font_color}" v-for="(item, index) in stringToArray(showData.main_business)" :key="index">{{item}}</text>
</view>
<view class="card-mobile" v-if="showData.mobile">
<image class="icon" src="/static/card/mobile_w.png" mode="aspectFit" v-if="showData.font_color == '#FFFFFF'"></image>
<image class="icon" src="/static/card/mobile.png" mode="aspectFit" v-else></image>
<text class="text" :style="{color: showData.font_color}">{{showData.mobile}}</text>
</view>
<view class="card-address" v-if="showData.company_address">
<image class="icon" src="/static/card/location_w.png" mode="aspectFit" v-if="showData.font_color == '#FFFFFF'"></image>
<image class="icon" src="/static/card/location.png" mode="aspectFit" v-else></image>
<text class="text" :style="{color: showData.font_color}">{{showData.company_address}}</text>
</view>
<view class="card-association">
<image class="logo" :src="showData.association.logo" mode="aspectFill"></image>
<text class="text" :style="{color: showData.font_color}">{{showData.association.name}}</text>
<text class="text" :style="{color: showData.font_color}">{{showData.member_level_name}}</text>
</view>
</view>
</template>
<script>
export default {
name: "componentCardItem",
props: ["showData"],
methods: {
// 字符串转数组
stringToArray(value) {
try {
if (value) return value.split(',');
else return []
} catch (error) {
return [];
}
},
}
}
</script>
<style lang="scss">
.component-card-item {
position: relative;
height: 400rpx;
.card-image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 16rpx;
}
.card-avatar {
width: 112rpx;
height: 112rpx;
border-radius: 16rpx;
position: absolute;
top: 32rpx;
right: 32rpx;
}
.card-name {
position: absolute;
top: 32rpx;
left: 32rpx;
display: flex;
align-items: flex-end;
.name {
color: #FFF;
font-size: 40rpx;
font-weight: 600;
line-height: 56rpx;
}
.position {
margin-left: 18rpx;
padding-bottom: 4rpx;
color: #FFF;
font-size: 24rpx;
line-height: 34rpx;
}
}
.card-company {
position: absolute;
top: 100rpx;
left: 32rpx;
color: #FFF;
font-size: 24rpx;
line-height: 34rpx;
}
.card-business {
position: absolute;
top: 158rpx;
left: 32rpx;
display: flex;
.label {
color: #FFF;
font-size: 24rpx;
line-height: 34rpx;
margin-left: 16rpx;
&:first-child {
margin-left: 0;
}
}
}
.card-mobile {
position: absolute;
top: 216rpx;
left: 32rpx;
display: flex;
align-items: center;
.icon {
width: 24rpx;
height: 24rpx;
}
.text {
margin-left: 16rpx;
color: #FFF;
font-size: 24rpx;
line-height: 34rpx;
}
}
.card-address {
position: absolute;
top: 262rpx;
left: 32rpx;
display: flex;
align-items: center;
.icon {
width: 24rpx;
height: 24rpx;
}
.text {
margin-left: 16rpx;
color: #FFF;
font-size: 24rpx;
line-height: 34rpx;
}
}
.card-association {
position: absolute;
bottom: 12rpx;
left: 32rpx;
display: flex;
align-items: center;
.logo {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
}
.text {
margin-left: 16rpx;
color: #FFF;
font-size: 24rpx;
line-height: 40rpx;
}
}
}
</style>

323
pagesCard/component/card/poster.vue Normal file
View File

@@ -0,0 +1,323 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| Copyright (c) 2017～2024 www.maiwd.cn All rights reserved.
+----------------------------------------------------------------------
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
+----------------------------------------------------------------------
| 组件-电子名片 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->
<template>
<view class="component-card-poster">
<canvas class="poster-canvas" :style="{width: posterWidth + 'px', height: posterHeight + 'px'}" canvas-id="myCanvas" id="myCanvas"></canvas>
</view>
</template>
<script>
import { mapState } from "vuex"
import { loadImage, createPoster, canvasToTempFilePath } from "@/common/poster.js";
export default {
name: "cardPoster",
data() {
return {
// 名片数据
showData: {},
// 电子名片宽度
posterWidth: 343,
// 电子名片高度
posterHeight: 276,
// 图片资源是否准备完成
posterReady: false,
// 电子名片背景图
posterBackground: "",
// 电子名片用户头像
posterAvatar: "",
// 电子名片商协会logo
posterLogo: "",
// 电话图标-白
mobileIcon1: "/static/card/mobile_w.png",
// 电话图标-黑
mobileIcon2: "/static/card/mobile.png",
// 地址图标-白
addressIcon1: "/static/card/location_w.png",
// 地址图标-黑
addressIcon2: "/static/card/location.png",
// 回调方法
posterCallback: null,
}
},
computed: {
...mapState({
themeColor: state => state.app.themeColor,
appletName: state => state.app.appletName,
appletLogo: state => state.app.appletLogo,
userInfo: state => state.user.userInfo,
})
},
methods: {
// 获取电子名片路径
getPosterPath(data, fn) {
this.showData = data
this.posterCallback = fn
this.showNucleus()
},
// 获取图片资源
async showNucleus() {
this.loadingResources().then((state) => {
if (state) {
this.posterReady = true
this.createImage()
}
});
},
// 加载图片资源
async loadingResources() {
if (this.showData.card_background_image) this.posterBackground = await loadImage(this.showData.card_background_image);
if (this.showData.avatar) this.posterAvatar = await loadImage(this.showData.avatar);
if (this.appletLogo) this.posterLogo = await loadImage(this.appletLogo);
return true;
},
// 生成电子名片
async createImage() {
if (!this.posterReady) {
uni.hideLoading()
uni.showToast({
title: '电子名片部分图片资源加载失败',
icon: 'none'
})
return
};
// 获取上下文对象
const ctx = uni.createCanvasContext("myCanvas", this);
// 获取姓名占用长度
ctx.font = "bold 20px sans-serif"
let nameWidth = parseFloat(ctx.measureText(this.showData.name).width);
// 设置按钮背景色
const x1 = 51.5;
const y1 = 216;
const width1 = 240;
const height1 = 48;
const radius1 = 24;
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(this.themeColor)
ctx.fill();
ctx.setStrokeStyle(this.themeColor)
ctx.stroke();
// 创建电子名片
let posterData = [{
type: "image",
url: this.posterBackground || "",
config: {
x: 0,
y: 0,
w: this.posterWidth,
h: 200,
r: 8,
},
},
{
type: "text",
text: "查看名片",
config: {
x: parseInt(this.posterWidth / 2),
y: 240,
color: "#FFF",
fontSize: "16",
textAlign: "center",
},
},
]
if (this.showData.avatar && this.showData.is_hide_avatar != 1) {
posterData.push({
type: "image",
url: this.posterAvatar || "",
config: {
x: 271,
y: 16,
w: 56,
h: 56,
r: 8,
},
})
}
if (this.showData.name) {
posterData.push({
type: "text",
text: this.showData.name || "",
config: {
x: 16,
y: 30,
color: this.showData.font_color,
font: `bold 20px sans-serif`,
textAlign: "left",
},
})
}
if (this.showData.company_position) {
posterData.push({
type: "text",
text: this.showData.company_position || "",
config: {
x: parseInt(nameWidth + 24),
y: 33,
color: this.showData.font_color,
fontSize: "12",
textAlign: "left",
},
})
}
if (this.showData.company_name) {
posterData.push({
type: "text",
text: this.showData.company_name || "",
config: {
x: 16,
y: 58,
color: this.showData.font_color,
fontSize: "12",
textAlign: "left",
},
})
}
if (this.showData.main_business) {
posterData.push({
type: "text",
text: this.getMainBusiness(this.showData.main_business) || "",
config: {
x: 16,
y: 88,
color: this.showData.font_color,
fontSize: "12",
textAlign: "left",
},
})
}
if (this.showData.mobile) {
posterData.push({
type: "image",
url: this.showData.font_color == "#FFFFFF" ? this.mobileIcon1 : this.mobileIcon2,
config: {
x: 16,
y: 110,
w: 12,
h: 12,
},
})
posterData.push({
type: "text",
text: this.showData.mobile || "",
config: {
x: 36,
y: 117,
color: this.showData.font_color,
fontSize: "12",
textAlign: "left",
},
})
}
if (this.showData.company_address) {
posterData.push({
type: "image",
url: this.showData.font_color == "#FFFFFF" ? this.addressIcon1 : this.addressIcon2,
config: {
x: 16,
y: 132,
w: 12,
h: 12,
},
})
posterData.push({
type: "text",
text: this.showData.company_address || "",
config: {
x: 36,
y: 140,
color: this.showData.font_color,
fontSize: "12",
textAlign: "left",
},
})
}
if (this.posterLogo) {
posterData.push({
type: "image",
url: this.posterLogo || "",
config: {
x: 16,
y: 174,
w: 20,
h: 20,
r: 10,
},
})
}
if (this.appletName) {
var showText = this.appletName
if (this.userInfo && this.userInfo.member_level_name) showText += ` ${this.userInfo.member_level_name}`
posterData.push({
type: "text",
text: showText || "",
config: {
x: 44,
y: 185,
color: this.showData.font_color,
fontSize: "12",
textAlign: "left",
},
})
}
await createPoster(ctx, posterData)
const imagePath = await canvasToTempFilePath("myCanvas", this);
this.$util.uploadFile(imagePath).then(result => {
if (result.code == 1) {
this.posterCallback(result.data.url)
} else {
uni.showToast({
title: result?.msg || "上传失败",
icon: 'none'
})
}
}).catch(error => {
uni.hideLoading()
console.error('上传图片 ', error)
})
},
// 获取主营业务
getMainBusiness(value) {
try {
if (value) return value.replaceAll(",", " ")
else return ""
} catch (error) {
return "";
}
},
},
}
</script>
<style lang="scss" scoped>
.component-card-poster {
position: relative;
z-index: 999;
.poster-canvas {
position: fixed;
top: 100vw;
left: 100vh;
z-index: -1;
}
}
</style>

166
pagesCard/component/picker/select.vue Normal file
View 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].value == 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>