567 lines
15 KiB
Vue
567 lines
15 KiB
Vue
<template>
|
|
<view class="configuration-box">
|
|
<view class="device-search">
|
|
<u-dropdown active-color="#1b85e9">
|
|
<u-dropdown-item v-model="dataType" title="组态类型" :options="typeOptions" @change="searchChange"></u-dropdown-item>
|
|
</u-dropdown>
|
|
<u-search placeholder="请输入组态名称搜索" margin="0 10rpx" class="uni-search-bar" v-model="searchVal" @custom="searchChange" @clear="searchChange" @search="searchChange"></u-search>
|
|
</view>
|
|
<mescroll-body ref="mescrollRef" top="160" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
|
|
<view class="configuration-list">
|
|
<view class="configuration-item" v-for="(item,index) in configurationList" :key="index" @click.stop="goDetail(item)">
|
|
<view class="item-img-box">
|
|
<image :src="item.iconPath" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="item-content">
|
|
<view class="content-left">
|
|
<view class="content-top">
|
|
<text class="content-name">{{item.sceneName}}</text>
|
|
</view>
|
|
<view class="content-time">{{item.createdAt}}</view>
|
|
<!-- <view class="content-bottom">
|
|
<view class="content-btn-box" @click.stop="clickShare(index)">
|
|
<u-icon name="zhuanfa" color="#a5a4a5" size="42"></u-icon>
|
|
</view>
|
|
<text @click.stop="clickShare(index)">分享</text>
|
|
</view> -->
|
|
<view class="content-btn-box">
|
|
<button type="primary">预览</button>
|
|
<button type="primary" @click.stop="clickShare(index)">分享</button>
|
|
</view>
|
|
</view>
|
|
<!-- <u-icon name="arrow-right" color="#a5a4a5" size="42"></u-icon> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</mescroll-body>
|
|
<!-- 分享弹框 -->
|
|
<u-popup v-model="shareShow" width="600" border-radius="10" class="share-popup" mode="center">
|
|
<view class="title">
|
|
请选择分享方式
|
|
</view>
|
|
<view class="popup-box">
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<view class="box-item" @click="shareFriend">
|
|
<button type="default" plain="true" open-type="share">
|
|
<view class="icon-bg" style="background-color: #44a941;">
|
|
<u-icon name="weixin-fill" color="#fff" size="28"></u-icon>
|
|
</view>
|
|
</button>
|
|
<text>分享小程序</text>
|
|
</view>
|
|
<!-- #endif -->
|
|
<!-- #ifdef APP-PLUS -->
|
|
<!-- #endif -->
|
|
<view class="box-item" @click="goShareList">
|
|
<button type="default" plain="true">
|
|
<view class="icon-bg" style="background-color: #f36038;">
|
|
<u-icon name="attach" color="#fff" size="28"></u-icon>
|
|
</view>
|
|
</button>
|
|
<text>分享链接</text>
|
|
</view>
|
|
</view>
|
|
<view class="cancel-share" @click="cancelShare">
|
|
取消分享
|
|
</view>
|
|
</u-popup>
|
|
|
|
<!-- 生成海报 -->
|
|
<hch-poster ref="hchPoster" @cancel="handleCancel" :posterData.sync="posterData" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
let typeOptions=[
|
|
{
|
|
label: '全部',
|
|
value: '',
|
|
},
|
|
{
|
|
label: '2D',
|
|
value: '2d',
|
|
},
|
|
{
|
|
label: '3D',
|
|
value: '3d',
|
|
},
|
|
{
|
|
label: 'GIS',
|
|
value: 'gis',
|
|
}
|
|
]
|
|
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
|
|
import HchPoster from "@/components/hch-poster/hch-poster.vue"
|
|
export default{
|
|
mixins: [MescrollMixin],
|
|
data(){
|
|
return {
|
|
expire:0,
|
|
token:'',
|
|
// 所属项目名称
|
|
projectName:1,
|
|
typeOptions:typeOptions,
|
|
configurationList:[],
|
|
dataType:'',
|
|
searchVal:'',
|
|
upOption:{
|
|
noMoreSize: 4,
|
|
textNoMore: '---- 已经到底啦 ----',
|
|
empty:{
|
|
tip: '~ 搜索无数据 ~' // 提示
|
|
}
|
|
},
|
|
|
|
shareShow:false,
|
|
shareIndex:null, //当前点击分享的索引
|
|
shareToken:'',
|
|
filePrefix:'',
|
|
// 海报模板数据
|
|
posterData: {
|
|
poster: {
|
|
//根据屏幕大小自动生成海报背景大小
|
|
url: "https://am-img.gkiiot.com/iotos/app/img/configuration/white-bg.png",//图片地址
|
|
r: 10, //圆角半径
|
|
w: 300, //海报宽度
|
|
h: 480, //海报高度
|
|
p: 20 //海报内边距padding
|
|
},
|
|
mainImg: {
|
|
//海报主商品图
|
|
url: "https://am-img.gkiiot.com/iotos/app/img/configuration/white-bg.png",//图片地址
|
|
r: 10, //圆角半径
|
|
w: 250, //宽度
|
|
h: 200 //高度
|
|
},
|
|
title: {
|
|
//商品标题
|
|
text: "标题",//文本
|
|
fontSize: 16, //字体大小
|
|
color: "#000", //颜色
|
|
lineHeight: 25, //行高
|
|
mt: 20 //margin-top
|
|
},
|
|
codeImg: {
|
|
//小程序码
|
|
url: "https://am-img.gkiiot.com/iotos/app/img/configuration/white-bg.png",//图片地址
|
|
w: 100, //宽度
|
|
h: 100, //高度
|
|
mt: 20, //margin-top
|
|
r: 50 //圆角半径
|
|
},
|
|
tips: [
|
|
//提示信息
|
|
{
|
|
text: "小程序码",//文本
|
|
fontSize: 14,//字体大小
|
|
color: "#2f1709",//字体颜色
|
|
align: "center",//对齐方式
|
|
lineHeight: 25,//行高
|
|
mt: 20//margin-top
|
|
},
|
|
{
|
|
text: "长按/扫描识别查看",//文本
|
|
fontSize: 12,//字体大小
|
|
color: "#2f1709",//字体颜色
|
|
align: "center",//对齐方式
|
|
lineHeight: 25,//行高
|
|
mt: 20//margin-top
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
components:{
|
|
HchPoster
|
|
},
|
|
onShareAppMessage(res) {
|
|
if (res.from === 'button') {// 来自页面内分享按钮
|
|
console.log(res.target)
|
|
return this.$u.mpShare
|
|
}
|
|
},
|
|
// #ifdef MP-WEIXIN
|
|
onShareTimeline() {
|
|
return this.$u.mpShare
|
|
},
|
|
// #endif
|
|
onLoad() {
|
|
this.getToken();
|
|
this.$u.mpShare = {
|
|
title: '', // 默认为小程序名称
|
|
path: '', // 默认为当前页面路径
|
|
imageUrl: '' // 默认为当前页面的截图
|
|
}
|
|
this.getFilePrefix();
|
|
this.configurationList=[];
|
|
this.pageNum=1;
|
|
// this.getConfigurationList();
|
|
},
|
|
methods:{
|
|
// 获取token和有效期
|
|
getToken(){
|
|
uni.getStorage({
|
|
key:'token',
|
|
}).then(res => {
|
|
// 如果返回数组为两位就是正确
|
|
if(res.length==2){
|
|
this.token = res[1].data;
|
|
}
|
|
return uni.getStorage({
|
|
key:'expire',
|
|
})
|
|
}).then(res => {
|
|
if(res.length==2){
|
|
this.expire = res[1].data;
|
|
}
|
|
})
|
|
},
|
|
getFilePrefix(){
|
|
let configList = uni.getStorageSync('configList');
|
|
let configIndex = uni.getStorageSync('configIndex');
|
|
if(!configList || configIndex==-1){
|
|
uni.showToast({
|
|
title: '请求域名为空，请先添加',
|
|
icon: 'none',
|
|
duration: 1500
|
|
})
|
|
setTimeout(()=>{
|
|
uni.navigateTo({
|
|
url:'/pages/tabbar/config'
|
|
})
|
|
},1500)
|
|
}else{
|
|
this.filePrefix = configList[configIndex].protocol + configList[configIndex].address;
|
|
}
|
|
},
|
|
searchChange(e) {
|
|
this.configurationList = []// 先置空列表,显示加载进度
|
|
this.mescroll.resetUpScroll() // 再刷新列表数据
|
|
},
|
|
// 获取产品列表
|
|
upCallback(page){
|
|
let params = {
|
|
page: page.num,
|
|
pageSize: page.size,
|
|
dataType:this.dataType,
|
|
"Wheres": {
|
|
"wheres": [
|
|
{"fields": ["sceneName"],"operator": "keyword","value": this.searchVal}
|
|
]
|
|
},
|
|
}
|
|
this.$api.configurationApi.getConfigurationListData(params).then(res => {
|
|
if(res.code === 0){
|
|
let curPageData = res.data && res.data.list;
|
|
let curPageLen = curPageData && curPageData.length || 0;
|
|
let totalSize = res.data.totalCount;
|
|
this.$nextTick(()=>{
|
|
// 隐藏下拉刷新和上拉加载的状态;
|
|
this.mescroll.endBySize(curPageLen, totalSize);
|
|
})
|
|
//设置列表数据
|
|
if(page.num == 1) this.configurationList = []; //如果是第一页需手动制空列表
|
|
let data = curPageData.map(item=>{
|
|
if(!item.iconImage || item.iconImage == ''){
|
|
item.iconPath = 'https://am-img.gkiiot.com/iotos/app/img/configuration/default.jpg'
|
|
}else{
|
|
item.iconPath = this.filePrefix + item.iconImage
|
|
}
|
|
item.url = this.filePrefix + '/console/' + item.dataType + '/preview?sceneId=' + item.uuid;
|
|
return item;
|
|
})
|
|
|
|
this.configurationList = curPageLen > 0 && this.configurationList.concat(data); //追加新数据
|
|
this.total = totalSize;
|
|
}else{
|
|
this.$u.toast(res.msg);
|
|
this.mescroll.endErr();
|
|
}
|
|
}, error => {
|
|
this.$u.toast('服务器开小差了呢，请您稍后再试')
|
|
})
|
|
},
|
|
// 点击分享
|
|
clickShare(index){
|
|
console.log("点击分享",index)
|
|
// #ifdef MP-WEIXIN
|
|
this.shareShow = true;
|
|
this.shareIndex = index;
|
|
// #endif
|
|
// #ifndef MP-WEIXIN
|
|
uni.navigateTo({
|
|
url:'./configuration-share?uuid=' + this.configurationList[index].uuid + '&name=' + this.configurationList[index].sceneName + '&imgPath=' + encodeURIComponent(this.configurationList[index].iconPath)
|
|
})
|
|
// #endif
|
|
// this.$u.toast('功能开发中');
|
|
// console.log(this.configurationList[index])
|
|
// this.shareShow = true;
|
|
// this.shareIndex = index;
|
|
},
|
|
// 跳转分享列表
|
|
goShareList(){
|
|
uni.navigateTo({
|
|
url:'./configuration-share?uuid=' + this.configurationList[this.shareIndex].uuid + '&name=' + this.configurationList[this.shareIndex].sceneName + '&imgPath=' + encodeURIComponent(this.configurationList[this.shareIndex].iconPath)
|
|
})
|
|
},
|
|
// 分享给好友(小程序)
|
|
shareFriend(){
|
|
let obj = this.configurationList[this.shareIndex];
|
|
let url = obj.url + '&expires=' + this.expire + '&token=' + this.token;
|
|
this.$u.mpShare = {
|
|
title: obj.sceneName, // 默认为小程序名称
|
|
path: '/pages/configuration/configuration-detail?name=' + encodeURIComponent(obj.sceneName) + '&url=' + encodeURIComponent(url), // 默认为当前页面路径
|
|
imageUrl: obj.iconPath // 默认为当前页面的截图
|
|
}
|
|
},
|
|
// 分享给好友(app)
|
|
appShareFriend(){
|
|
let obj = this.configurationList[this.shareIndex];
|
|
uni.share({
|
|
provider: 'weixin',
|
|
scene: "WXSceneSession",
|
|
type: 5,
|
|
imageUrl: this.filePrefix+obj.iconPath,
|
|
title: obj.name,
|
|
miniProgram: {
|
|
id: 'gh_74c767462f0a',
|
|
path: '/pages/hcwl/configuration/configuration-detail?name=' + encodeURIComponent(obj.name) + '&url=' + encodeURIComponent(obj.url),
|
|
type: 0,
|
|
webUrl: '/pages/hcwl/configuration/configuration-detail?name=' + encodeURIComponent(obj.name) + '&url=' + encodeURIComponent(obj.url)
|
|
},
|
|
success: (res) => {
|
|
this.$u.toast('分享成功',res);
|
|
},
|
|
fail: (e) => {
|
|
this.$u.toast('分享失败',e);
|
|
},
|
|
complete:(e) => {
|
|
console.log('分享操作结束!')
|
|
}
|
|
});
|
|
},
|
|
// 获取小程序码
|
|
getQrCode(){
|
|
let obj = this.configurationList[this.shareIndex];
|
|
console.log("当前点击数据",obj)
|
|
let id = encodeURIComponent(obj.id);
|
|
let opt = {
|
|
url: '/prod-api/system/open/wechat/er/image',
|
|
method: "POST",
|
|
}
|
|
let params = {
|
|
page:'pages/configuration/configuration-transfer',
|
|
// page:'pages/productList/transfer',
|
|
scene: id
|
|
}
|
|
this.$request.TokenRequest(opt,params).then(res => {
|
|
console.log("获取二维码成功",res);
|
|
if(res.code != 200){
|
|
this.$u.toast('生成海报失败！');
|
|
return;
|
|
}
|
|
this.shareShow = false;
|
|
this.$set(this.posterData.mainImg,'url',this.filePrefix+obj.iconPath)
|
|
this.$set(this.posterData.title,'text',obj.name)
|
|
this.$set(this.posterData.codeImg,'url',res.data)
|
|
console.log("当前海报信息",this.posterData)
|
|
this.$nextTick(()=>{
|
|
this.$refs.hchPoster.posterShow()
|
|
})
|
|
}, error => {
|
|
this.$u.toast('获取二维码失败！');
|
|
console.log("获取二维码失败",error)
|
|
})
|
|
},
|
|
// 取消海报生成
|
|
handleCancel(){
|
|
console.log("取消海报生成")
|
|
},
|
|
// 取消分享
|
|
cancelShare(){
|
|
this.shareShow = false;
|
|
},
|
|
// 跳转详情页
|
|
goDetail(item){
|
|
console.log("跳转详情页",item)
|
|
let url = item.url + '&expires=' + this.expire + '&token=' + this.token;
|
|
uni.navigateTo({
|
|
url:'./configuration-detail?name=' + encodeURIComponent(item.sceneName) + '&url=' + encodeURIComponent(url)
|
|
})
|
|
},
|
|
// 上拉加载更多
|
|
reachBottom() {
|
|
console.log("这里上拉加载更多")
|
|
if(!this.isLoadMore){ //此处判断，上锁，防止重复请求
|
|
this.loadStatus = 'loading';
|
|
this.isLoadMore=true
|
|
this.pageNum+=1
|
|
this.getConfigurationList()
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.configuration-box{
|
|
background: #f5f5f5;
|
|
// height: 100vh;
|
|
}
|
|
.device-search{
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
box-sizing: border-box;
|
|
height: 160rpx;
|
|
background-color: #fff;
|
|
width: 100%;
|
|
z-index: 999;
|
|
.uni-search-bar{
|
|
// padding: 0 10rpx;
|
|
}
|
|
}
|
|
// .scroll-box{
|
|
// // height: calc(100% - var(--status-bar-height) - 48px - 120rpx);
|
|
// height: calc(100% - var(--status-bar-height) - 48px);
|
|
// /* #ifdef APP-PLUS */
|
|
// height: calc(100% - var(--status-bar-height) - 44px);
|
|
// /* #endif */
|
|
// }
|
|
.configuration-list{
|
|
padding: 10rpx 24rpx;
|
|
.configuration-item{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20rpx 0;
|
|
// height: 115rpx;
|
|
border-bottom: 1px solid #e0dede;
|
|
.item-img-box{
|
|
width: 192rpx;
|
|
height: 150rpx;
|
|
margin-right: 20rpx;
|
|
background-color: #eee;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.item-content{
|
|
flex: 1;
|
|
height: 150rpx;
|
|
// display: flex;
|
|
// justify-content: space-between;
|
|
.content-left{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
flex:1;
|
|
.content-top{
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
}
|
|
.content-time{
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
margin: 4rpx 0 16rpx 0;
|
|
}
|
|
.content-btn-box{
|
|
display: flex;
|
|
align-items: center;
|
|
// justify-content: space-around;
|
|
button{
|
|
width: 200rpx;
|
|
height: 60rpx;
|
|
margin-left: 0;
|
|
font-size: 26rpx;
|
|
padding: 0;
|
|
background: #2979ff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
&:first-child{
|
|
margin-right: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
.content-bottom{
|
|
display: flex;
|
|
align-items: center;
|
|
// justify-content: space-between;
|
|
// margin-top: 10rpx;
|
|
.content-bottom-left{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
.content-txt{
|
|
margin: 0 10rpx;
|
|
&:first-of-type{
|
|
margin-right: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
.content-btn-box{
|
|
margin-right: 10rpx;
|
|
::v-deep button{
|
|
background-color: #1b85e9;
|
|
padding: 10rpx 30rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// 分享弹框
|
|
.share-popup{
|
|
.title{
|
|
background-color: #eeeff1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
.popup-box{
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
.box-item{
|
|
padding: 20rpx 0;
|
|
button{
|
|
border: 0px solid #fff;
|
|
background: #fff;
|
|
padding: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.icon-bg{
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.cancel-share{
|
|
border-top: 1px solid #f0f0f0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100rpx;
|
|
font-size: 30rpx;
|
|
color: #666;
|
|
}
|
|
}
|
|
</style>
|