businessCard/xiaochengxu/pages/cardHolder/cardHolder.vue

<template>
	<view class="content">
		<u-navbar title="电子名片" placeholder bgColor="#112253" titleStyle="color:#fff">
			<view class="u-nav-slot relative" slot="left">
				<u-icon name="bell" size="26" @click="toNotice" color="#fff"></u-icon>
				<u-badge :isDot="unread>0?true:false" type="error" class="point"></u-badge>
			</view>
		</u-navbar>
		<view class="content1 flex-row-center">
			<view class="search flex flex-between" @click="search">
				<view class="left flex">
					<uni-icons type="search" size="24" color="#9199af"></uni-icons>
					<text class="search-val"> {{searchVal?searchVal:'搜索名片'}}</text>
					<uni-icons type="closeempty" size="24" @click.native.stop="delSearchVal"
						v-if="searchVal"></uni-icons>
				</view>
				
				<view class="right">
					<uni-icons type="closeempty" size="24" @click.native.stop="delVal" color="#9199af" v-if="searchVal"></uni-icons>
					<uni-icons type="mic" size="24" @click.native.stop="micOpen" color="#9199af"></uni-icons>
				</view>
			</view>
			<view class="col flex">
				<uni-icons type="scan" size="30" @click="scan" color="#fff"></uni-icons>
			</view>
		</view>

		<view class="content2">
			<view class="all-type flex" @click="selectType">
				<text>{{typeName?typeName:'全部分类'}}</text>
				<uni-icons type="bottom" size="18" color="#fff"></uni-icons>
			</view>
		</view>
		<view class="content3">

			<mescroll-body v-if='cardHolderList' :up="upOption" ref="mescrollRef" @init="mescrollInit" @up="upCallback"
				@down="downCallback">
				<view v-for='(item,index) in cardHolderList' @longpress="longpress" class="item flex">
					<!-- <view class="card-list-item" style="background:red"> -->
					<view class="card-list-item"
						:style="'background:url('+item.currentBackground+');background-size:100% 100%'">
						<view class="card-content style1" v-if="item.cuttentTemplate==0">
							<view class="left">
								<u--image :showLoading="true" :src="item.headSculpture" width="66px" height="66px"
									shape="circle"></u--image>
							</view>
							<view class="right">
								<view class="row1">
									<text class="name">{{item.name}}</text>
									<text class="post">{{item.post}}</text>
								</view>
								<view class="row2">
									{{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 }}
								</view>
								<view class="row4 flex">
									<uni-icons type="phone-filled" size="20" style="margin-right: 20rpx;"
										color="#5e6d82"></uni-icons>{{ item.phone }}
								</view>
								<!-- <view class="">
									备注
								</view> -->
							</view>
						</view>
						<view class="card-content style1 flex-between" v-if="item.cuttentTemplate==1">
							<view class="right">
								<view class="row1">
									<text class="name">{{item.name}}</text>
									<text class="post">{{item.post}}</text>
								</view>
								<view class="row2">
									{{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 }}
								</view>
								<view class="row4 flex">
									<uni-icons type="phone-filled" size="20" style="margin-right: 20rpx;"
										color="#5e6d82"></uni-icons>{{ item.phone }}
								</view>
								<!-- <view class="">
									备注
								</view> -->
							</view>
							<view class="left">
								<u--image :showLoading="true" :src="item.headSculpture" width="66px" height="66px"
									shape="circle" v-if="item.headSculpture"></u--image>
								<u--image :showLoading="true" src="/./../static/imgs/card/defaulthead.png" width="66px"
									height="66px" shape="circle" v-else></u--image>
							</view>
						</view>
						<view class="card-content style2" v-if="item.cuttentTemplate==2">
							<view class="top">
								<u--image :showLoading="true" :src="item.headSculpture" width="66px" height="66px"
									shape="circle" v-if="item.headSculpture"></u--image>
								<u--image :showLoading="true" src="/./../static/imgs/card/defaulthead.png" width="66px"
									height="66px" shape="circle" v-else></u--image>
							</view>
							<view class="bottom flex">
								<view class="left">
									<view class="row1">
										<text class="name">{{item.name}}</text>
										<text class="post">{{item.post}}</text>
									</view>
									<view class="row2">
										{{item.companyName}}
									</view>
								</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 }}
									</view>
									<view class="row2 flex">
										<uni-icons type="phone-filled" size="20" style="margin-right: 20rpx;"
											color="#5e6d82"></uni-icons>{{ item.phone }}
									</view>
								</view>
							</view>
						</view>
						<view class="card-content style2" v-if="item.cuttentTemplate==3">
							<view class="top">
								<view class="row1">
									<text class="name">{{item.name}}</text>
									<text class="post">{{item.post}}</text>
								</view>
								<view class="row2">
									{{item.companyName}}
								</view>

							</view>
							<view class="bottom flex">
								<view class="left">
									<u--image :showLoading="true" :src="item.headSculpture" width="66px" height="66px"
										shape="circle" v-if="item.headSculpture"></u--image>
									<u--image :showLoading="true" src="/./../static/imgs/card/defaulthead.png"
										width="66px" height="66px" shape="circle" v-else></u--image>
								</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 }}
									</view>
									<view class="row2 flex">
										<uni-icons type="phone-filled" size="20" style="margin-right: 20rpx;"
											color="#5e6d82"></uni-icons>{{ item.phone }}
									</view>
								</view>
							</view>
						</view>
						<view class="car-bottom flex">
							<view class="left">
								<image src="../../static/imgs/card/home.png" mode="widthFix" style="width: 32rpx;"
									@click="toHome(item)"></image>
								<text @click='switchType(item)'
									style="color: #fff;">{{item.classify?item.classifyName:'默'}}</text>
								<image src="../../static/imgs/card/share.png" mode="widthFix" style="width: 35rpx;"
									@click="share(item)"></image>
							</view>
							<view class="right">

							</view>
						</view>
					</view>



					<!-- <view class="left">
						<view class="top flex-row-center">
							<image :src="item.headSculpture" mode="widthFix" class="img"></image>
						</view>
						<view class="bottom flex flex-evenly">
							<uni-icons @click="toHome(item)" type="home" size="20"></uni-icons>
							<text @click='switchType(item)'>{{item.classify?item.classifyName:'默'}}</text>
							<uni-icons @click='share(item)' type="redo" size="20" color=''></uni-icons>
						</view>
					</view>
					<view class="right">
						<view class="row1 flex">
							<text>{{item.name}}</text>
							<text class="line"></text>
							<text>{{item.post}}</text>
							<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>
						<view class="row2">
							{{item.companyName}}
						</view>
						<view class="row3" @click="toMap(item)">
							<uni-icons type="redo" size="20"></uni-icons>
							<text>{{item.province}}{{item.city}}{{item.area}}{{item.detailedAddress}}</text>
						</view>
						<view class="row3">
							<uni-icons type="redo" size="20"></uni-icons>
							<text>{{item.phone}}</text>
						</view>
						<view @click='remarkEdit(item)' class="row3">
							<uni-icons type="redo" size="20"></uni-icons>
							<text>{{item.remark?item.remark:'单击添加备注'}}</text>
						</view>
					</view> -->
				</view>
			</mescroll-body>
		</view>

		<u-picker :show="isShowType" :columns="typeColumns" keyName="circleName" title="选择分类" @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"
			:content='"已选中"+this.checkedList.length+"张名片，确定删除？"'></u-modal>
		<u-modal :show="modalShow" @confirm='remarkConfirm' :confirmColor="remark?'#2979ff':'#ccc'"
			showCancelButton='true' title="备注">
			<view class="slot-content">
				<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="popupshow" mode="bottom">
			<view>
				<view class="share-to">
					<text>分享到</text>
				</view>
				<view class="content">

					<view class="block" @click="toUrl()">
						<button class="moment">
							<text class="iconfont icon-weixin"></text>
							<!-- <image src="/static/img/moment.png" mode="aspectFill"></image>					 -->
							<text>扫码分享</text>
						</button>
					</view>
					<view class="block">
						<button class="shareBtn" type="default" data-name="shareBtn" open-type="share"> 分享</button>
					</view>
				</view>
				<view class="cancel" @click.stop="handleHiddenShare">
					<text>取消</text>
				</view>
			</view>
		</u-popup>
		<!-- <image :src="poster" style="width: 750rpx;height: 1334rpx;"></image> -->
		<!-- 生成图片 -->
		<poster :list="canvasData" background-color="#FFF"
		:width='750' :height='420'
			@on-success="posterSuccess" ref="poster" @on-error="posterError"></poster>
	</view>
</template>

<script>
	import Poster from '../../components/zhangyuhao-poster/Poster.vue'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		components: {
			Poster
		},
		data() {
			return {
				canReset: false,
				poster: '',
				canvasData: [],
				searchVal: '',
				isShowType: false,
				loading: true,
				typeName: '',
				typeColumns: [],
				cardHolderList: [],
				currectData: [],
				type: 1,
				popupshow: false,
				modalShow: false,
				remark: '',
				islongPress: false,
				checked: false,
				checkedList: [],
				delShow: false,
				qrcodeShow: false,
				unread: 0,
				noticeList: [],
			};
		},
		onShow() {
			if (uni.getStorageSync("userInfo")) {
				this.userInfo = uni.getStorageSync("userInfo")
				this.$nextTick(function() {
					this.canReset && this.mescroll.resetUpScroll() // 重置列表数据为第一页  
					this.canReset && this.mescroll.scrollTo(0, 0) // 重置列表数据为第一页时,建议把滚动条也重置到顶部,避免无法再次翻页的问题  
					this.canReset = true // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false
				});
			} else {
				this.login()
			}
			this.searchVal = uni.getStorageSync("search_val") ? uni.getStorageSync("search_val") : ''
		},
		mounted() {

		},
		onLoad: function() {
			wx.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			})
		},
		onShareAppMessage(res) {
			console.log(1111)
			let that = this;
			//生成名片图片
			let imageUrl = this.poster
			console.log("imageUrl", imageUrl)
			if (res.from === 'button') {
				let path = `/pages/cardHolder/scanCodeAddCard?id=${that.currectData.id}`
				return {
					title: `${that.currectData.name}分享的名片~`,
					path: path,
					imageUrl: imageUrl,
				};
			}
			if (res.from === 'menu') {
				return {
					title: '商通线上商城',
					path: '/pages/tabBarPro/index/index',
					imageUrl: imageUrl
				};
			}
		},
		// 分享到朋友圈
		onShareTimeline() {
			return {
				title: '商通线上商城',
				path: '/pages/index/index',
				imageUrl: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
			};
		},
		methods: {
			delVal(){
				this.searchVal =""
				this.mescroll.resetUpScroll()
			},
			handleHiddenShare(){
				this.popupshow=false
			},
			posterError(err) {
			    console.log(err)
			},
			posterSuccess(url) {
				console.log("hahahah",url)
			    // 生成成功，会把临时路径在这里返回
			    this.poster = url;
				this.popupshow=true
			    console.log(url)
			},
			toHome(item) {
				uni.navigateTo({
					url: "/pages/mySet/myHome?id=" + item.personalHomeId
				})
			},
			delSearchVal() {
				this.searchVal = ""
				uni.removeStorageSync('search_val')
				this.mescroll.resetUpScroll()
			},
			toUrl() {
				console.log(this.currectData)
				this.popupshow = false
				this.qrcodeShow = true
			},
			share(item) {
				this.currectData = item
				this.canvasData = [{
						type: 'image',
						path: item.currentBackground,
						use:'bg',
						x: -10,
						y: 0,
						width: 530,
						height: 325
					},
					{
						type: 'image',
						path: item.headSculpture,
						shape: 'circle',
						use:'head',
						x: 30,
						y: 30,
						width: 100,
						height: 100
					},
					{
						type: 'text',
						text:item.name,
						use:'name',
						x: 150,
						y: 50,
						size:26,
						color:'#000'
						
					},
					{
						type: 'text',
						text:item.post,
						use:'post',
						x: 240,
						y: 55,
						size:20,
						color:'#666666'
						
					},
					{
						type: 'text',
						text:item.companyName,
						use:'companyName',
						x: 150,
						y: 95,
						size:20,
						color:'#000'
						
					},
					{
						type: 'image',
						path: '../../static/imgs/card/address2.png',
						use:'address-icon',
						x: 145,
						y: 125,
						width: 30,
						height: 28
					},
					{
						type: 'textarea',
						text:item.province+item.city+item.area+item.detailedAddress,
						lineSpace:1,
						width:320,
						use:'address',
						x: 175,
						y: 135,
						size:14,
						color:'#000'
					},
					{
						type: 'image',
						path: '../../static/imgs/card/phone.png',
						use:'phone-icon',
						x: 145,
						y: 160,
						width: 26,
						height: 26
					},
					{
						type: 'text',
						text:item.phone,
						use:'phone',
						x: 175,
						y: 167,
						size:14,
						color:'#000'
					},
					{
						type: 'image',
						path: '../../static/imgs/card/remark.png',
						use:'remark-icon',
						x: 145,
						y: 190,
						width: 30,
						height: 30
					},
					{
						type: 'textarea',
						text:item.remark?item.remark:'单击添加备注',
						use:'remark',
						lineSpace:2,
						width:200,
						x: 180,
						y: 200,
						size:13,
						color:'#000'
					},
					{
						type: 'image',
						path: '../../static/imgs/card/bg3.png',
						use:'bg1',
						x: 0,
						y: 243,
						width: 370,
						height: 67
					},
					{
						type: 'image',
						path: '../../static/imgs/card/bg4.png',
						use:'bg2',
						x: 355,
						y: 243,
						width: 150,
						height: 67
					},
					{
						type: 'image',
						path: '../../static/imgs/card/home.png',
						use:'home',
						x: 65,
						y: 260,
						width: 33,
						height: 33
					},
					{
						type: 'text',
						text:item.classifyName?item.classifyName:'默',
						use:'phone',
						x: 145,
						y: 263,
						size:34,
						color:'#fff'
					},
					{
						type: 'image',
						path: '../../static/imgs/card/share.png',
						use:'share',
						x: 235,
						y: 263,
						width: 33,
						height: 28
					},

				]
				// this.popupshow = true
			},
			async delConfirm() {
				uni.showLoading({
					title: '数据加载中',
					mask: true
				})

				for (var i = 0; i < this.checkedList.length; i++) {
					await this.$request.baseRequest('admin.unimall.cardHolderInfo', 'delete', {
						id: this.checkedList[i].data.id,
					}, failres => {
						console.log('res+++++', failres.errmsg)
						this.$refs.uToast.show({
							type: 'error',
							message: failres.errmsg,
						})
					}).then(res => {
						console.log(i, this.checkedList.length - 1)
						if (i == this.checkedList.length - 1) {
							uni.hideLoading()
							this.$refs.uToast.show({
								type: 'success',
								message: '删除成功',
							})
							this.delShow = false
							this.islongPress = false
							this.mescroll.resetUpScroll()
						}
					})
				}
			},
			del() {
				this.delShow = true
			},

			longpress() {
				console.log("长按事件", 1111111111);
				this.islongPress = true;

			},
			checkboxChange(e, i) {
				console.log(e, i, 111111111)
				if (i === '') {
					console.log(this.checked)
					this.checked = !this.checked;
					this.cardHolderList.map(item => item.checked = this.checked);
					this.$forceUpdate()
					var checkList = this.cardHolderList.filter((item) => {
						return item.checked == true
					})
					var data = checkList.map((item, index) => {
						return {
							index: index,
							data: item
						}
					})
					this.checkedList = JSON.parse(JSON.stringify(data))
				} else {
					if (e[0]) {
						this.checkedList.push({
							index: i,
							data: this.cardHolderList[i]
						})
					} else {
						var index = this.checkedList.findIndex((item) => {
							return item.index == i
						})
						this.checkedList.splice(index, 1)
					}
					if (this.checkedList.length != this.cardHolderList.length) {
						this.checked = false
					}
				}

				// for(var i=0;i<this.cardList.length;i++){
				// 	console.log(this.cardList[i].checked)
				// 	// if(this.cardList[i].checkedList.length>0){
				// 	// 	this.checkedList.push(i)
				// 	// }
				// }
				console.log(this.checkedList)
			},
			remarkConfirm() {
				if (this.remark) {
					this.currectData.remark = this.remark
					this.$request.baseRequest('admin.unimall.cardHolderInfo', 'update', {
						cardHolderInfo: JSON.stringify(this.currectData),
					}, failres => {
						console.log('res+++++', failres.errmsg)
						this.$refs.uToast.show({
							type: 'error',
							message: failres.errmsg,
						})
					}).then(res => {
						this.$refs.uToast.show({
							type: 'success',
							message: '修改备注成功',
						})
						this.modalShow = false
						this.mescroll.resetUpScroll()
					})
				}
			},
			remarkEdit(item) {
				this.currectData = item
				this.modalShow = true
			},
			switchType(item) {
				this.type = 2
				this.currectData = item
				this.isShowType = true
			},
			typeConfirm(e) {
				if (this.type == 2) {
					this.currectData.classify = e.value[0].circleName
					this.$request.baseRequest('admin.unimall.cardHolderInfo', 'update', {
						cardHolderInfo: JSON.stringify(this.currectData),
					}, failres => {
						console.log('res+++++', failres.errmsg)
						this.$refs.uToast.show({
							type: 'error',
							message: failres.errmsg,
						})
					}).then(res => {
						this.$refs.uToast.show({
							type: 'success',
							message: '修改分类成功',
						})
						this.mescroll.resetUpScroll()
					})
				} else {
					this.typeName = e.value[0].circleName
				}
				this.isShowType = false
			},
			async upCallback(page) {
				var that = this
				uni.showLoading({
					title: '数据加载中'
				})
				await this.$request.baseRequest('admin.unimall.cardHolderInfo', 'list', {
					page: page.num,
					limit: page.size,
					commonId: uni.getStorageSync("userInfo").id,
					searchContent: this.searchVal
				}, failres => {
					console.log('res+++++', failres.errmsg)
					this.$refs.uToast.show({
						type: 'error',
						message: failres.errmsg,
					})
					uni.hideLoading()
				}).then(res => {
					console.log(res)
					if (page.num == 1) this.cardHolderList = [];
					let curPageLen = res.data.items.length;
					let totalPage = res.data.total;
					for (var i = 0; i < res.data.items.length; i++) {
						res.data.items[i].checked = false
						if (res.data.items[i].classify) {
							res.data.items[i].classifyName = res.data.items[i].classify[0]
						}
					}
					this.cardHolderList = res.data.items
					this.loading = false
					this.$nextTick(() => {
						that.mescroll.endBySize(curPageLen, totalPage)
					});

					uni.hideLoading()
				})

				await this.$request.baseRequest('admin.unimall.cardClassifyInfo', 'list', {
					page: 1,
					limit: 9999,
					commonId: uni.getStorageSync("userInfo").id
				}, failres => {
					console.log('res+++++', failres.errmsg)
					this.$refs.uToast.show({
						type: 'error',
						message: failres.errmsg,
					})
				}).then(res => {
					this.typeColumns = [res.data.items]
					console.log(this.typeColumns)
				})

				await this.$request.baseRequest('admin.unimall.cardNewsInfo', 'list', {
					receiveId: uni.getStorageSync("userInfo").id,
				}, failres => {
					console.log('res+++++', failres.errmsg)
					this.$refs.uToast.show({
						type: 'error',
						message: failres.errmsg,
					})
				}).then(res => {
					this.noticeList = res.data.items
					if (this.noticeList.length > 0) {
						var data = this.noticeList.filter((item) => {
							return item.newsFlag == 0
						})
						this.unread = data ? data.length : 0
					}
					console.log(this.unread)
				})
			},
			login() {
				let that = this
				uni.login({
					"provider": "weixin",
					success: function(wxres) {
						that.$request.baseRequest('commonUserApp', 'commonUserLogin', {
							loginType: 1,
							raw: JSON.stringify(wxres)
						}, failres => {
							this.$refs.uToast.show({
								type: 'error',
								message: failres.errmsg,
							})
							uni.hideLoading()
						}).then(res => {
							uni.getUserInfo({
								provider: 'weixin',
								success: function(info) {
									console.log(info)
									res.data.nickname = info.userInfo.nickName
									res.data.head = info.userInfo.avatarUrl
									that.$request.baseRequest('commonUserApp', 'edit', {
										commonUserInfo: JSON.stringify(res.data)
									}, failres => {
										this.$refs.uToast.show({
											type: 'error',
											message: failres.errmsg,
										})
										uni.hideLoading()
									}).then(res1 => {
										uni.setStorageSync("userInfo", res1.data)
									})
								}
							})
						})
					},
					fail: function(err) {
						// 登录授权失败  
						// err.code是错误码
					}
				})
			},
			toNotice() {
				uni.navigateTo({
					url: "/pages/cardHolder/notice"
				})
			},
			micOpen: function() {
				uni.navigateTo({
					url: "/pages/cardHolder/search?mic=1"
				})
			},
			uploadFile: function(tempFilePath) {
				return new Promise((resolve, reject) => {
					//调用你的接口把音频文件转为文字
					this.$minApi.upload('txasr/SentenceRecognition', null, tempFilePath)
						.then(res => {
							if (res.code == 1) {
								resolve(res.data.Result);
							} else {
								reject(e);
							}
						})
						.catch(e => {
							reject(e);
						});
				});
			},
			search() {
				uni.navigateTo({
					url: "/pages/cardHolder/search"
				})
			},
			input(res) {
				console.log('----input:', res)
			},
			clear(res) {
				uni.showToast({
					title: 'clear事件，清除值为：' + res.value,
					icon: 'none'
				})
			},
			blur(res) {
				uni.showToast({
					title: 'blur事件，输入值为：' + res.value,
					icon: 'none'
				})
			},
			focus(e) {
				uni.showToast({
					title: 'focus事件，输出值为：' + e.value,
					icon: 'none'
				})
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			},
			selectType() {
				this.isShowType = true
				this.type = 1
			},
			scan() {
				// console.log(1)
				// uni.navigateTo({
				// 	url: "/pages/cardHolder/scancode"
				// })
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						uni.navigateTo({
							url: "/pages/cardHolder/scanCodeAddCard?id=" + res.result
						})
					}
				});
			},
			toMap(item) {
				uni.navigateTo({
					url: "/pages/cardHolder/map?location=" + item.location
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		// padding: 0 20rpx;
	}

	.u-nav-slot {
		/deep/.u-badge {
			position: absolute;
			top: 0;
			right: 6rpx;
		}
	}

	.content1 {
		padding: 20rpx;
		background-color: #112253;

		.search {
			color: #9199af;
			background: #22325f;
			border-radius: 50rpx;
			width: 100%;
			padding: 10rpx 30rpx;
			box-sizing: border-box;
			margin-right: 20rpx;
		}
	}

	.content2 {
		background: #112253;
		color: #fff;
		padding: 20rpx 20rpx 200rpx 20rpx;
		border-radius: 0px 0px 20px 20px;

	}

	.content3 {
		// padding:0 20rpx;
		position: relative;
		top: -170rpx;

		.style1 {
			display: flex;
			padding: 20rpx 30rpx;
			width: 85%;
			margin-bottom: 90rpx;

			.left {
				width: 132rpx;
				height: 132rpx;
				border-radius: 50%;
			}

			.right {
				margin-left: 40rpx;

				.row1 {
					.name {
						font-size: 38rpx;
						font-weight: bold;
						color: #040000;
						margin-right: 20rpx;
					}

					.post {
						font-size: 26rpx;
						font-weight: 500;
						color: #666666;
					}
				}

				.row2 {
					margin-top: 20rpx;
					font-size: 24rpx;
					font-weight: bold;
					color: #323333;
				}

				.row3 {
					margin-top: 30rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #323333;

				}
			}
		}

		.style2 {
			padding: 30rpx;
			margin-bottom: 100rpx;

			.top {
				.row1 {
					.name {
						font-size: 38rpx;
						font-weight: bold;
						color: #040000;
						margin-right: 20rpx;
					}

					.post {
						font-size: 26rpx;
						font-weight: 500;
						color: #666666;
					}
				}

				.row2 {
					margin-top: 20rpx;
					font-size: 24rpx;
					font-weight: bold;
					color: #323333;
				}
			}

			.bottom {
				margin-top: 48rpx;

				.left {
					margin-right: 40rpx;

					.row1 {
						.name {
							font-size: 38rpx;
							font-weight: bold;
							color: #040000;
							margin-right: 20rpx;
						}

						.post {
							font-size: 26rpx;
							font-weight: 500;
							color: #666666;
						}
					}

					.row2 {
						margin-top: 20rpx;
						font-size: 24rpx;
						font-weight: bold;
						color: #323333;
					}
				}

				.right {

					.row1,
					.row2 {
						font-size: 24rpx;
						font-weight: 500;
						color: #323333;
					}

					.row2 {
						margin-top: 20rpx;
					}
				}
			}

		}

		.card-list-item {
			width: calc(100%);
			// left:-20rpx;
			position: relative;
			border-radius: 30rpx;
			padding: 40rpx;
			box-sizing: border-box;

			.car-bottom {
				position: absolute;
				bottom: 63rpx;
				left: 20rpx;

				// width: calc(100% - 40rpx);
				.left {
					// top: -40rpx;
					position: absolute;
					padding: 20rpx 0;
					width: 70vw;
					height: 80rpx;
					box-sizing: border-box;
					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%;
				}
			}

			.left {
				width: 30%;

				.top {

					margin-bottom: 20rpx;
				}

				.img {
					width: 80%;
				}

				.bottom {}
			}

			.right {
				.row1 {
					.line {
						width: 1px;
						height: 20px;
						margin: 0 20rpx;
						background: black;
					}
				}
			}
		}

	}

	.slot-content {
		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;
	}
</style>