jiangyy
4 years ago
8 changed files with 801 additions and 636 deletions
@ -1,196 +1,287 @@ |
|||
<template> |
|||
<div class="publish-container"> |
|||
<div class="publish-container"> |
|||
<div> |
|||
<div v-if="!publishStatus" |
|||
class="publish-btn-view"> |
|||
<div> |
|||
<div v-if="!publishStatus" class="publish-btn-view"> |
|||
<el-button |
|||
class="publish-btn" |
|||
size="medium" |
|||
type="primary" |
|||
@click="publishProject" |
|||
> |
|||
<i class="el-icon-document-checked el-icon--right">开始发布</i> |
|||
</el-button> |
|||
<el-form label-width="90px"> |
|||
<el-form-item label="小程序端"> |
|||
<el-radio-group v-model="clientType"> |
|||
<el-radio-button label="resi">居民端</el-radio-button> |
|||
<el-radio-button label="work">工作端</el-radio-button> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="发布范围"> |
|||
<el-tree ref="tree" |
|||
style="background-color:#f7f7f7" |
|||
:props="props" |
|||
:data="data" |
|||
show-checkbox |
|||
:default-expand-all="true" |
|||
@node-click="nodeClick" |
|||
@check="check" |
|||
@check-change="handleCheckChange" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
<div style="text-align:center"> |
|||
<el-button class="publish-btn" |
|||
size="medium" |
|||
type="primary" |
|||
@click="publishProject"> |
|||
<i class="el-icon-document-checked el-icon--right">开始发布</i> |
|||
</el-button> |
|||
</div> |
|||
</div> |
|||
<div v-if="publishStatus" |
|||
class="publish-finish-view"> |
|||
<el-row :gutter="10" |
|||
align="middle" |
|||
type="flex"> |
|||
<!-- <el-col> |
|||
<div> |
|||
<vue-qr v-if="writeLink" |
|||
:callback="qrCodeGenSuccess" |
|||
:size="194" |
|||
:text="writeLink" /> |
|||
</div> |
|||
<div v-if="publishStatus" class="publish-finish-view"> |
|||
<el-row :gutter="10" align="middle" type="flex"> |
|||
<el-col> |
|||
<div> |
|||
<vue-qr v-if="writeLink" :callback="qrCodeGenSuccess" :size="194" |
|||
:text="writeLink" |
|||
/> |
|||
</div> |
|||
<div style="text-align: center;"> |
|||
<el-link type="primary" @click="()=>{ |
|||
<div style="text-align: center;"> |
|||
<el-link type="primary" @click="()=>{ |
|||
this.downloadFile('qrcode.png',this.qrCodeUrl) |
|||
}" |
|||
> |
|||
下载分享二维码 |
|||
</el-link> |
|||
</div> |
|||
</el-col> |
|||
<el-col style="margin-left: 75px;"> |
|||
<div style="display: flex; justify-content: center;"> |
|||
<div class="icon-view"> |
|||
<i class="el-icon-check success-icon" /> |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<p class="success-title">恭喜您，发布成功！</p> |
|||
</div> |
|||
<div> |
|||
</div> |
|||
</el-col> --> |
|||
<el-col style="margin-left: 75px;"> |
|||
<div style="display: flex; justify-content: center;"> |
|||
<div class="icon-view"> |
|||
<i class="el-icon-check success-icon" /> |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<p class="success-title">恭喜您，发布成功！</p> |
|||
</div> |
|||
<!-- <div> |
|||
<p class="link-text"> {{ writeLink }}</p> |
|||
</div> |
|||
<el-row> |
|||
<el-col :offset="3" :span="6"> |
|||
<el-button v-clipboard:copy="writeLink" |
|||
</div> --> |
|||
<el-row> |
|||
<!-- <el-col :offset="2" |
|||
:span="6"> |
|||
<el-button v-clipboard:copy="writeLink" |
|||
v-clipboard:error="()=>{this.msgError('复制失败')}" |
|||
v-clipboard:success="()=>{this.msgSuccess('复制成功')}" type="primary" |
|||
> |
|||
复制链接 |
|||
</el-button> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-button |
|||
type="danger" |
|||
@click="stopPublishProject" |
|||
> |
|||
停止发布 |
|||
</el-button> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-button |
|||
type="warning" |
|||
@click="toFeedbackPageHandle" |
|||
> |
|||
查看反馈 |
|||
</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</div> |
|||
</el-col> --> |
|||
<el-col :span="12"> |
|||
<el-button type="danger" |
|||
@click="stopPublishProject"> |
|||
停止发布 |
|||
</el-button> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-button type="warning" |
|||
@click="toFeedbackPageHandle"> |
|||
查看反馈 |
|||
</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import VueQr from 'vue-qr' |
|||
// import VueQr from 'vue-qr' |
|||
|
|||
export default { |
|||
name: 'ProjectPublish', |
|||
components: { |
|||
VueQr |
|||
name: 'ProjectPublish', |
|||
components: { |
|||
// VueQr |
|||
}, |
|||
data () { |
|||
return { |
|||
publishStatus: false, |
|||
projectKey: null, |
|||
writeLink: '', |
|||
qrCodeUrl: '', |
|||
|
|||
clientType: 'resi', |
|||
|
|||
props: { |
|||
// label: 'name', |
|||
// children: 'zones' |
|||
}, |
|||
count: 1, |
|||
data: [{ |
|||
id: 1, |
|||
label: '一级 1', |
|||
children: [{ |
|||
id: 4, |
|||
label: '二级 1-1', |
|||
children: [{ |
|||
id: 9, |
|||
label: '三级 1-1-1' |
|||
}, { |
|||
id: 10, |
|||
label: '三级 1-1-2' |
|||
}] |
|||
}] |
|||
}, { |
|||
id: 2, |
|||
label: '一级 2', |
|||
children: [{ |
|||
id: 5, |
|||
label: '二级 2-1' |
|||
}, { |
|||
id: 6, |
|||
label: '二级 2-2' |
|||
}] |
|||
}, { |
|||
id: 3, |
|||
label: '一级 3', |
|||
children: [{ |
|||
id: 7, |
|||
label: '二级 3-1' |
|||
}, { |
|||
id: 8, |
|||
label: '二级 3-2' |
|||
}] |
|||
}] |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.projectKey = this.$route.query.key |
|||
let url = window.location.protocol + '//' + window.location.host |
|||
this.writeLink = `${url}/s/${this.projectKey}` |
|||
this.getProjectStatus() |
|||
}, |
|||
methods: { |
|||
currentChange (data, node) { |
|||
console.log(data, node) |
|||
}, |
|||
check () { |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
publishStatus: false, |
|||
projectKey: null, |
|||
writeLink: '', |
|||
qrCodeUrl: '' |
|||
handleCheckChange (data, checked, indeterminate) { |
|||
data.select = true |
|||
console.log(data, checked, indeterminate) |
|||
// console.log('树'); |
|||
// console.log(this.data) |
|||
}, |
|||
nodeClick (a, b, c) { |
|||
console.log(a, b, c) |
|||
}, |
|||
handleNodeClick (data) { |
|||
// console.log(data); |
|||
}, |
|||
|
|||
getProjectStatus () { |
|||
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/${this.projectKey}`).then(res => { |
|||
if (res.data.status == 2) { |
|||
this.publishStatus = true |
|||
} else { |
|||
this.publishStatus = false |
|||
} |
|||
}) |
|||
}, |
|||
publishProject () { |
|||
const aaa = this.$refs.tree.getCheckedNodes(false, false) |
|||
console.log(aaa) |
|||
// this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/publish`, { key: this.projectKey }).then(() => { |
|||
// this.publishStatus = true |
|||
// this.msgSuccess('发布成功') |
|||
// }) |
|||
}, |
|||
mounted() { |
|||
this.projectKey = this.$route.query.key |
|||
let url = window.location.protocol + '//' + window.location.host |
|||
this.writeLink = `${url}/s/${this.projectKey}` |
|||
this.getProjectStatus() |
|||
}, methods: { |
|||
getProjectStatus() { |
|||
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/${this.projectKey}`).then(res => { |
|||
if (res.data.status == 2) { |
|||
this.publishStatus = true |
|||
} else { |
|||
this.publishStatus = false |
|||
} |
|||
}) |
|||
}, |
|||
publishProject() { |
|||
this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/publish`, {key: this.projectKey}).then(() => { |
|||
this.publishStatus = true |
|||
this.msgSuccess('发布成功') |
|||
}) |
|||
}, |
|||
stopPublishProject() { |
|||
this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/stop`, {'key': this.projectKey}).then(res => { |
|||
if (res.data) { |
|||
this.msgSuccess('停止成功') |
|||
this.getProjectStatus() |
|||
} |
|||
}) |
|||
}, |
|||
qrCodeGenSuccess(dataUrl) { |
|||
this.qrCodeUrl = dataUrl |
|||
}, |
|||
downloadFile(fileName, content) { |
|||
let aLink = document.createElement('a') |
|||
let blob = this.base64ToBlob(content) // new Blob([content]); |
|||
let evt = document.createEvent('HTMLEvents') |
|||
evt.initEvent('click', true, true)// initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为 |
|||
aLink.download = fileName |
|||
aLink.href = URL.createObjectURL(blob) |
|||
// aLink.dispatchEvent(evt); |
|||
aLink.click() |
|||
}, |
|||
// base64转blob |
|||
base64ToBlob(code) { |
|||
let parts = code.split(';base64,') |
|||
let contentType = parts[0].split(':')[1] |
|||
let raw = window.atob(parts[1]) |
|||
let rawLength = raw.length |
|||
let uInt8Array = new Uint8Array(rawLength) |
|||
for (let i = 0; i < rawLength; ++i) { |
|||
uInt8Array[i] = raw.charCodeAt(i) |
|||
} |
|||
return new Blob([uInt8Array], {type: contentType}) |
|||
}, |
|||
toFeedbackPageHandle() { |
|||
this.$router.replace({path: '/project/form/statistics', query: {key: this.projectKey}}) |
|||
stopPublishProject () { |
|||
this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/stop`, { 'key': this.projectKey }).then(res => { |
|||
if (res.data) { |
|||
this.msgSuccess('停止成功') |
|||
this.getProjectStatus() |
|||
} |
|||
}) |
|||
}, |
|||
qrCodeGenSuccess (dataUrl) { |
|||
this.qrCodeUrl = dataUrl |
|||
}, |
|||
downloadFile (fileName, content) { |
|||
let aLink = document.createElement('a') |
|||
let blob = this.base64ToBlob(content) // new Blob([content]); |
|||
let evt = document.createEvent('HTMLEvents') |
|||
evt.initEvent('click', true, true)// initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为 |
|||
aLink.download = fileName |
|||
aLink.href = URL.createObjectURL(blob) |
|||
// aLink.dispatchEvent(evt); |
|||
aLink.click() |
|||
}, |
|||
// base64转blob |
|||
base64ToBlob (code) { |
|||
let parts = code.split(';base64,') |
|||
let contentType = parts[0].split(':')[1] |
|||
let raw = window.atob(parts[1]) |
|||
let rawLength = raw.length |
|||
let uInt8Array = new Uint8Array(rawLength) |
|||
for (let i = 0; i < rawLength; ++i) { |
|||
uInt8Array[i] = raw.charCodeAt(i) |
|||
} |
|||
return new Blob([uInt8Array], { type: contentType }) |
|||
}, |
|||
toFeedbackPageHandle () { |
|||
this.$router.replace({ path: '/project/form/statistics', query: { key: this.projectKey } }) |
|||
} |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.publish-container { |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 0; |
|||
margin: 0; |
|||
background-color: #f7f7f7; |
|||
min-height: 84vh; |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 0; |
|||
margin: 0; |
|||
background-color: #f7f7f7; |
|||
min-height: 84vh; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.publish-btn-view { |
|||
width: 800px; |
|||
} |
|||
.publish-finish-view { |
|||
width: 500px; |
|||
height: 200px; |
|||
text-align: center; |
|||
.icon-view { |
|||
width: 59px; |
|||
height: 59px; |
|||
border-radius: 100px; |
|||
background-color: #0076ff; |
|||
display: flex; |
|||
align-items: center; |
|||
align-content: center; |
|||
justify-items: center; |
|||
justify-content: center; |
|||
} |
|||
.publish-finish-view { |
|||
width: 500px; |
|||
height: 200px; |
|||
} |
|||
.success-icon { |
|||
text-align: center; |
|||
.icon-view { |
|||
width: 59px; |
|||
height: 59px; |
|||
border-radius: 100px; |
|||
background-color: #0076ff; |
|||
display: flex; |
|||
align-items: center; |
|||
align-content: center; |
|||
justify-items: center; |
|||
justify-content: center; |
|||
} |
|||
.success-icon { |
|||
text-align: center; |
|||
color: white; |
|||
font-size: 30px; |
|||
} |
|||
.success-title { |
|||
color: rgba(16, 16, 16, 100); |
|||
font-size: 28px; |
|||
} |
|||
.link-text { |
|||
color: rgba(16, 16, 16, 100); |
|||
font-size: 14px; |
|||
} |
|||
color: white; |
|||
font-size: 30px; |
|||
} |
|||
.success-title { |
|||
color: rgba(16, 16, 16, 100); |
|||
font-size: 28px; |
|||
} |
|||
.link-text { |
|||
color: rgba(16, 16, 16, 100); |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
|
|||
File diff suppressed because it is too large
Loading…
Reference in new issue