|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
+ <view class="container">
|
|
|
<view>
|
|
|
<u-navbar :autoBack="true" leftIconSize="0">
|
|
|
<view slot="center">
|
|
@@ -9,9 +9,16 @@
|
|
|
|
|
|
<view :style="{ marginTop: totalHeight + 'px' }">
|
|
|
<view v-if="current == 0">
|
|
|
- <!-- <view class="orderList" v-for="item in orderList" :key="item.id" @tap="$Router.push(item.url)"> -->
|
|
|
- <view class="orderList" v-for="item in orderList" :key="item.id">
|
|
|
- <image :src="item.img" style="width: 40px; height: 40px" />
|
|
|
+ <view
|
|
|
+ class="orderList"
|
|
|
+ v-for="item in orderList"
|
|
|
+ :key="item.id"
|
|
|
+ @tap="$Router.push(item.url)"
|
|
|
+ >
|
|
|
+ <view class="img">
|
|
|
+ <image :src="item.img" style="width: 45px; height: 45px" />
|
|
|
+ <view class="dot"></view>
|
|
|
+ </view>
|
|
|
<view class="orderItem">
|
|
|
<view class="order1">{{ item.name }}</view>
|
|
|
<view class="order2">{{ item.text }}</view>
|
|
@@ -22,8 +29,10 @@
|
|
|
|
|
|
<!-- 消息通知 -->
|
|
|
<view v-if="current == 1">
|
|
|
- <view class="message" @click="notification">
|
|
|
- <image src="/static/images/home-select.png" style="width: 40px; height: 40px" />
|
|
|
+ <view class="message" @click="notification" v-for="item in 5">
|
|
|
+ <view class="img">
|
|
|
+ <image src="/static/icon/tools.png" style="width: 45px; height: 45px" />
|
|
|
+ </view>
|
|
|
<view class="business">
|
|
|
<view class="businessItem">商家</view>
|
|
|
<view class="messages">您好,请问有什么需要帮助的吗?</view>
|
|
@@ -45,7 +54,10 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
list: [
|
|
|
- { id: 1, name: '系统通知' },
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ name: '系统通知',
|
|
|
+ },
|
|
|
{
|
|
|
id: 2,
|
|
|
name: '消息通知',
|
|
@@ -58,31 +70,31 @@ export default {
|
|
|
orderList: [
|
|
|
{
|
|
|
id: '1',
|
|
|
- img: '/static/images/home-select.png',
|
|
|
+ img: '/static/icon/tools.png',
|
|
|
name: '订单通知',
|
|
|
text: '您的订单成功付款,感谢您的支持。',
|
|
|
- url: '',
|
|
|
+ url: '/pages/client/clientPackage/message/orderNotice/index',
|
|
|
},
|
|
|
{
|
|
|
id: '3',
|
|
|
- img: '/static/images/home-select.png',
|
|
|
+ img: '/static/icon/tools.png',
|
|
|
name: '评价通知',
|
|
|
text: '您的订单成功付款,感谢您的支持。',
|
|
|
- url: '',
|
|
|
+ url: '/pages/client/clientPackage/message/evaluateNotice/index',
|
|
|
},
|
|
|
{
|
|
|
id: '4',
|
|
|
- img: '/static/images/home-select.png',
|
|
|
+ img: '/static/icon/tools.png',
|
|
|
name: '点赞回复',
|
|
|
text: '您的订单成功付款,感谢您的支持。',
|
|
|
- url: '',
|
|
|
+ url: '/pages/client/clientPackage/message/LikeReply/index',
|
|
|
},
|
|
|
{
|
|
|
id: '5',
|
|
|
- img: '/static/images/home-select.png',
|
|
|
+ img: '/static/icon/tools.png',
|
|
|
name: '优惠福利',
|
|
|
text: '您的订单成功付款,感谢您的支持。',
|
|
|
- url: '',
|
|
|
+ url: '/pages/client/clientPackage/message/benefits/index',
|
|
|
},
|
|
|
],
|
|
|
type: 'warning',
|
|
@@ -116,65 +128,72 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.messages {
|
|
|
+.container {
|
|
|
min-height: 100vh;
|
|
|
background-color: #fff;
|
|
|
-}
|
|
|
-
|
|
|
-.orderList {
|
|
|
- display: flex;
|
|
|
- padding: 30rpx;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- image {
|
|
|
- margin-right: 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .orderItem {
|
|
|
- flex: 1;
|
|
|
-
|
|
|
- .order1 {
|
|
|
- font-size: 16px;
|
|
|
- margin-bottom: 10rpx;
|
|
|
- color: #232323;
|
|
|
+ .img {
|
|
|
+ width: 90rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ position: relative;
|
|
|
+ .dot {
|
|
|
+ width: 16rpx;
|
|
|
+ height: 16rpx;
|
|
|
+ background-color: red;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: -5rpx;
|
|
|
+ right: 0;
|
|
|
}
|
|
|
-
|
|
|
- .order2 {
|
|
|
- font-size: 12px;
|
|
|
- color: #9ca3af;
|
|
|
+ }
|
|
|
+ .orderList {
|
|
|
+ display: flex;
|
|
|
+ padding: 30rpx 40rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ .orderItem {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .order1 {
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ color: #232323;
|
|
|
+ }
|
|
|
+
|
|
|
+ .order2 {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #9ca3af;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.message {
|
|
|
- display: flex;
|
|
|
- padding: 30rpx;
|
|
|
- justify-content: space-between;
|
|
|
+ .message {
|
|
|
+ display: flex;
|
|
|
+ padding: 30rpx 40rpx;
|
|
|
+ justify-content: space-between;
|
|
|
|
|
|
- image {
|
|
|
- margin-right: 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .business {
|
|
|
- flex: 1;
|
|
|
+ .business {
|
|
|
+ flex: 1;
|
|
|
|
|
|
- .businessItem {
|
|
|
- font-size: 16px;
|
|
|
- margin-bottom: 10rpx;
|
|
|
- color: #232323;
|
|
|
- }
|
|
|
+ .businessItem {
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ color: #232323;
|
|
|
+ }
|
|
|
|
|
|
- .messages {
|
|
|
- font-size: 12px;
|
|
|
- color: #9ca3af;
|
|
|
+ .messages {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #9ca3af;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .time {
|
|
|
- .timeItem {
|
|
|
- color: #9ca3af;
|
|
|
- font-size: 14px;
|
|
|
- margin-bottom: 8px;
|
|
|
+ .time {
|
|
|
+ .timeItem {
|
|
|
+ color: #9ca3af;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|