375 lines
8.2 KiB
Vue
375 lines
8.2 KiB
Vue
<template>
|
|
<view class="distributor-edit-container">
|
|
<!-- 页面标题 -->
|
|
<view class="page-header">
|
|
<view class="header-left" @click="goBack">
|
|
<view class="back-icon">←</view>
|
|
</view>
|
|
<view class="header-title">编辑分销员</view>
|
|
<view class="header-right" @click="saveDistributor">
|
|
<view class="save-btn">保存</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 表单内容 -->
|
|
<view class="form-section">
|
|
<view class="section-title">基本信息</view>
|
|
<view class="form-card">
|
|
<view class="form-row">
|
|
<view class="form-label">姓名</view>
|
|
<view class="form-control">
|
|
<input
|
|
v-model="distributorForm.name"
|
|
class="form-input"
|
|
placeholder="请输入姓名"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="form-row">
|
|
<view class="form-label">手机号</view>
|
|
<view class="form-control">
|
|
<input
|
|
v-model="distributorForm.phone"
|
|
type="number"
|
|
class="form-input"
|
|
placeholder="请输入手机号"
|
|
maxlength="11"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="form-row">
|
|
<view class="form-label">角色</view>
|
|
<view class="form-control">
|
|
<picker
|
|
:range="roleOptions"
|
|
:value="roleIndex"
|
|
@change="onRoleChange"
|
|
class="picker"
|
|
>
|
|
<view class="picker-text">{{ roleOptions[roleIndex] }}</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
<view class="form-row">
|
|
<view class="form-label">状态</view>
|
|
<view class="form-control">
|
|
<picker
|
|
:range="statusOptions"
|
|
:value="statusIndex"
|
|
@change="onStatusChange"
|
|
class="picker"
|
|
>
|
|
<view class="picker-text">{{ statusOptions[statusIndex] }}</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
<view class="form-row">
|
|
<view class="form-label">备注</view>
|
|
<view class="form-control">
|
|
<textarea
|
|
v-model="distributorForm.remark"
|
|
class="form-textarea"
|
|
placeholder="请输入备注信息"
|
|
maxlength="200"
|
|
></textarea>
|
|
<view class="textarea-count">{{ distributorForm.remark.length }}/200</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 操作按钮 -->
|
|
<view class="action-section">
|
|
<view class="action-btn delete-btn" @click="deleteDistributor">
|
|
删除分销员
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from "vue"
|
|
|
|
// 分销员表单数据
|
|
const distributorForm = ref({
|
|
id: '',
|
|
name: '张三',
|
|
phone: '13800138001',
|
|
role: '初级分销员',
|
|
status: '启用',
|
|
remark: '默认分销员'
|
|
})
|
|
|
|
// 角色选项
|
|
const roleOptions = ['初级分销员', '中级分销员', '高级分销员']
|
|
const roleIndex = ref(0)
|
|
|
|
// 状态选项
|
|
const statusOptions = ['启用', '禁用']
|
|
const statusIndex = ref(0)
|
|
|
|
onMounted(() => {
|
|
// 实际项目中应从接口获取分销员详情
|
|
// loadDistributorDetail()
|
|
})
|
|
|
|
// 返回上一页
|
|
function goBack() {
|
|
uni.navigateBack({ delta: 1 })
|
|
}
|
|
|
|
// 保存分销员
|
|
function saveDistributor() {
|
|
if (!distributorForm.value.name) {
|
|
uni.showToast({
|
|
title: '请输入姓名',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
if (!distributorForm.value.phone || distributorForm.value.phone.length !== 11) {
|
|
uni.showToast({
|
|
title: '请输入有效的手机号',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
uni.showLoading({ title: '保存中...' })
|
|
|
|
setTimeout(() => {
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title: '保存成功',
|
|
icon: 'success'
|
|
})
|
|
// 实际项目中应调用接口保存分销员
|
|
// updateDistributorData()
|
|
|
|
// 保存成功后返回上一页
|
|
setTimeout(() => {
|
|
goBack()
|
|
}, 1000)
|
|
}, 1500)
|
|
}
|
|
|
|
// 删除分销员
|
|
function deleteDistributor() {
|
|
uni.showModal({
|
|
title: '删除分销员',
|
|
content: '确定要删除该分销员吗？',
|
|
success: function(res) {
|
|
if (res.confirm) {
|
|
uni.showLoading({ title: '删除中...' })
|
|
|
|
setTimeout(() => {
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title: '删除成功',
|
|
icon: 'success'
|
|
})
|
|
// 实际项目中应调用接口删除分销员
|
|
// deleteDistributorData()
|
|
|
|
// 删除成功后返回上一页
|
|
setTimeout(() => {
|
|
goBack()
|
|
}, 1000)
|
|
}, 1500)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
// 角色变更
|
|
function onRoleChange(e) {
|
|
const value = e.detail.value
|
|
roleIndex.value = value
|
|
distributorForm.value.role = roleOptions[value]
|
|
}
|
|
|
|
// 状态变更
|
|
function onStatusChange(e) {
|
|
const value = e.detail.value
|
|
statusIndex.value = value
|
|
distributorForm.value.status = statusOptions[value]
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/* #ifndef APP-NVUE */
|
|
page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
background-color: #f5f7fa;
|
|
min-height: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
view {
|
|
font-size: 14px;
|
|
line-height: inherit;
|
|
}
|
|
/* #endif */
|
|
|
|
.distributor-edit-container {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* 页面头部 */
|
|
.page-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 120rpx;
|
|
background-color: #fff;
|
|
padding: 0 32rpx;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.header-left {
|
|
width: 60rpx;
|
|
}
|
|
|
|
.back-icon {
|
|
font-size: 40rpx;
|
|
color: #303133;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.header-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #303133;
|
|
}
|
|
|
|
.header-right {
|
|
width: 60rpx;
|
|
text-align: right;
|
|
}
|
|
|
|
.save-btn {
|
|
font-size: 24rpx;
|
|
color: #409eff;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 表单内容 */
|
|
.form-section {
|
|
padding: 32rpx;
|
|
background-color: #fff;
|
|
margin: 0 16rpx 16rpx;
|
|
border-radius: 16rpx;
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #303133;
|
|
margin-bottom: 24rpx;
|
|
padding-left: 12rpx;
|
|
border-left: 8rpx solid #409eff;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.form-card {
|
|
background-color: #f9f9f9;
|
|
border-radius: 12rpx;
|
|
padding: 24rpx;
|
|
}
|
|
|
|
.form-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.form-row:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.form-label {
|
|
font-size: 24rpx;
|
|
color: #606266;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.form-control {
|
|
position: relative;
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
background-color: #fff;
|
|
border: 1rpx solid #dcdfe6;
|
|
border-radius: 8rpx;
|
|
padding: 16rpx;
|
|
font-size: 24rpx;
|
|
color: #303133;
|
|
}
|
|
|
|
.picker {
|
|
background-color: #fff;
|
|
border: 1rpx solid #dcdfe6;
|
|
border-radius: 8rpx;
|
|
padding: 16rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.picker-text {
|
|
font-size: 24rpx;
|
|
color: #303133;
|
|
}
|
|
|
|
.form-textarea {
|
|
width: 100%;
|
|
height: 160rpx;
|
|
background-color: #fff;
|
|
border: 1rpx solid #dcdfe6;
|
|
border-radius: 8rpx;
|
|
padding: 16rpx;
|
|
font-size: 24rpx;
|
|
color: #303133;
|
|
resize: none;
|
|
}
|
|
|
|
.textarea-count {
|
|
position: absolute;
|
|
bottom: 8rpx;
|
|
right: 16rpx;
|
|
font-size: 18rpx;
|
|
color: #909399;
|
|
}
|
|
|
|
/* 操作按钮 */
|
|
.action-section {
|
|
padding: 32rpx;
|
|
background-color: #fff;
|
|
margin: 0 16rpx 16rpx;
|
|
border-radius: 16rpx;
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.action-btn {
|
|
width: 100%;
|
|
text-align: center;
|
|
padding: 20rpx;
|
|
border-radius: 8rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.delete-btn {
|
|
background-color: #fef0f0;
|
|
color: #f56c6c;
|
|
}
|
|
</style> |