<template>
	<view class="body">
		<view class="head">
			<view class="avatar">
				<u-avatar :mode="mode" :size="size" :src="storeData.door_photo" :text="text" :showLevel="showLevel"
					:showSex="showSex" :sexIcon="sexIcon" :bgColor='bgColor'></u-avatar>
			</view>
			<view class="text">
				<view>{{storeData.shop_name}}</view>
				<view style="font-size: 25rpx; padding-top: 10rpx;">联系人:{{storeData.contact_name}}</view>
			</view>
		</view>
		<view class="wrapper">
			<view class="store-menu">
				<u-cell-group>
					<u-cell title="结算记录" @click="go2Page('/pages/store/withdraw/withdraw')"></u-cell>
					<u-cell title="结算银行卡" @click="go2Page('/pages/store/card')"></u-cell>
				</u-cell-group>
				<view class="hr"></view>
				<u-cell-group>
					<!-- <u-cell title="店铺设置" @click="go2Page('/pages/store/setup')">
					</u-cell> -->
					<!-- <u-cell @click="go2Page('/pages/store/withdraw/creditadd')" title="扫码送金豆">
					</u-cell> -->
				</u-cell-group>
				<view class="hr"></view>
				<u-cell-group>
					<u-cell title="安全中心" @click="go2Page('/pages/store/secret/secret')"></u-cell>
					<u-cell title="修改/忘记密码"
						@click="showToast"></u-cell>
					<!-- <u-cell title="修改/忘记密码"
						@click="go2Page('/pages/store/modify_password/modify_password')"></u-cell> -->

					<!-- <u-cell title="修改登录手机号"
						@click="go2Page('/pages/store/change_phone/change_phone')"></u-cell> -->
				</u-cell-group>
				<view class="hr"></view>

				<u-cell-group>
					<!-- #ifdef APP-PLUS -->
					<u-cell title="检查更新" @click="checkUpdate"></u-cell>
					<!-- #endif -->
					<u-cell title="关于我们" @click="redirectToAboutUs"></u-cell>
					<u-cell title="客服电话" @click="makeCall"></u-cell>
					<!-- <u-cell title="设备信息" @click="go2Page('/pages/store/device_info/device_info')"></u-cell> -->
				</u-cell-group>
			</view>

			<view class="u-m-t-20" style="padding-top: 10rpx;">
				<u-button @click="btnLogout" shape="circle"
					style="width: 50%;color: #FFA332; font-weight: bold; letter-spacing: 5rpx;">退出登录</u-button>
			</view>

			<view class="bottom">
				<view class="items">
					<navigator class="item"
						url="../web_view/web_view?title=服务协议&url=https%3A//yld.angyakeji.com/html/article/merch_user_agree.html"
						open-type="navigate">《服务协议》</navigator>
					<navigator class="item"
						url="../web_view/web_view?title=隐私协议&url=https%3A//yld.angyakeji.com/html/article/merch_service.html"
						open-type="navigate">《隐私协议》</navigator>
				</view>
			</view>
		</view>

		<u-modal ref="uModal" :show="show" :show-cancel-button="true" :show-title="showTitle"
			:async-close="asyncClose" @cancel='cancel' @confirm="confirmLogOut" :content="content" :cancel-style="cancelStyle"
			:confirm-style="confirmStyle" :content-style="contentStyle" cancel-text="取消">
		</u-modal>

	</view>
</template>

<script>
	let that = {}
	export default {
		data() {
			return {
				storeData: {},
				// modal
				show: false,
				zoom: false,
				content: "确定退出登录？",
				contentSlot: false,
				showTitle: false,
				asyncClose: false,
				cancelStyle: {
					color: "#FFA332",
					borderRadius: "50rpx",
					borderWidth: "1rpx",
					borderStyle: "solid",
					margin: "30rpx 40rpx 20rpx 40rpx",
					fontSize: "30rpx",
					letterSpacing: "15rpx",
					paddingLeft: "10rpx",
				},

				confirmStyle: {
					color: "#FFFFFF",
					borderRadius: "50rpx",
					borderWidth: "1rpx",
					borderStyle: "solid",
					backgroundColor: "#FFA332",
					margin: "30rpx 40rpx 20rpx 40rpx",
					fontSize: "30rpx",
					letterSpacing: "15rpx",
					paddingLeft: "10rpx",
				},
				contentStyle: {
					paddingTop: "80rpx",
					paddingBottom: "60rpx",
					letterSpacing: "10rpx",
					fontSize: "35rpx",
				},

				// avatar
				mode: "circle",
				src: "http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/avatar.jpg",
				text: "", // 优先级比src高
				size: "140",
				showLevel: false,
				showSex: false,
				sexIcon: "man",
				bgColor: "#fcbd71"
			};
		},
		onShow() {
			that = this
			 this.init()
		},
		methods: {
			init() {
					this.storeData = uni.getStorageSync('shopInfo')
			},
			showToast(){
				this.$u.toast('请去联系客服')
			},
			go2News() {
				this.go2Page(
					"/pages/web_view/web_view?title=最新活动&url=" +
					escape(
						"https://v1.angyakeji.com/appindex.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=article&aid=15"
					)
				);
			},
			btnLogout() {
				this.show = true;
			},
			confirmLogOut() {
				uni.clearStorageSync()
				setTimeout(() => {
					this.show = false;
					uni.redirectTo({
						url: '/pages/login/index'
					})
				}, 100);
			},
			cancel(){
					this.show = false;
			},
			go2Page(urlPath) {
				uni.navigateTo({
					url: urlPath,
				});
			},
			redirectToAboutUs() {
				uni.navigateTo({
					url: "/pages/web_view/web_view?url=" +
						escape(
							"https%3A//yld.angyakeji.com/html/article/aboutus.html"
						) +
						"&title=关于我们",
				});
			},
			checkUpdate() {
				getApp().globalData.util.forceUpateApk()
			},
			makeCall() {
				let tel = '4001108766'
				uni.showModal({
					title: '客服电话',
					content: tel,
					confirmText: '复制电话',
					success: ({
						confirm,
						cancel
					}) => {
						if (confirm) {
							uni.setClipboardData({
								data: tel,
								success: (result) => {
									uni.showToast({
										title: '复制成功',
										icon: 'success',
										mask: true
									})
								},
								fail: (error) => {}
							})
						}
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.body {
		background-color: #f3f3f3;
	}
	
	.body .head {
		display: flex;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 30rpx;
		padding-bottom: 62rpx;
		letter-spacing: 5rpx;
		height: auto;
		background-color: #ed6d00;
	}
	
	/deep/.u-cell-group {
		background-color: #fff;
	}
	/deep/.u-cell__title-text {
		font-size:28rpx;
		color: #606266;
	}
	.body .head .text {
		text-align: left;
		font-size: 35rpx;
		padding-left: 20rpx;
		color: #fff;
	}
	
	.wrap {
		padding: 24rpx;
	}
	
	.navbar-right {
		margin-right: 24rpx;
		display: flex;
	}
	
	.search-wrap {
		margin: 0 20rpx;
		flex: 1;
	}
	
	.right-item {
		margin: 0 12rpx;
		position: relative;
		color: #ffffff;
		display: flex;
	}
	
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
	}
	
	.map-wrap {
		display: flex;
		align-items: center;
		padding: 4px 6px;
		background-color: rgba(240, 240, 240, 0.35);
		color: #fff;
		font-size: 22rpx;
		border-radius: 100rpx;
		margin-left: 30rpx;
	}
	/deep/.u-cell__body{
		padding: 26rpx 32rpx !important;
	}
	/deep/.u-line{
		border-bottom: 1px solid #eaebed !important;
	}
	
	.map-wrap-text {
		padding: 0 6rpx;
	}
	
	.wrapper {
		width: 100%;
		margin-left: 0rpx;
	}
	
	.wrapper .box-first {
		margin-top: -40rpx;
		padding: 30rpx 30rpx 30rpx 30rpx;
		font-size: 24rpx;
	}
	
	.wrapper .box-first .text {
		width: 100rpx;
	}
	
	.wrapper .box-first .icons {
		padding-top: 50rpx;
		white-space: nowrap;
	}
	
	.wrapper .box {
		width: 100%;
		background-color: #ffffff;
		box-shadow: 0px 0px 0px 0px rgba(194, 188, 188, 0.3);
		border-radius: 30rpx 30rpx 0rpx 0rpx;
	}
	
	.wrapper .box-second {
		border-radius: 0rpx;
		margin-top: 10rpx;
	}
	
	.image-store {
		width: 80rpx !important;
		height: 80rpx !important;
	}
	
	.store-menu image {
		width: 30rpx;
		margin-right: 15rpx;
	}
	
	.bottom {
		margin-top: 10rpx;
		padding-bottom: 80rpx;
		.items {
			padding-top: 30rpx;
			color: #ed6d00;
			display: flex;
			flex-direction: row;
			justify-content: center;
		}
	}
	
	.hr {
		height: 15rpx;
	}
	
</style>>