|
|
@@ -38,9 +38,17 @@
|
|
|
<span @click="changeCardStatus(1)" :class="selectIndex==1?'active':'text'">已交换</span>
|
|
|
<span @click="changeCardStatus(2)" :class="selectIndex==2?'active':'text'">未交换</span>
|
|
|
</view>
|
|
|
- <view class="right flex" v-if="dataObj.circleCardInfo" @click="myCardClick">
|
|
|
- <image src="../../static/imgs/cirlce/account.png" mode="widthFix"
|
|
|
- style="width: 36rpx;margin-right: 15rpx;height: auto;"></image>我的名片
|
|
|
+ <view class="right flex">
|
|
|
+ <view class="flex" v-if="dataObj.circleCardInfo" @click="myCardClick">
|
|
|
+ <image src="../../static/imgs/cirlce/account.png" mode="widthFix"
|
|
|
+ style="width: 36rpx;margin-right: 15rpx;height: auto;"></image>我的名片
|
|
|
+ </view>
|
|
|
+ <view class="">
|
|
|
+ <image src="../../static/imgs/card/buju1.png" mode="widthFix"
|
|
|
+ style="width: 50rpx;margin-left: 30rpx;height: 50rpx;" v-if="layout==1" @click="changeLayout(2)"></image>
|
|
|
+ <image src="../../static/imgs/card/buju2.png" mode="widthFix"
|
|
|
+ style="width: 50rpx;margin-left: 30rpx;height: 50rpx;" v-if="layout==2" @click="changeLayout(1)"></image>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -49,7 +57,7 @@
|
|
|
<mescroll-uni height='1200' :up="upOption" :down="downOption" ref="mescrollRef" @init="mescrollInit" @up="upCallback" @down="downCallback" >
|
|
|
<view class="content3" v-for="(item,index) in changeCardList"
|
|
|
:style="item.currentBackground?'background:url('+item.currentBackground+');background-size:100% 100%':''"
|
|
|
- :key="index">
|
|
|
+ :key="index" v-if="layout==1">
|
|
|
<view class="flex item">
|
|
|
<view class="top flex">
|
|
|
<view class="left">
|
|
|
@@ -84,6 +92,31 @@
|
|
|
@click="changeCard(item)" v-if="item.notDisplay!=1"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view class="layout2" v-if="layout==2">
|
|
|
+ <view class="list_box">
|
|
|
+ <view class="list-item" v-for="(item,index) in changeCardList" :key="index" @click="itemClick(item,index)">
|
|
|
+ <view class="left">
|
|
|
+ <view class="icon-box">
|
|
|
+ <image :src="item.headSculpture?item.headSculpture:'https://cdn.uviewui.com/uview/album/1.jpg'" style="width: 70rpx;height:70rpx;border-radius: 20rpx;"></image>
|
|
|
+ </view>
|
|
|
+ <view class="name">
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+ <view class="name">
|
|
|
+ {{item.post}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+ <view class="flex btn" v-if="item.lookPage==1||item.notDisplay!=1">
|
|
|
+ <image @click='toHome(item)' src="../../static/imgs/cirlce/home.png" mode="widthFix" style="width: 32rpx;height: auto;"
|
|
|
+ v-if="item.lookPage==1&&item.personalHomeId"></image>
|
|
|
+ <image src="../../static/imgs/cirlce/change.png" mode="widthFix" style="width: 32rpx;;height: auto;margin-left: 20rpx;"
|
|
|
+ @click="changeCard(item)" v-if="item.notDisplay!=1"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</mescroll-uni>
|
|
|
</view>
|
|
|
|
|
|
@@ -168,6 +201,7 @@
|
|
|
mixins: [MescrollMixin], // 使用mixin
|
|
|
data() {
|
|
|
return {
|
|
|
+ layout:1,
|
|
|
showAuthorizeUser: false,
|
|
|
showAuthorizePhone: false,
|
|
|
customStyleUnOk: {
|
|
|
@@ -252,6 +286,9 @@
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ changeLayout(type){
|
|
|
+ this.layout = type
|
|
|
+ },
|
|
|
//获取昵称输入内容
|
|
|
userNameInput(e) {
|
|
|
this.userInfo.nickname = e.detail.value
|
|
|
@@ -771,4 +808,67 @@
|
|
|
/deep/.u-popup__content {
|
|
|
border-radius: 20rpx !important;
|
|
|
}
|
|
|
+ /* 主体样式 */
|
|
|
+ .list_box {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .list-item {
|
|
|
+ padding: 10px 10px;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ transition: all .5s;
|
|
|
+ &:active{
|
|
|
+ background-color: #EEEEEE;
|
|
|
+ }
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .icon-box {
|
|
|
+ width: 70rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ border-radius: 10px;
|
|
|
+ box-shadow: 3px 3px 7px #bebebe,
|
|
|
+ -3px -3px 7px #ffffff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 70%;
|
|
|
+ height: 70%;
|
|
|
+ }
|
|
|
+
|
|
|
+ text::before {
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ margin-left: 10px;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-shadow: 1px 1px 3px #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .rightText {
|
|
|
+ margin-right: 5px;
|
|
|
+ color: #999;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .layout2{
|
|
|
+ background: #9e9e9e94;
|
|
|
+ margin: 0 20rpx;
|
|
|
+ border-radius: 20rpx
|
|
|
+ }
|
|
|
</style>
|
