会员权益
This commit is contained in:
537
pages/component/activity/apply.vue
Normal file
537
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
pages/component/activity/certificate.vue
Normal file
295
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
pages/component/activity/index.vue
Normal file
686
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
pages/component/activity/poster.vue
Normal file
508
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
pages/component/article/index.vue
Normal file
112
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
pages/component/carousel/carousel.vue
Normal file
183
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
pages/component/chains/index.vue
Normal file
161
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
pages/component/demand/index.vue
Normal file
481
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
pages/component/diy/activityDiy.vue
Normal file
227
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
pages/component/diy/albumDiy.vue
Normal file
299
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
pages/component/diy/articleDiy.vue
Normal file
231
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
pages/component/diy/blankDiy.vue
Normal file
30
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
pages/component/diy/carouselDiy.vue
Normal file
147
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
pages/component/diy/chainsDiy.vue
Normal file
299
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
pages/component/diy/cubeDiy.vue
Normal file
266
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
pages/component/diy/demandDiy.vue
Normal file
335
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
pages/component/diy/floatDiy.vue
Normal file
124
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
pages/component/diy/goodsDiy.vue
Normal file
165
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>
|
||||
96
pages/component/diy/imagesDiy.vue
Normal file
96
pages/component/diy/imagesDiy.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| 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>
|
||||
248
pages/component/diy/index.vue
Normal file
248
pages/component/diy/index.vue
Normal file
@@ -0,0 +1,248 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| 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) {
|
||||
console.log(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 {
|
||||
console.log('走到了这里')
|
||||
this.$util.openLink(e);
|
||||
}
|
||||
},
|
||||
// 设置分享数据
|
||||
setShareData(data) {
|
||||
this.$emit('setShareData', data)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
135
pages/component/diy/infoCardDiy.vue
Normal file
135
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
pages/component/diy/introduceDiy.vue
Normal file
90
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
pages/component/diy/lineDiy.vue
Normal file
45
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
pages/component/diy/mapDiy.vue
Normal file
56
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
pages/component/diy/memberDiy.vue
Normal file
218
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
pages/component/diy/memberMapDiy.vue
Normal file
695
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
pages/component/diy/menuDiy.vue
Normal file
124
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>
|
||||
140
pages/component/diy/navDiy.vue
Normal file
140
pages/component/diy/navDiy.vue
Normal file
@@ -0,0 +1,140 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| 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) {
|
||||
console.log(value,'==========value============')
|
||||
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
pages/component/diy/noticeDiy.vue
Normal file
386
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
pages/component/diy/richTextDiy.vue
Normal file
36
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
pages/component/diy/searchDiy.vue
Normal file
95
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
pages/component/diy/textButtonDiy.vue
Normal file
88
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
pages/component/diy/textDiy.vue
Normal file
40
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
pages/component/diy/timelineDiy.vue
Normal file
55
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
pages/component/diy/titleDiy.vue
Normal file
106
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
pages/component/diy/videoDiy.vue
Normal file
52
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
pages/component/diy/warnDiy.vue
Normal file
48
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
pages/component/empty/empty.vue
Normal file
92
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
pages/component/mall/goods.vue
Normal file
85
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
pages/component/member/apply.vue
Normal file
969
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
pages/component/member/custom.vue
Normal file
139
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
pages/component/member/index.vue
Normal file
105
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
pages/component/member/poster.vue
Normal file
322
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
pages/component/member/product.vue
Normal file
167
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
pages/component/member/scroll.vue
Normal file
103
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
pages/component/member/units.vue
Normal file
124
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
pages/component/menu/carousel.vue
Normal file
181
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
pages/component/menu/menu.vue
Normal file
160
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
pages/component/mine/admin.vue
Normal file
206
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
pages/component/mine/menu.vue
Normal file
143
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
pages/component/mine/order.vue
Normal file
136
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
pages/component/mine/user-info.vue
Normal file
1060
pages/component/mine/user-info.vue
Normal file
File diff suppressed because it is too large
Load Diff
180
pages/component/modal/confirm.vue
Normal file
180
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
pages/component/modal/level.vue
Normal file
204
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
pages/component/modal/region.vue
Normal file
328
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
pages/component/picker/address.vue
Normal file
264
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
pages/component/picker/date.vue
Normal file
192
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
pages/component/picker/select.vue
Normal file
166
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
pages/component/picker/time.vue
Normal file
148
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
pages/component/tab-bar/tab-bar.vue
Normal file
144
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
pages/component/title-bar/title-bar.vue
Normal file
176
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>
|
||||
Reference in New Issue
Block a user