feat: page-message;

pages_order/message/card.vue

@@ -0,0 +1,97 @@
+<template>
+  <view class="card">
+    <view class="card-header">
+      <view class="title">{{ data.title }}</view>
+      <view class="desc">{{ data.createTime }}</view>
+    </view>
+    <view class="card-content">
+      {{ data.content }}
+    </view>
+    <view class="card-footer">
+      <button class="btn">了解详情</button>
+    </view>
+    <view v-if="data.new" class="dot"></view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+  },
+  methods: {
+    jumpToDetail() {
+      this.$utils.navigateTo(`/pages_order/message/index?id=${this.data.id}`)
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+
+  .card {
+    position: relative;
+    padding: 32rpx 32rpx 0 32rpx;
+    font-family: PingFang SC;
+    font-weight: 400;
+    line-height: 1.4;
+    background-image: linear-gradient(164deg,#DAF3FF 88rpx, #FBFEFF 176rpx, #FBFEFF);
+    border: 2rpx solid #FFFFFF;
+
+    &-header {
+      .title {
+        font-size: 32rpx;
+        color: #181818;
+      }
+
+      .desc {
+        margin-top: 4rpx;
+        font-size: 24rpx;
+        color: #999999;
+      }
+    }
+
+    &-content {
+      margin-top: 16rpx;
+      font-size: 26rpx;
+      line-height: 1.7;
+      color: #666666;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display:-webkit-box; //作为弹性伸缩盒子模型显示。
+      -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+      -webkit-line-clamp:4; //显示的行
+    }
+
+    &-footer {
+      margin-top: 16rpx;
+      border-top: 2rpx dashed #DADADA;
+
+      .btn {
+        width: 100%;
+        padding: 16rpx 32rpx;
+        font-family: PingFang SC;
+        font-size: 32rpx;
+        font-weight: 400;
+        line-height: 1.4;
+        color: #00A9FF;
+        box-sizing: border-box;
+      }
+    }
+
+    .dot {
+      position: absolute;
+      top: 12rpx;
+      right: 12rpx;
+      width: 16rpx;
+      height: 16rpx;
+      background: #F53F3F;
+      border-radius: 50%;
+    }
+  }
+</style>

pages_order/message/index.vue

@@ -0,0 +1,159 @@
+<template>
+  <view class="page__view">
+		<navbar title="详情" leftClick @leftClick="$utils.navigateBack" />
+
+    <view class="main">
+      <view class="card">
+        <view class="card-header">
+          <view class="title">{{ detail.title }}</view>
+          <view class="desc">{{ detail.createTime }}</view>
+        </view>
+        <view class="card-content">
+          {{ detail.content }}
+        </view>
+      </view>
+    </view>
+  
+		<view class="bottom">
+      <button plain class="flex flex-column btn btn-simple" open-type="contact">
+        <image class="icon" src="@/pages_order/static/product/icon-service.png" mode="widthFix"></image>
+        <view>联系客服</view>
+      </button>
+      <button class="col btn" @click="onContactMentor">联系导师</button>
+    </view>
+  </view>
+</template>
+
+<script>
+  import contactMentorPopup from '@/pages_order/order/components/contactMentorPopup.vue'
+
+  export default {
+    components: {
+      contactMentorPopup,
+    },
+    data() {
+      return {
+        id: null,
+        detail: {},
+      }
+    },
+    onLoad(arg) {
+      const { id } = arg
+      this.id = id
+
+      this.getData()
+    },
+    methods: {
+      async getData() {
+        // todo
+
+        // todo: mark read
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+
+	.page__view {
+		width: 100vw;
+		min-height: 100vh;
+		position: relative;
+
+    /deep/ .nav-bar__view {
+      position: fixed;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  .main {
+    padding: calc(var(--status-bar-height) + 160rpx) 40rpx 326rpx 40rpx;
+  }
+
+  .card {
+    padding: 32rpx;
+    font-family: PingFang SC;
+    font-weight: 400;
+    line-height: 1.4;
+    background: #FFFFFF;
+    border-radius: 32rpx;
+
+    &-header {
+      font-family: PingFang SC;
+      line-height: 1.4;
+      color: #252545;
+
+      .title {
+        font-size: 40rpx;
+        font-weight: 500;
+        color: #262626;
+      }
+
+      .desc {
+        margin-top: 4rpx;
+        font-size: 24rpx;
+        color: #999999;
+      }
+    }
+
+    &-content {
+      margin-top: 24rpx;
+      font-size: 28rpx;
+      line-height: 1.7;
+      color: #3B3D3D;
+    }
+  }
+  
+  .bottom {
+		position: fixed;
+		left: 0;
+		bottom: 0;
+
+		width: 100vw;
+		// height: 270rpx;
+		background: #FFFFFF;
+		box-sizing: border-box;
+    padding: 24rpx 40rpx;
+    padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
+    box-sizing: border-box;
+    column-gap: 32rpx;
+
+    .col {
+      flex: 1;
+    }
+
+    .btn {
+      width: 100%;
+      // padding: 14rpx 74rpx;
+      padding: 14rpx 0;
+      font-family: PingFang SC;
+      font-weight: 500;
+      font-size: 36rpx;
+      line-height: 1;
+      color: #252545;
+      border: 2rpx solid #252545;
+      border-radius: 41rpx;
+    }
+
+    .btn-simple {
+      flex: none;
+      width: auto;
+      font-family: PingFang SC;
+      font-weight: 400;
+      font-size: 22rpx;
+      line-height: 1.1;
+      color: #999999;
+      border: none;
+      border-radius: unset;
+
+      .icon {
+        width: 52rpx;
+        height: auto;
+        margin-bottom: 4rpx;
+      }
+    }
+
+	}
+
+</style>

pages_order/message/list.vue

@@ -0,0 +1,57 @@
+<template>
+	<view class="page__view">
+
+		<navbar title="开营通知" leftClick @leftClick="$utils.navigateBack" />
+
+    <view class="list">
+      <view class="list-item" v-for="item in list" :key="item.id">
+        <messageCard :data="item" ></messageCard>
+      </view>
+    </view>
+
+  </view>
+  
+</template>
+
+<script>
+	import mixinsList from '@/mixins/list.js'
+
+  import messageCard from './card.vue'
+
+  export default {
+		mixins: [mixinsList],
+    components: {
+      messageCard,
+    },
+    data() {
+      return {
+        // todo: check key
+				mixinsListApi: '',
+      }
+    },
+    methods: {
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .page__view {
+		width: 100vw;
+		min-height: 100vh;
+		background-color: $uni-bg-color;
+		position: relative;
+  }
+
+  .list {
+    padding: 40rpx;
+
+    &-item {
+
+      & + & {
+        margin-top: 32rpx;
+      }
+
+    }
+  }
+
+</style>

pages_order/order/styles/style.scss

@@ -33,6 +33,7 @@
       color: #252545;
     }
   }
+  
   .form {
     &-item {
       margin-top: 16rpx;