tire_parts_shop_applets/pages/tabBar/center.vue

<template>
	<view>
		<view class="head">
			<u-cell-group title-bg-color="rgb(243, 244, 246)" :border="true">
				<u-cell title="我的订单" :titleStyle="{marginLeft: '20rpx'}" :iconStyle="{fontSize:'40rpx'}" :isLink="true"
					center @click="pageJump('')"></u-cell>
			</u-cell-group>
			<view style="margin: 10rpx 0;padding: 14px 0;">
				<u-grid :border="false" col="4">
					<u-grid-item @click="obligationBtn('待付款')">
						<u-badge v-for="(item , index) in badgeList" v-if="item.status == 1" :key="index" type="error"
							max="99" :value="item.count" absolute :offset="[3,15]"></u-badge>
						<u-icon name="order" color="#919399" size="32"></u-icon>
						<text style="color: #525454;font-size: 24rpx;">待付款</text>
					</u-grid-item>
					<u-grid-item @click="pageJump('待发货')">
						<u-badge v-for="(item , index) in badgeList" v-if="item.status == 3" :key="index" type="error"
							max="99" :value="item.count" absolute :offset="[3,15]"></u-badge>
						<u-icon name="grid" color="#919399" size="32"></u-icon>
						<text style="color: #525454;font-size: 24rpx;">待发货</text>
					</u-grid-item>
					<u-grid-item @click="pageJump('待收货')">
						<u-badge v-for="(item , index) in badgeList" v-if="item.status == 5" :key="index" type="error"
							max="99" :value="item.count" absolute :offset="[3,15]"></u-badge>
						<u-icon name="car" color="#919399" size="32"></u-icon>
						<text style="color: #525454;font-size: 24rpx;">待收货</text>
					</u-grid-item>
					<u-grid-item @click="pageJump('已完成')">
						<u-badge v-for="(item , index) in badgeList" v-if="item.status == 5" :key="index" type="error"
							max="99" :value="item.count" absolute :offset="[3,15]"></u-badge>
						<u-icon name="list-dot" color="#919399" size="32"></u-icon>
						<text style="color: #525454;font-size: 24rpx;">已完成</text>
					</u-grid-item>
					<u-grid-item @click="pageJump('退款售后')">
						<u-badge v-for="(item , index) in badgeList" v-if="item.status == 13" :key="index" type="error"
							max="99" :value="item.count" absolute :offset="[3,15]"></u-badge>
						<u-icon name="rmb-circle" color="#919399" size="32"></u-icon>
						<text style="color: #525454;font-size: 24rpx;">退款售后</text>
					</u-grid-item>
				</u-grid>
			</view>
			<u-cell-group title-bg-color="rgb(243, 244, 246)" :border="true">
				<u-cell title="个人资料" :titleStyle="{marginLeft: '20rpx'}" :iconStyle="{fontSize:'40rpx'}" :isLink="true" center @click="clickMeans"></u-cell>
				<u-cell title="地址管理" :titleStyle="{marginLeft: '20rpx'}" :iconStyle="{fontSize:'40rpx'}" :isLink="true"
					center @click="clickAddress"></u-cell>
				<!-- <u-cell title="联系客服" :titleStyle="{marginLeft: '20rpx'}" :iconStyle="{fontSize:'40rpx'}" :isLink="true"
					center @click="clickCall"></u-cell> -->
				<u-cell title="设置" :titleStyle="{marginLeft: '20rpx'}" :iconStyle="{fontSize:'40rpx'}" :isLink="true"
					:border="false" center @click="setUp"></u-cell>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				badgeList: [],
				form: {}
			}
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: uni.getStorageSync('userInfo').account
			})
			// statusStatisticsApi().then(res => {
			// this.badgeList = res.data
			// this.$u.api.user().then(res => {
			// 	this.form = res.data
			// })
			// })
		},
		methods: {
			clickCall() {
				uni.makePhoneCall({
					phoneNumber: this.form.contactNumber,
					success: function() {
						console.log('拨打电话成功');
					},
					fail() {
						console.log('打电话失败了');
					}
				})
			},
			setUp() {
				this.$u.route('/pages/user/setUp');
			},
			clickMeans() {
				uni.$u.route('/pages/views/personalInformation/index');
			},
			clickAddress() {
				this.$u.route('/pages/views/personalInformation/addressManagement');
			},
			pageJump(value) {
				uni.$u.route('/pages/views/salesSlip/index', {
					text: value
				});
			},
			obligationBtn(value){
				uni.$u.route('/pages/views/salesSlip/obligation', {
					text: value
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	.topBackground {
		width: 100%;
		height: 300rpx;
		background-image: url("https://td.echepei.com/file/applets/resources/parts/images/view/home/head_bg.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		overflow: hidden;
		padding-top: var(--status-bar-height);
	}

	.topBackgroundTwo {
		background-image: url("https://td.echepei.com/file/applets/resources/parts/images/vip.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.tips {
		width: 96%;
		margin: 0 auto;
		padding: 40rpx 0;
		background-color: #FFFFFF;
		margin-top: -100rpx;
		border-radius: 20rpx;
		box-shadow: 0px 1px 14px 4px rgba(0, 0, 0, 0.04);
		z-index: 999;
	}

	.personal {
		margin: 0 auto;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		border-radius: 40rpx;
		padding: 20rpx;
		box-shadow: 0px 1px 14px 4px rgba(0, 0, 0, 0.04);
	}

	.head {
		width: calc(96% - 20rpx);
		margin: 0 auto;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		border-radius: 20rpx;
		// padding: 15rpx 10rpx 15rpx 10rpx;
		box-shadow: 0px 1px 14px 4px rgba(0, 0, 0, 0.04);
	}

	.vip {
		z-index: 999;
		width: calc(96% - 20rpx);
		margin: 0 auto;
		margin-top: -100rpx;
		border-radius: 20rpx;
		// padding: 15rpx 10rpx 15rpx 10rpx;
		box-shadow: 0px 1px 14px 4px rgba(0, 0, 0, 0.04);
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.vipName {
		view {
			margin: 10rpx 0;
		}
	}
</style>