<template>
	<view class="pad-x180">
		<status-nav :ifReturn="false" titleColor="#FFFFFF" navBarTitle="个人中心" backgroudColor="transparent"></status-nav>
		<view class="head-box" :style="{paddingTop: padt+'px'}" style="background: linear-gradient( to top, #ff3574 0%, #fd5646 100%);position: fixed;top: 0;left: 0;right: 0;z-index: 2;">
			<view class="mar-zy40 mar-s20 mar-x90 disac colf fon36">
				<image src="https://s6.jpg.cm/2022/02/14/L4oDhy.jpg" mode="aspectFill" style="width: 126rpx;height: 126rpx;border-radius: 100%;border: 6rpx solid #FFFFFF;"></image>
				<view class="mar-z30">Anita Rose</view>
			</view>
		</view>
		<view class="pad-zy40" :style="{paddingTop: headHeight+'px'}" style="position: relative;z-index: 3;">
			<view class="bacf radius20" style="margin-top: -80rpx;">
				<view class="pad-zy30">
					<column-function :ifLine="false" :list="list1" fonts="36" @chooseEv="chooseEv"></column-function>
				</view>
				<gong-ge-function rowNum="4" :ifShadow="false" :list="list" @chooseGe="chooseGe" iconwh="50rpx" titleTop="10rpx"></gong-ge-function>
			</view>
			<view class="bacf radius20 mar-s20">
				<view class="pad-zy30 pad-sx20">
					<column-function :ifLine="false" :list="list2" fonts="30" :ifIcon="true" @chooseEv="chooseEv"></column-function>
				</view>
			</view>
		</view>
		<!-- 添加微信 -->
		<view class="addwxpop" v-if="ifWx" :style="{top: padt+'px'}" @tap="ifWx=false">
			<view class="pad-s80 pad-zy50">
				<view class="bacf pad20 disjcac" style="width: 420rpx;height: 420rpx;margin: 0 auto;">
					<image :src="imgsrc" style="width: 380rpx;height: 380rpx;" mode="aspectFill"></image>
				</view>
				<view class="colf line-h56 mar30">
					<view class="fon36">请扫描二维码添加微信告知您的订单号并支付定金 ，发货前请支付尾款。</view>
					<view class="fon24 tcenter">（支付定金后，我们才会开始制作哦，如您有特别的要求可以在微信上提出哦！）</view>
					<view class="fon36 tcenter">祝您幸福美满！</view>
				</view>
				<view @tap.stop="saveImg" class="navigate-to-where radius30 colf fon36 tcenter mar-s50 bold mar-zy30">保存二维码</view>
			</view>
		</view>
		<customer-one></customer-one>
		<!-- 底部tab -->
		<foot-tab current="3"></foot-tab>
	</view>
</template>

<script>
	import statusNav from '@/components/status-navs/status-nav';
	import footTab from '@/components/foot-tabs/foot-tab.vue';
	import gongGeFunction from '@/components/function-list/gong-ge/gong-ge-function';
	import columnFunction from '@/components/function-list/column/column-function';
	import customerOne from '@/components/customer/customer-one';
	export default {
		components:{
			'foot-tab' :footTab,
			statusNav,
			gongGeFunction,
			columnFunction,
			customerOne
		},
		data() {
			return {
				padt:uni.getSystemInfoSync().statusBarHeight + 50,
				headHeight:'',//头部导航高
				list:[
					{url:'',iconsrc:'/static/public/icon-payment.png',iconWidth:50,iconHeight:44,title:'已下单'},
					{url:'',iconsrc:'/static/public/icon-send-goods.png',iconWidth:46,iconHeight:40,title:'制作中'},
					{url:'',iconsrc:'/static/public/icon-take.png',iconWidth:48,iconHeight:42,title:'已发货'},
					{url:'',iconsrc:'/static/public/icon-finish.png',iconWidth:49,iconHeight:44,title:'已完成'},
				],
				list1: [
					{url:'/pagesA/order-list/order-list',iconsrc:'',iconWidth:60,iconHeight:60,title:'我的订单',content:'全部订单',contentColor:'#999999',ifNext:true},
				],
				list2: [
					{url:'/pagesB/buy-read/buy-read',iconsrc:'/static/public/icon-buy.png',iconWidth:38,iconHeight:34,title:'购买须知',content:'',contentColor:'#999999',ifNext:true},
					{url:'',iconsrc:'/static/public/icon-scan.png',iconWidth:34,iconHeight:34,title:'添加微信',content:'',contentColor:'#999999',ifNext:true},
					{url:'/pagesB/disclaimers/disclaimers',iconsrc:'/static/public/icon-duty.png',iconWidth:40,iconHeight:40,title:'免责声明',content:'',contentColor:'#999999',ifNext:true},
					{url:'/pagesB/business-profile/business-profile',iconsrc:'/static/public/icon-aboutus.png',iconWidth:34,iconHeight:32,title:'商家简介',content:'',contentColor:'#999999',ifNext:true},
				],
				ifWx:false,
				imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg'
			}
		},
		onReachBottom() {
			
		},
		onHide() {
			this.ifWx = false;
		},
		onLoad() {
			// 缓存状态栏+标题栏的高度
			const query = wx.createSelectorQuery().in(this)
			query.select('.head-box').boundingClientRect((rect) => {
				this.headHeight = rect.height - this.padt;
			}).exec()
		},
		methods: {
			chooseEv(obj) {
				if(obj.url) {
					uni.navigateTo({
						url:obj.url
					})
				} else {
					// 添加微信
					this.ifWx = true;
				}
			},
			// 我的订单点击事件
			chooseGe(obj){
				uni.navigateTo({
					url:`/pagesA/order-list/order-list?index=${[1,2,3,4][obj.index]}`
				})
				console.log(obj);
			},
			// 保存二维码
			saveImg(){
				this.$toolAll.tools.saveImg(this.imgsrc);
			}
		}
	}
</script>

<style>
	page{background-color: #f7f7f7;}
	.navigate-to-where {height: 98rpx;line-height: 98rpx;background: linear-gradient(to right, #ff3772 0%,#fd5548 100%);box-shadow: 0rpx 6rpx 10rpx rgba(255, 55, 114, .6);}
	.addwxpop{position: fixed;right: 0;bottom: 0;left: 0;background-color: rgba(0, 0, 0, 0.86);z-index: 4;overflow: hidden;overflow-y: scroll;padding-bottom: 180rpx;}
	.addwxpop::-webkit-scrollbar{display: none;}
</style>