工单大厅
This commit is contained in:
Zy
224
wuye-manager-uniapp/pageSubPack/ticket/shareUser.vue
Normal file
224
wuye-manager-uniapp/pageSubPack/ticket/shareUser.vue
Normal file
@@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<view class="page_padding shareUser">
|
||||
<view class="shareBody flex flex-col flex-1 overflow-hidden">
|
||||
<!-- 搜索 -->
|
||||
<view class="search_box">
|
||||
<view
|
||||
@click="handleClick"
|
||||
class="search_view flex-center"
|
||||
v-if="!queryParmas.value.trim() && Searching"
|
||||
>
|
||||
<uni-icons type="search" size="34rpx" color="rgba(0,0,0,0.26)"></uni-icons>
|
||||
<text>请输入关键字进行搜索</text>
|
||||
</view>
|
||||
<uni-easyinput
|
||||
@blur="handleInput"
|
||||
@change="handleSearch"
|
||||
:focus="true"
|
||||
ref="inputRef"
|
||||
v-model="queryParmas.value"
|
||||
v-else
|
||||
/>
|
||||
</view>
|
||||
<!-- 已经选择人数 -->
|
||||
<view class="checkoutedUser_box">
|
||||
<text>已选(1/1)</text>
|
||||
<text>潘霞通</text>
|
||||
</view>
|
||||
<!-- srcoll -->
|
||||
<scroll-view scroll-y="true" class="flex-1 overflow-auto">
|
||||
<radio-group @change="radioChange">
|
||||
<label v-for="(item, index) in searchlist" :key="index">
|
||||
<view
|
||||
class="item flex items-center justify-between"
|
||||
:class="{
|
||||
active: checkoutUserid === item.id
|
||||
}"
|
||||
>
|
||||
<view class="">
|
||||
<view class="info">
|
||||
<text>姓名：</text>
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<text>角色：</text>
|
||||
<text>{{ item.roleName }}</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<text>手机号码：</text>
|
||||
<text>{{ item.phone }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<radio color="#4d5dfa" :value="item.id" />
|
||||
</view>
|
||||
</label>
|
||||
</radio-group>
|
||||
</scroll-view>
|
||||
|
||||
<!-- submit -->
|
||||
<view class="action_btn" @tap="handleSelecthouse">
|
||||
<text>确定派单</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import navBar from '@/components/navbar/navbar.vue'
|
||||
const Searching = ref(true)
|
||||
const queryParmas = ref({
|
||||
value: ''
|
||||
})
|
||||
/** 点击时切换到input,并聚焦 */
|
||||
function handleClick() {
|
||||
Searching.value = false
|
||||
}
|
||||
/** 判断 失去焦点时 切换回 view */
|
||||
function handleInput() {
|
||||
if (queryParmas.value.value.trim()) {
|
||||
Searching.value = true
|
||||
}
|
||||
}
|
||||
function handleSearch() {
|
||||
console.log('search')
|
||||
}
|
||||
// -----------------------------------------
|
||||
/* 选择列表 */
|
||||
const searchlist = ref([
|
||||
{
|
||||
name: '张三',
|
||||
roleName: '维修人员',
|
||||
phone: '19578012123',
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
name: '张三',
|
||||
roleName: '维修人员',
|
||||
phone: '19578012123',
|
||||
id: 2
|
||||
},
|
||||
{
|
||||
name: '张三',
|
||||
roleName: '维修人员',
|
||||
phone: '19578012123',
|
||||
id: 3
|
||||
},
|
||||
{
|
||||
name: '张三',
|
||||
roleName: '维修人员',
|
||||
phone: '19578012123',
|
||||
id: 4
|
||||
},
|
||||
{
|
||||
name: '张三',
|
||||
roleName: '维修人员',
|
||||
phone: '19578012123',
|
||||
id: 5
|
||||
},
|
||||
{
|
||||
name: '张三',
|
||||
roleName: '维修人员',
|
||||
phone: '19578012123',
|
||||
id: 6
|
||||
},
|
||||
{
|
||||
name: '张三',
|
||||
roleName: '维修人员',
|
||||
phone: '19578012123',
|
||||
id: 7
|
||||
},
|
||||
{
|
||||
name: '张三',
|
||||
roleName: '维修人员',
|
||||
phone: '19578012123',
|
||||
id: 8
|
||||
}
|
||||
])
|
||||
const checkoutUserid = ref(null)
|
||||
function radioChange(val) {
|
||||
checkoutUserid.value = Number(val.detail.value)
|
||||
}
|
||||
|
||||
/* 确定派单 */
|
||||
function handleSelecthouse() {
|
||||
// api
|
||||
// 3. 返回上一页
|
||||
uni.navigateBack()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.shareUser {
|
||||
background-color: #f9f9f9;
|
||||
|
||||
.shareBody {
|
||||
padding: 0 40rpx;
|
||||
|
||||
.search_box {
|
||||
height: 80rpx;
|
||||
.search_view {
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
background: #f3f3f3;
|
||||
border-radius: 8rpx;
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: rgba(0, 0, 0, 0.26);
|
||||
line-height: 48rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// 选择人数
|
||||
.checkoutedUser_box {
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 40rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
line-height: 36rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
// 角色列表
|
||||
.item {
|
||||
height: 170rpx;
|
||||
background: #ffffff;
|
||||
border: 1rpx solid transparent;
|
||||
margin-bottom: 20rpx;
|
||||
padding-left: 26rpx;
|
||||
padding-right: 32rpx;
|
||||
.info {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
line-height: 36rpx;
|
||||
height: 36rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
&:deep(radio) {
|
||||
transform: scale(0.68);
|
||||
}
|
||||
&.active {
|
||||
background: #f5faff;
|
||||
border: 1rpx solid #4d5dfa;
|
||||
}
|
||||
}
|
||||
|
||||
// 确定派单
|
||||
.action_btn {
|
||||
width: 670rpx;
|
||||
height: 80rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
margin-top: 20rpx;
|
||||
background: #4d5dfa;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user