|
|
@@ -1,51 +1,56 @@
|
|
|
<template>
|
|
|
<view class="content">
|
|
|
- <view class="content1 flex">
|
|
|
- <view class="search flex flex-between">
|
|
|
+ <view class="content1 flex flex-between">
|
|
|
+ <view class="search flex">
|
|
|
<view class="left flex" @click="search">
|
|
|
- <uni-icons type="search" size="24"></uni-icons>
|
|
|
+ <image src="../../static/imgs/cirlce/search.png" mode="widthFix" class="search-img"></image>
|
|
|
<text class="search-val"> {{searchVal?searchVal:'搜索圈子'}}</text>
|
|
|
- <uni-icons type="closeempty" size="24" @click.native.stop="delSearchVal"></uni-icons>
|
|
|
- </view>
|
|
|
- <view class="right">
|
|
|
- <uni-icons type="mic" size="24" @click.stop="micOpen"></uni-icons>
|
|
|
+ <uni-icons type="closeempty" size="24" @click.native.stop="delSearchVal"
|
|
|
+ v-if="searchVal"></uni-icons>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="right flex relative">
|
|
|
- <uni-icons type="personadd-filled" size="30" @click="toChangeCard"></uni-icons>
|
|
|
- <u-badge :isDot="true" type="error" class="point"></u-badge>
|
|
|
+ <view class="right relative">
|
|
|
+ <image src="../../static/imgs/cirlce/hy.png" mode="widthFix" class="hy-search-img"
|
|
|
+ @click="toChangeCard"></image>
|
|
|
+ <u-badge :isDot="true" type="error" class="point position"></u-badge>
|
|
|
</view>
|
|
|
</view>
|
|
|
<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" @down="downCallback">
|
|
|
<view class="content2 flex flex-between">
|
|
|
- <view class="left">
|
|
|
- 我得圈子
|
|
|
+
|
|
|
+ <view class="left flex title">
|
|
|
+ <view class="line"></view>
|
|
|
+ <view class="text-title">
|
|
|
+ 我得圈子
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="right">
|
|
|
+ <!-- <view class="right">
|
|
|
<uni-icons type="personadd-filled" size="30" @click="toCreateCircle"></uni-icons>
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
</view>
|
|
|
<view class="" v-for="(item,index) in circleList" :key="index">
|
|
|
- <view class="" v-if="item.name">
|
|
|
- {{item.name}}
|
|
|
+ <view class="flex title" v-if="item.name">
|
|
|
+ <view class="line"></view>
|
|
|
+ <view class="text-title">
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="content3 flex" v-if="!item.name">
|
|
|
- <view class="row-tiem" @click="toDetail(item.id)">
|
|
|
- <view class="left">
|
|
|
- <image src="../../static/logo.png" mode="widthFix" class="img"></image>
|
|
|
- </view>
|
|
|
- <view class="right">
|
|
|
- <view class="top">{{item.circleName}}（{{item.cardNum}}）</view>
|
|
|
- <view class="bottom">
|
|
|
- <span v-for="item1 in item.circleLabel.split(',')">
|
|
|
- {{item1}}
|
|
|
- </span>
|
|
|
- </view>
|
|
|
+ <view class="row-tiem flex" v-if="!item.name" @click="toDetail(item.id)">
|
|
|
+ <view class="left">
|
|
|
+ <image src="../../static/imgs/scirlce.png" mode="widthFix" class="img"></image>
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+ <view class="top">{{item.circleName}}（{{item.cardNum}}）</view>
|
|
|
+ <view class="bottom">
|
|
|
+ <span v-for="item1 in item.circleLabel.split(',')" class="text">
|
|
|
+ {{item1}}
|
|
|
+ </span>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</mescroll-body>
|
|
|
+ <image src="../../static/imgs/cirlce/add.png" mode="widthFix" class="add" @click="toCreateCircle"></image>
|
|
|
<u-toast ref="uToast"></u-toast>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -66,7 +71,7 @@
|
|
|
searchVal: '',
|
|
|
circleList: [],
|
|
|
userInfo: {},
|
|
|
- canReset:false,
|
|
|
+ canReset: false,
|
|
|
};
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
@@ -82,11 +87,11 @@
|
|
|
});
|
|
|
},
|
|
|
methods: {
|
|
|
- delSearchVal(){
|
|
|
+ delSearchVal() {
|
|
|
this.searchVal = ""
|
|
|
- this.mescroll.resetUpScroll()
|
|
|
+ this.mescroll.resetUpScroll()
|
|
|
},
|
|
|
- toChangeCard(){
|
|
|
+ toChangeCard() {
|
|
|
uni.navigateTo({
|
|
|
url: "/pages/circle/changeCard"
|
|
|
})
|
|
|
@@ -106,7 +111,7 @@
|
|
|
},
|
|
|
toDetail(val) {
|
|
|
uni.navigateTo({
|
|
|
- url: "/pages/circle/detail?val="+val
|
|
|
+ url: "/pages/circle/detail?val=" + val
|
|
|
})
|
|
|
},
|
|
|
upCallback(page) {
|
|
|
@@ -118,7 +123,7 @@
|
|
|
page: page.num,
|
|
|
limit: page.size,
|
|
|
}
|
|
|
- if(this.searchVal){
|
|
|
+ if (this.searchVal) {
|
|
|
_data.circleName = this.searchVal
|
|
|
}
|
|
|
this.$request.baseRequest('admin.unimall.circleManagementInfo', 'list', _data, failres => {
|
|
|
@@ -150,7 +155,7 @@
|
|
|
name: '推荐圈子'
|
|
|
})
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
console.log(this.circleList)
|
|
|
return
|
|
|
}
|
|
|
@@ -190,24 +195,104 @@
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.content1 {
|
|
|
+ margin: 50rpx 25rpx 14rpx 25rpx;
|
|
|
+
|
|
|
+ .search {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 38rpx;
|
|
|
+ padding: 18rpx;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-val {
|
|
|
+ color: #B3B3B3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .hy-search-img {
|
|
|
+ width: 38rpx;
|
|
|
+ margin-left: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-img {
|
|
|
+ width: 38rpx;
|
|
|
+ margin-right: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
.right {
|
|
|
/deep/.u-badge {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
- right: 6rpx;
|
|
|
+ right: -10rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .content3 {
|
|
|
+ .line {
|
|
|
+ width: 8rpx;
|
|
|
+ height: 34rpx;
|
|
|
+ background: #112253;
|
|
|
+ border-radius: 3px;
|
|
|
+ margin: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ margin: 20rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #1A1A1A;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row-tiem {
|
|
|
+ background: #fff;
|
|
|
+ padding: 24rpx;
|
|
|
+ margin: 0 34rpx;
|
|
|
+ align-items: unset;
|
|
|
+
|
|
|
.img {
|
|
|
- width: 100rpx;
|
|
|
+ width: 122rpx;
|
|
|
+ height: 122rpx;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-right: 30rpx;
|
|
|
+
|
|
|
}
|
|
|
|
|
|
.right {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
+ justify-content: space-evenly;
|
|
|
+
|
|
|
+ .top {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #1A1A1A;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ margin-top: 10rpx;
|
|
|
+ .text {
|
|
|
+ background: #FAFAFA;
|
|
|
+ border-radius: 20px;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #666666;
|
|
|
+ padding: 11rpx 40rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .add{
|
|
|
+ width:84rpx;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 26rpx;
|
|
|
+ right: 26rpx;
|
|
|
+ }
|
|
|
</style>
|
