feat: 新增客户功能,新增客户和客户列表页面,添加到管理区域
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
@@ -84,6 +84,18 @@
|
|||||||
"navigationBarTitleText": "库存流水"
|
"navigationBarTitleText": "库存流水"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/customer/create",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "新增客户"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/customer/list",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "客户列表"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/category/index",
|
"path": "pages/category/index",
|
||||||
"style": {
|
"style": {
|
||||||
|
|||||||
101
src/pages/customer/create.vue
Normal file
101
src/pages/customer/create.vue
Normal file
@@ -0,0 +1,101 @@
|
|||||||
|
<template>
|
||||||
|
<view class="page">
|
||||||
|
<view class="form-card">
|
||||||
|
<view class="form-item">
|
||||||
|
<text class="label">手机号 *</text>
|
||||||
|
<input class="input" v-model="form.phone" placeholder="请输入手机号" type="number" />
|
||||||
|
</view>
|
||||||
|
<view class="form-item">
|
||||||
|
<text class="label">客户姓名 *</text>
|
||||||
|
<input class="input" v-model="form.name" placeholder="请输入客户姓名" />
|
||||||
|
</view>
|
||||||
|
<view class="form-item">
|
||||||
|
<text class="label">微信号</text>
|
||||||
|
<input class="input" v-model="form.wechat" placeholder="请输入微信号" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<button class="submit-btn" @click="submit">保存</button>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import customerApi from '@/api/customer'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
form: {
|
||||||
|
phone: '',
|
||||||
|
name: '',
|
||||||
|
wechat: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async submit() {
|
||||||
|
if (!this.form.phone) {
|
||||||
|
uni.showToast({ title: '请输入手机号', icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (!this.form.name) {
|
||||||
|
uni.showToast({ title: '请输入客户姓名', icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await customerApi.createCustomer(this.form)
|
||||||
|
uni.showToast({ title: '添加成功', icon: 'success' })
|
||||||
|
setTimeout(() => uni.navigateBack(), 1500)
|
||||||
|
} catch (e) {
|
||||||
|
uni.showToast({ title: e.message || '添加失败', icon: 'none' })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.page {
|
||||||
|
padding: 30rpx;
|
||||||
|
background: #f5f5f5;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-card {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
display: block;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
background: #f5f5f5;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn {
|
||||||
|
margin-top: 40rpx;
|
||||||
|
height: 88rpx;
|
||||||
|
background: #1890ff;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 44rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
128
src/pages/customer/list.vue
Normal file
128
src/pages/customer/list.vue
Normal file
@@ -0,0 +1,128 @@
|
|||||||
|
<template>
|
||||||
|
<view class="page">
|
||||||
|
<view class="search-bar">
|
||||||
|
<input class="search-input" v-model="keyword" placeholder="搜索客户姓名或手机号" @input="search" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<scroll-view scroll-y class="list">
|
||||||
|
<view
|
||||||
|
v-for="item in customers"
|
||||||
|
:key="item.customerId"
|
||||||
|
class="customer-card"
|
||||||
|
@click="viewDetail(item)"
|
||||||
|
>
|
||||||
|
<view class="info">
|
||||||
|
<text class="name">{{ item.name }}</text>
|
||||||
|
<text class="phone">{{ item.phone }}</text>
|
||||||
|
<text class="wechat" v-if="item.wechat">{{ item.wechat }}</text>
|
||||||
|
</view>
|
||||||
|
<text class="arrow">›</text>
|
||||||
|
</view>
|
||||||
|
<view v-if="customers.length === 0" class="empty">暂无客户</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import customerApi from '@/api/customer'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
keyword: '',
|
||||||
|
customers: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.loadCustomers()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async loadCustomers() {
|
||||||
|
try {
|
||||||
|
const res = await customerApi.getCustomers({ keyword: this.keyword, page: 1, pageSize: 100 })
|
||||||
|
this.customers = res.records || []
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
search() {
|
||||||
|
this.loadCustomers()
|
||||||
|
},
|
||||||
|
viewDetail(item) {
|
||||||
|
uni.showModal({
|
||||||
|
title: '客户详情',
|
||||||
|
content: `姓名: ${item.name}\n手机: ${item.phone}\n微信: ${item.wechat || '-'}`,
|
||||||
|
showCancel: false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.page {
|
||||||
|
padding: 20rpx;
|
||||||
|
background: #f5f5f5;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-bar {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
width: 100%;
|
||||||
|
height: 64rpx;
|
||||||
|
background: #f5f5f5;
|
||||||
|
border-radius: 32rpx;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.customer-card {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 24rpx;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone, .wechat {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-top: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty {
|
||||||
|
text-align: center;
|
||||||
|
color: #999;
|
||||||
|
padding: 60rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -58,6 +58,14 @@
|
|||||||
<text class="section-title">管理</text>
|
<text class="section-title">管理</text>
|
||||||
<view class="menu-grid">
|
<view class="menu-grid">
|
||||||
<template v-if="isAdmin">
|
<template v-if="isAdmin">
|
||||||
|
<view class="menu-item" @click="goTo('/pages/customer/create')">
|
||||||
|
<view class="menu-icon-box blue"><text class="icon-text">新增</text></view>
|
||||||
|
<text class="menu-text">新增客户</text>
|
||||||
|
</view>
|
||||||
|
<view class="menu-item" @click="goTo('/pages/customer/list')">
|
||||||
|
<view class="menu-icon-box cyan"><text class="icon-text">客</text></view>
|
||||||
|
<text class="menu-text">客户列表</text>
|
||||||
|
</view>
|
||||||
<view class="menu-item" @click="goTo('/pages/product/manage')">
|
<view class="menu-item" @click="goTo('/pages/product/manage')">
|
||||||
<view class="menu-icon-box purple"><text class="icon-text">商</text></view>
|
<view class="menu-icon-box purple"><text class="icon-text">商</text></view>
|
||||||
<text class="menu-text">商品管理</text>
|
<text class="menu-text">商品管理</text>
|
||||||
|
|||||||
Reference in New Issue
Block a user