3.28

src/App.vue

@@ -28,4 +28,8 @@ const local = ref(zhCn);
     padding: 0;
   }
 }
+.el-radio__input.is-checked + .el-radio__label {
+  font-size: 16px;
+  color: #333333;
+}
 </style>

src/api/private.js

@@ -0,0 +1,26 @@
+/**
+ * 聊天
+ */
+import request from '~/utils/request'
+
+// 聊天列表
+export const list = params => (request({
+    params,
+    method: 'GET',
+    url: 'chat'
+}))
+
+// 聊天详情
+export const chat = params => (request({
+    params,
+    method: 'GET',
+    url: 'chat/detail'
+}))
+
+
+// 发送消息
+export const multipart = data => (request({
+    data,
+    method: 'POST',
+    url: 'multipart/form-data'
+}))

src/api/user.js

@@ -82,4 +82,42 @@ export const other = params => request({
   url: 'user/user/info',
   method: 'GET',
   params
+})
+
+//更换手机号
+export const phone = data => request({
+  url: 'user/change-mobile',
+  method: 'POST',
+  data
+})
+//修改密码
+export const password = data => request({
+  url: 'user/change-password',
+  method: 'POST',
+  data
+})
+
+//邀请列表
+export const children = params => request({
+  url: 'user/children',
+  method: 'GET',
+  params
+})
+//邀请人信息
+export const parent = () => request({
+  url: 'user/parent',
+  method: 'GET',
+})
+
+//获取用户配置
+export const config = () => request({
+  url: 'user/config',
+  method: 'GET',
+})
+
+//设置用户配置
+export const postconfig = params => request({
+  url: 'user/config',
+  method: 'GET',
+  params
 })

src/components/IndexSection/index.vue

@@ -29,10 +29,12 @@ const Props = defineProps({
   collect_count: String, //收藏数
   share_count: String, //分享数
 });
-const emit = defineEmits(['todetails'])
-const todetails =()=>{
-  emit('update')
-}
+const emit = defineEmits(["todetails"]);
+const todetails = () => {
+  emit("update");
+};
+
+const shareLink = () => {};
 </script>
 
 <template>
@@ -51,7 +53,9 @@ const todetails =()=>{
       </div>
 
       <!-- TODO: 话题是否必填   v-show="topicName" -->
-      <div class="flag"  :style="{opacity:topicName?'1':'0'}">#{{ topicName }}</div>
+      <div class="flag" :style="{ opacity: topicName ? '1' : '0' }">
+        #{{ topicName }}
+      </div>
 
       <div class="moment-user flex-row flex-aic flex-jc-sb">
         <div class="left flex-row flex-aic">
@@ -67,7 +71,7 @@ const todetails =()=>{
         <ul class="flex-row flex-aic flex-jc-sb">
           <li class="active">
             <SvgIcon name="like" :size="16" :rgap="2" color="#00b0b0" />
-            <span>{{ view_count || 0  }}</span>
+            <span>{{ view_count || 0 }}</span>
           </li>
           <li class="active">
             <SvgIcon name="collect" :size="16" :rgap="2" color="#00b0b0" />
@@ -77,7 +81,7 @@ const todetails =()=>{
             <SvgIcon name="message" :size="16" :rgap="2" color="#999999" />
             <span>{{ collect_count || 0 }}</span>
           </li>
-          <li>
+          <li >
             <SvgIcon name="forward" :size="16" :rgap="2" color="#999999" />
             <span>{{ share_count || 0 }}</span>
           </li>

src/views/personal/components/sett.vue

@@ -81,7 +81,38 @@
         <div class="buttona" @click="save">保存</div>
       </div>
     </div>
-    <div v-if="subNavCurrent == 'invite'"></div>
+    <div v-if="subNavCurrent == 'invite'">
+      <div>
+        <div style="display: flex; justify-content: space-between">
+          <div style="display: flex; align-items: center">
+            <div
+              :class="inviteidx == 0 ? 'activein' : 'myin'"
+              @click="changeinvite(0)"
+            >
+              邀请人
+            </div>
+            <div
+              style="margin-left: 27px"
+              :class="inviteidx == 1 ? 'activein' : 'myin'"
+              @click="changeinvite(1)"
+            >
+              我的邀请
+            </div>
+          </div>
+          <div class="myfriend">邀请好友</div>
+        </div>
+        <div style="margin-top: 40px">
+          <img
+            src=""
+            alt=""
+            style="width: 36px; height: 36px; border-radius: 50%"
+          />
+          <span style="margin-left: 14px" class="bei">邀请人备份</span>
+          <span style="margin-left: 40px" class="time">2023-02-12</span>
+        </div>
+      </div>
+      <div></div>
+    </div>
     <div v-if="subNavCurrent == 'zhang'">
       <div style="margin-top: 35px">
         <div style="display: flex; align-items: center">
@@ -89,7 +120,9 @@
           <div style="margin-left: 22px; min-width: 95px" class="phone">
             178****2987
           </div>
-          <div class="button" style="margin-left: 24px">更改手机号</div>
+          <div class="button" style="margin-left: 24px" @click="dialog = true">
+            更改手机号
+          </div>
         </div>
       </div>
       <div style="margin-top: 33px; display: flex; align-items: center">
@@ -103,8 +136,81 @@
         <div class="button" style="margin-left: 24px">修改密码</div>
       </div>
     </div>
-    <div v-if="subNavCurrent == 'xiaoxi'"></div>
+    <div v-if="subNavCurrent == 'xiaoxi'">
+      <div>
+        <div>推送通知</div>
+        <div style="display: flex; margin-top: 23px">
+          <div>
+            <span class="zhi">系统通知</span>
+            <el-switch
+              v-model="is_system_notify"
+              active-color="rgba(0, 176, 176, 1)"
+              inactive-color="rgba(102, 102, 102, 0.8)"
+            ></el-switch>
+          </div>
+          <div style="margin-left: 30px">
+            <span class="zhi">点赞推送</span>
+            <el-switch
+              v-model="is_like_notify"
+              active-color="rgba(0, 176, 176, 1)"
+              inactive-color="rgba(102, 102, 102, 0.8)"
+            ></el-switch>
+          </div>
+          <div style="margin-left: 30px">
+            <span class="zhi">评论推送</span>
+            <el-switch
+              v-model="is_comment_notify"
+              active-color="rgba(0, 176, 176, 1)"
+              inactive-color="rgba(102, 102, 102, 0.8)"
+            ></el-switch>
+          </div>
+        </div>
+        <div style="margin-top: 26px">谁给我点赞</div>
+        <div style="margin-top: 24px; display: flex">
+          <div><el-radio v-model="who_can_like" label="all">任何人</el-radio></div>
+          <div>
+            <el-radio v-model="who_can_like" label="follower" style="margin-left: 90px"
+              >今我关注的</el-radio
+            >
+          </div>
+          <div>
+            <el-radio v-model="who_can_like" label="fans" style="margin-left: 90px"
+              >仅关注我的</el-radio
+            >
+          </div>
+        </div>
+        <div style="margin-top: 30px">谁能收藏我的内容</div>
+        <div style="margin-top: 24px; display: flex">
+          <div><el-radio v-model="who_can_collect" label="all">任何人</el-radio></div>
+          <div>
+            <el-radio v-model="who_can_collect" label="follower" style="margin-left: 90px"
+              >今我关注的</el-radio
+            >
+          </div>
+          <div>
+            <el-radio v-model="who_can_collect" label="fans" style="margin-left: 90px"
+              >仅关注我的</el-radio
+            >
+          </div>
+        </div>
+        <div style="margin-top: 30px">谁能评论回复我</div>
+        <div style="margin-top: 24px; display: flex">
+          <div><el-radio v-model="who_can_comment" label="all">任何人</el-radio></div>
+          <div>
+            <el-radio v-model="who_can_comment" label="follower" style="margin-left: 90px"
+              >今我关注的</el-radio
+            >
+          </div>
+          <div>
+            <el-radio v-model="who_can_comment" label="fans" style="margin-left: 90px"
+              >仅关注我的</el-radio
+            >
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
+  <!-- 完善信息 -->
   <el-dialog
     v-model="dialogVisible"
     width="260px"
@@ -131,6 +237,7 @@
       <div class="btn" style="" @click="enter()">确定</div>
     </div>
   </el-dialog>
+  <!-- 更改手机号 -->
   <el-dialog
     title="更改手机号"
     v-model="dialog"
@@ -141,20 +248,62 @@
     <div>
       <div style="margin-top: -20px">
         <el-input
-          v-model="input"
+          v-model="mobile"
           style="width: 358px; height: 46px"
           placeholder="请输入手机号"
         ></el-input>
       </div>
-      <div style="margin-top: 20px;position: relative;">
+      <div style="margin-top: 20px; position: relative">
         <el-input
-          v-model="input"
+          v-model="code"
           style="width: 358px; height: 46px"
           placeholder="请输入验证码"
         ></el-input>
-        <div style="position: absolute;cursor: pointer; right: 30px;top: 15px;" class="code">获取验证码</div>
+        <div
+          style="position: absolute; cursor: pointer; right: 30px; top: 15px"
+          class="code"
+        >
+          获取验证码
+        </div>
+      </div>
+      <div class="change" style="margin-top: 24px" @click="change">
+        确定更改
+      </div>
+    </div>
+  </el-dialog>
+  <!-- 修改密码 -->
+  <el-dialog
+    title="修改密码"
+    v-model="password"
+    width="406px"
+    :before-close="handleClose"
+    style="border-radius: 8px; border: 1px solid #979797"
+  >
+    <div>
+      <div style="margin-top: -20px">
+        <el-input
+          v-model="oldpass"
+          style="width: 358px; height: 46px"
+          placeholder="旧密码"
+        ></el-input>
+      </div>
+      <div style="margin-top: -20px">
+        <el-input
+          v-model="newpass"
+          style="width: 358px; height: 46px"
+          placeholder="新密码"
+        ></el-input>
+      </div>
+      <div style="margin-top: -20px">
+        <el-input
+          v-model="newpa"
+          style="width: 358px; height: 46px"
+          placeholder="确定新密码"
+        ></el-input>
+      </div>
+      <div class="change" style="margin-top: 24px" @click="passchange">
+        确定修改
       </div>
-      <div class="change" style="margin-top: 24px">确定更改</div>
     </div>
   </el-dialog>
 </template>
@@ -173,6 +322,108 @@ const introduction = User.introduction;
 const backgroud_image = User.backgroud_image;
 const avatar = User.avatar;
 const column_1 = ref();
+const inviteidx = ref(0);
+//消息推送
+//获取配置列表
+const confi = ref([{}]);
+// "is_system_notify": 1, //系统通知: 0.关闭, 1.开启
+// "is_like_notify": 1, //点赞通知: 0.关闭, 1.开启
+// "is_comment_notify": 1, //评论通知: 0.关闭, 1.开启
+// "who_can_like": "all", //谁可以点赞: all.所有人, follower.我的关注, fans.关注我的
+// "who_can_collect": "all", //谁可以收藏: all.所有人, follower.我的关注, fans.关注我的
+// "who_can_comment": "all", //谁可以评论回复: all.所有人, follower.我的关注, fans.关注我
+const is_system_notify = ref();
+const is_like_notify = ref();
+const is_comment_notify = ref();
+const who_can_like = ref();
+const who_can_collect = ref();
+const who_can_comment = ref();
+const config = async () => {
+  try {
+    const { data } = await userApi.config({});
+    confi.value = data;
+    is_system_notify.value = data.is_system_notify;
+    is_like_notify.value = data.is_like_notify;
+    is_comment_notify.value = data.is_comment_notify;
+    who_can_like.value = data.who_can_like;
+    who_can_collect.value = data.who_can_collect;
+    who_can_comment.value = data.who_can_comment;
+  } catch (error) {}
+};
+onMounted(config);
+//设置用户配置
+const postconfig = async () => {
+  try {
+    const { data } = await userApi.postconfig({
+      is_system_notify: is_system_notify.value,
+      is_like_notify: is_like_notify.value,
+      is_comment_notify: is_comment_notify.value,
+      who_can_like: who_can_like.value,
+      who_can_collect: who_can_collect.value,
+      who_can_comment: who_can_comment.value,
+    });
+  } catch (error) {}
+};
+//邀请与推广
+const changeinvite = (index) => {
+  inviteidx.value = index;
+  if (index == 0) {
+    parent();
+  } else {
+    children();
+  }
+};
+const inviteList = ref([]);
+const children = async () => {
+  try {
+    const { data } = await userApi.children({
+      is_page: 0,
+    });
+    inviteList.value = data;
+  } catch (error) {}
+};
+const parent = async () => {
+  try {
+    const { data } = await userApi.parent({});
+    inviteList.value = data;
+  } catch (error) {}
+};
+onMounted(parent);
+//修改密码
+const oldpass = ref();
+const newpass = ref();
+const newpa = ref();
+//修改密码接口
+const passchange = async () => {
+  try {
+    const { data } = await userApi.password({
+      old_password: oldpass.value,
+      password: newpass.value,
+      password_confirmation: newpa.value,
+    });
+    ElMessage.success({
+      message: "修改成功",
+      type: "success",
+    });
+  } catch (error) {}
+};
+
+//账户安全
+//电话号
+const mobile = ref();
+const code = ref();
+const dialog = ref(false);
+//更换手机号
+const change = async () => {
+  try {
+    const { data } = await userApi.phone({
+      mobile: mobile.value,
+      code: code.value,
+    });
+    useUser();
+    dialog.value = false;
+  } catch (error) {}
+};
 
 const enter = () => {
   dialogVisible.value = false;
@@ -197,9 +448,6 @@ const save = async () => {
     dialogVisible.value = false;
   } catch (error) {}
 };
-//账号安全
-const dialog = ref(true);
-
 //防抖
 const handleSwitchSubNav = debounce((type) => {
   if (subNavCurrent.value === type) return;
@@ -209,6 +457,77 @@ const handleSwitchSubNav = debounce((type) => {
       
 <style lang="scss" scoped>
 @import "~/styles/variable.scss";
+//消息推送
+.zhi {
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 500;
+  font-size: 16px;
+  color: #333333;
+  line-height: 22px;
+  text-align: left;
+  font-style: normal;
+  margin-right: 20px;
+}
+
+//邀请与推广
+.activein {
+  width: 76px;
+  height: 34px;
+  background: #00b0b0;
+  border-radius: 4px;
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 500;
+  font-size: 14px;
+  color: #ffffff;
+  line-height: 34px;
+  text-align: center;
+  font-style: normal;
+  cursor: pointer;
+}
+.myin {
+  width: 76px;
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 500;
+  font-size: 14px;
+  color: #555555;
+  line-height: 20px;
+  text-align: center;
+  font-style: normal;
+  cursor: pointer;
+}
+.myfriend {
+  width: 112px;
+  height: 42px;
+  background: #00b0b0;
+  border-radius: 4px;
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  font-size: 16px;
+  color: #ffffff;
+  line-height: 42px;
+  text-align: center;
+  font-style: normal;
+}
+.bei {
+  font-family: SFPro, SFPro;
+  font-weight: 500;
+  font-size: 16px;
+  color: #333333;
+  line-height: 19px;
+  letter-spacing: 1px;
+  text-align: left;
+  font-style: normal;
+}
+.time {
+  font-family: SFPro, SFPro;
+  font-weight: 400;
+  font-size: 16px;
+  color: #555555;
+  line-height: 19px;
+  letter-spacing: 1px;
+  text-align: left;
+  font-style: normal;
+}
 // 账号安全
 .code {
   font-family: PingFangSC, PingFang SC;
@@ -337,7 +656,6 @@ ul {
   padding: 0;
   margin: 0;
 }
-
 .personal {
   // &-container {}
   &-header {

src/views/postDetail.vue

@@ -21,17 +21,28 @@ let postType = ref(); // [articles, news, videos]
 postType.value = Route.name;
 
 //评论
-let comment = ref([])
+let comment = ref([]);
 const __comment__ = async () => {
   try {
     const { data } = await commentApi.list({
       source_type: "article",
       source_id: Route.query.id,
     });
-    comment.value = data
+    comment.value = data;
   } catch (error) {}
 };
 onMounted(__comment__);
+//分享
+const dialogVisible = ref(false);
+var url = window.location.href;
+const shareLink = async () => {
+  try {
+    await navigator.clipboard.writeText(url.value);
+    alert("链接已复制到剪贴板");
+  } catch (err) {
+    alert("复制链接失败");
+  }
+};
 
 //详情
 const details = reactive({
@@ -202,17 +213,17 @@ let author = {
     <div class="post-context" v-html="details.content"></div>
     <div class="post-footer flex-row flex-aic flex-jc-sb">
       <div class="left">
-        <span class="link">
+        <span class="link" style="cursor: pointer">
           <SvgIcon name="like" :size="22" :rgap="2" color="#00b0b0" />
           {{ details.like_count || 0 }}
         </span>
-        <span class="collect">
+        <span class="collect" style="cursor: pointer">
           <SvgIcon name="collect" :size="22" :rgap="2" color="#00b0b0" />
           {{ details.collect_count || 0 }}
         </span>
       </div>
-      <div class="right">
-        <span class="forword">
+      <div class="right" style="cursor: pointer">
+        <span class="forword" @click="dialogVisible = true">
           <SvgIcon name="forward" :size="22" :rgap="2" color="#999999" />
           {{ details.share_count || 0 }}
         </span>
@@ -220,9 +231,48 @@ let author = {
     </div>
     <Comments />
   </div>
+  <el-dialog
+    title="分享"
+    v-model="dialogVisible"
+    width="500px"
+    :before-close="handleClose"
+  >
+    <div style="display: flex">
+      <input
+        disabled
+        v-model="url"
+        style="
+          width: 400px;
+          height: 44px;
+          box-sizing: border-box;
+          background: #f5f5f5;
+          border: 0 solid rgba(0, 0, 0, 0);
+          padding-left: 20px;
+        "
+      />
+      <div class="back" @click="shareLink">
+        <img
+          src="../assets/link.png"
+          style="width: 18px; height: 18px"
+          alt=""
+        />
+      </div>
+    </div>
+  </el-dialog>
 </template>
 
 <style lang="scss" scoped>
+.back {
+  width: 50px;
+  height: 44px;
+  background: #00b0b0;
+  border-radius: 0px 4px 4px 0px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
 .video {
   height: 127px;
   background: #f5f5f5;

src/views/tongzhi/chat.vue

@@ -0,0 +1,228 @@
+
+
+<template>
+  <div class="articles-container">
+    <div style="background: #fff;  width: 1092px; display: flex">
+      <div style="width: 818px">
+        <div
+          style="border-bottom: 1px solid #ebebeb; height: 75px; display: flex"
+        >
+          <div
+            style="
+              width: 818px;
+              padding: 0 24px;
+              box-sizing: border-box;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+            "
+          >
+            <div>
+              <img
+                style="width: 22px; height: 22px"
+                src="../../assets/chat/return.png"
+                alt=""
+              />
+              <span>返回</span>
+            </div>
+            <div>诗意天空JX 与你对话</div>
+            <div>
+              <img
+                style="width: 22px; height: 22px"
+                src="../../assets/chat/report.png"
+                alt=""
+              />
+            </div>
+          </div>
+        </div>
+        <div style="height: 499px; padding: 27px 24px">
+          <div style="text-align: center">47分钟前</div>
+          <div>
+            <div style="display: flex; justify-content: space-between">
+              <div style="display: flex">
+                <img
+                  src="../../assets/logo.png"
+                  style="width: 36px; height: 36px; border-radius: 50%"
+                  alt=""
+                />
+                <div style="margin-left: 14px" class="conten lefta">
+                  周末抽空一起去拍一个VR摄影宣传片吧
+                </div>
+              </div>
+              <div style="display: flex">
+                <div style="margin-right: 14px" class="conten righta">
+                  周末抽空一起去拍一个VR摄影宣传片吧
+                </div>
+                <img
+                  src="../../assets/logo.png"
+                  style="width: 36px; height: 36px; border-radius: 50%"
+                  alt=""
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          style="height: 200px; padding: 24px; border-top: 1px solid #ebebeb;box-sizing: border-box;"
+        >
+          <div style="display: flex">
+            <img src="../../assets/logo.png" style="width: 30px;height: 30px;border-radius: 50%;margin-right: 14px;" alt="" />
+            <el-input v-model="input" style="width: 720px;
+height: 100px;" placeholder="说点什么呢" />
+          </div>
+          <div style="display: flex;justify-content: right">
+            <div class="btn" >回复</div>
+          </div>
+        </div>
+      </div>
+      <div style="border-left: 1px solid #ebebeb; width: 273px">
+        <div
+          style="
+            padding-left: 23px;
+            border-bottom: 1px solid #ebebeb;
+            line-height: 75px;
+          "
+        >
+          私信列表
+        </div>
+        <div class="box">
+          <img
+            style="width: 36px; height: 36px; border-radius: 50%"
+            src="../../assets/logo.png"
+            alt=""
+          />
+          <div style="margin-left: 12px">
+            <div style="display: flex; justify-content: space-between">
+              <div class="namea">诗意天…</div>
+              <div class="timea">09-12 12:17</div>
+            </div>
+            <div style="margin-top: 6px" class="cona">
+              周末抽空一起去拍一个VR摄 影宣传片吧！
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref } from "vue";
+//更改
+let changeval = ref("0");
+const change = (val) => {
+  changeval.value = val;
+};
+</script>
+<style lang="scss" scoped>
+@import "~/styles/variable.scss";
+.namea {
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 500;
+  font-size: 14px;
+  color: #222222;
+  line-height: 20px;
+  text-align: left;
+  font-style: normal;
+}
+.timea {
+  font-family: SFPro, SFPro;
+  font-weight: 400;
+  font-size: 12px;
+  color: #666666;
+  line-height: 14px;
+  text-align: left;
+  font-style: normal;
+}
+.cona {
+  font-family: SFPro, SFPro;
+  font-weight: 400;
+  font-size: 14px;
+  color: #222222;
+  line-height: 16px;
+  text-align: left;
+  font-style: normal;
+}
+.name {
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 500;
+  font-size: 14px;
+  color: #222222;
+  line-height: 20px;
+  text-align: left;
+  font-style: normal;
+}
+.box {
+  height: 115px;
+  border-bottom: 1px solid #ebebeb;
+  padding: 24px;
+  box-sizing: border-box;
+  display: flex;
+}
+.btn {
+  width: 104px;
+  height: 40px;
+  background: #cacaca;
+  border-radius: 4px;
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  font-size: 14px;
+  color: #ffffff;
+  line-height: 40px;
+  text-align: center;
+  font-style: normal;
+  margin-top: 16px;
+}
+.lefta {
+  background: #f5f5f5;
+  border-radius: 4px;
+}
+.righta {
+  background: rgba(0, 176, 176, 0.06);
+  border-radius: 4px;
+}
+.conten {
+  padding: 9px 12px;
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  font-size: 14px;
+  color: #222222;
+  line-height: 20px;
+  text-align: left;
+  font-style: normal;
+}
+
+.som {
+  width: 4px;
+  height: 22px;
+  background: #00b0b0;
+}
+
+.articles-container {
+  display: flex;
+  .left {
+    width: 226px;
+    height: 226px;
+    background: #ffffff;
+    padding: 30px 0;
+    box-sizing: border-box;
+    .tong {
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 500;
+      font-size: 18px;
+      color: #333333;
+      line-height: 25px;
+      text-align: left;
+      font-style: normal;
+      display: flex;
+    }
+  }
+  .right {
+    margin-left: 16px;
+    width: 850px;
+    min-height: 504px;
+    background: #ffffff;
+    padding: 26px 24px;
+    box-sizing: border-box;
+  }
+}
+</style>