Skip to content

M
member
Commit 8c67f967 by caoyanzhi
Options

调整会员相册

parent 65de498a
Showing with 585 additions and 300 deletions
src/components/photo-album/album.vue 0 → 100644
<template>
<div class="page-content">
<v-nav :navpath="navpath"></v-nav>
<photo-album :member-id="memberId" :from="from"/>
<vue-gic-footer style="padding-bottom:80px"></vue-gic-footer>
</div>
</template>
<script>
import vNav from '@/common/navbar/navbar.vue';
import photoAlbum from './photo-album.vue';
export default {
name: 'album',
components: {
vNav,
photoAlbum
},
data () {
return {
navpath: [
{
name: '首页',
path: ''
},
{
name: '会员详情',
path: ''
},
{
name: "相册",
path: ''
}
],
memberId: '',
from: ''
}
},
created() {
let from = this.$route.query.from;
let memberId = this.$route.query.memberId;
this.memberId = memberId;
this.from = from;
switch (from) {
case '0':
// 微信会员
this.navpath[1] = {
name: '会员详情',
path: `/wechatmemberDetail?memberId=${memberId}`
}
break;
case '1':
// 微信总量
this.navpath[1] = {
name: '会员详情',
path: `/wechatTotalDetail?memberId=${memberId}`
}
break
default:
this.navpath.splice(1, 1);
}
}
}
</script>
<style lang="scss" scoped>
.page-content {
min-width: 1400px;
}
</style>
src/components/photo-album/folder-item.vue 0 → 100644
<template>
<div class="folder">
<div class="folder-icon">
<img v-if="folder.img" :src="folder.img" alt=""/>
<img v-else src="../../../static/img/folder_pic.png" alt=""/>
</div>
<p class="folder-name">{{ folder.name }}</p>
</div>
</template>
<script>
export default {
name: 'folder-item',
props: {
folder: Object
}
}
</script>
<style lang="scss" scoped>
.folder {
width: 160px;
margin-right: 10px;
margin-bottom: 15px;
border-radius: 2px;
border: 1px solid #e4e7ed;
.folder-icon {
display: flex;
justify-content: center;
align-items: center;
width: 138px;
height: 138px;
border: 10px solid #fff;
background-color: #f5f5f8;
img {
vertical-align: middle;
width: 80px;
height: 80px;
}
}
.folder-name {
margin: 0;
width: 100%;
height: 37px;
font-size: 14px;
line-height: 37px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&:hover .folder-name {
background-color: #f0f2f5;
}
}
</style>
src/components/photo-album/img-item.vue 0 → 100644
<template>
<div>
<div class="image" @dblclick="show = true">
<img :src="img.url" alt="">
<p class="image-name">{{img.name}}</p>
</div>
<el-dialog title="图片详情" :visible.sync="show" width="900px" class="img-dialog" @closed="onClosed">
<div class="img-detail-content">
<div class="img-detail-left">
<i class="el-icon-arrow-left" @click="lastImg"></i>
<i class="el-icon-arrow-right" @click="nextImg"></i>
<div class="big-img-box">
<img :src="img.url" alt="" />
</div>
</div>
<div class="img-detail-right">
<h2>{{ img.name }}</h2>
<div class="img-info">
<h3>图片属性</h3>
<div class="img-info-item">
<span>编辑时间：</span><span>{{ img.time | formatDate }} {{ img.time | formatTime }}</span>
</div>
<div class="img-info-item">
<span>图片大小：</span><span>{{ (img.size / 1024).toFixed(2) }}KB</span>
</div>
<div class="img-info-item">
<span>图片尺寸：</span><span>{{ img.size1 }}</span>
</div>
<div class="img-info-item">
<span>图片类型：</span><span>{{ img.type }}</span>
</div>
<div class="img-info-item">
<span>添加人：</span><span>{{img.shopper}}</span>
</div>
</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'img-item',
props: {
img: Object,
imgList: Array,
index: Number,
},
data() {
return {
show: false,
currentIndex: 0,
imgDetail: {}
}
},
filters: {
formatDate(ms) {
let date = new Date(ms);
let dateArr = [];
dateArr.push(date.getFullYear());
dateArr.push(date.getMonth() + 1);
dateArr.push(date.getDate());
dateArr = dateArr.map(item => (item < 10 ? `0${item}` : item));
return dateArr.join('-');
},
formatTime(ms) {
let date = new Date(ms);
let timeArr = [];
timeArr.push(date.getHours());
timeArr.push(date.getMinutes());
timeArr.push(date.getSeconds());
timeArr = timeArr.map(item => (item < 10 ? `${item}` : item));
return timeArr.join(':');
}
},
created() {
this.currentIndex = this.index;
},
methods: {
// 上一张
lastImg() {
if (this.currentIndex === 0) {
this.$message.error('已经是当前页的第一张了');
return false;
}
this.currentIndex--;
this.imgDetail = Object.assign({}, this.imgList[this.currentIndex]);
},
//下一张
nextImg() {
if (this.currentIndex === this.imgList.length - 1) {
this.$message.error('已经是当前页的最后一张了');
return false;
}
this.currentIndex++;
this.imgDetail = Object.assign({}, this.imgList[this.currentIndex]);
},
onClosed() {
this.currentIndex = this.index;
}
}
}
</script>
<style lang="scss" scoped>
.image {
margin-right: 10px;
margin-bottom: 15px;
width: 160px;
cursor: pointer;
border: 1px solid #e4e7ed;
img {
vertical-align: middle;
width: 158px;
height: 158px;
}
.image-name {
margin: 0;
width: 100%;
height: 37px;
font-size: 14px;
text-align: center;
line-height: 37px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&:hover .image-name {
background-color: #f0f2f5;
}
}
/deep/.img-dialog .el-dialog__body {
padding: 0px;
}
.img-detail-content {
font-size: 0;
border-top: 1px solid #e4e7eb;
}
.img-detail-left {
width: 640px;
display: inline-block;
background: #fff;
position: relative;
height: 610px;
font-size: 14px;
}
.big-img-box {
width: 348px;
height: 492px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.big-img-box img {
max-width: 100%;
height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.el-icon-arrow-left {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
.el-icon-arrow-right {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
.img-detail-right {
display: inline-block;
background: #f5f7fa;
width: 260px;
height: 612px;
vertical-align: top;
position: relative;
font-size: 14px;
}
.img-detail-right h2 {
font-size: 18px;
margin: 25px 15px 60px 15px;
word-break: break-all;
}
.img-info {
padding-left: 15px;
}
.img-info h3 {
font-size: 15px;
padding-bottom: 12px;
border-bottom: 1px dashed #c0c4cc;
margin-bottom: 8px;
}
.img-info-item {
padding: 6px 0;
}
</style>
src/components/photo-album/img-list.vue 0 → 100644
<template>
<div class="page-content">
<v-nav :navpath="navpath"></v-nav>
<photo-album :member-id="memberId" :folder-id="folderId"/>
<vue-gic-footer style="padding-bottom:80px"></vue-gic-footer>
</div>
</template>
<script>
import vNav from '@/common/navbar/navbar.vue';
import photoAlbum from './photo-album.vue';
import request from '@/api/request.js';
export default {
name: 'img-list',
components: {
vNav,
photoAlbum
},
data() {
return {
api: {
// 获取用户所有相册
getOneMemberAlbum: '/api-member/getOneMemberAlbum'
},
navpath: [
{
name: '首页',
path: ''
},
{
name: '会员详情',
path: ''
},
{
name: "相册",
path: ''
}
],
from: '',
memberId: '',
folderId: ''
}
},
async created() {
let from = this.$route.query.from;
let memberId = this.$route.query.memberId;
let folderId = this.$route.query.folderId;
this.from = from;
this.memberId = memberId;
this.folderId = folderId;
await this.getImgList()
let folder = this.folderData.filter(item => item.id === folderId);
this.navpath[2] = {
name: "相册",
path: `/photo-album?memberId=${memberId}&from=${from}`
}
if (folder.length > 0) {
this.navpath.push({
name: folder[0].name,
path: ''
})
}
switch (from) {
case '0':
// 微信会员
this.navpath[1] = {
name: '会员详情',
path: `/wechatmemberDetail?memberId=${memberId}`
}
break;
case '1':
// 微信总量
this.navpath[1] = {
name: '会员详情',
path: `/wechatTotalDetail?memberId=${memberId}`
}
break
default:
this.navpath.splice(1, 1);
}
},
methods: {
getImgList() {
return request.get(`${this.api.getOneMemberAlbum}/${this.memberId}`).then(res => {
let { code, message, data } = res.data;
data = data || [];
if (code !== 200) {
this.$message.error(message);
return;
}
this.folderData = data.slice();
});
}
}
}
</script>
<style lang="scss" scoped>
.page-content {
min-width: 1400px;
}
.mall-section-container {
position: relative;
padding: 22px 24px 24px;
margin: 24px;
min-height: calc(100vh - 427px);
background: #fff;
}
</style>
src/components/photo-album/imgDetailModal.vue deleted 100644 → 0
<template>
<!-- 调整库存弹框 -->
<el-dialog title="调整库存" :visible.sync="stockModalData.modalShow" :width="(stockModalData.modalWidth+40)+'px'" @close="cancelStockModal">
</el-dialog>
</template>
<script>
import qs from 'qs';
import request from '../../api/request.js'
import common from '../../../static/js/common.js';
export default {
props:{
tableSkuHeaderData:{
type:Array,
},
stockModalData:{
type:Object,
}
},
data() {
return {
}
},
mounted(){
},
created(){
},
methods: {
}
}
</script>
src/components/photo-album/imgSpace.vue deleted 100644 → 0
<template>
<div class="container">
<vue-gic-header :projectName="projectName" :collapseFlag="collapseFlag" @collapseTag="collapseTag" @toRouterView="toRouterView"></vue-gic-header>
<div class="mall-content-container">
<div class="goods-manege-content">
<!-- 右侧页面部分 start-->
<router-view> </router-view>
<!-- 右侧页面部分 end-->
<!-- <vue-gic-footer></vue-gic-footer> -->
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
collapseFlag: false, // 折叠参数
menuRouter: [], // 路由菜单
leftMenuRouter: [],
leftModulesName: '微商城',
projectName: 'mall'
};
},
computed: {},
methods: {
// 处理路由跳转
toRouterView(val) {
var that = this;
that.$router.push({
path: val.path
});
},
// 折叠事件
collapseTag(val) {
var that = this;
that.collapseFlag = val;
if (that.collapseFlag) {
that.widthData = '64px';
} else {
that.widthData = '200px';
}
}
},
components: {}
};
</script>
<style scoped>
.container {
height: 100%;
}
.mall-section {
margin: 24px;
background: #fff;
padding: 24px;
}
.mall-content-container {
padding-top: 64px;
height: 100%;
overflow-y: auto;
}
.goods-manege-content {
height: 100%;
}
</style>
src/components/photo-album/imgSpaceList.vue deleted 100644 → 0
<template>
<div class="page-content">
<v-nav :navpath="navpath"></v-nav>
<div class="mall-section-container" :style="{ minHeight: mallHeight + 'px' }">
<div class="img-left-content" :style="{ height: mallHeight + 'px' }" v-if="false">
<div class="img-left">
<div class="img-lef-title">相册目录</div>
<div class="img-tree-content">
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" node-key="id" :expand-on-click-node="clickNodeExpand" :setCurrentKey="parentId"></el-tree>
</div>
</div>
</div>
<div class="img-right-content">
<div class="img-right">
<imgSpaceRight :parentId="parentId" ref="childEvent" @getFileData="getFileData" @getTree="getTree"></imgSpaceRight>
<!-- 右侧页面部分 end-->
</div>
</div>
</div>
<vue-gic-footer style="padding-bottom:80px"></vue-gic-footer>
</div>
</template>
<script>
import nav from "../../common/navbar/navbar.vue";
import request from '../../api/request.js';
import imgSpaceRight from './imgSpaceRight.vue';
export default {
data() {
return {
navpath: [
{
name: "首页",
path: ""
},
// {
// name: '微信总量',
// path: "/wechatmembers"
// },
{
name: "相册",
path: ""
}
],
mallHeight: document.documentElement.clientHeight - 64 - 98 - 149,
parentId: '', //点击的节点id
highlightCurrent: true, //是否高亮
data: [],
defaultProps: {
children: 'chlidren',
label: 'name'
},
clickNodeExpand: false //点击节点不收缩起节点
};
},
created() {
this.getFileDataFirst(); //左侧文件下拉树数据
},
computed: {},
methods: {
// 点击节点事件
handleNodeClick(data) {
this.parentId = data.id;
//点击父组件的
this.$refs.childEvent.getParentId(data.id);
this.$refs.childEvent.cancelCheckAll();
},
// 首次获取左侧下拉文件夹数据
getFileDataFirst() {
request.get('/api-mall/gic-cloud-image-group-list').then(res => {
if (res.data.errorCode === 0) {
this.data = res.data.result;
this.parentId = res.data.result[0].id;
this.$refs.childEvent.getParentId(this.parentId);
} else {
this.$message.error(res.data.message);
}
});
},
//非首次
getFileData() {
request.get('/api-mall/gic-cloud-image-group-list').then(res => {
if (res.data.errorCode === 0) {
this.data = res.data.result;
} else {
this.$message.error(res.data.message);
}
});
},
getTree() {
this.getFileData();
}
},
components: {
imgSpaceRight,
vNav: nav
}
};
</script>
<style>
.mall-content-title {
height: 85px;
background: #fff;
border-bottom: 1px solid #e4e7ed;
padding: 15px 0 0 25px;
}
.mall-content-title h3 {
color: #303133;
font-size: 20px;
padding: 20px 0;
font-weight: 500;
}
.mall-content-title h3 span {
color: #303133;
font-size: 20px;
font-weight: 500;
}
.img-tree-content .el-tree-node__label {
width: 120px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.img-tree-content .el-tree-node__content {
height: 32px;
}
/* .img-tree-content .el-tree{
padding-bottom:15px;
}*/
/*.img-tree-content .el-tree-node > .el-tree-node__children{
overflow: visible!important;
}
.img-tree-content .el-tree-node > .el-tree-node__children{
overflow: visible!important;
box-sizing: border-box;
}*/
/*.img-tree-content .el-tree-node__content{
width:100%;
}*/
/*.img-tree-content .el-tree-node__content:hover{
background:rgba(24, 144, 255, 0.10);
}*/
.img-tree-content .el-tree-node.is-current > .el-tree-node__content {
color: rgb(24, 144, 255);
}
</style>
<style scoped>
.page-content {
min-width: 1400px;
overflow-x: auto;
}
/*左侧*/
.img-tree-content {
width: 200px;
box-sizing: border-box;
}
.img-left-content {
width: 200px;
border-right: 1px solid rgba(231, 231, 235, 1);
overflow-y: auto;
overflow-x: hidden;
}
.img-left {
width: 200px;
background: #fff;
height: 100%;
width: 100%;
}
.img-lef-title {
height: 44px;
line-height: 44px;
padding-left: 15px;
border-bottom: 1px solid rgba(231, 231, 235, 1);
}
.mall-section-container {
display: flex;
background: #fff;
margin: 24px;
/*flex-flow: row;*/
}
/*树结构*/
.img-right-content {
height: 100%;
flex: 1;
min-width: 1200px;
overflow-x: auto;
}
.img-right {
overflow-x: auto;
min-width: 1200px;
}
</style>
src/components/photo-album/photo-album.vue 0 → 100644
<template>
<div class="mall-section-container">
<el-input
placeholder="请输入图片名称/相册名称"
style="width: 260px"
v-model.trim="search"
prefix-icon="el-icon-search"
clearable
@clear="getSearchImgList"
@keyup.enter.native="getSearchImgList"
/>
<div class="folder-list" v-if="folderData.length > 0 || imgData.length > 0">
<template v-if="folderData.length > 0">
<router-link
:to="`/img-list?memberId=${memberId}&folderId=${item.id}&from=${from}`"
v-for="item in folderData"
:key="item.id"
>
<folder-item :folder="item" />
</router-link>
</template>
<template v-if="imgData.length > 0">
<img-item
v-for="(item, index) in imgData"
:key="item.url"
:img="item"
:index="index"
:img-list="imgData"
/>
</template>
</div>
<div class="no-data-wrap" v-else>
<img src="../../../static/img/no-data_icon.png" />
<p style="color:#909399;font-size:14px">暂无数据</p>
</div>
</div>
</template>
<script>
import request from '@/api/request.js';
import folderItem from './folder-item.vue';
import imgItem from './img-item.vue';
export default {
name: 'photo-album',
props: {
memberId: String,
folderId: String,
from: String
},
components: {
folderItem,
imgItem
},
data () {
return {
api: {
// 获取用户所有相册
getOneMemberAlbum: '/api-member/getOneMemberAlbum',
// 获取相册中的图片
getOneAlbumPhotoById: '/api-member/getOneAlbumPhotoById',
// 查询图片或者相册
findImgOrAlbumByCondition: '/api-member/findImgOrAlbumByCondition'
},
search: '',
memberId: '',
from: '',
folderData: [],
imgData: []
}
},
created() {
if (this.folderId) {
this.getImgs();
} else {
this.getImgList();
}
},
methods: {
getImgList() {
request.get(`${this.api.getOneMemberAlbum}/${this.memberId}`).then(res => {
let { code, message, data } = res.data;
data = data || [];
if (code !== 200) {
this.$message.error(message);
return;
}
this.folderData = data.slice();
});
},
getImgs() {
request.get(`${this.api.getOneAlbumPhotoById}/${this.folderId}`).then(res => {
let { code, message, data } = res.data;
data = data || [];
if (code !== 200) {
this.$message.error(message);
return;
}
this.imgData = data.map(item => {
return JSON.parse(item.details);
});
})
},
getSearchImgList() {
request.get(`${this.api.findImgOrAlbumByCondition}?mid=${this.memberId}&confition=${this.search}`).then(res => {
let { code, message, data } = res.data;
data = data || {};
if (code !== 200) {
this.$message.error(message);
return;
}
let { album, photo } = data;
album = album || [];
photo = photo || [];
this.folderData = album.slice();
this.imgData = photo.map(item => {
return JSON.parse(item.details);
})
})
}
}
}
</script>
<style lang="scss" scoped>
.mall-section-container {
position: relative;
padding: 22px 24px 24px;
margin: 24px;
min-height: calc(100vh - 427px);
background: #fff;
.folder-list {
margin-top: 22px;
display: flex;
flex-wrap: wrap;
}
.no-data-wrap {
position: absolute;
top: 45%;
left: 50%;
z-index: 1;
transform: translate(-50%, -50%);
text-align: center;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment