xiangshan
/
yxxh5
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新

This commit is contained in:
lnn19986213 2022-09-01 15:25:25 +08:00
parent c72f9393b3
commit 41091d7e35
64 changed files with 8224 additions and 386 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/manifest.json
View File

@ -78,6 +78,21 @@
"router" : {
"mode" : "hash"
},
"title" : "艺象心"
"title" : "艺象心",
"devServer" : {
"disableHostCheck" : true, // 禁用 Host 检查，默认false
"proxy" : {
// 与vue中的proxyTable配置大致上一致,此处我同时代理了两个
"/pre" : {
// 预发布
"target" : "http://10.0.0.36:8080/h5/api", // 目标接口域名
"changeOrigin" : true, // 是否跨域
"secure" : false, // 设置支持https协议的代理
"pathRewrite" : {
"^/pre" : ""
} // 此处pathRewrite加第二个参数是因为我的接口最后都有一个/api,在这个地方加/api等价于直接在target后加/api
}
}
}
}
}

105
src/pages.json
View File

@ -83,7 +83,8 @@
"path": "pages/PolicyExpress/PolicyExpress",
"style": {
"navigationBarTitleText": "政策速通",
"enablePullDownRefresh": false
"enablePullDownRefresh": true,
"onReachBottomDistance": 20
}
}
@ -436,27 +437,8 @@
"navigationBarTitleText": "订单详情",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/ReceivingAddress/ReceivingAddress",
"style" :
{
"navigationBarTitleText": "收货地址",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/ReceivingAddress/EditAddresspge",
"style" :
{
"navigationBarTitleText": "修改地址",
"enablePullDownRefresh": false
}
}
,{
},
{
"path" : "pages/MyOrder/fictitiousDetail",
"style" :
{
@ -576,6 +558,85 @@
"style": {
"navigationBarTitleText": "消息"
}
},
{
"path": "addArtActivity/addArtActivity",
"style": {
"navigationBarTitleText": "发布活动"
}
},
{
"path" : "ReceivingAddress/ReceivingAddress",
"style" :
{
"navigationBarTitleText": "收货地址",
"enablePullDownRefresh": false
}
},
{
"path" : "ReceivingAddress/EditAddresspge",
"style" :
{
"navigationBarTitleText": "修改地址",
"enablePullDownRefresh": false
}
},
{
"path" : "activeManage/activeManage",
"style" :
{
"navigationBarTitleText": "活动管理",
"enablePullDownRefresh": true,
"onReachBottomDistance": 20
}
},
{
"path" : "activeManage/signIn",
"style" :
{
"navigationBarTitleText": "签到管理",
"enablePullDownRefresh": false
}
},
{
"path" : "activeManage/examine",
"style" :
{
"navigationBarTitleText": "审核管理",
"enablePullDownRefresh": false
}
},
{
"path" : "activeManage/examineList",
"style" :
{
"navigationBarTitleText": "审核列表",
"enablePullDownRefresh": true,
"onReachBottomDistance": 20
}
},
{
"path" : "activeManage/toGm",
"style" :
{
"navigationBarTitleText": "申请冠名",
"enablePullDownRefresh": false
}
},
{
"path" : "activeManage/qdList",
"style" :
{
"navigationBarTitleText": "签到详情",
"enablePullDownRefresh": false
}
}
]
}

408
src/pages/ActivitiesDetail/ActivitiesDetail.vue
View File

@ -2,84 +2,158 @@
<view>
<view class="help_bg_box">
<view class=" bg_img_box">
<image style="height: 352rpx; width: 100%; " :src="serveList.image"></image>
<u-swiper :list="img" indicator indicatorMode="line" circular height="200"></u-swiper>
</view>
</view>
<view class="header">
<view class="title">{{serveList.title}}</view>
<view class="details">{{serveList.conton}}</view>
<view class="details">{{serveList.activityText}}</view>
</view>
<view class="activityDetails">
<view class="item_ul">
<view class="item_li">
<view class="standard">
<image class="icon" src="../../static/actDetails/actTime.png" mode="scaleToFill"></image>
<text>活动时间</text>
</view>
<view class="content">{{serveList.time1}}</view>
<view class="title">
<image class="icon" src="../../static/detailIcon/icon0.png" mode="scaleToFill"></image>
<text>活动详情</text>
</view>
<view class="item_li">
<view class="standard">
<image class="icon" src="../../static/actDetails/actAddr.png" mode="scaleToFill"></image>
<text>活动地点</text>
<image class="icon" src="../../static/detailIcon/icon5.png" mode="scaleToFill"></image>
<text>活动时间:</text>
</view>
<view class="content">{{serveList.startTime}}~{{serveList.endTime}}</view>
</view>
<view class="item_li">
<view class="standard">
<image class="icon" src="../../static/detailIcon/icon8.png" mode="scaleToFill"></image>
<text>活动地点:</text>
</view>
<view class="content"> {{serveList.address}} </view>
</view>
<view class="item_li">
<view class="standard">
<image class="icon" src="../../static/actDetails/actAddr.png" mode="scaleToFill"></image>
<text>活动类型</text>
<image class="icon" src="../../static/detailIcon/icon7.png" mode="scaleToFill"></image>
<text>活动类型:</text>
</view>
<view class="content"> {{serveList.type}}</view>
<view class="content"> {{serveList.hdType}}</view>
</view>
<view class="item_li">
<view class="standard">
<image class="icon" src="../../static/actDetails/actAddr.png" mode="scaleToFill"></image>
<text>活动报名时间</text>
<image class="icon" src="../../static/detailIcon/icon4.png" mode="scaleToFill"></image>
<text>活动报名时间:</text>
</view>
<view class="content"> {{serveList.time2}} </view>
<view class="content"> {{serveList.bmTime}}~{{serveList.ebmTime}} </view>
</view>
<view class="item_li">
<view class="standard">
<image class="icon" src="../../static/actDetails/actPeople.png" mode="scaleToFill"></image>
<text> 活动人数</text>
<image class="icon" src="../../static/detailIcon/icon6.png" mode="scaleToFill"></image>
<text> 活动人数:</text>
</view>
<view class="content"> {{serveList.num1}}/<text style=" color: #AFADB0;">{{serveList.num2}}</text> </view>
<view class="content"><text style=" color: #99241B;"> {{serveList.hdBmCount}}</text>/{{serveList.hdCount}} </view>
</view>
<view class="title">
<image class="icon" src="../../static/detailIcon/icon0.png" mode="scaleToFill"></image>
<text>志愿者报名</text>
</view>
<view class="item_li">
<view class="standard">
<image class="icon" src="../../static/actDetails/actAddr.png" mode="scaleToFill"></image>
<text>志愿者报名时间</text>
<image class="icon" src="../../static/detailIcon/icon4.png" mode="scaleToFill"></image>
<text>志愿者报名时间:</text>
</view>
<view class="content"> {{serveList.time3}} </view>
<view class="content"> {{serveList.zyzTime}}~{{serveList.ezyzTime}} </view>
</view>
<view class="item_li">
<view class="standard">
<image class="icon" src="../../static/actDetails/actPeople.png" mode="scaleToFill"></image>
<text>志愿者招募数量</text>
<image class="icon" src="../../static/detailIcon/icon6.png" mode="scaleToFill"></image>
<text>志愿者招募数量:</text>
</view>
<view class="content">{{serveList.num3}} 60/<text style=" color: #AFADB0;">{{serveList.num4}}</text> </view>
<view class="content"><text style=" color: #99241B;">{{serveList.zyzBmCount}}</text>/{{serveList.zyzCount}}</view>
</view>
<view class="title">
<image class="icon" src="../../static/detailIcon/icon0.png" mode="scaleToFill"></image>
<text>服务商冠名</text>
</view>
<view class="item_li">
<view class="standard">
<image class="icon" src="../../static/actDetails/actAddr.png" mode="scaleToFill"></image>
<text>冠名申请时间</text>
<image class="icon" src="../../static/detailIcon/icon5.png" mode="scaleToFill"></image>
<text>冠名申请时间:</text>
</view>
<view class="content"> {{serveList.time4}} </view>
<view class="content"> {{serveList.gmTime}}~{{serveList.gmeTime}}</view>
</view>
</view>
</view>
<view class="operation">
<button type="default" class="apply" @click="baoMing()">活动报名</button>
<button type="default" class="collection">志愿者报名</button>
<view class="operation" v-if="userType == 'fws'">
<button type="default" class="apply" v-if="serveList.isGm && serveList.gmState == 0">已申请，审核中</button>
<button type="default" class="apply" v-else-if="serveList.isGm && serveList.gmState == 1" @click="toGm(1)">上传物资照片</button>
<button type="default" class="apply" v-else-if="serveList.isGm && serveList.gmState == 2">验收中</button>
<button type="default" class="apply" v-else-if="serveList.isGm && serveList.gmState == 3">已验收</button>
<button type="default" class="apply" v-else-if="serveList.isGm && serveList.gmState == null" @click="toGm(0)">申请冠名</button>
<button type="default" class="apply" v-else-if="serveList.isGm == false">此活动不接受冠名</button>
</view>
<view class="operation" v-else>
<button type="default" class="apply" @click="baoMingQX(0)" v-if="serveList.hdbm && serveList.hdqxbm == false">取消活动报名</button>
<button type="default" class="apply" @click="baoMing(0)" v-else-if="serveList.hdbm == false && serveList.hdqxbm == false">活动报名</button>
<button type="default" class="apply" v-else-if="serveList.hdbm == false && serveList.hdqxbm">活动已无法报名</button>
<button type="default" class="collection" @click="baoMingQX(1)" v-if="serveList.zyzbm && serveList.zyzqxbm == false">取消志愿者报名</button>
<button type="default" class="collection" @click="baoMing(1)" v-else-if="serveList.zyzbm == false && serveList.zyzqxbm == false">志愿者报名</button>
<button type="default" class="collection" v-else-if="serveList.zyzbm == false && serveList.zyzqxbm">已无法报名志愿者</button>
</view>
<!-- 取消报名-原因 -->
<u-popup :show="showB" mode="center" :round="10" @close="closeZ">
<view style="width: 640rpx;">
<view style="padding: 32rpx;">
<view style="font-size: 36rpx; font-weight: 800;">
取消报名原因
</view>
</view>
<view style="margin: 0 32rpx 32rpx;">
<u--input placeholder="请输入内容" border="surround" v-model="value"></u--input>
</view>
<view style="display: flex; border-top:2rpx solid #E7E7E7;height: 112rpx;width: 640rpx;line-height: 112rpx; font-size: 32rpx;font-weight: 600;">
<view style="width: 319rpx; border-right:1rpx solid #E7E7E7; text-align: center;" @click="close">
取消
</view>
<view style="width: 319rpx; border-right:1rpx solid #E7E7E7; text-align: center; color: #3F84FD;" @click="sure">
确定
</view>
</view>
</view>
</u-popup>
<!-- 取消报名-确认 -->
<u-popup :show="showS" mode="center" :round="10" @close="closeS">
<view style="width: 640rpx;">
<view style="padding: 32rpx;">
<view style="font-size: 32rpx; font-weight: 800;">
取消报名后无法再报名此活动，是否确认取消报名？
</view>
</view>
<view style="display: flex; border-top:2rpx solid #E7E7E7;height: 112rpx;width: 640rpx;line-height: 112rpx; font-size: 32rpx;font-weight: 600;">
<view style="width: 319rpx; border-right:1rpx solid #E7E7E7; text-align: center;" @click="closeS">
取消
</view>
<view style="width: 319rpx; border-right:1rpx solid #E7E7E7; text-align: center; color: #3F84FD;" @click="sureS">
确定
</view>
</view>
</view>
</u-popup>
<!-- 报名-确认 -->
<u-popup :show="showH" mode="center" :round="10" @close="closeH">
<view style="width: 640rpx;">
<view style="padding: 32rpx;">
<view style="font-size: 32rpx; font-weight: 800;">
若报名后不参加，将会扣除文艺积分（-10）噢～
</view>
</view>
<view style="display: flex; border-top:2rpx solid #E7E7E7;height: 112rpx;width: 640rpx;line-height: 112rpx; font-size: 32rpx;font-weight: 600;">
<view style="width: 319rpx; border-right:1rpx solid #E7E7E7; text-align: center;" @click="closeH">
取消
</view>
<view style="width: 319rpx; border-right:1rpx solid #E7E7E7; text-align: center; color: #3F84FD;" @click="sureH">
确定
</view>
</view>
</view>
</u-popup>
</view>
</template>
@ -91,98 +165,142 @@
serveList: {},
img: [],
activityId: '',
dataList: [
{
image: '../../static/hdIcon1.jpg',
title: '泗洲头镇“一村一品”民俗特色文化展示活动',
conton: '泗洲头镇“一村一品”民俗特色文化展示活动',
time1: '2021-11-25-2021-11-27',
address:'象山县泗洲头镇',
type:'演出',
time2: '2021-11-01-2021-11-20',
num1: '46',
num2: '100',
time3: '2021-11-01-2021-11-20',
time4:'2021-11-01-2021-11-20',
num3: '11',
num4: '30',
}, {
image: '../../static/hdIcon2.png',
title: '泗洲头镇扫黑除恶文艺宣传演出',
conton: '泗洲头镇扫黑除恶文艺宣传演出',
time1: '2022-04-07-2022-04-09',
address:'象山县泗洲头镇',
type:'演出',
time2: '2022-03-25-2022-04-05',
num1: '25',
num2: '80',
time3: '2022-03-25-2022-04-05',
time4:'2022-03-25-2022-04-05',
num3: '9',
num4: '30',
}, {
image: '../../static/hdIcon3.png',
title: '象山新春文艺大联欢',
conton: '象山新春文艺大联欢',
time1: '2022-01-26-2022-01-26',
address:'象山县石浦镇',
type:'',
time2: '2022-01-01-2022-01-23',
num1: '21',
num2: '120',
time3: '2022-01-01-2022-01-23',
time4:'2022-01-01-2022-01-23',
num3: '24',
num4: '50',
},
]
dataList: [],
showB: false,
showS: false,
showH: false,
qx: 0,
value: '',
bm: 0,
userType: '',
gmId: '',
}
},
onLoad(options) {
// this.id = 'e98c24e3eb47db31f89cb1071a30fec4'
// this.id = options.id
console.log(options.id);
this.serveList = this.dataList[options.id]
this.id = options.id
this.userType = uni.getStorageSync('userType')
},
onShow() {
this.getList()
},
/*
onShow() {
this.getList()
}, */
methods: {
back() {
uni.navigateBack()
},
getList() {
// this.http.request('/activity/details', {
// id: this.id
// }, "GET").then(res => {
// this.serveList = res.data
// this.img = res.data.images.split(',')
// this.activityId = res.data.id
// })
this.http.request('/activity/details', {
id: this.id
}, "GET").then(res => {
this.serveList = res.data
this.img = res.data.images.split(',')
this.activityId = res.data.id
this.gmId = res.data.gmId
}).catch(e => {
uni.showToast({
title: e.data.message,
icon: "none",
});
})
},
baoMing() {
// this.$refs.popup.open()
// 报名
baoMing(val) {
this.showH = true
this.bm = val
},
close() {
// this.$refs.popup.close()
// 确认报名弹窗-取消
closeH(){
this.showH = false
},
// confirm() {
// this.http.request('/activityUser/addActivity?activityId=' + this.id, {}, "POST").then(res => {
// uni.showToast({
// title: '报名成功',
// icon: "none",
// });
// this.getList()
// }).catch(e => {
// uni.showToast({
// title: e.data.message,
// icon: "none",
// });
// })
// this.$refs.popup.close()
// }
// 确认报名弹窗-确认
sureH() {
if(this.bm == 0){
this.http.request('/activityUser/addActivity?activityId=' + this.activityId, {}, "POST").then(res => {
if(res.code == 200){
this.showH = false
this.getList()
}
}).catch(e => {
uni.showToast({
title: e.data.message,
icon: "none",
});
})
}else if(this.bm == 1){
this.http.request('/activityUser/addZyzActivity?activityId=' + this.activityId, {}, "POST").then(res => {
if(res.code == 200){
this.showH = false
this.getList()
}
}).catch(e => {
uni.showToast({
title: e.data.message,
icon: "none",
});
})
}
},
// 取消报名
baoMingQX(val) {
this.showB = true
this.qx = val
},
// 取消报名-取消
close(){
this.showB = false
this.value = ''
},
//取消报名-确认
sure() {
this.showB = false
this.showS = true
},
//取消报名-原因
closeS(){
this.showS = false
this.showB = true
},
//取消报名原因=确认
sureS() {
let data = {
id: this.activityId,
reason: this.value
}
if(this.qx == 0){
this.http.request('/activityUser/delActivity', data, "POST").then(res => {
if(res.code == 200){
this.getList()
this.showB = false
this.showS = false
this.value = ''
}
}).catch(e => {
uni.showToast({
title: e.data.message,
icon: "none",
});
})
}else if(this.qx == 1){
this.http.request('/activityUser/delZyzActivity', data, "POST").then(res => {
if(res.code == 200){
this.getList()
this.showB = false
this.showS = false
this.value = ''
}
}).catch(e => {
uni.showToast({
title: e.data.message,
icon: "none",
});
})
}
},
toGm(val) {
uni.navigateTo({
url: "/pagesA/activeManage/toGm?state=" + val + '&id=' + this.id + '&gmId=' + this.gmId
})
}
}
}
@ -193,12 +311,6 @@
background-color: #FFFFFF;
}
.help_bg_box {
}
.header {
padding: 40rpx 32rpx 32rpx;
border-bottom: 16rpx solid #F8F8F8;
@ -210,53 +322,57 @@
}
.details {
font-size: 24rpx;
color: #8E8F9E;
font-size: 30rpx;
line-height: 44rpx;
line-height: 40rpx;
}
}
.activityDetails {
padding: 32rpx;
margin-bottom: 160rpx;
.title {
font-size: 24rpx;
font-weight: bold;
margin-bottom: 24rpx;
}
.item_ul {
.title {
font-size: 32rpx;
font-weight: bold;
padding: 24rpx;
display: flex;
background: #F4F5F7;
.icon {
width: 40rpx;
height: 40rpx;
margin-right: 10rpx;
// display: none;
}
}
.item_li {
padding-bottom: 32rpx;
margin-bottom: 32rpx;
padding: 16rpx 32rpx 32rpx;
margin: 16rpx 0;
border-bottom: 2rpx solid #F1F1F1;
display: flex;
justify-content: space-between;
// justify-content: space-between;
align-items: center;
font-weight: 600;
.standard {
display: flex;
align-items: center;
margin-bottom: 16rpx;
margin-right: 10rpx;
.icon {
width: 24rpx;
height: 24rpx;
display: none;
width: 32rpx;
height: 32rpx;
// display: none;
}
text {
font-size: 24rpx;
// color: #251B1D;
color: $gray;
color: #251B1D;
// color: $gray;
margin-left: 8rpx;
line-height: 24rpx;
}
}
.content {
font-size: 24rpx;
}
}

108
src/pages/ArtActivities/ArtActivities.vue
View File

@ -1,46 +1,103 @@
<template>
<view>
<view class="art_act_itm" v-for="(v,i) in list2" :key="i" @click="goActDeat(i)">
<image :src="v.image" mode=""></image>
<view class="title">
{{v.title}}
<view>
<u-loading-page :loading="load"></u-loading-page>
</view>
<view v-if="load == false">
<u-gap height="5" bgColor="#fff"></u-gap>
<view class="art_act_itm" v-for="(v,i) in list2" :key="i" @click="goActDeat(v.id)">
<image :src="v.image" mode=""></image>
<view class="title">
{{v.title}}
</view>
</view>
<view class="addIcon" @click="toAddOrder" v-if="isAdmin">
<image src="../../static/orderHall/addOrder.png"></image>
</view>
<u-empty v-if="list2.length == 0" mode="data" icon="../../static/orderE.png" marginTop="120"></u-empty>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list2: [
{
image: '../../static/hdIcon1.jpg',
title: '泗洲头镇“一村一品”民俗特色文化展示活动',
}, {
image: '../../static/hdIcon2.png',
title: '泗洲头镇扫黑除恶文艺宣传演出'
}, {
image: '../../static/hdIcon3.png',
title: '象山新春文艺大联欢'
},
],
load: true,
list2: [],
pages: 1,
size: 20,
isAdmin : true,
userType: '',
};
},
onLoad() {
this.isAdmin = uni.getStorageSync('isAdmin')
this.userType = uni.getStorageSync('userType')
},
onShow() {
this.pages = 1
this.list2 = []
this.getData()
},
// 下拉刷新
onPullDownRefresh() {
this.pages = 1
this.list2 = []
this.getData()
setTimeout(function() {
uni.stopPullDownRefresh();
}, 1000);
},
//上拉
onReachBottom() {
this.pages++
this.getData();
},
methods: {
goActDeat(id) {
uni.navigateTo({
url: `/pages/ActivitiesDetail/ActivitiesDetail?id=${id}`
})
},
getData(){
let _this = this
this.http.request('/activity/list', {page:this.pages,size:this.size}, "GET").then(res => {
if (res.code == 200) {
if(res.data.records.length > 0){
res.data.records.forEach(function(item) {
if (item.images) {
let img = item.images.split(',')
item.image = img[0]
}
_this.list2.push(item)
})
}else{
this.pages--
}
this.load = false
}
}).catch(e => {
uni.showToast({
title: e.data.message,
icon: "none",
});
})
},
toAddOrder(){
uni.navigateTo({
url: "/pagesA/addArtActivity/addArtActivity"
})
}
}
}
</script>
<style lang="scss">
<style lang="scss" scoped>
page {
width: calc(100% - 32px);
margin: 0px 16px;
width: 686rpx;
margin: 0px 32rpx;
}
image {
@ -49,7 +106,7 @@
}
.art_act_itm {
margin-top: 12px;
margin-top: 24rpx;
height: 328rpx;
border-radius: 8px;
border: 1px solid transparnt;
@ -58,7 +115,7 @@
.title {
position: absolute;
bottom: 0;
background: #000000;
background: rgba(0, 0, 0, 0.4);
border-radius: 0px 0px 8px 8px;
height: 88rpx;
color: #FFFFFF;
@ -66,7 +123,14 @@
font-size: 28rpx;
padding-left: 24rpx;
width: calc(100% - 24rpx);
}
}
.addIcon{
position: fixed;
right: 24rpx;
bottom: 242rpx;
width: 104rpx;
height: 104rpx;
border-radius: 50%;
}
</style>

4
src/pages/ArtWorks/artWorkDetail.vue
View File

@ -156,7 +156,7 @@
}, "GET").then(res => {
if (res.code == 200) {
//判断作品类型
if (res.data.type != undefined) {
if (res.data.type) {
_this.list1.forEach(function(ele) {
if (res.data.type == ele.value) {
res.data.type = ele.name
@ -164,7 +164,7 @@
})
}
//判断封面图片
if (res.data.file != undefined) {
if (res.data.file) {
let fileArr = res.data.file.split(',')
fileArr.forEach(function(item) {
let gs = item.substr(item.lastIndexOf(".") + 1)

55
src/pages/PolicyExpress/PolicyExpress.vue
View File

@ -1,38 +1,61 @@
<template>
<view >
<view class="express_contain" v-for="(v,i) in 5" :key="i" @click="toDetail(i)">
<view class="express_contain_content">
关于启动2021年 度区上规模民营企业调查及拟推荐“民 营企业500强”的通知
</view>
<view class="express_contain_sub">
区工商联办 2021/04/12
<view class="">
<view>
<u-loading-page :loading="load"></u-loading-page>
</view>
<view v-if="load == false">
<view class="express_contain" v-for="(v,i) in list2" :key="i" @click="toDetail(v.id)">
<view class="express_contain_content">
{{v.title}}
</view>
<view class="express_contain_sub">
{{v.username}} {{v.fbsj}}
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
load: true,
pages: 1,
size: 20,
list2: [],
};
},
onLoad() {
this.getData()
},
// 下拉刷新
onPullDownRefresh() {
this.pages = 1
this.list2 = []
this.getData()
setTimeout(function() {
uni.stopPullDownRefresh();
}, 1000);
},
//上拉
onReachBottom() {
this.pages++
this.getData();
},
methods:{
getData(){
let _this = this
this.http.request('/policy/list', {}, "GET").then(res => {
this.http.request('/policy/list', {page:this.pages,size:this.size}, "GET").then(res => {
if (res.code == 200) {
// res.data.forEach(function(item) {
// _this.list.push(item.imagePath)
// })
// this.load = false
// this.getEnjoy()
if(res.data.records.length > 0){
res.data.records.forEach(function(item) {
_this.list2.push(item)
})
}else{
this.pages--
}
this.load = false
}
}).catch(e => {
uni.showToast({

113
src/pages/PolicyExpress/PolicyExpressDetail.vue
View File

@ -1,7 +1,7 @@
<template>
<view class="workDetail">
<view class="work_name">
虎年新春活动再上央视《新闻联播》
{{detailData.title}}
</view>
<view class="work_det">
<view class="det_box">
@ -9,7 +9,7 @@
<image src="../../static/workDetail/time.png" class="img"></image>
</view>
<view class="box_right">
昨天10:20
{{detailData.fbsj}}
</view>
</view>
<view class="det_box">
@ -17,25 +17,22 @@
<image src="../../static/workDetail/seen.png" class="img"></image>
</view>
<view class="box_right">
1288浏览
{{detailData.view}}浏览
</view>
</view>
</view>
<view class="work_desc">
2月3日，由县文联策划组织的“虎年提虎闹新春”活动再上央视《新闻联播》。同时《新闻直播间》《共同关注》《东方时空》《中国新闻》《第一时间》等栏目也分别报道，24小时21次登上央视，纷纷为其点赞！
{{detailData.text}}
</view>
<view class="file_box" v-for="(item,index) in flieList" :key="index" @click="downLoad(index)">
<!-- 附带文件 -->
<view class="file_box" v-for="(item,index) in list2" :key="index" @click="downLoad(item.url)">
<view class="file_box_left">
<image :src="item.image"
class="file_box_left_img"></image>
<image :src="item.img" class="file_box_left_img"></image>
</view>
<view class="file_box_right">
<view class="file_box_name">
{{item.name}}
</view>
<view class="file_box_big">
{{item.big}}
</view>
</view>
</view>
</view>
@ -46,26 +43,70 @@
export default {
data() {
return {
flieList:[{
name: '相关文件.pdf',
big: '228KB',
image: '../../static/DataSearch/TxtImg.png'
},{
name: '相关文件12.pdf',
big: '128KB',
image: '../../static/DataSearch/TxtImg.png'
},],
list:[],
list2:[],
id:'',
iswx: 0,
detailData: {},
}
},
onLoad(op) {
this.id = op.id
console.log(this.id)
this.getData()
},
onReady() {
// this.load = false
// #ifdef MP-WEIXIN
this.iswx = 0
// #endif
// #ifndef MP-WEIXIN
//除了小程序
this.iswx = 1
// #endif
},
methods:{
downLoad(val){
console.log(val)
}
getData(){
let _this = this
this.http.request('/policy/details/' + this.id, {}, "GET").then(res => {
if (res.code == 200) {
if (res.data.files) {
let fileArr = res.data.files.split(',')
fileArr.forEach(function(item) {
let gs = item.substr(item.lastIndexOf(".") + 1)
console.log(item,gs)
if (gs == 'jpg' || gs == 'jpeg' || gs == 'png' || gs == 'bmp' || gs == 'gif' || gs == 'tif' || gs == 'tiff') {
_this.list.push(item)
} else if (gs == 'pdf') {
_this.list2.push({
name: res.data.title + '.' + gs,
img: '../../static/fileImg/pdfS.png',
url: item,
})
}
})
}
console.log(this.list2)
this.detailData = res.data
}
}).catch(e => {
uni.showToast({
title: e.data.message,
icon: "none",
});
})
},
//点击文件
downLoad(val) {
this.contractUrl = val
if(this.iswx == 0){
this.openPDF()
}else if(this.iswx == 1){
uni.navigateTo({
url: "../ArtWorks/webView?url=" + this.contractUrl
})
}
},
}
}
</script>
@ -78,7 +119,7 @@
.work_name {
width: 92%;
margin: 10px 4%;
font-size: 16px;
font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #251B1D;
@ -87,7 +128,6 @@
.work_desc {
width: 92%;
margin: 10px 4%;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #251B1D;
@ -100,7 +140,6 @@
width: 92%;
margin: 10px 4%;
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #AFADB0;
@ -126,7 +165,7 @@
}
}
.file_box{
.file_box {
width: 92%;
height: 64px;
margin: 10px 4%;
@ -136,32 +175,34 @@
background: #F4F5F7;
border-radius: 6px;
overflow: hidden;
.file_box_left{
.file_box_left {
width: 40px;
height: 40px;
margin-top: 12px;
margin-left: 12px;
float: left;
.file_box_left_img{
.file_box_left_img {
width: 40px;
height: 40px;
}
}
.file_box_right{
.file_box_right {
margin-left: 20px;
float: left;
.file_box_name{
.file_box_name {
height: 64px;
line-height: 64px;
font-size: 16px;
font-weight: 600;
color: #251B1D;
margin-top: 12px;
}
.file_box_big{
font-weight: 400;
color: #AFADB0;
}
}
}
}

81
src/pages/activity/activity.vue
View File

@ -7,21 +7,21 @@
</view>
</view>
<view :style="{'height':zwHeight+'px'}"></view>
<view class="activity" v-for="(v,i) in num" :key="i" @click="toDetail(i)">
<view class="activity" v-for="(v,i) in list2" :key="i" @click="toDetail(v.id)">
<view class="left">
<view class="content">
<view class="title">
<text class="zd" v-if="v.is">置顶</text>
{{v.name}}
<text class="zd" v-if="v.isTop">置顶</text>
{{v.title}}
</view>
</view>
<view class="clidate">
<view class="cliNum">点击量:{{v.click}}</view>
<view class="date">{{v.time}}</view>
<view class="cliNum">点击量:{{v.readCount}}</view>
<view class="date">{{v.fbTime}}</view>
</view>
</view>
<view class="right">
<image :src="v.url" mode=""></image>
<image :src="v.imagePath" mode=""></image>
</view>
</view>
@ -36,30 +36,9 @@
statusHeight: 0,
titleHeight: 50,
zwHeight: 0,
num:[
{
is: true,
click: '12',
time: '2022-02-01',
name: '送万福、进万家文艺惠民暖人心',
url: '../../static/dt2.png'
},
{
is: false,
click: '122',
time: '2022-01-31',
name: '虎年新春活动再上央视《新闻联播》',
url: '../../static/dt1.png'
},
{
is: false,
click: '352',
time: '2022-01-01',
name: '文联送欢乐 安置点享真情',
url: '../../static/dt1.png'
}
],
id:'',
pages: 1,
size: 20,
list2: [],
};
},
onReady() {
@ -77,16 +56,50 @@
this.zwHeight = this.statusHeight + this.titleHeight
// #endif
},
onLoad(op) {
this.id = op.id
console.log(this.id)
onShow() {
this.pages = 1
this.list2 = []
this.getData()
},
// 下拉刷新
onPullDownRefresh() {
this.pages = 1
this.list2 = []
this.getData()
setTimeout(function() {
uni.stopPullDownRefresh();
}, 1000);
},
methods:{
toDetail(val){
uni.navigateTo({
url: "/pages/activity/activityDetail?id=" + val
})
}
},
getData(){
let _this = this
this.http.request('/dynamic/list', {page:this.pages,size:this.size}, "GET").then(res => {
if (res.code == 200) {
if(res.data.records.length > 0){
res.data.records.forEach(function(item) {
if (item.imagePath) {
let img = item.imagePath.split(',')
item.imagePath = img[0]
}
_this.list2.push(item)
})
}else{
this.pages--
}
this.load = false
}
}).catch(e => {
uni.showToast({
title: e.data.message,
icon: "none",
});
})
},
}
}

61
src/pages/activity/activityDetail.vue
View File

@ -1,7 +1,7 @@
<template>
<view class="workDetail">
<view class="work_name">
虎年新春活动再上央视《新闻联播》
{{serveList.title}}
</view>
<view class="work_det">
<view class="det_box">
@ -9,7 +9,7 @@
<image src="../../static/workDetail/time.png" class="img"></image>
</view>
<view class="box_right">
昨天10:20
{{serveList.fbTime}}
</view>
</view>
<view class="det_box">
@ -17,31 +17,17 @@
<image src="../../static/workDetail/seen.png" class="img"></image>
</view>
<view class="box_right">
1288浏览
{{serveList.readCount}}浏览
</view>
</view>
</view>
<view class="work_desc">
2月3日，由县文联策划组织的“虎年提虎闹新春”活动再上央视《新闻联播》。同时《新闻直播间》《共同关注》《东方时空》《中国新闻》《第一时间》等栏目也分别报道，24小时21次登上央视，纷纷为其点赞！
{{serveList.context}}
</view>
<view class="work_desc" style="margin-top: 20px;">
<image src="../../static/orderDetail.png" mode="widthFix"
<view class="work_desc" style="margin-top: 20px;" v-for="(v,i) in img" :key="i">
<image :src="v" mode="widthFix"
class="work_desc_img"></image>
</view>
<!-- <view class="file_box" v-for="(item,index) in flieList" :key="index" @click="downLoad(index)">
<view class="file_box_left">
<image :src="item.image"
class="file_box_left_img"></image>
</view>
<view class="file_box_right">
<view class="file_box_name">
{{item.name}}
</view>
<view class="file_box_big">
{{item.big}}
</view>
</view>
</view> -->
</view>
</template>
@ -50,21 +36,32 @@
export default {
data() {
return {
flieList:[{
name: '相关文件.pdf',
big: '228KB',
image: '../../static/DataSearch/TxtImg.png'
},{
name: '相关文件12.pdf',
big: '128KB',
image: '../../static/DataSearch/TxtImg.png'
},]
id: '',
serveList: {},
img: [],
}
},
onLoad(options) {
this.id = options.id
},
onShow() {
this.getList()
},
methods:{
downLoad(val){
console.log(val)
}
getList() {
this.http.request('/dynamic/details/' + this.id, {}, "GET").then(res => {
this.serveList = res.data
if(res.data.imagePath){
this.img = res.data.imagePath.split(',')
}
}).catch(e => {
uni.showToast({
title: e.data.message,
icon: "none",
});
})
},
}
}
</script>

8
src/pages/my/My.vue
View File

@ -97,7 +97,7 @@
<image src="../../static/rightArrow.png" mode=""></image>
</view>
</view>
<view class="content_bott_itm">
<view class="content_bott_itm" @click="tohdM()">
<view class="content_bott_wods">
活动管理
</view>
@ -287,6 +287,12 @@
url: "/pages/my/logOut"
})
},
//作品管理
tohdM(){
uni.navigateTo({
url: "/pagesA/activeManage/activeManage",
})
},
// 消息
myNews(){

4
src/pages/orderHall/orderHall.vue
View File

@ -210,14 +210,14 @@
background-color: #FFF;
.text1 {
font-size: 28rpx;
font-size: 32rpx;
font-weight: 600;
color: #251B1D;
margin-bottom: 5rpx;
}
.text2 {
font-size: 24rpx;
font-size: 28rpx;
font-weight: 400;
color: #989898;
}

140
src/pages/orderHall/orderHallDetails.vue
View File

@ -19,14 +19,14 @@
<view class="mainTitle">{{data.title}}</view>
<view class="textList">
<view class="type">
<img class='textImg' src="../../static/orderHall/text.png" alt="">
<img class='textImg' src="../../static/detailIcon/icon10.png" alt="">
<view class="text1">需求清单</view>
</view>
<view class="text2">{{data.demand}}</view>
</view>
<view class="textList">
<view class="type">
<img class='textImg' src="../../static/orderHall/text.png" alt="">
<img class='textImg' src="../../static/detailIcon/icon10.png" alt="">
<view class="text1">具体内容</view>
</view>
<view class="text2">
@ -45,26 +45,49 @@
</view>
</view>
<view class="line"></view>
<view class="form" :style="{marginBottom:isCheck==0?'100rpx':'20rpx'}">
<view class="formList">
<view class="left">类型：</view>
<view class="right">{{data.typeName}}</view>
</view>
<view class="formList">
<view class="left">可接单用户类型：</view>
<view class="right">{{data.rclx}}</view>
</view>
<view class="formList">
<view class="left">可接单人数：</view>
<view class="right"><text style="color: #99241B;">{{data.jdrs}}</text>/{{data.quantity}}</view>
</view>
<view class="formList">
<view class="left">截止时间：</view>
<view class="right">{{data.deadline}}</view>
</view>
<view class="formList">
<view class="left">活动时间：</view>
<view class="right">{{data.activityTime}}</view>
<view class="activityDetails">
<view class="item_ul">
<view class="title">
<image class="icon" src="../../static/detailIcon/icon0.png" mode="scaleToFill"></image>
<text>需求详情</text>
</view>
<view class="item_li">
<view class="standard">
<image class="icon" src="../../static/detailIcon/icon5.png" mode="scaleToFill"></image>
<text>类型:</text>
</view>
<view class="content">{{data.typeName}}</view>
</view>
<view class="item_li">
<view class="standard">
<image class="icon" src="../../static/detailIcon/icon8.png" mode="scaleToFill"></image>
<text>可接单用户类型:</text>
</view>
<view class="content"> {{data.rclx}} </view>
</view>
<view class="item_li">
<view class="standard">
<image class="icon" src="../../static/detailIcon/icon6.png" mode="scaleToFill"></image>
<text> 可接单人数:</text>
</view>
<view class="content"><text style=" color: #99241B;"> {{data.jdrs}}</text>/{{data.quantity}} </view>
</view>
<view class="item_li">
<view class="standard">
<image class="icon" src="../../static/detailIcon/icon7.png" mode="scaleToFill"></image>
<text>截止时间:</text>
</view>
<view class="content"> {{data.deadline}}</view>
</view>
<view class="item_li">
<view class="standard">
<image class="icon" src="../../static/detailIcon/icon4.png" mode="scaleToFill"></image>
<text>活动时间:</text>
</view>
<view class="content"> {{data.activityTime}} </view>
</view>
</view>
</view>
@ -246,22 +269,21 @@
line-height: 48rpx;
.textImg {
width: 28rpx;
height: 28rpx;
width: 32rpx;
height: 32rpx;
margin-top: 10rpx;
margin-right: 8rpx;
margin-right: 16rpx;
}
.text1 {
font-size: 28rpx;
font-weight: 500;
font-size: 32rpx;
font-weight: 600;
color: #32333C;
}
}
.text2 {
font-size: 28rpx;
font-weight: 400;
color: #32333C;
line-height: 48rpx;
}
@ -311,23 +333,51 @@
background: #F4F5F7;
}
.form {
padding: 32rpx 32rpx 24rpx;
.formList {
display: flex;
justify-content: space-between;
margin-bottom: 40rpx;
.left {
font-size: 28rpx;
font-weight: 400;
color: #AFADB0;
.activityDetails {
.item_ul {
.title {
font-size: 32rpx;
font-weight: bold;
padding: 24rpx;
display: flex;
background: #F4F5F7;
.icon {
width: 40rpx;
height: 40rpx;
margin-right: 10rpx;
// display: none;
}
}
.right {
font-size: 28rpx;
font-weight: 400;
color: #251B1D;
.item_li {
padding: 16rpx 32rpx 32rpx;
margin: 16rpx 0;
border-bottom: 2rpx solid #F1F1F1;
display: flex;
// justify-content: space-between;
align-items: center;
font-weight: 600;
.standard {
display: flex;
align-items: center;
margin-right: 10rpx;
.icon {
width: 32rpx;
height: 32rpx;
// display: none;
}
text {
color: #251B1D;
// color: $gray;
margin-left: 8rpx;
}
}
.content {
}
}
}
}
@ -335,8 +385,6 @@
.orderBtn {
width: 100%;
background-color: #FFF;
position: fixed;
bottom: 0rpx;
padding-bottom: 20rpx;

65
src/pages/pageHome/pageHome.vue
View File

@ -9,11 +9,6 @@
<image src="../../static/icon10.png" mode="" class="logo"></image>
<image src="../../static/icon11.png" mode="" class="appname"></image>
</view>
<!-- 搜索 -->
<!-- <view style="padding:12px 0;">
<u-search height=42 margin="12px 0" searchIconColor="#251B1D" shape="square" :showAction="false"
v-model="artValue" placeholder="请输入搜索内容"></u-search>
</view> -->
<!-- 轮播图 -->
<u-swiper :list="list" indicator indicatorMode="line" circular></u-swiper>
<!-- 功能菜单 -->
@ -109,18 +104,7 @@
statusHeight: 0,
titleHeight: 50,
list: [],
list2: [
{
image: '../../static/hdIcon1.jpg',
title: '泗洲头镇“一村一品”民俗特色文化展示活动',
}, {
image: '../../static/hdIcon2.png',
title: '泗洲头镇扫黑除恶文艺宣传演出'
}, {
image: '../../static/hdIcon3.png',
title: '象山新春文艺大联欢'
},
],
list2: [],
menus: [{
id: 1,
imgUrl: '../../static/icon2.png',
@ -177,9 +161,27 @@
// #endif
},
onShow() {
this.getUserInfo()
this.getSwpper()
},
methods: {
//用户信息
getUserInfo(){
let _this = this
this.http.request('/user/userInfo', {}, "GET").then(res => {
if (res.code == 200) {
uni.removeStorageSync('isAdmin');
uni.removeStorageSync('userType');
uni.setStorageSync('isAdmin', res.data.isAdmin)
uni.setStorageSync('userType', res.data.userType)
}
}).catch(e => {
uni.showToast({
title: e.data.message,
icon: "none",
});
})
},
//获取轮播图
getSwpper(){
let _this = this
@ -242,8 +244,28 @@
}
})
this.writerList = res.data.records
this.getHdlist()
}
}).catch(e => {
uni.showToast({
title: e.data.message,
icon: "none",
});
})
},
//获取热门活动
getHdlist(){
let _this = this
this.http.request('/activity/list', {page:this.pages,size:this.size}, "GET").then(res => {
if (res.code == 200) {
res.data.records.forEach(function(item) {
if (item.images) {
let img = item.images.split(',')
item.image = img[0]
}
})
this.list2 = res.data.records
this.load = false
// this.getEnjoy()
}
}).catch(e => {
uni.showToast({
@ -313,12 +335,9 @@
},
//活动详情
goActDeat(index){
// uni.showToast({
// title: '功能未完善',
// icon: "none",
// });
let id = this.list2[index].id
uni.navigateTo({
url:`/pages/ActivitiesDetail/ActivitiesDetail?id=${index}`
url:'/pages/ActivitiesDetail/ActivitiesDetail?id=' + id
})
}
}

0
src/pages/ReceivingAddress/ChinaCity.js → src/pagesA/ReceivingAddress/ChinaCity.js
View File

2
src/pages/ReceivingAddress/EditAddresspge.vue → src/pagesA/ReceivingAddress/EditAddresspge.vue
View File

@ -46,7 +46,7 @@
</template>
<script>
import cityData from "/src/pages/ReceivingAddress/ChinaCity.js"
import cityData from "/src/pagesA/ReceivingAddress/ChinaCity.js"
export default {
data() {
return {

0
src/pages/ReceivingAddress/ReceivingAddress.vue → src/pagesA/ReceivingAddress/ReceivingAddress.vue
View File

734
src/pagesA/activeManage/activeManage.vue Normal file
View File

@ -0,0 +1,734 @@
<template>
<view>
<view>
<u-loading-page :loading="load"></u-loading-page>
</view>
<view v-if="load == false">
<view class="tabs" v-if="isAdmin">
<view class="tabBox">
<view class="textBox" @click="toFB()">
我发布的
</view>
<view class="textLine" v-if="tab == 0"></view>
</view>
<view class="tabBox">
<view class="textBox" @click="toZZ()" v-if="userType == 'fws'">
我赞助的
</view>
<view class="textBox" @click="toBM()" v-else>
我报名的
</view>
<view class="textLine" v-if="tab == 1"></view>
</view>
</view>
<u-gap height="5" bgColor="#fff"></u-gap>
<view class="art_act_itmF" v-for="(v,i) in list2" :key="i" v-if="tab == 0">
<view style="height: 328rpx;position: relative;">
<image :src="v.image" mode="" @click="goActDeat(v.id)"></image>
<view class="title" @click="goActDeat(v.id)">
{{v.title}}
</view>
</view>
<view class="btn_line">
<view class="btn_w" @click="toQd(v.id)">
签到管理
</view>
<view class="btn_r" @click="toSh(v.id)">
审核管理
</view>
</view>
</view>
<view v-if="tab == 1">
<view class="art_act_itm" v-for="(v,i) in list2" :key="i" v-if="userType == 'fws'">
<view class="imgPart" @click="goActDeat(v.activityId)">
<image :src="v.activity.image" mode=""></image>
</view>
<view class="title" @click="goActDeat(v.activityId)">
<view class="leftPart">
{{v.activity.title}}
</view>
<view class="rightPart" v-if="v.state == 0">
已申请，审核中
</view>
<view class="rightPart" v-if="v.state == 1">
审核已通过
</view>
<view class="rightPart2" v-if="v.state == 2">
<view class="sta">
物资照片已上传
</view>
</view>
<view class="rightPart2" v-if="v.state == 3">
<view class="sta2">
已验收
</view>
</view>
</view>
<view class="time" @click="goActDeat(v.activityId)">
活动时间：{{v.activity.startTime}}～{{v.activity.endTime}}
</view>
<view class="btn_line" v-if="v.state == '1'">
<view class="btn_r" @click="toGm(1,v.id)">
上传物资照片
</view>
</view>
</view>
<view class="art_act_itm" v-for="(v,i) in list2" :key="i" v-else>
<view class="imgPart" @click="goActDeat(v.activityId)">
<image :src="v.activity.image" mode=""></image>
</view>
<view class="title" @click="goActDeat(v.activityId)">
<view class="leftPart">
{{v.activity.title}}
</view>
<view class="rightPart" v-if="v.state == '1' && v.type == 'hd'">
活动已报名
</view>
<view class="rightPart" v-if="v.state == '1' && v.type == 'zyz'">
志愿者已报名
</view>
<view class="rightPart2" v-if="v.state == '2' || v.state == '6'">
<view class="sta">
已签到
</view>
<view class="point">
<view class="jfIcon">
<image src="../../static/jfIcon.png"></image>
</view>
<text>+{{v.activity.point}}</text>
</view>
</view>
<view class="rightPart2" v-if="v.state == '3'">
<view class="sta">
未签到
</view>
<view class="point">
<view class="jfIcon">
<image src="../../static/jfIcon.png"></image>
</view>
<text>-{{v.activity.point}}</text>
</view>
</view>
<view class="rightPart2" v-if="v.state == '4'">
<view class="sta">
审核中
</view>
</view>
<view class="rightPart2" v-if="v.state == '5'">
<view class="sta2">
已取消
</view>
</view>
</view>
<view class="time" @click="goActDeat(v.activityId)">
活动时间：{{v.activity.startTime}}～{{v.activity.endTime}}
</view>
<view class="btn_line" v-if="v.state == '1'">
<view class="btn_r" @click="scanCode()">
<u-icon name="scan" color="#99241B" size="40rpx"></u-icon>
签到
</view>
<view class="btn_w" @click="qxBm(v.type,v.activityId)">
取消报名
</view>
</view>
<view class="btn_line" v-if="v.state == '2'">
<view class="btn_r" @click="baoMing(v.id)">
评价
</view>
</view>
<view class="btn_line" v-if="v.state == '6'">
<view class="btn_w">
已评价
</view>
</view>
</view>
</view>
<u-empty v-if="list2.length == 0" mode="data" icon="../../static/orderE.png" marginTop="120"></u-empty>
</view>
<!-- 取消报名-原因 -->
<u-popup :show="showB" mode="center" :round="10" @close="closeZ">
<view style="width: 640rpx;">
<view style="padding: 32rpx;">
<view style="font-size: 36rpx; font-weight: 800;">
取消报名原因
</view>
</view>
<view style="margin: 0 32rpx 32rpx;">
<u--input placeholder="请输入内容" border="surround" v-model="value"></u--input>
</view>
<view
style="display: flex; border-top:2rpx solid #E7E7E7;height: 112rpx;width: 640rpx;line-height: 112rpx; font-size: 32rpx;font-weight: 600;">
<view style="width: 319rpx; border-right:1rpx solid #E7E7E7; text-align: center;" @click="close">
取消
</view>
<view style="width: 319rpx; border-right:1rpx solid #E7E7E7; text-align: center; color: #3F84FD;"
@click="sure">
确定
</view>
</view>
</view>
</u-popup>
<!-- 取消报名-确认 -->
<u-popup :show="showS" mode="center" :round="10" @close="closeS">
<view style="width: 640rpx;">
<view style="padding: 32rpx;">
<view style="font-size: 32rpx; font-weight: 800;">
取消报名后无法再报名此活动，是否确认取消报名？
</view>
</view>
<view
style="display: flex; border-top:2rpx solid #E7E7E7;height: 112rpx;width: 640rpx;line-height: 112rpx; font-size: 32rpx;font-weight: 600;">
<view style="width: 319rpx; border-right:1rpx solid #E7E7E7; text-align: center;" @click="closeS">
取消
</view>
<view style="width: 319rpx; border-right:1rpx solid #E7E7E7; text-align: center; color: #3F84FD;"
@click="sureS">
确定
</view>
</view>
</view>
</u-popup>
<!-- 评分 -->
<u-popup :show="showH" mode="center" :round="10" @close="closeH">
<view>
<view style="padding: 32rpx;">
<u-rate v-model="star" size='36'></u-rate>
</view>
<view
style="width: 100%;text-align: center; color: #3F84FD;padding: 20rpx 0; border-top:2rpx solid #E7E7E7;"
@click="sureH">
确定
</view>
</view>
</u-popup>
</view>
</template>
<script>
var qrcode = require('../../static/js/qrcode.js');
export default {
data() {
return {
isAdmin : true,
userType: '',
load: true,
list2: [],
pages: 1,
size: 20,
tab: 0,
qx: 0,
id: '',
showB: false,
showS: false,
showH: false,
value: '',
star: 0,
};
},
onLoad() {
this.isAdmin = uni.getStorageSync('isAdmin')
this.userType = uni.getStorageSync('userType')
if(this.isAdmin){
this.tab = 0
}else{
this.tab = 1
}
},
onShow() {
this.pages = 1
this.list2 = []
if (this.tab == 0) {
this.getFB()
} else if (this.tab == 1) {
if(this.userType == 'fws'){
this.getZZ()
}else{
this.getData()
}
}
},
// 下拉刷新
onPullDownRefresh() {
this.pages = 1
this.list2 = []
if (this.tab == 0) {
this.getFB()
} else if (this.tab == 1) {
if(this.userType == 'fws'){
this.getZZ()
}else{
this.getData()
}
}
setTimeout(function() {
uni.stopPullDownRefresh();
}, 1000);
},
//上拉
onReachBottom() {
this.pages++
if (this.tab == 0) {
this.getFB()
} else if (this.tab == 1) {
if(this.userType == 'fws'){
this.getZZ()
}else{
this.getData()
}
}
},
methods: {
// 详情页
goActDeat(id) {
uni.navigateTo({
url: `/pages/ActivitiesDetail/ActivitiesDetail?id=${id}`
})
},
//发布列表
getFB() {
let _this = this
this.http.request('/activity/myRelease', {
page: this.pages,
size: this.size
}, "GET").then(res => {
if (res.code == 200) {
if (res.data.records.length > 0) {
res.data.records.forEach(function(item) {
if (item.images) {
let img = item.images.split(',')
item.image = img[0]
}
_this.list2.push(item)
})
} else {
this.pages--
}
this.load = false
}
}).catch(e => {
uni.showToast({
title: e.data.message,
icon: "none",
});
})
},
//报名列表
getData() {
let _this = this
this.http.request('/activityUser/myActivity', {
page: this.pages,
size: this.size
}, "GET").then(res => {
if (res.code == 200) {
if (res.data.records.length > 0) {
res.data.records.forEach(function(item) {
if (item.activity.images) {
let img = item.activity.images.split(',')
item.activity.image = img[0]
}
_this.list2.push(item)
})
} else {
this.pages--
}
this.load = false
}
}).catch(e => {
uni.showToast({
title: e.data.message,
icon: "none",
});
})
},
//赞助列表
getZZ() {
let _this = this
this.http.request('/activityTitle/myActivityTitle', {
page: this.pages,
size: this.size
}, "GET").then(res => {
if (res.code == 200) {
if (res.data.records.length > 0) {
res.data.records.forEach(function(item) {
if (item.activity.images) {
let img = item.activity.images.split(',')
item.activity.image = img[0]
}
_this.list2.push(item)
})
} else {
this.pages--
}
this.load = false
}
}).catch(e => {
uni.showToast({
title: e.data.message,
icon: "none",
});
})
},
// 我的发布
toFB() {
this.tab = 0
this.pages = 1
this.list2 = []
this.getFB()
},
//我的报名
toBM() {
this.tab = 1
this.pages = 1
this.list2 = []
this.getData()
},
toZZ() {
this.tab = 1
this.pages = 1
this.list2 = []
this.getZZ()
},
scanCode() {
let that = this
// 调用uni提供的调用相机api
uni.chooseImage({
sizeType: ['original'],
count: 1,
success: function(res) {
const tempFilePaths = res.tempFilePaths[0] // 获取到二维码图片的链接
qrcode.decode(tempFilePaths); // 解析二维码图片
qrcode.callback = function(res1) {
// 解析失败返回 error decoding QR Code
if (res1 == "error decoding QR Code") {
uni.showToast({
title: "识别二维码失败，请重新上传！",
duration: 2000,
icon: 'none'
})
} else {
// 解析成功返回二维码链接
that.http.request('/activityUser/sing/' + res1, {}, "POST").then(res => {
if (res.code == 200) {
that.pages = 1
that.list2 = []
that.getData()
}
}).catch(e => {
uni.showToast({
title: e.data.message,
icon: "none",
});
})
}
}
}
});
},
// 取消报名
qxBm(val0, val1) {
if (val0 == 'hd') {
this.qx = 0
} else if (val0 == 'zyz') {
this.qx = 1
}
this.id = val1
this.showB = true
},
// 取消报名-取消
close() {
this.showB = false
this.value = ''
},
//取消报名-确认
sure() {
this.showB = false
this.showS = true
},
//取消报名-原因
closeS() {
this.showS = false
this.showB = true
},
//取消报名原因=确认
sureS() {
let data = {
id: this.id,
reason: this.value
}
if (this.qx == 0) {
this.http.request('/activityUser/delActivity', data, "POST").then(res => {
if (res.code == 200) {
this.getData()
this.showB = false
this.showS = false
this.value = ''
}
}).catch(e => {
uni.showToast({
title: e.data.message,
icon: "none",
});
})
} else if (this.qx == 1) {
this.http.request('/activityUser/delZyzActivity', data, "POST").then(res => {
if (res.code == 200) {
this.getData()
this.showB = false
this.showS = false
this.value = ''
}
}).catch(e => {
uni.showToast({
title: e.data.message,
icon: "none",
});
})
}
},
// 评分
baoMing(val) {
this.id = val
this.showH = true
},
// 评分弹窗-取消
closeH() {
this.showH = false
},
// 评分弹窗-确认
sureH() {
this.http.request('/activityUser/evaluate?id=' + this.id + '&evaluate=' + this.star, {}, "POST")
.then(res => {
if (res.code == 200) {
this.showH = false
this.getData()
}
}).catch(e => {
uni.showToast({
title: e.data.message,
icon: "none",
});
})
},
//审核管理
toSh(val){
uni.navigateTo({
url: `/pagesA/activeManage/examine?id=` + val
})
},
//签到管理
toQd(val){
uni.navigateTo({
url: `/pagesA/activeManage/signIn?id=` + val
})
},
toGm(val,id) {
uni.navigateTo({
url: "/pagesA/activeManage/toGm?state=" + val + '&id=' + this.id + '&gmId=' + id
})
}
}
}
</script>
<style lang="scss" scoped>
image {
width: 100%;
height: 100%;
}
.art_act_itmF {
height: 420rpx;
width: 686rpx;
margin: 24rpx 32rpx;
border-radius: 8px;
border: 1px solid transparnt;
.title {
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
border-radius: 0px 0px 8px 8px;
height: 88rpx;
color: #FFFFFF;
line-height: 88rpx;
font-size: 28rpx;
padding-left: 24rpx;
width: calc(100% - 24rpx);
}
.btn_line {
margin-top: 12rpx;
overflow: hidden;
.btn_r {
width: 190rpx;
height: 72rpx;
background: #99241B;
border-radius: 18px;
text-align: center;
line-height: 72rpx;
color: #FFFFFF;
font-size: 30rpx;
font-weight: 500;
float: right;
margin-left: 20rpx;
}
.btn_w {
width: 186rpx;
height: 68rpx;
border: 2rpx solid #99241B;
border-radius: 18px;
text-align: center;
line-height: 72rpx;
color: #99241B;
font-size: 30rpx;
font-weight: 500;
float: right;
margin-left: 20rpx;
}
}
}
.art_act_itm {
width: 686rpx;
margin: 24rpx 32rpx;
border-radius: 8px;
border: 1px solid transparnt;
.imgPart {
width: 686rpx;
height: 328rpx;
}
.title {
height: 44rpx;
padding: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
.leftPart {
font-size: 34rpx;
font-weight: 600;
width: 350rpx;
}
.rightPart {
height: 44rpx;
background: #F9F2F2;
border-radius: 8rpx;
line-height: 44rpx;
padding: 0 30rpx;
color: #99241B;
}
.rightPart2 {
height: 44rpx;
display: flex;
align-items: center;
justify-content: space-between;
.sta {
height: 44rpx;
background: #FFF4ED;
border-radius: 8rpx;
line-height: 44rpx;
padding: 0 20rpx;
margin-right: 20rpx;
color: #FF6600;
}
.sta2 {
height: 44rpx;
background: #F1F1F1;
border-radius: 8rpx;
line-height: 44rpx;
padding: 0 20rpx;
margin-right: 20rpx;
color: #251B1D;
}
.point {
height: 44rpx;
display: flex;
align-items: center;
justify-content: space-between;
.jfIcon {
width: 32rpx;
height: 32rpx;
}
}
}
}
.time {
color: #AFADB0;
padding: 12rpx 0;
}
.btn_line {
overflow: hidden;
.btn_r {
// height: 68rpx;
border-radius: 18px;
color: #99241B;
font-size: 30rpx;
font-weight: 500;
float: right;
margin-left: 20rpx;
border: 2rpx solid #99241B;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10rpx 30rpx;
}
.btn_w {
border: 2rpx solid #E4E4E4;
border-radius: 18px;
text-align: center;
font-size: 30rpx;
font-weight: 500;
float: right;
margin-left: 20rpx;
padding: 10rpx 30rpx;
}
}
}
.tabs {
height: 70rpx;
width: 100%;
margin-bottom: 20rpx;
overflow: hidden;
background-color: #FFFFFF;
.tabBox {
width: 50%;
height: 70rpx;
text-align: center;
line-height: 70rpx;
font-weight: 700;
float: left;
.textBox {
height: 64rpx;
width: 160rpx;
margin-left: calc(50% - 80rpx);
}
.textLine {
height: 6rpx;
width: 60rpx;
margin-left: calc(50% - 30rpx);
background-color: #99241B;
}
}
}
</style>

98
src/pagesA/activeManage/examine.vue Normal file
View File

@ -0,0 +1,98 @@
<template>
<view class="content_area">
<u-gap height="12" bgColor="#F4F5F7"></u-gap>
<view class="content_bott">
<view class="content_bott_itm" @click="toWork('zyz')">
<view class="content_bott_wods">
志愿者取消报名审核
</view>
<view class="content_bott_arrow">
<image src="../../static/rightArrow.png" mode=""></image>
</view>
</view>
<view class="content_bott_itm" @click="toWork('hd')">
<view class="content_bott_wods">
活动取消报名审核
</view>
<view class="content_bott_arrow">
<image src="../../static/rightArrow.png" mode=""></image>
</view>
</view>
<view class="content_bott_itm" @click="toWork('2')">
<view class="content_bott_wods">
冠名审核
</view>
<view class="content_bott_arrow">
<image src="../../static/rightArrow.png" mode=""></image>
</view>
</view>
<view class="content_bott_itm" @click="toWork('3')">
<view class="content_bott_wods">
物资验收
</view>
<view class="content_bott_arrow">
<image src="../../static/rightArrow.png" mode=""></image>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data(){
return{
id: '',
}
},
onLoad(op) {
this.id = op.id
},
methods: {
toWork(val){
uni.navigateTo({
url: `/pagesA/activeManage/examineList?id=` + this.id + '&type=' + val
})
}
}
}
</script>
<style lang="scss" scoped>
page {
background-color: #F4F5F7;
}
image {
width: 100%;
height: 100%;
}
.content_area{
padding: 0 32rpx;
.content_bott {
padding: 32rpx;
background-color: #FFFFFF;
border-radius: 8px;
.content_bott_itm {
display: flex;
justify-content: space-between;
align-items: center;
margin: 30rpx 0px;
.content_bott_wods {
font-size: 28rpx;
color: #251B1D;
font-weight: 600;
}
.content_bott_arrow {
width: 32rpx;
height: 32rpx;
}
}
}
}
</style>

317
src/pagesA/activeManage/examineList.vue Normal file
View File

@ -0,0 +1,317 @@
<template>
<view>
<view>
<u-loading-page :loading="load"></u-loading-page>
</view>
<view v-if="load == false">
<u-gap height="12" bgColor="#F4F5F7"></u-gap>
<view class="exaBox" v-for="(v,i) in list" :key="i">
<view class="exaTitle" v-if="type == 'zyz'">
<view class="exaTitleLeft">
<view class="exaIcon">
<image src="../../static/new/tx.png"></image>
</view>
{{v.user.userName}} 取消志愿者报名
</view>
<view class="exaTitleRight">
<view class="btn_w" @click="ty(v.id)">
同意
</view>
</view>
</view>
<view class="exaTitle" v-else-if="type == 'hd'">
<view class="exaTitleLeft">
<view class="exaIcon">
<image src="../../static/new/tx.png"></image>
</view>
{{v.user.userName}} 取消活动报名
</view>
<view class="exaTitleRight">
<view class="btn_w" @click="ty(v.id)">
同意
</view>
</view>
</view>
<view class="exaTitle" v-else-if="type =='2'">
<view class="exaTitleLeft">
<view class="exaIcon">
<image src="../../static/new/tx.png"></image>
</view>
{{v.user.userName}} 申请冠名
</view>
<view class="exaTitleRight">
<view class="btn_w" @click="ty(v.id)">
同意
</view>
</view>
</view>
<view class="exaTitle" v-else-if="type == '3'">
<view class="exaTitleLeft">
<view class="exaIcon">
<image src="../../static/new/tx.png"></image>
</view>
{{v.user.userName}} 物资验收
</view>
<view class="exaTitleRight">
<view class="btn_w" @click="ty(v.id)">
确认
</view>
</view>
</view>
<view class="exaLine" v-if="type =='2' || type == '3'">
可提供物资：
</view>
<view class="exaLine" v-else>
取消原因：
</view>
<view class="exaReason" v-if="type =='2' || type == '3'">
{{v.material}}
</view>
<view class="exaReason" v-else>
{{v.evaluate}}
</view>
<view class="exaImg" v-if="type =='2' || type == '3'">
<view class="exaImgItem" v-for="(a,b) in v.image" :key="b">
<image :src="a"></image>
</view>
</view>
</view>
<u-empty v-if="list.length == 0" mode="data" icon="../../static/orderE.png" marginTop="120"></u-empty>
</view>
</view>
</template>
<script>
export default {
data() {
return {
load: true,
id: '',
type: '',
list: [],
pages: 1,
size: 20,
}
},
onLoad(op) {
this.id = op.id
this.type = op.type
this.getData()
},
// 下拉刷新
onPullDownRefresh() {
this.pages = 1
this.list = []
this.getData()
setTimeout(function() {
uni.stopPullDownRefresh();
}, 1000);
},
//上拉
onReachBottom() {
this.pages++
this.getData()
},
methods: {
getData() {
let _this = this
if (this.type == 'hd' || this.type == 'zyz') {
this.http.request('/activityUser/examine/' + this.id + '/' + this.type, {
page: this.pages,
size: this.size
}, "POST").then(res => {
if (res.code == 200) {
if (res.data.records.length > 0) {
res.data.records.forEach(function(item) {
_this.list.push(item)
})
} else {
this.pages--
}
this.load = false
}
}).catch(e => {
uni.showToast({
title: e.data.message,
icon: "none",
});
})
} else if (this.type == '2') {
this.http.request('/activityTitle/examineList/' + this.id, {
page: this.pages,
size: this.size
}, "GET").then(res => {
if (res.code == 200) {
if (res.data.records.length > 0) {
res.data.records.forEach(function(item) {
if (item.image) {
let img = item.image.split(',')
item.image = img
}
_this.list.push(item)
})
} else {
this.pages--
}
this.load = false
}
}).catch(e => {
uni.showToast({
title: e.data.message,
icon: "none",
});
})
} else if (this.type == '3') {
this.http.request('/activityTitle/checkList/' + this.id, {
page: this.pages,
size: this.size
}, "GET").then(res => {
if (res.code == 200) {
if (res.data.records.length > 0) {
res.data.records.forEach(function(item) {
if (item.image) {
let img = item.image.split(',')
item.image = img
}
_this.list.push(item)
})
} else {
this.pages--
}
this.load = false
}
}).catch(e => {
uni.showToast({
title: e.data.message,
icon: "none",
});
})
}
},
ty(val){
if (this.type == 'hd' || this.type == 'zyz') {
this.http.request('/activityUser/sh/' + val, {}, "POST").then(res => {
if (res.code == 200) {
this.pages = 1
this.list = []
this.getData()
}
}).catch(e => {
uni.showToast({
title: e.data.message,
icon: "none",
});
})
} else if (this.type == '2') {
this.http.request('/activityTitle/examine/' + val, {}, "POST").then(res => {
if (res.code == 200) {
this.pages = 1
this.list = []
this.getData()
}
}).catch(e => {
uni.showToast({
title: e.data.message,
icon: "none",
});
})
} else if (this.type == '3') {
this.http.request('/activityTitle/check/' + val, {}, "POST").then(res => {
if (res.code == 200) {
this.pages = 1
this.list = []
this.getData()
}
}).catch(e => {
uni.showToast({
title: e.data.message,
icon: "none",
});
})
}
}
}
}
</script>
<style lang="scss" scoped>
page {
background-color: #F4F5F7;
}
image {
width: 100%;
height: 100%;
}
.exaBox {
width: 686rpx;
margin: 0 32rpx 32rpx;
background-color: #fff;
border-radius: 16rpx;
padding-bottom: 16rpx;
.exaTitle {
padding: 16rpx;
height: 56rpx;
display: flex;
align-items: center;
justify-content: space-between;
.exaTitleLeft {
font-size: 32rpx;
font-weight: 600;
display: flex;
.exaIcon {
width: 36rpx;
height: 36rpx;
border-radius: 50%;
margin-top: 6rpx;
margin-right: 16rpx;
}
}
.exaTitleRight {
.btn_w {
border: 2rpx solid #E4E4E4;
border-radius: 18px;
text-align: center;
font-size: 30rpx;
font-weight: 500;
float: right;
margin-left: 20rpx;
padding: 10rpx 30rpx;
}
}
}
.exaLine {
padding: 0 16rpx;
}
.exaReason {
margin: 16rpx;
padding: 12rpx;
width: 630rpx;
background: #F8F8F8;
border-radius: 8rpx;
color: #AFADB0;
line-height: 40rpx;
}
.exaImg {
width: 654rpx;
margin: 16rpx 16rpx 0;
display: flex;
flex-wrap: wrap;
.exaImgItem {
width: 130rpx;
height: 130rpx;
margin: 16rpx 16rpx;
}
}
}
</style>

128
src/pagesA/activeManage/qdList.vue Normal file
View File

@ -0,0 +1,128 @@
<template>
<view class="">
<view class="">
<u-loading-page :loading="load"></u-loading-page>
</view>
<view>
<view class="searchTime">
<view class="btn">
<u-button type="info" icon="download" text="导出签到表" @click="outList()"></u-button>
</view>
</view>
<view class="tablePart">
<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
<uni-tr>
<uni-th width="120" align="center">签到时间段</uni-th>
<uni-th width="50" align="center">姓名</uni-th>
<uni-th width="60" align="center">是否签到</uni-th>
</uni-tr>
<uni-tr v-for="(item, index) in tableData" :key="index">
<uni-td align="center">{{ item.startTime}} - {{ item.startTime }}</uni-td>
<uni-td align="center">{{ item.userName }}</uni-td>
<uni-td align="center">
<view v-if="item.sign">
是
</view>
<view v-else>
否
</view>
</uni-td>
</uni-tr>
</uni-table>
<view class="uni-pagination-box">
<uni-pagination :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" />
</view>
</view>
</view>
</view>
</template>
<script>
import http from '../../request/interface.js'
export default {
data() {
return {
load: true,
wzName: '',
loading: false,
tableData: [],
// 每页数据量
pageSize: 10,
// 当前页
pageCurrent: 1,
// 数据总量
total: 0,
timeValue: Number(new Date()),
timeShow: false,
timeNum: 0,
activityId: '',
type: '',
}
},
onLoad(op) {
this.activityId = op.activityId
this.type = op.type
this.getData()
},
methods: {
getData() {
let _this = this
this.loading = true
this.http.request('/activityUser/singIn/' + this.activityId + '/' + this.type, {
size: this.pageSize,
page: this.pageCurrent
}, "GET").then(res => {
if (res.code == 200) {
this.tableData = res.data.records
this.total = res.total
this.loading = false
this.load = false
}
}).catch(e => {
uni.showToast({
title: e.data.message,
icon: "none",
});
})
},
change(e) {
this.pageCurrent = e.current
this.load = true
this.getData()
},
outList(){
let url = http.config.baseUrl + '/activityUser/sign_export/'+ this.activityId + '/' + this.type
window.location.href = url
}
}
}
</script>
<style lang="scss" scoped>
page {
background: #F4F5F7;
}
.tablePart {
width: 686rpx;
margin: 0 32rpx;
}
.uni-table-th[data-v-511e81f9] {
background: #EDEFF2;
}
.searchTime {
width: 100%;
padding-bottom: 30rpx;
padding-top: 20rpx;
.btn {
background-color: #fff;
width: 686rpx;
margin: 0 32rpx;
}
}
</style>

201
src/pagesA/activeManage/signIn.vue Normal file
View File

@ -0,0 +1,201 @@
<template>
<view>
<view>
<u-loading-page :loading="load"></u-loading-page>
</view>
<view v-if="load == false">
<view class="top_swiper">
<u-swiper :list="img" indicator indicatorMode="line" circular height="200"></u-swiper>
</view>
<view class="top_title">
标题
</view>
<view class="item_ul">
<view class="item_li">
<view class="standard">
<image class="icon" src="../../static/actDetails/actAddr.png" mode="scaleToFill"></image>
<text>签到地点</text>
</view>
<view class="content"> {{serveList.address}} </view>
</view>
<view class="item_li">
<view class="standard">
<image class="icon" src="../../static/actDetails/actTime.png" mode="scaleToFill"></image>
<text>签到时间</text>
</view>
<view class="content">{{serveList.startTime}}-{{serveList.endTime}}</view>
</view>
</view>
<view class="group-item" v-for="(item,index) in QRlist" :key="index">
<view class="codeTitle">
{{item.title}}
<view class="btn_r" @click="toList(index)">
签到详情
</view>
</view>
<view class="codeImg">
<view class="codeEle">
<uqrcode :id="'uQRCode'+index" ref="uQRCode0" :size='QRsize' :text='item.text' />
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
load: true,
id: '',
img: [],
serveList: {},
QRsize: 136,
QRlist: [
{
title: '志愿者签到码',
text: ''
},
{
title: '活动签到码',
text: ''
},
]
}
},
onLoad(op) {
this.id = op.id
this.QRlist[0].text = op.id
this.QRlist[1].text = op.id
this.getData()
},
methods: {
getData() {
this.http.request('/activity/details', {
id: this.id
}, "GET").then(res => {
this.serveList = res.data
this.img = res.data.images.split(',')
}).catch(e => {
uni.showToast({
title: e.data.message,
icon: "none",
});
})
this.load = false
},
toList(val){
let type = ''
if(val == 0){
type = 'zyz'
}else if(val == 1){
type = 'hd'
}
uni.navigateTo({
url: "/pagesA/activeManage/qdList?type=" + type + '&activityId=' + this.id
})
}
}
}
</script>
<style lang="scss" scoped>
.top_swiper{
width: 100%;
}
.top_title{
width: 686rpx;
padding: 20rpx 32rpx;
font-size: 36rpx;
font-weight: 700;
}
.item_ul {
width: 686rpx;
padding: 32rpx;
.item_li {
padding-bottom: 32rpx;
margin-bottom: 32rpx;
border-bottom: 2rpx solid #F1F1F1;
display: flex;
justify-content: space-between;
align-items: center;
.standard {
display: flex;
align-items: center;
.icon {
width: 24rpx;
height: 24rpx;
display: none;
}
text {
font-size: 30rpx;
color: #251B1D;
margin-left: 8rpx;
line-height: 24rpx;
}
}
.content {
font-size: 30rpx;
}
}
}
.group-item {
background: #FFFFFF;
border-radius: 8px 8px 8px 8px;
box-sizing: border-box;
padding: 0 32rpx;
.codeTitle {
font-size: 32rpx;
font-weight: 800;
padding: 20rpx 0;
border-bottom: 1px dashed #DBDBDB;
display: flex;
align-items: center;
justify-content: space-between;
.btn_r {
width: 190rpx;
height: 72rpx;
background: #99241B;
border-radius: 18px;
text-align: center;
line-height: 72rpx;
color: #FFFFFF;
font-size: 30rpx;
font-weight: 500;
float: right;
margin-left: 20rpx;
}
}
.codeImg {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 0;
.codeEle {
width: 148px;
height: 148px;
background: #f6f6f6;
box-sizing: border-box;
border-radius: 2px 2px 2px 2px;
padding: 6px;
.code {
max-width: 100%;
max-height: 100%;
}
}
}
}
</style>

219
src/pagesA/activeManage/toGm.vue Normal file
View File

@ -0,0 +1,219 @@
<template>
<view>
<view v-if="state == 0">
<view class="form_box">
<view class="form_left">
可提供物资
</view>
</view>
<view class="text_box">
<u--textarea v-model="activityText" placeholder="请输入可提供物资" maxlength="-1"></u--textarea>
</view>
<view class="operation" @click="next">
提交
</view>
</view>
<view v-else-if="state == 1">
<view class="form_box">
<view class="form_left">
可提供物资
</view>
</view>
<view class="text_box2">
{{activityText}}
</view>
<view class="gap">
图片上传
</view>
<u-upload class="upload" width="172rpx" height="172rpx" :fileList="fileList3" @afterRead="afterRead"
@delete="deletePic" name="3" multiple>
<image style="width: 172rpx;height: 172rpx;" src="../../static/improveData/jia.png"></image>
</u-upload>
<view class="operation" @click="next">
提交
</view>
</view>
</view>
</template>
<script>
import http from '../../request/interface.js'
export default {
data() {
return {
activityText: '',
fileList3: [],
state: 0,
id: '',
gmId: ''
}
},
onLoad(op) {
this.id = op.id
this.state = op.state
this.gmId = op.gmId
if (this.state == 1) {
this.grtData()
}
},
methods: {
grtData() {
this.http.request('/activityTitle/examineXq/' + this.gmId, {}, "GET").then(res => {
if (res.code == 200) {
this.activityText = res.data.material
}
}).catch(e => {
uni.showToast({
title: e.data.message,
icon: "none",
});
})
},
// 删除图片
deletePic(event) {
this[`fileList${event.name}`].splice(event.index, 1)
},
// 新增图片
async afterRead(event) {
// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
let lists = [].concat(event.file)
let fileListLen = this[`fileList${event.name}`].length
lists.map((item) => {
this[`fileList${event.name}`].push({
...item,
status: 'uploading',
message: '上传中'
})
})
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise(lists[i].url)
let item = this[`fileList${event.name}`][fileListLen]
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: result
}))
fileListLen++
}
},
uploadFilePromise(url) {
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: http.config.baseUrl + '/file/upload',
filePath: url,
name: 'file',
formData: {
user: 'test'
},
success: (res) => {
if (JSON.parse(res.data).code == 200) {
setTimeout(() => {
resolve(JSON.parse(res.data).data.path)
}, 1000)
} else {
uni.showToast({
title: JSON.parse(res.data).message,
icon: "none",
});
this.fileList3.pop()
}
}
});
})
},
next() {
if (this.state == 0) {
this.http.request('/activityTitle/' + this.id + '/' + this.activityText, {}, "POST").then(res => {
if (res.code == 200) {
uni.showToast({
title: '提交成功',
icon: 'none',
});
setTimeout(() => {
uni.navigateBack()
}, 1200)
}
}).catch(e => {
uni.showToast({
title: e.data.message,
icon: "none",
});
})
} else if (this.state == 1) {
let image = []
this.fileList3.forEach(function(item) {
image.push(item.url)
})
let data = image.join(',')
this.http.request('/activityTitle/material?id=' + this.gmId + '&images=' + data, {}, "POST").then(res => {
if (res.code == 200) {
uni.showToast({
title: '提交成功',
icon: 'none',
});
setTimeout(() => {
uni.navigateBack()
}, 1200)
}
}).catch(e => {
uni.showToast({
title: e.data.message,
icon: "none",
});
})
}
}
}
}
</script>
<style lang="scss" scoped>
.form_box {
width: 702rpx;
padding: 0 24rpx;
display: flex;
align-items: center;
font-size: 30rpx;
justify-content: space-between;
height: 104rpx;
}
.text_box {
width: 702rpx;
padding: 0 24rpx 20rpx;
}
.text_box2 {
width: 662rpx;
margin: 0 32rpx 24rpx;
padding: 20rpx 12rpx;
color: #AFADB0;
background: #F8F8F8;
border-radius: 8rpx;
}
.gap {
color: #AFADB0;
background: #F5F5F5;
opacity: 1;
padding: 10rpx 24rpx;
font-size: 30rpx;
}
.upload {
padding: 24rpx;
}
.operation {
width: 654rpx;
height: 96rpx;
margin: 32rpx 48rpx 48rpx;
text-align: center;
line-height: 96rpx;
background-color: #99241B;
color: #fff;
font-size: 36rpx;
font-weight: 600;
}
</style>

500
src/pagesA/addArtActivity/addArtActivity.vue Normal file
View File

@ -0,0 +1,500 @@
<template>
<view class="">
<view class="form_line">
<view class="form_left">
活动名称
</view>
<view class="form_right">
<u--input placeholder="请输入活动名称" v-model="title" clearable border="none" inputAlign="right"
style="color: #251B1D;">
</u--input>
</view>
</view>
<view class="form_line">
<view class="form_left">
活动开始时间
</view>
<view class="form_right">
<uni-datetime-picker type="datetime" v-model="startTime" :border="false" :clearIcon="false"/>
</view>
</view>
<view class="form_line">
<view class="form_left">
活动结束时间
</view>
<view class="form_right">
<uni-datetime-picker type="datetime" v-model="endTime" :border="false" :clearIcon="false"/>
</view>
</view>
<view class="form_line">
<view class="form_left">
活动地点
</view>
<view class="form_right">
<u--input placeholder="请输入活动地点" v-model="address" clearable border="none" inputAlign="right"
style="color: #251B1D;">
</u--input>
</view>
</view>
<view class="form_line">
<view class="form_left">
活动类型
</view>
<view class="form_right" @click="showType=true">
<u--input placeholder="请选择类型" clearable border="none" inputAlign="right" style="color: #251B1D;"
suffixIcon="arrow-right" readonly v-model="hdType" disabledColor="#ffffff">
</u--input>
</view>
</view>
<u-popup :show="showType" @close="close" closeOnClickOverlay :round="5" customStyle="padding: 16px;">
<u-radio-group @change="selectForm1" v-model="hdType" :borderBottom="true" placement="column"
iconPlacement="right">
<u-radio :customStyle="{marginBottom: '16px' }" v-for="(item, index) in radiolist1" :key="index"
:label="item.label" labelSize="28rpx" labelColor="#231F1C" :name="item.label" activeColor="#99241B ">
</u-radio>
<u-button class="custom-style" style="background-color:#99241B ; color: #FFFFFF; margin-top: 32rpx;"
type="default" @click="showType=false">确认</u-button>
</u-radio-group>
</u-popup>
<view class="form_line">
<view class="form_left">
活动报名开始时间
</view>
<view class="form_right">
<uni-datetime-picker type="datetime" v-model="bmTime" :border="false" :clearIcon="false"/>
</view>
</view>
<view class="form_line">
<view class="form_left">
活动报名结束时间
</view>
<view class="form_right">
<uni-datetime-picker type="datetime" v-model="ebmTime" :border="false" :clearIcon="false"/>
</view>
</view>
<view class="form_line">
<view class="form_left">
活动人数
</view>
<view class="form_right">
<u--input placeholder="请输入活动人数" v-model="hdCount" clearable border="none" inputAlign="right"
style="color: #251B1D;">
</u--input>
</view>
</view>
<view class="form_line">
<view class="form_left">
志愿者报名开始时间
</view>
<view class="form_right">
<uni-datetime-picker type="datetime" v-model="zyzTime" :border="false" :clearIcon="false"/>
</view>
</view>
<view class="form_line">
<view class="form_left">
志愿者报名结束时间
</view>
<view class="form_right">
<uni-datetime-picker type="datetime" v-model="ezyzTime" :border="false" :clearIcon="false"/>
</view>
</view>
<view class="form_line">
<view class="form_left">
志愿者招募数量
</view>
<view class="form_right">
<u--input placeholder="请输入招募数量" v-model="zyzCount" clearable border="none" inputAlign="right"
style="color: #251B1D;">
</u--input>
</view>
</view>
<view class="form_line">
<view class="form_left">
是否开放冠名权
</view>
<view>
<u-switch v-model="isGm" @change="changeTrue"></u-switch>
</view>
</view>
<view class="form_line">
<view class="form_left">
冠名申请开始时间
</view>
<view class="form_right">
<uni-datetime-picker type="datetime" v-model="gmTime" :border="false" :clearIcon="false"/>
</view>
</view>
<view class="form_line">
<view class="form_left">
冠名申请结束时间
</view>
<view class="form_right">
<uni-datetime-picker type="datetime" v-model="gmeTime" :border="false" :clearIcon="false"/>
</view>
</view>
<view class="form_box">
<view class="form_left">
具体内容
</view>
</view>
<view class="text_box">
<u--textarea v-model="activityText" placeholder="请输入具体内容" maxlength="-1"></u--textarea>
</view>
<view class="gap">
图片上传
</view>
<u-upload class="upload" width="172rpx" height="172rpx" :fileList="fileList3"
@afterRead="afterRead" @delete="deletePic" name="3" multiple>
<image style="width: 172rpx;height: 172rpx;" src="../../static/improveData/jia.png"></image>
</u-upload>
<view class="operation" @click="next">
发布
</view>
</view>
</template>
<script>
import http from '../../request/interface.js'
export default {
data() {
return {
title: '',
startTime: '',
endTime: '',
address: '',
hdType: '',
bmTime: '',
ebmTime: '',
hdCount: '',
zyzTime: '',
ezyzTime: '',
zyzCount: '',
isGm: true,
gmTime: '',
gmeTime: '',
activityText: '',
typeId: '',
showType: false,
radiolist1: [],
timeValue: Number(new Date()),
perNumber: 1,
fileList3: [],
ok: true,
}
},
onShow() {
this.getTypeList()
},
methods: {
// 订单类型
getTypeList() {
this.http.request('/activity/activityType', {}, "GET").then(res => {
if (res.code == 200) {
this.radiolist1 = res.data
}
}).catch(e => {
uni.showToast({
title: e.data.message,
icon: "none",
});
})
},
close() {
this.showType = false
this.showTime = false
this.showUser = false
},
selectForm1(form) {
let _this = this
this.radiolist1.forEach(function(item) {
if (item.label == form) {
_this.typeId = item.id
}
})
},
changeTrue(e) {
console.log('change', e);
},
// 删除图片
deletePic(event) {
this[`fileList${event.name}`].splice(event.index, 1)
},
// 新增图片
async afterRead(event) {
// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
let lists = [].concat(event.file)
let fileListLen = this[`fileList${event.name}`].length
lists.map((item) => {
this[`fileList${event.name}`].push({
...item,
status: 'uploading',
message: '上传中'
})
})
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise(lists[i].url)
let item = this[`fileList${event.name}`][fileListLen]
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: result
}))
fileListLen++
}
},
uploadFilePromise(url) {
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: http.config.baseUrl + '/file/upload',
filePath: url,
name: 'file',
formData: {
user: 'test'
},
success: (res) => {
if (JSON.parse(res.data).code == 200) {
setTimeout(() => {
resolve(JSON.parse(res.data).data.path)
}, 1000)
} else {
uni.showToast({
title: JSON.parse(res.data).message,
icon: "none",
});
this.fileList3.pop()
}
}
});
})
},
next() {
this.ok = true
if(this.title == ''){
uni.showToast({
title: '请输入名称',
icon: "none",
});
this.ok = false
return
}
if(this.endTime == ''){
uni.showToast({
title: '请选择活动开始时间',
icon: "none",
});
this.ok = false
return
}
if(this.startTime == ''){
uni.showToast({
title: '请选择活动结束时间',
icon: "none",
});
this.ok = false
return
}
if(this.address == ''){
uni.showToast({
title: '请输入地点',
icon: "none",
});
this.ok = false
return
}
if(this.hdType == ''){
uni.showToast({
title: '请选择类型',
icon: "none",
});
this.ok = false
return
}
if(this.bmTime == ''){
uni.showToast({
title: '请选择活动报名开始时间',
icon: "none",
});
this.ok = false
return
}
if(this.ebmTime == ''){
uni.showToast({
title: '请选择活动报名结束时间',
icon: "none",
});
this.ok = false
return
}
if(this.hdCount == ''){
uni.showToast({
title: '请输入活动人数',
icon: "none",
});
this.ok = false
return
}
if(this.zyzTime == ''){
uni.showToast({
title: '请选择志愿者报名开始时间',
icon: "none",
});
this.ok = false
return
}
if(this.ezyzTime == ''){
uni.showToast({
title: '请选择志愿者报名结束时间',
icon: "none",
});
this.ok = false
return
}
if(this.zyzCount == ''){
uni.showToast({
title: '请输入志愿者人数',
icon: "none",
});
this.ok = false
return
}
if(this.isGm){
if(this.gmTime == ''){
uni.showToast({
title: '请选择冠名申请开始时间',
icon: "none",
});
this.ok = false
return
}
if(this.gmeTime == ''){
uni.showToast({
title: '请选择冠名申请结束时间',
icon: "none",
});
this.ok = false
return
}
}
if(this.activityText == ''){
uni.showToast({
title: '请输入活动内容',
icon: "none",
});
this.ok = false
return
}
if(this.fileList3.length == 0){
uni.showToast({
title: '请上传图片',
icon: "none",
});
this.ok = false
return
}
if(this.ok){
let image = []
this.fileList3.forEach(function(item) {
image.push(item.url)
})
let data = image.join(',')
this.http.request('/activity/addActivity', {
title: this.title,
endTime: this.endTime,
startTime: this.startTime,
address: this.address,
hdType: this.hdType,
bmTime: this.bmTime,
ebmTime: this.ebmTime,
hdCount: this.hdCount,
zyzTime: this.zyzTime,
ezyzTime: this.ezyzTime,
zyzCount: this.zyzCount,
isGm: this.isGm,
gmTime: this.gmTime,
gmeTime: this.gmeTime,
activityText: this.activityText,
images: data
}, "POST").then(res => {
if (res.code == 200) {
uni.navigateBack()
}
}).catch(e => {
uni.showToast({
title: e.data.message,
icon: "none",
});
})
}
}
}
}
</script>
<style>
</style>
<style lang="scss" scoped>
/deep/ .uni-icons{
display: none;
}
/deep/ .uni-date-x{
text-align: right;
padding: 0;
}
.form_line {
width: 702rpx;
padding: 0 24rpx;
display: flex;
align-items: center;
font-size: 30rpx;
justify-content: space-between;
height: 104rpx;
border-bottom: 1rpx solid #dadbde;
.form_right {
width: 420rpx;
}
}
.form_box {
width: 702rpx;
padding: 0 24rpx;
display: flex;
align-items: center;
font-size: 30rpx;
justify-content: space-between;
height: 104rpx;
}
.text_box {
width: 702rpx;
padding: 0 24rpx 20rpx;
}
.gap {
color: #AFADB0;
background: #F5F5F5;
opacity: 1;
padding: 10rpx 24rpx;
font-size: 30rpx;
}
.upload {
padding: 24rpx;
}
.operation {
width: 654rpx;
height: 96rpx;
margin: 32rpx 48rpx 48rpx;
text-align: center;
line-height: 96rpx;
background-color: #99241B;
color: #fff;
font-size: 36rpx;
font-weight: 600;
}
</style>

4
src/request/interface.js
View File

@ -6,8 +6,8 @@
export default {
config: {
// baseUrl: "http://192.168.0.57:8080/h5/api", //王锡
// baseUrl: "http://192.168.124.110:8088/api", //周源
// baseUrl: "http://10.0.0.48:8080/h5/api", //俞燕红
// baseUrl: "/pre", //俞燕红-跨域
// baseUrl: "http://10.0.0.36:8080/h5/api", //俞燕红
baseUrl: "https://yxx.ydool.net/h5/api", //线上
header: {
'Content-Type': 'application/json;charset=UTF-8',

BIN
src/static/detailIcon/icon0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 945 B

BIN
src/static/detailIcon/icon1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 839 B

BIN
src/static/detailIcon/icon10.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
src/static/detailIcon/icon2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 845 B

BIN
src/static/detailIcon/icon3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 464 B

BIN
src/static/detailIcon/icon4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 699 B

BIN
src/static/detailIcon/icon5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 766 B

BIN
src/static/detailIcon/icon6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 866 B

BIN
src/static/detailIcon/icon7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 540 B

BIN
src/static/detailIcon/icon8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/static/detailIcon/icon9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 838 B

2606
src/static/js/qrcode.js Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
src/static/new/tx.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

22
src/uni_modules/uni-pagination/changelog.md Normal file
View File

@ -0,0 +1,22 @@
## 1.2.2（2022-07-06）
- 修复 es 语言 i18n 错误
## 1.2.1（2021-11-22）
- 修复 vue3中某些scss变量无法找到的问题
## 1.2.0（2021-11-19）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-pagination](https://uniapp.dcloud.io/component/uniui/uni-pagination)
## 1.1.2（2021-10-08）
- 修复 current 、value 属性未监听，导致高亮样式失效的 bug
## 1.1.1（2021-08-20）
- 新增 支持国际化
## 1.1.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.7（2021-05-12）
- 新增 组件示例地址
## 1.0.6（2021-04-12）
- 新增 PC 和 移动端适配不同的 ui
## 1.0.5（2021-02-05）
- 优化 组件引用关系，通过uni_modules引用组件
## 1.0.4（2021-02-05）
- 调整为uni_modules目录规范

5
src/uni_modules/uni-pagination/components/uni-pagination/i18n/en.json Normal file
View File

@ -0,0 +1,5 @@
{
"uni-pagination.prevText": "prev",
"uni-pagination.nextText": "next",
"uni-pagination.piecePerPage": "piece/page"
}

5
src/uni_modules/uni-pagination/components/uni-pagination/i18n/es.json Normal file
View File

@ -0,0 +1,5 @@
{
"uni-pagination.prevText": "anterior",
"uni-pagination.nextText": "prxima",
"uni-pagination.piecePerPage": "Art¨ªculo/P¨¢gina"
}

5
src/uni_modules/uni-pagination/components/uni-pagination/i18n/fr.json Normal file
View File

@ -0,0 +1,5 @@
{
"uni-pagination.prevText": "précédente",
"uni-pagination.nextText": "suivante",
"uni-pagination.piecePerPage": "Articles/Pages"
}

12
src/uni_modules/uni-pagination/components/uni-pagination/i18n/index.js Normal file
View File

@ -0,0 +1,12 @@
import en from './en.json'
import es from './es.json'
import fr from './fr.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
export default {
en,
es,
fr,
'zh-Hans': zhHans,
'zh-Hant': zhHant
}

5
src/uni_modules/uni-pagination/components/uni-pagination/i18n/zh-Hans.json Normal file
View File

@ -0,0 +1,5 @@
{
"uni-pagination.prevText": "上一页",
"uni-pagination.nextText": "下一页",
"uni-pagination.piecePerPage": "条/页"
}

5
src/uni_modules/uni-pagination/components/uni-pagination/i18n/zh-Hant.json Normal file
View File

@ -0,0 +1,5 @@
{
"uni-pagination.prevText": "上一頁",
"uni-pagination.nextText": "下一頁",
"uni-pagination.piecePerPage": "條/頁"
}

463
src/uni_modules/uni-pagination/components/uni-pagination/uni-pagination.vue Normal file
View File

@ -0,0 +1,463 @@
<template>
<view class="uni-pagination">
<!-- #ifndef MP -->
<picker v-if="showPageSize === true || showPageSize === 'true'" class="select-picker" mode="selector"
:value="pageSizeIndex" :range="pageSizeRange" @change="pickerChange" @cancel="pickerClick"
@click.native="pickerClick">
<button type="default" size="mini" :plain="true">
<text>{{pageSizeRange[pageSizeIndex]}} {{piecePerPage}}</text>
<uni-icons class="select-picker-icon" type="arrowdown" size="12" color="#999"></uni-icons>
</button>
</picker>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<view class="uni-pagination__total is-phone-hide">共 {{ total }} 条</view>
<!-- #endif -->
<view class="uni-pagination__btn"
:class="currentIndex === 1 ? 'uni-pagination--disabled' : 'uni-pagination--enabled'"
:hover-class="currentIndex === 1 ? '' : 'uni-pagination--hover'" :hover-start-time="20"
:hover-stay-time="70" @click="clickLeft">
<template v-if="showIcon === true || showIcon === 'true'">
<uni-icons color="#666" size="16" type="left" />
</template>
<template v-else>
<text class="uni-pagination__child-btn">{{ prevPageText }}</text>
</template>
</view>
<view class="uni-pagination__num uni-pagination__num-flex-none">
<view class="uni-pagination__num-current">
<text class="uni-pagination__num-current-text is-pc-hide"
style="color:#409EFF">{{ currentIndex }}</text>
<text class="uni-pagination__num-current-text is-pc-hide">/{{ maxPage || 0 }}</text>
<!-- #ifndef APP-NVUE -->
<view v-for="(item, index) in paper" :key="index" :class="{ 'page--active': item === currentIndex }"
class="uni-pagination__num-tag tag--active is-phone-hide" @click.top="selectPage(item, index)">
<text>{{ item }}</text>
</view>
<!-- #endif -->
</view>
</view>
<view class="uni-pagination__btn"
:class="currentIndex >= maxPage ? 'uni-pagination--disabled' : 'uni-pagination--enabled'"
:hover-class="currentIndex === maxPage ? '' : 'uni-pagination--hover'" :hover-start-time="20"
:hover-stay-time="70" @click="clickRight">
<template v-if="showIcon === true || showIcon === 'true'">
<uni-icons color="#666" size="16" type="right" />
</template>
<template v-else>
<text class="uni-pagination__child-btn">{{ nextPageText }}</text>
</template>
</view>
</view>
</template>
<script>
/**
* Pagination 分页器
* @description 分页器组件，用于展示页码、请求数据等
* @tutorial https://ext.dcloud.net.cn/plugin?id=32
* @property {String} prevText 左侧按钮文字
* @property {String} nextText 右侧按钮文字
* @property {String} piecePerPageText 条/页文字
* @property {Number} current 当前页
* @property {Number} total 数据总量
* @property {Number} pageSize 每页数据量
* @property {Boolean} showIcon = [true|false] 是否以 icon 形式展示按钮
* @property {Boolean} showPageSize = [true|false] 是否展示每页条数
* @property {Array} pageSizeRange = [20, 50, 100, 500] 每页条数选框
* @event {Function} change 点击页码按钮时触发 ,e={type,current} current为当前页，type值为：next/prev，表示点击的是上一页还是下一个
* * @event {Function} pageSizeChange 当前每页条数改变时触发 ,e={pageSize} pageSize 为当前所选的每页条数
*/
import {
initVueI18n
} from '@dcloudio/uni-i18n'
import messages from './i18n/index.js'
const {
t
} = initVueI18n(messages)
export default {
name: 'UniPagination',
emits: ['update:modelValue', 'input', 'change', 'pageSizeChange'],
props: {
value: {
type: [Number, String],
default: 1
},
modelValue: {
type: [Number, String],
default: 1
},
prevText: {
type: String,
},
nextText: {
type: String,
},
piecePerPageText: {
type: String
},
current: {
type: [Number, String],
default: 1
},
total: {
// 数据总量
type: [Number, String],
default: 0
},
pageSize: {
// 每页数据量
type: [Number, String],
default: 10
},
showIcon: {
// 是否以 icon 形式展示按钮
type: [Boolean, String],
default: false
},
showPageSize: {
// 是否以 icon 形式展示按钮
type: [Boolean, String],
default: false
},
pagerCount: {
type: Number,
default: 7
},
pageSizeRange: {
type: Array,
default: () => [20, 50, 100, 500]
}
},
data() {
return {
pageSizeIndex: 0,
currentIndex: 1,
paperData: [],
pickerShow: false
}
},
computed: {
piecePerPage() {
return this.piecePerPageText || t('uni-pagination.piecePerPage')
},
prevPageText() {
return this.prevText || t('uni-pagination.prevText')
},
nextPageText() {
return this.nextText || t('uni-pagination.nextText')
},
maxPage() {
let maxPage = 1
let total = Number(this.total)
let pageSize = Number(this.pageSize)
if (total && pageSize) {
maxPage = Math.ceil(total / pageSize)
}
return maxPage
},
paper() {
const num = this.currentIndex
// TODO 最大页数
const pagerCount = this.pagerCount
// const total = 181
const total = this.total
const pageSize = this.pageSize
let totalArr = []
let showPagerArr = []
let pagerNum = Math.ceil(total / pageSize)
for (let i = 0; i < pagerNum; i++) {
totalArr.push(i + 1)
}
showPagerArr.push(1)
const totalNum = totalArr[totalArr.length - (pagerCount + 1) / 2]
totalArr.forEach((item, index) => {
if ((pagerCount + 1) / 2 >= num) {
if (item < pagerCount + 1 && item > 1) {
showPagerArr.push(item)
}
} else if (num + 2 <= totalNum) {
if (item > num - (pagerCount + 1) / 2 && item < num + (pagerCount + 1) / 2) {
showPagerArr.push(item)
}
} else {
if ((item > num - (pagerCount + 1) / 2 || pagerNum - pagerCount < item) && item < totalArr[
totalArr.length - 1]) {
showPagerArr.push(item)
}
}
})
if (pagerNum > pagerCount) {
if ((pagerCount + 1) / 2 >= num) {
showPagerArr[showPagerArr.length - 1] = '...'
} else if (num + 2 <= totalNum) {
showPagerArr[1] = '...'
showPagerArr[showPagerArr.length - 1] = '...'
} else {
showPagerArr[1] = '...'
}
showPagerArr.push(totalArr[totalArr.length - 1])
} else {
if ((pagerCount + 1) / 2 >= num) {} else if (num + 2 <= totalNum) {} else {
showPagerArr.shift()
showPagerArr.push(totalArr[totalArr.length - 1])
}
}
return showPagerArr
}
},
watch: {
current: {
immediate: true,
handler(val, old) {
if (val < 1) {
this.currentIndex = 1
} else {
this.currentIndex = val
}
}
},
value: {
immediate: true,
handler(val) {
if (Number(this.current) !== 1) return
if (val < 1) {
this.currentIndex = 1
} else {
this.currentIndex = val
}
}
},
pageSizeIndex(val) {
this.$emit('pageSizeChange', this.pageSizeRange[val])
}
},
methods: {
pickerChange(e) {
this.pageSizeIndex = e.detail.value
this.pickerClick()
},
pickerClick() {
// #ifdef H5
const body = document.querySelector('body')
if (!body) return
const className = 'uni-pagination-picker-show'
this.pickerShow = !this.pickerShow
if (this.pickerShow) {
body.classList.add(className)
} else {
setTimeout(() => body.classList.remove(className), 300)
}
// #endif
},
// 选择标签
selectPage(e, index) {
if (parseInt(e)) {
this.currentIndex = e
this.change('current')
} else {
let pagerNum = Math.ceil(this.total / this.pageSize)
// let pagerNum = Math.ceil(181 / this.pageSize)
// 上一页
if (index <= 1) {
if (this.currentIndex - 5 > 1) {
this.currentIndex -= 5
} else {
this.currentIndex = 1
}
return
}
// 下一页
if (index >= 6) {
if (this.currentIndex + 5 > pagerNum) {
this.currentIndex = pagerNum
} else {
this.currentIndex += 5
}
return
}
}
},
clickLeft() {
if (Number(this.currentIndex) === 1) {
return
}
this.currentIndex -= 1
this.change('prev')
},
clickRight() {
if (Number(this.currentIndex) >= this.maxPage) {
return
}
this.currentIndex += 1
this.change('next')
},
change(e) {
this.$emit('input', this.currentIndex)
this.$emit('update:modelValue', this.currentIndex)
this.$emit('change', {
type: e,
current: this.currentIndex
})
}
}
}
</script>
<style lang="scss" scoped>
$uni-primary: #2979ff;
.uni-pagination {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
position: relative;
overflow: hidden;
flex-direction: row;
justify-content: center;
align-items: center;
}
.uni-pagination__total {
font-size: 14px;
color: #999;
margin-right: 15px;
}
.uni-pagination__btn {
/* #ifndef APP-NVUE */
display: flex;
cursor: pointer;
/* #endif */
padding: 0 8px;
line-height: 30px;
font-size: 12px;
position: relative;
background-color: #F0F0F0;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
border-radius: 5px;
// border-width: 1px;
// border-style: solid;
// border-color: $uni-border-color;
}
.uni-pagination__child-btn {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
font-size: 12px;
position: relative;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
color: #666;
font-size: 12px;
}
.uni-pagination__num {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
justify-content: center;
align-items: center;
height: 30px;
line-height: 30px;
font-size: 12px;
color: #666;
margin: 0 5px;
}
.uni-pagination__num-tag {
/* #ifdef H5 */
cursor: pointer;
min-width: 30px;
/* #endif */
margin: 0 5px;
height: 30px;
text-align: center;
line-height: 30px;
// border: 1px red solid;
color: #999;
border-radius: 4px;
// border-width: 1px;
// border-style: solid;
// border-color: $uni-border-color;
}
.uni-pagination__num-current {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
}
.uni-pagination__num-current-text {
font-size: 15px;
}
.uni-pagination--enabled {
color: #333333;
opacity: 1;
}
.uni-pagination--disabled {
opacity: 0.5;
/* #ifdef H5 */
cursor: default;
/* #endif */
}
.uni-pagination--hover {
color: rgba(0, 0, 0, 0.6);
background-color: #eee;
}
.tag--active:hover {
color: $uni-primary;
}
.page--active {
color: #fff;
background-color: $uni-primary;
}
.page--active:hover {
color: #fff;
}
/* #ifndef APP-NVUE */
.is-pc-hide {
display: block;
}
.is-phone-hide {
display: none;
}
@media screen and (min-width: 450px) {
.is-pc-hide {
display: none;
}
.is-phone-hide {
display: block;
}
.uni-pagination__num-flex-none {
flex: none;
}
}
/* #endif */
</style>

86
src/uni_modules/uni-pagination/package.json Normal file
View File

@ -0,0 +1,86 @@
{
"id": "uni-pagination",
"displayName": "uni-pagination 分页器",
"version": "1.2.2",
"description": "Pagination 分页器组件，用于展示页码、请求数据等。",
"keywords": [
"uni-ui",
"uniui",
"分页器",
"页码"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": ["uni-scss","uni-icons"],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}

11
src/uni_modules/uni-pagination/readme.md Normal file
View File

@ -0,0 +1,11 @@
## Pagination 分页器
> **组件名：uni-pagination**
> 代码块： `uPagination`
分页器组件，用于展示页码、请求数据等。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-pagination)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839

23
src/uni_modules/uni-table/changelog.md Normal file
View File

@ -0,0 +1,23 @@
## 1.2.1（2022-06-06）
- 修复 微信小程序存在无使用组件的问题
## 1.2.0（2021-11-19）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-table](https://uniapp.dcloud.io/component/uniui/uni-table)
## 1.1.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.7（2021-07-08）
- 新增 uni-th 支持 date 日期筛选范围
## 1.0.6（2021-07-05）
- 新增 uni-th 支持 range 筛选范围
## 1.0.5（2021-06-28）
- 新增 uni-th 筛选功能
## 1.0.4（2021-05-12）
- 新增 示例地址
- 修复 示例项目缺少组件的Bug
## 1.0.3（2021-04-16）
- 新增 sortable 属性，是否开启单列排序
- 优化 表格多选逻辑
## 1.0.2（2021-03-22）
- uni-tr 添加 disabled 属性，用于 type=selection 时，设置某行是否可由全选按钮控制
## 1.0.1（2021-02-05）
- 调整为uni_modules目录规范

455
src/uni_modules/uni-table/components/uni-table/uni-table.vue Normal file
View File

@ -0,0 +1,455 @@
<template>
<view class="uni-table-scroll" :class="{ 'table--border': border, 'border-none': !noData }">
<!-- #ifdef H5 -->
<table class="uni-table" border="0" cellpadding="0" cellspacing="0" :class="{ 'table--stripe': stripe }" :style="{ 'min-width': minWidth + 'px' }">
<slot></slot>
<view v-if="noData" class="uni-table-loading">
<view class="uni-table-text" :class="{ 'empty-border': border }">{{ emptyText }}</view>
</view>
<view v-if="loading" class="uni-table-mask" :class="{ 'empty-border': border }"><div class="uni-table--loader"></div></view>
</table>
<!-- #endif -->
<!-- #ifndef H5 -->
<view class="uni-table" :style="{ 'min-width': minWidth + 'px' }" :class="{ 'table--stripe': stripe }">
<slot></slot>
<view v-if="noData" class="uni-table-loading">
<view class="uni-table-text" :class="{ 'empty-border': border }">{{ emptyText }}</view>
</view>
<view v-if="loading" class="uni-table-mask" :class="{ 'empty-border': border }"><div class="uni-table--loader"></div></view>
</view>
<!-- #endif -->
</view>
</template>
<script>
/**
* Table 表格
* @description 用于展示多条结构类似的数据
* @tutorial https://ext.dcloud.net.cn/plugin?id=3270
* @property {Boolean} border 是否带有纵向边框
* @property {Boolean} stripe 是否显示斑马线
* @property {Boolean} type 是否开启多选
* @property {String} emptyText 空数据时显示的文本内容
* @property {Boolean} loading 显示加载中
* @event {Function} selection-change 开启多选时，当选择项发生变化时会触发该事件
*/
export default {
name: 'uniTable',
options: {
virtualHost: true
},
emits:['selection-change'],
props: {
data: {
type: Array,
default() {
return []
}
},
// 是否有竖线
border: {
type: Boolean,
default: false
},
// 是否显示斑马线
stripe: {
type: Boolean,
default: false
},
// 多选
type: {
type: String,
default: ''
},
// 没有更多数据
emptyText: {
type: String,
default: '没有更多数据'
},
loading: {
type: Boolean,
default: false
},
rowKey: {
type: String,
default: ''
}
},
data() {
return {
noData: true,
minWidth: 0,
multiTableHeads: []
}
},
watch: {
loading(val) {},
data(newVal) {
let theadChildren = this.theadChildren
let rowspan = 1
if (this.theadChildren) {
rowspan = this.theadChildren.rowspan
}
// this.trChildren.length - rowspan
this.noData = false
// this.noData = newVal.length === 0
}
},
created() {
// 定义tr的实例数组
this.trChildren = []
this.thChildren = []
this.theadChildren = null
this.backData = []
this.backIndexData = []
},
methods: {
isNodata() {
let theadChildren = this.theadChildren
let rowspan = 1
if (this.theadChildren) {
rowspan = this.theadChildren.rowspan
}
this.noData = this.trChildren.length - rowspan <= 0
},
/**
* 选中所有
*/
selectionAll() {
let startIndex = 1
let theadChildren = this.theadChildren
if (!this.theadChildren) {
theadChildren = this.trChildren[0]
} else {
startIndex = theadChildren.rowspan - 1
}
let isHaveData = this.data && this.data.length.length > 0
theadChildren.checked = true
theadChildren.indeterminate = false
this.trChildren.forEach((item, index) => {
if (!item.disabled) {
item.checked = true
if (isHaveData && item.keyValue) {
const row = this.data.find(v => v[this.rowKey] === item.keyValue)
if (!this.backData.find(v => v[this.rowKey] === row[this.rowKey])) {
this.backData.push(row)
}
}
if (index > (startIndex - 1) && this.backIndexData.indexOf(index - startIndex) === -1) {
this.backIndexData.push(index - startIndex)
}
}
})
// this.backData = JSON.parse(JSON.stringify(this.data))
this.$emit('selection-change', {
detail: {
value: this.backData,
index: this.backIndexData
}
})
},
/**
* 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
*/
toggleRowSelection(row, selected) {
// if (!this.theadChildren) return
row = [].concat(row)
this.trChildren.forEach((item, index) => {
// if (item.keyValue) {
const select = row.findIndex(v => {
//
if (typeof v === 'number') {
return v === index - 1
} else {
return v[this.rowKey] === item.keyValue
}
})
let ischeck = item.checked
if (select !== -1) {
if (typeof selected === 'boolean') {
item.checked = selected
} else {
item.checked = !item.checked
}
if (ischeck !== item.checked) {
this.check(item.rowData||item, item.checked, item.rowData?item.keyValue:null, true)
}
}
// }
})
this.$emit('selection-change', {
detail: {
value: this.backData,
index:this.backIndexData
}
})
},
/**
* 用于多选表格，清空用户的选择
*/
clearSelection() {
let theadChildren = this.theadChildren
if (!this.theadChildren) {
theadChildren = this.trChildren[0]
}
// if (!this.theadChildren) return
theadChildren.checked = false
theadChildren.indeterminate = false
this.trChildren.forEach(item => {
// if (item.keyValue) {
item.checked = false
// }
})
this.backData = []
this.backIndexData = []
this.$emit('selection-change', {
detail: {
value: [],
index: []
}
})
},
/**
* 用于多选表格，切换所有行的选中状态
*/
toggleAllSelection() {
let list = []
let startIndex = 1
let theadChildren = this.theadChildren
if (!this.theadChildren) {
theadChildren = this.trChildren[0]
} else {
startIndex = theadChildren.rowspan - 1
}
this.trChildren.forEach((item, index) => {
if (!item.disabled) {
if (index > (startIndex - 1) ) {
list.push(index-startIndex)
}
}
})
this.toggleRowSelection(list)
},
/**
* 选中\取消选中
* @param {Object} child
* @param {Object} check
* @param {Object} rowValue
*/
check(child, check, keyValue, emit) {
let theadChildren = this.theadChildren
if (!this.theadChildren) {
theadChildren = this.trChildren[0]
}
let childDomIndex = this.trChildren.findIndex((item, index) => child === item)
if(childDomIndex < 0){
childDomIndex = this.data.findIndex(v=>v[this.rowKey] === keyValue) + 1
}
const dataLen = this.trChildren.filter(v => !v.disabled && v.keyValue).length
if (childDomIndex === 0) {
check ? this.selectionAll() : this.clearSelection()
return
}
if (check) {
if (keyValue) {
this.backData.push(child)
}
this.backIndexData.push(childDomIndex - 1)
} else {
const index = this.backData.findIndex(v => v[this.rowKey] === keyValue)
const idx = this.backIndexData.findIndex(item => item === childDomIndex - 1)
if (keyValue) {
this.backData.splice(index, 1)
}
this.backIndexData.splice(idx, 1)
}
const domCheckAll = this.trChildren.find((item, index) => index > 0 && !item.checked && !item.disabled)
if (!domCheckAll) {
theadChildren.indeterminate = false
theadChildren.checked = true
} else {
theadChildren.indeterminate = true
theadChildren.checked = false
}
if (this.backIndexData.length === 0) {
theadChildren.indeterminate = false
}
if (!emit) {
this.$emit('selection-change', {
detail: {
value: this.backData,
index: this.backIndexData
}
})
}
}
}
}
</script>
<style lang="scss">
$border-color: #ebeef5;
.uni-table-scroll {
width: 100%;
/* #ifndef APP-NVUE */
overflow-x: auto;
/* #endif */
}
.uni-table {
position: relative;
width: 100%;
border-radius: 5px;
// box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.1);
background-color: #fff;
/* #ifndef APP-NVUE */
box-sizing: border-box;
display: table;
overflow-x: auto;
::v-deep .uni-table-tr:nth-child(n + 2) {
&:hover {
background-color: #f5f7fa;
}
}
::v-deep .uni-table-thead {
.uni-table-tr {
// background-color: #f5f7fa;
&:hover {
background-color:#fafafa;
}
}
}
/* #endif */
}
.table--border {
border: 1px $border-color solid;
border-right: none;
}
.border-none {
/* #ifndef APP-NVUE */
border-bottom: none;
/* #endif */
}
.table--stripe {
/* #ifndef APP-NVUE */
::v-deep .uni-table-tr:nth-child(2n + 3) {
background-color: #fafafa;
}
/* #endif */
}
/* 表格加载、无数据样式 */
.uni-table-loading {
position: relative;
/* #ifndef APP-NVUE */
display: table-row;
/* #endif */
height: 50px;
line-height: 50px;
overflow: hidden;
box-sizing: border-box;
}
.empty-border {
border-right: 1px $border-color solid;
}
.uni-table-text {
position: absolute;
right: 0;
left: 0;
text-align: center;
font-size: 14px;
color: #999;
}
.uni-table-mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.8);
z-index: 99;
/* #ifndef APP-NVUE */
display: flex;
margin: auto;
transition: all 0.5s;
/* #endif */
justify-content: center;
align-items: center;
}
.uni-table--loader {
width: 30px;
height: 30px;
border: 2px solid #aaa;
// border-bottom-color: transparent;
border-radius: 50%;
/* #ifndef APP-NVUE */
animation: 2s uni-table--loader linear infinite;
/* #endif */
position: relative;
}
@keyframes uni-table--loader {
0% {
transform: rotate(360deg);
}
10% {
border-left-color: transparent;
}
20% {
border-bottom-color: transparent;
}
30% {
border-right-color: transparent;
}
40% {
border-top-color: transparent;
}
50% {
transform: rotate(0deg);
}
60% {
border-top-color: transparent;
}
70% {
border-left-color: transparent;
}
80% {
border-bottom-color: transparent;
}
90% {
border-right-color: transparent;
}
100% {
transform: rotate(-360deg);
}
}
</style>

29
src/uni_modules/uni-table/components/uni-tbody/uni-tbody.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<!-- #ifdef H5 -->
<tbody>
<slot></slot>
</tbody>
<!-- #endif -->
<!-- #ifndef H5 -->
<view><slot></slot></view>
<!-- #endif -->
</template>
<script>
export default {
name: 'uniBody',
options: {
virtualHost: true
},
data() {
return {
}
},
created() {},
methods: {}
}
</script>
<style>
</style>

90
src/uni_modules/uni-table/components/uni-td/uni-td.vue Normal file
View File

@ -0,0 +1,90 @@
<template>
<!-- #ifdef H5 -->
<td class="uni-table-td" :rowspan="rowspan" :colspan="colspan" :class="{'table--border':border}" :style="{width:width + 'px','text-align':align}">
<slot></slot>
</td>
<!-- #endif -->
<!-- #ifndef H5 -->
<!-- :class="{'table--border':border}" -->
<view class="uni-table-td" :class="{'table--border':border}" :style="{width:width + 'px','text-align':align}">
<slot></slot>
</view>
<!-- #endif -->
</template>
<script>
/**
* Td 单元格
* @description 表格中的标准单元格组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=3270
* @property {Number} align = [left|center|right] 单元格对齐方式
*/
export default {
name: 'uniTd',
options: {
virtualHost: true
},
props: {
width: {
type: [String, Number],
default: ''
},
align: {
type: String,
default: 'left'
},
rowspan: {
type: [Number,String],
default: 1
},
colspan: {
type: [Number,String],
default: 1
}
},
data() {
return {
border: false
};
},
created() {
this.root = this.getTable()
this.border = this.root.border
},
methods: {
/**
* 获取父元素实例
*/
getTable() {
let parent = this.$parent;
let parentName = parent.$options.name;
while (parentName !== 'uniTable') {
parent = parent.$parent;
if (!parent) return false;
parentName = parent.$options.name;
}
return parent;
},
}
}
</script>
<style lang="scss">
$border-color:#EBEEF5;
.uni-table-td {
display: table-cell;
padding: 8px 10px;
font-size: 14px;
border-bottom: 1px $border-color solid;
font-weight: 400;
color: #606266;
line-height: 23px;
box-sizing: border-box;
}
.table--border {
border-right: 1px $border-color solid;
}
</style>

503
src/uni_modules/uni-table/components/uni-th/filter-dropdown.vue Normal file
View File

@ -0,0 +1,503 @@
<template>
<view class="uni-filter-dropdown">
<view class="dropdown-btn" @click="onDropdown">
<view class="icon-select" :class="{active: canReset}" v-if="isSelect || isRange"></view>
<view class="icon-search" :class="{active: canReset}" v-if="isSearch">
<view class="icon-search-0"></view>
<view class="icon-search-1"></view>
</view>
<view class="icon-calendar" :class="{active: canReset}" v-if="isDate">
<view class="icon-calendar-0"></view>
<view class="icon-calendar-1"></view>
</view>
</view>
<view class="uni-dropdown-cover" v-if="isOpened" @click="handleClose"></view>
<view class="dropdown-popup dropdown-popup-right" v-if="isOpened" @click.stop>
<!-- select-->
<view v-if="isSelect" class="list">
<label class="flex-r a-i-c list-item" v-for="(item,index) in dataList" :key="index"
@click="onItemClick($event, index)">
<check-box class="check" :checked="item.checked" />
<view class="checklist-content">
<text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
</view>
</label>
</view>
<view v-if="isSelect" class="flex-r opera-area">
<view class="flex-f btn btn-default" :class="{disable: !canReset}" @click="handleSelectReset">
{{resource.reset}}</view>
<view class="flex-f btn btn-submit" @click="handleSelectSubmit">{{resource.submit}}</view>
</view>
<!-- search -->
<view v-if="isSearch" class="search-area">
<input class="search-input" v-model="filterValue" />
</view>
<view v-if="isSearch" class="flex-r opera-area">
<view class="flex-f btn btn-submit" @click="handleSearchSubmit">{{resource.search}}</view>
<view class="flex-f btn btn-default" :class="{disable: !canReset}" @click="handleSearchReset">
{{resource.reset}}</view>
</view>
<!-- range -->
<view v-if="isRange">
<view class="input-label">{{resource.gt}}</view>
<input class="input" v-model="gtValue" />
<view class="input-label">{{resource.lt}}</view>
<input class="input" v-model="ltValue" />
</view>
<view v-if="isRange" class="flex-r opera-area">
<view class="flex-f btn btn-default" :class="{disable: !canReset}" @click="handleRangeReset">
{{resource.reset}}</view>
<view class="flex-f btn btn-submit" @click="handleRangeSubmit">{{resource.submit}}</view>
</view>
<!-- date -->
<view v-if="isDate">
<uni-datetime-picker ref="datetimepicker" :value="dateRange" type="datetimerange" return-type="timestamp" @change="datetimechange" @maskClick="timepickerclose">
<view></view>
</uni-datetime-picker>
</view>
</view>
</view>
</template>
<script>
import checkBox from '../uni-tr/table-checkbox.vue'
const resource = {
"reset": "重置",
"search": "搜索",
"submit": "确定",
"filter": "筛选",
"gt": "大于等于",
"lt": "小于等于",
"date": "日期范围"
}
const DropdownType = {
Select: "select",
Search: "search",
Range: "range",
Date: "date",
Timestamp: "timestamp"
}
export default {
name: 'FilterDropdown',
emits:['change'],
components: {
checkBox
},
options: {
virtualHost: true
},
props: {
filterType: {
type: String,
default: DropdownType.Select
},
filterData: {
type: Array,
default () {
return []
}
},
mode: {
type: String,
default: 'default'
},
map: {
type: Object,
default () {
return {
text: 'text',
value: 'value'
}
}
}
},
computed: {
canReset() {
if (this.isSearch) {
return this.filterValue.length > 0
}
if (this.isSelect) {
return this.checkedValues.length > 0
}
if (this.isRange) {
return (this.gtValue.length > 0 && this.ltValue.length > 0)
}
if (this.isDate) {
return this.dateSelect.length > 0
}
return false
},
isSelect() {
return this.filterType === DropdownType.Select
},
isSearch() {
return this.filterType === DropdownType.Search
},
isRange() {
return this.filterType === DropdownType.Range
},
isDate() {
return (this.filterType === DropdownType.Date || this.filterType === DropdownType.Timestamp)
}
},
watch: {
filterData(newVal) {
this._copyFilters()
},
indeterminate(newVal) {
this.isIndeterminate = newVal
}
},
data() {
return {
resource,
enabled: true,
isOpened: false,
dataList: [],
filterValue: '',
checkedValues: [],
gtValue: '',
ltValue: '',
dateRange: [],
dateSelect: []
};
},
created() {
this._copyFilters()
},
methods: {
_copyFilters() {
let dl = JSON.parse(JSON.stringify(this.filterData))
for (let i = 0; i < dl.length; i++) {
if (dl[i].checked === undefined) {
dl[i].checked = false
}
}
this.dataList = dl
},
openPopup() {
this.isOpened = true
if (this.isDate) {
this.$nextTick(() => {
if (!this.dateRange.length) {
this.resetDate()
}
this.$refs.datetimepicker.show()
})
}
},
closePopup() {
this.isOpened = false
},
handleClose(e) {
this.closePopup()
},
resetDate() {
let date = new Date()
let dateText = date.toISOString().split('T')[0]
this.dateRange = [dateText + ' 0:00:00', dateText + ' 23:59:59']
},
onDropdown(e) {
this.openPopup()
},
onItemClick(e, index) {
let items = this.dataList
let listItem = items[index]
if (listItem.checked === undefined) {
items[index].checked = true
} else {
items[index].checked = !listItem.checked
}
let checkvalues = []
for (let i = 0; i < items.length; i++) {
const item = items[i]
if (item.checked) {
checkvalues.push(item.value)
}
}
this.checkedValues = checkvalues
},
datetimechange(e) {
this.closePopup()
this.dateRange = e
this.dateSelect = e
this.$emit('change', {
filterType: this.filterType,
filter: e
})
},
timepickerclose(e) {
this.closePopup()
},
handleSelectSubmit() {
this.closePopup()
this.$emit('change', {
filterType: this.filterType,
filter: this.checkedValues
})
},
handleSelectReset() {
if (!this.canReset) {
return;
}
var items = this.dataList
for (let i = 0; i < items.length; i++) {
let item = items[i]
this.$set(item, 'checked', false)
}
this.checkedValues = []
this.handleSelectSubmit()
},
handleSearchSubmit() {
this.closePopup()
this.$emit('change', {
filterType: this.filterType,
filter: this.filterValue
})
},
handleSearchReset() {
if (!this.canReset) {
return;
}
this.filterValue = ''
this.handleSearchSubmit()
},
handleRangeSubmit(isReset) {
this.closePopup()
this.$emit('change', {
filterType: this.filterType,
filter: isReset === true ? [] : [parseInt(this.gtValue), parseInt(this.ltValue)]
})
},
handleRangeReset() {
if (!this.canReset) {
return;
}
this.gtValue = ''
this.ltValue = ''
this.handleRangeSubmit(true)
}
}
}
</script>
<style lang="scss">
.flex-r {
display: flex;
flex-direction: row;
}
.flex-f {
flex: 1;
}
.a-i-c {
align-items: center;
}
.j-c-c {
justify-content: center;
}
.icon-select {
width: 14px;
height: 16px;
border: solid 6px transparent;
border-top: solid 6px #ddd;
border-bottom: none;
background-color: #ddd;
background-clip: content-box;
box-sizing: border-box;
}
.icon-select.active {
background-color: #1890ff;
border-top-color: #1890ff;
}
.icon-search {
width: 12px;
height: 16px;
position: relative;
}
.icon-search-0 {
border: 2px solid #ddd;
border-radius: 8px;
width: 7px;
height: 7px;
}
.icon-search-1 {
position: absolute;
top: 8px;
right: 0;
width: 1px;
height: 7px;
background-color: #ddd;
transform: rotate(-45deg);
}
.icon-search.active .icon-search-0 {
border-color: #1890ff;
}
.icon-search.active .icon-search-1 {
background-color: #1890ff;
}
.icon-calendar {
color: #ddd;
width: 14px;
height: 16px;
}
.icon-calendar-0 {
height: 4px;
margin-top: 3px;
margin-bottom: 1px;
background-color: #ddd;
border-radius: 2px 2px 1px 1px;
position: relative;
}
.icon-calendar-0:before, .icon-calendar-0:after {
content: '';
position: absolute;
top: -3px;
width: 4px;
height: 3px;
border-radius: 1px;
background-color: #ddd;
}
.icon-calendar-0:before {
left: 2px;
}
.icon-calendar-0:after {
right: 2px;
}
.icon-calendar-1 {
height: 9px;
background-color: #ddd;
border-radius: 1px 1px 2px 2px;
}
.icon-calendar.active {
color: #1890ff;
}
.icon-calendar.active .icon-calendar-0,
.icon-calendar.active .icon-calendar-1,
.icon-calendar.active .icon-calendar-0:before,
.icon-calendar.active .icon-calendar-0:after {
background-color: #1890ff;
}
.uni-filter-dropdown {
position: relative;
font-weight: normal;
}
.dropdown-popup {
position: absolute;
top: 100%;
background-color: #fff;
box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;
min-width: 150px;
z-index: 1000;
}
.dropdown-popup-left {
left: 0;
}
.dropdown-popup-right {
right: 0;
}
.uni-dropdown-cover {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: transparent;
z-index: 100;
}
.list {
margin-top: 5px;
margin-bottom: 5px;
}
.list-item {
padding: 5px 10px;
text-align: left;
}
.list-item:hover {
background-color: #f0f0f0;
}
.check {
margin-right: 5px;
}
.search-area {
padding: 10px;
}
.search-input {
font-size: 12px;
border: 1px solid #f0f0f0;
border-radius: 3px;
padding: 2px 5px;
min-width: 150px;
text-align: left;
}
.input-label {
margin: 10px 10px 5px 10px;
text-align: left;
}
.input {
font-size: 12px;
border: 1px solid #f0f0f0;
border-radius: 3px;
margin: 10px;
padding: 2px 5px;
min-width: 150px;
text-align: left;
}
.opera-area {
cursor: default;
border-top: 1px solid #ddd;
padding: 5px;
}
.opera-area .btn {
font-size: 12px;
border-radius: 3px;
margin: 5px;
padding: 4px 4px;
}
.btn-default {
border: 1px solid #ddd;
}
.btn-default.disable {
border-color: transparent;
}
.btn-submit {
background-color: #1890ff;
color: #ffffff;
}
</style>

278
src/uni_modules/uni-table/components/uni-th/uni-th.vue Normal file
View File

@ -0,0 +1,278 @@
<template>
<!-- #ifdef H5 -->
<th :rowspan="rowspan" :colspan="colspan" class="uni-table-th" :class="{ 'table--border': border }" :style="{ width: customWidth + 'px', 'text-align': align }">
<view class="uni-table-th-row">
<view class="uni-table-th-content" :style="{ 'justify-content': contentAlign }" @click="sort">
<slot></slot>
<view v-if="sortable" class="arrow-box">
<text class="arrow up" :class="{ active: ascending }" @click.stop="ascendingFn"></text>
<text class="arrow down" :class="{ active: descending }" @click.stop="descendingFn"></text>
</view>
</view>
<dropdown v-if="filterType || filterData.length" :filterData="filterData" :filterType="filterType" @change="ondropdown"></dropdown>
</view>
</th>
<!-- #endif -->
<!-- #ifndef H5 -->
<view class="uni-table-th" :class="{ 'table--border': border }" :style="{ width: customWidth + 'px', 'text-align': align }"><slot></slot></view>
<!-- #endif -->
</template>
<script>
// #ifdef H5
import dropdown from './filter-dropdown.vue'
// #endif
/**
* Th 表头
* @description 表格内的表头单元格组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=3270
* @property {Number | String} width 单元格宽度（支持纯数字、携带单位px或rpx）
* @property {Boolean} sortable 是否启用排序
* @property {Number} align = [left|center|right] 单元格对齐方式
* @value left 单元格文字左侧对齐
* @value center 单元格文字居中
* @value right 单元格文字右侧对齐
* @property {Array} filterData 筛选数据
* @property {String} filterType [search|select] 筛选类型
* @value search 关键字搜素
* @value select 条件选择
* @event {Function} sort-change 排序触发事件
*/
export default {
name: 'uniTh',
options: {
virtualHost: true
},
components: {
// #ifdef H5
dropdown
// #endif
},
emits:['sort-change','filter-change'],
props: {
width: {
type: [String, Number],
default: ''
},
align: {
type: String,
default: 'left'
},
rowspan: {
type: [Number, String],
default: 1
},
colspan: {
type: [Number, String],
default: 1
},
sortable: {
type: Boolean,
default: false
},
filterType: {
type: String,
default: ""
},
filterData: {
type: Array,
default () {
return []
}
}
},
data() {
return {
border: false,
ascending: false,
descending: false
}
},
computed: {
// 根据props中的width属性 自动匹配当前th的宽度(px)
customWidth(){
if(typeof this.width === 'number'){
return this.width
} else if(typeof this.width === 'string') {
let regexHaveUnitPx = new RegExp(/^[1-9][0-9]*px$/g)
let regexHaveUnitRpx = new RegExp(/^[1-9][0-9]*rpx$/g)
let regexHaveNotUnit = new RegExp(/^[1-9][0-9]*$/g)
if (this.width.match(regexHaveUnitPx) !== null) { // 携带了 px
return this.width.replace('px', '')
} else if (this.width.match(regexHaveUnitRpx) !== null) { // 携带了 rpx
let numberRpx = Number(this.width.replace('rpx', ''))
let widthCoe = uni.getSystemInfoSync().screenWidth / 750
return Math.round(numberRpx * widthCoe)
} else if (this.width.match(regexHaveNotUnit) !== null) { // 未携带 rpx或px 的纯数字 String
return this.width
} else { // 不符合格式
return ''
}
} else {
return ''
}
},
contentAlign() {
let align = 'left'
switch (this.align) {
case 'left':
align = 'flex-start'
break
case 'center':
align = 'center'
break
case 'right':
align = 'flex-end'
break
}
return align
}
},
created() {
this.root = this.getTable('uniTable')
this.rootTr = this.getTable('uniTr')
this.rootTr.minWidthUpdate(this.customWidth ? this.customWidth : 140)
this.border = this.root.border
this.root.thChildren.push(this)
},
methods: {
sort() {
if (!this.sortable) return
this.clearOther()
if (!this.ascending && !this.descending) {
this.ascending = true
this.$emit('sort-change', { order: 'ascending' })
return
}
if (this.ascending && !this.descending) {
this.ascending = false
this.descending = true
this.$emit('sort-change', { order: 'descending' })
return
}
if (!this.ascending && this.descending) {
this.ascending = false
this.descending = false
this.$emit('sort-change', { order: null })
}
},
ascendingFn() {
this.clearOther()
this.ascending = !this.ascending
this.descending = false
this.$emit('sort-change', { order: this.ascending ? 'ascending' : null })
},
descendingFn() {
this.clearOther()
this.descending = !this.descending
this.ascending = false
this.$emit('sort-change', { order: this.descending ? 'descending' : null })
},
clearOther() {
this.root.thChildren.map(item => {
if (item !== this) {
item.ascending = false
item.descending = false
}
return item
})
},
ondropdown(e) {
this.$emit("filter-change", e)
},
/**
* 获取父元素实例
*/
getTable(name) {
let parent = this.$parent
let parentName = parent.$options.name
while (parentName !== name) {
parent = parent.$parent
if (!parent) return false
parentName = parent.$options.name
}
return parent
}
}
}
</script>
<style lang="scss">
$border-color: #ebeef5;
.uni-table-th {
padding: 12px 10px;
/* #ifndef APP-NVUE */
display: table-cell;
box-sizing: border-box;
/* #endif */
font-size: 14px;
font-weight: bold;
color: #909399;
border-bottom: 1px $border-color solid;
}
.uni-table-th-row {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
}
.table--border {
border-right: 1px $border-color solid;
}
.uni-table-th-content {
display: flex;
align-items: center;
flex: 1;
}
.arrow-box {
}
.arrow {
display: block;
position: relative;
width: 10px;
height: 8px;
// border: 1px red solid;
left: 5px;
overflow: hidden;
cursor: pointer;
}
.down {
top: 3px;
::after {
content: '';
width: 8px;
height: 8px;
position: absolute;
left: 2px;
top: -5px;
transform: rotate(45deg);
background-color: #ccc;
}
&.active {
::after {
background-color: #007aff;
}
}
}
.up {
::after {
content: '';
width: 8px;
height: 8px;
position: absolute;
left: 2px;
top: 5px;
transform: rotate(45deg);
background-color: #ccc;
}
&.active {
::after {
background-color: #007aff;
}
}
}
</style>

129
src/uni_modules/uni-table/components/uni-thead/uni-thead.vue Normal file
View File

@ -0,0 +1,129 @@
<template>
<!-- #ifdef H5 -->
<thead class="uni-table-thead">
<tr class="uni-table-tr">
<th :rowspan="rowspan" colspan="1" class="checkbox" :class="{ 'tr-table--border': border }">
<table-checkbox :indeterminate="indeterminate" :checked="checked" @checkboxSelected="checkboxSelected"></table-checkbox>
</th>
</tr>
<slot></slot>
</thead>
<!-- #endif -->
<!-- #ifndef H5 -->
<view class="uni-table-thead"><slot></slot></view>
<!-- #endif -->
</template>
<script>
import tableCheckbox from '../uni-tr/table-checkbox.vue'
export default {
name: 'uniThead',
components: {
tableCheckbox
},
options: {
virtualHost: true
},
data() {
return {
border: false,
selection: false,
rowspan: 1,
indeterminate: false,
checked: false
}
},
created() {
this.root = this.getTable()
// #ifdef H5
this.root.theadChildren = this
// #endif
this.border = this.root.border
this.selection = this.root.type
},
methods: {
init(self) {
this.rowspan++
},
checkboxSelected(e) {
this.indeterminate = false
const backIndexData = this.root.backIndexData
const data = this.root.trChildren.filter(v => !v.disabled && v.keyValue)
if (backIndexData.length === data.length) {
this.checked = false
this.root.clearSelection()
} else {
this.checked = true
this.root.selectionAll()
}
},
/**
* 获取父元素实例
*/
getTable(name = 'uniTable') {
let parent = this.$parent
let parentName = parent.$options.name
while (parentName !== name) {
parent = parent.$parent
if (!parent) return false
parentName = parent.$options.name
}
return parent
}
}
}
</script>
<style lang="scss">
$border-color: #ebeef5;
.uni-table-thead {
display: table-header-group;
}
.uni-table-tr {
/* #ifndef APP-NVUE */
display: table-row;
transition: all 0.3s;
box-sizing: border-box;
/* #endif */
border: 1px red solid;
background-color: #fafafa;
}
.checkbox {
padding: 0 8px;
width: 26px;
padding-left: 12px;
/* #ifndef APP-NVUE */
display: table-cell;
vertical-align: middle;
/* #endif */
color: #333;
font-weight: 500;
border-bottom: 1px $border-color solid;
font-size: 14px;
// text-align: center;
}
.tr-table--border {
border-right: 1px $border-color solid;
}
/* #ifndef APP-NVUE */
.uni-table-tr {
::v-deep .uni-table-th {
&.table--border:last-child {
// border-right: none;
}
}
::v-deep .uni-table-td {
&.table--border:last-child {
// border-right: none;
}
}
}
/* #endif */
</style>

179
src/uni_modules/uni-table/components/uni-tr/table-checkbox.vue Normal file
View File

@ -0,0 +1,179 @@
<template>
<view class="uni-table-checkbox" @click="selected">
<view v-if="!indeterminate" class="checkbox__inner" :class="{'is-checked':isChecked,'is-disable':isDisabled}">
<view class="checkbox__inner-icon"></view>
</view>
<view v-else class="checkbox__inner checkbox--indeterminate">
<view class="checkbox__inner-icon"></view>
</view>
</view>
</template>
<script>
export default {
name: 'TableCheckbox',
emits:['checkboxSelected'],
props: {
indeterminate: {
type: Boolean,
default: false
},
checked: {
type: [Boolean,String],
default: false
},
disabled: {
type: Boolean,
default: false
},
index: {
type: Number,
default: -1
},
cellData: {
type: Object,
default () {
return {}
}
}
},
watch:{
checked(newVal){
if(typeof this.checked === 'boolean'){
this.isChecked = newVal
}else{
this.isChecked = true
}
},
indeterminate(newVal){
this.isIndeterminate = newVal
}
},
data() {
return {
isChecked: false,
isDisabled: false,
isIndeterminate:false
}
},
created() {
if(typeof this.checked === 'boolean'){
this.isChecked = this.checked
}
this.isDisabled = this.disabled
},
methods: {
selected() {
if (this.isDisabled) return
this.isIndeterminate = false
this.isChecked = !this.isChecked
this.$emit('checkboxSelected', {
checked: this.isChecked,
data: this.cellData
})
}
}
}
</script>
<style lang="scss">
$checked-color: #007aff;
$border-color: #DCDFE6;
$disable:0.4;
.uni-table-checkbox {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: relative;
margin: 5px 0;
cursor: pointer;
// 多选样式
.checkbox__inner {
/* #ifndef APP-NVUE */
flex-shrink: 0;
box-sizing: border-box;
/* #endif */
position: relative;
width: 16px;
height: 16px;
border: 1px solid $border-color;
border-radius: 2px;
background-color: #fff;
z-index: 1;
.checkbox__inner-icon {
position: absolute;
/* #ifdef APP-NVUE */
top: 2px;
/* #endif */
/* #ifndef APP-NVUE */
top: 2px;
/* #endif */
left: 5px;
height: 7px;
width: 3px;
border: 1px solid #fff;
border-left: 0;
border-top: 0;
opacity: 0;
transform-origin: center;
transform: rotate(45deg);
box-sizing: content-box;
}
&.checkbox--indeterminate {
border-color: $checked-color;
background-color: $checked-color;
.checkbox__inner-icon {
position: absolute;
opacity: 1;
transform: rotate(0deg);
height: 2px;
top: 0;
bottom: 0;
margin: auto;
left: 0px;
right: 0px;
bottom: 0;
width: auto;
border: none;
border-radius: 2px;
transform: scale(0.5);
background-color: #fff;
}
}
&:hover{
border-color: $checked-color;
}
// 禁用
&.is-disable {
/* #ifdef H5 */
cursor: not-allowed;
/* #endif */
background-color: #F2F6FC;
border-color: $border-color;
}
// 选中
&.is-checked {
border-color: $checked-color;
background-color: $checked-color;
.checkbox__inner-icon {
opacity: 1;
transform: rotate(45deg);
}
// 选中禁用
&.is-disable {
opacity: $disable;
}
}
}
}
</style>

171
src/uni_modules/uni-table/components/uni-tr/uni-tr.vue Normal file
View File

@ -0,0 +1,171 @@
<template>
<!-- #ifdef H5 -->
<tr class="uni-table-tr">
<th v-if="selection === 'selection' && ishead" class="checkbox" :class="{ 'tr-table--border': border }">
<table-checkbox :checked="checked" :indeterminate="indeterminate" :disabled="disabled" @checkboxSelected="checkboxSelected"></table-checkbox>
</th>
<slot></slot>
<!-- <uni-th class="th-fixed">123</uni-th> -->
</tr>
<!-- #endif -->
<!-- #ifndef H5 -->
<view class="uni-table-tr">
<view v-if="selection === 'selection' " class="checkbox" :class="{ 'tr-table--border': border }">
<table-checkbox :checked="checked" :indeterminate="indeterminate" :disabled="disabled" @checkboxSelected="checkboxSelected"></table-checkbox>
</view>
<slot></slot>
</view>
<!-- #endif -->
</template>
<script>
import tableCheckbox from './table-checkbox.vue'
/**
* Tr 表格行组件
* @description 表格行组件 仅包含 th,td 组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=
*/
export default {
name: 'uniTr',
components: { tableCheckbox },
props: {
disabled: {
type: Boolean,
default: false
},
keyValue: {
type: [String, Number],
default: ''
}
},
options: {
virtualHost: true
},
data() {
return {
value: false,
border: false,
selection: false,
widthThArr: [],
ishead: true,
checked: false,
indeterminate:false
}
},
created() {
this.root = this.getTable()
this.head = this.getTable('uniThead')
if (this.head) {
this.ishead = false
this.head.init(this)
}
this.border = this.root.border
this.selection = this.root.type
this.root.trChildren.push(this)
const rowData = this.root.data.find(v => v[this.root.rowKey] === this.keyValue)
if(rowData){
this.rowData = rowData
}
this.root.isNodata()
},
mounted() {
if (this.widthThArr.length > 0) {
const selectionWidth = this.selection === 'selection' ? 50 : 0
this.root.minWidth = this.widthThArr.reduce((a, b) => Number(a) + Number(b)) + selectionWidth
}
},
// #ifndef VUE3
destroyed() {
const index = this.root.trChildren.findIndex(i => i === this)
this.root.trChildren.splice(index, 1)
this.root.isNodata()
},
// #endif
// #ifdef VUE3
unmounted() {
const index = this.root.trChildren.findIndex(i => i === this)
this.root.trChildren.splice(index, 1)
this.root.isNodata()
},
// #endif
methods: {
minWidthUpdate(width) {
this.widthThArr.push(width)
},
// 选中
checkboxSelected(e) {
let rootData = this.root.data.find(v => v[this.root.rowKey] === this.keyValue)
this.checked = e.checked
this.root.check(rootData||this, e.checked,rootData? this.keyValue:null)
},
change(e) {
this.root.trChildren.forEach(item => {
if (item === this) {
this.root.check(this, e.detail.value.length > 0 ? true : false)
}
})
},
/**
* 获取父元素实例
*/
getTable(name = 'uniTable') {
let parent = this.$parent
let parentName = parent.$options.name
while (parentName !== name) {
parent = parent.$parent
if (!parent) return false
parentName = parent.$options.name
}
return parent
}
}
}
</script>
<style lang="scss">
$border-color: #ebeef5;
.uni-table-tr {
/* #ifndef APP-NVUE */
display: table-row;
transition: all 0.3s;
box-sizing: border-box;
/* #endif */
}
.checkbox {
padding: 0 8px;
width: 26px;
padding-left: 12px;
/* #ifndef APP-NVUE */
display: table-cell;
vertical-align: middle;
/* #endif */
color: #333;
font-weight: 500;
border-bottom: 1px $border-color solid;
font-size: 14px;
// text-align: center;
}
.tr-table--border {
border-right: 1px $border-color solid;
}
/* #ifndef APP-NVUE */
.uni-table-tr {
::v-deep .uni-table-th {
&.table--border:last-child {
// border-right: none;
}
}
::v-deep .uni-table-td {
&.table--border:last-child {
// border-right: none;
}
}
}
/* #endif */
</style>

9
src/uni_modules/uni-table/i18n/en.json Normal file
View File

@ -0,0 +1,9 @@
{
"filter-dropdown.reset": "Reset",
"filter-dropdown.search": "Search",
"filter-dropdown.submit": "Submit",
"filter-dropdown.filter": "Filter",
"filter-dropdown.gt": "Greater or equal to",
"filter-dropdown.lt": "Less than or equal to",
"filter-dropdown.date": "Date"
}

9
src/uni_modules/uni-table/i18n/es.json Normal file
View File

@ -0,0 +1,9 @@
{
"filter-dropdown.reset": "Reiniciar",
"filter-dropdown.search": "Búsqueda",
"filter-dropdown.submit": "Entregar",
"filter-dropdown.filter": "Filtrar",
"filter-dropdown.gt": "Mayor o igual a",
"filter-dropdown.lt": "Menos que o igual a",
"filter-dropdown.date": "Fecha"
}

9
src/uni_modules/uni-table/i18n/fr.json Normal file
View File

@ -0,0 +1,9 @@
{
"filter-dropdown.reset": "Réinitialiser",
"filter-dropdown.search": "Chercher",
"filter-dropdown.submit": "Soumettre",
"filter-dropdown.filter": "Filtre",
"filter-dropdown.gt": "Supérieur ou égal à",
"filter-dropdown.lt": "Inférieur ou égal à",
"filter-dropdown.date": "Date"
}

12
src/uni_modules/uni-table/i18n/index.js Normal file
View File

@ -0,0 +1,12 @@
import en from './en.json'
import es from './es.json'
import fr from './fr.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
export default {
en,
es,
fr,
'zh-Hans': zhHans,
'zh-Hant': zhHant
}

9
src/uni_modules/uni-table/i18n/zh-Hans.json Normal file
View File

@ -0,0 +1,9 @@
{
"filter-dropdown.reset": "重置",
"filter-dropdown.search": "搜索",
"filter-dropdown.submit": "确定",
"filter-dropdown.filter": "筛选",
"filter-dropdown.gt": "大于等于",
"filter-dropdown.lt": "小于等于",
"filter-dropdown.date": "日期范围"
}

9
src/uni_modules/uni-table/i18n/zh-Hant.json Normal file
View File

@ -0,0 +1,9 @@
{
"filter-dropdown.reset": "重置",
"filter-dropdown.search": "搜索",
"filter-dropdown.submit": "確定",
"filter-dropdown.filter": "篩選",
"filter-dropdown.gt": "大於等於",
"filter-dropdown.lt": "小於等於",
"filter-dropdown.date": "日期範圍"
}

86
src/uni_modules/uni-table/package.json Normal file
View File

@ -0,0 +1,86 @@
{
"id": "uni-table",
"displayName": "uni-table 表格",
"version": "1.2.1",
"description": "表格组件，多用于展示多条结构类似的数据，如",
"keywords": [
"uni-ui",
"uniui",
"table",
"表格"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": ["uni-scss","uni-datetime-picker"],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "n"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "n",
"QQ": "y"
},
"快应用": {
"华为": "n",
"联盟": "n"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}

13
src/uni_modules/uni-table/readme.md Normal file
View File

@ -0,0 +1,13 @@
## Table 表单
> 组件名：``uni-table``，代码块： `uTable`。
用于展示多条结构类似的数据
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-table)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839