refactor(components): 重构多个组件并优化公共样式
重构了item-head、item-bottom、item-offer、item-summary和item-tenement组件，优化了props传递和数据处理逻辑 将公共头部和导航样式提取到public.css中，避免重复代码 修复了item-tenement组件中图片显示和数据处理的问题 更新了item-bottom组件的点赞和收藏逻辑，增加错误提示 优化了item-head组件的用户信息显示逻辑 调整了多个组件的样式细节，包括间距、图标大小等
This commit is contained in:
DESKTOP-RQ919RC\Pc
23
component/head-top/head-top.js
Normal file
23
component/head-top/head-top.js
Normal file
@@ -0,0 +1,23 @@
|
||||
// my-component.js
|
||||
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
|
||||
const { defineComponent, ref, onMounted, nextTick } = Vue;
|
||||
|
||||
// 定义组件（直接使用模板）
|
||||
export const headTop = defineComponent({
|
||||
name: "headTop",
|
||||
props: {
|
||||
itemdata: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
onMounted(() => {});
|
||||
|
||||
let signInAlreadyState = ref(false);
|
||||
return { signInAlreadyState };
|
||||
},
|
||||
|
||||
template: `<div class="head-top flexacenter"> <img class="logo" src="https://oss.gter.net/logo" alt="" /> <div class="flex1"></div> <div class="input-box flexacenter"> <input class="input flex1" type="text" placeholder="大家都在搜：屯特" /> <img class="icon" /> </div> <div class="sign-in sign-in-already flexcenter" v-if="signInAlreadyState" v-cloak onclick="showWindow('dsu_paulsign', 'https://bbs.gter.net/plugin.php?id=dsu_paulsign:sign&show=sign')"> <img class="sign-icon" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/sign-icon.png" /> <span>已签到，明天再来</span> </div> <div class="sign-in sign-in-no flexacenter" v-else onclick="showWindow('dsu_paulsign', 'https://bbs.gter.net/plugin.php?id=dsu_paulsign:sign&show=sign')" v-cloak> <img class="sign-in-bj" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/sign-in-bj.svg" /> <img class="coin-bj" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/coin-bj.svg" /> <img class="coin-icon" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/coin-icon.png" /> <span class="text flex1">签到领寄托币</span> <div class="sign-go flexcenter"> <img class="sign-go-bj" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/sign-go.svg" /> GO </div> <img class="petal1" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal1.png" /> <img class="petal2" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal2.png" /> <img class="petal3" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal3.png" /> </div></div>`,
|
||||
});
|
||||
26
component/head-top/head-top.txt
Normal file
26
component/head-top/head-top.txt
Normal file
@@ -0,0 +1,26 @@
|
||||
<div class="head-top flexacenter">
|
||||
<img class="logo" src="https://oss.gter.net/logo" alt="" />
|
||||
<div class="flex1"></div>
|
||||
<div class="input-box flexacenter">
|
||||
<input class="input flex1" type="text" placeholder="大家都在搜：屯特" />
|
||||
<img class="icon" />
|
||||
</div>
|
||||
|
||||
<div class="sign-in sign-in-already flexcenter" v-if="signInAlreadyState" v-cloak onclick="showWindow('dsu_paulsign', 'https://bbs.gter.net/plugin.php?id=dsu_paulsign:sign&show=sign')">
|
||||
<img class="sign-icon" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/sign-icon.png" />
|
||||
<span>已签到，明天再来</span>
|
||||
</div>
|
||||
<div class="sign-in sign-in-no flexacenter" v-else onclick="showWindow('dsu_paulsign', 'https://bbs.gter.net/plugin.php?id=dsu_paulsign:sign&show=sign')" v-cloak>
|
||||
<img class="sign-in-bj" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/sign-in-bj.svg" />
|
||||
<img class="coin-bj" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/coin-bj.svg" />
|
||||
<img class="coin-icon" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/coin-icon.png" />
|
||||
<span class="text flex1">签到领寄托币</span>
|
||||
<div class="sign-go flexcenter">
|
||||
<img class="sign-go-bj" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/sign-go.svg" />
|
||||
GO
|
||||
</div>
|
||||
<img class="petal1" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal1.png" />
|
||||
<img class="petal2" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal2.png" />
|
||||
<img class="petal3" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal3.png" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -23,6 +23,8 @@ export const itemBottom = defineComponent({
|
||||
|
||||
let isLikeGif = ref(false);
|
||||
|
||||
let cancelOperate = inject("cancelOperate");
|
||||
|
||||
const likeClick = () => {
|
||||
if (realname.value == 0 && userInfoWin.value?.uin > 0) {
|
||||
openAttest();
|
||||
@@ -36,11 +38,19 @@ export const itemBottom = defineComponent({
|
||||
|
||||
const token = item.value.token || "";
|
||||
|
||||
if (["offer", "offer_summary", "interviewexperience"].includes(item.value["type"]) && item.value["is_like"]) {
|
||||
creationAlertBox("error", "不可取消点赞");
|
||||
return;
|
||||
}
|
||||
|
||||
ajax(`/v2/api/forum/postTopicLike`, {
|
||||
token,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code != 200) return;
|
||||
if (res.code != 200) {
|
||||
creationAlertBox("error", res.message);
|
||||
return;
|
||||
}
|
||||
let data = res.data;
|
||||
|
||||
item.value["is_like"] = data.status;
|
||||
@@ -71,12 +81,17 @@ export const itemBottom = defineComponent({
|
||||
token,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code != 200) return;
|
||||
if (res.code != 200) {
|
||||
creationAlertBox("error", res.message);
|
||||
return;
|
||||
}
|
||||
const data = res.data || {};
|
||||
|
||||
item.value["is_collect"] = data.status;
|
||||
item.value["collections"] = data.collections;
|
||||
creationAlertBox("success", res.message);
|
||||
// 调用父组件的方法
|
||||
cancelOperate(token);
|
||||
// this.triggerEvent("uncollect", item.token);
|
||||
})
|
||||
.catch((err) => {
|
||||
@@ -91,5 +106,5 @@ export const itemBottom = defineComponent({
|
||||
like,
|
||||
},
|
||||
|
||||
template: `<div class="comment flexacenter" v-if="!Array.isArray(item?.commentreviews)"> <img class="icon" :src="item?.commentreviews?.avatar" /> <div class="text one-line-display">{{ item?.commentreviews?.content }}</div></div><div class="bottom flexacenter"> <div class="bottom-item like flexacenter" @click="likeClick()"> <img v-if="item.is_like" class="icon" src="./img/like-red-icon.png" /> <img v-else class="icon" src="./img/like-icon.png" /> <div class="text">{{ item.likes || "赞" }}</div> </div> <div class="bottom-item flexacenter" @click="collectClick()"> <img v-if="item.is_collect" class="icon" src="./img/collect-golden.svg" /> <img v-else class="icon" src="./img/collect-gray.png" /> <div class="text">{{ item.collections || "收藏" }}</div> </div> <div class="bottom-item flexacenter"> <img class="icon" src="./img/discuss-icon.png" /> <div class="text">{{ item.comments || "讨论" }}</div> </div> <div class="bottom-item flexacenter"> <img class="icon" src="./img/bi-copper-icon.png" /> <div class="text">{{ item.coins || "投币" }}</div> </div> <div class="bottom-item flexacenter"> <img class="icon" src="./img/share-gray.png" /> <div class="text">转发</div> </div></div><like v-if="isLikeGif"></like>`,
|
||||
template: `<div class="comment flexacenter" v-if="item?.commentreviews && !Array.isArray(item?.commentreviews)"> <img class="icon" :src="item?.commentreviews?.avatar" /> <div class="text one-line-display">{{ item?.commentreviews?.content }}</div></div><div class="bottom flexacenter"> <div class="bottom-item like flexacenter" @click="likeClick()" v-if="item?.type != 'tenement'"> <img v-if="item.is_like" class="icon" src="./img/like-red-icon.png" /> <img v-else class="icon" src="./img/like-icon.png" /> <div class="text">{{ item.likes || "赞" }}</div> </div> <div class="bottom-item flexacenter" @click="collectClick()"> <img v-if="item.is_collect" class="icon" src="./img/collect-golden.svg" /> <img v-else class="icon" src="./img/collect-gray.png" /> <div class="text">{{ item.collections || "收藏" }}</div> </div> <div class="bottom-item flexacenter" v-if="item?.type != 'tenement'"> <img class="icon" src="./img/discuss-icon.png" /> <div class="text">{{ item.comments || "讨论" }}</div> </div> <div class="bottom-item flexacenter" v-if="item?.type != 'tenement'"> <img class="icon" src="./img/bi-copper-icon.png" /> <div class="text">{{ item.coins || "投币" }}</div> </div> <div class="bottom-item flexacenter"> <img class="icon" src="./img/share-gray.png" /> <div class="text">转发</div> </div></div><like v-if="isLikeGif"></like>`,
|
||||
});
|
||||
|
||||
@@ -1,24 +1,26 @@
|
||||
<div class="comment flexacenter" v-if="!Array.isArray(item?.commentreviews)">
|
||||
<div class="comment flexacenter" v-if="item?.commentreviews && !Array.isArray(item?.commentreviews)">
|
||||
<img class="icon" :src="item?.commentreviews?.avatar" />
|
||||
<div class="text one-line-display">{{ item?.commentreviews?.content }}</div>
|
||||
</div>
|
||||
<div class="bottom flexacenter">
|
||||
<div class="bottom-item like flexacenter" @click="likeClick()">
|
||||
<div class="bottom-item like flexacenter" @click="likeClick()" v-if="item?.type != 'tenement'">
|
||||
<img v-if="item.is_like" class="icon" src="./img/like-red-icon.png" />
|
||||
<img v-else class="icon" src="./img/like-icon.png" />
|
||||
<div class="text">{{ item.likes || "赞" }}</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-item flexacenter" @click="collectClick()">
|
||||
<img v-if="item.is_collect" class="icon" src="./img/collect-golden.svg" />
|
||||
<img v-else class="icon" src="./img/collect-gray.png" />
|
||||
<div class="text">{{ item.collections || "收藏" }}</div>
|
||||
</div>
|
||||
<div class="bottom-item flexacenter">
|
||||
|
||||
<div class="bottom-item flexacenter" v-if="item?.type != 'tenement'">
|
||||
<img class="icon" src="./img/discuss-icon.png" />
|
||||
<div class="text">{{ item.comments || "讨论" }}</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-item flexacenter">
|
||||
<div class="bottom-item flexacenter" v-if="item?.type != 'tenement'">
|
||||
<img class="icon" src="./img/bi-copper-icon.png" />
|
||||
<div class="text">{{ item.coins || "投币" }}</div>
|
||||
</div>
|
||||
|
||||
@@ -15,7 +15,8 @@ export const itemForum = defineComponent({
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
let res = props.itemdata;
|
||||
let res = props.itemdata || {};
|
||||
console.log("res", res);
|
||||
res.content = res?.content?.replace(/\[.*?\]/g, "");
|
||||
res.content = res?.content?.replace(/\<.*?\>/g, "");
|
||||
res.content = res?.content?.replace(/\[.*?\../g, "");
|
||||
|
||||
@@ -28,7 +28,7 @@ export const itemHead = defineComponent({
|
||||
sectionn.value = item.value.sectionn || [];
|
||||
|
||||
const sectionSet = new Set(sectionn.value);
|
||||
tags.value = item.value.tags.filter((tag) => !sectionSet.has(tag));
|
||||
tags.value = item.value.tags?.filter((tag) => !sectionSet.has(tag));
|
||||
|
||||
let show = ref(false);
|
||||
|
||||
@@ -96,5 +96,5 @@ export const itemHead = defineComponent({
|
||||
report,
|
||||
},
|
||||
|
||||
template: `<div class="item-head flexacenter"> <img class="avatar" :src="item.user.avatar || item.avatar" /> <div class="name">{{ item.user.nickname || item.nickname || "匿名用户" }}</div> <!-- <img class="group" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c_ZMtdXfqqsgFptxhcq_cQnrlcPJ0DVESBq_D-81qNDQyOQ~~" /> --> <div class="time">{{ timestamp }}</div> <div class="flex1"></div> <div class="view flexacenter"> <img class="icon" src="https://app.gter.net/image/miniApp/offer/eye-icon.svg" /> <div class="text">{{ item.views }}</div> </div> <div class="btn flexcenter" @click.stop="cutShow"> <img class="icon" src="https://app.gter.net/image/miniApp/offer/dot-dot-dot-gray.png" /> </div> <div v-if="show"> <div class="mask" @click.stop="cutShow"></div> <div class="operate"> <div class="item" @click.stop="report">举报</div> <template v-if="ismanager"> <div class="item" @click.stop="hide">{{ item.hidden == 0 ? "隐藏" : "显示" }}</div> <div class="item" @click.stop="recommend">{{ item.recommend == 1 ? "取消" : "" }}推荐</div> <div class="item" @click.stop="essence">{{ item.best == 1 ? "取消" : "" }}精华</div> </template> </div> </div></div><div class="label flexflex" v-if="sectionn.length || tags.length || item.recommend == 1 || item.best == 1"> <img class="item icon" v-if="item.recommend == 1 && item.best != 1" src="./img/recommend-icon.png" /> <img class="item icon" v-if="item.best == 1" src="./img/essence-icon.png" /> <div class="item blue" v-for="(item, index) in sectionn" :key="item">{{ item }}</div> <div class="item" v-for="(item, index) in tags" :key="item">{{ item }}</div></div><report v-if="reportState" :itemdata="item"></report>`,
|
||||
template: `<div class="item-head flexacenter"> <img class="avatar" :src="item?.user?.avatar || item.avatar" /> <div class="name">{{ item?.user?.nickname || item.nickname || "匿名用户" }}</div> <!-- <img class="group" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c_ZMtdXfqqsgFptxhcq_cQnrlcPJ0DVESBq_D-81qNDQyOQ~~" /> --> <div class="time">{{ timestamp }}</div> <div class="flex1"></div> <div class="view flexacenter"> <img class="icon" src="https://app.gter.net/image/miniApp/offer/eye-icon.svg" /> <div class="text">{{ item.views }}</div> </div> <div class="btn flexcenter" @click.stop="cutShow"> <img class="icon" src="https://app.gter.net/image/miniApp/offer/dot-dot-dot-gray.png" /> </div> <div v-if="show"> <div class="mask" @click.stop="cutShow"></div> <div class="operate"> <div class="item" @click.stop="report">举报</div> <template v-if="ismanager"> <div class="item" @click.stop="hide">{{ item.hidden == 0 ? "隐藏" : "显示" }}</div> <div class="item" @click.stop="recommend">{{ item.recommend == 1 ? "取消" : "" }}推荐</div> <div class="item" @click.stop="essence">{{ item.best == 1 ? "取消" : "" }}精华</div> </template> </div> </div></div><div class="label flexflex" v-if="sectionn?.length || tags?.length || item.recommend == 1 || item.best == 1"> <img class="item icon" v-if="item.recommend == 1 && item.best != 1" src="./img/recommend-icon.png" /> <img class="item icon" v-if="item.best == 1" src="./img/essence-icon.png" /> <div class="item blue" v-for="(item, index) in sectionn" :key="item">{{ item }}</div> <div class="item" v-for="(item, index) in tags" :key="item">{{ item }}</div></div><report v-if="reportState" :itemdata="item"></report>`,
|
||||
});
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<div class="item-head flexacenter">
|
||||
<img class="avatar" :src="item.user.avatar || item.avatar" />
|
||||
<div class="name">{{ item.user.nickname || item.nickname || "匿名用户" }}</div>
|
||||
<img class="avatar" :src="item?.user?.avatar || item.avatar" />
|
||||
<div class="name">{{ item?.user?.nickname || item.nickname || "匿名用户" }}</div>
|
||||
<!-- <img class="group" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c_ZMtdXfqqsgFptxhcq_cQnrlcPJ0DVESBq_D-81qNDQyOQ~~" /> -->
|
||||
<div class="time">{{ timestamp }}</div>
|
||||
<div class="flex1"></div>
|
||||
@@ -27,7 +27,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="label flexflex" v-if="sectionn.length || tags.length || item.recommend == 1 || item.best == 1">
|
||||
<div class="label flexflex" v-if="sectionn?.length || tags?.length || item.recommend == 1 || item.best == 1">
|
||||
<img class="item icon" v-if="item.recommend == 1 && item.best != 1" src="./img/recommend-icon.png" />
|
||||
<img class="item icon" v-if="item.best == 1" src="./img/essence-icon.png" />
|
||||
<div class="item blue" v-for="(item, index) in sectionn" :key="item">{{ item }}</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
// my-component.js
|
||||
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
|
||||
const { defineComponent } = Vue;
|
||||
const { defineComponent, ref, provide } = Vue;
|
||||
import { itemBottom } from "../item-bottom/item-bottom.js";
|
||||
import { itemHead } from "../item-head/item-head.js";
|
||||
|
||||
@@ -8,16 +8,74 @@ import { itemHead } from "../item-head/item-head.js";
|
||||
export const itemOffer = defineComponent({
|
||||
name: "item-offer",
|
||||
props: {
|
||||
item: {
|
||||
itemdata: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
let item = ref({ ...props.itemdata });
|
||||
|
||||
let isLogin = ref(true);
|
||||
let realname = ref(1); // 是否已经实名
|
||||
let userInfoWin = ref({
|
||||
authority: ["comment.edit", "comment.delete", "offercollege.hide", "offersummary.hide", "mj.hide", "topic:manager", "topic:hide"],
|
||||
avatar: "https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC2WFVSEKWOikN42jDKLNjtax7HL4xtfMOJSdU9oWFhY2E~/middle?random=1761733169",
|
||||
groupid: 3,
|
||||
nickname: "肖荣豪",
|
||||
realname: 1,
|
||||
token: "01346a38444d71aaadb3adad52b52c39",
|
||||
uid: 500144,
|
||||
uin: 4238049,
|
||||
});
|
||||
|
||||
let permissions = ref([]);
|
||||
|
||||
const getUserInfoWin = () => {
|
||||
const checkUser = () => {
|
||||
const user = window.userInfoWin;
|
||||
if (!user) return;
|
||||
document.removeEventListener("getUser", checkUser);
|
||||
realname.value = user.realname;
|
||||
userInfoWin.value = user;
|
||||
if (user?.uin > 0 || user?.uid > 0) isLogin.value = true;
|
||||
};
|
||||
document.addEventListener("getUser", checkUser);
|
||||
};
|
||||
|
||||
const openAttest = () => {
|
||||
const handleAttestClose = () => {
|
||||
document.removeEventListener("closeAttest", handleAttestClose);
|
||||
realname.value = window.userInfoWin?.realname || 0;
|
||||
};
|
||||
// 启动认证流程时添加监听
|
||||
document.addEventListener("closeAttest", handleAttestClose);
|
||||
loadAttest(2);
|
||||
};
|
||||
|
||||
// 跳转登录
|
||||
const goLogin = () => {
|
||||
if (typeof window === "undefined") return;
|
||||
if (window["userInfoWin"] && Object.keys(window["userInfoWin"]).length !== 0) {
|
||||
if (window["userInfoWin"]["uid"]) isNeedLogin.value = false;
|
||||
else ajax_login();
|
||||
} else ajax_login();
|
||||
};
|
||||
|
||||
provide("isLogin", isLogin);
|
||||
provide("userInfoWin", userInfoWin);
|
||||
provide("realname", realname);
|
||||
provide("openAttest", openAttest);
|
||||
provide("goLogin", goLogin);
|
||||
|
||||
return { item };
|
||||
},
|
||||
|
||||
components: {
|
||||
itemBottom,
|
||||
itemHead,
|
||||
},
|
||||
|
||||
template: `<div class="item-box item-offer"> <item-head></item-head> <div class="school flexacenter"> <img class="icon" :src="item.data.schoollogo" mode="heightFix"></image> <div class="text flex1 one-line-display">{{ item.data.schoolname }}</div> </div> <div class="major flexacenter" v-if="item.data.professional"> <div class="key">{{ item.data.project ? '专业' : '项目/专业' }}</div> <div class="value flex1 one-line-display">{{ item.data.professional }}</div> </div> <div class="major flexacenter" v-if="item.data.project"> <div class="key">项目</div> <div class="value flex1 one-line-display">{{ item.data.project }}</div> </div> <div class="info flexacenter"> {{ item.data.semester }} <div class="line"></div> {{ item.data.degree }} <div class="line"></div> <div class="results" :class="['r' + item.data.apply_results]">{{ item.data.apply_results_text }}</div> </div> <div class="message" v-if="item.content">{{ item.content }}</div> <item-bottom></item-bottom></div>`,
|
||||
template: `<div class="item-box item-offer"> <item-head :itemdata="item"></item-head> <div class="school flexacenter"> <img class="icon" :src="item.data.schoollogo" mode="heightFix"></image> <div class="text flex1 one-line-display">{{ item.data.schoolname }}</div> </div> <div class="major flexacenter" v-if="item.data.professional"> <div class="key">{{ item.data.project ? '专业' : '项目/专业' }}</div> <div class="value flex1 one-line-display">{{ item.data.professional }}</div> </div> <div class="major flexacenter" v-if="item.data.project"> <div class="key">项目</div> <div class="value flex1 one-line-display">{{ item.data.project }}</div> </div> <div class="info flexacenter"> {{ item.data.semester }} <div class="line"></div> {{ item.data.degree }} <div class="line"></div> <div class="results" :class="['r' + item.data.apply_results]">{{ item.data.apply_results_text }}</div> </div> <div class="message" v-if="item.content">{{ item.content }}</div> <item-bottom :itemdata="item"></item-bottom></div>`,
|
||||
});
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<div class="item-box item-offer">
|
||||
<item-head></item-head>
|
||||
<item-head :itemdata="item"></item-head>
|
||||
<div class="school flexacenter">
|
||||
<img class="icon" :src="item.data.schoollogo" mode="heightFix"></image>
|
||||
<div class="text flex1 one-line-display">{{ item.data.schoolname }}</div>
|
||||
@@ -24,5 +24,5 @@
|
||||
</div>
|
||||
|
||||
<div class="message" v-if="item.content">{{ item.content }}</div>
|
||||
<item-bottom></item-bottom>
|
||||
<item-bottom :itemdata="item"></item-bottom>
|
||||
</div>
|
||||
@@ -1,6 +1,6 @@
|
||||
// my-component.js
|
||||
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
|
||||
const { defineComponent } = Vue;
|
||||
const { defineComponent, ref } = Vue;
|
||||
import { itemBottom } from "../item-bottom/item-bottom.js";
|
||||
import { itemHead } from "../item-head/item-head.js";
|
||||
|
||||
@@ -8,16 +8,22 @@ import { itemHead } from "../item-head/item-head.js";
|
||||
export const itemSummary = defineComponent({
|
||||
name: "item-summary",
|
||||
props: {
|
||||
item: {
|
||||
itemdata: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
let item = ref({ ...props.itemdata });
|
||||
|
||||
return { item };
|
||||
},
|
||||
|
||||
components: {
|
||||
itemBottom,
|
||||
itemHead,
|
||||
},
|
||||
|
||||
template: `<div class="item-box item-summary"> <item-head></item-head> <div class="title" v-if="item.title">{{ item.title }}</div> <div class="message one-line-display" v-if="item.content">{{ item.content }}</div> <div class="total flexacenter"> <div>共</div> <div class="num">{{ item.data.offercount }}</div> <div>个Offer</div> </div> <div class="list flexacenter" scroll-x> <div class="item flexflex" v-for="(it,i) in item.data.offerlist" :key="i"> <div class="item-content flexflex"> <div class="school flexacenter"> <img class="icon" :src="it.schoollogo" mode="heightFix"></image> <div class="name one-line-display flex1">{{ it.schoolname }}</div> </div> <div class="major one-line-display" v-if="it.professional">{{ it.professional }}</div> <div class="info flexacenter"> {{ it.semester || '25Fall' }} <div class="line"></div> {{ it.degree || 'MSc' }} <div class="line"></div> <div class="results" :class="['r' + it.apply_results]">{{ it.apply_results_text || 'Offer' }}</div> </div> </div> </div> <div v-if="item.data.offercount > 3" class="item more flexcenter"> <div class="item-content flexcenter"> <div class="">查看更多</div> <img class="icon" src="/img/arrows-circle-dark-blue.svg" mode="heightFix"></image> </div> </div> </div> <item-bottom></item-bottom></div>`,
|
||||
template: `<div class="item-box item-summary"> <item-head :itemdata="item"></item-head> <div class="title" v-if="item.title">{{ item.title }}</div> <div class="message one-line-display" v-if="item.content">{{ item.content }}</div> <div class="total flexacenter"> <div>共</div> <div class="num">{{ item.data.offercount }}</div> <div>个Offer</div> </div> <div class="list flexacenter" scroll-x> <div class="item flexflex" v-for="(it,i) in item.data.offerlist" :key="i"> <div class="item-content flexflex"> <div class="school flexacenter"> <img class="icon" :src="it.schoollogo" mode="heightFix"></image> <div class="name one-line-display flex1">{{ it.schoolname }}</div> </div> <div class="major one-line-display" v-if="it.professional">{{ it.professional }}</div> <div class="info flexacenter"> {{ it.semester || '25Fall' }} <div class="line"></div> {{ it.degree || 'MSc' }} <div class="line"></div> <div class="results" :class="['r' + it.apply_results]">{{ it.apply_results_text || 'Offer' }}</div> </div> </div> </div> <div v-if="item.data.offercount > 3" class="item more flexcenter"> <div class="item-content flexcenter"> <div class="">查看更多</div> <img class="icon" src="/img/arrows-circle-dark-blue.svg" mode="heightFix"></image> </div> </div> </div> <item-bottom :itemdata="item"></item-bottom></div>`,
|
||||
});
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<div class="item-box item-summary">
|
||||
<item-head></item-head>
|
||||
<item-head :itemdata="item"></item-head>
|
||||
<div class="title" v-if="item.title">{{ item.title }}</div>
|
||||
<div class="message one-line-display" v-if="item.content">{{ item.content }}</div>
|
||||
<div class="total flexacenter">
|
||||
@@ -32,5 +32,5 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<item-bottom></item-bottom>
|
||||
<item-bottom :itemdata="item"></item-bottom>
|
||||
</div>
|
||||
@@ -6,7 +6,7 @@ import { itemHead } from "../item-head/item-head.js";
|
||||
|
||||
// 定义组件（直接使用模板）
|
||||
export const itemTenement = defineComponent({
|
||||
name: "item-tenement",
|
||||
name: "item-tenement",
|
||||
props: {
|
||||
itemdata: {
|
||||
type: Object,
|
||||
@@ -15,17 +15,55 @@ export const itemTenement = defineComponent({
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const handleHousing = (ele) => {
|
||||
const langs = lang;
|
||||
console.log("langs", langs);
|
||||
|
||||
if (ele["distance"]) ele["distance"] = Math.round(ele["distance"] * 10) / 10;
|
||||
// 这个是将 详情键 替换语言包里的值
|
||||
let list = ["tenementtype", "rentalduration", "intermediary", "property", "elevator", "sunshinearea", "gender"];
|
||||
// let list = ["rentalduration", "intermediary", "property", "elevator", "sunshinearea", "gender"];
|
||||
if (Array.isArray(ele["floor"])) list.push("floor"); // 判断 楼层是否需要 替换值, 因为在求房源里是多个值
|
||||
let differentNames = {
|
||||
// 需要替换的 键名
|
||||
intermediary: "intermediary_text",
|
||||
};
|
||||
|
||||
list.forEach((element) => {
|
||||
if (ele[element] == -1) {
|
||||
} else if (ele[element] == 0) ele[differentNames[element] ? differentNames[element] : element] = "不限";
|
||||
// 当 值为 [0] 时为不限
|
||||
else ele[differentNames[element] ? differentNames[element] : element] = langs[element][ele[element]];
|
||||
});
|
||||
|
||||
let tabArr = ["gptype", "tenementtype", "elevator", "sunshinearea", "gender"];
|
||||
let tabList = [];
|
||||
tabArr.forEach((el) => {
|
||||
if (ele[el] && ele[el] != -1) tabList.push(ele[el]);
|
||||
});
|
||||
ele["tabList"] = tabList;
|
||||
let location = langs.location; // 遍历替换区域的值 所有房源
|
||||
if (ele.intermediary == 6) {
|
||||
if (Array.isArray(ele.rent)) ele.rent = `${ele.rent[0]} ~ ${ele.rent[1]}`;
|
||||
if (Array.isArray(ele["location"])) {
|
||||
let arr = [];
|
||||
ele["location"].forEach((element) => {
|
||||
arr.push(`${location[Math.trunc(element)]} > ${location[element]}`);
|
||||
});
|
||||
ele["location"] = arr;
|
||||
}
|
||||
} else {
|
||||
let pendingData = ele["location"];
|
||||
ele["location"] = `${location[Math.trunc(pendingData)]} > ${location[pendingData]}`;
|
||||
}
|
||||
return ele;
|
||||
};
|
||||
let item = ref({ ...props.itemdata });
|
||||
// item.value.title = "【投41票】" + item.value.title;
|
||||
// res["timestamp"] = util.strtimeago(res.release_at, 4);
|
||||
// const data = res.data;
|
||||
// const option = data.option || [];
|
||||
// res["isvote"] = option.some((item) => item.selected == 1);
|
||||
// const time = util.handleDeadline(data.deadline);
|
||||
// res["time"] = time;
|
||||
// this.setData({
|
||||
// item: res,
|
||||
// });
|
||||
// console.log("item", item.value);
|
||||
item.value = handleHousing(item.value);
|
||||
|
||||
console.log("item.value", item.value);
|
||||
|
||||
return { item };
|
||||
},
|
||||
|
||||
@@ -34,5 +72,5 @@ export const itemTenement = defineComponent({
|
||||
itemHead,
|
||||
},
|
||||
|
||||
template: `<div class="item-box item-tenement"> <item-head :itemdata="item"></item-head> <div class="title">三房找一位室友合租，家具设备齐全</div> <div class="site-box flexacenter"> <template v-if="item.intermediary == 6"> <div class="site-item flexacenter" v-for="(item, index) in item.location" :key="index"> <img class="site-icon" src="https://app.gter.net/image/miniApp/offer/room.png"> {{ item }} </div> </template> <div v-else class="site-item flexacenter"> <img class="site-icon" src="https://app.gter.net/image/miniApp/offer/orientation.png"> {{ item.location || '九龙 > 尖沙咀/佐敦' }} </div> </div> <div class="price-section flexacenter"> <div class="unit">HK$</div> <div class="price">{{ item.rent }}</div> <span class="text">/月</span> <div class="rentalduration">[ 租期{{ item.rentalduration }} ]</div> </div> <div class="picture flexacenter"> <img class="picture-item" v-for="(item, index) in 15" :key="index" src="https://axure-file.lanhuapp.com/md5__34fc6e5f5fef1d31bbd4604d33be77cc.svg" alt=""> </div> <item-bottom :itemdata="item"></item-bottom></div>`,
|
||||
template: `<div class="item-box item-tenement"> <item-head :itemdata="item"></item-head> <div class="title">三房找一位室友合租，家具设备齐全</div> <div class="site-box flexacenter"> <template v-if="item.intermediary == 6"> <div class="site-item flexacenter" v-for="(item, index) in item.location" :key="index"> <img class="site-icon" src="https://app.gter.net/image/miniApp/offer/room.png"> {{ item }} </div> </template> <div v-else class="site-item flexacenter"> <img class="site-icon" src="https://app.gter.net/image/miniApp/offer/orientation.png"> {{ item.location || '九龙 > 尖沙咀/佐敦' }} </div> </div> <div class="price-section flexacenter"> <div class="unit">HK$</div> <div class="price">{{ item.rent }}</div> <span class="text">/月</span> <div class="rentalduration">[ 租期{{ item.rentalduration }} ]</div> </div> <div class="picture flexacenter" v-if="item.images?.length != 0"> <img class="picture-item" v-for="(item, index) in item.images" :key="index" :src="item" alt=""> </div> <item-bottom :itemdata="item"></item-bottom></div>`,
|
||||
});
|
||||
|
||||
@@ -22,8 +22,8 @@
|
||||
<div class="rentalduration">[ 租期{{ item.rentalduration }} ]</div>
|
||||
</div>
|
||||
|
||||
<div class="picture flexacenter">
|
||||
<img class="picture-item" v-for="(item, index) in 15" :key="index" src="https://axure-file.lanhuapp.com/md5__34fc6e5f5fef1d31bbd4604d33be77cc.svg" alt="">
|
||||
<div class="picture flexacenter" v-if="item.images?.length != 0">
|
||||
<img class="picture-item" v-for="(item, index) in item.images" :key="index" :src="item" alt="">
|
||||
</div>
|
||||
|
||||
<item-bottom :itemdata="item"></item-bottom>
|
||||
|
||||
Reference in New Issue
Block a user