154 lines
2.8 KiB
Vue
154 lines
2.8 KiB
Vue
|
<template>
|
||
|
|
<view class="customer-section">
|
||
|
|
<view class="section-head">
|
||
|
|
<text class="section-title">客户信息</text>
|
||
|
|
</view>
|
||
|
|
<view class="section-card">
|
||
|
|
<view class="phone-row">
|
||
|
|
<view class="phone-input">
|
||
|
|
<u-icon name="phone" color="#9AA7B8" size="34"></u-icon>
|
||
|
|
<input
|
||
|
|
class="phone-field"
|
||
|
|
type="number"
|
||
|
|
:value="phoneNumber"
|
||
|
|
placeholder="请输入客户手机号"
|
||
|
|
placeholder-style="color:#C7CDD3"
|
||
|
|
maxlength="11"
|
||
|
|
@input="onPhoneInput"
|
||
|
|
/>
|
||
|
|
</view>
|
||
|
|
<view class="search-btn" hover-class="app-tap-hover" @click="$emit('search')">查询</view>
|
||
|
|
</view>
|
||
|
|
<view class="user-card" v-if="targetUser">
|
||
|
|
<image class="user-avatar" :src="targetUser.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
|
||
|
|
<view class="user-detail">
|
||
|
|
<view class="user-nickname">{{ targetUser.nickName }}</view>
|
||
|
|
<view class="user-phone">{{ targetUser.userName }}</view>
|
||
|
|
</view>
|
||
|
|
<view class="user-tag" v-if="isRealNameVerified">
|
||
|
|
<u-icon name="checkmark-circle-fill" color="#3AC17C" size="26"></u-icon>
|
||
|
|
<text>已实名</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'CustomerSearchCard',
|
||
|
|
props: {
|
||
|
|
phoneNumber: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
targetUser: {
|
||
|
|
type: Object,
|
||
|
|
default: null
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
isRealNameVerified() {
|
||
|
|
const authTypes = this.targetUser && this.targetUser.authTypes
|
||
|
|
if (!authTypes || !Array.isArray(authTypes)) return false
|
||
|
|
return authTypes.some((tag) => tag == 1 || tag === '1')
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
onPhoneInput(e) {
|
||
|
|
this.$emit('update:phoneNumber', e.detail.value)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import './agent-order-theme.scss';
|
||
|
|
|
||
|
|
.customer-section {
|
||
|
|
@include ao-section;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-head {
|
||
|
|
@include ao-section-head;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-title {
|
||
|
|
@include ao-section-title;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-card {
|
||
|
|
@include ao-card;
|
||
|
|
padding: 24rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.phone-row {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.phone-input {
|
||
|
|
@include ao-field-box;
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.phone-field {
|
||
|
|
flex: 1;
|
||
|
|
margin-left: 14rpx;
|
||
|
|
font-size: 30rpx;
|
||
|
|
color: $ao-text;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-btn {
|
||
|
|
@include ao-primary-btn;
|
||
|
|
margin-left: 16rpx;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-card {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 22rpx 0 0;
|
||
|
|
margin-top: 20rpx;
|
||
|
|
border-top: 1rpx solid $ao-border;
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-avatar {
|
||
|
|
width: 80rpx;
|
||
|
|
height: 80rpx;
|
||
|
|
border-radius: 50%;
|
||
|
|
flex-shrink: 0;
|
||
|
|
background: #E0E7EF;
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-detail {
|
||
|
|
margin-left: 20rpx;
|
||
|
|
flex: 1;
|
||
|
|
min-width: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-nickname {
|
||
|
|
font-size: 30rpx;
|
||
|
|
font-weight: 600;
|
||
|
|
color: $ao-ink;
|
||
|
|
margin-bottom: 6rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-phone {
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: $ao-text-secondary;
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-tag {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 22rpx;
|
||
|
|
color: $ao-success;
|
||
|
|
flex-shrink: 0;
|
||
|
|
|
||
|
|
text {
|
||
|
|
margin-left: 6rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|