Jelajahi Sumber

✨ feat(message):系统通知静态页面

yizhiyang 1 tahun lalu
induk
melakukan
c5ca7f08d2

+ 29 - 7
src/pages.json

@@ -70,7 +70,7 @@
     {
       "path": "pages/merchant/tabBar/order/index",
       "style": {
-        "navigationBarTitleText": "店铺",
+        "navigationBarTitleText": "订单",
         "navigationStyle": "custom"
       }
     },
@@ -157,6 +157,34 @@
           "style": {
             "navigationBarTitleText": "聊天室"
           }
+        },
+        {
+          "path": "message/orderNotice/index",
+          "style": {
+            "navigationBarTitleText": "订单通知",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "message/evaluateNotice/index",
+          "style": {
+            "navigationBarTitleText": "评价通知",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "message/LikeReply/index",
+          "style": {
+            "navigationBarTitleText": "点赞回复",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "message/benefits/index",
+          "style": {
+            "navigationBarTitleText": "优惠福利",
+            "enablePullDownRefresh": false
+          }
         }
       ]
     },
@@ -258,12 +286,6 @@
           "style": {
             "navigationBarTitleText": "用户协议"
           }
-        },
-        {
-          "path": "mine/setting/privacypolicy",
-          "style": {
-            "navigationBarTitleText": "隐私政策"
-          }
         }
       ]
     }

+ 47 - 0
src/pages/client/clientPackage/message/LikeReply/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <view class="LikeReply">
+    <view class="list chelvc-flex" v-for="item in 10">
+      <image
+        src="/static/icon/QR57a.jpg"
+        mode="scaleToFill"
+        style="width: 100rpx; height: 100rpx"
+      />
+      <view class="line chelvc-flex-sub chelvc-flex-item">
+        <view style="font-size: 30rpx; color: #333">
+          <view class="chelvc-flex">
+            <text>yizhiyang</text>
+            <u-icon name="heart-fill" color="#fd746a" size="20" />
+            <text>了我的动态</text>
+          </view>
+          <view class="text-xs text-gray" style="margin-top: 20rpx">2024/02/05</view>
+        </view>
+        <image src="/static/logo.png" mode="scaleToFill" />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.LikeReply {
+  min-height: 100vh;
+  padding: 10rpx 20rpx;
+  background-color: #fff;
+  .list {
+    height: 130rpx;
+    margin-bottom: 20rpx;
+    padding: 0 30rpx;
+    .line {
+      padding-bottom: 20rpx;
+      border-bottom: 2rpx solid #f2f2f2;
+      > image {
+        width: 140rpx;
+        height: 100%;
+      }
+    }
+  }
+}
+</style>

+ 98 - 0
src/pages/client/clientPackage/message/benefits/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <view class="benefits">
+    <view class="list chelvc-flex" v-for="item in 10">
+      <view class="img">
+        <image src="/static/logo.png" mode="scaleToFill" />
+      </view>
+      <view class="content">
+        <view class="text-df">车旅程</view>
+        <view class="title">恭喜您获得8元优惠券</view>
+        <view class="chelvc-flex main">
+          <view class="image">
+            <image src="/static/logo.png" mode="scaleToFill" />
+          </view>
+          <view class="text apostrophe">
+            @双鱼女孩儿ni,您的账户于8:50已入账50个美 团币奖励,即刻进入美团币完成领取,避免失效
+          </view>
+        </view>
+        <view class="chelvc-flex-item time">
+          <view class="chelvc-flex">
+            <view class="dot"></view>
+            <view class="text-xs text-gray">2024/02/05</view>
+          </view>
+          <u-icon name="more-dot-fill" color="#cbcbcb" size="20" />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.benefits {
+  min-height: 100vh;
+  padding: 20rpx;
+  .list {
+    height: 280rpx;
+    background-color: #fff;
+    border-radius: 20rpx;
+    padding: 20rpx;
+    margin-bottom: 20rpx;
+    .img {
+      height: 40rpx;
+      width: 40rpx;
+      margin-right: 20rpx;
+      image {
+        height: 40rpx;
+        width: 40rpx;
+        display: block;
+      }
+    }
+    .content {
+      .main {
+        height: 140rpx;
+        background-color: #f8f8f8;
+        border-radius: 20rpx;
+        .image {
+          height: 140rpx;
+          width: 140rpx;
+          margin-right: 20rpx;
+          image {
+            height: 140rpx;
+            width: 140rpx;
+            display: block;
+            border-radius: 20rpx;
+          }
+        }
+        .text {
+          color: #949494;
+          font-size: 28rpx;
+          height: 80rpx;
+          margin: 30rpx 40rpx 20rpx 0;
+        }
+      }
+
+      .title {
+        font-weight: 600;
+        font-size: 30rpx;
+        color: #555;
+        margin: 10rpx 0 20rpx 0;
+      }
+      .time {
+        margin-top: 10rpx;
+        .dot {
+          width: 16rpx;
+          height: 16rpx;
+          background-color: red;
+          border-radius: 8rpx;
+          margin-right: 10rpx;
+          margin-top: 5rpx;
+        }
+      }
+    }
+  }
+}
+</style>

+ 66 - 0
src/pages/client/clientPackage/message/evaluateNotice/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <view class="evaluateNotice">
+    <view class="list" v-for="item in 6">
+      <view class="chelvc-flex-item">
+        <view class="chelvc-flex">
+          <image
+            src="/static/icon/QR57a.jpg"
+            mode="scaleToFill"
+            style="width: 80rpx; height: 40px; border-radius: 40px"
+          />
+          <view>
+            <view class="text-bold text-df" style="margin-bottom: 10rpx">易只烊</view>
+            <view class="text-22 text-black">2024年2月5日</view>
+          </view>
+        </view>
+        <u-icon name="arrow-right" color="#efefef" size="15" />
+      </view>
+      <view class="text">
+        很好的购物体验,包装很严实,发货也很的购物发货也很的购物体验,包装很严实,发货也很的购物体验,包装很严实,发货也很快。
+      </view>
+      <view class="chelvc-flex img">
+        <image
+          src="https://cdn.uviewui.com/uview/album/1.jpg"
+          mode="scaleToFill"
+          style="height: 120rpx; width: 120rpx"
+        />
+        <image
+          src="https://cdn.uviewui.com/uview/album/1.jpg"
+          mode="scaleToFill"
+          style="height: 120rpx; width: 120rpx"
+        />
+        <image
+          src="https://cdn.uviewui.com/uview/album/1.jpg"
+          mode="scaleToFill"
+          style="height: 120rpx; width: 120rpx"
+        />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.evaluateNotice {
+  min-height: 100vh;
+  padding: 20rpx;
+  .list {
+    background-color: #fff;
+    border-radius: 20rpx;
+    padding: 20rpx;
+    margin-bottom: 20rpx;
+  }
+  .text {
+    margin: 20rpx 0;
+    color: black;
+  }
+  .img {
+    image {
+      margin-right: 10rpx;
+    }
+  }
+}
+</style>

+ 81 - 0
src/pages/client/clientPackage/message/orderNotice/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <view class="orderNotice">
+    <view class="order-list" v-for="item in 5">
+      <view class="chelvc-flex-item order-top">
+        <view class="chelvc-flex chelvc-chelvc-align-center">
+          <image src="/static/logo.png" mode="scaleToFill" />
+          <view class="text-df margin-left-xs">车旅程</view>
+        </view>
+        <u-icon name="arrow-right" color="#cbcbcb" size="15" />
+      </view>
+      <view>
+        <view class="chelvc-flex-item title">
+          <view class="text-bold text-black">订单支付成功</view>
+          <view class="text-xs text-gray">2024/02/05</view>
+        </view>
+        <view class="chelvc-flex content">
+          <view class="img">
+            <image src="/static/logo.png" mode="scaleToFill" />
+          </view>
+          <view class="text apostrophe">
+            钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.orderNotice {
+  min-height: 100vh;
+  padding: 20rpx;
+  box-sizing: border-box;
+  .order-list {
+    height: 280rpx;
+    background-color: #fff;
+    border-radius: 20rpx;
+    padding: 20rpx;
+    margin-bottom: 20rpx;
+    .order-top {
+      height: 50rpx;
+      border-bottom: 2rpx solid #fbfbfb;
+      padding-bottom: 10rpx;
+      image {
+        height: 40rpx;
+        width: 40rpx;
+      }
+    }
+    .title {
+      margin: 20rpx 0;
+    }
+    .content {
+      height: 140rpx;
+      background-color: #f8f8f8;
+      .img {
+        height: 140rpx;
+        width: 140rpx;
+        image {
+          height: 140rpx;
+          width: 140rpx;
+        }
+      }
+      .text {
+        color: #949494;
+        font-size: 30rpx;
+        height: 80rpx;
+        margin: 30rpx 40rpx 20rpx 20rpx;
+      }
+    }
+  }
+}
+</style>

+ 0 - 70
src/pages/client/clientUser/mine/setting/privacypolicy.vue

@@ -1,70 +0,0 @@
-<template>
-  <view class="page">
-    <scroll-view class="content" scroll-y>
-      <!-- 用户协议内容 -->
-      <view class="section">
-        <view class="paragraph">
-          <p class="head">版本号:V0.0.1</p>
-          <p class="head">更新日期:2024年01月31日</p>
-          <p class="head">生效日期:2024年01月31日</p>
-          <p>
-            欢迎使用车旅程科技有限公司的产品服务!车旅程科技有限公司(以下简称“本公司”)非常重视您的个人信息保护。本隐私政策将告知您本公司如何收集、使用、存储和保护您的个人信息。
-          </p>
-          <p>
-            请在使用本公司的产品服务之前仔细阅读并理解本隐私政策。如果您不同意本政策的任何内容,请您停止使用本公司的产品/服务。
-          </p>
-
-          <p class="title-p">1、信息收集和使用</p>
-          <p>
-            本公司可能会收集和使用以下类型的个人信息:姓名、联系方式、地址等身份识别信息;设备信息、操作记录、IP地址等技术信息;其他您主动提供的个人信息。
-          </p>
-          <p>
-            本公司将严格按照法律法规的要求,使用您的个人信息,并采取合理的安全措施保护您的个人信息。
-          </p>
-
-          <p class="title-p">2、信息存储和保护</p>
-          <p>
-            本公司将采取合理的安全措施,保护您的个人信息的安全性和完整性。同时,本公司将采取合理的措施防止您的个人信息被泄露、丢失或被滥用。
-          </p>
-          <p>本公司将在法律法规要求的时限内存储您的个人信息,并在不再需要时进行删除。</p>
-
-          <p class="title-p">3、信息共享和转让</p>
-          <p>
-            本公司将严格控制个人信息的共享和转让行为,并仅在以下情况下共享或转让您的个人信息:获得您的明确同意;根据法律法规的要求;为了提供您所需的产品/服务而必要的共享或转让;根据法律法规的要求或有权机关的要求进行共享或转让。
-          </p>
-
-          <p class="title-p">4、信息安全</p>
-          <p>
-            本公司将采取合理的安全措施,保护您的个人信息的安全性和完整性。同时,本公司将采取合理的措施防止您的个人信息被泄露、丢失或被滥用。
-          </p>
-
-          <p class="title-p">5、法律适用和争议解决</p>
-          <p>
-            本隐私政策适用中华人民共和国的法律。任何因本隐私政策引起的争议,应通过友好协商解决;协商不成的,可以向有管辖权的人民法院提起诉讼。
-          </p>
-          <p>
-            请您在使用本公司的产品/服务之前,仔细阅读并理解本隐私政策。如果您对政策内容有任何疑问,请随时联系我们。
-          </p>
-        </view>
-      </view>
-    </scroll-view>
-  </view>
-</template>
-
-<style>
-.paragraph {
-  padding: 5px;
-  font-size: 14px;
-  line-height: 1.6;
-  text-indent: 2em; /* 可选,增加段落缩进 */
-}
-.title-p {
-  font-size: 16px;
-  font-weight: 700;
-  text-align: left;
-  text-indent: 0; /* 取消子级段落缩进 */
-}
-.head {
-  font-size: 14px;
-}
-</style>

+ 4 - 4
src/pages/client/tabBar/community/community.js

@@ -1,12 +1,12 @@
 export const communityList = [
-  {
-    name: '关注',
-    type: 'ATTENTION',
-  },
   {
     name: '最新',
     type: 'LATEST',
   },
+  {
+    name: '关注',
+    type: 'ATTENTION',
+  },
   {
     name: '最热',
     type: 'HOTTEST',

+ 2 - 3
src/pages/client/tabBar/community/index.vue

@@ -53,7 +53,7 @@ export default {
       params: {
         pageNum: 1,
         pageSize: 10,
-        type: 'ATTENTION',
+        type: 'LATEST',
         keyWord: '',
       },
       loadingType: '',
@@ -117,7 +117,6 @@ export default {
         //   });
         // }
         this.list = res.records;
-        console.log(res);
 
         if (this.list.length === 0) {
           if (type === 'refresh') loadingType = 'no-data';
@@ -162,9 +161,9 @@ export default {
 };
 </script>
 
-
 <style lang="scss" scoped>
 .list {
+  min-height: 100vh;
   padding: 10rpx 20rpx;
   background-color: #ffffff;
 }

+ 82 - 63
src/pages/client/tabBar/message/index.vue

@@ -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;
+      }
     }
   }
 }

TEMPAT SAMPAH
src/static/icon/QR57a.jpg


TEMPAT SAMPAH
src/static/icon/tools.png