朱园亮 / erp-mobile · Commits

Commit def86f0d12da20d9585078001cce572830c2a1be

Authored by 史婷婷
1 parent 1d5cf968

feat: 客户信息-编辑

Inline Side-by-side
Showing 3 changed files with 350 additions and 1 deletions
... ... @@ -130,6 +130,14 @@
130 130 }
131 131 },
132 132 {
  133 + "path": "pages/customer/modify",
  134 + "style": {
  135 + "navigationBarTitleText": "编辑客户信息",
  136 + "navigationBarBackgroundColor": "#ffffff",
  137 + "navigationBarTextStyle": "black"
  138 + }
  139 + },
  140 + {
133 141 "path": "pages/credit_manage/index",
134 142 "style": {
135 143 "navigationBarTitleText": "客户资信管理",
... ...
... ... @@ -151,7 +151,7 @@ export default {
151 151 }
152 152
153 153 .detail-page {
154   - padding-bottom: 40rpx;
  154 + padding-bottom: 144rpx;
155 155 }
156 156
157 157 .section {
... ...
  1 +<template>
  2 + <view class="page">
  3 + <scroll-view class="scroll" scroll-y>
  4 + <uni-list>
  5 + <uni-list-item class="select-item" :class="form.code ? 'is-filled' : 'is-empty'">
  6 + <template v-slot:body>
  7 + <view class="item-title"><text class="required">*</text><text>编号</text></view>
  8 + </template>
  9 + <template v-slot:footer>
  10 + <view class="serial-number-row">
  11 + <uni-easyinput v-model="form.code" placeholder="自动生成编号" :inputBorder="false" disabled />
  12 + </view>
  13 + </template>
  14 + </uni-list-item>
  15 +
  16 + <uni-list-item title="名称">
  17 + <template v-slot:body>
  18 + <view class="item-title"><text class="required">*</text><text>名称</text></view>
  19 + </template>
  20 + <template v-slot:footer>
  21 + <uni-easyinput v-model="form.name" placeholder="请输入名称" :inputBorder="false" />
  22 + </template>
  23 + </uni-list-item>
  24 +
  25 + <uni-list-item title="联系人">
  26 + <template v-slot:footer>
  27 + <uni-easyinput v-model="form.contact" placeholder="请输入联系人" :inputBorder="false" />
  28 + </template>
  29 + </uni-list-item>
  30 +
  31 + <uni-list-item title="联系电话">
  32 + <template v-slot:footer>
  33 + <uni-easyinput v-model="form.telephone" placeholder="请输入联系电话" :inputBorder="false" />
  34 + </template>
  35 + </uni-list-item>
  36 +
  37 + <uni-list-item title="电子邮箱">
  38 + <template v-slot:footer>
  39 + <uni-easyinput v-model="form.email" placeholder="请输入电子邮箱" :inputBorder="false" />
  40 + </template>
  41 + </uni-list-item>
  42 +
  43 + <uni-list-item title="邮编">
  44 + <template v-slot:footer>
  45 + <uni-easyinput v-model="form.zipCode" placeholder="请输入邮编" :inputBorder="false" />
  46 + </template>
  47 + </uni-list-item>
  48 +
  49 + <uni-list-item title="传真">
  50 + <template v-slot:footer>
  51 + <uni-easyinput v-model="form.fax" placeholder="请输入传真" :inputBorder="false" />
  52 + </template>
  53 + </uni-list-item>
  54 +
  55 + <uni-list-item class="select-item"
  56 + :class="(Array.isArray(form.cityIds) && form.cityIds.length) ? 'is-filled' : 'is-empty'" clickable
  57 + @click="openCitySelector" :rightText="form.cityLabel || '请选择'" showArrow>
  58 + <template v-slot:body>
  59 + <view class="item-title"><text>地区</text></view>
  60 + <CitySelector ref="citySelectorRef" v-model="form.cityIds" @change="onCityChange" />
  61 + </template>
  62 + </uni-list-item>
  63 +
  64 + <uni-list-item title="地址">
  65 + <template v-slot:footer>
  66 + <uni-easyinput v-model="form.address" placeholder="请输入地址" :inputBorder="false" />
  67 + </template>
  68 + </uni-list-item>
  69 +
  70 + <uni-list-item title="统一社会信用代码">
  71 + <template v-slot:footer>
  72 + <uni-easyinput v-model="form.creditCode" placeholder="请输入统一社会信用代码" :inputBorder="false" />
  73 + </template>
  74 + </uni-list-item>
  75 +
  76 + <uni-list-item title="纳税人识别号">
  77 + <template v-slot:footer>
  78 + <uni-easyinput v-model="form.taxIdentifyNo" placeholder="请输入纳税人识别号" :inputBorder="false" />
  79 + </template>
  80 + </uni-list-item>
  81 +
  82 + <uni-list-item title="开户银行">
  83 + <template v-slot:footer>
  84 + <uni-easyinput v-model="form.bankName" placeholder="请输入开户银行" :inputBorder="false" />
  85 + </template>
  86 + </uni-list-item>
  87 +
  88 + <uni-list-item title="户名">
  89 + <template v-slot:footer>
  90 + <uni-easyinput v-model="form.accountName" placeholder="请输入户名" :inputBorder="false" />
  91 + </template>
  92 + </uni-list-item>
  93 +
  94 + <uni-list-item title="银行账号">
  95 + <template v-slot:footer>
  96 + <uni-easyinput v-model="form.accountNo" placeholder="请输入银行账号" :inputBorder="false" />
  97 + </template>
  98 + </uni-list-item>
  99 +
  100 + <uni-list-item title="备注">
  101 + <template v-slot:footer>
  102 + <uni-easyinput type="textarea" v-model="form.description" placeholder="请输入备注"
  103 + :inputBorder="false" />
  104 + </template>
  105 + </uni-list-item>
  106 +
  107 + </uni-list>
  108 + </scroll-view>
  109 +
  110 + <view class="footer">
  111 + <button class="btn submit" type="primary" @click="onSubmit">保存</button>
  112 + </view>
  113 + </view>
  114 +</template>
  115 +
  116 +<script>
  117 +import { getDetailApi, updateApi } from '@/api/customer.js'
  118 +import CitySelector from '@/components/city-selector/index.vue'
  119 +import { isEmail } from '@/utils/common.js'
  120 +
  121 +export default {
  122 + name: 'CustomerModify',
  123 + components: { CitySelector },
  124 + data() {
  125 + return {
  126 + id: '',
  127 + form: {
  128 + id: '',
  129 + code: '',
  130 + name: '',
  131 + contact: '',
  132 + telephone: '',
  133 + email: '',
  134 + zipCode: '',
  135 + fax: '',
  136 + cityIds: [],
  137 + cityLabel: '',
  138 + address: '',
  139 + creditCode: '',
  140 + taxIdentifyNo: '',
  141 + bankName: '',
  142 + accountName: '',
  143 + accountNo: '',
  144 + description: ''
  145 + }
  146 + }
  147 + },
  148 + onLoad(query) {
  149 + const id = (query && (query.id || query.code)) || ''
  150 + if (id) {
  151 + this.id = id
  152 + this.loadDetail(id)
  153 + }
  154 + },
  155 + methods: {
  156 + async loadDetail(id) {
  157 + try {
  158 + const res = await getDetailApi(id)
  159 + const data = res.data || {}
  160 + this.form = {
  161 + ...data,
  162 + cityIds: data.city ? [data.city] : [], // 这里假设后端返回的 city 是单个ID，如果是数组需要适配
  163 + cityLabel: data.cityName || ''
  164 + }
  165 + // 如果后端返回的 city 是 id，这里尝试通过 CitySelector 的回显逻辑（通常需要组件支持或自己查名字）
  166 + // 这里暂时直接用 data.cityName 作为回显文本
  167 + } catch (e) {
  168 + uni.showToast({ title: '加载失败', icon: 'none' })
  169 + }
  170 + },
  171 + openCitySelector() {
  172 + this.$refs.citySelectorRef && this.$refs.citySelectorRef.open()
  173 + },
  174 + onCityChange(payload) {
  175 + const label = payload && payload.label != null ? payload.label : ''
  176 + this.form.cityLabel = label
  177 + },
  178 + validateRequired() {
  179 + if (!this.form.name || !this.form.name.trim()) {
  180 + uni.showToast({ title: '请输入名称', icon: 'none' })
  181 + return false
  182 + }
  183 + if (this.form.email && !isEmail(this.form.email)) {
  184 + uni.showToast({ title: '邮箱地址格式不正确', icon: 'none' })
  185 + return false
  186 + }
  187 + return true
  188 + },
  189 + async onSubmit() {
  190 + if (!this.validateRequired()) return
  191 +
  192 + const { cityIds, cityLabel, ...other } = this.form
  193 + const cityId = cityIds && cityIds.length > 0 ? cityIds[cityIds.length - 1] : ''
  194 +
  195 + const payload = {
  196 + ...other,
  197 + cityId
  198 + }
  199 +
  200 + console.log('onSubmit payload', payload)
  201 + try {
  202 + await updateApi(payload)
  203 + uni.showToast({ title: '保存成功', icon: 'success' })
  204 +
  205 + setTimeout(() => { uni.redirectTo({ url: '/pages/customer/index' }) }, 300)
  206 + } catch (e) {
  207 + uni.showToast({ title: (e && e.msg) || '保存失败', icon: 'none' })
  208 + }
  209 + }
  210 + }
  211 +}
  212 +</script>
  213 +
  214 +<style lang="scss" scoped>
  215 +.page {
  216 + display: flex;
  217 + flex-direction: column;
  218 + height: 100vh;
  219 +}
  220 +
  221 +.scroll {
  222 + flex: 1;
  223 + padding: 12rpx 0 160rpx;
  224 +}
  225 +
  226 +.footer {
  227 + position: fixed;
  228 + left: 0;
  229 + right: 0;
  230 + bottom: 0;
  231 + padding: 32rpx;
  232 + padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
  233 + background: #fff;
  234 + box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.06);
  235 + z-index: 10;
  236 +
  237 + .btn {
  238 + height: 80rpx;
  239 + line-height: 80rpx;
  240 + border-radius: 12rpx;
  241 + font-size: 32rpx;
  242 + }
  243 +
  244 + .submit {
  245 + background: $theme-primary;
  246 + color: #fff;
  247 + }
  248 +}
  249 +
  250 +::v-deep .uni-list {
  251 + background: transparent;
  252 +
  253 + &-item {
  254 + &__extra-text {
  255 + font-size: 32rpx;
  256 + }
  257 +
  258 + &__content-title {
  259 + font-size: 32rpx;
  260 + color: rgba(0, 0, 0, 0.9);
  261 + }
  262 +
  263 + &__container {
  264 + padding: 32rpx;
  265 +
  266 + .uni-easyinput {
  267 + .is-disabled {
  268 + background-color: transparent !important;
  269 + }
  270 +
  271 + &__placeholder-class {
  272 + font-size: 32rpx;
  273 + color: rgba(0, 0, 0, 0.4);
  274 + }
  275 +
  276 + &__content {
  277 + border: none;
  278 +
  279 + &-input {
  280 + padding-left: 0 !important;
  281 + height: 48rpx;
  282 + line-height: 48rpx;
  283 + font-size: 32rpx;
  284 + }
  285 + }
  286 + }
  287 +
  288 + .item-title,
  289 + .uni-list-item__content {
  290 + flex: none;
  291 + min-height: 48rpx;
  292 + line-height: 48rpx;
  293 + font-size: 32rpx;
  294 + position: relative;
  295 + width: 210rpx;
  296 + margin-right: 32rpx;
  297 + color: rgba(0, 0, 0, 0.9);
  298 + padding-right: 0;
  299 +
  300 + .required {
  301 + color: red;
  302 + position: absolute;
  303 + top: 50%;
  304 + transform: translateY(-50%);
  305 + left: -16rpx;
  306 + }
  307 + }
  308 + }
  309 +
  310 + &.select-item {
  311 + &.is-empty {
  312 + .uni-list-item__extra-text {
  313 + color: rgba(0, 0, 0, 0.4) !important;
  314 + }
  315 + }
  316 +
  317 + &.is-filled {
  318 + .uni-list-item__extra-text {
  319 + color: rgba(0, 0, 0, 0.9) !important;
  320 + }
  321 + }
  322 +
  323 + .serial-number-row {
  324 + display: flex;
  325 + align-items: center;
  326 +
  327 + .generate-btn {
  328 + margin-left: 24rpx;
  329 + height: 64rpx;
  330 + line-height: 64rpx;
  331 + padding: 0 24rpx;
  332 + font-size: 28rpx;
  333 + border-radius: 8rpx;
  334 + background: $theme-primary;
  335 + color: #fff;
  336 + }
  337 + }
  338 + }
  339 + }
  340 +}
  341 +</style>
... ...