Skip to content

B
buildingAgricultureSharing-miniapp
Commit 17766240 authored by 周俊涛（东信）'s avatar 周俊涛（东信）
Browse files
Options

新增用户相册；评论列表页面

parent 7e76ee5b
Hide whitespace changes
Inline Side-by-side
Showing with 593 additions and 9 deletions
src/main.ts
View file @ 17766240
......@@ -2,6 +2,8 @@ import { createSSRApp } from 'vue';
import App from './App.vue';
import store from './store';
import './styles/flex.scss';
export function createApp() {
const app = createSSRApp(App);
app.use(store);
......
src/pages.json
View file @ 17766240
......@@ -39,6 +39,20 @@
"navigationBarTitleText": "详情页"
}
},
{
"path": "pages/commentList/index",
"style": {
"navigationBarTitleText": "评价列表"
}
},
{
"path": "pages/album/index",
"style": {
"navigationBarTitleText": "用户相册",
"navigationBarBackgroundColor": "#ffffff",
"navigationStyle":""
}
},
{
"path": "pages/cart/cart",
"style": {
......
src/pages/album/card.vue 0 → 100644
View file @ 17766240
<template>
<div class="card">
<div class="img-wrap">
<wd-img v-for="v in 3" :key="v" :src="`/src/static/comment/${v}.png`" enable-preview />
</div>
<div class="text">
跟团游行程紧凑有序，充分利用了时间，让游客...跟团游行程紧凑有序，充分利用了时间，让游客...跟团游行程紧凑有序，充分利用了时间，让游客...跟团游行程紧凑有序，充分利用了时间，让游客...跟团游行程紧凑有序，充分利用了时间，让游客...跟团游行程紧凑有序，充分利用了时间，让游客...跟团游行程紧凑有序，充分利用了时间，让游客...跟团游行程紧凑有序，充分利用了时间，让游客...
</div>
<div class="user-info flex-between">
<div class="info flex-align-center">
<img src="/src/static/comment/1.png" alt="" />
<p>不爱吃鱼的不爱吃鱼的不爱吃鱼的不爱吃鱼的不爱吃鱼的</p>
</div>
<div class="like">
<wd-icon name="thumb-up"></wd-icon>
12
</div>
</div>
</div>
</template>
<script setup></script>
<style lang="scss" scoped>
.card {
border-radius: 8px;
padding: 10px;
background-color: #fff;
.img-wrap {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 5px;
.wd-img {
aspect-ratio: 1;
&:first-child {
grid-column: 1/3;
}
}
}
.text {
margin: 10px 0;
font-size: 14px;
font-weight: 500;
line-height: normal;
color: #3d3d3d;
display: -webkit-box; /* 设置为WebKit内核的弹性盒子模型 */
-webkit-box-orient: vertical; /* 垂直排列 */
-webkit-line-clamp: 2; /* 限制显示两行 */
line-clamp: 2;
overflow: hidden; /* 隐藏超出范围的内容 */
text-overflow: ellipsis; /* 使用省略号 */
}
.user-info {
.info {
flex: 1;
img {
width: 24px;
height: 24px;
border-radius: 50%;
}
p {
margin-left: 5px;
margin-right: 10px;
width: 10px;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.like {
font-size: 12px;
color: #767676;
.wd-icon {
font-size: 15px;
}
}
}
}
</style>
src/pages/album/index.vue 0 → 100644
View file @ 17766240
<template>
<div class="album">
<scroll-view class="content" scroll-y>
<div class="filter-box">
<div class="active">全部</div>
<div v-for="(v, i) in filterList" :key="i">{{ v.text }}({{ v.value }})</div>
</div>
<div class="card-wrap">
<card v-for="v in 13" :key="v" />
</div>
</scroll-view>
<div class="back">
<button>返回预订</button>
</div>
</div>
</template>
<script setup>
import card from './card.vue';
const filterList = [
{
text: '家人',
value: 183,
},
{
text: '们',
value: 5,
},
{
text: '谁',
value: 5,
},
{
text: '懂啊',
value: 514,
},
{
text: '其他',
value: 514,
},
{
text: '其他',
value: 514,
},
{
text: '其他',
value: 514,
},
{
text: '其他',
value: 514,
},
{
text: '其他',
value: 514,
},
{
text: '其他',
value: 514,
},
];
</script>
<style lang="scss" scoped>
uni-page-body {
height: 100%;
}
.album {
height: 100%;
display: flex;
flex-direction: column;
background-color: #f3f3f3;
.content {
padding: 10px 5px;
box-sizing: border-box;
flex-grow: 1;
height: 69px;
.filter-box {
display: flex;
background-color: #fff;
padding: 10px;
gap: 10px;
flex-wrap: wrap;
div {
padding: 8px;
color: #3d3d3d;
font-size: 8px;
border-radius: 8px;
background-color: #eeeeee;
}
.active {
color: #fa5151;
background: rgba(250, 81, 81, 0.2);
}
}
.card-wrap {
margin-top: 5px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px;
}
}
}
.back {
background-color: #fff;
padding: 20px 0 34px;
box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.12);
button {
width: 345px;
height: 44px;
border-radius: 34px;
background-color: #fa5151;
font-size: 16px;
font-weight: 500;
color: #ffffff;
}
}
</style>
src/pages/cart/cart.vue
View file @ 17766240
......@@ -143,15 +143,6 @@ const changeCheckedAll = () => {
</script>
<style lang="scss" scoped>
.flex-between {
display: flex;
justify-content: space-between;
align-items: center;
}
.flex-align-center {
display: flex;
align-items: center;
}
uni-page-body {
height: 100%;
}
......
src/pages/commentList/card.vue 0 → 100644
View file @ 17766240
<template>
<div class="card">
<div class="card-top">
<div class="avatar flex-align-center">
<img src="/static/comment/1.png" alt="" />
<div class="name">
<p>不爱吃鱼的小猫咪</p>
<div class="flex-align-center">
<img src="/src/static/comment/emoji.png" alt="" />
5.0分 好评
</div>
</div>
</div>
<div class="info">2024-08-03发表于贵州 ｜ 朋友出游 ｜ 2024-07-22出发</div>
</div>
<div class="card-content">
<div class="text-wrap" :style="showMore ? 'max-height:none;' : ''">
跟团游行程紧凑有序，充分利用了时间，让游客能够在有限的时间内充分游览黄果树的主要景点，如黄果树大瀑布、陡坡塘瀑布、天星桥景区等,不留遗憾。导游专业且热情，对景区有深入的了解，能够生动有趣地讲解景点的历史、文化和特色,同时耐心解答游跟团游行程紧凑有序，充分利用了时间，让游客能够在有限的时间内充分游览黄果树的主要景点，如黄果树大瀑布、陡坡塘瀑布、天星桥景区等,不留遗憾。导游专业且热情，对景区有深入的了解，能够生动有趣地讲解景点的历史、文化和特色,同时耐心解答游跟团游行程紧凑有序，充分利用了时间，让游客能够在有限的时间内充分游览黄果树的主要景点，如黄果树大瀑布、陡坡塘瀑布、天星桥景区等,不留遗憾。导游专业且热情，对景区有深入的了解，能够生动有趣地讲解景点的历史、文化和特色,同时耐心解答游
<div class="more" v-if="!showMore" @click="showMore = true">全文</div>
</div>
<div class="img-wrap">
<wd-img
v-for="v in Math.floor(Math.random() * 6 + 1)"
:key="v"
:src="`/src/static/comment/${v}.png`"
enable-preview
/>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const showMore = ref(false);
</script>
<style lang="scss" scoped>
.card {
background-color: #fff;
border-radius: 16rpx;
padding: 20rpx;
.card-top {
padding-bottom: 20rpx;
border-bottom: 2rpx solid #f3f3f3;
.avatar {
& > img {
width: 72rpx;
height: 72rpx;
border-radius: 50%;
margin-right: 16rpx;
}
.name {
p {
font-size: 28rpx;
color: #3d3d3d;
}
div {
margin-top: 18rpx;
font-size: 16rpx;
background: rgba(253, 223, 109, 0.1686);
line-height: 24rpx;
color: #e1961d;
width: 116rpx;
border-radius: 200rpx;
padding-left: 32rpx;
box-sizing: border-box;
position: relative;
img {
height: 24rpx;
position: absolute;
left: 0;
width: 24rpx;
}
}
}
}
.info {
color: #abaaaa;
font-size: 22rpx;
margin-top: 20rpx;
}
}
.card-content {
.text-wrap {
margin: 12rpx 0 20rpx;
font-size: 28rpx;
line-height: normal;
color: #3d3d3d;
overflow: hidden;
max-height: 150rpx;
position: relative;
.more {
position: absolute;
bottom: 0;
right: 0;
line-height: 1.2em;
background-color: #fff;
color: #0974f5;
}
}
.img-wrap {
display: grid;
gap: 10rpx;
grid-template-columns: repeat(3, 1fr);
.wd-img {
aspect-ratio: 1;
}
}
}
}
</style>
src/pages/commentList/index.vue 0 → 100644
View file @ 17766240
<template>
<div class="comment-list">
<div class="top-bar flex-align-center">
<wd-icon name="thin-arrow-left"></wd-icon>
<wd-search hide-cancel placeholder="点评关键词/特色" placeholder-left />
</div>
<scroll-view class="content" :scroll-y="true">
<div class="filter-box">
<div class="score-sort flex-between">
<div class="score">
<span class="num">6.9</span>
<span class="t1">超棒</span>
<span class="t2">527条</span>
<wd-icon name="check-outline" class="t1"></wd-icon>
</div>
<div class="sort">
<span class="active">推荐排序</span>
｜
<span>重新点评</span>
</div>
</div>
<div class="type flex-between">
<p class="active">全部</p>
<p v-for="(v, i) in commentTypeList" :key="i">{{ v.text }}({{ v.value }})</p>
</div>
<div class="tags" :style="{ 'max-height': showMoreTag ? '600px' : '90rpx' }">
<div class="item" v-for="(v, i) in tagList" :key="i">{{ v.text }}({{ v.value }})</div>
<div class="more" @click="showMoreTag = !showMoreTag">
更多
<wd-icon name="arrow-down" :class="{ rotate: showMoreTag }"></wd-icon>
</div>
</div>
</div>
<div class="card-list">
<card v-for="v in 10" :key="v" />
</div>
</scroll-view>
<div class="back">
<button>返回预订</button>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import card from './card.vue';
const commentTypeList = [
{
text: '图/视频',
value: 183,
},
{
text: '追评',
value: 5,
},
{
text: '中差评',
value: 5,
},
{
text: '好评',
value: 514,
},
];
const tagList = [
{
text: '餐食棒',
value: 44,
},
{
text: '导游负责耐心',
value: 44,
},
{
text: '车辆条件好',
value: 514,
},
{
text: '餐食棒',
value: 44,
},
{
text: '餐食棒',
value: 44,
},
{
text: '导游负责耐心',
value: 44,
},
{
text: '行程安排合理',
value: 5,
},
{
text: '车辆条件好',
value: 514,
},
{
text: '行程安排合理',
value: 5,
},
{
text: '导游负责耐心',
value: 44,
},
{
text: '行程安排合理',
value: 5,
},
{
text: '车辆条件好',
value: 514,
},
];
const showMoreTag = ref(false);
</script>
<style lang="scss" scoped>
uni-page-body {
height: 100%;
}
.comment-list {
height: 100%;
background-color: #f3f3f3;
display: flex;
flex-direction: column;
.top-bar {
padding: 16rpx 40rpx;
font-size: 28rpx;
background: #fff;
.wd-search {
width: 492rpx;
height: 56rpx;
padding: 0;
margin-left: 20rpx;
}
}
.content {
height: 132rpx;
padding: 10rpx 20rpx;
box-sizing: border-box;
flex-grow: 1;
.filter-box {
border-radius: 16rpx;
padding: 20rpx;
background-color: #fff;
.score-sort {
margin-bottom: 20rpx;
.score {
color: #0974f5;
font-weight: bold;
.num {
font-size: 48rpx;
margin-right: 12rpx;
}
.t2 {
font-size: 24rpx;
color: #abaaaa;
}
.wd-icon {
margin-left: 12rpx;
}
}
.sort {
font-size: 24rpx;
color: #abaaaa;
&.active {
color: #0974f5;
}
}
}
.type {
font-size: 22rpx;
color: #767676;
.active {
color: #3d3d3d;
font-size: 24rpx;
font-weight: bold;
position: relative;
&::after {
content: '';
display: block;
position: absolute;
width: calc(80%);
height: 4rpx;
bottom: -12rpx;
left: 50%;
background-color: #fa5151;
transform: translateX(-50%);
}
}
}
.tags {
margin-top: 32rpx;
display: flex;
flex-wrap: wrap;
gap: 10rpx;
position: relative;
max-height: 80rpx;
overflow: hidden;
transition: all 0.3s;
.item {
padding: 10rpx 16rpx;
color: #3d3d3d;
font-size: 16rpx;
background-color: #eeeeee;
border-radius: 300rpx;
}
.more {
padding: 10rpx 0;
padding-left: 40rpx;
font-size: 24rpx;
font-weight: 500;
line-height: 28rpx;
color: #0974f5;
background-color: #fff;
position: absolute;
background: linear-gradient(90deg, #ffffff22 0%, #fff 20%);
bottom: 0;
right: 0;
.rotate {
transition: all 0.3s;
transform: rotateZ(180deg);
}
}
}
}
.card-list {
margin-top: 10rpx;
.card {
margin-bottom: 10rpx;
}
}
}
.back {
background-color: #fff;
padding: 40rpx 0 68rpx;
box-shadow: 0rpx -8rpx 16rpx 0rpx rgba(0, 0, 0, 0.12);
button {
width: 690rpx;
height: 88rpx;
border-radius: 68rpx;
background-color: #fa5151;
font-size: 32rpx;
font-weight: 500;
color: #ffffff;
}
}
}
</style>
src/styles/flex.scss 0 → 100644
View file @ 17766240
.flex-between {
display: flex;
justify-content: space-between;
align-items: center;
}
.flex-align-center {
display: flex;
align-items: center;
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment