初始化产品库
This commit is contained in:
aixianling
230
src/pages/whereabouts/whereabouts.vue
Normal file
230
src/pages/whereabouts/whereabouts.vue
Normal file
@@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<div class="whereabouts">
|
||||
<div class="topPane">
|
||||
<div class="userCard" flex>
|
||||
<u-avatar :src="user.avatar"/>
|
||||
<b class="fill">{{ mine.name }}</b>
|
||||
<ai-select :value="mine.direction" dict="villageCadresDirectionChoice"
|
||||
@data="v=>mine=v"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="work-wrapper">
|
||||
<div class="header">
|
||||
<span class="firstCol">姓名</span>
|
||||
<div flex ref="movableArea" class="fill">
|
||||
<span class="fill" v-for="(item, index) in keys" :key="index">{{ item.dictName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="item" v-for="(item, index) in others" :key="index">
|
||||
<span class="firstCol">{{ item.name }}</span>
|
||||
<movable-area class="flexRow">
|
||||
<movable-view direction="horizontal" :x="item.offset" disabled>
|
||||
<span class="drag"/>
|
||||
</movable-view>
|
||||
</movable-area>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
import AiImage from "../../components/AiImage";
|
||||
import UAvatar from "../../uview/components/u-avatar/u-avatar";
|
||||
import AiSelect from "../../components/AiSelect";
|
||||
|
||||
export default {
|
||||
name: "whereabouts",
|
||||
components: {AiSelect, UAvatar, AiImage},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
keys() {
|
||||
return this.$dict.getDict("villageCadresDirectionChoice")
|
||||
},
|
||||
mine: {
|
||||
get() {
|
||||
return this.list.find(e => e.phone == this.user.phone) || {}
|
||||
},
|
||||
set(v) {
|
||||
v?.[0]?.value && this.submitWhereabouts(v[0].value)
|
||||
}
|
||||
},
|
||||
others() {
|
||||
return this.list?.filter(e => e.phone != this.user.phone).map(e => ({
|
||||
...e,
|
||||
offset: (e.direction * this.movableAreaWidth / 4)
|
||||
}))
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
current: 0,
|
||||
isMore: false,
|
||||
movableAreaWidth: 0
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getUserList()
|
||||
},
|
||||
created() {
|
||||
this.$dict.load('villageCadresDirectionChoice')
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.movableAreaWidth = (this.$refs?.movableArea?.clientWidth) || 0
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getUserList() {
|
||||
if (this.isMore) return
|
||||
this.$http.post(`/app/appvillagecadresdirection/listForWx`, null, {
|
||||
params: {current: this.current + 1, size: 20}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
if (!res.data.records.length) {
|
||||
this.isMore = true
|
||||
return false
|
||||
}
|
||||
|
||||
this.list = [...this.list, ...res.data.records]
|
||||
this.current++
|
||||
}
|
||||
})
|
||||
},
|
||||
submitWhereabouts(direction) {
|
||||
this.$http.post(`/app/appvillagecadresdirection/updateStatus`, {
|
||||
direction, id: this.mine.id
|
||||
}).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.$u.toast('修改成功')
|
||||
this.getUserList()
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
this.getUserList()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.whereabouts {
|
||||
padding: 0 0 60px;
|
||||
|
||||
.topPane {
|
||||
height: 232px;
|
||||
margin-bottom: 32px;
|
||||
background-image: url("https://cdn.cunwuyun.cn/dvcp/h5/whereaboutsBg.png");
|
||||
background-position: center top;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 96px;
|
||||
padding: 16px 32px 0;
|
||||
|
||||
::v-deep .userCard {
|
||||
height: 216px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 10px 24px 0 rgba(220, 220, 220, 0.5);
|
||||
border-radius: 20px;
|
||||
padding: 0 32px;
|
||||
|
||||
& > b {
|
||||
margin-left: 18px;
|
||||
font-size: 44px;
|
||||
}
|
||||
|
||||
.selectedLabel {
|
||||
font-size: 36px;
|
||||
color: #408CFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.work-wrapper {
|
||||
width: 706px;
|
||||
margin: 0 auto;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #F2F4FC;
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 8px 0 rgba(233, 233, 234, 1);
|
||||
|
||||
uni-movable-view {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 25%;
|
||||
align-items: center;
|
||||
|
||||
.drag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&:before {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #B53430;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.body {
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
border: 1px solid #F2F4FC;
|
||||
|
||||
.mine {
|
||||
color: #26f;
|
||||
}
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
background: #F2F4FC;
|
||||
}
|
||||
|
||||
.flexRow {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .firstCol {
|
||||
width: 170px;
|
||||
padding-left: 30px;
|
||||
flex: inherit;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 96px;
|
||||
text-align: center;
|
||||
background: #4E8EEE;
|
||||
box-shadow: 0 4px 8px 0 rgba(233, 233, 234, 1), 0 8px 24px 2px rgba(201, 216, 250, 1), 0 0 0 transparent;
|
||||
border-radius: 10px 10px 0 0;
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user