3.27

src/api/user.js

@@ -27,8 +27,20 @@ export const userinfo = params => (request({
 export const follow = params => (request({
   params,
   method: 'GET',
-  url: `user/${params}/follow`
+  url: `user/follow`
 }))
+//粉丝列表
+export const fans = params => (request({
+  params,
+  method: 'GET',
+  url: `user/fans`
+}))
+//关注
+export const userfollow = data => request({
+  data,
+  method: 'POST',
+  url: `user/${data.id}/follow`
+})
 
 export const finance = () => (request({
   method: 'GET',

src/components/ActivateMembership/index.vue

@@ -1,5 +1,5 @@
 <script setup name="ActivateMembership">
-import { ref, onMounted, reactive } from "vue";
+import { ref, onMounted} from "vue";
 import { Close } from "@element-plus/icons-vue";
 import SvgIcon from "~/components/SvgIcon/index.vue";
 import * as vipApi from "~/api/vip";
@@ -16,10 +16,14 @@ const product = async () => {
 };
 onMounted(product);
 
+//列表交换
+const conten = ref ()
+conten.value = 0
 //详情
 const id = ref("");
 const info = ref([{}]);
-const infa = async (id) => {
+const infa = async (id,idx) => {
+  conten.value = idx
   id.value = id;
   try {
     const { data } = await vipApi.info({
@@ -33,7 +37,7 @@ const index = ref("wechat");
 const pay = (idx) => {
   index.value = idx;
 };
-const visiblePay = ref(true);
+const visiblePay = ref(false);
 //支付
 const topay = async () => {
   visiblePay.value = true;
@@ -48,7 +52,7 @@ const topay = async () => {
 
 defineOptions({ name: "ActivateMembership" });
 const prop = defineProps({
-  visibleDialog: {
+  visiblePay: {
     default: () => {
       return false;
     },
@@ -62,7 +66,7 @@ const prop = defineProps({
   <div class="activate-membership-container">
     <el-dialog
       class="dialog-primary"
-      v-model="prop.visibleDialog"
+      v-model="prop.visiblePay"
       :show-close="false"
       width="634px"
     >
@@ -108,8 +112,9 @@ const prop = defineProps({
             <div
               v-for="(item, idx) in vipList"
               :key="idx"
-              class="item active flex-col flex-aic flex-jc-sb"
-              @click="infa(item.coupon_id)"
+              class="item  flex-col flex-aic flex-jc-sb"
+              :class="conten==idx?'active':''"
+              @click="infa(item.coupon_id,idx)"
             >
               <div class="item__title">{{ item.name }}</div>
               <div class="item__money">
@@ -147,7 +152,7 @@ const prop = defineProps({
       </div>
     </el-dialog>
     <!-- Pay dialog -->
-    <el-dialog v-model="visiblePay" title="支付宝支付" width="20%">
+    <el-dialog v-model="visiblePay" :title="index=='alipay'?'支付宝支付':'微信支付'" width="20%">
       <div class="paybox flex-col flex-aic">
         <div class="paybox__title">
           支付金额 <span>￥</span><span>{{ info.price }}</span>
@@ -159,7 +164,8 @@ const prop = defineProps({
         <div class="paybox__foot flex-row flex-aic">
           <SvgIcon name="scan" :size="30" color="rgba(152, 152, 152, 1)" />
           <div class="flex-col">
-            <span>打开手机支付宝</span>
+            <span v-if="index=='wechat'">打开手机微信</span>
+            <span v-if="index=='alipay'">打开手机支付宝</span>
             <span>扫一扫二维码</span>
           </div>
         </div>
@@ -301,11 +307,12 @@ const prop = defineProps({
           flex: 1;
           padding: 18px;
           border-radius: 10px;
-
+          border: 2px solid #f6f6f6;
           background: #f6f6f6;
 
           &.active {
             border: 2px solid #57c3c2;
+            box-sizing: border-box;
           }
 
           &__title {

src/components/ErrorReport/index.vue

@@ -8,7 +8,7 @@ import { getSourcesSuffix } from '~/utils/util';
 const Props = defineProps({
   visibility: {
     type: Boolean,
-    default: false
+    default: true
   }
 })
 

src/components/layouts/Footer.vue

@@ -30,8 +30,8 @@ const vals = ref([
 ]);
 
 const toagument = (type) => {
-  touter.push({
-    path: "",
+  router.push({
+    name: "Arguments",
     query: {
       type: type,
     },
@@ -66,19 +66,19 @@ const toagument = (type) => {
       <div class="navigation">
         <ul class="flex-row flex-aic">
           <li>
-            <a href="#/"> 错误反馈 </a>
+            <a > 错误反馈 </a>
           </li>
           <li>
-            <a href="" @click="toagument()"> 用户协议 </a>
+            <a href="#/argument?type=user" > 用户协议 </a>
           </li>
           <li>
-            <a href="#"> 隐私政策 </a>
+            <a href="#/argument?type=private" > 隐私政策 </a>
           </li>
           <li>
-            <a href="#"> 开源软件声明 </a>
+            <a href="#/argument?type=software"> 开源软件声明 </a>
           </li>
           <li>
-            <a href="#"> 个人信息收集清单 </a>
+            <a href="#/argument?type=personal"> 个人信息收集清单 </a>
           </li>
           <li>
             <a href="#/join"> 加入忆象 </a>

src/components/layouts/Header.vue

@@ -50,8 +50,8 @@ const toget = (id, type) => {
 const __leve__ = async (id) => {
   try {
     const { data } = await qianApi.levelPrize({
-      id:id,
-      address_id:''
+      id: id,
+      address_id: "",
     });
   } catch (error) {}
 };
@@ -95,7 +95,7 @@ const handleClickMoment = (moment) => {
   );
 };
 
-//通知
+//兑换
 const toinform = (idx) => {
   if (idx == 0) {
     router.push({
@@ -105,6 +105,14 @@ const toinform = (idx) => {
   }
 };
 
+//通知
+const inform = (idx) => {
+  router.push({
+    path: "/inform",
+    query: {},
+  });
+};
+
 let pan = ref(false);
 //开通会员
 const member = () => {
@@ -190,10 +198,7 @@ const attention = (idx) => {
                 <div class="prize-box__img"></div>
                 <div class="prize-box__title">等级达到{{ item.level }}级</div>
                 <div class="prize-box__sub-title">{{ item.prize_name }}</div>
-                <el-button
-                  type="primary"
-                  disabled
-                  v-if="item.is_received == 1"
+                <el-button type="primary" disabled v-if="item.is_received == 1"
                   >已领取</el-button
                 >
                 <el-button
@@ -202,10 +207,7 @@ const attention = (idx) => {
                   @click="toget(item.prize_id, item.prize_type)"
                   >领取</el-button
                 >
-                <el-button
-                  link
-                  disabled
-                  v-if="item.is_qualified == 0"
+                <el-button link disabled v-if="item.is_qualified == 0"
                   >未达标</el-button
                 >
               </div>
@@ -239,7 +241,7 @@ const attention = (idx) => {
             </div>
           </el-popover>
 
-          <el-button link @click="toinform">
+          <el-button link @click="inform">
             <SvgIcon name="ding" :size="24"></SvgIcon>
           </el-button>
           <!-- NOTE: User Avatar container -->

src/router/index.js

@@ -212,6 +212,22 @@ const routes = [
     ]
   },
 
+  //聊天
+  {
+    path: '/chat',
+    meta: {
+      title: '私信'
+    },
+    component: Layout,
+    children: [
+      {
+        path: '',
+        name: 'chat',
+        component: () => import('~/views/tongzhi/chat.vue')
+      },
+    ]
+  },
+
   // 个人中心
   {
     path: '/personal',
@@ -298,7 +314,7 @@ const routes = [
 
   // argument 
   {
-    path: '/argument/:type',
+    path: '/argument',
     component: LayoutHeader,
     children: [
       {

src/views/agreement/index.vue

@@ -3,13 +3,13 @@ import { onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
 import { getAgreementDetail } from "~/api/common";
 const Route = useRoute();
-
+console.log('router',Route.query);
 const articleContent = ref("");
 
 const __detail__ = async () => {
   try {
     const { data } = await getAgreementDetail({
-      code: Route.params.type,
+      code: Route.query.type,
     });
     if (data) {
       const { name = "", content = "" } = data;

src/views/personal/index.vue

@@ -14,11 +14,47 @@ import {
 
 import { usePersonalIndexList } from "~/useHook/usePersonalIndex";
 import debounce from "loadsh/debounce";
+import * as follow from "~/api/user";
 
 //弹出层
-const dialogVisible = ref(false)
+const dialogVisible = ref(false);
 const User = useUser();
 
+//弹出层
+const attention = () => {
+  dialogVisible.value = true;
+};
+
+const inde = ref(0);
+//关注列表
+const guan = (id) => {
+  inde.value = id;
+  if (id == 0) {
+    __articles__();
+  } else {
+    __fans__();
+  }
+};
+
+const fllowlist = ref([]);
+const __fans__ = async () => {
+  try {
+    const { data } = await follow.follow({
+      is_page: 0,
+    });
+    fllowlist.value = data.list;
+  } catch (error) {}
+};
+const __articles__ = async () => {
+  try {
+    const { data } = await follow.follow({
+      is_page: 0,
+    });
+    fllowlist.value = data.list;
+  } catch (error) {}
+};
+onMounted(__articles__);
+
 console.log("user see>>", User);
 
 // forum, news, article, video, collect
@@ -161,11 +197,27 @@ const handleRefreshListData = () => {
             </ul>
           </div>
           <ul class="snm-right flex-row flex-aic">
-            <li>
-              <div class="xtit" @click="dialogVisible=true">已关注</div>
+            <li
+              @click="attention()"
+              style="
+                cursor: pointer;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+              "
+            >
+              <div class="xtit" @click="dialogVisible = true">已关注</div>
               <span>{{ User.follow_count }}</span>
             </li>
-            <li>
+            <li
+              @click="attention()"
+              style="
+                cursor: pointer;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+              "
+            >
               <div class="xtit">被关注</div>
               <span>{{ User.fans_count }}</span>
             </li>
@@ -217,13 +269,113 @@ const handleRefreshListData = () => {
   <el-dialog
     v-model="dialogVisible"
     width="500px"
+    style="height: 560px; border-radius: 10px"
+    :show-close="true"
   >
-
+    <div style="padding: 0px 24px; box-sizing: border-box">
+      <div style="display: flex; margin-top: -20px">
+        <div :class="inde == 0 ? 'active' : 'toptitle'" @click="guan(0)">
+          已关注
+        </div>
+        <div
+          :class="inde == 1 ? 'active' : 'toptitle'"
+          style="margin-left: 46px"
+          @click="guan(1)"
+        >
+          被关注
+        </div>
+      </div>
+      <div class="boxa">
+        <div style="display: flex">
+          <img
+            src="../../assets/logo.png"
+            style="width: 46px; height: 46px; border-radius: 50%"
+            alt=""
+          />
+          <div style="margin-left: 12px">
+            <div class="name">这样重这样轻</div>
+            <div class="info">做电台节目的</div>
+          </div>
+        </div>
+        <div>
+          <!-- <div class="attention">关注</div> -->
+          <div class="atten">已关注</div>
+        </div>
+      </div>
+    </div>
   </el-dialog>
 </template>
 
 <style lang="scss" scoped>
 @import "~/styles/variable.scss";
+.active {
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 500;
+  font-size: 18px;
+  color: #222222;
+  line-height: 25px;
+  text-align: justify;
+  font-style: normal;
+}
+.toptitle {
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 500;
+  font-size: 18px;
+  color: #999999;
+  line-height: 25px;
+  text-align: justify;
+  font-style: normal;
+}
+.atten {
+  width: 92px;
+  height: 38px;
+  background: #c7cbcc;
+  border-radius: 4px;
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  font-size: 14px;
+  color: #ffffff;
+  line-height: 38px;
+  text-align: center;
+  font-style: normal;
+}
+.attention {
+  background: #00b0b0;
+  border-radius: 4px;
+  width: 92px;
+  height: 38px;
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  font-size: 14px;
+  color: #ffffff;
+  line-height: 38px;
+  text-align: center;
+  font-style: normal;
+}
+.name {
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 500;
+  font-size: 14px;
+  color: #333333;
+  line-height: 20px;
+  text-align: justify;
+  font-style: normal;
+}
+.info {
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  font-size: 10px;
+  color: #777777;
+  line-height: 14px;
+  text-align: justify;
+  font-style: normal;
+  margin-top: 4px;
+}
+.boxa {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 32px;
+}
 
 ul {
   list-style: none;

src/views/tongzhi/components/comment.vue

@@ -1,14 +1,16 @@
 <template>
-  <div class="box">
-    <div>
+  <div class="box" v-for="(item, idx) in 1" :key="idx">
+    <div style="display: flex">
       <div>
-        <img src="" style="width: 48px; height: 48px" alt="" />
+        <img src="" style="width: 48px; height: 48px;border-radius: 50%;" alt="" />
       </div>
-      <div>
-        <div>
+      <div >
+        <div style="width: 775px">
           <div>
-            <div class="title">火凤燎原</div>
-            <div class="ping">评论了我的文章</div>
+            <div style="display: flex">
+              <div class="title">火凤燎原</div>
+              <div class="ping">评论了我的文章</div>
+            </div>
           </div>
           <div class="date">2023-02-16 18:23</div>
         </div>
@@ -33,17 +35,47 @@
 <script setup>
 import { useRouter } from "vue-router";
 import { onMounted, ref } from "vue";
-onMounted(() => {});
+import * as commentApi from "~/api/comment";
+let newsList = ref([]);
+const __news__ = async () => {
+  try {
+    const { data } = await commentApi.mylist({
+      is_page: 0,
+    });
+    newsList.value = data;
+  } catch (error) {}
+};
+
+onMounted(__news__);
 </script>
 
 <style lang="scss" scoped>
+.date {
+  font-family: SFPro, SFPro;
+  font-weight: 400;
+  font-size: 14px;
+  color: #888888;
+  line-height: 16px;
+  text-align: right;
+  font-style: normal;
+}
 .back {
   background: #f7f7f7;
   border-radius: 6px;
 }
 .ping {
-  background: #00b0b0;
+  background: rgba(0, 176, 176, 0.1);
   border-radius: 2px;
+  min-width: 100px;
+  height: 25px;
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  font-size: 12px;
+  color: #00b0b0;
+  line-height: 17px;
+  text-align: center;
+  font-style: normal;
+  line-height: 25px;
 }
 .title {
   font-family: PingFangSC, PingFang SC;

src/views/tongzhi/components/inform.vue

@@ -7,24 +7,34 @@
     </el-tabs>
   </div>
   <div>
-    <!-- 全部通知 -->
-    <div class="box">
-      <div style="display: flex; align-items: center;">
-        <div class="title">🎉您的预约已拍摄完毕！</div>
-        <div class="data">2023年8月2日 16:15</div>
+    <template v-if="type == ''">
+      <!-- 全部通知 -->
+      <div class="box" v-for="(item, index) in articleList" :key="index">
+        <div style="display: flex; align-items: center">
+          <div class="title">{{ item.title }}</div>
+          <div class="data">{{ item.updated_at }}</div>
+        </div>
+        <div class="content">{{ item.content }}</div>
       </div>
-      <div class="content">恭喜！你已成功的兑换了商品“VR设备全息</div>
-    </div>
-    <div class="box" style="display: flex;">
-      <div><img src="" style="width: 48px; height: 48px" alt="" /></div>
-      <div>
+    </template>
+    <!-- 收藏 -->
+    <template v-else>
+      <div
+        class="box"
+        style="display: flex"
+        v-for="(item, index) in articleList"
+        :key="index"
+      >
+        <div><img src="" style="width: 48px; height: 48px" alt="" /></div>
         <div>
-          <span class="title">火凤燎原</span>
-          <span class="data">2023-10-30 09:32</span>
+          <div>
+            <span class="title">{{ item.title }}</span>
+            <span class="data">{{ item.updated_at }}</span>
+          </div>
+          <div class="order">{{ item.content }}</div>
         </div>
-        <div class="order">收藏了你的文章“钢铁是怎样炼成的”</div>
       </div>
-    </div>
+    </template>
   </div>
 </template>
 
@@ -43,7 +53,7 @@ const handleClick = (tab) => {
   } else {
     type.value = "collect";
   }
-  __articles__()
+  __articles__();
 };
 
 //接口
@@ -101,6 +111,7 @@ onMounted(() => {});
 }
 ::v-deep .el-tabs__nav-wrap::after {
   background-color: rgba(0, 0, 0, 0) !important;
+  cursor: pointer !important;
 }
 ::v-deep .el-tabs__item.is-active {
   color: #333333 !important;

src/views/tongzhi/components/private.vue

@@ -2,53 +2,75 @@
   <div>
     <div>全部私信</div>
     <!-- 全部通知 -->
-    <div class="box">
-      <img
-        src=""
-        style="width: 48px; height: 48px; border-radius: 50%"
-        alt=""
-      />
+    <div
+      class="box"
+      @click="tochatInfo(item.user_id)"
+      v-for="(item, index) in chatList"
+      :key="index"
+    >
+      <div style="position: relative">
+        <img
+          :src="item.chat_user.avatar"
+          style="width: 48px; height: 48px; border-radius: 50%"
+          alt=""
+        />
+        <div
+          v-if="item.is_read == 0"
+          style="
+            color: #fff;
+            font-size: 10px;
+            text-align: center;
+            line-height: 16px;
+            position: absolute;
+            left: -5px;
+            top: 3px;
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            background: red;
+          "
+        >
+          {{ item.unread_count }}
+        </div>
+      </div>
       <div class="right">
         <div>
-          <span class="title">英明果断柳叶WA</span>
+          <span class="title">{{ item.chat_user.username }}</span>
           <span class="si">与你的私信</span>
-          <span class="date">2023-10-12 19:32</span>
+          <span class="date">{{ item.updated_at }}</span>
         </div>
-        <div class="content">不是什么大问题，这个银行经营很稳健。</div>
+        <div class="content">{{ item.content }}</div>
       </div>
     </div>
   </div>
 </template>
-  
-  <script setup>
+
+<script setup>
 import { useRouter } from "vue-router";
 import { onMounted, ref } from "vue";
-import * as informApi from "~/api/infrom";
-
-//改变
-const type = ref("");
-const handleClick = (tab) => {
-  if (tab.index == 0) {
-    type.value = "";
-  } else if (tab.index == 1) {
-    type.value = "like";
-  } else {
-    type.value = "collect";
-  }
+import * as chatApi from "~/api/private";
+const router = useRouter();
+//进入详情
+const tochatInfo = (id) => {
+  router.push({
+    path: "chat",
+    query: {
+      id: id,
+    },
+  });
 };
 
-//接口
-let articleList = ref([]);
-const __articles__ = async () => {
+//私信列表
+const chatList = ref();
+const __chatList__ = async (id) => {
   try {
-    const { data } = await informApi.list({
+    const { data } = await chatApi.list({
       is_page: 0,
-      type: type.value,
     });
-    articleList.value = data;
+    chatList.value = data;
   } catch (error) {}
 };
-onMounted(__articles__);
+onMounted(__chatList__);
 //首选项
 const activeName = ref("first");
 onMounted(() => {});

src/views/tongzhi/index.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { ref } from "vue";
 import inform from "./components/inform.vue";
+import comment from "./components/comment.vue";
+import privaye from "./components/private.vue";
 //更改
 let changeval = ref("0");
 const change = (val) => {
@@ -56,7 +58,9 @@ const change = (val) => {
       </div>
     </div>
     <div class="right">
-      <inform></inform>
+      <inform v-if="changeval == 0"></inform>
+      <comment v-if="changeval == 1"></comment>
+      <privaye v-if="changeval == 2"></privaye>
     </div>
   </div>
 </template>

vite.config.js

@@ -5,7 +5,8 @@ import vue from '@vitejs/plugin-vue'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
-import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
+// import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
 
 // https://vitejs.dev/config/
 export default defineConfig({