|
|
@@ -16,7 +16,7 @@
|
|
|
</view>
|
|
|
|
|
|
<view class="right">
|
|
|
- <uni-icons type="closeempty" size="24" @click.native.stop="delVal" color="#9199af" v-if="searchVal"></uni-icons>
|
|
|
+ <image style='width:32rpx;height:32rpx;' v-if="searchVal" @click.native.stop="delSearchVal" src="../../static/imgs/card/searchdel.png" mode="widthFix" ></image>
|
|
|
<uni-icons type="mic" size="24" @click.native.stop="micOpen" color="#9199af"></uni-icons>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -37,12 +37,7 @@
|
|
|
@down="downCallback">
|
|
|
<view v-for='(item,index) in cardHolderList' @longpress="longpress" class="item flex">
|
|
|
<!-- <view class="card-list-item" style="background:red"> -->
|
|
|
- <u-checkbox-group v-if='islongPress' placement="column"
|
|
|
- @change="checkboxChange($event,index)">
|
|
|
- <u-checkbox :name='index+1' :checked='item.checked'
|
|
|
- :customStyle="{marginBottom: '8px'}">
|
|
|
- </u-checkbox>
|
|
|
- </u-checkbox-group>
|
|
|
+
|
|
|
<view class="card-list-item"
|
|
|
:style="'background:url('+item.currentBackground+');background-size:100% 100%'">
|
|
|
<view class="card-content style1" v-if="item.cuttentTemplate==1">
|
|
|
@@ -59,18 +54,26 @@
|
|
|
{{item.companyName}}
|
|
|
</view>
|
|
|
<view class="row3 flex" @click="">
|
|
|
- <uni-icons type="map-filled" size="20" style="margin-right: 20rpx;"
|
|
|
- color="#5e6d82"></uni-icons>{{ item.province }}{{ item.city }}{{ item.area }}
|
|
|
+ <u--image :showLoading="true" src="/static/imgs/card/address1.png" width="13px" height="16px"
|
|
|
+ ></u--image>
|
|
|
+ <view class='icon-text'>{{ item.province }}{{ item.city }}{{ item.area }}</view>
|
|
|
</view>
|
|
|
<view class="row4 flex">
|
|
|
- <uni-icons type="phone-filled" size="20" style="margin-right: 20rpx;"
|
|
|
- color="#5e6d82"></uni-icons>{{ item.phone }}
|
|
|
+ <u--image :showLoading="true" src="/static/imgs/card/phone1.png" width="12px" height="13px"
|
|
|
+ ></u--image><view class='icon-text'>{{ item.phone }}</view>
|
|
|
</view>
|
|
|
- <view @click='remarkEdit(item)' class="row2" style="color: #808080">
|
|
|
- <uni-icons type="redo" size="20" style="margin-right: 20rpx;"></uni-icons>
|
|
|
- <text>{{item.remark?item.remark:'单击添加备注'}}</text>
|
|
|
+ <view @click='remarkEdit(item)' class="row2 flex" style="color: #808080">
|
|
|
+ <u--image :showLoading="true" src="/static/imgs/card/remark1.png" width="10px" height="12px"
|
|
|
+ ></u--image>
|
|
|
+ <view class='icon-text'>{{item.remark?item.remark:'单击添加备注'}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <u-checkbox-group v-if='islongPress' placement="column"
|
|
|
+ @change="checkboxChange($event,index)">
|
|
|
+ <u-checkbox iconColor='#4977FC' activeColor="#fff" :name='index+1' :checked='item.checked'
|
|
|
+ :customStyle="{marginBottom: '8px'}">
|
|
|
+ </u-checkbox>
|
|
|
+ </u-checkbox-group>
|
|
|
</view>
|
|
|
<view class="card-content style1 flex-between" v-if="item.cuttentTemplate==2">
|
|
|
<view class="right">
|
|
|
@@ -82,16 +85,18 @@
|
|
|
{{item.companyName}}
|
|
|
</view>
|
|
|
<view class="row3 flex">
|
|
|
- <uni-icons type="map-filled" size="20" style="margin-right: 20rpx;"
|
|
|
- color="#5e6d82"></uni-icons>{{ item.province }}{{ item.city }}{{ item.area }}
|
|
|
+ <u--image :showLoading="true" src="/static/imgs/card/address3.png" width="13px" height="16px"
|
|
|
+ ></u--image>
|
|
|
+ <view class='icon-text'>{{ item.province }}{{ item.city }}{{ item.area }}</view>
|
|
|
</view>
|
|
|
<view class="row4 flex">
|
|
|
- <uni-icons type="phone-filled" size="20" style="margin-right: 20rpx;"
|
|
|
- color="#5e6d82"></uni-icons>{{ item.phone }}
|
|
|
+ <u--image :showLoading="true" src="/static/imgs/card/phone3.png" width="12px" height="13px"
|
|
|
+ ></u--image><view class='icon-text'>{{ item.phone }}</view>
|
|
|
</view>
|
|
|
- <view @click='remarkEdit(item)' class="row2" style="color: #808080">
|
|
|
- <uni-icons type="redo" size="20" style="margin-right: 20rpx;"></uni-icons>
|
|
|
- <text>{{item.remark?item.remark:'单击添加备注'}}</text>
|
|
|
+ <view @click='remarkEdit(item)' class="row2 flex" style="color: #808080">
|
|
|
+ <u--image :showLoading="true" src="/static/imgs/card/remark3.png" width="10px" height="12px"
|
|
|
+ ></u--image>
|
|
|
+ <view class='icon-text'>{{item.remark?item.remark:'单击添加备注'}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="left">
|
|
|
@@ -100,6 +105,12 @@
|
|
|
<u--image :showLoading="true" src="/./../static/imgs/card/defaulthead.png" width="66px"
|
|
|
height="66px" shape="circle" v-else></u--image>
|
|
|
</view>
|
|
|
+ <u-checkbox-group v-if='islongPress' placement="column"
|
|
|
+ @change="checkboxChange($event,index)">
|
|
|
+ <u-checkbox iconColor='#4977FC' activeColor="#fff" :name='index+1' :checked='item.checked'
|
|
|
+ :customStyle="{marginBottom: '8px'}">
|
|
|
+ </u-checkbox>
|
|
|
+ </u-checkbox-group>
|
|
|
</view>
|
|
|
<view class="card-content style2" v-if="item.cuttentTemplate==3">
|
|
|
<view class="top">
|
|
|
@@ -120,19 +131,26 @@
|
|
|
</view>
|
|
|
<view class="right">
|
|
|
<view class="row1 flex">
|
|
|
- <uni-icons type="map-filled" size="20" style="margin-right: 20rpx;"
|
|
|
- color="#5e6d82"></uni-icons>{{ item.province }}{{ item.city }}{{ item.area }}
|
|
|
+ <u--image :showLoading="true" src="/static/imgs/card/address1.png" width="13px" height="16px"
|
|
|
+ ></u--image><view class='icon-text'>{{ item.province }}{{ item.city }}{{ item.area }}</view>
|
|
|
</view>
|
|
|
<view class="row2 flex">
|
|
|
- <uni-icons type="phone-filled" size="20" style="margin-right: 20rpx;"
|
|
|
- color="#5e6d82"></uni-icons>{{ item.phone }}
|
|
|
+ <u--image :showLoading="true" src="/static/imgs/card/phone1.png" width="12px" height="13px"
|
|
|
+ ></u--image><view class='icon-text'>{{ item.phone }}</view>
|
|
|
</view>
|
|
|
- <view @click='remarkEdit(item)' class="row2" style="color: #808080">
|
|
|
- <uni-icons type="redo" size="20" style="margin-right: 20rpx;"></uni-icons>
|
|
|
- <text>{{item.remark?item.remark:'单击添加备注'}}</text>
|
|
|
+ <view @click='remarkEdit(item)' class="row2 flex" style="color: #808080">
|
|
|
+ <u--image :showLoading="true" src="/static/imgs/card/remark1.png" width="10px" height="12px"
|
|
|
+ ></u--image>
|
|
|
+ <view class='icon-text'>{{item.remark?item.remark:'单击添加备注'}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <u-checkbox-group v-if='islongPress' placement="column"
|
|
|
+ @change="checkboxChange($event,index)">
|
|
|
+ <u-checkbox iconColor='#4977FC' activeColor="#fff" :name='index+1' :checked='item.checked'
|
|
|
+ :customStyle="{marginBottom: '8px'}">
|
|
|
+ </u-checkbox>
|
|
|
+ </u-checkbox-group>
|
|
|
</view>
|
|
|
<view class="card-content style2" v-if="item.cuttentTemplate==4">
|
|
|
<view class="top">
|
|
|
@@ -154,19 +172,25 @@
|
|
|
</view>
|
|
|
<view class="right">
|
|
|
<view class="row1 flex">
|
|
|
- <uni-icons type="map-filled" size="20" style="margin-right: 20rpx;"
|
|
|
- color="#5e6d82"></uni-icons>{{ item.province }}{{ item.city }}{{ item.area }}
|
|
|
+ <u--image :showLoading="true" src="/static/imgs/card/address2.png" width="13px" height="16px"
|
|
|
+ ></u--image><view class='icon-text'>{{ item.province }}{{ item.city }}{{ item.area }}</view>
|
|
|
</view>
|
|
|
<view class="row2 flex">
|
|
|
- <uni-icons type="phone-filled" size="20" style="margin-right: 20rpx;"
|
|
|
- color="#5e6d82"></uni-icons>{{ item.phone }}
|
|
|
- </view>
|
|
|
- <view @click='remarkEdit(item)' class="row2" style="color: #808080">
|
|
|
- <uni-icons type="redo" size="20" style="margin-right: 20rpx;"></uni-icons>
|
|
|
- <text>{{item.remark?item.remark:'单击添加备注'}}</text>
|
|
|
+ <u--image :showLoading="true" src="/static/imgs/card/phone2.png" width="12px" height="13px"
|
|
|
+ ></u--image><view class='icon-text'>{{ item.phone }}</view>
|
|
|
</view>
|
|
|
+ <view @click='remarkEdit(item)' class="row2 flex" style="color: #808080">
|
|
|
+ <u--image :showLoading="true" src="/static/imgs/card/remark2.png" width="10px" height="12px" ></u--image>
|
|
|
+ <view :style='item.remark?"color:#000;":"color:#808080;"' class='icon-text'>{{item.remark?item.remark:'单击添加备注'}}</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <u-checkbox-group v-if='islongPress' placement="column"
|
|
|
+ @change="checkboxChange($event,index)">
|
|
|
+ <u-checkbox iconColor='#4977FC' activeColor="#fff" :name='index+1' :checked='item.checked'
|
|
|
+ :customStyle="{marginBottom: '8px'}">
|
|
|
+ </u-checkbox>
|
|
|
+ </u-checkbox-group>
|
|
|
</view>
|
|
|
<view class="car-bottom flex">
|
|
|
<view class="left">
|
|
|
@@ -226,17 +250,23 @@
|
|
|
<view class="del-style" v-if="islongPress">
|
|
|
<view class="left">
|
|
|
<text class="qx" @click="islongPress=false">取消</text>
|
|
|
- <text class="del" @click="delShow=true">删除</text>
|
|
|
+ <text class="del" @click="del">删除</text>
|
|
|
</view>
|
|
|
- <view class="right">
|
|
|
- 全选
|
|
|
+ <view style='width:128rpx;' class="right flex">
|
|
|
+ <view>全选</view>
|
|
|
+ <u-checkbox-group class='' placement="column"
|
|
|
+ @change="checkboxChange($event,'')">
|
|
|
+ <u-checkbox iconColor='#4977FC' activeColor="#fff" name='全选' :checked='checked'
|
|
|
+ :customStyle="{marginBottom: '8px',position: 'relative',top: '-19px',right:'-8px'}">
|
|
|
+ </u-checkbox>
|
|
|
+ </u-checkbox-group>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
- <u-picker :show="isShowType" :columns="typeColumns" keyName="circleName" title="选择分类" @close="isShowType=false"
|
|
|
+ <u-picker :show="isShowType" :columns="typeColumns" keyName="circleName" :title="type == 2?'修改分类':'选择分类'" @close="isShowType=false"
|
|
|
@cancel="isShowType=false" closeOnClickOverlay @confirm="typeConfirm"></u-picker>
|
|
|
<u-toast ref="uToast"></u-toast>
|
|
|
- <u-modal :show="delShow" title="提示" showCancelButton='true' @cancel="delShow=false" @confirm="delConfirm"
|
|
|
+ <u-modal :show="delShow" title="提示" confirmText='确定' showCancelButton='true' @cancel="delShow=false" @confirm="delConfirm"
|
|
|
:content='"已选中"+this.checkedList.length+"张名片，确定删除？"'></u-modal>
|
|
|
<u-modal :show="modalShow" @confirm='remarkConfirm' :confirmColor="remark?'#2979ff':'#ccc'"
|
|
|
showCancelButton='true' title="备注">
|
|
|
@@ -244,15 +274,9 @@
|
|
|
<u--textarea v-model="remark" placeholder="输入备注，不超过150个字"></u--textarea>
|
|
|
</view>
|
|
|
</u-modal>
|
|
|
- <view v-if='qrcodeShow' class="shade">
|
|
|
- <view class='qrCode'>
|
|
|
- <view style='text-align:right;'>
|
|
|
- <uni-icons @click='qrcodeShow=false' type="close" size="20"></uni-icons>
|
|
|
- </view>
|
|
|
- <image :src="currectData.qrCode" mode=""></image>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
+ <u-popup :show="qrcodeShow" @close="qrcodeShow=false" mode="center" :round='10'>
|
|
|
+ <image style='margin:10px;' :src="currectData.qrCode" mode="widthFix"></image>
|
|
|
+ </u-popup>
|
|
|
<u-popup :show="popupshow" :closeOnClickOverlay='true' :overlayOpacity='0.4' @close='handleHiddenShare' :round="10" mode="bottom">
|
|
|
<view>
|
|
|
<!-- <view class="share-to">
|
|
|
@@ -682,7 +706,15 @@
|
|
|
}
|
|
|
},
|
|
|
del() {
|
|
|
- this.delShow = true
|
|
|
+
|
|
|
+ if(this.checkedList.length>0){
|
|
|
+ this.delShow = true
|
|
|
+ }else{
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ type: 'error',
|
|
|
+ message: '请勾选后再进行删除！',
|
|
|
+ })
|
|
|
+ }
|
|
|
},
|
|
|
|
|
|
longpress() {
|
|
|
@@ -1056,7 +1088,6 @@
|
|
|
}
|
|
|
|
|
|
.row2 {
|
|
|
- margin-top: 10rpx;
|
|
|
font-size: 24rpx;
|
|
|
font-weight: bold;
|
|
|
color: #323333;
|
|
|
@@ -1069,6 +1100,9 @@
|
|
|
color: #323333;
|
|
|
|
|
|
}
|
|
|
+ .row2,.row4 {
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -1127,6 +1161,7 @@
|
|
|
font-weight: bold;
|
|
|
color: #323333;
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
|
|
|
.right {
|
|
|
@@ -1138,7 +1173,7 @@
|
|
|
color: #323333;
|
|
|
}
|
|
|
|
|
|
- .row2 {
|
|
|
+ .row2,.row4 {
|
|
|
margin-top: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
@@ -1158,7 +1193,11 @@
|
|
|
position: absolute;
|
|
|
bottom: 63rpx;
|
|
|
left: 20rpx;
|
|
|
-
|
|
|
+ bottom:24rpx;
|
|
|
+ width:94.9%;
|
|
|
+ background: url("../../static/imgs/card/bg5.png") no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ height: 80rpx;
|
|
|
// width: calc(100% - 40rpx);
|
|
|
.left {
|
|
|
// top: -40rpx;
|
|
|
@@ -1170,17 +1209,11 @@
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-evenly;
|
|
|
- background: url("../../static/imgs/card/bgc1.png") no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .right {
|
|
|
- position: absolute;
|
|
|
- left: 65vw;
|
|
|
- height: 80rpx;
|
|
|
- width: 30vw;
|
|
|
- background: url("../../static/imgs/card/right-bgc.png") no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
+ z-index:100;
|
|
|
+ left: 0px;
|
|
|
+
|
|
|
+ // background-size: 100% 100%;
|
|
|
+ overflow-y: hidden;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -1217,23 +1250,6 @@
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
- .shade {
|
|
|
- background: rgba(0, 0, 0, 0.2);
|
|
|
- width: 100%;
|
|
|
- height: 100vh;
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .qrCode {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- transform: translateY(-50%);
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
/deep/.u-checkbox-group{
|
|
|
position: absolute;
|
|
|
right: 20px;
|
|
|
@@ -1246,8 +1262,22 @@
|
|
|
width:calc(100vw - 40rpx);
|
|
|
position: fixed;
|
|
|
display: flex;
|
|
|
+ z-index:100;
|
|
|
justify-content: space-between;
|
|
|
- bottom:0
|
|
|
+ bottom:0;
|
|
|
+ font-size:28rpx;
|
|
|
+ .right{
|
|
|
+ color:#344577;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .del,.qx{
|
|
|
+ padding:10rpx;
|
|
|
+ }
|
|
|
+ .del{
|
|
|
+ color:#FF4040;
|
|
|
+ }
|
|
|
+ .qx{
|
|
|
+ color:#666;
|
|
|
}
|
|
|
.share-content{
|
|
|
display:flex;
|
|
|
@@ -1262,4 +1292,13 @@
|
|
|
}
|
|
|
font-size:24rpx;
|
|
|
}
|
|
|
+ .icon-text{
|
|
|
+ margin-left: 10px;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #323333;
|
|
|
+ }
|
|
|
+ /deep/.u-checkbox__icon-wrap.u-checkbox__icon-wrap--square{
|
|
|
+ border-color:#D7DEEB !important;
|
|
|
+ }
|
|
|
</style>
|
高敬炎
