@@ -32,6 +32,7 @@ import { | |||||
DatePicker, | DatePicker, | ||||
Form, | Form, | ||||
CheckboxGroup, | CheckboxGroup, | ||||
RadioGroup, Radio | |||||
} from 'vant'; | } from 'vant'; | ||||
import share from '@/utils/share.js' | import share from '@/utils/share.js' | ||||
@@ -87,6 +88,8 @@ export function createApp() { | |||||
app.use(DatePicker); | app.use(DatePicker); | ||||
app.use(Form); | app.use(Form); | ||||
app.use(CheckboxGroup); | app.use(CheckboxGroup); | ||||
app.use(Radio); | |||||
app.use(RadioGroup); | |||||
// app.mixin(zpMixins); | // app.mixin(zpMixins); | ||||
return { | return { | ||||
app | app | ||||
@@ -69,7 +69,7 @@ | |||||
this.merchantPageApi(false); | this.merchantPageApi(false); | ||||
}, | }, | ||||
methods: { | methods: { | ||||
setMorKm(distance){ | |||||
setMorKm(distance) { | |||||
return utils.setMorKm(distance) | return utils.setMorKm(distance) | ||||
}, | }, | ||||
// 生活对应栏目的分页查询 | // 生活对应栏目的分页查询 | ||||
@@ -197,49 +197,6 @@ | |||||
.search { | .search { | ||||
padding: 30rpx 30rpx 54rpx 30rpx; | 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 { | .life-tabs { | ||||
margin-top: 40rpx; | 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> | </style> |
@@ -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> |
@@ -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> |
@@ -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> |
@@ -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> |
@@ -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> |
@@ -231,6 +231,31 @@ | |||||
"path": "pages/ai-im/ai-im", | "path": "pages/ai-im/ai-im", | ||||
"name": "people", | "name": "people", | ||||
"style": {} | "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": {} | |||||
} | } | ||||
] | ] | ||||
}, | }, | ||||