You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
183 lines
4.0 KiB
183 lines
4.0 KiB
<template>
|
|
<view class="page__view highlight">
|
|
|
|
<!-- 搜索栏 -->
|
|
<view :class="['flex', 'search', isFocusSearch ? 'is-focus' : '']" >
|
|
<uv-search
|
|
v-model="keyword"
|
|
placeholder="请输入"
|
|
color="#181818"
|
|
bgColor="transparent"
|
|
:showAction="isFocusSearch"
|
|
@custom="search"
|
|
@search="search"
|
|
@focus="isFocusSearch = true"
|
|
@blur="isFocusSearch = false"
|
|
>
|
|
<template #prefix>
|
|
<image class="search-icon" src="@/static/image/icon-search-dark.png" mode="widthFix"></image>
|
|
</template>
|
|
</uv-search>
|
|
</view>
|
|
|
|
<view class="archives">
|
|
<userCard @switchMember="jumpToChooseMember" @addRecord="onAdd"></userCard>
|
|
</view>
|
|
|
|
<view class="list" v-if="memberInfo">
|
|
<recordsView :list="list"></recordsView>
|
|
</view>
|
|
<view class="flex" v-else>
|
|
<button class="btn btn-choose" @click="jumpToChooseMember">请先选择人员</button>
|
|
</view>
|
|
|
|
<record-form-popup ref="recordFormPopup" @submitted="getData"></record-form-popup>
|
|
|
|
<tabber select="growing" />
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex'
|
|
|
|
import mixinsList from '@/mixins/list.js'
|
|
|
|
import tabber from '@/components/base/tabbar.vue'
|
|
import userCard from '@/components/growing/userCard.vue'
|
|
import recordsView from '@/components/growing/recordsView.vue'
|
|
import recordFormPopup from '@/pages_order/comment/recordFormPopup.vue'
|
|
|
|
export default {
|
|
mixins: [mixinsList],
|
|
components: {
|
|
userCard,
|
|
recordsView,
|
|
recordFormPopup,
|
|
tabber,
|
|
},
|
|
data() {
|
|
return {
|
|
keyword: '',
|
|
isFocusSearch: false,
|
|
queryParams: {
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
userId: '',
|
|
},
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['memberInfo']),
|
|
mixinsListApi() {
|
|
return this.queryParams.userId ? 'queryExperienceList' : ''
|
|
},
|
|
},
|
|
onLoad() {
|
|
if(uni.getStorageSync('token')){
|
|
this.$store.commit('getUserInfo')
|
|
}
|
|
},
|
|
onShow() {
|
|
// todo: set queryParams.userId by memberInfo
|
|
|
|
if (!this.memberInfo && this.userInfo.id) {
|
|
this.$store.commit('setMemberInfo', this.userInfo)
|
|
}
|
|
this.queryParams.userId = this.memberInfo.id
|
|
this.getData()
|
|
},
|
|
methods: {
|
|
getDataThen(records) {
|
|
this.list = records.map(item => {
|
|
const { id, name, image, createTime } = item
|
|
|
|
return {
|
|
id,
|
|
// todo: check key
|
|
name,
|
|
image: image?.split?.(',') || [],
|
|
createTime
|
|
}
|
|
})
|
|
},
|
|
search() {
|
|
console.log('search', this.keyword)
|
|
uni.navigateTo({
|
|
url: '/pages_order/growing/activity/search?search=' + this.keyword
|
|
})
|
|
// this.keyword = ''
|
|
},
|
|
onAdd() {
|
|
this.$refs.recordFormPopup.open()
|
|
},
|
|
jumpToChooseMember() {
|
|
uni.navigateTo({
|
|
url: `/pages_order/member/switch`
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.search {
|
|
$w: 474rpx;
|
|
$h: 64rpx;
|
|
$radius: 32rpx;
|
|
$borderWidth: 4rpx;
|
|
|
|
width: $w;
|
|
height: $h;
|
|
position: relative;
|
|
padding: 94rpx 32rpx 6rpx 32rpx;
|
|
border-radius: $radius;
|
|
|
|
&-icon {
|
|
margin: 0 13rpx 0 26rpx;
|
|
width: 30rpx;
|
|
height: auto;
|
|
}
|
|
|
|
/deep/ .uv-search__content {
|
|
padding: 12rpx 0;
|
|
border: 4rpx solid transparent;
|
|
}
|
|
|
|
/deep/ .uv-search__content {
|
|
background: #FFFFFF !important;
|
|
border-color: #CFEFFF !important;
|
|
}
|
|
|
|
&.is-focus {
|
|
/deep/ .uv-search__action {
|
|
padding: 19rpx 24rpx;
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
color: #FFFFFF;
|
|
background: #00A9FF;
|
|
border-radius: 32rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.archives {
|
|
padding: 32rpx 40rpx 16rpx 40rpx;
|
|
}
|
|
|
|
.btn-choose {
|
|
margin-top: 84rpx;
|
|
padding: 14rpx 125rpx;
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
line-height: 1.4;
|
|
color: #FFFFFF;
|
|
background: linear-gradient(to right, #21FEEC, #019AF9);
|
|
border: 2rpx solid #00A9FF;
|
|
border-radius: 41rpx;
|
|
}
|
|
|
|
</style>
|