|
|
@@ -0,0 +1,247 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-dialog :title="exData.id ? '编辑': '新增'"
|
|
|
+ :visible.sync="dialog"
|
|
|
+ width="50%"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ top="50px">
|
|
|
+ <el-form ref="form"
|
|
|
+ :model="form"
|
|
|
+ :rules="formRules"
|
|
|
+ label-width="160px">
|
|
|
+ <el-form-item prop="user_song_name"
|
|
|
+ :rules="formRules.required"
|
|
|
+ label="艺人姓名：">
|
|
|
+ <el-col :span="16">
|
|
|
+ <el-input v-model="form.user_song_name"
|
|
|
+ placeholder="请输入艺人姓名"
|
|
|
+ clearable></el-input>
|
|
|
+ </el-col>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="phone"
|
|
|
+ :rules="formRules.mobile"
|
|
|
+ label="手机号：">
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-input v-model="form.phone"
|
|
|
+ placeholder="请输入手机号"
|
|
|
+ @input="form.phone = form.phone.replace(/[^\d]/g, '').slice(0, 11)"
|
|
|
+ clearable></el-input>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5" :offset="1">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="validatePhone"
|
|
|
+ :disabled="[0, 60].findIndex(item => item === numCount) < 0">
|
|
|
+ 获取验证码<span>{{ [0, 60].findIndex(item => item === numCount) > -1 ? '' : numCount + '秒' }}</span>
|
|
|
+ </el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="code"
|
|
|
+ :rules="formRules.code"
|
|
|
+ label="短信验证码：">
|
|
|
+ <el-col :span="16">
|
|
|
+ <el-input v-model="form.code"
|
|
|
+ placeholder="请输入短信验证码"
|
|
|
+ @input="form.code=form.code.replace(/[^\d]/g, '').slice(0, 6)"
|
|
|
+ clearable></el-input>
|
|
|
+ </el-col>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="plan_cover_url"
|
|
|
+ :rules="formRules.uploadImgs"
|
|
|
+ label="演出海报：">
|
|
|
+ <el-upload :on-remove="handleRemove"
|
|
|
+ :on-success="handleAvatarSuccess"
|
|
|
+ :before-upload="beforeAvatarUpload"
|
|
|
+ :on-exceed="hadnleExceed"
|
|
|
+ :accept="'image/*'"
|
|
|
+ :limit="1"
|
|
|
+ :file-list="fileList"
|
|
|
+ list-type="picture-card"
|
|
|
+ action="/api/admin/v1/upload/file"
|
|
|
+ multiple>
|
|
|
+ <i class="el-icon-plus"></i>
|
|
|
+ <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5M</div>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="user_sign_status"
|
|
|
+ :rules="formRules.required"
|
|
|
+ label="状态：">
|
|
|
+ <el-radio v-model="form.user_sign_status"
|
|
|
+ label="1">已签约
|
|
|
+ </el-radio>
|
|
|
+ <el-radio v-model="form.user_sign_status"
|
|
|
+ label="0">未签约
|
|
|
+ </el-radio>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer text-center">
|
|
|
+ <el-button @click="dialog = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="handleSubmit">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { fen2Yuan, yuan2Fen } from '@/utils'
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {},
|
|
|
+ props: {
|
|
|
+ value: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ exData: {
|
|
|
+ type: Object,
|
|
|
+ default: function () {
|
|
|
+ return {}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ dialog: !!this.value,
|
|
|
+ form: {
|
|
|
+ user_song_name: '', // 歌手名称
|
|
|
+ phone: '', // 手机号码
|
|
|
+ code: '', // 验证码
|
|
|
+ plan_cover_url: [],
|
|
|
+ user_sign_status: '1', // 艺人签约状态(0未签约1已签约)
|
|
|
+ },
|
|
|
+ fileList: [],
|
|
|
+ numCount: 60,
|
|
|
+ timer: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ beforeAvatarUpload (file) {
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 5
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$message.error('上传图片大小不能超过 5MB!')
|
|
|
+ }
|
|
|
+ return isLt2M
|
|
|
+ },
|
|
|
+ handleRemove (file) {
|
|
|
+ let path = file.url
|
|
|
+ if (file.response && file.response.data) {
|
|
|
+ path = file.response.data.path
|
|
|
+ }
|
|
|
+ this.form.plan_cover_url = this.form.plan_cover_url.filter(item => item !== path)
|
|
|
+ },
|
|
|
+ handleAvatarSuccess (res) {
|
|
|
+ if (res.code === 200) {
|
|
|
+ const { path } = res.data
|
|
|
+ this.form.plan_cover_url.push(path)
|
|
|
+ } else {
|
|
|
+ this.$message.error('图片上传失败')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ hadnleExceed (files, fileList) {
|
|
|
+ this.$message({
|
|
|
+ message: '商品图最多上传一张',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ removeDeskNum (item) {
|
|
|
+ var index = this.form.place_number.indexOf(item)
|
|
|
+ if (this.form.place_number.length <= 1) {
|
|
|
+ this.$message.warning('桌数不能小于1')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (index !== -1) {
|
|
|
+ this.form.place_number.splice(index, 1)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addDomain () {
|
|
|
+ this.form.place_number.push({
|
|
|
+ value: ''
|
|
|
+ })
|
|
|
+ },
|
|
|
+ validatePhone () {
|
|
|
+ this.$refs['form'].validateField('phone', emailError => {
|
|
|
+ if (!emailError) {
|
|
|
+ this.funGetCode()
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ funCutDown () {
|
|
|
+ clearInterval(this.timer)
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ if (this.numCount === 0) {
|
|
|
+ clearInterval(this.timer)
|
|
|
+ this.numCount = 0
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.numCount--
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
+ // 获取验证码
|
|
|
+ async funGetCode () {
|
|
|
+ const numCount = this.numCount
|
|
|
+ const { phone } = this.form
|
|
|
+ if (numCount < 60 && numCount > 0) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.numCount = 60
|
|
|
+ this.funCutDown()
|
|
|
+ const data = await this.$fetch('/v1/send/code', {
|
|
|
+ phone
|
|
|
+ })
|
|
|
+ if (data.code === 200) {
|
|
|
+ this.$message.success('发送成功')
|
|
|
+ } else {
|
|
|
+ clearInterval(this.timer)
|
|
|
+ this.numCount = 60
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleSubmit () {
|
|
|
+ // todo 艺人添加、艺人海报数组转字符串
|
|
|
+ const url = this.exData.id ? '/v1/user/member/song/modify' : ''
|
|
|
+ this.$refs.form.validate(async valid => {
|
|
|
+ if (valid) {
|
|
|
+ const data = await this.$fetch(url, {
|
|
|
+ ...this.form,
|
|
|
+ place_price: yuan2Fen(this.form.place_price)
|
|
|
+ })
|
|
|
+ if (data.code === 200) {
|
|
|
+ this.$message.success('提交成功')
|
|
|
+ this.$emit('success')
|
|
|
+ this.dialog = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ if (this.exData.id) {
|
|
|
+ this.$set(this.form, 'id', this.exData.id)
|
|
|
+ for (const key in this.exData) {
|
|
|
+ if (this.form.hasOwnProperty(key)) {
|
|
|
+ let value = this.exData[key]
|
|
|
+ if ((Array.isArray(value) && value.length >= 1) || (Object.prototype.toString.call(value) === '[object Object]') || (typeof value === 'string' && value) || typeof value === 'number') {
|
|
|
+ if (key === 'place_price') {
|
|
|
+ value = fen2Yuan(value)
|
|
|
+ }
|
|
|
+ this.$set(this.form, key, value)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ dialog (val) {
|
|
|
+ if (!val) this.$emit('input', val)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.top-tip {
|
|
|
+ margin-top: -20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+</style>
|
panyong