moxuan_takeaway_user/pages/my/index.vue

<template>
	<view class="content">
		<view class="head">
			<view class="head_image">
				<!-- #ifdef MP-WEIXIN -->
				<button open-type="chooseAvatar" v-if="token" @chooseavatar="onChooseAvatar">
					<image
						style="width: 90rpx; height: 90rpx; border-radius: 50%"
						:src="avatar ? avatar : 'https://mxys.chuanghai-tech.com/wmfile/20250814/fff4dc5d02ea4af881db9685f2e1e61d.png'"
					></image>
				</button>
				<image
					v-if="!token"
					@click="bindlogin"
					style="width: 90rpx; height: 90rpx; border-radius: 50%"
					src="https://mxys.chuanghai-tech.com/wmfile/20250814/fff4dc5d02ea4af881db9685f2e1e61d.png"
				></image>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<image
					@click="avatar ? goLogin() : ''"
					style="width: 90rpx; height: 90rpx; border-radius: 50%"
					:src="avatar ? avatar : 'https://mxys.chuanghai-tech.com/wmfile/20250814/fff4dc5d02ea4af881db9685f2e1e61d.png'"
				></image>
				<!-- #endif -->
				<view class="lovip" v-if="isVip">
					<image src="../../static/images/my/vip.png" style="width: 88rpx; height: 32rpx; top: -30rpx"></image>
				</view>
			</view>

			<view class="head_name">
				<!-- -->
				<view class="name" v-if="token" @click="goShop('/pages/my/updateNickName')">{{ userName }}</view>
				<view class="name" v-if="!token" @click="bindlogin">登录</view>
			</view>
		</view>
		<view class="margin-lr padding-lr-sm padding-tb radius flex justify-between" v-if="XCXIsSelect == '是'">
			<view class="text-center text-black" @click="goShop('/my/coupon/index')">
				<view class="text-lg text-bold">{{ msgData.countCoupon }}</view>
				<view>外卖优惠券</view>
			</view>
			<!-- @click="goShop('/my/wallet/index')" -->
			<view class="text-center text-black">
				<view class="text-lg text-bold">{{ msgData.userMoney }}</view>
				<view>我的余额</view>
			</view>
			<view class="text-center text-black" @click="goShop('/my/task/index')">
				<view class="text-lg text-bold">{{ msgData.userIntegral }}</view>
				<view>我的积分</view>
			</view>
		</view>
		<view class="margin-bottom padding-lr" style="position: relative" v-if="XCXIsSelect == '是'">
			<image src="../../static/images/my/bg.png" style="width: 100%; height: 110rpx" mode=""></image>
			<view class="flex justify-between margin-lr padding-tb-sm radius" style="position: absolute; top: 0; width: 640rpx">
				<image src="../../static/images/my/huiyuan.png" style="width: 70rpx; height: 70rpx"></image>
				<view class="flex-sub margin-left text-lg text-bold" style="line-height: 74rpx; color: #604320">超级会员享特权</view>
				<view v-if="!isVip" class="btn-bg" style="color: #604320" @click="goNav({ url: '/my/vip/index' })">去开通</view>
				<view v-if="isVip" class="btn-bg" style="color: #604320" @click="goNav({ url: '/my/vip/index' })">已开通</view>
			</view>
		</view>
		<view class="center flex justify-between bg-white margin-top padding-lr padding-tb-lg radius">
			<view class="flex justify-between flex-sub padding-right" style="border-right: 2rpx solid #cccccc" @click="goShop('/my/task/index')">
				<view class="">
					<view class="text-black text-xl text-bold">每日任务</view>
					<view class="text-sm margin-top-xs">每日签到领积分</view>
				</view>
				<image src="../../static/images/my/renwu.png" mode="" style="width: 88rpx; height: 88rpx"></image>
			</view>
			<view class="flex justify-between flex-sub padding-left" @click="goShop('/my/integral/index')">
				<view class="">
					<view class="text-black text-xl text-bold">积分商城</view>
					<view class="text-sm margin-top-xs flex align-center">积分兑换优惠券</view>
				</view>
				<image src="../../static/images/my/jifen.png" mode="" style="width: 88rpx; height: 88rpx"></image>
			</view>
		</view>

		<view class="margin padding-lr-sm padding-tb bg-white radius">
			<view class="flex justify-between align-center">
				<view class="text-lg text-bold text-black">推荐工具</view>
			</view>
			<view class="flex flex-wrap">
				<!-- #ifdef MP-WEIXIN -->
				<view class="text-center margin-tb-sm" style="width: 25%" v-if="XCXIsSelect == '是'">
					<button class="btn" open-type="share">
						<image src="../../static/images/my/4.png" style="width: 50rpx; height: 48rpx" mode=""></image>
						<view>分享好友</view>
					</button>
				</view>

				<view class="text-center margin-tb-sm" style="width: 25%" @click="goApplet(shopAppId)" v-if="shopStatus == 1 && XCXIsSelect == '是'">
					<image src="../../static/images/my/1.png" style="width: 55rpx; height: 55rpx" mode="scaleToFill"></image>
					<view class="text-sm">商家入驻</view>
				</view>
				<view class="text-center margin-tb-sm" style="width: 25%" @click="goNav({ url: '/my/apply/index' })" v-if="shopStatus != 1 && XCXIsSelect == '是'">
					<image src="../../static/images/my/1.png" style="width: 55rpx; height: 55rpx" mode="scaleToFill"></image>
					<view class="text-sm">商家入驻</view>
				</view>
				<!-- <view class="text-center margin-tb-sm" style="width: 25%;" @click="goApplet(qishouAppId)"
					v-if="XCXIsSelect=='是'">
					<image src="../../static/images/my/11.png" style="width: 55rpx;height: 55rpx;" mode="scaleToFill">
					</image>
					<view class="text-sm">骑手入驻</view>
				</view> -->
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<view class="text-center margin-tb-sm" style="width: 25%" @click="goNav({ url: '/my/apply/index' })" v-if="shopStatus != 1">
					<image src="../../static/images/my/1.png" style="width: 55rpx; height: 55rpx" mode="scaleToFill"></image>
					<view class="text-sm">商家入驻</view>
				</view>
				<!-- #ifdef APP -->
				<view class="text-center margin-tb-sm" style="width: 25%" @click="shopRuzhu" v-else>
					<image src="../../static/images/my/1.png" style="width: 55rpx; height: 55rpx" mode="scaleToFill"></image>
					<view class="text-sm">商家入驻</view>
				</view>
				<!-- #endif -->
				<!-- #endif -->

				<view class="text-center margin-tb-sm" style="width: 25%" @click="goNav({ url: '/my/tousu/index' })" v-if="XCXIsSelect == '是'">
					<image src="../../static/images/order/tousu.png" style="width: 55rpx; height: 55rpx" mode="scaleToFill"></image>
					<view class="text-sm">我的投诉</view>
				</view>
				<view class="text-center margin-tb-sm" style="width: 25%" @click="goNav({ url: '/my/myPingJia/myPingJia' })" v-if="XCXIsSelect == '是'">
					<image src="../../static/images/order/pingjia.png" style="width: 55rpx; height: 55rpx" mode="scaleToFill"></image>
					<view class="text-sm">我的评价</view>
				</view>
				<view class="text-center margin-tb-sm" style="width: 25%" @click="goNav({ url: '/my/helpList/index' })">
					<image src="../../static/images/my/12.png" style="width: 55rpx; height: 55rpx" mode="scaleToFill"></image>
					<view class="text-sm">帮助中心</view>
				</view>
				<view class="text-center margin-tb-sm" style="width: 25%" @click="goNav({ url: '/my/msg/index' })" v-if="XCXIsSelect == '是'">
					<image src="../../static/images/my/3.png" style="width: 55rpx; height: 55rpx" mode="scaleToFill"></image>
					<view class="text-sm">消息中心</view>
				</view>
				<!-- <view class="text-center margin-tb-sm" style="width: 25%;" @click="goNav({url:'/running/index/index'})"
					v-if="XCXIsSelect=='是'">
					<image src="../../static/images/my/5.png" style="width: 55rpx;height: 55rpx;" mode="scaleToFill">
					</image>
					<view class="text-sm">同城跑腿</view>
				</view> -->
				<view class="text-center margin-tb-sm" style="width: 25%" @click="goNav({ url: '/my/setting/chat' })" v-if="XCXIsSelect == '是'">
					<image src="../../static/images/my/6.png" style="width: 55rpx; height: 55rpx" mode="scaleToFill"></image>
					<view class="text-sm">联系客服</view>
				</view>
				<view class="text-center margin-tb-sm" style="width: 25%" @click="goNav({ url: '/my/address/index' })">
					<image src="../../static/images/my/7.png" style="width: 55rpx; height: 55rpx" mode="scaleToFill"></image>
					<view class="text-sm">地址管理</view>
				</view>
				<!-- <view class="text-center margin-tb-sm" style="width: 25%;" @click="goNav({url:'/my/hongbao/hongbao'})"
					v-if="XCXIsSelect=='是'">
					<image src="../../static/images/my/9.png" style="width: 55rpx;height: 55rpx;" mode="scaleToFill">
					</image>
					<view class="text-sm">跑腿红包</view>
				</view> -->
				<view class="text-center margin-tb-sm" style="width: 25%; position: relative" @click="goNav({ url: '/my/chat/index' })" v-if="XCXIsSelect == '是'">
					<image src="../../static/images/order/kefu.png" style="width: 55rpx; height: 55rpx" mode="scaleToFill"></image>
					<view class="text-sm">聊天室</view>
					<view
						v-if="messageCount > 0"
						style="
							height: 32rpx;
							width: 32rpx;
							border-radius: 100rpx;
							background-color: red;
							color: #fff;
							text-align: center;
							position: absolute;
							top: -10rpx;
							right: 24rpx;
						"
					>
						{{ messageCount }}
					</view>
				</view>
				<view class="text-center margin-tb-sm" style="width: 25%" @click="goNav({ url: '/my/setting/index' })">
					<image src="../../static/images/my/8.png" style="width: 55rpx; height: 55rpx" mode="scaleToFill"></image>
					<view class="text-sm">系统设置</view>
				</view>
				<!-- <view class="text-center margin-tb-sm" style="width: 25%" @click="goNav({ url: '/my/taocan/list' })">
					<image
						src="https://mxys.chuanghai-tech.com/wmfile/20250812/6431457fbda24074af9bcd5c229eaa7e.png"
						style="width: 55rpx; height: 55rpx"
						mode="scaleToFill"
					></image>
					<view class="text-sm">我的套餐</view>
				</view> -->
			</view>
		</view>

		<!-- 联系客服悬浮按钮区域 -->
		<view class="serviceBtn" @click="goChat"></view>

		<!-- 用于图片压缩的canvas画布 -->
		<canvas
			:style="{
				width: cw + 'px',
				height: cw + 'px',
				position: 'absolute',
				zIndex: -1,
				left: '-10000rpx',
				top: '-10000rpx'
			}"
			canvas-id="zipCanvas"
		></canvas>
		<!--画布结束-->
	</view>
</template>

<script>
import configdata from '@/common/config.js'
import getLessLimitSizeImage from '@/utils/imageCompress.js'
export default {
	data() {
		return {
			messageCount: 0,

			avatar: '',
			userName: '',
			checkCertification: -1,
			arr: [],
			showModal: true,
			msgData: {
				userIntegral: 0,
				countCoupon: 0,
				userMoney: 0
			},

			tuiguang: '',
			tuiguangImg: '',
			token: '',
			XCXIsSelect: '否',
			shopStatus: '',
			isVip: false,
			messageCount: 0,
			time: '',

			qishouAppId: '', //骑手APPID
			shopAppId: '', //商户appid
			//画板边长默认是屏幕宽度，正方形画布
			cw: uni.getSystemInfoSync().windowWidth
		}
	},
	onLoad() {
		let that = this
		that.token = that.$queue.getData('token')
		that.$Request.get('/app/common/type/248').then((res) => {
			//跑腿师傅端微信小程序APPID  248
			if (res.code == 0) {
				that.qishouAppId = res.data.value
			}
		})
		that.$Request.get('/app/common/type/305').then((res) => {
			//商户端微信小程序APPID  305
			if (res.code == 0) {
				that.shopAppId = res.data.value
			}
		})
		that.XCXIsSelect = that.$queue.getData('XCXIsSelect') ? that.$queue.getData('XCXIsSelect') : '是'
		that.time = setInterval(function () {
			that.messageCount = uni.getStorageSync('messageCount')
			if (that.messageCount) {
				that.messageCount = that.messageCount
			} else {
				that.messageCount = 0
			}
		}, 3000)
		that.getZiZhi()

		console.log('that.XCXIsSelect___:' + that.XCXIsSelect)
	},
	onHide() {
		clearInterval(this.time)
	},
	onShow() {
		let that = this
		// this.avatar = this.$queue.getData('avatar') || '';
		// this.userName = this.$queue.getData('userName') || '';
		that.token = that.$queue.getData('token')

		if (that.token) {
			that.getUserInfo()
			that.getMsgData()

			that.messageCount = uni.getStorageSync('messageCount')
			if (that.messageCount) {
				that.messageCount = that.messageCount
			} else {
				that.messageCount = 0
			}
		} else {
			that.token = ''
			that.isVip = false
			that.userName = ''
			that.avatar = ''
			that.msgData.userIntegral = 0
			that.msgData.countCoupon = 0
			that.msgData.userMoney = 0
		}
	},
	onShareAppMessage(res) {
		//发送给朋友
		return {
			title: this.tuiguang,
			path: '/pages/index/index',
			imageUrl: this.tuiguangImg
		}
	},
	onShareTimeline(res) {
		//分享到朋友圈
		return {
			title: this.tuiguang,
			path: '/pages/index/index',
			imageUrl: this.tuiguangImg
		}
	},
	methods: {
		goChat() {
			if (this.token) {
				uni.navigateTo({
					url: '/my/setting/chat'
				})
			} else {
				this.bindlogin()
			}
		},
		//微信填写能力获取头像
		onChooseAvatar(e) {
			console.log(e.detail.avatarUrl)
			let that = this
			let token = uni.getStorageSync('token')
			uni.showLoading({
				title: '上传中...',
				mask: true // 是否显示透明蒙层，防止触摸穿透
			})
			uni.uploadFile({
				// url: config.APIHOST1 + '/alioss/upload', //仅为示例，非真实的接口地址
				url: that.config('APIHOST1') + '/alioss/upload', //仅为示例，非真实的接口地址
				filePath: e.detail.avatarUrl,
				header: {
					token: token
				},
				name: 'file',
				success: (uploadFileRes) => {
					let url = JSON.parse(uploadFileRes.data).data

					let data = {
						avatar: url
					}

					that.$Request.postT('/app/user/updateUserImageUrl', data).then((res) => {
						console.log(res)
						uni.hideLoading()
						if (res.code === 0) {
							that.$queue.showToast('更新成功')
							that.getUserInfo()
						}
					})
				}
			})
		},
		// getName(){
		// 	wx.requestPayment({
		// 	  timeStamp: '1723710543',
		// 	  nonceStr: '7db6a8aec2a542c7a4852c856595fcd3',
		// 	  package: 'prepay_id=wx15162903191561245ec1269166539c0000',
		// 	  signType: 'RSA',
		// 	  paySign: 'AyvptQMyOiP5cmbInu3fsg4ww3HYm+YYOCwkRyFM2DgFpe3DO4jAhyHpaFsZywnaK0rZVIFI1lgF3tV5fFxTSj1PMSzZpFEVPOHg5uCw6O21ESIJ9XuockX9iWyWcNv5gY5W8ARm73Kt/bZRjyXtE68Ryr1D5Fievo3gh7u71vt2FczvO4Nb0C2u7BY3UOWQ9BEHskuYPhpBkpeuoogorNRtBbg4DHiege1hhcf5On3of/xsGnBPMHNUgix8ljSX+A769XGedzxzQQ5z63Pi7svletdlUewyHdhyTLhXhVqHQLWG/ImdCw3PaXjsoefbdXxv8e3epx3Kux77nTta3w==',
		// 	  success (res) {
		// 		  console.log(res,'成功')
		// 	  },
		// 	  fail (res) {
		// 		  console.log(res,'失败')
		// 	  }
		// 	})
		// },
		goLogin() {
			let that = this
			var url = null
			let userId = this.$queue.getData('userId')
			if (!userId) {
				this.bindlogin()
				return
			}
			uni.showActionSheet({
				// itemList按钮的文字接受的是数组
				itemList: ['查看头像', '从相册选择图片'],
				success(e) {
					var index = e.tapIndex
					if (index === 0) {
						// 用户点击了预览当前图片
						// 可以自己实现当前头像链接的读取
						let url = that.avatar
						let arr = []
						arr.push(url)
						uni.previewImage({
							// 预览功能图片也必须是数组的
							urls: arr
						})
					} else if (index === 1) {
						uni.chooseImage({
							count: 1,
							sourceType: ['album'],
							success: (res) => {
								let token = uni.getStorageSync('token')

								for (let i = 0; i < res.tempFiles.length; i++) {
									//这里的id和页面中写的html代码的canvas的id要一致
									let canvasId = 'zipCanvas'
									//原图的路径
									let imagePath = res.tempFiles[i].path
									//大小限制
									let limitSize = 1024 * 2
									//初始绘画区域是画布自身的宽度也就是屏幕宽度
									let drawWidth = uni.getSystemInfoSync().windowWidth
									let that = this
									getLessLimitSizeImage(canvasId, imagePath, limitSize, drawWidth, that, (resPath) => {
										uni.showLoading({
											title: '上传中'
										})
										uni.uploadFile({
											url: that.config('APIHOST') + '/alioss/upload',
											filePath: resPath,
											header: {
												token: token
											},
											name: 'file',
											success: (uploadFileRes) => {
												url = JSON.parse(uploadFileRes.data).data
												let data = {
													avatar: url
												}
												that.$Request.postT('/app/user/updateUserImageUrl', data).then((res) => {
													uni.hideLoading()
													if (res.code === 0) {
														that.$queue.showToast('更新成功')
														that.getUserInfo()
													}
												})
											},
											fail: () => {
												uni.showToast({
													title: '上传失败',
													icon: 'error'
												})
											}
										})
									})
								}
							}
						})
					}
				}
			})
		},
		shopRuzhu() {
			uni.showToast({
				title: '请先下载同城外卖商户端APP',
				icon: 'none'
			})
		},
		getMsgData() {
			this.$Request.get('/app/userintegral/findUserMessage').then((res) => {
				if (res.code == 0) {
					this.msgData = res.data
				}
			})
		},
		// 分享文案和图片
		getZiZhi() {
			this.$Request.getT('/app/common/type/239').then((res) => {
				if (res.code === 0) {
					this.tuiguang = res.data.value
				}
			})
			this.$Request.getT('/app/common/type/238').then((res) => {
				if (res.code === 0) {
					this.tuiguangImg = res.data.value
				}
			})
		},
		goSwt(e) {
			uni.setStorageSync('current', e)
			setTimeout(function () {
				uni.switchTab({
					url: '/pages/order/index'
				})
			}, 10)
		},
		goApplet(e) {
			uni.navigateToMiniProgram({
				appId: e,
				path: 'pages/index/index',
				success(res) {
					// 打开成功
				}
			})
		},
		goNav(e) {
			if (this.token) {
				if (e.name == '注册骑手') {
					uni.navigateToMiniProgram({
						appId: 'wxa59b58efa950ba1f',
						path: '/pages/login/login',
						extraData: {
							data1: 'test'
						},
						success(res) {
							// 打开成功
							console.log('打开成功')
						}
					})
				} else if (e.name == '分享好友') {
					uni.share({
						provider: 'weixin',
						scene: 'WXSceneSession',
						type: 1,
						summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
						success: function (res) {
							console.log('success:' + JSON.stringify(res))
						},
						fail: function (err) {
							console.log('fail:' + JSON.stringify(err))
						}
					})
				} else {
					uni.navigateTo({
						url: e.url
					})
				}
			} else if (e.url == '/my/helpList/index') {
				uni.navigateTo({
					url: e.url
				})
			} else {
				this.bindlogin()
			}
		},
		goShop(url) {
			if (this.token) {
				uni.navigateTo({
					url
				})
			} else {
				this.bindlogin()
			}
		},
		getUserInfo() {
			this.$Request.getT('/app/user/selectUserMessage').then((res) => {
				console.log(res)
				if (res.code == 0) {
					if (parseInt(res.data.checkCertification)) {
						this.checkCertification = parseInt(res.data.checkCertification)
					} else {
						this.checkCertification = -1
					}
					this.isVip = res.data.isVip
					this.shopStatus = res.data.shopStatus
					this.$queue.setData('avatar', res.data.avatar ? res.data.avatar : 'https://mxys.chuanghai-tech.com/wmfile/20250814/fff4dc5d02ea4af881db9685f2e1e61d.png')
					this.$queue.setData('userId', res.data.userId)
					this.$queue.setData('phone', res.data.phone)
					this.$queue.setData('status', res.data.status)
					this.$queue.setData('userName', res.data.userName ? res.data.userName : res.data.nickName)
					this.avatar = res.data.avatar ? res.data.avatar : 'https://mxys.chuanghai-tech.com/wmfile/20250814/fff4dc5d02ea4af881db9685f2e1e61d.png'
					this.userName = res.data.userName ? res.data.userName : res.data.nickName
				}
			})
		},
		bindlogin() {
			if (!this.token) {
				uni.navigateTo({
					url: '/pages/public/login'
				})
			}
		},
		bindTo(name) {
			console.log(name)
			if (this.token) {
				if (name == '我的红包') {
					uni.navigateTo({
						url: '/pages/my/hongbao/hongbao'
					})
				} else if (name == '注册骑手') {
					uni.navigateToMiniProgram({
						appId: 'wx5ed22ce813e47796',
						path: '/pages/index/index',
						extraData: {
							data1: 'test'
						},
						success(res) {
							// 打开成功
							console.log('打开成功')
						}
					})
				} else if (name == '意见反馈') {
					uni.navigateTo({
						url: '/pageA/feedback/feedback'
					})
				} else if (name == '联系客服') {
					uni.navigateTo({
						url: '/pageA/kefu/kefu'
					})
				} else if (name == '系统设置') {
					uni.navigateTo({
						url: '/pages/my/set/set'
					})
				} else if (name == '地址管理') {
					uni.navigateTo({
						url: '/pageA/address/address'
					})
				}
			} else {
				this.bindlogin()
			}
		},
		bindapprove() {
			if (this.token) {
				uni.navigateTo({
					url: '/pages/my/approve/approve'
				})
			} else {
				this.bindlogin()
			}
		},
		binduser() {
			if (this.token) {
				// uni.navigateTo({
				// 	url: '/pages/my/userphone/userphone'
				// })
			} else {
				this.bindlogin()
			}
		},
		config: function (name) {
			var info = null
			if (name) {
				var name2 = name.split('.') //字符分割
				if (name2.length > 1) {
					info = configdata[name2[0]][name2[1]] || null
				} else {
					info = configdata[name] || null
				}
				if (info == null) {
					let web_config = cache.get('web_config')
					if (web_config) {
						if (name2.length > 1) {
							info = web_config[name2[0]][name2[1]] || null
						} else {
							info = web_config[name] || null
						}
					}
				}
			}
			return info
		}
	}
}
</script>

<style>
button::after {
	border: none;
	background-color: none;
}

button {
	position: relative;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0px;
	padding-right: 0px;
	box-sizing: border-box;
	text-decoration: none;
	line-height: 1.35;
	overflow: hidden;
	color: #666666;
	/* background-color: #fff; */
	background-color: rgba(255, 255, 255, 0) !important;
	width: 100%;
	height: 100%;
}

.btn-bg {
	width: 64px;
	height: 28px;
	background: linear-gradient(90deg, #cda26e 0%, #dcb78a 100%);
	border-radius: 28px;
	text-align: center;
	line-height: 28px;
	margin-top: 10upx;

	color: '#604320';
}

body {
	background: #f5f5f5;
}

/* #ifndef MP-WEIXIN */
page {
	background: #f2eded;
}

/* #endif */

.content {
	width: 100%;
}

.btn {
	font-size: 24upx;
	/* width: 95%; */
	text-align: center;
	background: #ffffff;
	margin-top: 6rpx;
}

.head {
	/* width: 100%; */

	/* height: 200rpx; */
	display: flex;
	align-items: center;
	padding: 30rpx;
	border-radius: 16rpx;
	background-image: linear-gradient(#fefbda, #f7f7f7);
}

.head_image {
}

.head_image > image {
	width: 90rpx;
	height: 90rpx;
	border-radius: 50%;
}

.head_name {
	margin-left: 10rpx;
}

.name {
	font-size: 38rpx;
	font-weight: bold;
}

.approve {
	position: absolute;
	top: 100rpx;
	font-size: 24rpx;
	color: #999999;
}

/* 列表 */
.use_list {
	width: 100%;
	background: #ffffff;
	margin-top: 20rpx;
}

.list_box {
	width: 90%;
	margin: 0 auto;
	display: flex;
	height: 110rpx;
}

.box_left {
	flex: 1;
	display: flex;
	justify-content: left;
	align-items: center;
}

.box_right {
	flex: 1;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	color: #808080;
}

.use_name {
	margin-left: 30rpx;
	font-size: 32rpx;
}

.use_image image {
	width: 50rpx;
	height: 50rpx;
}

.center {
	width: 94%;

	/* line-height: 1.5; */
	background-color: #ffffff;
	border-radius: 18rpx;
	margin: 0 auto 0;
	display: flex;
	justify-content: space-between;
}

.header_text2 {
	font-size: 24rpx;
	font-weight: 500;
	color: #999999;
	margin-top: 10rpx;
}

.header_text4 {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}

.serviceBtn {
	position: fixed;
	right: 52rpx;
	bottom: 50rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100rpx;
	height: 120rpx;
	color: #fff;
	font-size: 20rpx;
	background-image: url(@/static/images/my/kefu.png);
	background-repeat: no-repeat;
	background-size: contain;
}
</style>