yangchunlong/orico-association
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

活动按钮状态流转

Browse Source
This commit is contained in:
yangchunlong
2026-03-25 15:53:37 +08:00
commit 37346e790f
2762 changed files with 240282 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

264
pages/component/picker/address.vue Normal file
View 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
View 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
View File

@@ -0,0 +1,166 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
+----------------------------------------------------------------------
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
+----------------------------------------------------------------------
| 组件-单项选择框 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->
<template>
<view class="component-picker-select" @click.stop>
<uni-popup ref="popupModal" type="bottom" :safe-area="false" @change="onChange">
<view class="modal-box" :style="{'--theme-color': themeColor}">
<view class="modal-head">
<view class="head-title text-ellipsis">{{title}}</view>
<view class="head-btn" @click="handleConfirm">确认</view>
</view>
<view class="modal-content flex align-items-center" v-if="loadEnd">
<picker-view class="content-picker" indicator-style="height: 50px;" :immediate-change="true" :value="selectValue" @change="handleChange">
<picker-view-column>
<view class="picker-column" v-for="(item, index) in selectList" :key="index">{{item.name || item}}</view>
</picker-view-column>
</picker-view>
</view>
<view class="modal-btn" @click="onClose">取消</view>
</view>
</uni-popup>
</view>
</template>
<script>
import { mapState } from "vuex"
export default {
name: "selectPicker",
props: ["title"],
data() {
return {
// 加载完成
loadEnd: false,
// 参数
parameter: null,
// 数据列表
selectList: [],
// 已选数据
selectValue: [0],
};
},
computed: {
...mapState({
themeColor: state => state.app.themeColor,
})
},
methods: {
// 打开模态框
open(list, value, parameter) {
this.selectList = list
this.parameter = parameter
if (value) {
for (var i = 0; i < list.length; i++) {
if (typeof(list[i]) == "object") {
if (list[i].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
View 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>