Skip to content

M
member
Commit 7326d5d0 by caoyanzhi
Options

对接相册接口

parent a40843e0
Showing with 72 additions and 44 deletions
src/api/request.js
......@@ -23,7 +23,7 @@ request = axios.create({
request.interceptors.request.use(
config => {
config.params = {
requestProject: 'mall',
requestProject: 'member',
...config.params
};
......
src/components/photo-album/imgCard.vue
<template>
<div class="card-content">
<div v-if="tableData.length > 0">
<div class="card-item" :class="item.selectItem ? 'select-item' : ''" v-for="(item, index) in tableData" :key="item.id">
<span style="display:none">{{ refash }}{{ shuaxin }}</span>
<div :class="item.type === 'folder' ? 'folder-img' : 'img-box'" @click="selectItemClick(item)">
<div v-if="item.type === 'folder'" style="border:10px solid #fff;height:138px">
<img src="../../../static/img/folder_pic.png" alt="" @dblclick="openFolder(item)" />
<img v-if="item.img" :src="item.img" alt="" @dblclick="openFolder(item)" />
<img v-else src="../../../static/img/folder_pic.png" alt="" @dblclick="openFolder(item)" />
</div>
<img v-else :src="item.imgUrl" alt="" @dblclick="openImgDetail(item, index)" />
<img v-else :src="item.url" alt="" @dblclick="openImgDetail(item, index)" />
<!-- <div v-if="item.quoteStatus === 1 && item.type === 'image'" class="used-pic">引</div> -->
</div>
<div class="folder-name">
......@@ -33,6 +35,7 @@
</div>
</div>
</div>
</div>
<div class="no-data-wrap" style="text-align: center;" v-show="tableData.length === 0">
<div class="no-data-icon">
<img src="../../../static/img/no-data_icon.png" />
......@@ -46,7 +49,7 @@
<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="imgDetail.imgUrl" alt="" />
<img :src="imgDetail.url" alt="" />
</div>
</div>
<div class="img-detail-right">
......@@ -54,19 +57,19 @@
<div class="img-info">
<h3>图片属性</h3>
<div class="img-info-item">
<span>编辑时间：</span><span>{{ getTime(imgDetail.updateTime) }} {{ getSeconds(imgDetail.updateTime) }}</span>
<span>编辑时间：</span><span>{{ getTime(imgDetail.time) }} {{ getSeconds(imgDetail.time) }}</span>
</div>
<div class="img-info-item">
<span>图片大小：</span><span>{{ (imgDetail.size / 1024).toFixed(2) }}KB</span>
</div>
<div class="img-info-item">
<span>图片尺寸：</span><span>{{ imgDetail.width }}x{{ imgDetail.length }}</span>
<span>图片尺寸：</span><span>{{ imgDetail.size1 }}</span>
</div>
<div class="img-info-item">
<span>图片类型：</span><span>{{ imgDetail.imgType }}</span>
<span>图片类型：</span><span>{{ imgDetail.type }}</span>
</div>
<div class="img-info-item">
<span>添加人：</span><span>123</span>
<span>添加人：</span><span>{{imgDetail.shopper}}</span>
</div>
</div>
<!-- <div slot="footer" class="dialog-footer" style="position:absolute;right:15px;bottom:15px">
......
src/components/photo-album/imgSpaceList.vue
......@@ -2,7 +2,7 @@
<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' }">
<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">
......
src/components/photo-album/imgSpaceRight.vue
......@@ -8,7 +8,7 @@
<el-option label="未引用" :value="0"></el-option>
</el-select>
<div class="search-box">
<el-input v-model="searchParams" placeholder="请输入图片名称/相册名称" prefix-icon="el-icon-search" clearable class="w-260" @clear="getSearchImgList" @keyup.enter.native="getSearchImgList"> </el-input>
<el-input v-model.trim="searchParams" placeholder="请输入图片名称/相册名称" prefix-icon="el-icon-search" clearable class="w-260" @clear="getSearchImgList" @keyup.enter.native="getSearchImgList"> </el-input>
</div>
</div>
<div class="space-list-container">
......@@ -65,9 +65,9 @@
</div>
</div>
<div class="space-list-content">
<imgList v-if="activeIndex === '1'" :tableData="tableData" @deleteFile="deleteFile" @beforeDelete="beforeDelete" @moveFile="moveFile" :parentId="parentId" @getDbClick="getDbClick" @getImgList="getImgList" @getMatchName="getMatchName" @moveObj="moveObj"> </imgList>
<imgCard v-if="activeIndex === '2'" :shuaxin="shuaxin" :tableData="tableData" @deleteFile="deleteFile" @moveFile="moveFile" @getImgList="getImgList" @changeStatus="changeStatus" :parentId="parentId" @getDbClick="getDbClick" @getTree="getTree"> </imgCard>
<div class="pagination-conteiner" v-show="tableData.length > 0">
<imgList v-if="activeIndex === '1'" :tableData="tableData" @deleteFile="deleteFile" @beforeDelete="beforeDelete" @moveFile="moveFile" :parentId="parentId" @getDbClick="getImgs" @getImgList="getImgList" @getMatchName="getMatchName" @moveObj="moveObj"> </imgList>
<imgCard v-if="activeIndex === '2'" :shuaxin="shuaxin" :tableData="tableData" @deleteFile="deleteFile" @moveFile="moveFile" @getImgList="getImgList" @changeStatus="changeStatus" :parentId="parentId" @getDbClick="getImgs" @getTree="getTree"> </imgCard>
<div class="pagination-conteiner" v-if="false">
<div class="pagination">
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next" :total="total"> </el-pagination>
</div>
......@@ -134,6 +134,15 @@ import '@riophae/vue-treeselect/dist/vue-treeselect.css';
export default {
data() {
return {
api: {
// 获取用户所有相册
getOneMemberAlbum: '/api-member/getOneMemberAlbum',
// 获取相册中的图片
getOneAlbumPhotoById: '/api-member/getOneAlbumPhotoById',
// 查询图片或者相册
findImgOrAlbumByCondition: '/api-member/findImgOrAlbumByCondition'
},
memberId: '',
mallHeight: document.documentElement.clientHeight - 64 - 98,
quoteStatus: '', //图片引用状态0未引用，1引用
searchParams: '', //搜索关键字
......@@ -195,6 +204,7 @@ export default {
},
created() {
// this.getImgList()//获取
this.memberId = this.$route.query.memberId || '';
},
computed: {},
......@@ -228,40 +238,55 @@ export default {
this.currentPage = 1;
this.getImgList();
},
// 双击文件夹事件
getDbClick(id) {
this.parentId = id;
this.searchParams = '';
this.currentPage = 1;
this.getImgList();
},
//获取列表事件
getImgList() {
let params = {
currentPage: this.currentPage,
pageSize: this.pageSize,
sortType: this.sortType,
parentId: this.parentId ? this.parentId : '', //父组件传递来的
searchParams: this.searchParams.trim(),
quoteStatus: this.quoteStatus
};
request.get('/api-mall/gic-cloud-image-list', { params }).then(res => {
if (res.data.errorCode === 0) {
if (res.data.result.result) {
this.tableData = res.data.result.result;
this.total = res.data.result.totalCount;
} else {
this.tableData = [];
}
} else {
this.$message.error(res.data.message);
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.tableData = data.map(item => {
item.type = 'folder';
return item;
});
});
},
getImgs(id) {
request.get(`${this.api.getOneAlbumPhotoById}/${id}`).then(res => {
let { code, message, data } = res.data;
data = data || [];
if (code !== 200) {
this.$message.error(message);
return;
}
this.tableData = data.map(item => {
return JSON.parse(item.details);
});
})
},
// 搜索关键字
getSearchImgList() {
this.currentPage = 1;
this.getImgList();
request.get(`${this.api.findImgOrAlbumByCondition}?mid=${this.memberId}&confition=${this.searchParams}`).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 || [];
album = album.map(item => {
item.type = 'folder';
return item;
})
photo = photo.map(item => {
return JSON.parse(item.details);
})
this.tableData = album.concat(photo);
})
},
// 分页
handleSizeChange(size) {
......
src/components/wechatmembers/wechatTotalDetail.vue
......@@ -15,7 +15,7 @@
<div class="maskOperation">
<span @click="updateImgUrl"><i class="iconfont icon-shuaxin iconCommon"></i>刷新头像</span>
<span>|</span>
<span><router-link to="/photo-album"><i class="iconfont icon-xiangce iconCommon"></i>会员相册</router-link></span>
<span><router-link :to="`/photo-album?memberId=${memberId}`"><i class="iconfont icon-xiangce iconCommon"></i>会员相册</router-link></span>
</div>
<img width="202px" height="202px" v-if="memberInfo.thirdImgUrl" class="wechat-portraitimg" :src="memberInfo.thirdImgUrl ? memberInfo.thirdImgUrl : storeImageUrl" alt="">
</div>
......@@ -89,7 +89,7 @@
<p><span class="label-span">协管门店</span>
<el-tooltip placement="bottom" v-if="memberbaseinfo.shopNames">
<div slot="content" style="max-width: 300px">
<div v-if="memberbaseinfo.shopNames" v-for="(item, index) in memberbaseinfo.shopNames" :key="index">{{ item.storeName }}</div>
<div v-for="(item, index) in memberbaseinfo.shopNames" :key="index"><span v-if="memberbaseinfo.shopNames">{{ item.storeName }}</span></div>
</div>
<span class="ml15 color555">
<span class="shop-name">{{ memberbaseinfo.shopNames ? memberbaseinfo.shopNames[0].storeName : ''}}</span>
......
src/components/wechatmembers/wechatmemberDetail.vue
......@@ -15,7 +15,7 @@
<div class="maskOperation">
<span @click="updateImgUrl"><i class="iconfont icon-shuaxin iconCommon"></i>刷新头像</span>
<span>|</span>
<span><router-link to="photo-album"><i class="iconfont icon-xiangce iconCommon"></i>会员相册</router-link></span>
<span><router-link :to="`/photo-album?memberId=${memberId}`"><i class="iconfont icon-xiangce iconCommon"></i>会员相册</router-link></span>
</div>
<img width="202px" height="202px" v-if="memberInfo.thirdImgUrl" class="wechat-portraitimg" :src="memberInfo.thirdImgUrl ? memberInfo.thirdImgUrl : storeImageUrl" alt="">
</div>
......@@ -90,7 +90,7 @@
<p><span class="label-span">协管门店</span>
<el-tooltip placement="bottom" v-if="memberbaseinfo.shopNames">
<div slot="content" style="max-width: 300px">
<div v-if="memberbaseinfo.shopNames" v-for="(item, index) in memberbaseinfo.shopNames" :key="index">{{ item.storeName }}</div>
<div v-for="(item, index) in memberbaseinfo.shopNames" :key="index"><span v-if="memberbaseinfo.shopNames">{{ item.storeName }}</span></div>
</div>
<span class="ml15 color555">
<span class="shop-name">{{ memberbaseinfo.shopNames ? memberbaseinfo.shopNames[0].storeName : ''}}</span>
......
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