feat: page-center;

components/base/tabbar.vue

@@ -48,6 +48,13 @@
 						"title": "产品",
 						key: 'product',
 					},
+					{
+						"selectedIconPath": "/static/image/tabbar/user-center-active.png",
+						"iconPath": "/static/image/tabbar/user-center.png",
+						"pagePath": "/pages/index/center",
+						"title": "我的",
+						key: 'center',
+					},
 				]
 			};
 		},

components/center/accountCard.vue

@@ -0,0 +1,54 @@
+<template>
+  <view class="flex card">
+    <view class="flex label">
+      <image class="icon" src="/pages_order/static/center/icon-wx.png" mode="scaleToFill"></image>
+      <view>官方微信公众号</view>
+    </view>
+    <button class="flex btn">
+      <text class="btn-text">即刻关注</text>
+      <uv-icon name="arrow-right" color="#C6C6C6" size="24rpx"></uv-icon>
+    </button>
+  </view>
+</template>
+
+<script>
+  export default {
+
+  }
+</script>
+
+<style scoped lang="scss">
+@import './styles/card.scss';
+
+.card {
+  padding: 24rpx 32rpx;
+  justify-content: space-between;
+}
+
+.icon {
+  width: 64rpx;
+  height: 64rpx;
+}
+
+.label {
+  column-gap: 16rpx;
+  font-family: PingFang SC;
+  font-weight: 400;
+  font-size: 28rpx;
+  line-height: 1;
+  color: #252545;
+}
+
+
+.btn {
+  font-family: PingFang SC;
+  font-size: 24rpx;
+  font-weight: 400;
+  line-height: 1.4;
+  color: #A8A8A8;
+
+  &-text {
+    margin-right: 4rpx;
+  }
+}
+</style>

components/center/orderCard.vue

@@ -0,0 +1,76 @@
+<template>
+  <view class="flex card cols">
+    <view class="flex flex-column col" v-for="item in list" :key="item.id">
+      <view class="icon">
+        <image class="icon-img" :src="item.icon" mode="scaleToFill"></image>
+        <view class="flex sup" v-if="item.value">{{ item.value }}</view>
+      </view>
+      <view class="label">{{ item.label }}</view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        list: [],
+      }
+    },
+    mounted() {
+      this.list = [
+        { id: '001', label: '待支付', value: 2, icon: '/pages_order/static/center/order-1.png' },
+        { id: '002', label: '待发货', value: 2, icon: '/pages_order/static/center/order-2.png' },
+        { id: '003', label: '待收货', value: 0, icon: '/pages_order/static/center/order-3.png' },
+        { id: '004', label: '售后', value: 0, icon: '/pages_order/static/center/order-4.png' },
+        { id: '005', label: '全部', icon: '/pages_order/static/center/order-5.png' },
+      ]
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+@import './styles/card.scss';
+
+.card {
+  padding: 32rpx;
+  column-gap: 16rpx;
+}
+
+.icon {
+  position: relative;
+  width: 48rpx;
+  height: 48rpx;
+
+  &-img {
+    width: 100%;
+    height: 100%;
+  }
+
+  .sup {
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(50%, -50%);
+    min-width: 32rpx;
+    height: 32rpx;
+    font-family: PingFang SC;
+    font-weight: 500;
+    font-size: 24rpx;
+    line-height: 1.3;
+    color: #FFFFFF;
+    background: #F53F3F;
+    border-radius: 32rpx;
+  }
+}
+
+.label {
+  margin-top: 12rpx;
+  font-family: PingFang SC;
+  font-weight: 400;
+  font-size: 28rpx;
+  line-height: 1;
+  color: #252545;
+}
+
+</style>

components/center/reportCard.vue

@@ -0,0 +1,180 @@
+<template>
+  <view class="card">
+    <view class="flex header">
+      <view class="title">体检报告</view>
+      <button class="btn">体检入口</button>
+    </view>
+    <view class="flex cols">
+      <view class="flex flex-column col score">
+        <view class="flex">
+          <view class="score-value">{{ data.BMI || '--' }}</view>
+          <view v-if="data.BMIchange < 0" class="flex change">
+            <text>{{ data.BMIchange }}</text>
+            <image class="change-icon" src="@/pages_order/static/report/arrow-down.png" mode="widthFix"></image>
+          </view>
+          <view v-else-if="data.BMIchange > 0" class="flex change rise">
+            <text>{{ data.BMIchange }}</text>
+            <image class="change-icon" src="@/pages_order/static/report/arrow-down.png" mode="widthFix"></image>
+          </view>
+        </view>
+        <view class="flex">
+          <view class="label">BMI</view>
+          <view class="tag">
+            {{ data.BMItag || '-' }}
+          </view>
+        </view>
+      </view>
+      <view class="divider"></view>
+      <view class="flex flex-column col score">
+        <view class="flex">
+          <view class="score-value">{{ data.fat || '--' }}</view>
+          <view v-if="data.fatChange < 0" class="flex change">
+            <text>{{ data.fatChange }}</text>
+            <image class="change-icon" src="@/pages_order/static/report/arrow-down.png" mode="widthFix"></image>
+          </view>
+          <view v-else-if="data.fatChange > 0" class="flex change rise">
+            <text>{{ data.fatChange }}</text>
+            <image class="change-icon" src="@/pages_order/static/report/arrow-down.png" mode="widthFix"></image>
+          </view>
+        </view>
+        <view class="flex">
+          <view class="label">脂肪</view>
+          <view class="tag">
+            {{ data.fatTag || '-' }}
+          </view>
+        </view>
+      </view>
+      <view class="divider"></view>
+      <view class="flex flex-column col">
+        <view class="label">解锁更多</view>
+        <view class="label">身体数据</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        data: {
+          BMI: 20.3,
+          BMIchange: -0.2,
+          BMItag: '正常',
+          fat: null,
+          fatChange: null,
+          fatTag: null,
+        },
+      }
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+@import './styles/card.scss';
+
+.card {
+  padding: 32rpx;
+  background-image: linear-gradient(#FAFAFF, #F3F3F3);
+}
+
+.header {
+  justify-content: space-between;
+  margin-bottom: 24rpx;
+
+  .title {
+    font-family: PingFang SC;
+    font-weight: 600;
+    font-size: 36rpx;
+    line-height: 1.2;
+    color: #252545;
+  }
+
+  .btn {
+    font-family: PingFang SC;
+    font-weight: 600;
+    font-size: 28rpx;
+    line-height: 1.5;
+    color: #FFFFFF;
+    padding: 8rpx 24rpx;
+    background-image: linear-gradient(to right, #4B348F, #845CFA);
+    border: 1rpx solid #FFFFFF;
+    border-radius: 32rpx;
+    box-shadow: -5rpx -5rpx 10rpx 0 #FFFFFF,
+                10rpx 10rpx 20rpx 0 #AAAACC80,
+                4rpx 4rpx 10rpx 0 #AAAACC40,
+                -2rpx -2rpx 5rpx 0 #FFFFFF;
+  }
+}
+
+.col {
+
+  &.score {
+
+    .score {
+      &-value {
+        font-family: PingFang SC;
+        line-height: 1.4;
+        font-weight: 600;
+        font-size: 40rpx;
+        color: $uni-color;
+      }
+    }
+
+    .change {
+      margin-left: 8rpx;
+      font-family: PingFang SC;
+      font-weight: 400;
+      font-size: 24rpx;
+      line-height: 1.4;
+      color: #F79205;
+
+      &-icon {
+        width: 24rpx;
+        height: auto;
+      }
+
+      &.rise {
+        .change-icon {
+          transform: rotate(180deg);
+        }
+      }
+    }
+
+    .tag {
+      margin-left: 16rpx;
+      padding: 6rpx 16rpx;
+      font-family: PingFang SC;
+      font-weight: 400;
+      font-size: 20rpx;
+      line-height: 1.4;
+      color: #FFFFFF;
+      background-image: linear-gradient(90deg, #4B348F, #845CFA);
+      border-top-left-radius: 24rpx;
+      border-bottom-right-radius: 24rpx;
+    }
+
+  }
+
+  .label {
+    font-size: 26rpx;
+    font-weight: 400;
+    line-height: 1.4;
+    font-family: PingFang SC;
+    color: transparent;
+    background-image: linear-gradient(to right, #4B348F, #845CFA);
+    background-clip: text;
+    display: inline-block;
+  }
+}
+
+.divider {
+  flex: none;
+  // todo
+  width: 4rpx;
+  height: 32rpx;
+  background: #B5B8CE;
+}
+
+
+</style>

components/center/styles/card.scss

@@ -0,0 +1,15 @@
+
+	.card {
+		margin-top: 32rpx;
+		width: 100%;
+		background: #FAFAFF;
+		border: 2rpx solid #FFFFFF;
+		border-radius: 32rpx;
+    box-sizing: border-box;
+	}
+
+	.cols {
+		.col {
+			flex: 1;
+		}
+	}

components/product/courseLiveCard.vue

@@ -3,10 +3,18 @@
     <image class="card-bg" :src="data.url" mode="scaleToFill"></image>
 
     <view class="flex card-bar">
-      <view class="flex countdown" v-if="countdown">
-        距开始<text class="count">{{ countdown.day }}</text>天
-        <text class="count">{{ countdown.hour }}</text>:<text class="count">{{ countdown.minute }}</text>:<text class="count">{{ countdown.second }}</text>
-      </view>
+      <uv-count-down 
+        v-if="time"
+        :time="time" 
+        format="DD:HH:mm:ss" 
+        autoStart 
+        millisecond 
+        @change="onChange">
+        <view class="flex countdown">
+          距开始<text class="count">{{ timeData.days }}</text>天
+          <text class="count">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}</text>:<text class="count">{{ timeData.minutes }}</text>:<text class="count">{{ timeData.seconds }}</text>
+          </view>
+      </uv-count-down>
       <button class="flex btn">进入直播间</button>
     </view>
   </view>
@@ -29,8 +37,8 @@
     },
     data() {
       return {
-        timer: null,
-        countdown: null,
+        time: null,
+        timeData: {}
       }
     },
     watch: {
@@ -43,41 +51,21 @@
       }
     },
     methods: {
+			onChange(e) {
+				this.timeData = e
+			},
       updateCountdown() {
-        this.timer && clearTimeout(this.timer)
 
         let current = dayjs()
         let startTime = dayjs(this.data.startTime)
 
         if (startTime.isSameOrBefore(current)) {
-          this.countdown = null
+          this.time = null
           return
         }
 
-        let countdown = {
-          day: 0,
-          hour: 0,
-          minute: 0,
-          second: 0,
-        }
-
-        let day = Math.floor(startTime.diff(current, 'day', true))
-        countdown.day = day
-        let hour = Math.floor(startTime.diff(current, 'hour', true))
-        countdown.hour = hour - day * 24
-        countdown.hour = countdown.hour < 10 ? `0${countdown.hour}` : countdown.hour
-        let minute = Math.floor(startTime.diff(current, 'minute', true))
-        countdown.minute = minute - hour * 60
-        countdown.minute = countdown.minute < 10 ? `0${countdown.minute}` : countdown.minute
-        let second = startTime.diff(current, 'second')
-        countdown.second = second - minute * 60
-        countdown.second = countdown.second < 10 ? `0${countdown.second}` : countdown.second
+        this.time = startTime.diff(current, 'millisecond')
 
-        this.countdown = countdown
-
-        this.timer = setTimeout(() => {
-          this.updateCountdown()
-        }, 1000)
       },
     },
   }

pages/index/center copy.vue

@@ -0,0 +1,353 @@
+<template>
+	<view class="page">
+
+		<navbar title="个人中心" />
+
+		<view class="head">
+			<view class="headImage">
+				<image src="" mode=""></image>
+			</view>
+			<view class="info">
+				<view class="name">
+					倾心.
+				</view>
+				<!-- <view class="vip">
+					VIP1
+				</view> -->
+				<view class="tips">
+					今天是您来的的第32天
+				</view>
+			</view>
+			<!-- <view class="headBtn" @click="headBtn">
+				角色切换
+			</view> -->
+			<view class="setting">
+				<uv-icon name="setting" size="40rpx"></uv-icon>
+			</view>
+		</view>
+
+		<!-- 水洗店 -->
+		<view class="userShop" v-if="userShop">
+			<userShopCommission />
+			<view class="userList">
+				<view class="title">
+					我的用户
+				</view>
+				<view class="list">
+					<view class="item" v-for="(item, index) in 20" :key="index">
+						<view class="name">
+							客户：王生
+						</view>
+						<view class="num">
+							剩余水洗布：198
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 酒店 -->
+		<view class="user" v-else>
+			<view class="line">
+				<view class="item">
+					<view class="image">
+						<image src="/static/image/center/1.png" mode=""></image>
+					</view>
+					<view class="">
+						余额￥3000
+					</view>
+				</view>
+				<view class="item">
+					<view class="image">
+						<image src="/static/image/center/4.png" mode=""></image>
+					</view>
+					<view class="">
+						押金￥30000
+					</view>
+				</view>
+			</view>
+			<view class="line grid">
+				<view class="title">
+					常用功能
+				</view>
+				<uv-grid :col="4" :border="false">
+
+					<uv-grid-item @click="$utils.navigateTo('/pages_order/mine/address')">
+						<image class="image" src="/static/image/center/7.png" mode=""></image>
+						<text class="grid-text">地址管理</text>
+					</uv-grid-item>
+
+					<uv-grid-item @click="$utils.redirectTo('/index/order')">
+						<image class="image" src="/static/image/center/8.png" mode=""></image>
+						<text class="grid-text">订单管理</text>
+					</uv-grid-item>
+
+					<uv-grid-item @click="$utils.navigateTo('/pages_order/order/refundsOrExchange?index='+0)">
+						<image class="image" src="/static/image/center/5.png" mode=""></image>
+						<text class="grid-text">换货</text>
+					</uv-grid-item>
+
+					<uv-grid-item @click="$utils.navigateTo('/pages_order/order/refundsOrExchange?index='+1)">
+						<image class="image" src="/static/image/center/7.png" mode=""></image>
+						<text class="grid-text">退货</text>
+					</uv-grid-item>
+				</uv-grid>
+			</view>
+			<view class="line grid">
+				<uv-grid :col="4" :border="false">
+
+					<uv-grid-item @click="contactUs">
+						<image class="image" src="/static/image/center/9.png" mode=""></image>
+						<text class="grid-text">联系客服</text>
+					</uv-grid-item>
+
+					<uv-grid-item>
+						<image class="image" src="/static/image/center/6.png" mode=""></image>
+						<text class="grid-text">我的租赁</text>
+					</uv-grid-item>
+
+					<uv-grid-item @click="$utils.redirectTo('/index/cart')">
+						<image class="image" src="/static/image/center/7.png" mode=""></image>
+						<text class="grid-text">租赁车</text>
+					</uv-grid-item>
+
+					<uv-grid-item
+						@click="$utils.navigateTo('/pages_order/auth/loginAndRegisterAndForgetPassword?index='+2)">
+						<image class="image" src="/static/image/center/7.png" mode=""></image>
+						<text class="grid-text">申请成为水洗店</text>
+					</uv-grid-item>
+				</uv-grid>
+			</view>
+		</view>
+
+		<tabber select="center" />
+	</view>
+</template>
+
+<script>
+	import tabber from '@/components/base/tabbar.vue'
+	import {
+		mapGetters
+	} from 'vuex'
+	import userShopCommission from '@/components/userShop/userShopCommission.vue'
+	export default {
+		components: {
+			tabber,
+			userShopCommission,
+		},
+		computed: {
+			...mapGetters(['userShop']),
+		},
+		data() {
+			return {
+			}
+		},
+		methods: {
+			headBtn() {
+				let self = this
+				uni.showModal({
+					title: '演示切换角色之后的效果',
+					success(res) {
+						if (res.confirm) {
+							self.$store.state.shop = !self.$store.state.shop
+						}
+					}
+				})
+			},
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.page {
+
+		.warp {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 100%;
+
+		}
+
+		.rect {
+			width: 600rpx;
+			height: 300rpx;
+			background-color: #fff;
+			border-radius: 20rpx;
+			overflow: hidden;
+
+			.title {
+				padding: 10rpx 0 0 15rpx;
+				background-color: #fd5100;
+				color: #FFF;
+				text-align: left;
+				width: 100%;
+				height: 18%;
+				font-size: 36rpx;
+			}
+
+			.center {
+				height: 40%;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				font-size: 36rpx;
+			}
+
+			.bottom {
+				display: flex;
+				justify-content: center;
+				gap: 50rpx;
+			}
+		}
+	}
+
+
+
+	image {
+		width: 100%;
+		height: 100%;
+	}
+
+	.head {
+		display: flex;
+		background-color: #fff;
+		padding: 40rpx 20rpx;
+		align-items: center;
+		position: relative;
+
+		.headImage {
+			width: 120rpx;
+			height: 120rpx;
+			// background-image: url(/static/image/center/3.png);
+			background-size: 100% 100%;
+			overflow: hidden;
+			border-radius: 50%;
+			margin-right: 40rpx;
+		}
+
+		.info {
+			font-size: 28rpx;
+
+			.vip {
+				background-color: #FCCC92;
+				color: #FA6239;
+				width: 100rpx;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				height: 40rpx;
+				border-radius: 20rpx;
+				margin-top: 20rpx;
+			}
+
+			.name {
+				font-size: 32rpx;
+			}
+
+			.tips {
+				font-size: 26rpx;
+				color: #ABABAB;
+			}
+		}
+
+		.headBtn {
+			margin-left: auto;
+			padding: 15rpx 20rpx;
+			background-color: $uni-color;
+			color: #fff;
+			border-radius: 20rpx;
+			margin-top: 50rpx;
+		}
+
+		.setting {
+			position: absolute;
+			right: 50rpx;
+			top: 50rpx;
+		}
+	}
+
+	.userShop {
+		.userList {
+			.title {
+				font-size: 32rpx;
+				font-weight: 900;
+				padding: 20rpx;
+			}
+
+			.list {
+				display: flex;
+				flex-wrap: wrap;
+
+				.item {
+					width: 270rpx;
+					margin: 20rpx;
+					display: flex;
+					flex-direction: column;
+					padding: 40rpx 30rpx;
+					background-color: #fff;
+					border-radius: 30rpx;
+					line-height: 60rpx;
+
+					.name {}
+
+					.num {
+						color: $uni-color;
+						font-weight: 600;
+						font-size: 28rpx;
+					}
+				}
+			}
+		}
+	}
+
+	.user {
+		.line {
+			display: flex;
+			background-color: #fff;
+			margin-top: 20rpx;
+			padding: 20rpx 0;
+
+			.item {
+				flex: 1;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				padding: 20rpx 0;
+
+				&:nth-child(1) {
+					border-right: 1px solid #00000013;
+				}
+
+				.image {
+					width: 100rpx;
+					height: 70rpx;
+					margin-right: 20rpx;
+				}
+			}
+		}
+
+		.grid {
+			flex-direction: column;
+			font-size: 26rpx;
+			padding: 20rpx;
+
+			.title {
+				margin-bottom: 30rpx;
+				font-size: 28rpx;
+				font-weight: 600;
+			}
+
+			.image {
+				width: 70rpx;
+				height: 70rpx;
+				margin-bottom: 10rpx;
+			}
+
+			text {
+				text-align: center;
+				width: 120rpx;
+			}
+		}
+	}
+</style>

pages/index/center.vue

@@ -1,352 +1,209 @@
 <template>
-	<view class="page">
+	<view class="page__view">
 
-		<navbar title="个人中心" />
+		<image class="bg" src="@/pages_order/static/center/bg.png" mode="widthFix"></image>
 
-		<view class="head">
-			<view class="headImage">
-				<image src="" mode=""></image>
-			</view>
-			<view class="info">
-				<view class="name">
-					倾心.
-				</view>
-				<!-- <view class="vip">
-					VIP1
-				</view> -->
-				<view class="tips">
-					今天是您来的的第32天
-				</view>
-			</view>
-			<!-- <view class="headBtn" @click="headBtn">
-				角色切换
-			</view> -->
-			<view class="setting">
-				<uv-icon name="setting" size="40rpx"></uv-icon>
-			</view>
-		</view>
+		<view class="main">
 
-		<!-- 水洗店 -->
-		<view class="userShop" v-if="userShop">
-			<userShopCommission />
-			<view class="userList">
-				<view class="title">
-					我的用户
-				</view>
-				<view class="list">
-					<view class="item" v-for="(item, index) in 20" :key="index">
-						<view class="name">
-							客户：王生
-						</view>
-						<view class="num">
-							剩余水洗布：198
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
+			<navbar bgColor="transparent" >
+				<image class="nav-icon" src="@/pages_order/static/center/icon-nav.png" mode="widthFix"></image>
+			</navbar>
 
-		<!-- 酒店 -->
-		<view class="user" v-else>
-			<view class="line">
-				<view class="item">
-					<view class="image">
-						<image src="/static/image/center/1.png" mode=""></image>
+			<view class="content">
+				<view class="flex user">
+					<view class="user-avatar">
+						<image class="user-avatar-img" src="@/pages_order/static/report/avatar.png" mode="scaleToFill"></image>
 					</view>
-					<view class="">
-						余额￥3000
+					<view class="user-info">
+						<view class="user-info-name">战斗世界</view>
+						<view class="user-info-desc">世界这么美，身体要健康～</view>
 					</view>
 				</view>
-				<view class="item">
-					<view class="image">
-						<image src="/static/image/center/4.png" mode=""></image>
-					</view>
-					<view class="">
-						押金￥30000
+
+				<reportCard></reportCard>
+				<orderCard></orderCard>
+				<accountCard></accountCard>
+
+				<view class="card">
+					<view v-for="item in list1" :key="item.id">
+						<!-- todo: key -> custom -->
+						<view class="flex row" @click="$utils.navigateTo(item.path)">
+							<view class="flex label">
+								<image class="icon" :src="item.icon" mode="scaleToFill"></image>
+								<view>{{ item.label }}</view>
+							</view>
+				      <uv-icon name="arrow-right" color="#C6C6C6" size="24rpx"></uv-icon>
+						</view>						
 					</view>
 				</view>
-			</view>
-			<view class="line grid">
-				<view class="title">
-					常用功能
+				
+				<view class="card">
+					<view v-for="item in list2" :key="item.id">
+						<!-- todo: key -> custom -->
+						<view class="flex row" @click="$utils.navigateTo(item.path)">
+							<view class="flex label">
+								<image class="icon" :src="item.icon" mode="scaleToFill"></image>
+								<view>{{ item.label }}</view>
+							</view>
+				      <uv-icon name="arrow-right" color="#C6C6C6" size="24rpx"></uv-icon>
+						</view>						
+					</view>
 				</view>
-				<uv-grid :col="4" :border="false">
 
-					<uv-grid-item @click="$utils.navigateTo('/pages_order/mine/address')">
-						<image class="image" src="/static/image/center/7.png" mode=""></image>
-						<text class="grid-text">地址管理</text>
-					</uv-grid-item>
-
-					<uv-grid-item @click="$utils.redirectTo('/index/order')">
-						<image class="image" src="/static/image/center/8.png" mode=""></image>
-						<text class="grid-text">订单管理</text>
-					</uv-grid-item>
-
-					<uv-grid-item @click="$utils.navigateTo('/pages_order/order/refundsOrExchange?index='+0)">
-						<image class="image" src="/static/image/center/5.png" mode=""></image>
-						<text class="grid-text">换货</text>
-					</uv-grid-item>
-
-					<uv-grid-item @click="$utils.navigateTo('/pages_order/order/refundsOrExchange?index='+1)">
-						<image class="image" src="/static/image/center/7.png" mode=""></image>
-						<text class="grid-text">退货</text>
-					</uv-grid-item>
-				</uv-grid>
 			</view>
-			<view class="line grid">
-				<uv-grid :col="4" :border="false">
-
-					<uv-grid-item @click="contactUs">
-						<image class="image" src="/static/image/center/9.png" mode=""></image>
-						<text class="grid-text">联系客服</text>
-					</uv-grid-item>
-
-					<uv-grid-item>
-						<image class="image" src="/static/image/center/6.png" mode=""></image>
-						<text class="grid-text">我的租赁</text>
-					</uv-grid-item>
 
-					<uv-grid-item @click="$utils.redirectTo('/index/cart')">
-						<image class="image" src="/static/image/center/7.png" mode=""></image>
-						<text class="grid-text">租赁车</text>
-					</uv-grid-item>
+			<tabber select="center" />
 
-					<uv-grid-item
-						@click="$utils.navigateTo('/pages_order/auth/loginAndRegisterAndForgetPassword?index='+2)">
-						<image class="image" src="/static/image/center/7.png" mode=""></image>
-						<text class="grid-text">申请成为水洗店</text>
-					</uv-grid-item>
-				</uv-grid>
-			</view>
 		</view>
 
-		<tabber select="center" />
 	</view>
 </template>
 
 <script>
 	import tabber from '@/components/base/tabbar.vue'
-	import {
-		mapGetters
-	} from 'vuex'
-	import userShopCommission from '@/components/userShop/userShopCommission.vue'
+	import reportCard from '@/components/center/reportCard.vue'
+	import orderCard from '@/components/center/orderCard.vue'
+	import accountCard from '@/components/center/accountCard.vue'
+
 	export default {
 		components: {
+			reportCard,
+			orderCard,
+			accountCard,
 			tabber,
-			userShopCommission,
-		},
-		computed: {
-			...mapGetters(['userShop']),
 		},
 		data() {
 			return {
+				list1: [
+					// todo
+					{ id: '001', label: '检测预约', icon: '/pages_order/static/center/icon-detectBook.png', path: '/pages_order/mine/detectBook' },
+					// todo
+					{ id: '002', label: '联系客服', icon: '/pages_order/static/center/icon-service.png', key: 'service' },
+					// todo
+					{ id: '003', label: '服用说明', icon: '/pages_order/static/center/icon-instruc.png', path: '/pages_order/mine/instruc' },
+					// todo
+					{ id: '004', label: '用户须知', icon: '/pages_order/static/center/icon-userAgreement.png', path: '/pages_order/mine/userAgreement' },
+				],
+				list2: [
+					// todo
+					{ id: '005', label: '我的评价', icon: '/pages_order/static/center/icon-comment.png', path: '/pages_order/mine/detectBook' },
+					// todo
+					{ id: '006', label: '关于我们', icon: '/pages_order/static/center/icon-aboutUs.png', path: '/pages_order/mine/service' },
+					// todo
+					{ id: '007', label: '修改信息', icon: '/pages_order/static/center/icon-modifyInfo.png', path: '/pages_order/mine/instruc' },
+					// todo
+					{ id: '008', label: '退出登录', icon: '/pages_order/static/center/icon-logout.png', key: 'logout' },
+				],
 			}
 		},
-		methods: {
-			headBtn() {
-				let self = this
-				uni.showModal({
-					title: '演示切换角色之后的效果',
-					success(res) {
-						if (res.confirm) {
-							self.$store.state.shop = !self.$store.state.shop
-						}
-					}
-				})
-			},
-		}
 	}
 </script>
 
 <style scoped lang="scss">
-	.page {
-
-		.warp {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			height: 100%;
 
-		}
-
-		.rect {
-			width: 600rpx;
-			height: 300rpx;
-			background-color: #fff;
-			border-radius: 20rpx;
-			overflow: hidden;
-
-			.title {
-				padding: 10rpx 0 0 15rpx;
-				background-color: #fd5100;
-				color: #FFF;
-				text-align: left;
-				width: 100%;
-				height: 18%;
-				font-size: 36rpx;
-			}
+	.page__view {
+		width: 100vw;
+		min-height: 100vh;
+		background-color: $uni-bg-color;
+		position: relative;
 
-			.center {
-				height: 40%;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				font-size: 36rpx;
-			}
+    /deep/ .nav-bar__view {
+      position: fixed;
+      top: 0;
+      left: 0;
+    }
 
-			.bottom {
-				display: flex;
-				justify-content: center;
-				gap: 50rpx;
-			}
+		.nav-icon {
+			width: 200rpx;
+			height: auto;
+			vertical-align: top;
 		}
+
 	}
 
+	.bg {
+		width: 100vw;
+		height: auto;
+	}
 
+	.main {
+		position: absolute;
+		top: 176rpx;
+		left: 0;
+		width: 100%;
+	}
 
-	image {
+	.content {
 		width: 100%;
-		height: 100%;
+		padding: 16rpx 32rpx 80rpx 32rpx;
+		box-sizing: border-box;
 	}
 
-	.head {
-		display: flex;
-		background-color: #fff;
-		padding: 40rpx 20rpx;
-		align-items: center;
-		position: relative;
+	.user {
+		column-gap: 24rpx;
 
-		.headImage {
-			width: 120rpx;
-			height: 120rpx;
-			// background-image: url(/static/image/center/3.png);
-			background-size: 100% 100%;
-			overflow: hidden;
+		&-avatar {
+			flex: none;
+			width: 100rpx;
+			height: 100rpx;
+			border: 4rpx solid #FFFFFF;
 			border-radius: 50%;
-			margin-right: 40rpx;
-		}
-
-		.info {
-			font-size: 28rpx;
-
-			.vip {
-				background-color: #FCCC92;
-				color: #FA6239;
-				width: 100rpx;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				height: 40rpx;
-				border-radius: 20rpx;
-				margin-top: 20rpx;
-			}
-
-			.name {
-				font-size: 32rpx;
-			}
+			overflow: hidden;
 
-			.tips {
-				font-size: 26rpx;
-				color: #ABABAB;
+			&-img {
+				width: 100%;
+				height: 100%;
 			}
 		}
 
-		.headBtn {
-			margin-left: auto;
-			padding: 15rpx 20rpx;
-			background-color: $uni-color;
-			color: #fff;
-			border-radius: 20rpx;
-			margin-top: 50rpx;
-		}
-
-		.setting {
-			position: absolute;
-			right: 50rpx;
-			top: 50rpx;
-		}
-	}
+		&-info {
+			flex: 1;
 
-	.userShop {
-		.userList {
-			.title {
-				font-size: 32rpx;
-				font-weight: 900;
-				padding: 20rpx;
+			&-name {
+				font-family: PingFang SC;
+				font-weight: 600;
+				font-size: 36rpx;
+				line-height: 1.2;
+				color: #FFFFFF;
 			}
 
-			.list {
-				display: flex;
-				flex-wrap: wrap;
-
-				.item {
-					width: 270rpx;
-					margin: 20rpx;
-					display: flex;
-					flex-direction: column;
-					padding: 40rpx 30rpx;
-					background-color: #fff;
-					border-radius: 30rpx;
-					line-height: 60rpx;
-
-					.name {}
-
-					.num {
-						color: $uni-color;
-						font-weight: 600;
-						font-size: 28rpx;
-					}
-				}
+			&-desc {
+				margin-top: 8rpx;
+				font-family: PingFang SC;
+				font-weight: 400;
+				font-size: 24rpx;
+				line-height: 1.5;
+				color: #F4F4F4;
 			}
 		}
 	}
-
-	.user {
-		.line {
-			display: flex;
-			background-color: #fff;
-			margin-top: 20rpx;
-			padding: 20rpx 0;
-
-			.item {
-				flex: 1;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				padding: 20rpx 0;
-
-				&:nth-child(1) {
-					border-right: 1px solid #00000013;
-				}
-
-				.image {
-					width: 100rpx;
-					height: 70rpx;
-					margin-right: 20rpx;
-				}
-			}
-		}
-
-		.grid {
-			flex-direction: column;
-			font-size: 26rpx;
-			padding: 20rpx;
-
-			.title {
-				margin-bottom: 30rpx;
+	
+	.card {
+		margin-top: 32rpx;
+		width: 100%;
+		background: #FAFAFF;
+		border: 2rpx solid #FFFFFF;
+		border-radius: 32rpx;
+    box-sizing: border-box;
+
+		.row {
+			justify-content: space-between;
+			width: 100%;
+			padding: 40rpx;
+			box-sizing: border-box;
+
+			.label {
+				font-family: PingFang SC;
+				font-weight: 400;
 				font-size: 28rpx;
-				font-weight: 600;
-			}
-
-			.image {
-				width: 70rpx;
-				height: 70rpx;
-				margin-bottom: 10rpx;
-			}
+				line-height: 1;
+				color: #252545;
 
-			text {
-				text-align: center;
-				width: 120rpx;
+				.icon {
+					margin-right: 16rpx;
+					width: 40rpx;
+					height: 40rpx;
+				}
 			}
 		}
 	}

pages_order/report/nutritionProgram/productCard.vue

@@ -30,9 +30,12 @@
       </view>
     </view>
     
-    <view v-if="data.customized" class="sup">
+    <view v-if="data.customized" class="sup customized">
       定制组合
     </view>
+    <view v-else-if="data.free" class="sup free">
+      自定组合
+    </view>
   </view>
 </template>
 
@@ -188,8 +191,16 @@
   font-size: 28rpx;
   line-height: 1.5;
   white-space: nowrap;
-  color: #FFFFFF;
-  background: #252545;
   transform: rotate(45deg);
+  
+  &.customized {
+    color: #FFFFFF;
+    background: #252545;
+  }
+
+  &.free {
+    color: #252545;
+    background: #D7D7FF;
+  }
 }
 </style>