Skip to content

W
wangxiaolu-sfa-ui
提交 53641a5e authored 作者: lidongxu's avatar lidongxu
浏览文件
操作

style(mobile/promotion): 促销移动端_重构促销计划详情样式

同上
上级 76e00ce4
隐藏空白字符变更
内嵌 并排
正在显示 包含 176 行增加 和 144 行删除
src/mobile/views/promotion/plan/detail/index.vue
浏览文件 @ 53641a5e
...@@ -5,13 +5,15 @@ ...@@ -5,13 +5,15 @@
@click-left="clickBack()" @click-left="clickBack()"
fixed fixed
placeholder> placeholder>
<template #right v-if="!isCityManager"> <template #right
v-if="!isCityManager">
<p class="van-nav-bar__text" <p class="van-nav-bar__text"
@click="clickExamine()"> @click="clickExamine()">
{{ (examined ? '已' : '未') + '稽查' }} {{ (examined ? '已' : '未') + '稽查' }}
</p> </p>
</template> </template>
</van-nav-bar> </van-nav-bar>
<!-- 计划详情 -->
<van-cell-group> <van-cell-group>
<van-cell> <van-cell>
<template #title> <template #title>
...@@ -19,67 +21,100 @@ ...@@ -19,67 +21,100 @@
<p>{{ planDetail.pattern }}</p> <p>{{ planDetail.pattern }}</p>
</template> </template>
<template #label> <template #label>
<p class="employee" <p :class="{ 'plan-go': planDetail.planStatus === 1 }">
v-if="planDetail.planStatus === 0">未执行</p> {{ getPromotionActiveStatus(planDetail.planStatus).label }}
<p v-else </p>
class="employee plan-go">执行</p> <p>
<p class="employee">活动日期：&emsp;{{ parseTime(planDetail.date, '{y}-{m}-{d} (周{a})') }}</p> <span>活动日期：</span>
<p class="employee">归属人：&emsp;&emsp;{{ planDetail.employeeName }}（{{ planDetail.employeeNo }}）</p> <span>{{ parseTime(planDetail.date, '{y}-{m}-{d} (周{a})') }}</span>
<p class="employee">战区：&emsp;&emsp;&emsp;{{ planDetail.orgName }}</p> </p>
<p>
<p class="employee">系统名称：&emsp;{{ planDetail.lineName }}</p> <span>归属人：</span>
<p class="employee">店铺编码：&emsp;{{ planDetail.storeCode }}</p> <span>{{ planDetail.employeeName }}（{{ planDetail.employeeNo }}）</span>
<p class="employee">上班时间：&emsp;{{ parseTime(planDetail.clockInTime, "{h}:{i}:{s}") }}</p> </p>
<p class="employee">下班时间：&emsp;{{ parseTime(planDetail.clockOutTime, "{h}:{i}:{s}") }}</p> <p>
<p class="employee">促销员薪资：¥{{ planDetail.salary }}</p> <span>战区：</span>
<p class="employee">杂费：&emsp;&emsp;&emsp;¥{{ planDetail.incidentals }}</p> <span>{{ planDetail.orgName }}</span>
<p class="employee">经销商：&emsp;&emsp;{{ planDetail.dealerName }}</p> </p>
<p class="employee">创建人：&emsp;&emsp;{{ planDetail.createBy }}</p>
<p class="employee">修改人：&emsp;&emsp;{{ planDetail.modifyBy }}</p> <p>
<p class="employee">地址：&emsp;&emsp;&emsp;{{ planDetail.addr }}</p> <span>系统名称：</span>
<span>{{ planDetail.lineName }}</span>
</p>
<p>
<span>店铺编码：</span>
<span>{{ planDetail.storeCode }}</span>
</p>
<p>
<span>上班时间：</span>
<span>{{ parseTime(planDetail.clockInTime, "{h}:{i}:{s}") }}</span>
</p>
<p>
<span>下班时间：</span>
<span>{{ parseTime(planDetail.clockOutTime, "{h}:{i}:{s}") }}</span>
</p>
<p>
<span>促销员薪资：</span>
<span>¥{{ planDetail.salary }}</span>
</p>
<p>
<span>杂费：</span>
<span>¥{{ planDetail.incidentals }}</span>
</p>
<p>
<span>经销商：</span>
<span>{{ planDetail.dealerName }}</span>
</p>
<p>
<span>创建人：</span>
<span>{{ planDetail.createBy }}</span>
</p>
<p>
<span>修改人：</span>
<span>{{ planDetail.modifyBy }}</span>
</p>
<p>
<span>地址：</span>
<span>{{ planDetail.addr }}</span>
</p>
</template> </template>
</van-cell> </van-cell>
</van-cell-group> </van-cell-group>
<!-- 任务列表 --> <!-- 任务列表 -->
<van-pull-refresh v-model="refreshLoading" <van-list v-model:loading="loading"
:pull-distance="100" :finished="finished"
@refresh="onRefresh"> :immediate-check="false"
<van-list v-model:loading="loading" finished-text="没有更多了"
:finished="finished" @load="onLoad">
:immediate-check="false" <van-cell-group inset
finished-text="没有更多了" v-if="planList?.length > 0">
@load="onLoad"> <van-cell v-for="item in planList"
<van-cell-group inset :key="item.id">
v-if="planList?.length > 0"> <template #title>
<van-cell v-for="item in planList" <p>{{ item.temporaryName }}</p>
:key="item.id" <p>参考地址：{{ item.province + item.city + item.addr }}</p>
label-class="image-cell"> </template>
<template #title> <template #label>
<p>{{ item.temporaryName }}</p> <div class="item"
<p class="gray_title">参考地址：{{ item.province + item.city + item.addr }}</p> v-for="o in item.photoList">
</template> <template v-if="o.list">
<template #label> <p class="black_title">{{ o.title }}：</p>
<div class="item" <div class="image-wrap">
v-for="o in item.photoList"> <div class="small-item"
<template v-if="o.list"> v-for="obj, index in o.list">
<p class="black_title">{{ o.title }}：</p> <van-image :src="obj.photoUrl"
<div class="image-wrap"> @click="previewImage(o.list, index)" />
<div class="small-item" <p>{{ obj.title }}</p>
v-for="obj, index in o.list"> <p>{{ obj.time }}</p>
<van-image :src="obj.photoUrl"
@click="previewImage(o.list, index)" />
<p>{{ obj.title }}</p>
<p>{{ obj.time }}</p>
</div>
</div> </div>
</template> </div>
</div> </template>
</template> </div>
</van-cell> </template>
</van-cell-group> </van-cell>
</van-list> </van-cell-group>
</van-pull-refresh> </van-list>
<!-- 图片预览 -->
<van-image-preview v-model:show="show" <van-image-preview v-model:show="show"
:images="images" :images="images"
:start-position="startIndex" :start-position="startIndex"
...@@ -93,6 +128,7 @@ ...@@ -93,6 +128,7 @@
import { getPlanDetailAPI, createExamine } from '@/api' import { getPlanDetailAPI, createExamine } from '@/api'
import { parseTime } from '@/utils' import { parseTime } from '@/utils'
import userStore from '@/store/modules/user' import userStore from '@/store/modules/user'
import { getPromotionActiveStatus } from '@/dicts'
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance()
const isCityManager = ref(userStore().promotionIdentity) const isCityManager = ref(userStore().promotionIdentity)
...@@ -181,15 +217,6 @@ const getPlanDetail = async () => { ...@@ -181,15 +217,6 @@ const getPlanDetail = async () => {
title: '考勤打卡照片', title: '考勤打卡照片',
list: clockList list: clockList
}]) }])
// 把数组里图片合并成一个大数组
// const allPhotoList = ref([])
// photoDialogList.value.forEach(o => {
// if (o.list) {
// allPhotoList.value.push(...o.list)
// allPhotoList.value.push(...o.list)
// allPhotoList.value.push(...o.list)
// }
// })
return { return {
id: o.reported.id, // 用的是促销上报的id，不是打卡的 id id: o.reported.id, // 用的是促销上报的id，不是打卡的 id
province: o.reported.province, // 省份 province: o.reported.province, // 省份
...@@ -199,6 +226,8 @@ const getPlanDetail = async () => { ...@@ -199,6 +226,8 @@ const getPlanDetail = async () => {
photoList: photoDialogList, // 照片列表 photoList: photoDialogList, // 照片列表
} }
}) })
console.log(planList)
} }
getPlanDetail() getPlanDetail()
...@@ -226,14 +255,6 @@ const clickExamine = async () => { ...@@ -226,14 +255,6 @@ const clickExamine = async () => {
}) })
} }
const refreshLoading = ref(false)
const onRefresh = () => {
refreshLoading.value = true
setTimeout(() => {
refreshLoading.value = false
getPlanDetail()
}, 1000)
}
const loading = ref(false) const loading = ref(false)
const finished = ref(false) const finished = ref(false)
const onLoad = () => { const onLoad = () => {
...@@ -261,98 +282,110 @@ const onChange = (ind) => { ...@@ -261,98 +282,110 @@ const onChange = (ind) => {
index.value = ind index.value = ind
} }
</script> </script>
<style scoped> <style scoped
p { lang="scss">
margin: 0;
}
.plan-go {
color: #39bb74;
}
.mobile-container {
background: #f5f5f5;
min-height: 100vh;
.van-cell-group { .mobile-container {
background: #f5f5f5; background: #f5f5f5;
}
.van-list {
margin-top: 20px;
min-height: 100vh; min-height: 100vh;
::v-deep(.van-cell:nth-child(n+2)) { /* 计划详情 */
margin-top: 20px; .van-cell-group {
} background: #f5f5f5;
::v-deep(.van-cell) { .van-cell__title {
.item { p {
margin-top: 20px; font-size: 14px;
margin: 0 0 5px;
}
} }
}
}
::v-deep(.van-cell__title) { .van-cell__label {
flex: 3; .plan-go {
width: 100%; color: #39bb74;
}
.image-wrap { p {
/* 强制内容在一行 */ display: flex;
white-space: nowrap;
flex: 1;
overflow: scroll;
overflow-y: hidden;
&::-webkit-scrollbar-track { span:first-child {
background-color: transparent; width: 100px;
} display: inline-block;
}
span:nth-child(2) {
flex: 1;
}
}
.van-image {
display: inline-block;
margin: 0 10px;
} }
} }
} /* 任务列表 */
.van-list {
margin-top: 20px;
overflow: hidden;
::v-deep(.van-cell__label) { .van-cell-group {
flex: 1; margin: 0 20px;
width: 100%; width: 100%;
}
}
::v-deep(.employee) { /* 每个上报人组 */
margin-bottom: 5px !important; ::v-deep(.van-cell) {
} width: calc(100% - 40px);
::v-deep(.van-popup--right) { .van-cell__title {
width: 85% !important; width: 100%;
}
.van-cell__label {
/* 每个照片组（推广试吃，推荐成交） */
.item {
margin-top: 20px;
/* 横向图片容器 */
.image-wrap {
/* 强制内容在一行 */
white-space: nowrap;
overflow: scroll;
overflow-y: hidden;
::v-deep(.van-cell__label) {
font-size: 14px !important;
}
.small-item { .small-item {
width: 125px; width: 125px;
text-align: center; text-align: center;
display: inline-block; display: inline-block;
.van-image { .van-image {
height: 135px; height: 135px;
}
}
&::-webkit-scrollbar-track {
background-color: transparent;
}
.van-image {
display: inline-block;
margin: 0 10px;
}
}
}
}
}
&:nth-child(n+2) {
margin-top: 20px;
}
}
}
}
} }
}
.gray_title {
color: gray;
}
.black_title {
color: black;
}
</style> </style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论