antissoft / lvqianmeiye_ERP

  <template>
    <el-dialog
      :visible.sync="visibleProxy"
      :show-close="false"
      width="520px"
      :close-on-click-modal="false"
      custom-class="tuoke-dialog"
      append-to-body
    >
      <div class="tuoke-dialog-inner">
        <div class="tuoke-header">
          <div class="tuoke-title-wrap">
            <div class="tuoke-title">录入拓客信息</div>
          </div>
        </div>
  
        <el-form
          ref="form"

          v-loading="eventLoading"

          :model="form"
          :rules="rules"
          label-width="96px"
          size="small"
          class="tuoke-form"
        >
          <el-form-item label="拓客活动" prop="eventId">
            <el-select v-model="form.eventId" placeholder="请选择拓客活动" filterable>
              <el-option
                v-for="item in eventOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
  
          <el-form-item label="顾客姓名" prop="customerName">
            <el-input v-model="form.customerName" placeholder="请输入顾客姓名" />
          </el-form-item>
  
          <el-form-item label="电话号码" prop="customerPhone">
            <el-input v-model="form.customerPhone" placeholder="请输入电话号码" />
          </el-form-item>
  
          <el-form-item label="支付方式" prop="paymentMethod">
            <el-select v-model="form.paymentMethod" placeholder="请选择支付方式">
              <el-option
                v-for="item in paymentOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
  
          <el-form-item label="是否加微信" prop="isAddWeChat">
            <el-radio-group v-model="form.isAddWeChat">
              <el-radio label="是">是</el-radio>
              <el-radio label="否">否</el-radio>
            </el-radio-group>
          </el-form-item>
  
          <el-form-item label="备注" prop="remarks">
            <el-input
              v-model="form.remarks"
              type="textarea"
              :rows="3"
              placeholder="请输入备注信息"
            />
          </el-form-item>
        </el-form>
  
        <div class="tuoke-footer">
          <el-button size="small" @click="handleCancel">取 消</el-button>
          <el-button type="primary" size="small" :loading="submitting" @click="handleSubmit">
            {{ submitting ? '提交中...' : '保 存' }}
          </el-button>
        </div>
      </div>
    </el-dialog>
  </template>
  
  <script>

  import { createTkjlb } from '@/api/lqTkjlb'
  import { getCurrentEventByUser } from '@/api/lqEvent'
  

  export default {
    name: 'TuokeLeadDialog',
    props: {
      visible: { type: Boolean, default: false }
    },
    data() {
      return {
        submitting: false,

        eventLoading: false,

        form: {
          eventId: '',
          customerName: '',
          customerPhone: '',
          paymentMethod: '微信',
          isAddWeChat: '否',
          remarks: ''
        },

        eventOptions: [],

        paymentOptions: [
          { label: '微信', value: '微信' },
          { label: '支付宝', value: '支付宝' },
          { label: '现金', value: '现金' },
          { label: '银行转账', value: '银行转账' }
        ],
        rules: {
          eventId: [{ required: true, message: '请选择拓客活动', trigger: 'change' }],
          customerName: [{ required: true, message: '请输入顾客姓名', trigger: 'blur' }],
          customerPhone: [
            { required: true, message: '请输入电话号码', trigger: 'blur' },
            { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
          ],
          paymentMethod: [{ required: true, message: '请选择支付方式', trigger: 'change' }],
          isAddWeChat: [{ required: true, message: '请选择是否加微信', trigger: 'change' }]
        }
      }
    },
    computed: {
      visibleProxy: {
        get() {
          return this.visible
        },
        set(val) {
          this.$emit('update:visible', val)
        }

      },
      expansionUserId() {
        const user = this.$store.getters.userInfo || {}
        return user.userId || user.id || ''
      }
    },
    watch: {
      visible(val) {
        if (val) {
          this.loadCurrentEvents()
        }

      }
    },
    methods: {
      resetForm() {
        this.form = {
          eventId: '',
          customerName: '',
          customerPhone: '',
          paymentMethod: '微信',
          isAddWeChat: '否',
          remarks: ''
        }
        this.$refs.form && this.$refs.form.clearValidate()
      },

      async loadCurrentEvents() {
        if (!this.expansionUserId) {
          this.$message.warning('未获取到登录用户信息，请重新登录')
          return
        }
        this.eventLoading = true
        try {
          const res = await getCurrentEventByUser(this.expansionUserId)
          const list = Array.isArray(res.data) ? res.data : []
          this.eventOptions = list.map(item => ({
            label: item.EventName || item.eventName || item.EventId,
            value: item.EventId || item.eventId
          }))
          if (this.eventOptions.length > 0) {
            this.form.eventId = this.eventOptions[0].value
          } else {
            this.form.eventId = ''
            this.$message.warning('当前没有进行中的拓客活动，请联系管理员配置活动参与人员')
          }
        } catch (e) {
          this.eventOptions = []
          this.form.eventId = ''
        } finally {
          this.eventLoading = false
        }
      },

      handleCancel() {
        this.visibleProxy = false
        this.resetForm()
      },
      handleSubmit() {
        this.$refs.form.validate(valid => {
          if (!valid) return

          if (!this.expansionUserId) {
            this.$message.error('未获取到登录用户，请重新登录')
            return
          }

          this.submitting = true

          const payload = {
            eventId: this.form.eventId,
            customerName: this.form.customerName.trim(),
            customerPhone: this.form.customerPhone.trim(),
            buyNumber: 1,
            paymentMethod: this.form.paymentMethod,
            isAddWeChat: this.form.isAddWeChat,
            remarks: (this.form.remarks || '').trim(),
            expansionUserId: this.expansionUserId
          }
          createTkjlb(payload)
            .then(() => {
              this.$message.success('拓客信息已保存')
              this.visibleProxy = false
              this.resetForm()
              this.$emit('saved')
            })
            .catch(() => {})
            .finally(() => {
              this.submitting = false
            })

        })
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .tuoke-dialog-inner {
    padding: 18px 22px 14px;
  }
  
  .tuoke-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(219, 234, 254, 0.96);
  }
  
  .tuoke-title-wrap {
    flex: 1;
  }
  
  .tuoke-title {
    font-size: 17px;
    font-weight: 600;
    color: #0f172a;
  }
  
  .tuoke-form {
    padding-top: 6px;
  }
  
  .tuoke-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
  }
  
  ::v-deep .tuoke-dialog {
    max-width: 520px;
    margin-top: 10vh !important;
    border-radius: 20px;
    padding: 0;
    background: radial-gradient(circle at 0 0, rgba(255,255,255,0.96) 0, rgba(248,250,252,0.98) 40%, rgba(241,245,249,0.98) 100%);
    box-shadow:
      0 24px 48px rgba(15, 23, 42, 0.18),
      0 0 0 1px rgba(255,255,255,0.9);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
  }
  
  ::v-deep .el-dialog__header {
    display: none;
  }
  
  ::v-deep .el-dialog__body {
    padding: 0;
  }
  

  ::v-deep .tuoke-dialog .el-input__inner {
    border-radius: 999px;
    height: 32px;
    line-height: 32px;
    border-color: #e5e7eb;
    background-color: #f9fafb;
  }
  
  ::v-deep .tuoke-dialog .el-input__inner:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.18);
  }
  
  ::v-deep .tuoke-dialog .el-textarea__inner {
    border-radius: 12px;
    border-color: #e5e7eb;
    background-color: #f9fafb;
  }
  
  ::v-deep .tuoke-dialog .el-textarea__inner:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.18);
  }
  

  ::v-deep .tuoke-dialog .el-button--primary {
    border-radius: 999px;
    padding: 0 20px;
    height: 30px;
    line-height: 30px;
    background: #2563eb;
    border-color: #2563eb;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
    font-size: 12px;
  }
  
  ::v-deep .tuoke-dialog .el-button--primary.is-disabled {
    box-shadow: none;
  }
  
  ::v-deep .tuoke-dialog .el-button--default {
    border-radius: 999px;
    padding: 0 18px;
    height: 30px;
    line-height: 30px;
    background: rgba(239, 246, 255, 0.9);
    color: #2563eb;
    border-color: rgba(37, 99, 235, 0.18);
    font-size: 12px;
  }
  
  ::v-deep .tuoke-dialog .el-button--default:hover {
    background: rgba(219, 234, 254, 0.95);
    color: #1d4ed8;
  }
  </style>