提交 3a093205 authored 作者: lidongxu's avatar lidongxu

feat(audit_activity): 新增:勤策移动端_售点稽查模块页面完成_交互功能暂未完成

上级 9a64445d
......@@ -61,7 +61,10 @@
@cancel="showTypePopup = false" />
</van-popup>
<!-- 信息填写组 -->
<van-tabs v-model:active="active" class="tabs">
<van-tabs v-model:active="active"
class="tabs"
swipeable
sticky>
<van-tab title="常规陈列">
<convention />
</van-tab>
......@@ -75,6 +78,44 @@
<categoryInfomation />
</van-tab>
</van-tabs>
<!-- 任务总结 -->
<div class="task-summary">
<p class="title">其他:</p>
<van-field label="礼盒/礼袋是否在售:"
label-align="top">
<template #input>
<van-checkbox-group v-model="form.verify"
direction="horizontal"
shape="square">
<van-checkbox name="礼盒">礼盒</van-checkbox>
<van-checkbox name="礼袋">礼袋</van-checkbox>
</van-checkbox-group>
</template>
</van-field>
<van-field label="我品 SKU 总数:"
placeholder="请输入"
label-align="top" />
<van-field label="备注:"
placeholder="请输入"
label-align="top"
type="textarea"
border />
<!-- 大日期产品照片 -->
<div class="header-photo-section">
<van-field label="大日期产品照片"
label-align="top">
<template #input>
<van-uploader :max-count="2"
accept="image/*"
v-model="form.posPhotos"
:after-read="posPhotosRead"
preview-size="120"
@delete="deletePosPhotos">
</van-uploader>
</template>
</van-field>
</div>
</div>
</div>
</div>
</template>
......@@ -82,12 +123,11 @@
<script setup>
import { uploadFileToOSSAPI, getLocation } from '@/api'
import { typeOptions as typeOption } from '@/views/mobile/constant'
import convention from './tabs/categoryInfomation.vue'
import convention from './tabs/conventionalDisplay.vue'
import scheduleDisplay from './tabs/scheduleDisplay.vue'
import scheduleAdjustment from './tabs/scheduleAdjustment.vue'
import categoryInfomation from './tabs/categoryInfomation.vue'
const router = useRouter();
const form = reactive({
selectedType: [], // 门店类型
......@@ -114,7 +154,7 @@ const getLocationFn = () => {
function (error) {
showDialog({
title: '系统提示',
message: '请开启软件的定位授权,再试' + JSON.stringify(error),
message: '请开启软件的定位授权,再试',
})
},
{
......@@ -158,7 +198,7 @@ const posPhotosRead = async (file) => {
// 删除 照片
const deletePosPhotos = async () => {
if (isInitializing.value) return
showNotify({ type: 'success', message: 'POS 照片删除成功' })
}
......@@ -175,96 +215,122 @@ const handleTypeConfirm = (val) => {
const active = ref(0)
</script>
<style scoped>
.wrap {
background-color: #f5f5f5;
min-height: 100vh;
font-size: 16px;
<style scoped
lang="scss">
.wrap {
background-color: #f5f5f5;
min-height: 100vh;
font-size: 16px;
.content {
padding: 20px;
.content {
padding: 20px;
.title {
margin: 0;
font-size: 14px;
font-weight: bold;
}
.title {
margin: 0;
font-size: 14px;
font-weight: bold;
}
/* 终端名称信息 */
.terminal-wrap {
margin-top: 10px;
padding: 10px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
display: flex;
gap: 20px;
.terminal-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
p {
font-size: 14px;
margin: 0;
color: #a1a1a1;
}
p:first-child {
color: black;
font-size: 15px;
font-weight: bold;
}
}
}
/* 终端名称信息 */
.terminal-wrap {
margin-top: 10px;
padding: 10px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
display: flex;
gap: 20px;
.terminal-info {
flex: 1;
/* 位置信息 */
.location-wrap {
margin-top: 10px;
padding: 10px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
.location-icon {
font-size: 20px;
color: #da5c50;
}
p {
font-size: 14px;
margin: 0;
color: #a1a1a1;
}
}
/* 门头照 */
.header-photo-section {
margin-top: 10px;
p:first-child {
color: black;
font-size: 15px;
font-weight: bold;
::v-deep(.van-uploader__upload) {
width: 80px !important;
height: 80px !important;
border: 1px dashed #ccc;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f8f8f8;
}
}
/* 信息填写组 */
.tabs {
margin-top: 10px;
}
}
/* 位置信息 */
.location-wrap {
margin-top: 10px;
padding: 10px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: space-between;
.location-icon {
font-size: 20px;
color: #da5c50;
}
/* 其他 */
.task-summary {
margin-top: 10px;
background: white;
padding: 10px;
color: var(--main-color);
p {
font-size: 14px;
margin: 0;
}
}
.title {
margin-bottom: 10px;
}
/* 门头照 */
.header-photo-section {
margin-top: 10px;
::v-deep(textarea) {
border: 1px solid lightgray;
}
::v-deep(.van-uploader__upload) {
width: 80px !important;
height: 80px !important;
border: 1px dashed #ccc;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f8f8f8;
.van-cell {
padding: 0;
.van-checkbox {
margin-bottom: 10px;
}
}
}
}
/* 信息填写组 */
.tabs{
margin-top: 10px;
}
}
}
</style>
\ No newline at end of file
<template>
<div>
品类信息
<div class="mobile-page-container">
<!-- 类型选择 -->
<div class="category-select">
<van-field label-width="4rem"
label-position="left"
label="品类选择:"
:model-value="selectedTypeObj.label"
placeholder="请输入">
<template #input>
<el-select v-model="selectedTypeObj"
placeholder="请选择"
filterable>
<el-option v-for="item in typeOptions"
:label="item.label"
:value="item" />
</el-select>
</template>
</van-field>
<van-field v-model="selectedTypeObj.price"
:label="selectedTypeObj.label + ' 价格:'"
label-width="4rem"
placeholder="请输入价格"
clearable
class="search-input" />
</div>
<!-- 品类信息 -->
<div class="table-container">
<!-- 表格容器 -->
<div class="custom-table">
<!-- 表头行 -->
<div class="table-row header-row">
<div class="table-cell first-column">品类/生产日期</div>
<div class="table-cell second-column"></div>
</div>
<!-- 数据行 -->
<div class="table-row even-row"
v-for="(obj, index) in selectedTypeObj.taste"
:key="index">
<div class="table-cell first-column">{{ obj.name }}</div>
<div class="table-cell second-column">
<van-field :model-value="obj.value"
type="text"
placeholder="请输入"
:border="false"
class="cell-input">
<template #input>
<el-date-picker v-model="obj.value"
type="month"
placeholder="选择月份"
:size="size" />
</template>
</van-field>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
// 品类型
const typeOptions = ref([
{
label: ' 虎皮凤爪 210g', value: ' 虎皮凤爪 210g', price: '', taste: [
{
name: "卤香",
value: '' // 日期
},
{
name: "香辣",
value: ''
},
{
name: "椒麻",
value: ''
},
{
name: "火锅",
value: ''
},
{
name: "微辣",
value: ''
},
{
name: "麻辣",
value: ''
},
{
name: "黑鸭",
value: ''
},
]
},
{
label: ' 虎皮凤爪 105g', value: ' 虎皮凤爪 105g', price: '', taste: [
{
name: "卤香",
value: '' // 日期
},
{
name: "香辣",
value: ''
},
{
name: "椒麻",
value: ''
},
{
name: "火锅",
value: ''
},
{
name: "微辣",
value: ''
},
{
name: "麻辣",
value: ''
},
{
name: "黑鸭",
value: ''
},
]
},
{
label: ' 虎皮凤爪 68g', value: ' 虎皮凤爪 68g', price: '', taste: [
{
name: "卤香",
value: '' // 日期
},
{
name: "香辣",
value: ''
},
{
name: "椒麻",
value: ''
},
{
name: "麻辣",
value: ''
},
{
name: "黑鸭",
value: ''
},
]
},
{
label: ' 鸡肉豆堡 120g', value: ' 鸡肉豆堡 120g', price: '', taste: [
{
name: "卤香",
value: '' // 日期
},
{
name: "香辣",
value: ''
}
]
},
{
label: ' 牛肉豆堡 120g', value: ' 牛肉豆堡 120g', price: '', taste: [
{
name: "卤香",
value: '' // 日期
},
{
name: "香辣",
value: ''
}
]
},
{
label: ' 去骨凤爪 72g', value: ' 去骨凤爪 72g', price: '', taste: [
{
name: "柠檬",
value: '' // 日期
},
{
name: "香辣",
value: ''
}
]
},
{
label: ' 去骨凤爪 138g', value: ' 去骨凤爪 138g', price: '', taste: [
{
name: "柠檬",
value: '' // 日期
},
{
name: "香辣",
value: ''
}
]
},
{
label: ' 虎皮小鸡腿 80g', value: ' 虎皮小鸡腿 80g', price: '', taste: [
{
name: "卤香",
value: '' // 日期
},
{
name: "香辣",
value: ''
}
]
},
{
label: ' 老卤系列 ', value: ' 老卤系列 ', price: '', taste: [
{
name: "凤爪",
value: '' // 日期
},
{
name: "鸭掌",
value: ''
}
]
},
{
label: ' 单支虎皮凤爪 ', value: ' 单支虎皮凤爪 ', price: '', taste: [
{
name: "卤香",
value: '' // 日期
},
{
name: "香辣",
value: ''
}
]
},
{
label: ' 散称虎皮凤爪 ', value: ' 散称虎皮凤爪 ', price: '', taste: [
{
name: "卤香",
value: '' // 日期
},
{
name: "香辣",
value: ''
},
{
name: "黑鸭",
value: ''
}
]
}
]);
const selectedTypeObj = ref(typeOptions.value[0])
</script>
<style scoped></style>
\ No newline at end of file
<style lang="scss"
scoped>
.mobile-page-container {
padding: 10px;
background-color: #fff;
// 类型选择
.category-select {
// 品类选择
.van-cell {
padding: 0;
align-items: center;
// font-size: 14px;
// font-weight: 900;
.el-select {
width: 150px;
}
}
.search-input {
margin-top: 10px;
}
}
// 表格容器
.table-container {
margin-top: 10px;
}
.custom-table {
width: 100%;
border: 1px solid #ccc;
border-collapse: collapse; // 模拟表格边框合并
.table-row {
display: flex;
width: 100%;
height: 44px;
&.header-row {
background-color: #e5e5e5;
.second-column {
background: #e5e5e5;
}
}
&.odd-row {
background-color: #f9f9f9;
}
&.even-row {
background-color: #e5e5e5;
}
}
.table-cell {
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
font-size: 14px;
color: #333;
&:last-child {
border-right: none;
}
&.first-column {
width: 120px;
font-weight: 500;
}
&.second-column {
background: white;
flex: 1;
padding: 0 8px;
}
}
.cell-input {
width: 100%;
height: 100%;
text-align: center;
font-size: 14px;
padding: 0;
::v-deep(.van-cell__value) {
display: flex;
align-items: center;
.van-field__control {
.el-input {
width: auto;
}
}
}
}
}
}
// 移除最后一行的下边框
.table-row:last-child .table-cell {
border-bottom: none;
}
</style>
\ No newline at end of file
<template>
<div>
常规陈列
<div class="mobile-page-container">
<!-- 常规陈列 -->
<div class="item"
v-for="(obj, index) in displayGroup">
<p class="title">常规陈列{{ index + 1 }}</p>
<van-cell-group inset>
<van-field v-model="obj.modality"
name="modality"
label="形式"
placeholder="请输入形式"
auto-complete="off"
:rules="[{ required: true, message: '请输入形式' }]" />
<van-field v-model="obj.cost"
name="cost"
label="费用"
placeholder="费用"
auto-complete="off"
:rules="[{ required: true, message: '请输入费用' }]" />
<van-field label="常规陈列照片"
label-align="top"
class="header-photo-section">
<template #input>
<van-uploader :max-count="2"
accept="image/*"
v-model="obj.displayPhotos"
:after-read="displayPhotosRead"
preview-size="120"
@delete="deletedisplayPhotos">
</van-uploader>
</template>
</van-field>
<van-field label="核查结果"
label-align="top">
<template #input>
<van-checkbox-group v-model="obj.verify"
direction="horizontal"
shape="square">
<van-checkbox name="合格">合格</van-checkbox>
<van-checkbox name="需整改">需整改</van-checkbox>
<van-checkbox name="不合格">不合格</van-checkbox>
<van-checkbox name="虚假">虚假</van-checkbox>
</van-checkbox-group>
</template>
</van-field>
</van-cell-group>
</div>
<!-- 新增按钮 -->
<van-button class="add-item"
type="primary"
@click="addItem">新增一组陈列</van-button>
<!-- 总体判定 -->
<div class="overall">
<p class="title">常规陈列总体判定结果:</p>
<van-checkbox-group v-model="overAll.verify"
direction="horizontal"
shape="square">
<van-checkbox name="合格">合格</van-checkbox>
<van-checkbox name="需整改">需整改</van-checkbox>
<van-checkbox name="不合格">不合格</van-checkbox>
<van-checkbox name="虚假">虚假</van-checkbox>
</van-checkbox-group>
</div>
</div>
</template>
<script setup>
// 陈列组信息
const displayGroup = ref([
{
modality: '', // 形式
cost: '', // 费用
displayPhotos: [], // 陈列照片
verify: [] // 核查结果
}
])
// 新增一组
const addItem = () => {
displayGroup.value.push({
modality: '', // 形式
cost: '', // 费用
displayPhotos: [], // 陈列照片
verify: [] // 核查结果
})
}
// 陈列照片
const displayPhotosRead = async (file) => {
// 处理上传的文件
const date = new Date()
const month = date.getMonth() + 1
const theDate = date.getDate()
const pictureUrl = await uploadFileToOSSAPI(`risk/${date.getFullYear()}-${month}/${theDate}/${planId.value}/${employeeNo}/${uuidv4()}.png`, file.file)
// 判断 objectUrl
const index = form.value.posPhotos.findIndex(o => o.objectUrl)
form.value.posPhotos[index] = {
url: pictureUrl
}
}
// 删除 照片
const deletedisplayPhotos = async () => {
if (isInitializing.value) return
showNotify({ type: 'success', message: 'POS 照片删除成功' })
}
// 总体核查结果
const overAll = ref({})
</script>
<style scoped></style>
\ No newline at end of file
<style scoped
lang="scss">
.mobile-page-container {
padding: 10px 10px 0 10px;
background-color: white;
font-size: 14px;
/* 公共样式 */
.title {
margin: 0;
font-weight: 900;
color: var(--main-color);
}
/* 每个分组 */
.item {
margin-bottom: 10px;
.van-cell-group {
padding: 0;
margin: 0;
.van-cell {
padding-left: 0px;
}
.header-photo-section {
margin-top: 10px;
::v-deep(.van-uploader__upload) {
width: 80px !important;
height: 80px !important;
border: 1px dashed #ccc;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f8f8f8;
}
}
/* 核查结果 */
.van-checkbox {
margin-bottom: 10px;
}
}
&:after {
content: " ";
display: block;
width: 100%;
border-bottom: 1px solid gray;
}
}
/* 新增一组 */
.add-item {
width: 100%;
height: 30px;
margin-top: 10px;
}
/* 总体判定 */
.overall {
background-color: white;
padding-top: 10px;
.van-checkbox-group {
margin-top: 10px;
.van-checkbox {
margin-bottom: 10px;
}
}
}
}
</style>
\ No newline at end of file
<template>
<div>
档期补差
<div class="mobile-page-container">
<!-- 档期补差 -->
<div class="item"
v-for="(obj, index) in displayGroup">
<p class="title">档期补差{{ index + 1 }}</p>
<van-cell-group inset>
<van-field v-model="obj.modality"
name="modality"
label="提报内容"
placeholder="请输入提报内容"
auto-complete="off"
:rules="[{ required: true, message: '请输入提报内容' }]" />
<van-field v-model="obj.cost"
name="cost"
label="执行情况"
placeholder="执行情况"
auto-complete="off"
:rules="[{ required: true, message: '请输入执行情况' }]" />
<van-field label="档期补差照片"
label-align="top"
class="header-photo-section">
<template #input>
<van-uploader :max-count="2"
accept="image/*"
v-model="obj.displayPhotos"
:after-read="displayPhotosRead"
preview-size="120"
@delete="deletedisplayPhotos">
</van-uploader>
</template>
</van-field>
<van-field label="补差核查结果"
label-align="top">
<template #input>
<van-checkbox-group v-model="obj.verify"
direction="horizontal"
shape="square">
<van-checkbox name="已执行">已执行</van-checkbox>
<van-checkbox name="部分执行">部分执行</van-checkbox>
<van-checkbox name="绑赠差异">绑赠差异</van-checkbox>
<van-checkbox name="未执行">未执行</van-checkbox>
</van-checkbox-group>
</template>
</van-field>
</van-cell-group>
</div>
<!-- 新增按钮 -->
<van-button class="add-item"
type="primary"
@click="addItem">新增一组陈列</van-button>
<!-- 总体判定 -->
<!-- <div class="overall">
<p class="title">档期陈列总体判定结果:</p>
<van-checkbox-group v-model="overAll.verify"
direction="horizontal"
shape="square">
<van-checkbox name="合格">合格</van-checkbox>
<van-checkbox name="需整改">需整改</van-checkbox>
<van-checkbox name="不合格">不合格</van-checkbox>
<van-checkbox name="虚假">虚假</van-checkbox>
</van-checkbox-group>
</div> -->
</div>
</template>
<script setup>
// 陈列组信息
const displayGroup = ref([
{
modality: '', // 形式
cost: '', // 费用
displayPhotos: [], // 陈列照片
verify: [] // 核查结果
}
])
// 新增一组
const addItem = () => {
displayGroup.value.push({
modality: '', // 形式
cost: '', // 费用
displayPhotos: [], // 陈列照片
verify: [] // 核查结果
})
}
// 陈列照片
const displayPhotosRead = async (file) => {
// 处理上传的文件
const date = new Date()
const month = date.getMonth() + 1
const theDate = date.getDate()
const pictureUrl = await uploadFileToOSSAPI(`risk/${date.getFullYear()}-${month}/${theDate}/${planId.value}/${employeeNo}/${uuidv4()}.png`, file.file)
// 判断 objectUrl
const index = form.value.posPhotos.findIndex(o => o.objectUrl)
form.value.posPhotos[index] = {
url: pictureUrl
}
}
// 删除 照片
const deletedisplayPhotos = async () => {
if (isInitializing.value) return
showNotify({ type: 'success', message: 'POS 照片删除成功' })
}
// 总体核查结果
const overAll = ref({})
</script>
<style scoped></style>
\ No newline at end of file
<style scoped
lang="scss">
.mobile-page-container {
padding: 10px 10px 0 10px;
background-color: white;
font-size: 14px;
/* 公共样式 */
.title {
margin: 0;
font-weight: 900;
color: var(--main-color);
}
/* 每个分组 */
.item {
margin-bottom: 10px;
.van-cell-group {
padding: 0;
margin: 0;
.van-cell {
padding-left: 0px;
}
.header-photo-section {
margin-top: 10px;
::v-deep(.van-uploader__upload) {
width: 80px !important;
height: 80px !important;
border: 1px dashed #ccc;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f8f8f8;
}
}
/* 核查结果 */
.van-checkbox {
margin-bottom: 10px;
}
}
&:after {
content: " ";
display: block;
width: 100%;
border-bottom: 1px solid gray;
}
}
/* 新增一组 */
.add-item {
width: 100%;
height: 30px;
margin-top: 10px;
}
/* 总体判定 */
.overall {
background-color: white;
padding-top: 10px;
.van-checkbox-group {
margin-top: 10px;
.van-checkbox {
margin-bottom: 10px;
}
}
}
}
</style>
\ No newline at end of file
<template>
<div>
档期陈列
<div class="mobile-page-container">
<!-- 档期陈列 -->
<div class="item"
v-for="(obj, index) in displayGroup">
<p class="title">档期陈列{{ index + 1 }}</p>
<van-cell-group inset>
<van-field v-model="obj.modality"
name="modality"
label="形式"
placeholder="请输入形式"
auto-complete="off"
:rules="[{ required: true, message: '请输入形式' }]" />
<van-field v-model="obj.cost"
name="cost"
label="费用"
placeholder="费用"
auto-complete="off"
:rules="[{ required: true, message: '请输入费用' }]" />
<van-field label="档期陈列照片"
label-align="top"
class="header-photo-section">
<template #input>
<van-uploader :max-count="2"
accept="image/*"
v-model="obj.displayPhotos"
:after-read="displayPhotosRead"
preview-size="120"
@delete="deletedisplayPhotos">
</van-uploader>
</template>
</van-field>
<van-field label="核查结果"
label-align="top">
<template #input>
<van-checkbox-group v-model="obj.verify"
direction="horizontal"
shape="square">
<van-checkbox name="合格">合格</van-checkbox>
<van-checkbox name="需整改">需整改</van-checkbox>
<van-checkbox name="不合格">不合格</van-checkbox>
<van-checkbox name="虚假">虚假</van-checkbox>
</van-checkbox-group>
</template>
</van-field>
</van-cell-group>
</div>
<!-- 新增按钮 -->
<van-button class="add-item"
type="primary"
@click="addItem">新增一组陈列</van-button>
<!-- 总体判定 -->
<div class="overall">
<p class="title">档期陈列总体判定结果:</p>
<van-checkbox-group v-model="overAll.verify"
direction="horizontal"
shape="square">
<van-checkbox name="合格">合格</van-checkbox>
<van-checkbox name="需整改">需整改</van-checkbox>
<van-checkbox name="不合格">不合格</van-checkbox>
<van-checkbox name="虚假">虚假</van-checkbox>
</van-checkbox-group>
</div>
</div>
</template>
<script setup>
// 陈列组信息
const displayGroup = ref([
{
modality: '', // 形式
cost: '', // 费用
displayPhotos: [], // 陈列照片
verify: [] // 核查结果
}
])
// 新增一组
const addItem = () => {
displayGroup.value.push({
modality: '', // 形式
cost: '', // 费用
displayPhotos: [], // 陈列照片
verify: [] // 核查结果
})
}
// 陈列照片
const displayPhotosRead = async (file) => {
// 处理上传的文件
const date = new Date()
const month = date.getMonth() + 1
const theDate = date.getDate()
const pictureUrl = await uploadFileToOSSAPI(`risk/${date.getFullYear()}-${month}/${theDate}/${planId.value}/${employeeNo}/${uuidv4()}.png`, file.file)
// 判断 objectUrl
const index = form.value.posPhotos.findIndex(o => o.objectUrl)
form.value.posPhotos[index] = {
url: pictureUrl
}
}
// 删除 照片
const deletedisplayPhotos = async () => {
if (isInitializing.value) return
showNotify({ type: 'success', message: 'POS 照片删除成功' })
}
// 总体核查结果
const overAll = ref({})
</script>
<style scoped></style>
\ No newline at end of file
<style scoped
lang="scss">
.mobile-page-container {
padding: 10px 10px 0 10px;
background-color: white;
font-size: 14px;
/* 公共样式 */
.title {
margin: 0;
font-weight: 900;
color: var(--main-color);
}
/* 每个分组 */
.item {
margin-bottom: 10px;
.van-cell-group {
padding: 0;
margin: 0;
.van-cell {
padding-left: 0px;
}
.header-photo-section {
margin-top: 10px;
::v-deep(.van-uploader__upload) {
width: 80px !important;
height: 80px !important;
border: 1px dashed #ccc;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f8f8f8;
}
}
/* 核查结果 */
.van-checkbox {
margin-bottom: 10px;
}
}
&:after {
content: " ";
display: block;
width: 100%;
border-bottom: 1px solid gray;
}
}
/* 新增一组 */
.add-item {
width: 100%;
height: 30px;
margin-top: 10px;
}
/* 总体判定 */
.overall {
background-color: white;
padding-top: 10px;
.van-checkbox-group {
margin-top: 10px;
.van-checkbox {
margin-bottom: 10px;
}
}
}
}
</style>
\ No newline at end of file
<template>
<div class="search-container">
<div class="mobile-page-container">
<van-nav-bar left-arrow
@click-left="router.back()">
<template #right>
......@@ -153,7 +153,7 @@ const handleClickStore = (item) => {
$base-font-size: 16px;
.search-container {
.mobile-page-container {
// width: $base-width;
margin: 0 auto;
font-size: $base-font-size;
......
<template>
<!-- 任务列表 -->
<van-nav-bar left-arrow
@click-left="router.back()">
</van-nav-bar>
<van-list v-model:loading="loading"
:finished="finished"
finished-text="没有更多结果了"
class="result-list">
<van-cell-group inset>
<van-cell v-for="(item, index) in resultList"
:key="index"
class="result-item"
@click="handleClickStore(item)">
<template #title>
<div class="item-title">{{ item.name }}{{ item.code }}</div>
</template>
<template #label>
<div class="item-company">{{ item.company }}</div>
<div class="item-address">{{ item.address }}</div>
</template>
</van-cell>
</van-cell-group>
</van-list>
<div class="mobile-page-container">
<!-- 任务列表 -->
<van-nav-bar left-arrow
@click-left="router.back()">
</van-nav-bar>
<van-list v-model:loading="loading"
:finished="finished"
finished-text="没有更多结果了"
class="result-list">
<van-cell-group inset>
<van-cell v-for="(item, index) in resultList"
:key="index"
class="result-item"
@click="handleClickStore(item)">
<template #title>
<div class="item-title">
<span>{{ item.name }}</span>
<span>{{ item.code }}</span>
</div>
</template>
<template #label>
<div class="item-company">{{ item.company }}</div>
<div class="item-address">{{ item.address }}</div>
</template>
</van-cell>
</van-cell-group>
</van-list>
</div>
</template>
<script setup>
......@@ -47,41 +51,91 @@ const resultList = ref([
address: '地址3'
},
])
const loading = ref(false);
const finished = ref(true);
const showEmpty = ref(false);
// 搜索处理
const handleSearch = () => {
if (!searchVal.value.trim()) {
resultList.value = mockData;
showEmpty.value = false;
return;
}
// 模拟加载状态
loading.value = true;
// 模拟接口请求延迟
setTimeout(() => {
const filtered = mockData.filter(item => {
const matchStr = `${item.name}${item.code}${item.company}${item.address}`;
return matchStr.includes(searchVal.value);
});
resultList.value = filtered;
loading.value = false;
finished.value = true;
}, 500);
};
// 门店点击
const handleClickStore = (item) => {
router.push({
path: '/inspectionTask',
query: {
storeName: item.name,
storeCode: item.code
}
})
}
</script>
<style scoped>
.result-list {
background-color: transparent;
padding: 0 20px;
margin-top: 10px;
<style scoped
lang="scss">
.van-cell-group {
margin: 0;
background-color: transparent;
.mobile-page-container {
margin: 0 auto;
font-size: 16px;
box-sizing: border-box;
padding-bottom: 20px;
background-color: #f5f5f5;
min-height: 100vh;
.result-item {
background-color: white;
margin-bottom: 10px;
.result-list {
background-color: transparent;
padding: 0 20px;
margin-top: 10px;
.item-title {
font-weight: 600;
color: #333;
margin-bottom: 4px;
}
.van-cell-group {
margin: 0;
background-color: transparent;
.item-company {
font-size: 14px;
color: #a6a4a4;
margin-bottom: 2px;
}
.result-item {
background-color: white;
margin-bottom: 10px;
.item-title {
font-weight: 600;
color: #333;
margin-bottom: 4px;
display: flex;
justify-content: space-between;
}
.item-company {
font-size: 14px;
color: #a6a4a4;
margin-bottom: 2px;
}
.item-address {
font-size: 13px;
color: #a6a4a4;
line-height: 1.4;
.item-address {
font-size: 13px;
color: #a6a4a4;
line-height: 1.4;
}
}
}
}
}
}
</style>
\ No newline at end of file
......@@ -91,7 +91,7 @@
type="textarea"
placeholder="请输入话术未达标备注"
style="margin-top: 10px;"
@blur="changeForm('temHsRemark')" />
@input="changeForm('temHsRemark')" />
</div>
<div class="form-item">
<label>物料是否齐全:</label>
......@@ -205,7 +205,7 @@
:controls="true"
placeholder="请输入POS金额"
style="margin-top: 10px;"
@change="posRmbChange" />
@input="posRmbChange" />
</div>
<!-- 促销员工资 -->
......@@ -216,7 +216,7 @@
:controls="true"
placeholder="请输入促销员工资"
style="margin-top: 10px;"
@change="changeForm('temSalary')" />
@input="changeForm('temSalary')" />
</div>
<!-- 备注 -->
<div class="form-item">
......@@ -225,7 +225,7 @@
type="textarea"
placeholder="请输入备注"
style="margin-top: 10px;"
@change="changeForm('remark')" />
@input="changeForm('remark')" />
</div>
</div>
</div>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论