xiaohei
/
xq-csg-weapp_uni-ts
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

feat:添加党员服务、志愿服务、活动风采、志愿服务页面

master
xiaohei 1 year ago
parent
ae0e2e117e
commit
9144704f8c
8 changed files with 1463 additions and 44 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +3
    -0
      src/main.ts
  2. +44
    -44
      src/packages/life/pages/scenic-list/scenic-list.vue
  3. +214
    -0
      src/packages/people/pages/activity-mien/index.vue
  4. +329
    -0
      src/packages/people/pages/party-newspaper/create.vue
  5. +231
    -0
      src/packages/people/pages/party-newspaper/detail.vue
  6. +281
    -0
      src/packages/people/pages/party-newspaper/index.vue
  7. +336
    -0
      src/packages/people/pages/volunteering/index.vue
  8. +25
    -0
      src/pages.json

+ 3
- 0
src/main.ts View File

@@ -32,6 +32,7 @@ import {
DatePicker,
Form,
CheckboxGroup,
RadioGroup, Radio
} from 'vant';

import share from '@/utils/share.js'
@@ -87,6 +88,8 @@ export function createApp() {
app.use(DatePicker);
app.use(Form);
app.use(CheckboxGroup);
app.use(Radio);
app.use(RadioGroup);
// app.mixin(zpMixins);
return {
app


+ 44
- 44
src/packages/life/pages/scenic-list/scenic-list.vue View File

@@ -69,7 +69,7 @@
this.merchantPageApi(false);
},
methods: {
setMorKm(distance){
setMorKm(distance) {
return utils.setMorKm(distance)
},
// 生活对应栏目的分页查询
@@ -197,49 +197,6 @@
.search {
padding: 30rpx 30rpx 54rpx 30rpx;

.search-input {
height: 64rpx;
line-height: 64rpx;
background: #f9f9f9;
border-radius: 35rpx;
border: 1px solid #e1e1e1;
text-align: center;
position: relative;
box-sizing: content-box;

.input {
width: 100%;
height: 64rpx;
line-height: 64rpx;
text-decoration: 20rpx;
padding: 0 64rpx;
font-size: 26rpx;
font-weight: 400;
}

.placeholder-style {
text-align: center;
color: #c1c1c1;
}
}

.search-icon {
width: 64rpx;
height: 64rpx;
background: #ffffff;
border-radius: 35rpx;
border: 1px solid #e1e1e1;
position: absolute;
right: -1px;
top: 0;
z-index: 1;

.imgage {
width: 32rpx;
height: 32rpx;
}
}

.life-tabs {
margin-top: 40rpx;

@@ -295,4 +252,47 @@
}
}
}

.search-input {
height: 64rpx;
line-height: 64rpx;
background: #f9f9f9;
border-radius: 35rpx;
border: 1px solid #e1e1e1;
text-align: center;
position: relative;
box-sizing: content-box;

.input {
width: 100%;
height: 64rpx;
line-height: 64rpx;
text-decoration: 20rpx;
padding: 0 64rpx;
font-size: 26rpx;
font-weight: 400;
}

.placeholder-style {
text-align: center;
color: #c1c1c1;
}
}

.search-icon {
width: 64rpx;
height: 64rpx;
background: #ffffff;
border-radius: 35rpx;
border: 1px solid #e1e1e1;
position: absolute;
right: -1px;
top: 0;
z-index: 1;

.imgage {
width: 32rpx;
height: 32rpx;
}
}
</style>

+ 214
- 0
src/packages/people/pages/activity-mien/index.vue View File

@@ -0,0 +1,214 @@
<template>
<view>
<custom-nav-bar position="fixed" color="black" left-text="活动风采" left-arrow />

<view class="search">
<view class="flex flex-between search-input">
<input class="input" :value="searchValue" type="text" confirm-type="search"
placeholder-class="placeholder-style" placeholder="请输入搜索商户名称" @input="onSearch" @confirm="onChange" />
<view class="search-icon flex flex-center" @click="onSearch">
<image class="imgage" src="/static/images/search.png"></image>
</view>
</view>
</view>

<view class="activity">
<block v-for="(item,index) in 7" :key="index">
<view class="activity-item" @click="headerDetail(item)">
<image class="activity-image" src="/src/images/share-icon.png" mode=""></image>
<view class="activity-type" v-if="index < 5" :class="`activity-type${index}`">NO.{{index+1}}</view>
<view class="activity-title">惠苑路社区西南角家乐福超市对面xxxxx</view>
<view class="activity-time">2023-11-23 周四</view>
<view class="activity-rigth">
<text>发布者的名字</text>
<image src="/src/static/logo.png" mode=""></image>
</view>
</view>
</block>
</view>

<van-empty
image="https://jiexiu.xuqidata.com:8083/jiexiujumin/e1bb4242ccc209c332b84a3fde862cc156b31634152d5df503642438bfdded50.png"
:image-size="['78%','100%']" description="没有找到您要查询的信息" />
</view>
</template>

<script>
export default {
data() {
return {
searchValue: ''
}
},
methods: {
onSearch(e) {
if (e.detail.value !== '') {
return;
}
this.searchValue = e.detail.value
this.merchantPageApi();
},
onChange(e) {
this.searchValue = e.detail.value
this.merchantPageApi();
},
}
}
</script>

<style lang="less" scoped>
page {
background-color: #F9F9F9;
}

.search {
padding: 0rpx 30rpx 40rpx 30rpx;
background-color: #ffffff;
}

.search-input {
height: 64rpx;
line-height: 64rpx;
background: #f9f9f9;
border-radius: 35rpx;
border: 1px solid #e1e1e1;
text-align: center;
position: relative;
box-sizing: content-box;
padding: 0 30rpx;

.input {
width: 100%;
height: 64rpx;
line-height: 64rpx;
text-decoration: 20rpx;
padding: 0 64rpx;
font-size: 26rpx;
font-weight: 400;
}

.placeholder-style {
text-align: center;
color: #c1c1c1;
}
}

.search-icon {
width: 64rpx;
height: 64rpx;
background: #ffffff;
border-radius: 35rpx;
border: 1px solid #e1e1e1;
position: absolute;
right: -1px;
top: 0;
z-index: 1;

.imgage {
width: 32rpx;
height: 32rpx;
}
}


.activity {
padding: 23rpx 20rpx;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 16rpx;

.activity-item {
position: relative;
background: #fff;
border-radius: 8rpx;
overflow: hidden;

.activity-image {
width: 100%;
height: 180rpx;
}

.activity-title {
margin-top: 16rpx;
font-size: 30rpx;
font-weight: 400;
color: #000000;
}

.activity-title {
font-size: 24rpx;
font-weight: 400;
color: #999999;
}

.activity-time {
font-size: 24rpx;
font-weight: 400;
margin-top: 8rpx;
color: #999999;
}

.activity-rigth {
text-align: right;
font-size: 24rpx;
font-weight: 400;
color: #FF7F34;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 28rpx 28rpx 30rpx 0rpx;

image {
width: 32rpx;
height: 32rpx;
margin-left: 16rpx;
border-radius: 1932312312px;
}
}
}
}

.activity-type {
position: absolute;
top: 0;
left: 0;
border-radius: 0px 8rpx 1000rpx 0;
font-size: 24rpx;
font-weight: 400;
color: #fff;
width: 100rpx;
padding: 12rpx 30rpx 12rpx 12rpx;
text-align: center;
}

.activity-type0 {
background: linear-gradient(291deg, #0A992D 0%, #11D03E 100%);
}

.activity-type1 {
background: linear-gradient(270deg, #F3623B 0%, #F88C44 100%);
}

.activity-type2 {
background: linear-gradient(291deg, #fea422 0%, #f9ca10 100%);
}

.activity-type3 {
background: linear-gradient(291deg, #4a507b 0%, #6882b1 100%);
}

.activity-type4 {
background: linear-gradient(291deg, #4a507b 0%, #6882b1 100%);
}

.van-empty__description {
font-size: 28rpx !important;
font-weight: 400;
color: #BFBFBF;
}

.van-empty__image {
width: 75%;
height: 100%;
}
</style>

+ 329
- 0
src/packages/people/pages/party-newspaper/create.vue View File

@@ -0,0 +1,329 @@
<template>
<view class="">
<custom-nav-bar position="fixed" color="black" left-text="党员注册" left-arrow />

<view class="form-list">
<view class="form-body">
<view class="flex flex-v-center flex-between">
<view class="label">
<text>所属党委</text>
<text class="red">*</text>
</view>
<view class="label-value flex flex-v-center">
<picker @change="bindPickerChange" range-key="label" :value="form.type" :range="columns">
<!-- <view style="color: #000000">{{ columns[form.type].label }}</view> -->
</picker>
<image class="ic-xia" src="/static/packages/people/images/ic-xia.png"></image>
</view>
</view>
</view>

<view class="form-body">
<view class="flex flex-v-center flex-between">
<view class="label">
<text>常住地社区</text>
<text class="red">*</text>
</view>
<view class="label-value flex flex-v-center">
<picker @change="bindPickerChange" range-key="label" :value="form.type" :range="columns">
<!-- <view style="color: #000000">{{ columns[form.type].label }}</view> -->
</picker>
<image class="ic-xia" src="/static/packages/people/images/ic-xia.png"></image>
</view>
</view>
</view>

<view class="form-body form-col">
<view class="label">
<text>常住小区</text>
<text class="red">*</text>
</view>
<input class="flex1 textarea-class" @input="headleInput" :value="form.name" type="text" data-name="name"
placeholder="请输入" />
</view>

<view class="flex">
<view class="form-body form-col">
<view class="label">
<text>楼栋（街）</text>
<text class="red">*</text>
</view>
<input class="flex1 textarea-class" @input="headleInput" :value="form.name" type="text" data-name="name"
placeholder="请输入" />
</view>
<view class="form-body form-col">
<view class="label">
<text>单元（巷）</text>
<text class="red">*</text>
</view>
<input class="flex1 textarea-class" @input="headleInput" :value="form.name" type="text" data-name="name"
placeholder="请输入" />
</view>
</view>

<view class="form-body form-col">
<view class="label">
<text>房号</text>
<text class="red">*</text>
</view>
<input class="flex1 textarea-class pd-left" @input="headleInput" :value="form.name" type="text" data-name="name"
placeholder="请输入" />
</view>

<view class="form-body form-col">
<view class="label">
<text>姓名</text>
<text class="red">*</text>
</view>
<input class="flex1 textarea-class" @input="headleInput" :value="form.name" type="text" data-name="name"
placeholder="请输入" />
</view>
<view class="form-body form-col">
<view class="label">
<text>性别</text>
<text class="red">*</text>
</view>
<van-radio-group v-model="checked" shape="dot" direction="horizontal">
<van-radio name="1" icon-size="32rpx" checked-color="#FE3B53">男</van-radio>
<van-radio name="2" icon-size="32rpx" checked-color="#FE3B53">女</van-radio>
</van-radio-group>
</view>
</view>

</view>
</template>

<script>
export default {
data() {
return {
form: {},
columns: [],
fileList: [],
checked: '1',
}
},
methods: {
bindPickerChange() {

},
headleInput() {

},
async afterRead(event) {
const {
file
} = event;

const res = await getApp().globalData.upload({
file
});
if (res.code !== 0) {
uni.showToast({
title: '上传图片失败',
icon: 'none'
});
return false;
}
// this.fileList.push({url:res.data})
this.appealEnclosure.push(res.data);
},
beforeDelete(file, dateil) {
this.appealEnclosure.splice(dateil.index, 1);
this.fileList.splice(dateil.index, 1)
},
submit() {

}
}
}
</script>

<style lang="less" scoped>
.form-list {
width: 100%;
}

.form-body {
font-size: 32rpx;
font-weight: 400;
color: #333333;
padding: 40rpx 40rpx 38rpx;
position: relative;

&::before {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 678rpx;
height: 1px;
background-color: #EFEFEF;
}

.label {
font-size: 28rpx;
font-weight: 400;
color: #333333;
}

.label-value {
font-size: 32rpx;
font-weight: 500;
color: #000000;
line-height: 32rpx;

.ic-xia {
margin-left: 27rpx;
width: 32rpx;
height: 32rpx;
}
}

.picker {
margin-top: 24rpx;
}

.picker-text {
font-size: 32rpx;
font-weight: 400;
color: #999999;
}

.picker-line {
flex: 1;
}

.textarea-class {
margin-top: 26rpx;
width: 100%;
font-size: 32rpx;
font-weight: 400;
}

.form-msg {
font-size: 26rpx;
font-weight: 400;
color: #999999;
line-height: 26rpx;
margin-top: 28rpx;
}

.location {
width: 32rpx;
height: 32rpx;
}

.location-info {
margin-top: 26rpx;

input {
font-size: 32rpx;
font-weight: 400;
}
}
}

.form-col {
display: flex;
align-items: center;
justify-content: space-between;
text-align: right;

.textarea-class {
margin-top: 0;
}

.card-placeholder {
font-size: 32rpx;
font-weight: 400;
color: #000000;
}
}

.form-location {
padding: 20rpx 35rpx;
border-radius: 16rpx;
}

.form-treaty {
padding: 83rpx 40rpx 32rpx;

.ic-check {
width: 32rpx;
height: 32rpx;
}

.checbox-text {
font-size: 28rpx;
font-weight: 400;
color: #000000;
line-height: 28rpx;

.jump-to {
color: var(--item-dominant-color);
}
}
}

.form-button {
padding: 25rpx 36rpx;
}

.form-button-body {
height: 80rpx;
font-size: 32rpx;
font-weight: 400;
color: #ffffff;
line-height: 80rpx;
text-align: center;
background: #c1c1c1;
border-radius: 8rpx;
}

.form-button-body-select {
background: var(--item-dominant-color);
}

.form-image {
margin: 20rpx 0rpx 20rpx 0;
display: flex;
align-items: center;
flex-wrap: wrap;
}

.form-image>view {
width: 31.3%;
position: relative;
margin-right: 13.5rpx;
}

.form-image>view>image:nth-child(1) {
width: 100%;
height: 200rpx;
border-radius: 10rpx;
}

.form-image>view>image:nth-child(2) {
position: absolute;
top: -0rpx;
right: 0rpx;
width: 40rpx;
height: 40rpx;
}

.camera {
width: 160rpx;
height: 160rpx;
}

.pd-left {
text-align: left;
padding-left: 35px;
}

.img-icon {
height: 20px;
}
</style>

+ 231
- 0
src/packages/people/pages/party-newspaper/detail.vue View File

@@ -0,0 +1,231 @@
<template>
<view>
<custom-nav-bar position="fixed" color="black" left-text="志愿服务详情" left-arrow />

<view class="detail">
<view class="detail-bg">
<view>标题标题标题标题标题标题标题标</view>
<view class="type">申领中</view>
<view class="detail-heade">
<image class="image" src="../../../../static/logo.png" mode=""></image>
<text class="nickname">张无忌</text>
<view class="msg">党员志愿服务</view>
</view>
</view>

<view class="conent">惠苑路社区西南角，家乐福超市对面xxxx</view>

<view class="detail-grid">
<block v-for="(item,index) in 9" :key="index">
<image src="/src/static/logo.png" mode=""></image>
</block>
</view>

<view class="validity">申领有效期：<text class="time">2023-11-02～2023-12-0</text></view>

<view class="flex-between">
<text class="title-name">志愿服务</text>
<text class="num"><text class="action">90</text>/90</text>
</view>

<view class="user">
<block v-for="item in 10" :key="item">
<view class="user-item">
<image class="user-image" src="/src/static/logo.png"></image>
<text class="nickname">张文远</text>
</view>
</block>
</view>

<view class="but">申领</view>
</view>

<view style="height: 50rpx;"></view>
</view>
</template>

<script>
export default {
data() {
return {

}
},
methods: {

}
}
</script>

<style lang="less" scoped>
.detail {
padding: 0 15rpx;

.detail-bg {
position: relative;
background: linear-gradient(182deg, #FEF6E9 0%, #FFFFFF 100%, #FFFFFF 100%);
border-radius: 16px 16px 0px 0px;
padding: 26rpx 25rpx 13rpx 25rpx;

.detail-heade {
margin-top: 24rpx;
display: flex;
align-items: center;

.image {
width: 40rpx;
height: 40rpx;
border-radius: 4313210px;
}

.nickname {
font-size: 28rpx;
font-weight: 400;
color: #999999;
margin-left: 16rpx;
}

.msg {
margin-left: 78rpx;
display: inline-block;
font-size: 20rpx;
font-weight: 400;
color: #FFFFFF;
padding: 4rpx 15rpx;
background: linear-gradient(270deg, #F38A36 0%, #FF9D4F 100%);
border-radius: 4rpx;
}
}
}

.conent {
margin-top: 36rpx;
font-size: 30rpx;
font-weight: 400;
color: #333333;
padding: 0rpx 25rpx 0rpx 25rpx;
}

.detail-grid {
margin-top: 29rpx;
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
grid-gap: 10rpx;
padding: 0rpx 25rpx 0rpx 25rpx;

image {
width: 100%;
height: 200rpx;
}
}

.validity {
margin-top: 41rpx;
font-size: 28rpx;
font-weight: 400;
color: #999999;
padding: 0rpx 25rpx 0rpx 25rpx;

.time {
font-size: 28rpx;
font-weight: 400;
color: #333333;
}
}
}

.type {
position: absolute;
top: 0;
right: 0;
background: linear-gradient(291deg, #0A992D 0%, #11D03E 100%);
border-radius: 0px 8rpx 0px 1000rpx;
font-size: 24rpx;
font-weight: 400;
color: #fff;
padding: 12rpx 22rpx 12rpx 36rpx;
}

.title-name {
display: inline-block;
position: relative;
font-size: 36rpx;
font-weight: 500;
color: #333333;
z-index: 3;

&::after {
content: '';
position: absolute;
left: 0px;
bottom: 5px;
width: 140rpx;
// width: 115%;
z-index: -1;
height: 10rpx;
background: #FFCED6;
border-radius: 2rpx;
}

.num {
font-size: 28rpx;
font-weight: 400;
color: #999999;
}
}

.action {
color: #FE3B53;
margin-right: 7rpx;
}

.flex-between {
display: flex;
align-items: center;
padding: 30rpx 30rpx 0 30rpx;
}

.user {
margin-top: 48rpx;
display: grid;
align-items: center;
grid-template-columns: repeat(4, 1fr);
grid-gap: 12rpx;

.user-item {
background: linear-gradient(90deg, #FFD9DA 0%, #FF8C8F 100%);
border-radius: 232132318px;
padding: 12rpx 16rpx;
display: flex;
align-items: center;

.user-image {
width: 32rpx;
height: 32rpx;
border-radius: 1932131rpx;
border: 1px solid #FFFFFF;
}

.nickname {
display: inline-block;
font-size: 24rpx;
font-weight: 400;
color: #FFFFFF;
margin-left: 16rpx;
}
}
}

.but {
background: #FE3B53;
border-radius: 8rpx;
padding: 24rpx 0;
text-align: center;
margin-top: 72rpx;
font-size: 32rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
}
</style>

+ 281
- 0
src/packages/people/pages/party-newspaper/index.vue View File

@@ -0,0 +1,281 @@
<template>
<view>
<custom-nav-bar left-text="党员服务" left-arrow />

<image class="second-header"
src="https://jiexiu.xuqidata.com:8083/jiexiujumin/5ff449a20cf95f6f207d2b3bc07816da05117b68cd810f7db27a6b8de34a61d9.png">
</image>

<view class="party-grid">
<block v-for="(item,index) in 4" :key="index">
<view style="width: 100%;height: 100%;;">
<image class="icon" src="/src/static/logo.png" mode=""></image>
<view class="title">党员注册</view>
</view>
</block>
</view>

<view class="title-name">志愿服务</view>
<view class="swiper">
<swiper style="height: 225px;" circular indicator-active-color="#C0CFDE" indicator-color="#fff"
:indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
<swiper-item v-for="(item,index) in 4" :key="index">
<view>
<view class="swiper-piso">
<image class="swiper-icon" src="/src/images/share-icon.png" mode=""></image>
<view class="type">服务中</view>
</view>
<view class="swiper-item">
<view>
<view class="item-title">创造更好营商环境申报</view>
<view class="msg">北京经开区政务服务中心联合融媒体中心策划</view>
</view>
<view class="but">申领</view>
</view>
</view>
</swiper-item>
</swiper>
</view>

<view class="title-name">活动风采</view>
<!-- 活动风采 -->
<view class="activity">
<block v-for="(item,index) in 5" :key="index">
<view class="activity-item" @click="headerDetail(item)">
<image class="activity-image" src="/src/images/share-icon.png" mode=""></image>
<view class="activity-type" v-if="index < 4" :class="`activity-type${index}`">NO.{{index+1}}</view>
<view class="activity-title">惠苑路社区西南角家乐福超市对面xxxxx</view>
<view class="activity-time">2023-11-23 周四</view>
<view class="activity-rigth">
<text>发布者的名字</text>
<image src="/src/static/logo.png" mode=""></image>
</view>
</view>
</block>
</view>

</view>
</template>

<script>
export default {
data() {
return {
background: ['color1', 'color2', 'color3'],
indicatorDots: true,
autoplay: false,
interval: 5000,
duration: 500
}
},
methods: {
headerDetail(item) {
uni.navigateTo({
url: './detail?id=' + item.id
})
}
}
}
</script>

<style lang="less" scoped>
.second-header {
width: 100%;
height: 330rpx;
}

.party-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
text-align: center;
align-items: center;
grid-gap: 24rpx;
height: 100%;
padding: 56rpx 38rpx 0 38rpx;
margin-bottom: 60rpx;

.icon {
width: 100%;
height: 100%;
}

.title {
margin-top: 16rpx;
font-size: 26rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #333333;
}
}

.title-name {
display: inline-block;
position: relative;
font-size: 36rpx;
font-weight: 500;
color: #333333;
padding: 30rpx 30rpx 0 30rpx;
z-index: 3;

&::after {
content: '';
position: absolute;
left: 15px;
bottom: 5px;
width: 140rpx;
// width: 115%;
z-index: -1;
height: 10rpx;
background: #FFCED6;
border-radius: 2rpx;
}
}

.swiper {
margin-top: 24rpx;
padding: 0 24rpx;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, #EEF7FF 100%);

.swiper-piso {
position: relative;

.swiper-icon {
width: 100%;
height: 240rpx;
border-radius: 6rpx;
}
}

.swiper-item {
margin-top: 38rpx;
display: grid;
align-items: center;
grid-template-columns: 80% 20%;

.item-title {
font-size: 30rpx;
font-weight: 500;
color: #194EB5;
}

.msg {
margin-top: 13rpx;
font-size: 26rpx;
font-weight: 400;
color: rgba(34, 34, 34, 0.9);
}

.but {
padding: 20rpx 20rpx;
font-size: 26rpx;
font-weight: 400;
background-color: #257eeb;
text-align: center;
color: #fff;
border-radius: 32312rpx;
}
}
}

.activity {
padding: 23rpx 20rpx;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 16rpx;

.activity-item {
position: relative;
background: #F9F9F9;
border-radius: 8rpx;

.activity-image {
width: 100%;
height: 180rpx;
}

.activity-title {
margin-top: 16rpx;
font-size: 30rpx;
font-weight: 400;
color: #000000;
}

.activity-title {
font-size: 24rpx;
font-weight: 400;
color: #999999;
}

.activity-time {
font-size: 24rpx;
font-weight: 400;
margin-top: 8rpx;
color: #999999;
}

.activity-rigth {
text-align: right;
font-size: 24rpx;
font-weight: 400;
color: #FF7F34;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 28rpx 28rpx 30rpx 0rpx;

image {
width: 32rpx;
height: 32rpx;
margin-left: 16rpx;
border-radius: 1932312312px;
}
}
}
}

/deep/.uni-swiper-dots-horizontal {
background: rgba(116, 148, 182, 0.1);
border-radius: 15px;
border: 1px solid #FFFFFF;
padding: 8rpx 26rpx;
}

.type {
position: absolute;
top: 0;
right: 0;
background: linear-gradient(291deg, #0A992D 0%, #11D03E 100%);
border-radius: 0px 8rpx 0px 1000rpx;
font-size: 24rpx;
font-weight: 400;
color: #fff;
padding: 12rpx 22rpx 12rpx 36rpx;
}

.activity-type {
position: absolute;
top: 0;
left: 0;
border-radius: 0px 8rpx 1000rpx 0;
font-size: 24rpx;
font-weight: 400;
color: #fff;
padding: 12rpx 22rpx 12rpx 36rpx;
}

.activity-type0 {
background: linear-gradient(291deg, #0A992D 0%, #11D03E 100%);
}

.activity-type1 {
background: linear-gradient(270deg, #F3623B 0%, #F88C44 100%);
}

.activity-type2 {
background: linear-gradient(291deg, #fea422 0%, #f9ca10 100%);
}

.activity-type3 {
background: linear-gradient(291deg, #4a507b 0%, #6882b1 100%);
}
</style>

+ 336
- 0
src/packages/people/pages/volunteering/index.vue View File

@@ -0,0 +1,336 @@
<template>
<view>
<custom-nav-bar position="fixed" color="black" left-text="志愿服务发布" left-arrow />

<view class="form-list">
<view class="form-body">
<view class="flex flex-v-center flex-between">
<view class="label">
<text>点单类型</text>
<text class="red">*</text>
</view>
<view class="label-value flex flex-v-center">
<picker @change="bindPickerChange" range-key="label" :value="form.type" :range="columns">
<!-- <view style="color: #000000">{{ columns[form.type].label }}</view> -->
</picker>
<image class="ic-xia" src="/static/packages/people/images/ic-xia.png"></image>
</view>
</view>
</view>

<view class="form-body form-col">
<view class="label">
<text>标题</text>
<text class="red">*</text>
</view>
<input class="flex1 textarea-class" @input="headleInput" :value="form.name" type="text" data-name="name"
placeholder="请输入" />
</view>
</view>

<view class="form-body">
<view class="label">
<text>内容</text>
<text class="red">*</text>
</view>
<textarea class="textarea-class" maxlength="500" @input="headleInput" data-name="content" placeholder="请输入内容"
auto-height :value="form.content"></textarea>
<view class="form-image">
<van-uploader :after-read="afterRead" :before-delete="beforeDelete" v-model="fileList" :deletable="true"
max-count="9">
<image class="camera" src="/static/images/icon9.png"></image>
</van-uploader>
</view>
<view class="form-msg">附件不超过9个，每个大小不超过1M</view>
</view>

<view class="form-body form-col">
<view class="label">
<text>所需人数</text>
<text class="red">*</text>
</view>
<input class="flex1 textarea-class" @input="headleInput" :value="form.name" type="text" data-name="name"
placeholder="请输入" />
</view>

<view class="form-body form-col">
<view class="label">
<text>发布者</text>
<text class="red">*</text>
</view>
<input class="flex1 textarea-class" @input="headleInput" :value="form.name" type="text" data-name="name"
placeholder="请输入" />
</view>

<view class="form-body form-col">
<view class="label">
<text>申领有效期</text>
<text class="red">*</text>
</view>
<input class="flex1 textarea-class" @input="headleInput" :value="form.name" type="text" data-name="name"
placeholder="请输入" />
</view>

<view class="form-body">
<view class="flex flex-v-center flex-between">
<view class="label">
<text>申领有效期</text>
<text class="red">*</text>
</view>
<view class="label-value flex flex-v-center">
<picker @change="bindPickerChange" range-key="label" :value="form.type" :range="columns">
<!-- <view style="color: #000000">{{ columns[form.type].label }}</view> -->
</picker>
<image class="ic-xia" src="/static/packages/people/images/ic-xia.png"></image>
</view>
</view>
</view>

<view class="form-body">
<view class="flex flex-v-center flex-between">
<view class="label">
<text>服务状态</text>
<text class="red">*</text>
</view>
<view class="label-value flex flex-v-center">
<picker @change="bindPickerChange" range-key="label" :value="form.type" :range="columns">
<!-- <view style="color: #000000">{{ columns[form.type].label }}</view> -->
</picker>
<image class="ic-xia" src="/static/packages/people/images/ic-xia.png"></image>
</view>
</view>
</view>

<view class="form-button">
<van-button v-if="checked" @click="submit" block color="#FE3B53">发布信息</van-button>
<van-button v-else disabled block color="#C1C1C1">发布信息</van-button>
</view>

</view>
</template>

<script>
export default {
data() {
return {
form: {},
checked: false,
columns: [],
fileList: []
}
},
methods: {
bindPickerChange() {

},
headleInput() {

},
async afterRead(event) {
const {
file
} = event;

const res = await getApp().globalData.upload({
file
});
if (res.code !== 0) {
uni.showToast({
title: '上传图片失败',
icon: 'none'
});
return false;
}
// this.fileList.push({url:res.data})
this.appealEnclosure.push(res.data);
},
beforeDelete(file, dateil) {
this.appealEnclosure.splice(dateil.index, 1);
this.fileList.splice(dateil.index, 1)
},
submit() {

}
}
}
</script>

<style lang="less" scoped>
.form-list {
width: 100%;
}

.form-body {
font-size: 32rpx;
font-weight: 400;
color: #333333;
padding: 40rpx 40rpx 38rpx;
position: relative;

&::before {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 678rpx;
height: 1px;
background-color: #EFEFEF;
}

.label {
font-size: 28rpx;
font-weight: 400;
color: #333333;
}

.label-value {
font-size: 32rpx;
font-weight: 500;
color: #000000;
line-height: 32rpx;

.ic-xia {
margin-left: 27rpx;
width: 32rpx;
height: 32rpx;
}
}

.picker {
margin-top: 24rpx;
}

.picker-text {
font-size: 32rpx;
font-weight: 400;
color: #999999;
}

.picker-line {
flex: 1;
}

.textarea-class {
margin-top: 26rpx;
width: 100%;
font-size: 32rpx;
font-weight: 400;
}

.form-msg {
font-size: 26rpx;
font-weight: 400;
color: #999999;
line-height: 26rpx;
margin-top: 28rpx;
}

.location {
width: 32rpx;
height: 32rpx;
}

.location-info {
margin-top: 26rpx;

input {
font-size: 32rpx;
font-weight: 400;
}
}
}

.form-col {
display: flex;
align-items: center;
justify-content: space-between;
text-align: right;

.textarea-class {
margin-top: 0;
}

.card-placeholder {
font-size: 32rpx;
font-weight: 400;
color: #000000;
}
}

.form-location {
padding: 20rpx 35rpx;
border-radius: 16rpx;
}

.form-treaty {
padding: 83rpx 40rpx 32rpx;

.ic-check {
width: 32rpx;
height: 32rpx;
}

.checbox-text {
font-size: 28rpx;
font-weight: 400;
color: #000000;
line-height: 28rpx;

.jump-to {
color: var(--item-dominant-color);
}
}
}

.form-button {
padding: 25rpx 36rpx;
}

.form-button-body {
height: 80rpx;
font-size: 32rpx;
font-weight: 400;
color: #ffffff;
line-height: 80rpx;
text-align: center;
background: #c1c1c1;
border-radius: 8rpx;
}

.form-button-body-select {
background: var(--item-dominant-color);
}

.form-image {
margin: 20rpx 0rpx 20rpx 0;
display: flex;
align-items: center;
flex-wrap: wrap;
}

.form-image>view {
width: 31.3%;
position: relative;
margin-right: 13.5rpx;
}

.form-image>view>image:nth-child(1) {
width: 100%;
height: 200rpx;
border-radius: 10rpx;
}

.form-image>view>image:nth-child(2) {
position: absolute;
top: -0rpx;
right: 0rpx;
width: 40rpx;
height: 40rpx;
}

.camera {
width: 160rpx;
height: 160rpx;
}
</style>

+ 25
- 0
src/pages.json View File

@@ -231,6 +231,31 @@
"path": "pages/ai-im/ai-im",
"name": "people",
"style": {}
},
{
"path": "pages/party-newspaper/index",
"name": "people",
"style": {}
},
{
"path": "pages/party-newspaper/detail",
"name": "people",
"style": {}
},
{
"path": "pages/party-newspaper/create",
"name": "people",
"style": {}
},
{
"path": "pages/activity-mien/index",
"name": "people",
"style": {}
},
{
"path": "pages/volunteering/index",
"name": "people",
"style": {}
}
]
},


Write Preview
Loading…
Cancel
Save