|
@@ -0,0 +1,343 @@
|
|
|
+<template>
|
|
|
+ <div class="mgt-platform-container">
|
|
|
+ <vuescroll>
|
|
|
+ <div class="platform-list-wrap">
|
|
|
+ <div class="platform-item" v-for="(item,index) in platformList.links" :key="index" @click="openThirdPlatform(index)">
|
|
|
+ <span class="delete-platform-icon" @click.stop="delPlatform(index)" v-show="isArea">
|
|
|
+ <Icon type="md-close" class="add-member-icon" />
|
|
|
+ </span>
|
|
|
+ <div class="platform-img" :style="{backgroundImage: `url(${item.thum + '?' + areaSas})`}"></div>
|
|
|
+ <p class="img-text">
|
|
|
+ <span>平台:</span>
|
|
|
+ {{item.name}}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="add-platform-box" @click="addStatus = true" v-show="platformList.links.length && isArea">
|
|
|
+ <Icon type="md-add-circle" class="add-platform-icon" />
|
|
|
+ <p class="add-platform-text">添加资源</p>
|
|
|
+ </div>
|
|
|
+ <EmptyData v-show="!platformList.links.length" textContent="暂未添加第三方平台" :top="120"></EmptyData>
|
|
|
+ <p class="add-platform" v-show="!platformList.links.length && isArea" @click="addStatus = true">
|
|
|
+ <Icon type="md-add" />
|
|
|
+ 添加第三方平台
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </vuescroll>
|
|
|
+ <Modal v-model="addStatus" title="添加平台链接" @on-ok="confirmAdd" @on-cancel="cancelAdd" :loading="modalLoading" :width="800">
|
|
|
+ <Form ref="platform" :model="platform" :rules="platformRule" :label-width="60" label-colon>
|
|
|
+ <FormItem prop="thum" label="封面">
|
|
|
+ <Upload v-show="!platform.thum" ref="upload" :show-upload-list="false" :format="['jpg','jpeg','png']" :max-size="1024" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" :before-upload="uploadPoster" type="drag" action="" style="display: inline-block;width:100px;">
|
|
|
+ <div style="width: 100px;height:58px;line-height: 58px;">
|
|
|
+ <Icon type="ios-image" size="20"></Icon>
|
|
|
+ </div>
|
|
|
+ </Upload>
|
|
|
+ <img v-show="platform.thum" :src="platform.thum+'?' + areaSas" class="poster-img">
|
|
|
+ <span v-if="platform.thum" @click="platform.thum = ''" class="upd-again">重新上传</span>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem prop="name" label="名称">
|
|
|
+ <Input v-model="platform.name" placeholder="请输入第三方平台名称" :maxlength="18" show-word-limit></Input>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="链接" prop="url">
|
|
|
+ <Input v-model="platform.url" placeholder="请输入资源链接" />
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="描述">
|
|
|
+ <Input type="textarea" :rows="4" v-model="platform.content" placeholder="资源描述信息" />
|
|
|
+ </FormItem>
|
|
|
+ </Form>
|
|
|
+ </Modal>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import BlobTool from '@/utils/blobTool.js'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ const validateUrl = (rule, value, callback) => {
|
|
|
+ if (value) {
|
|
|
+ let flag = this.$tools.isURL(value)
|
|
|
+ if (flag) {
|
|
|
+ callback()
|
|
|
+ } else {
|
|
|
+ callback(new Error('请输入正确的链接地址'))
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ callback(new Error('请输入平台地址'))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ areaSas: '',
|
|
|
+ fullData: {},
|
|
|
+ platformList: {
|
|
|
+ tag: 'default',
|
|
|
+ links: []
|
|
|
+ },
|
|
|
+ addStatus: false,
|
|
|
+ modalLoading: true,
|
|
|
+ platformRule: {
|
|
|
+ name: [
|
|
|
+ { required: true, message: '请输入平台名称', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ type: [
|
|
|
+ { required: true, message: '请选择文件类型', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ thum: [
|
|
|
+ { required: true, message: '请上传平台Logo', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ url: [
|
|
|
+ { required: true, validator: validateUrl, trigger: 'change' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ platform: {
|
|
|
+ url: '',
|
|
|
+ name: '',
|
|
|
+ content: '',
|
|
|
+ thum: ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ openThirdPlatform(index) {
|
|
|
+ window.open(this.platformList.links[index].url)
|
|
|
+ },
|
|
|
+ delPlatform(index) {
|
|
|
+ this.$Modal.confirm({
|
|
|
+ title: "删除第三方平台",
|
|
|
+ content: `是否确认删除${this.platformList.links[index].name}?`,
|
|
|
+ onOk: () => {
|
|
|
+ this.platformList.links.splice(index, 1)
|
|
|
+ this.fullData.third = [this.platformList]
|
|
|
+ this.$api.ability.upsertResAndPolicy(this.fullData).then(
|
|
|
+ res => {
|
|
|
+ this.$Message.success('保存成功')
|
|
|
+ this.fullData = res.file
|
|
|
+ this.platformList = this.fullData.third.find(item => item.tag == 'default')
|
|
|
+ this.addStatus = false
|
|
|
+ },
|
|
|
+ err => {
|
|
|
+ this.$Message.error('保存失败')
|
|
|
+ }
|
|
|
+ )
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ uploadPoster(file) {
|
|
|
+ console.log(file)
|
|
|
+ if (file.size > 1024 * 1024) {
|
|
|
+ this.handleMaxSize()
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ let format = 'jpg,JPG,jpeg,JPEG,png,PNG'
|
|
|
+ let extension = file.name.substring(file.name.lastIndexOf('.') + 1)
|
|
|
+ if (!format.includes(extension)) {
|
|
|
+ this.handleFormatError()
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ let blobUrl = this.$store.state.user.userProfile.osblob_uri
|
|
|
+ let blobSas = this.$store.state.user.userProfile.osblob_sas
|
|
|
+ let host = blobUrl.substring(0, blobUrl.lastIndexOf('/'))
|
|
|
+ let container = blobUrl.substring(blobUrl.lastIndexOf('/') + 1)
|
|
|
+ let containerClient = new BlobTool(host, container, '?' + blobSas, 'school')
|
|
|
+ let filePath = `${sessionStorage.getItem('areaId')}/image`
|
|
|
+ containerClient.upload(file, {
|
|
|
+ path: filePath,
|
|
|
+ checkSize: false,
|
|
|
+ root: sessionStorage.getItem('areaId') + '/'
|
|
|
+ }).then(
|
|
|
+ res => {
|
|
|
+ this.platform.thum = res.url
|
|
|
+ },
|
|
|
+ err => {
|
|
|
+ this.$Message.error('上传失败')
|
|
|
+ }
|
|
|
+ )
|
|
|
+ return false
|
|
|
+ },
|
|
|
+ handleFormatError(file) {
|
|
|
+ this.$Message.error('文件格式不支持')
|
|
|
+ },
|
|
|
+ handleMaxSize(file) {
|
|
|
+ this.$Message.error('文件超过大小限制')
|
|
|
+ },
|
|
|
+ //查询资源文件
|
|
|
+ getAreaSource() {
|
|
|
+ let params = {
|
|
|
+ areaId: sessionStorage.getItem('areaId')
|
|
|
+ }
|
|
|
+ this.$api.ability.getResAndPolicy(params).then(
|
|
|
+ res => {
|
|
|
+ if (res.error == 404) {
|
|
|
+ this.$Message.warning('暂无数据')
|
|
|
+ } else if (res.error) {
|
|
|
+ this.$Message.error('查询失败')
|
|
|
+ } else if (!res.error && res.file) {
|
|
|
+ if (res.file.third) {
|
|
|
+ let d = res.file.third.find(item => item.tag == 'default')
|
|
|
+ this.platformList = d || this.platformList
|
|
|
+ }
|
|
|
+ this.fullData = res.file
|
|
|
+ }
|
|
|
+ },
|
|
|
+ err => {
|
|
|
+ this.$Message.error('查询失败')
|
|
|
+ }
|
|
|
+ )
|
|
|
+ },
|
|
|
+ confirmAdd() {
|
|
|
+ this.$refs['platform'].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.platformList.links.push(this._.cloneDeep(this.platform))
|
|
|
+ this.fullData.third = [this.platformList]
|
|
|
+ this.$api.ability.upsertResAndPolicy(this.fullData).then(
|
|
|
+ res => {
|
|
|
+ this.$Message.success('保存成功')
|
|
|
+ this.fullData = res.file
|
|
|
+ this.platformList = this.fullData.third.find(item => item.tag == 'default')
|
|
|
+ this.addStatus = false
|
|
|
+ },
|
|
|
+ err => {
|
|
|
+ this.$Message.error('保存失败')
|
|
|
+ }
|
|
|
+ )
|
|
|
+ } else {
|
|
|
+ this.$Message.error('请检查信息是否正确完整填写')
|
|
|
+ this.modalLoading = false
|
|
|
+ setTimeout(() => {
|
|
|
+ this.modalLoading = true
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ cancelAdd() {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.areaSas = this.$store.state.user.userProfile.osblob_sas
|
|
|
+ this.getAreaSource()
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ isArea() {
|
|
|
+ let areas = this.$store.state.user.userProfile.areas
|
|
|
+ let url = window.location.href
|
|
|
+ return !!areas.length && url.includes('area')
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.mgt-platform-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: #f3f3f3;
|
|
|
+}
|
|
|
+.add-platform-box {
|
|
|
+ height: 240px;
|
|
|
+ width: 300px;
|
|
|
+ background: #fcfcfc;
|
|
|
+ border: 1px solid #f0f0f0;
|
|
|
+ border-radius: 5px;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ margin-right: 30px;
|
|
|
+ // margin-top: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ text-align: center;
|
|
|
+ padding: 40px 10px;
|
|
|
+ &:hover {
|
|
|
+ box-shadow: 0 26px 40px -24px #aaa;
|
|
|
+ }
|
|
|
+}
|
|
|
+.platform-list-wrap {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.add-platform-icon {
|
|
|
+ font-size: 50px;
|
|
|
+ margin-top: 15px;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+.add-platform-text {
|
|
|
+ margin-top: 15px;
|
|
|
+}
|
|
|
+.add-platform {
|
|
|
+ text-align: center;
|
|
|
+ color: white;
|
|
|
+ background: #2d8cf0;
|
|
|
+ width: fit-content;
|
|
|
+ padding: 3px 12px;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin: auto;
|
|
|
+ margin-top: 15px;
|
|
|
+ cursor: pointer;
|
|
|
+ user-select: none;
|
|
|
+ &:hover {
|
|
|
+ background: #2b85e4;
|
|
|
+ }
|
|
|
+}
|
|
|
+.delete-platform-icon {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 99999;
|
|
|
+ right: -12px;
|
|
|
+ top: -10px;
|
|
|
+ display: block;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ text-align: center;
|
|
|
+ box-shadow: 0px 0px 2px 2px rgba(153, 177, 184, 0.2);
|
|
|
+ border-radius: 50%;
|
|
|
+ cursor: pointer;
|
|
|
+ display: none;
|
|
|
+ background: #ed4014;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+.poster-img {
|
|
|
+ width: 150px;
|
|
|
+}
|
|
|
+.upd-again {
|
|
|
+ color: #2db7f5;
|
|
|
+ font-size: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+.platform-item {
|
|
|
+ width: 300px;
|
|
|
+ height: 240px;
|
|
|
+ background: #fcfcfc;
|
|
|
+ border: 1px solid #f0f0f0;
|
|
|
+ border-radius: 5px;
|
|
|
+ // overflow: hidden;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ margin-right: 30px;
|
|
|
+ // margin-top: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ transition: all 0.2s ease 0s;
|
|
|
+ &:hover {
|
|
|
+ box-shadow: 0 26px 40px -24px #aaa;
|
|
|
+ .delete-platform-icon {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .platform-img {
|
|
|
+ transition: all 0.3s;
|
|
|
+ width: 300px;
|
|
|
+ height: 180px;
|
|
|
+ background-size: contain;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ }
|
|
|
+ .img-text {
|
|
|
+ background: white;
|
|
|
+ color: #303030;
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 15px 5px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="less">
|
|
|
+.mgt-platform-container .__view {
|
|
|
+ padding: 20px 30px;
|
|
|
+}
|
|
|
+</style>
|