补充页面
This commit is contained in:
207
pages/mall/admin/setting/delivery/verifier.uvue
Normal file
207
pages/mall/admin/setting/delivery/verifier.uvue
Normal file
@@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<view class="admin-page-container">
|
||||
<view class="page-card">
|
||||
<!-- 搜索栏 -->
|
||||
<view class="search-wrap">
|
||||
<view class="search-item">
|
||||
<text class="label">提货点名称：</text>
|
||||
<picker mode="selector" :range="stationRange" @change="onStationChange">
|
||||
<view class="picker-input">{{ stationText }}</view>
|
||||
</picker>
|
||||
</view>
|
||||
<button class="btn btn-primary" @click="onSearch">查询</button>
|
||||
</view>
|
||||
|
||||
<view class="action-wrap">
|
||||
<button class="btn btn-primary" @click="onAdd">添加核销员</button>
|
||||
</view>
|
||||
|
||||
<!-- 表格区域 -->
|
||||
<view class="table-wrap">
|
||||
<view class="table-header">
|
||||
<view class="th" style="flex: 1;">ID</view>
|
||||
<view class="th" style="flex: 1.5;">头像</view>
|
||||
<view class="th" style="flex: 2;">微信名称</view>
|
||||
<view class="th" style="flex: 2;">核销员名称</view>
|
||||
<view class="th" style="flex: 2;">所属提货点</view>
|
||||
<view class="th" style="flex: 3;">添加时间</view>
|
||||
<view class="th" style="flex: 1.5;">状态</view>
|
||||
<view class="th" style="flex: 2;">操作</view>
|
||||
</view>
|
||||
<view class="table-body">
|
||||
<view v-for="item in verifierList" :key="item.id" class="tr">
|
||||
<view class="td" style="flex: 1;">{{ item.id }}</view>
|
||||
<view class="td" style="flex: 1.5;">
|
||||
<image class="avatar" :src="item.avatar" mode="aspectFill" />
|
||||
</view>
|
||||
<view class="td" style="flex: 2;">{{ item.wechatName }}</view>
|
||||
<view class="td" style="flex: 2;">{{ item.name }}</view>
|
||||
<view class="td" style="flex: 2;">{{ item.station }}</view>
|
||||
<view class="td" style="flex: 3;">{{ item.addTime }}</view>
|
||||
<view class="td" style="flex: 1.5;">
|
||||
<switch :checked="item.status" color="#1890ff" />
|
||||
</view>
|
||||
<view class="td" style="flex: 2;">
|
||||
<text class="action-btn" @click="onEdit(item)">编辑</text>
|
||||
<text class="action-btn-del" @click="onDel(item)">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref, reactive } from 'vue'
|
||||
|
||||
const stationRange = ['所有', '提货点222', '美东科技']
|
||||
const stationText = ref('请选择')
|
||||
|
||||
type VerifierItem = {
|
||||
id: number
|
||||
avatar: string
|
||||
wechatName: string
|
||||
name: string
|
||||
station: string
|
||||
addTime: string
|
||||
status: boolean
|
||||
}
|
||||
|
||||
const verifierList = reactive<VerifierItem[]>([
|
||||
{ id: 94, avatar: '/static/logo.png', wechatName: '地球人', name: '15920014197', station: '美东科技', addTime: '2025-10-22 10:33:07', status: true }
|
||||
])
|
||||
|
||||
function onStationChange(e: any) {
|
||||
const index = parseInt(e.detail.value.toString())
|
||||
stationText.value = stationRange[index]
|
||||
}
|
||||
|
||||
function onSearch() {
|
||||
console.log('Search:', stationText.value)
|
||||
}
|
||||
|
||||
function onAdd() {
|
||||
console.log('Add verifier')
|
||||
}
|
||||
|
||||
function onEdit(item: VerifierItem) {
|
||||
console.log('Edit:', item.name)
|
||||
}
|
||||
|
||||
function onDel(item: VerifierItem) {
|
||||
console.log('Delete:', item.id)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-page-container {
|
||||
padding: 15px;
|
||||
background-color: #f5f7f9;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.page-card {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.search-wrap {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.picker-input {
|
||||
width: 200px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
background-color: #fff;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.action-wrap {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #1890ff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
width: 100%;
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: #f8f8f9;
|
||||
}
|
||||
|
||||
.th {
|
||||
padding: 12px 10px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #515a6e;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tr {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.td {
|
||||
padding: 12px 10px;
|
||||
font-size: 14px;
|
||||
color: #515a6e;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
color: #1890ff;
|
||||
font-size: 13px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.action-btn-del {
|
||||
color: #ed4014;
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user