<template> <view> <view class="head"> <image src="@/static/img/common/pangdingLogo.png"> </image> <text>尊敬的胖丁用户</text> </view> <view class="middle"> <view class="middle1"> <view class="middle1-list"> <view> 0 </view> <view> 收藏 </view> </view> <view class="middle1-list" @click="goCoupon()"> <view> 0 </view> <view> 券中心 </view> </view> <view class="middle1-list"> <view> 0 </view> <view> 钱包 </view> </view> <view class="middle1-list"> <view> 0 </view> <view> 积分 </view> </view> </view> <view class="middle2"> <view class="middle2-top" @click="goOrderlist()"> <view> 我的订单 </view> <view style="font-size: 24rpx;color: #999999;"> 全部订单 <u-icon name='arrow-right'></u-icon> </view> </view> <view class="middle2-bottom"> <view class="middle2-list" @click="goOrderlist(0)"> <view> <image src="@/static/img/my/center/pay.png"></image> </view> <view> 待付款 </view> </view> <view class="middle2-list" @click="goOrderlist(2)"> <view> <image src="@/static/img/my/center/play.png"></image> </view> <view> 待使用 </view> </view> <view class="middle2-list" @click="goOrderlist(5)"> <view> <image src="@/static/img/my/center/evaluate.png"></image> </view> <view> 评价 </view> </view> <view class="middle2-list" @click="goAfterSaleList()"> <view> <image src="@/static/img/my/center/refund.png"></image> </view> <view> 退款/售后 </view> </view> </view> </view> <view class="middle3"> <view class="middle3-top"> 其他工具 </view> <view class="middle3-bottom"> <view class="middle3-list" @click="goCommoninfo()"> <view> <image src="@/static/img/my/center/info.png"></image> </view> <view> 常用信息 </view> </view> <view class="middle3-list" @click="goMyServe()"> <view> <image src="@/static/img/my/center/customer.png"></image> </view> <view> 我的客服 </view> </view> <view class="middle3-list" @click="goCodeResult()" > <view> <image src="@/static/img/my/center/code.png"></image> </view> <view> 通行码 </view> </view> <view class="middle3-list" @click="goMyPhoto()"> <view> <image src="@/static/img/my/center/album.png"></image> </view> <view> 我的影集 </view> </view> <view class="middle3-list" @click="goshopping()"> <view> <image src="@/static/img/my/center/shopping.png"></image> </view> <view> 购物车 </view> </view> <view class="middle3-list" @click="goTravelList()"> <view> <image src="@/static/img/my/center/schedule.png"></image> </view> <view> 行程单 </view> </view> <view class="middle3-list" @click="goTravelNotes()"> <view> <image src="@/static/img/my/center/mark.png"></image> </view> <view> 我的行记 </view> </view> </view> </view> </view> </view> </template> <script> export default { data() { return { } }, methods: { //---跳转到订单列表 goOrderlist(orderStatus){ uni.navigateTo({ url:'/pages/my/order/orderList/orderList?orderStatus='+orderStatus }) }, //---跳转购物车 goshopping(){ uni.navigateTo({ url:'/pages/my/shopCart/shopCart' }) }, //---跳转常用信息 goCommoninfo(){ uni.navigateTo({ url:'/pages/my/commonInfo/commonInfo' }) }, //---跳转通行码 goCodeResult(){ uni.navigateTo({ url:'/pages/my/passCode/codeResult/codeResult' }) }, //---跳转我的影集 goMyPhoto(){ uni.navigateTo({ url:'/pages/album/purchasedPhotoAlbum/purchasedPhotoAlbum' }) }, //---跳转我的客服 goMyServe(){ uni.navigateTo({ url:'/pages/my/customerService/enterpriseWechat/enterpriseWechat' }) }, //---跳转券中心 goCoupon(){ uni.navigateTo({ url:'/pages/my/couponCenter/myCouponList/myCouponList' }) }, //---跳转行程单 goTravelList(){ uni.navigateTo({ url:'/pages/my/travelList/travelList/travelList' }) }, //---跳转我的行记 goTravelNotes(){ uni.navigateTo({ url:'/pages/my/travelNotes/myTravelogue/myTravelogue' }) }, //---跳转售后列表 goAfterSaleList(){ uni.navigateTo({ url:'/pages/my/order/afterSale/afterSaleList/afterSaleList' }) }, } } </script> <style lang="scss" scoped> .head{ padding: 0 24rpx; display: flex; align-items: center; color: #ffffff; height: 300rpx; background: linear-gradient(76deg, #1877FF 0%, #3C99F9 100%); image{ width: 144rpx; height: 144rpx; margin-right:20rpx; } } .middle{ position: relative; top: -60rpx; padding: 0 24rpx; } .middle1{ display: flex; background: #FFFFFF; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08); border-radius:12rpx; padding:40rpx; justify-content: space-between; } .middle1-list{ text-align: center; view:first-child{ font-size: 40rpx; font-weight: bold; } view:nth-child(2){ margin-top: 10rpx; } } .middle2,.middle3{ background: #ffffff; margin-top: 20rpx; border-radius: 12rpx; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08); } .middle2-top,.middle3-top{ height: 100rpx; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ececec; padding: 0 24rpx; font-weight: bold; } .middle2-bottom{ display: flex; justify-content: space-between; padding: 24rpx 0; } .middle2-list{ text-align: center; width: 25%; image{ width: 64rpx; height: 64rpx; } } .middle3-bottom{ display: flex; padding: 24rpx 0; flex-wrap: wrap; } .middle3-list{ text-align: center; width: 25%; margin: 20rpx 0; image{ width:80rpx; height:80rpx; } } </style>