链接地址：
https://shitangsys.cntdh.net/admin/bigdata2
第一步，拖拽布局完后，选择一个flex布局容器，点击右侧的接口数据 中的选择按钮
第二步，展示一个弹窗，请求访问结果，并发送请求测试接口，最后点击立即绑定请求数据
返回数据必填，多级用.(点)隔开，返回类型必选
第三步，绑定完成后，会展示到接口数据那里， 点击也会回显
第四步，绑定完成可以查看代码是否绑定成功
<template>
<!-- 页面全局配置 -->
<view class="pageconfig" :style="{'padding-top':StatusBar + 'px'}">
<!--vuetop-->
<view class="flex70848 padding-xs response flex flex-wrap justify-start " style="flex-direction: row;">
<view v-for="(item,index1986) in data1986List" class="flex1986 padding-xs response flex flex-wrap justify-between " style="flex-direction: row;">
<view class="flex96674 flex flex-wrap justify-start " style="flex-direction: row;">
<view class="touxiang62035 cu-avatar lg round " :style="{'backgroundImage':'url('+bgpic62035+')' }" style="background-color: unset;"></view>
<view class="flex14578 flex flex-wrap justify-start " style="flex-direction: row;">
<view class="flex6572 padding-xs flex flex-wrap justify-start " style="flex-direction: row;">
<text class=" text12592 text-xl text-left">王彬彬</text>
<view class="flex97992 flex flex-wrap justify-start " style="flex-direction: row;align-content: flex-end;align-items: flex-end;">
<view class="picture79551 ">
<image class=" radius" style="width:100%;width:44rpx;height:44rpx;min-height:unset;" :src="picsrc79551"></image>
</view>
<text class=" text15338 text-df text-gray text-left">10013424</text>
</view>
<text class=" text39141 response text-left">肉食动物，吃货一枚肉食动物，枚肉食动...</text>
</view>
</view>
</view>
<view class="touxiang53226 cu-avatar sm " :style="{'backgroundImage':'url('+bgpic53226+')' }" style="background-color: unset;"></view>
</view>
</view>
<view class="flex70724 padding-xs response flex flex-wrap justify-start " style="flex-direction: row;height:160rpx;min-height:unset;">
<view class="flex94333 padding-xs flex justify-start " style="flex-direction: column;align-items: center;height:140rpx;min-height:unset;">
<text class=" text53015 text-lg text-left">8866</text>
<text class=" text66289 text-sm text-gray text-left">获赞</text>
</view>
<view class="flex84919 padding-xs flex justify-start " style="flex-direction: column;align-items: center;height:140rpx;min-height:unset;">
<text class=" text38010 text-lg text-left">425</text>
<text class=" text50166 text-sm text-gray text-left">关注</text>
</view>
<view class="flex58674 padding-xs flex justify-start " style="flex-direction: column;align-items: center;height:140rpx;min-height:unset;">
<text class=" text90486 text-lg text-left">225</text>
<view class="tag418 ">
<view class="cu-tag sm round bg-red">1</view>
</view>
<text class=" text52683 text-sm text-gray text-left">粉丝</text>
</view>
<view class="flex50577 padding-xs flex justify-start " style="flex-direction: column;align-items: center;height:140rpx;min-height:unset;">
<text class=" text70178 text-lg text-left">19</text>
<view class="tag6390 ">
<view class="cu-tag sm round bg-green">99+</view>
</view>
<text class=" text66621 text-sm text-gray text-left">动态</text>
</view>
</view>
<view class="flex15743 padding-xs response flex flex-wrap justify-center " style="flex-direction: row;">
<view class="flex11648 flex flex-wrap justify-around " style="flex-direction: row;align-content: center;align-items: center;">
<view class="flex8444 padding-xs flex flex-wrap justify-start " style="flex-direction: row;align-content: center;align-items: center;">
<text class=" text64951 text-xxl text-black text-left">秀友圈</text>
<text class=" text88649 text-white text-left">分享生活分享感动</text>
</view>
<view class="flex84339 padding-xs flex flex-wrap justify-end " style="flex-direction: row;align-content: center;align-items: center;">
<view class="touxiang20310 cu-avatar sm " :style="{'backgroundImage':'url('+bgpic20310+')' }" style="background-color: unset;"></view>
<view class=" tubiao71739 cuIcon-right text-white" style="font-size: 46rpx;"></view>
</view>
</view>
</view>
<view class=" gongge14156 response ">
<view class=" cu-list grid col-4 no-border">
<view class="cu-item" v-for="(item,index) in label14156List" :key="index">
<view>
<image v-if="item.imgtype !=2" :src="item.pic" class="" mode="heightFix" style="width: auto;height:70rpx;line-height:0rpx"></image>
<view v-if="item.imgtype ==2" :class="['cuIcon-' + item.iconname,'text-' + item.iconcolor]" style="font-size: 70rpx;margin-top: 0rpx;"></view>
</view>
<text style="font-size: unset;color: unset;margin-top:4rpx;">{{item.name}}</text>
</view>
</view>
</view>
<view class="flex1060 padding-xs response flex flex-wrap justify-start " style="flex-direction: row;">
<view class="putong70806 ">
<view class="cu-list menu">
<view class="cu-item arrow" style="background-color: unset;">
<view class="content">
<text class="text-left text-bold ">推荐更多</text>
</view>
</view>
</view>
</view>
<view class="flex10061 padding-xs response flex flex-wrap justify-start " style="flex-direction: row;">
<view class="flex11263 padding-xs flex flex-wrap justify-center " style="flex-direction: column;align-content: center;align-items: center;">
<view class="touxiang77551 cu-avatar " :style="{'backgroundImage':'url('+bgpic77551+')' }" style="background-color: unset;"></view>
<text class=" text18114 text-left">扫一扫</text>
</view>
<view class="flex64091 padding-xs flex flex-wrap justify-center " style="flex-direction: column;align-content: center;align-items: center;">
<view class="touxiang89185 cu-avatar " :style="{'backgroundImage':'url('+bgpic89185+')' }" style="background-color: unset;"></view>
<text class=" text6522 text-left">附近的人</text>
</view>
<view class="flex2570 padding-xs flex flex-wrap justify-center " style="flex-direction: column;align-content: center;align-items: center;">
<view class="touxiang57848 cu-avatar " :style="{'backgroundImage':'url('+bgpic57848+')' }" style="background-color: unset;"></view>
<text class=" text97840 text-left">音频会议</text>
</view>
<view class="flex61494 padding-xs flex flex-wrap justify-center " style="flex-direction: column;align-content: center;align-items: center;">
<view class="touxiang23723 cu-avatar " :style="{'backgroundImage':'url('+bgpic23723+')' }" style="background-color: unset;"></view>
<text class=" text90994 text-left">视频会议</text>
</view>
<view class="flex30385 padding-xs flex flex-wrap justify-center " style="flex-direction: column;align-content: center;align-items: center;">
<view class="touxiang57554 cu-avatar " :style="{'backgroundImage':'url('+bgpic57554+')' }" style="background-color: unset;"></view>
<text class=" text19089 text-left">我的客服</text>
</view>
<view class="flex94241 padding-xs flex flex-wrap justify-center " style="flex-direction: column;align-content: center;align-items: center;">
<view class="touxiang38603 cu-avatar " :style="{'backgroundImage':'url('+bgpic38603+')' }" style="background-color: unset;"></view>
<text class=" text81102 text-left">意见反馈</text>
</view>
<view class="flex22157 padding-xs flex flex-wrap justify-center " style="flex-direction: column;align-content: center;align-items: center;">
<view class="touxiang85339 cu-avatar " :style="{'backgroundImage':'url('+bgpic85339+')' }" style="background-color: unset;"></view>
<text class=" text53598 text-left">邀请码</text>
</view>
<view class="flex88132 padding-xs flex flex-wrap justify-center " style="flex-direction: column;align-content: center;align-items: center;">
<view class="touxiang64397 cu-avatar " :style="{'backgroundImage':'url('+bgpic64397+')' }" style="background-color: unset;"></view>
<text class=" text55429 text-left">设置</text>
</view>
</view>
</view>
<view class=" dibubtn81352 " style="position: fixed;bottom: 0px;z-index: 345;width: 100%;border-bottom: 2rpx solid #eee;">
<view class="cu-bar tabbar ">
<view class="action" @click="goclick81352(index,item)" v-for="(item,index) in label81352List">
<view class="cuIcon-cu-image">
<image v-if="item.imgtype !=2" :src="item.pic" class="" style="width: 50rpx;height:50rpx;"></image>
<view v-if="item.imgtype ==2" :class="['cuIcon-' + item.iconname,'text-' + item.iconcolor]" style="font-size: 60rpx;margin-top: 0rpx;"></view>
</view>
<view>{{item.name}}</view>
</view>
</view>
</view>
<view style="height: 98rpx;"></view>
</view>
</template>
<script>
/** author:Mr.yang **/
/** qq:987095529 **/
/** wx:wx987095529 **/
import Vue from 'vue'
import {
mapState
} from 'vuex'
export default {
data() {
return {
StatusBar: 0,
data1986List: [],
bgpic62035: 'https://shitangsys.cntdh.net//uploads/store/comment/20230320/f4636f89bcb840a5f2ba38332ae64b83.png',
picsrc79551: 'https://shitangsys.cntdh.net//uploads/store/comment/20230320/36e683b5b9b32c063adc35fa7e2b89d5.png',
bgpic53226: 'https://shitangsys.cntdh.net//uploads/store/comment/20230320/1753e27d43e437db426c655339ca570f.png',
bgpic20310: 'https://shitangsys.cntdh.net//uploads/store/comment/20230320/e13ba21bc7a5a5c2c37d82a1aa93d4f2.png',
bgpic77551: 'https://shitangsys.cntdh.net//uploads/store/comment/20230320/62a80863c088bba5d4e906b198d6eaca.png',
bgpic89185: 'https://shitangsys.cntdh.net//uploads/store/comment/20230320/4080e4a9894e63977cfdbadb0f89a108.png',
bgpic57848: 'https://shitangsys.cntdh.net//uploads/store/comment/20230320/ea4f307db6f6b4fd73ad1f3a294fe0fd.png',
bgpic23723: 'https://shitangsys.cntdh.net//uploads/store/comment/20230320/05db5d650502d3faa813d289fdc07968.png',
bgpic57554: 'https://shitangsys.cntdh.net//uploads/store/comment/20230320/351b8ffe5ab8ba1bce75dbbbca6a0698.png',
bgpic38603: 'https://shitangsys.cntdh.net//uploads/store/comment/20230320/1ccb99cf30a2a7ecda9f49b1c1278ae1.png',
bgpic85339: 'https://shitangsys.cntdh.net//uploads/store/comment/20230320/0bfcd296604bc4bc3d7d64c976f50e76.png',
bgpic64397: 'https://shitangsys.cntdh.net//uploads/store/comment/20230320/0031673361a3de287d89b720a6e667e8.png',
label14156List: [{
"name": "我的钱包",
"imgtype": 1,
"myname": "",
"myurl": "",
"evtform": [],
"myremark": "",
"event": "",
"iconcolor": "black",
"iconname": "home",
"pic": "https://shitangsys.cntdh.net//uploads/store/comment/20230320/943793aad624339be4b5fd967c531da9.png",
"url": "/pages/users/user_coupon/index",
"image": "https://shitangsys.cntdh.net//uploads/store/comment/20230320/943793aad624339be4b5fd967c531da9.png"
}, {
"name": "我的订单",
"imgtype": 1,
"myname": "",
"evtform": [],
"myurl": "",
"myremark": "",
"event": "",
"iconcolor": "black",
"iconname": "home",
"pic": "https://shitangsys.cntdh.net//uploads/store/comment/20230320/49d2158ef119751717380ca97372587a.png",
"url": "/pages/users/user_goods_collection/index",
"image": "https://shitangsys.cntdh.net//uploads/store/comment/20230320/49d2158ef119751717380ca97372587a.png"
}, {
"name": "赞过的",
"imgtype": 1,
"iconcolor": "black",
"myname": "",
"evtform": [],
"myurl": "",
"myremark": "",
"event": "",
"iconname": "home",
"pic": "https://shitangsys.cntdh.net//uploads/store/comment/20230320/d84e530f262a730df8be2e6f2170fdcc.png",
"url": "/pages/users/user_address_list/index",
"image": "https://shitangsys.cntdh.net//uploads/store/comment/20230320/d84e530f262a730df8be2e6f2170fdcc.png"
}, {
"name": "我的收藏",
"imgtype": 1,
"iconcolor": "black",
"evtform": [],
"myname": "",
"myurl": "",
"myremark": "",
"event": "",
"iconname": "home",
"pic": "https://shitangsys.cntdh.net//uploads/store/comment/20230320/a4a35ecd5f0a28d0ee2bb9acd536bc13.png",
"url": "/pages/users/user_money/index",
"image": "https://shitangsys.cntdh.net//uploads/store/comment/20230320/a4a35ecd5f0a28d0ee2bb9acd536bc13.png"
}],
/**vuejs**/
label81352List: [{
"name": "首页",
"myname": "",
"myurl": "",
"evtform": [],
"myremark": "",
"event": "",
"imgtype": 2,
"iconcolor": "black",
"iconname": "home",
"pic": "https://shitangsys.cntdh.net//uploads/store/comment/20220426/d5d01475c210e46c357cf3ffaea47535.png",
"url": "",
"image": "https://shitangsys.cntdh.net//uploads/store/comment/20220426/d5d01475c210e46c357cf3ffaea47535.png"
}, {
"name": "分类",
"myname": "",
"myurl": "",
"evtform": [],
"myremark": "",
"event": "",
"imgtype": 2,
"iconcolor": "blue",
"iconname": "sort",
"pic": "https://shitangsys.cntdh.net//uploads/store/comment/20220426/28c860417000b58346fbbb935c6243c1.png",
"url": ""
}, {
"name": "购物车",
"myname": "",
"myurl": "",
"evtform": [],
"myremark": "",
"event": "",
"imgtype": 2,
"iconcolor": "grey",
"iconname": "cart",
"pic": "https://shitangsys.cntdh.net//uploads/store/comment/20220426/879d742839d0047baafbb465f9b3ad98.png",
"url": ""
}, {
"name": "我的",
"imgtype": 2,
"iconcolor": "red",
"iconname": "my",
"pic": "https://shitangsys.cntdh.net//uploads/store/comment/20220426/d5d01475c210e46c357cf3ffaea47535.png",
"url": ""
}],
/**vuejs**/
};
},
onLoad() {
this.getsysinfo();
this.goclick1986();
},
methods: {
//获取顶部状态栏的高度
getsysinfo() {
let that = this;
uni.getSystemInfo({
success: function(e) {
// #ifndef MP
that.StatusBar = e.statusBarHeight;
if (e.platform == 'android') {
that.StatusBar = e.statusBarHeight + 50;
} else {
that.StatusBar = e.statusBarHeight + 45;
};
// #endif
// #ifdef MP-WEIXIN
that.StatusBar = e.statusBarHeight;
// #endif
// #ifdef H5
that.StatusBar = 0;
// #endif
// #ifdef MP-ALIPAY
Vue.prototype.StatusBar = e.statusBarHeight;
that.StatusBar = e.statusBarHeight + e.titleBarHeight;
// #endif
}
})
},
/**
* $vuetag = "";
* $vuecss = "";
* $vuejs = "";
*
*/
goclick1986() {
let params = {};
let headstr = {};
console.log(params)
// return
let res = this.$api.request("/api/combination/indexbanner_list", "GET", params, headstr).then(res => {
if (res) {
this.data1986List = res.data
console.log(res, "请求的结果")
}
}).catch(err => {
console.log("请求的报错的结果")
console.log(err)
})
},
/**method**/
goclick81352(index, item) {},
//获取数据
}
}
</script>
<style lang="less">
/**
*
此处必须引用colorui样式,并放入根目录，css样式可以这样写
@import "colorui/main.css";
@import "colorui/icon.css";
如需要引用colorui到全局，
需要在App.vue 引入
@import "colorui/main.css";
@import "colorui/icon.css";
*
*/
/**本页全局配置的代码**/
.pageconfig {
width: 100%;
overflow: hidden;
overflow-y: scroll;
}
/**pagedomcss**/
.flex70848 {
font-size: 26rpx;
background-color: #ffffff;
background-image: url(https://shitangsys.cntdh.net//uploads/store/comment/20230320/0b28a2f0cf8037cea01d13c5deaa61f4.png);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.flex1986 {
font-size: 26rpx;
margin-top: 136rpx;
margin-bottom: 10rpx;
}
.flex96674 {
width: 87%;
font-size: 26rpx;
}
.touxiang62035 {
font-size: 26rpx;
}
.flex14578 {
width: 75%;
font-size: 26rpx;
margin-left: 10rpx;
}
.flex6572 {
width: 98%;
font-size: 26rpx;
}
.text12592 {
font-weight: bold;
margin-right: 46rpx;
}
.flex97992 {
width: 56%;
margin-top: 8rpx;
margin-bottom: 2rpx;
}
.picture79551 {
width: 100%;
width: 44rpx;
height: 44rpx;
background-color: #ffffff;
}
.text15338 {
font-size: 26rpx;
}
.text39141 {
font-size: 26rpx;
}
.touxiang53226 {
font-size: 26rpx;
}
.flex70724 {
height: 160rpx;
font-size: 26rpx;
background-color: #ffffff;
}
.flex94333 {
width: 20%;
height: 140rpx;
font-size: 26rpx;
flex: 1;
background-color: #ffffff;
}
.text53015 {
font-size: 26rpx;
font-weight: bold;
margin-top: 10rpx;
margin-bottom: 10rpx;
}
.text66289 {
font-size: 26rpx;
}
.flex84919 {
width: 20%;
height: 140rpx;
font-size: 26rpx;
flex: 1;
background-color: #ffffff;
}
.text38010 {
font-size: 26rpx;
font-weight: bold;
margin-top: 10rpx;
margin-bottom: 10rpx;
}
.text50166 {
font-size: 26rpx;
}
.flex58674 {
width: 20%;
height: 140rpx;
font-size: 26rpx;
flex: 1;
background-color: #ffffff;
position: relative;
}
.text90486 {
font-size: 26rpx;
font-weight: bold;
margin-top: 10rpx;
margin-bottom: 10rpx;
}
.tag418 {
position: absolute;
top: 4rpx;
right: 12rpx;
}
.text52683 {
font-size: 26rpx;
}
.flex50577 {
width: 20%;
height: 140rpx;
font-size: 26rpx;
flex: 1;
background-color: #ffffff;
position: relative;
}
.text70178 {
font-size: 26rpx;
font-weight: bold;
margin-top: 10rpx;
margin-bottom: 10rpx;
}
.tag6390 {
position: absolute;
top: 4rpx;
right: 12rpx;
}
.text66621 {
font-size: 26rpx;
}
.flex15743 {
font-size: 26rpx;
background-color: #ffffff;
}
.flex11648 {
width: 96%;
font-size: 26rpx;
background-color: #ffffff;
background-image: url(https://shitangsys.cntdh.net//uploads/store/comment/20230320/0b28a2f0cf8037cea01d13c5deaa61f4.png);
background-image: linear-gradient(to right, rgb(168, 237, 234) 0%, rgb(254, 214, 227) 100%);
background-position: center center;
padding-top: 20rpx;
padding-bottom: 20rpx;
padding-left: 10rpx;
padding-right: 10rpx;
border-top-left-radius: 240rpx;
border-top-right-radius: 240rpx;
border-bottom-right-radius: 240rpx;
border-bottom-left-radius: 240rpx;
}
.flex8444 {
width: 63%;
font-size: 26rpx;
}
.text64951 {
font-weight: bold;
}
.text88649 {
margin-left: 16rpx;
}
.flex84339 {
width: 33%;
font-size: 26rpx;
}
.touxiang20310 {
font-size: 26rpx;
}
.tubiao71739 {
font-size: 26rpx;
}
.gongge14156 {
font-size: 26rpx;
background-color: #ffffff;
}
.flex1060 {
font-size: 26rpx;
background-color: #ffffff;
margin-top: 30rpx;
margin-bottom: 10rpx;
}
.putong70806 {
width: 100%;
font-size: 26rpx;
background-color: #ffffff;
}
.flex10061 {
font-size: 26rpx;
background-color: #ffffff;
}
.flex11263 {
width: 25%;
font-size: 26rpx;
background-color: #ffffff;
margin-top: 10rpx;
margin-bottom: 10rpx;
}
.touxiang77551 {
font-size: 26rpx;
background-color: #ffffff;
}
.text18114 {
font-size: 26rpx;
background-color: #ffffff;
margin-top: 10rpx;
margin-bottom: 10rpx;
}
.flex64091 {
width: 25%;
font-size: 26rpx;
background-color: #ffffff;
margin-top: 10rpx;
margin-bottom: 10rpx;
}
.touxiang89185 {
font-size: 26rpx;
}
.text6522 {
font-size: 26rpx;
background-color: #ffffff;
margin-top: 10rpx;
margin-bottom: 10rpx;
}
.flex2570 {
width: 25%;
font-size: 26rpx;
background-color: #ffffff;
margin-top: 10rpx;
margin-bottom: 10rpx;
}
.touxiang57848 {
font-size: 26rpx;
}
.text97840 {
font-size: 26rpx;
margin-top: 10rpx;
margin-bottom: 10rpx;
}
.flex61494 {
width: 25%;
font-size: 26rpx;
background-color: #ffffff;
margin-top: 10rpx;
margin-bottom: 10rpx;
}
.touxiang23723 {
font-size: 26rpx;
}
.text90994 {
font-size: 26rpx;
margin-top: 10rpx;
margin-bottom: 10rpx;
}
.flex30385 {
width: 25%;
font-size: 26rpx;
background-color: #ffffff;
margin-top: 10rpx;
margin-bottom: 10rpx;
}
.touxiang57554 {
font-size: 26rpx;
background-color: #ffffff;
}
.text19089 {
font-size: 26rpx;
background-color: #ffffff;
margin-top: 10rpx;
margin-bottom: 10rpx;
}
.flex94241 {
width: 25%;
font-size: 26rpx;
background-color: #ffffff;
margin-top: 10rpx;
margin-bottom: 10rpx;
}
.touxiang38603 {
font-size: 26rpx;
background-color: #ffffff;
}
.text81102 {
font-size: 26rpx;
background-color: #ffffff;
margin-top: 10rpx;
margin-bottom: 10rpx;
}
.flex22157 {
width: 25%;
font-size: 26rpx;
background-color: #ffffff;
margin-top: 10rpx;
margin-bottom: 10rpx;
}
.touxiang85339 {
font-size: 26rpx;
background-color: #ffffff;
}
.text53598 {
font-size: 26rpx;
background-color: #ffffff;
margin-top: 10rpx;
margin-bottom: 10rpx;
}
.flex88132 {
width: 25%;
font-size: 26rpx;
background-color: #ffffff;
margin-top: 10rpx;
margin-bottom: 10rpx;
}
.touxiang64397 {
font-size: 26rpx;
background-color: #ffffff;
}
.text55429 {
font-size: 26rpx;
background-color: #ffffff;
margin-top: 10rpx;
margin-bottom: 10rpx;
}
.dibubtn81352 {
width: 100%;
font-size: 26rpx;
background-color: #ffffff;
}
</style>