Commit 4c26c806f3e4c661a478a42b6ac1265b8de2cf14
1 parent
c213ec83
活动参与，活动申请
Showing
5 changed files
with
214 additions
and
178 deletions
pages.json
| ... | ... | @@ -111,7 +111,8 @@ |
| 111 | 111 | "path": "pages/participation/participation", |
| 112 | 112 | "style": { |
| 113 | 113 | "navigationBarTitleText": "活动参与", |
| 114 | - "navigationBarBackgroundColor": "#fff" | |
| 114 | + "navigationBarBackgroundColor": "#fff", | |
| 115 | + "enablePullDownRefresh": true | |
| 115 | 116 | } |
| 116 | 117 | }, |
| 117 | 118 | { | ... | ... |
pages/activityAdd/activityAdd.scss
| ... | ... | @@ -65,10 +65,14 @@ |
| 65 | 65 | bottom: 0; |
| 66 | 66 | display: flex; |
| 67 | 67 | width: 100%; |
| 68 | - height: 100rpx; | |
| 68 | + height: 120rpx; | |
| 69 | 69 | background-color: #FFFFFF; |
| 70 | + padding: 20rpx 20rpx; | |
| 70 | 71 | padding-bottom: constant(safe-area-inset-bottom); |
| 71 | 72 | padding-bottom: env(safe-area-inset-bottom); |
| 73 | + .u-btn { | |
| 74 | + flex: 1; | |
| 75 | + } | |
| 72 | 76 | .footer-buy{ |
| 73 | 77 | display: flex; |
| 74 | 78 | align-items: center; | ... | ... |
pages/activityAdd/activityAdd.vue
| 1 | 1 | <template> |
| 2 | 2 | <view class="page"> |
| 3 | - <view class="add-list"> | |
| 4 | - <view class="list"> | |
| 5 | - <view class="title"> | |
| 6 | - <text>活动名称</text> | |
| 7 | - <text class="star">*</text> | |
| 8 | - </view> | |
| 9 | - <view class="content"> | |
| 10 | - <input type="text" placeholder="请输入"> | |
| 11 | - </view> | |
| 3 | + <u-form :model="form" ref="uForm" label-position="left" :label-width="150"> | |
| 4 | + <view class="add-list" style="padding-bottom: 0;"> | |
| 5 | + <u-form-item label="封面图片" borderBottom labelPosition="top"> | |
| 6 | + <u-upload :active="active" :file-list="form.fileList" :max-count="1"></u-upload> | |
| 7 | + </u-form-item> | |
| 12 | 8 | </view> |
| 13 | - <view class="list"> | |
| 14 | - <view class="title"> | |
| 15 | - <text>开始时间</text> | |
| 16 | - <text class="star">*</text> | |
| 17 | - </view> | |
| 18 | - <view class="content"> | |
| 19 | - <input type="text" placeholder="2024-07-01"> | |
| 20 | - </view> | |
| 9 | + <view class="add-list" style="padding-bottom: 0;"> | |
| 10 | + <u-form-item label="活动名称" borderBottom> | |
| 11 | + <u-input v-model="form.name" /> | |
| 12 | + </u-form-item> | |
| 13 | + <u-form-item label="开始时间" borderBottom> | |
| 14 | + <u-input v-model="form.startTime" type="select" @click="startShow = true" placeholder="请选择"/> | |
| 15 | + <u-picker mode="time" v-model="startShow" :params="params" @confirm="startTimeChange"></u-picker> | |
| 16 | + </u-form-item> | |
| 17 | + <u-form-item label="结束时间" borderBottom> | |
| 18 | + <u-input v-model="form.endTime" type="select" @click="endShow = true" placeholder="请选择"/> | |
| 19 | + <u-picker mode="time" v-model="endShow" :params="params" @confirm="endTimeChange"></u-picker> | |
| 20 | + </u-form-item> | |
| 21 | + <u-form-item label="活动类型" borderBottom> | |
| 22 | + <u-input v-model="form.type" type="select" @click="typeShow = true" placeholder="请选择"/> | |
| 23 | + <u-select v-model="typeShow" :list="typeList" @confirm="typeChange"></u-select> | |
| 24 | + </u-form-item> | |
| 25 | + <u-form-item label="可参与人数" borderBottom> | |
| 26 | + <u-number-box v-model="form.num" :input-width="'100%'" :min="0"></u-number-box> | |
| 27 | + </u-form-item> | |
| 28 | + <u-form-item label="举办区域" borderBottom> | |
| 29 | + <u-input v-model="form.name" /> | |
| 30 | + </u-form-item> | |
| 21 | 31 | </view> |
| 22 | - <view class="list"> | |
| 23 | - <view class="title"> | |
| 24 | - <text>结束时间</text> | |
| 25 | - <text class="star">*</text> | |
| 26 | - </view> | |
| 27 | - <view class="content"> | |
| 28 | - <input type="text" placeholder="2024-07-30"> | |
| 29 | - </view> | |
| 30 | - </view> | |
| 31 | - <view class="list"> | |
| 32 | - <view class="title"> | |
| 33 | - <text>活动内容</text> | |
| 34 | - <text class="star">*</text> | |
| 35 | - </view> | |
| 36 | - <view class="content"> | |
| 37 | - <input type="text" placeholder="请输入"> | |
| 38 | - </view> | |
| 39 | - </view> | |
| 40 | - <view class="list"> | |
| 41 | - <view class="title"> | |
| 42 | - <text>活动类型</text> | |
| 43 | - <text class="star">*</text> | |
| 44 | - </view> | |
| 45 | - <view class="content"> | |
| 46 | - <input type="text" placeholder="请选择"> | |
| 47 | - <image :src="$imgUrl('/right2.png')" ></image> | |
| 48 | - </view> | |
| 49 | - </view> | |
| 50 | - <view class="list"> | |
| 51 | - <view class="title"> | |
| 52 | - <text>可参与人数</text> | |
| 53 | - <text class="star">*</text> | |
| 54 | - </view> | |
| 55 | - <view class="content"> | |
| 56 | - <input type="text" placeholder="请选择"> | |
| 57 | - <image :src="$imgUrl('/right2.png')"></image> | |
| 58 | - </view> | |
| 59 | - </view> | |
| 60 | - <view class="list"> | |
| 61 | - <view class="title"> | |
| 62 | - <text>意向区域</text> | |
| 63 | - <text class="star">*</text> | |
| 64 | - </view> | |
| 65 | - <view class="content"> | |
| 66 | - <input type="text" placeholder="请选择"> | |
| 67 | - <image :src="$imgUrl('/right2.png')"></image> | |
| 68 | - </view> | |
| 69 | - </view> | |
| 70 | - <view class="list"> | |
| 71 | - <view class="title"> | |
| 72 | - <text>意向位置</text> | |
| 73 | - <text class="star">*</text> | |
| 74 | - </view> | |
| 75 | - <view class="content"> | |
| 76 | - <input type="text" placeholder="请选择"> | |
| 77 | - <image :src="$imgUrl('/right2.png')"></image> | |
| 78 | - </view> | |
| 79 | - </view> | |
| 80 | - <view class="feedback-data"> | |
| 81 | - <view> | |
| 82 | - <view class="title"> | |
| 83 | - <text>活动图片</text> | |
| 84 | - <text class="star">*</text> | |
| 85 | - </view> | |
| 86 | - </view> | |
| 87 | - <view class="voucher-img"> | |
| 88 | - <view class="voucher-list"> | |
| 89 | - <image :src="$imgUrl('/voucher_bg.png')"></image> | |
| 90 | - </view> | |
| 91 | - </view> | |
| 92 | - </view> | |
| 93 | - </view> | |
| 32 | + <!-- <view class="add-list" style="padding-bottom: 0;"> | |
| 33 | + <u-form-item label="活动内容" borderBottom labelPosition="top"> | |
| 34 | + <u-upload :active="active" :file-list="form.fileList" :max-count="1"></u-upload> | |
| 35 | + </u-form-item> | |
| 36 | + </view> --> | |
| 37 | + </u-form> | |
| 38 | + <u-toast ref="uToast" /> | |
| 94 | 39 | <!-- 保存按钮 --> |
| 40 | + <view style="height: 120rpx;"></view> | |
| 95 | 41 | <view class="page-footer"> |
| 96 | - <view class="footer-buy"> | |
| 97 | - <view class="cart-add"> | |
| 98 | - <text>提交</text> | |
| 99 | - </view> | |
| 100 | - </view> | |
| 42 | + <u-button type="success">提交</u-button> | |
| 101 | 43 | </view> |
| 102 | 44 | </view> |
| 103 | 45 | </template> |
| ... | ... | @@ -106,10 +48,52 @@ |
| 106 | 48 | export default { |
| 107 | 49 | data() { |
| 108 | 50 | return { |
| 109 | - | |
| 51 | + form: { | |
| 52 | + fileList: [], | |
| 53 | + name: '', | |
| 54 | + type: '', | |
| 55 | + num: 0, | |
| 56 | + startTime: '', | |
| 57 | + endTime: '', | |
| 58 | + }, | |
| 59 | + active: '', // 文件上传地址 | |
| 60 | + startShow: false, | |
| 61 | + endShow: false, | |
| 62 | + params: { | |
| 63 | + year: true, | |
| 64 | + month: true, | |
| 65 | + day: true, | |
| 66 | + hour: true, | |
| 67 | + minute: true, | |
| 68 | + second: true | |
| 69 | + }, | |
| 70 | + typeShow: false, | |
| 71 | + typeList: [{ value: '1', label: '类型1' }, { value: '2', label: '类型2' }], | |
| 110 | 72 | }; |
| 111 | 73 | }, |
| 112 | 74 | methods:{ |
| 75 | + startTimeChange(val) { | |
| 76 | + this.form.startTime = this.timeChange(val); | |
| 77 | + this.form.endTime = ''; | |
| 78 | + }, | |
| 79 | + endTimeChange(val) { | |
| 80 | + const time = this.timeChange(val); | |
| 81 | + if(new Date(time).getTime() > new Date(this.form.startTime).getTime()) { | |
| 82 | + this.form.endTime = time | |
| 83 | + } else { | |
| 84 | + this.$refs.uToast.show({ | |
| 85 | + title: '结束时间不能小于开始时间', | |
| 86 | + type: 'error', | |
| 87 | + }) | |
| 88 | + } | |
| 89 | + }, | |
| 90 | + timeChange(val) { | |
| 91 | + const { year, month, day, hour, minute, second } = val; | |
| 92 | + return `${year}-${month}-${day} ${hour}:${minute}:${second}`; | |
| 93 | + }, | |
| 94 | + typeChange(val) { | |
| 95 | + this.form.type = val[0].name; | |
| 96 | + } | |
| 113 | 97 | } |
| 114 | 98 | } |
| 115 | 99 | </script> | ... | ... |
pages/participation/participation.scss
| ... | ... | @@ -4,39 +4,38 @@ |
| 4 | 4 | top: 0; |
| 5 | 5 | width: 100%; |
| 6 | 6 | height: 100%; |
| 7 | - padding: 0 40rpx; | |
| 7 | + padding: 0 24rpx; | |
| 8 | +} | |
| 9 | +.more { | |
| 10 | + width: 100%; | |
| 11 | + height: 74rpx; | |
| 8 | 12 | background-color: #fff; |
| 13 | + border-radius: 21rpx; | |
| 14 | + padding: 24rpx 32rpx 18rpx; | |
| 15 | + margin-top: 26rpx; | |
| 9 | 16 | } |
| 10 | 17 | .head-search{ |
| 11 | - display: flex; | |
| 12 | - align-items: center; | |
| 13 | - justify-content: space-between; | |
| 18 | + display: flex; | |
| 19 | + align-items: center; | |
| 20 | + justify-content: space-between; | |
| 21 | + position: relative; | |
| 22 | + margin: 20rpx 0; | |
| 23 | + background-color: #FFFFFF; | |
| 24 | + border-radius: 35rpx; | |
| 25 | + padding: 0 10rpx; | |
| 26 | + border: 2rpx solid #E8E8E8; | |
| 27 | + .u-search { | |
| 14 | 28 | position: relative; |
| 15 | - margin: 20rpx 0; | |
| 16 | - .search{ | |
| 17 | - | |
| 18 | - display: flex; | |
| 19 | - align-items: center; | |
| 20 | - width: 100%; | |
| 21 | - height: 72rpx; | |
| 22 | - | |
| 23 | - border: 2rpx solid #E8E8E8; | |
| 24 | - justify-content: space-between; | |
| 25 | - padding: 0 10rpx 0 30rpx; | |
| 26 | - .icon{ | |
| 27 | - display: flex; | |
| 28 | - align-items: center; | |
| 29 | - | |
| 30 | - margin-left: 20rpx; | |
| 31 | - margin-right: 15rpx; | |
| 32 | - image{ | |
| 33 | - width: 29rpx; | |
| 34 | - height: 29rpx; | |
| 35 | - } | |
| 36 | - } | |
| 37 | - | |
| 38 | - } | |
| 39 | 29 | } |
| 30 | + .u-btn { | |
| 31 | + border: unset; | |
| 32 | + border: 0px transparent; | |
| 33 | + height: 46rpx; | |
| 34 | + width: 88rpx; | |
| 35 | + font-size: 24rpx; | |
| 36 | + border-radius: 35rpx; | |
| 37 | + } | |
| 38 | +} | |
| 40 | 39 | /* 订单列表 */ |
| 41 | 40 | .screen-list { |
| 42 | 41 | display: flex; |
| ... | ... | @@ -66,9 +65,27 @@ |
| 66 | 65 | |
| 67 | 66 | .goods-data{ |
| 68 | 67 | width: 100%; |
| 68 | + // height: calc(100% - 300rpx - 120rpx); | |
| 69 | + // overflow-y: scroll; | |
| 69 | 70 | .goods-list{ |
| 70 | 71 | width: 100%; |
| 71 | - | |
| 72 | + // height: 100%; | |
| 73 | + .good-item { | |
| 74 | + .info { | |
| 75 | + margin: 20rpx 10rpx 26rpx; | |
| 76 | + .title { | |
| 77 | + line-height: 36rpx; | |
| 78 | + color: #000; | |
| 79 | + margin-bottom: 10rpx; | |
| 80 | + } | |
| 81 | + .name { | |
| 82 | + font-size: 24rpx; | |
| 83 | + line-height: 30rpx; | |
| 84 | + color: #3D3D3D; | |
| 85 | + margin-bottom: 12rpx; | |
| 86 | + } | |
| 87 | + } | |
| 88 | + } | |
| 72 | 89 | .list{ |
| 73 | 90 | display: flex; |
| 74 | 91 | margin-bottom: 40rpx; |
| ... | ... | @@ -121,11 +138,15 @@ |
| 121 | 138 | } |
| 122 | 139 | /* 保存按钮 */ |
| 123 | 140 | .page-footer{ |
| 141 | + position: fixed; | |
| 142 | + left: 0; | |
| 143 | + bottom: 0; | |
| 124 | 144 | width: 100%; |
| 145 | + height: 120rpx; | |
| 125 | 146 | background-color: #FFFFFF; |
| 147 | + padding: 20rpx 20rpx; | |
| 126 | 148 | padding-bottom: constant(safe-area-inset-bottom); |
| 127 | 149 | padding-bottom: env(safe-area-inset-bottom); |
| 128 | - margin:40rpx 0 80rpx 0; | |
| 129 | 150 | .footer-buy{ |
| 130 | 151 | display: flex; |
| 131 | 152 | align-items: center; | ... | ... |
pages/participation/participation.vue
| 1 | 1 | <template> |
| 2 | + <!-- 活动参与 --> | |
| 2 | 3 | <view class="page"> |
| 3 | - <!-- 搜索 --> | |
| 4 | - <view class="head-search" @click="myativity"> | |
| 5 | - <view class="search"> | |
| 6 | - <view class=""> | |
| 7 | - 我创建的活动 | |
| 8 | - </view> | |
| 9 | - <view class="icon"> | |
| 10 | - <image :src="$imgUrl('/search.png')" ></image> | |
| 4 | + <view class="more page-box"> | |
| 5 | + <u-section :bold="false" title="我的活动申请" sub-title='' :show-line="false" color="#0FBB59" @click="toMyAdd"> | |
| 6 | + <view slot="right"> | |
| 7 | + <u-icon name="arrow-rightward" color="#0FBB59" size="28"></u-icon> | |
| 11 | 8 | </view> |
| 12 | - | |
| 13 | - </view> | |
| 9 | + </u-section> | |
| 10 | + </view> | |
| 11 | + <!-- 搜索 --> | |
| 12 | + <view class="head-search"> | |
| 13 | + <u-search bg-color="#fff" placeholder="请输入关键词" v-model="keyword" :show-action="false" @search="search"></u-search> | |
| 14 | + <u-button type="success" @click="search">搜索</u-button> | |
| 14 | 15 | </view> |
| 15 | - <!-- 创建按钮 --> | |
| 16 | - <!-- <view class="page-footer" @click="createWen"> | |
| 17 | - <view class="footer-buy"> | |
| 18 | - <view class="cart-add"> | |
| 19 | - <text>创建活动</text> | |
| 20 | - </view> | |
| 21 | - </view> | |
| 22 | - </view> --> | |
| 23 | - | |
| 24 | 16 | <view class="screen-list"> |
| 25 | 17 | <view class="list"> |
| 18 | + <text>默认排序</text> | |
| 19 | + <image :src="$imgUrl('/down.png')"></image> | |
| 20 | + </view> | |
| 21 | + <view class="list"> | |
| 22 | + <text>进行中</text> | |
| 23 | + <image :src="$imgUrl('/down.png')"></image> | |
| 24 | + </view> | |
| 25 | + <!-- <view class="list"> | |
| 26 | 26 | <text>区域</text> |
| 27 | 27 | <image :src="$imgUrl('/down.png')"></image> |
| 28 | 28 | </view> |
| ... | ... | @@ -31,45 +31,29 @@ |
| 31 | 31 | <image :src="$imgUrl('/down.png')" ></image> |
| 32 | 32 | </view> |
| 33 | 33 | <view class="list"> |
| 34 | - <text>默认排序</text> | |
| 35 | - <image :src="$imgUrl('/down.png')"></image> | |
| 36 | - </view> | |
| 37 | - <view class="list"> | |
| 38 | 34 | <text>筛选</text> |
| 39 | 35 | <image :src="$imgUrl('/down.png')" ></image> |
| 40 | - </view> | |
| 36 | + </view> --> | |
| 41 | 37 | </view> |
| 42 | 38 | <!-- 订单列表 --> |
| 43 | 39 | <view class="goods-data"> |
| 44 | - <view class="goods-list"> | |
| 45 | - <view class="list goods-border" v-for="(item,index) in 1" :key="index"> | |
| 46 | - <view class="thumb"> | |
| 47 | - <image :src="$imgUrl('/img/2.jpg')"></image> | |
| 48 | - </view> | |
| 49 | - <view class="item"> | |
| 50 | - <view class=""> | |
| 51 | - <text class="one-omit">名称：绿道好物节</text> | |
| 40 | + <u-row gutter="16" class="goods-list"> | |
| 41 | + <u-col span="6" v-for="(item,index) in list" :key="index"> | |
| 42 | + <view class="demo-layout good-item"> | |
| 43 | + <image :src="$imgUrl('/img/2.jpg')" style="width: 315rpx; height: 315rpx; border-radius: 10rpx;"></image> | |
| 44 | + <view class="info"> | |
| 45 | + <view class="title">绿道好物节</view> | |
| 46 | + <view class="name">绿道好物节</view> | |
| 47 | + <u-tag text="进行中" type="success" mode="dark" /> | |
| 52 | 48 | </view> |
| 53 | - <view class="title"> | |
| 54 | - <text class="one-omit color">活动时间：2024-10-10至2024-10-20</text> | |
| 55 | - </view> | |
| 56 | - <view class="title"> | |
| 57 | - <text class="one-omit color">参与商家：1人</text> | |
| 58 | - </view> | |
| 59 | - <view class="title"> | |
| 60 | - <text class="one-omit color">活动状态：待开始</text> | |
| 61 | - </view> | |
| 62 | - <view class="title"> | |
| 63 | - <text class="one-omit color">举办方：绿道</text> | |
| 64 | - </view> | |
| 65 | - | |
| 66 | - <view class="canyu" @click='join'> | |
| 67 | - <view>我要参与</view> | |
| 68 | - </view> | |
| 69 | - | |
| 70 | 49 | </view> |
| 71 | - </view> | |
| 72 | - </view> | |
| 50 | + </u-col> | |
| 51 | + <u-loadmore :status="status" @loadmore='loading' style="width: 100%; text-align: center;"/> | |
| 52 | + </u-row> | |
| 53 | + </view> | |
| 54 | + <view style="height: 120rpx;"></view> | |
| 55 | + <view class="page-footer"> | |
| 56 | + <u-button type="success" @click="toAdd">活动申请</u-button> | |
| 73 | 57 | </view> |
| 74 | 58 | </view> |
| 75 | 59 | </template> |
| ... | ... | @@ -78,9 +62,46 @@ |
| 78 | 62 | export default { |
| 79 | 63 | data() { |
| 80 | 64 | return { |
| 65 | + keyword: '', // 搜索项 | |
| 66 | + status: 'loadmore', | |
| 67 | + list: 1, | |
| 68 | + page: 0, | |
| 69 | + total: 1, | |
| 81 | 70 | }; |
| 82 | 71 | }, |
| 72 | + onLoad() { | |
| 73 | + this.status = 'nomore'; | |
| 74 | + }, | |
| 75 | + onPullDownRefresh(e) { | |
| 76 | + let that = this | |
| 77 | + that.status = 'loading'; | |
| 78 | + this.page = 0; | |
| 79 | + setTimeout(() => { | |
| 80 | + that.list = 1; | |
| 81 | + that.status = that.list >= that.total ? 'nomore' : 'loadmore'; | |
| 82 | + uni.stopPullDownRefresh(); | |
| 83 | + }, 1000); | |
| 84 | + }, | |
| 85 | + onReachBottom(e) { | |
| 86 | + this.loading(); | |
| 87 | + }, | |
| 83 | 88 | methods: { |
| 89 | + toMyAdd() { | |
| 90 | + // 跳转我的活动申请 | |
| 91 | + }, | |
| 92 | + search() { | |
| 93 | + // 搜索 | |
| 94 | + }, | |
| 95 | + loading() { | |
| 96 | + let that = this | |
| 97 | + if(that.status == 'nomore') return; | |
| 98 | + that.status = 'loading'; | |
| 99 | + that.page = ++that.page; | |
| 100 | + setTimeout(() => { | |
| 101 | + that.list += 10; | |
| 102 | + that.status = that.list >= that.total ? 'nomore' : 'loadmore'; | |
| 103 | + }, 300) | |
| 104 | + }, | |
| 84 | 105 | myativity() { |
| 85 | 106 | uni.navigateTo({ |
| 86 | 107 | url: '/pages/mycreated/mycreated' |
| ... | ... | @@ -90,6 +111,11 @@ |
| 90 | 111 | uni.navigateTo({ |
| 91 | 112 | url: '/pages/mycreated/mycreated?id=1' |
| 92 | 113 | }) |
| 114 | + }, | |
| 115 | + toAdd() { | |
| 116 | + uni.navigateTo({ | |
| 117 | + url: '/pages/activityAdd/activityAdd' | |
| 118 | + }) | |
| 93 | 119 | } |
| 94 | 120 | } |
| 95 | 121 | } | ... | ... |