24 changed files with 1260 additions and 153 deletions
|
After Width: | Height: | Size: 347 B |
|
After Width: | Height: | Size: 210 B |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 435 B |
|
After Width: | Height: | Size: 426 B |
@ -0,0 +1,207 @@ |
|||||
|
<template> |
||||
|
<div class="upload-wrapper"> |
||||
|
<!-- 预览图片 --> |
||||
|
<div class="image-list" v-if="previewList.length>0"> |
||||
|
<div class="image-box" |
||||
|
v-for="(item, index) in previewList" :key="index"> |
||||
|
<img :src="item.url" class="image-preview" /> |
||||
|
<!-- <i class="el-icon-close delete-icon" @click.stop="removeImage(index)" />--> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 上传按钮 --> |
||||
|
<el-upload |
||||
|
class="image-uploader" |
||||
|
action="" |
||||
|
:http-request="uploadHandler" |
||||
|
:show-file-list="false" |
||||
|
:before-upload="beforeUpload" |
||||
|
:accept="acceptMime" |
||||
|
> |
||||
|
<GuipButton class="upload-button" type="ignore" :btnstyle="btnStyle"> |
||||
|
<div class="bgImg"></div> |
||||
|
<span>选择图片</span> |
||||
|
</GuipButton> |
||||
|
</el-upload> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import GuipButton from "@/components/GuipButton.vue"; |
||||
|
|
||||
|
export default { |
||||
|
name: "ImgUpload", |
||||
|
components: {GuipButton}, |
||||
|
props: { |
||||
|
value: { |
||||
|
type: [Array, File, null], |
||||
|
default: () => [] |
||||
|
}, |
||||
|
defaultUrls: { |
||||
|
type: Array, |
||||
|
default: () => [] |
||||
|
}, |
||||
|
acceptTypes: { |
||||
|
type: Array, |
||||
|
default: () => ['jpg', 'png'] |
||||
|
}, |
||||
|
sizeLimit: { |
||||
|
type: Number, |
||||
|
default: 2 // MB |
||||
|
}, |
||||
|
btnStyle:{ |
||||
|
type: Object, |
||||
|
default() { |
||||
|
return { |
||||
|
width: '118px', |
||||
|
color: '#23242B', |
||||
|
border: '1px solid #BABDC2', |
||||
|
background: '#F2F3F5', |
||||
|
'border-radius': '4px' |
||||
|
}; |
||||
|
} |
||||
|
}, |
||||
|
maxCount: { |
||||
|
type: Number, |
||||
|
default: 1 |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
previewList: [], |
||||
|
initialized: false |
||||
|
}; |
||||
|
}, |
||||
|
watch: { |
||||
|
defaultUrls(newUrls) { |
||||
|
if (!this.initialized && Array.isArray(newUrls) && newUrls.length) { |
||||
|
this.previewList = newUrls |
||||
|
.filter(url => !!url) |
||||
|
.map(url => ({ url })); |
||||
|
this.initialized = true; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
// 根据后缀数组生成 MIME 类型字符串，用于 <el-upload accept=""> |
||||
|
acceptMime() { |
||||
|
const map = { |
||||
|
jpg: 'image/jpeg', |
||||
|
jpeg: 'image/jpeg', |
||||
|
png: 'image/png', |
||||
|
webp: 'image/webp', |
||||
|
gif: 'image/gif' |
||||
|
}; |
||||
|
return this.acceptTypes |
||||
|
.map(ext => map[ext.toLowerCase()]) |
||||
|
.filter(Boolean) |
||||
|
.join(','); |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
beforeUpload(file) { |
||||
|
if(this.maxCount === 1){ |
||||
|
this.previewList = [] |
||||
|
} |
||||
|
|
||||
|
if (this.previewList.length >= this.maxCount) { |
||||
|
this.$message.warning(`最多只能上传 ${this.maxCount} 张图片`); |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
const isImage = file.type.startsWith("image/"); |
||||
|
const isLt2M = file.size / 1024 / 1024 < 2; |
||||
|
if (!isImage) { |
||||
|
this.$message.error("只能上传图片格式！"); |
||||
|
return false; |
||||
|
} |
||||
|
if (!isLt2M) { |
||||
|
this.$message.error("图片大小不能超过 2MB！"); |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
const allowedTypes = this.acceptMime.split(','); |
||||
|
if (!allowedTypes.includes(file.type)) { |
||||
|
this.$message.error(`只允许上传 ${this.acceptTypes.join('/').toUpperCase()} 格式图片！`); |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
const url = URL.createObjectURL(file); |
||||
|
|
||||
|
if(this.maxCount === 1){ |
||||
|
this.previewList = [{ file, url }]; |
||||
|
this.$emit('input', { file, url }); |
||||
|
} else { |
||||
|
this.previewList.push({ file, url }); |
||||
|
|
||||
|
const files = this.previewList |
||||
|
.filter(item => item.file) |
||||
|
.map(item => item.file); |
||||
|
this.$emit('input', files); |
||||
|
} |
||||
|
|
||||
|
return false; |
||||
|
}, |
||||
|
uploadHandler() { |
||||
|
// 留空，使用自定义上传逻辑，由父组件决定是否提交 file 到服务器 |
||||
|
}, |
||||
|
removeImage(index) { |
||||
|
this.previewList.splice(index, 1); |
||||
|
const files = this.previewList |
||||
|
.filter(item => item.file) |
||||
|
.map(item => item.file); |
||||
|
this.$emit('input', files); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.upload-wrapper { |
||||
|
} |
||||
|
|
||||
|
.image-list { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 8px; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
.image-box { |
||||
|
position: relative; |
||||
|
width: 100px; |
||||
|
height: 100px; |
||||
|
} |
||||
|
.image-preview { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
object-fit: cover; |
||||
|
border: 1px solid #ccc; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
.delete-icon { |
||||
|
position: absolute; |
||||
|
top: -6px; |
||||
|
right: -6px; |
||||
|
font-size: 16px; |
||||
|
color: white; |
||||
|
background: #f56c6c; |
||||
|
border-radius: 50%; |
||||
|
padding: 2px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.bgImg{ |
||||
|
width: 20px; |
||||
|
height: 16px; |
||||
|
margin-right: 6px; |
||||
|
background-image: url(@/assets/site/uploadIcon.svg); |
||||
|
} |
||||
|
.upload-button:hover{ |
||||
|
border: 1px solid #006AFF!important; |
||||
|
} |
||||
|
.upload-button:hover .bgImg { |
||||
|
background-image: url(@/assets/site/uploadIcon_light.svg); |
||||
|
} |
||||
|
.upload-button:hover span { |
||||
|
color: #006AFF; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,359 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<el-form class="el-row demo-ruleForm" ref="formRef" v-if="domainOptions.length>0" :rules="rules" :model="data"> |
||||
|
<GuipFormItem column="column" class="combo-formItem w540" :label="label" :class="label ? '' : 'combo-formItem-nolabel'"> |
||||
|
<div slot="formDom" class="self-drop-wrap flex w540"> |
||||
|
<GuipInput prop="prefix" v-model="data.prefix" style="width: 60%;" placeholder="仅支持数字、字母" @blur="inputEnd"></GuipInput> |
||||
|
<!-- 只用作选中内容展示 --> |
||||
|
<div @click="toggleDrop" class="point flex appendDrop" style="width: 40%;">{{data.domain}}</div> |
||||
|
</div> |
||||
|
<!--触发 真实下拉操作 --> |
||||
|
<!-- valueKey="id" displayKey="name" 不添加时，默认取值 value、label--> |
||||
|
<CustomDropdown slot="formDom" ref="dropDomain" width="100%" v-model="data.domain" |
||||
|
:options="domainOptions" @change="changeSelect" placeholder="请选择"> |
||||
|
<template #normal> |
||||
|
<div class="flex flex-between noraml-jump"> |
||||
|
<div class="left"> |
||||
|
<b>添加新域名</b> |
||||
|
<p class="one ft12">域名需要在阿里云完成ICP备案并解析到平台服务器</p> |
||||
|
<p class="ft12">如果暂时未准备好，可先选用平台免费域名，随时支持域名修改。 </p> |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<GuipButton size="form" @click="bindNewDomain">前往绑定</GuipButton> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</CustomDropdown> |
||||
|
</GuipFormItem> |
||||
|
</el-form> |
||||
|
|
||||
|
<GuipDialog :dialogVisible="dialogVisible" :show-close-button="false" :showFooterButton="false" |
||||
|
type="center" title="温馨提示"> |
||||
|
<div class="domain-wrap"> |
||||
|
<el-form class="el-row demo-ruleForm" ref="formRef" :rules="formRules" :model="formData"> |
||||
|
<p class="p-info">设置自己的域名，需要做 2 步站外操作。如果暂时未准备好，或打算稍后设置，可以先选用平台免费域名，平台随时支持域名修改。 </p> |
||||
|
<p class="p-title"><span>1.</span>域名必须在阿里云完成 ICP 备案</p> |
||||
|
<p class="p-desc mb18">备案网址：https://beian.aliyun.com</p> |
||||
|
<p class="p-title"><span>2.</span>域名要解析到平台服务器上</p> |
||||
|
<p class="p-desc mb18">记录类型：CNAME；记录值：lunwen.kuailedns.com</p> |
||||
|
<p class="p-title"><span>3.</span>域名填写</p> |
||||
|
<GuipInput width="458px" placeholder="填写完整域名" class="mb18" prop="domain" v-model="formData.domain"></GuipInput> |
||||
|
<p class="p-title"><span>4.</span>域名备案号</p> |
||||
|
<GuipInput width="458px" placeholder="填写备案号" class="mb32" prop="beian" v-model="formData.beian"></GuipInput> |
||||
|
<div class="flex flex-between"> |
||||
|
<GuipButton type="ignore" :btnstyle="{'width': '247px', 'border-radius': '4px'}" @click="handleCancel">先用平台免费域名</GuipButton> |
||||
|
<GuipButton type="primary" :btnstyle="{'width': '247px', 'border-radius': '4px'}" :loading="show_step" @click="handleConfirm" >准备完毕，验证自有域名</GuipButton> |
||||
|
</div> |
||||
|
<div class="domain-step" v-if="show_step"> |
||||
|
<div class="flex mr12"> |
||||
|
<GuipButton v-if="step1 === 1" type="text" :loading="true" :btnstyle="{'color': '#1675FF', 'font-size': '12px'}"> |
||||
|
验证域名解析 |
||||
|
</GuipButton> |
||||
|
<GuipButton v-if="step1 === 2" type="text" :btnstyle="{'color': '#1675FF', 'font-size': '12px'}"> |
||||
|
<img src="@/assets/site/step_success.png" alt="" class="mr5"><span>域名已解析</span> |
||||
|
</GuipButton> |
||||
|
<GuipButton v-if="step1 === 3" type="text" :btnstyle="{'color': '#FF4D4F', 'font-size': '12px'}"> |
||||
|
<img src="@/assets/site/step_error.png" alt="" class="mr5"><span>域名未解析</span> |
||||
|
</GuipButton> |
||||
|
</div> |
||||
|
<div class="flex"> |
||||
|
<img src="@/assets/site/next-line.png" alt=""> |
||||
|
</div> |
||||
|
<div class="flex ml12"> |
||||
|
<GuipButton v-if="step2 === 0" type="text" :btnstyle="{'color': '#8A9099', 'font-size': '12px'}"> |
||||
|
<img src="@/assets/site/step_wait.png" alt="" class="mr5"><span>验证ICP备案</span> |
||||
|
</GuipButton> |
||||
|
<GuipButton v-if="step2 === 1" type="text" :loading="true" :btnstyle="{'color': '#1675FF', 'font-size': '12px'}"> |
||||
|
验证ICP备案 |
||||
|
</GuipButton> |
||||
|
<GuipButton v-if="step2 === 3" type="text" :btnstyle="{'color': '#FF4D4F', 'font-size': '12px'}"> |
||||
|
<img src="@/assets/site/step_error.png" alt="" class="mr5"><span>ICP未备案</span> |
||||
|
</GuipButton> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</GuipDialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import GuipInput from "@/components/GuipInput.vue"; |
||||
|
import GuipDialog from "@/components/GuipDialog.vue"; |
||||
|
import GuipButton from "@/components/GuipButton.vue"; |
||||
|
import GuipFormItem from "@/components/GuipFormItem.vue"; |
||||
|
import CustomDropdown from "@/components/CustomDropdown.vue"; |
||||
|
|
||||
|
export default { |
||||
|
name: 'domainBind', |
||||
|
props:['label'], |
||||
|
components: { |
||||
|
CustomDropdown, GuipFormItem, |
||||
|
GuipButton, |
||||
|
GuipDialog, |
||||
|
GuipInput |
||||
|
}, |
||||
|
data(){ |
||||
|
return { |
||||
|
domainOptions:[], |
||||
|
prefix: '', |
||||
|
domain: '', |
||||
|
dialogVisible: false, |
||||
|
data: { |
||||
|
prefix: '', |
||||
|
domain: '', |
||||
|
}, |
||||
|
rules:{ |
||||
|
prefix: [ |
||||
|
{ required: true, message: '请输入域名前缀', trigger: 'blur' } |
||||
|
], |
||||
|
}, |
||||
|
formData: { |
||||
|
domain: '', |
||||
|
beian: '', |
||||
|
}, |
||||
|
formRules: { |
||||
|
domain: [ |
||||
|
{ required: true, message: '请输入域名', trigger: 'blur' }, |
||||
|
{ |
||||
|
pattern: /^[a-zA-Z0-9-]+\.[a-zA-Z]{2,}$/, |
||||
|
message: '格式错误，请输入正确域名', |
||||
|
trigger: 'blur' |
||||
|
} |
||||
|
], |
||||
|
beian: [ |
||||
|
{ required: true, message: '请输入域名备案号', trigger: 'blur' } |
||||
|
], |
||||
|
}, |
||||
|
show_step: false, |
||||
|
step1: 1, //1正在验证 2验证成功 3验证失败 |
||||
|
step2: 0 //0等待验证 1正在验证 3验证失败 |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
formData: { |
||||
|
deep: true, |
||||
|
handler() { |
||||
|
this.show_step = false; |
||||
|
this.step1 = 1 |
||||
|
this.step2 = 0 |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted(){ |
||||
|
this.getDomainList() |
||||
|
}, |
||||
|
methods:{ |
||||
|
getDomainList() { |
||||
|
const that = this |
||||
|
that.$http('POST', '/agentnew/ajax_get_private_domains', {}, { |
||||
|
headers: { |
||||
|
'Auth': this.token |
||||
|
} |
||||
|
}).then(response => { |
||||
|
if(response.status){ |
||||
|
this.data.domain = '.'+response.data[0] |
||||
|
that.domainOptions = response.data.map(item => ({ |
||||
|
label: '.'+item, |
||||
|
value: '.'+item |
||||
|
})); |
||||
|
return true |
||||
|
} |
||||
|
that.$message.error(response.info); |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
}, |
||||
|
toggleDrop(e) { |
||||
|
this.$refs.dropDomain.toggleDropdown(e) |
||||
|
}, |
||||
|
inputEnd(){ |
||||
|
this.$emit('handleEvent', this.data) |
||||
|
}, |
||||
|
changeSelect() { |
||||
|
this.$emit('handleEvent', this.data) |
||||
|
}, |
||||
|
bindNewDomain(){ |
||||
|
this.dialogVisible = true |
||||
|
}, |
||||
|
handleCancel(){ |
||||
|
this.dialogVisible = false |
||||
|
}, |
||||
|
handleConfirm(){ |
||||
|
this.$refs.formRef.validate((valid) => { |
||||
|
if (valid) this.verfiyDNS(); |
||||
|
}); |
||||
|
}, |
||||
|
verfiyDNS() { |
||||
|
this.show_step = true |
||||
|
|
||||
|
const that = this |
||||
|
that.$http('POST', '/agentnew/ajax_check_dns', { |
||||
|
domain: that.formData.domain |
||||
|
}, { |
||||
|
headers: { |
||||
|
'Auth': this.token |
||||
|
} |
||||
|
}).then(response => { |
||||
|
if(response.status){ |
||||
|
that.step1 = 2 |
||||
|
that.step2 = 1 |
||||
|
that.verfiyBeian() |
||||
|
} else { |
||||
|
that.step1 = 3 |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
}, |
||||
|
verfiyBeian(){ |
||||
|
const that = this |
||||
|
that.$http('POST', '/agentnew/ajax_check_beian', { |
||||
|
domain: that.formData.domain |
||||
|
},{ |
||||
|
headers:{ |
||||
|
'Auth': this.token |
||||
|
} |
||||
|
}).then(response => { |
||||
|
if(response.status){ |
||||
|
that.addDomain() |
||||
|
} else { |
||||
|
that.step2 = 3 |
||||
|
} |
||||
|
|
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
}, |
||||
|
addDomain(){ |
||||
|
const that = this |
||||
|
that.$http('POST', '/agentnew/ajax_add_domain', { |
||||
|
domain: that.formData.domain, |
||||
|
beian: that.formData.beian |
||||
|
},{ |
||||
|
headers:{ |
||||
|
'Auth': this.token |
||||
|
} |
||||
|
}).then(response => { |
||||
|
if(response.status){ |
||||
|
that.data.domain = that.formData.domain |
||||
|
that.domainOptions.unshift({ |
||||
|
label: '.'+that.formData.domain, |
||||
|
value: '.'+that.formData.domain |
||||
|
}) |
||||
|
that.show_step = false |
||||
|
that.dialogVisible = false |
||||
|
that.$message.success('添加成功'); |
||||
|
return true |
||||
|
} |
||||
|
that.$message.error(response.info); |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped lang="scss"> |
||||
|
.w540 { |
||||
|
width: 540px!important; |
||||
|
} |
||||
|
.mb18{ |
||||
|
margin-bottom: 18px; |
||||
|
} |
||||
|
.mb32{ |
||||
|
margin-bottom: 32px; |
||||
|
} |
||||
|
.mr12{ |
||||
|
margin-right: 12px; |
||||
|
} |
||||
|
.ml12{ |
||||
|
margin-left: 12px; |
||||
|
} |
||||
|
.mr5{ |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
|
||||
|
.combo-formItem-nolabel{ |
||||
|
::v-deep { |
||||
|
.form-item-top{ |
||||
|
display: none; |
||||
|
height: 0; |
||||
|
margin: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.combo-formItem { |
||||
|
letter-spacing: 0.08em; |
||||
|
::v-deep { |
||||
|
.form-item-bottom { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.select-trigger { |
||||
|
background: #F6F7FA; |
||||
|
border-color: transparent; |
||||
|
} |
||||
|
|
||||
|
.is-open .select-trigger { |
||||
|
border-color: #006AFF; |
||||
|
} |
||||
|
|
||||
|
.el-input__inner { |
||||
|
border-radius: 2px 0 0 2px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.self-drop-wrap { |
||||
|
position: absolute; |
||||
|
z-index: 1; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.appendDrop { |
||||
|
height: 38px; |
||||
|
align-items: center; |
||||
|
border-radius: 0 2px 2px 0; |
||||
|
border: 1px solid #DFE2E6; |
||||
|
border-left-color: transparent; |
||||
|
justify-content: center; |
||||
|
box-sizing: border-box; |
||||
|
padding: 0 30px 0 12px; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
&:hover { |
||||
|
border: 1px solid #006AFF; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.domain-wrap{ |
||||
|
letter-spacing: 0.08em; |
||||
|
font-size: 14px; |
||||
|
.p-info{ |
||||
|
color: #626573; |
||||
|
margin-bottom: 24px; |
||||
|
} |
||||
|
.p-title{ |
||||
|
color: #23242B; |
||||
|
margin-bottom: 8px; |
||||
|
span{ |
||||
|
width: 23px; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
} |
||||
|
.p-desc{ |
||||
|
color: #8A9099; |
||||
|
padding-left: 23px; |
||||
|
} |
||||
|
|
||||
|
.domain-step{ |
||||
|
margin-top: 16px; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue