Skip to content

C
csssp-xcx-h5
提交 cd9697e9 authored 作者: 劳广强's avatar 劳广强
浏览文件
操作

feat: 完成 我的随手拍列表 页面

上级 d9a9ddcb
隐藏空白字符变更
内嵌 并排
正在显示 包含 437 行增加 和 0 行删除
pages/mine-picture/index.scss 0 → 100644
浏览文件 @ cd9697e9
page {
background: #f6f6f6;
}
.examine_boxs {
padding: 0 30rpx;
}
.examine_list {
/* margin-bottom: 20rpx; */
width: 100%;
/* padding: 40rpx 0 0 14rpx; */
background: #fff;
display: flex;
justify-content: space-between;
align-items: center;
overflow-x: scroll;
}
/* 隐藏滚动条 */
.examine_list::-webkit-scrollbar {
display: none;
}
.examine_item {
margin-right: 0;
/* padding: 0 48rpx; */
text-align: center;
display: flex;
padding-top: 34rpx;
justify-content: center;
align-items: center;
flex-direction: column;
}
.examine_item_name {
width: 128rpx;
font-size: 28rpx;
font-weight: 400;
}
.examine_active {
width: 128rpx;
font-size: 28rpx;
font-weight: 500;
/* color: #8171fc; */
}
.task_line {
margin-top: 20rpx;
width: 250rpx;
height: 6rpx;
background: #8171fc;
border-radius: 4rpx;
}
.task_line_none {
margin-top: 20rpx;
width: 250rpx;
height: 6rpx;
background: #fff;
border-radius: 4rpx;
}
.container {
margin-top: 20rpx;
padding: 0 30rpx 30rpx 30rpx;
}
.detail {
width: 100%;
background: #fff;
margin-top: 20rpx;
}
.detail_item {
padding: 26rpx 30rpx;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2rpx solid #f6f6f6;
}
.date {
font-size: 28rpx;
font-weight: 500;
color: #999999;
}
.arrow_right {
width: 16rpx;
height: 26rpx;
}
.detail_content {
padding: 32rpx 30rpx 20rpx 30rpx;
}
.type {
font-size: 32rpx;
font-weight: 400;
color: #8171fc;
}
.title {
font-size: 32rpx;
font-weight: 500;
color: #000000;
margin-top: 18rpx;
}
.connet {
font-size: 28rpx;
font-weight: 400;
color: #333333;
margin-top: 18rpx;
}
.phtot_list {
display: flex;
margin-top: 18rpx;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
display: flex;
margin-top: 18rpx;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
}
.img {
width: 144rpx;
height: 144rpx;
margin-bottom: 16rpx;
padding: 0 7rpx;
}
.adress {
display: flex;
align-items: center;
}
.address_icon {
width: 32rpx;
height: 34rpx;
}
.address_name {
font-size: 28rpx;
font-weight: 400;
text-align: left;
color: #999999;
margin-left: 22rpx;
}
.status_box {
padding: 20rpx 30rpx;
border-top: 2rpx solid #f6f6f6;
}
.status {
width: 136rpx;
height: 52rpx;
background: rgba(255, 141, 6, 0.8);
border-radius: 26rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
font-weight: 400;
color: #ffffff;
}
.adopt {
width: 136rpx;
height: 52rpx;
background: #8171fc;
border-radius: 26rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
font-weight: 400;
color: #ffffff;
}
.failed {
width: 136rpx;
height: 52rpx;
background: #fc7171;
border-radius: 26rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
font-weight: 400;
color: #ffffff;
}
.data_none {
margin-top: 288rpx;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.data_img {
width: 266rpx;
height: 164rpx;
}
.data_title {
margin-top: 38rpx;
font-size: 28rpx;
font-weight: 400;
text-align: center;
color: #333333;
}
pages/mine-picture/index.vue 0 → 100644
浏览文件 @ cd9697e9
<template>
<view>
<view class="examine_box">
<view class="examine_list">
<view class="examine_item" v-for="(item, index) in examineItem" @click="changeExamine(item, index)" :key="item.name">
<view :class="[ExamineIdx === index ? 'examine_active' : 'examine_item_name']">{{ item.name }}</view>
<view :class="[ExamineIdx === index ? 'task_line' : 'task_line_none']"></view>
</view>
</view>
</view>
<view class="container">
<template v-if="ExamineIdx === 0">
<view class="detail" v-for="(item, index) in examineList" :key="item.id">
<navigator hover-class="none" url="/package-two/my-phtot-detail/my-phtot-detail?id=item.id"></navigator>
<view v-if="item.status === 1">
<view class="detail_item">
<view class="date">{{ item.put_date }}</view>
<image mode="aspectFill" class="arrow_right" src="/static/icon/arrow_right@2x.png" />
</view>
<view class="detail_content">
<view class="type">• {{ item.photo_task_type.name }}</view>
<view class="title">{{ item.title }}</view>
<view class="connet">
<rich-text :nodes="item.content"></rich-text>
</view>
<view class="phtot_list">
<image v-for="(item, index) in item.photoList" :key="item.id" mode="aspectFill" class="img" :src="item.img" />
</view>
<view class="adress">
<image class="address_icon" mode="aspectFill" src="/static/icon/ic_shz_dizhi@2x.png" />
<view class="address_name">{{ item.position }}</view>
</view>
</view>
<view class="status_box">
<view v-if="item.status === 1" class="status">审核中</view>
<view v-else-if="item.status === 2" class="adopt">已通过</view>
<view v-else class="failed">未通过</view>
</view>
</view>
</view>
</template>
<template v-if="ExamineIdx === 1">
<view class="detail" v-for="(item, index) in examineList" :key="item.id">
<navigator hover-class="none" url="/package-two/my-phtot-detail/my-phtot-detail?id=item.id"></navigator>
<view v-if="item.status === 2">
<view class="detail_item">
<view class="date">{{ item.put_date }}</view>
<image mode="aspectFill" class="arrow_right" src="/static/icon/arrow_right@2x.png" />
</view>
<view class="detail_content">
<view class="type">• {{ item.photo_task_type.name }}</view>
<view class="title">{{ item.title }}</view>
<view class="connet">
<rich-text :nodes="item.content"></rich-text>
</view>
<view class="phtot_list">
<image v-for="(item, index) in item.photoList" :key="item.id" mode="aspectFill" class="img" :src="item.img" />
</view>
<view class="adress">
<image class="address_icon" mode="aspectFill" src="/static/icon/ic_shz_dizhi@2x.png" />
<view class="address_name">{{ item.position }}</view>
</view>
</view>
<view class="status_box">
<view v-if="item.status === 1" class="status">审核中</view>
<view v-else-if="item.status === 2" class="adopt">已通过</view>
<view v-else class="failed">未通过</view>
</view>
</view>
</view>
</template>
<template v-if="ExamineIdx === 2">
<view class="detail" v-for="(item, index) in examineList" :key="item.id">
<navigator hover-class="none" url="/package-two/my-phtot-detail/my-phtot-detail?id=item.id"></navigator>
<view v-if="item.status === 3">
<view class="detail_item">
<view class="date">{{ item.put_date }}</view>
<image mode="aspectFill" class="arrow_right" src="/static/icon/arrow_right@2x.png" />
</view>
<view class="detail_content">
<view class="type">• {{ item.photo_task_type.name }}</view>
<view class="title">{{ item.title }}</view>
<view class="connet">
<rich-text :nodes="item.content" />
<!-- <u-parse :content="content" />-->
</view>
<view class="phtot_list">
<image v-for="(item, index) in item.photoList" :key="item.id" mode="aspectFill" class="img" :src="item.img" />
</view>
<view class="adress">
<image class="address_icon" mode="aspectFill" src="/static/icon/ic_shz_dizhi@2x.png" />
<view class="address_name">{{ item.position }}</view>
</view>
</view>
<view class="status_box">
<view v-if="item.status === 1" class="status">审核中</view>
<view v-else-if="item.status === 2" class="adopt">已通过</view>
<view v-else class="failed">未通过</view>
</view>
</view>
</view>
</template>
<view class="data_none" v-if="examineList.length === 0">
<image mode="aspectFill" class="data_img" src="/static/pic_wushuju@2x.png" />
<view class="data_title">暂无数据</view>
</view>
</view>
</view>
</template>
<script>
import { examineItem, examineList } from '@/pages/mine-picture/mock';
export default {
data() {
return {
examineItem,
ExamineIdx: 0,
status: 1,
examineList,
};
},
methods: {
async fetchExamineList() {
const type = this.data.ExamineIdx + 1;
const res = await request.get(`/api/app/phototask/list?status=${type}`, {});
this.setData({
examineList: res.data.list,
});
this.data.examineList.forEach((item) => {
item.put_date = item.put_date.substring(0, 16);
});
this.setData({
examineList: this.data.examineList,
});
console.log(this.data.examineList);
},
async changeExamine(item, index) {
if (this.ExamineIdx === index) return;
this.ExamineIdx = index;
// this.examineList()
},
},
};
</script>
<style scoped lang="scss">
@import 'index.scss';
</style>
pages/mine-picture/mock.js 0 → 100644
浏览文件 @ cd9697e9
export const examineItem = [{ name: '审核中' }, { name: '已通过' }, { name: '未通过' }];
export const examineList = [
{
object_name: 'phototask',
status: 1,
put_date: '2021-06-29 17:17:19',
is_real: false,
name: '',
object_type: 'default',
latitude: 22.755964,
weight: 1,
phone: '',
title: '\u597d\u55e8\u54e6',
longitude: 108.322121,
views_num: 20,
photo_task_type: {
object_name: 'phototasktype',
status: 1,
points: 100,
category: 3,
object_type: 'default',
name: '\u5176\u4ed6',
id: 35,
weight: 6,
img: 'https://qiniu.yuhuofei.it/FgxfvMffyGyFb3vzHGp5ieSEwBYl',
},
likes_num: 0,
content: '\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8',
video_list: 'https://qiniu.gx-stbd.com/FlHmdcZ6P6QC7SanVooMf1CKxW_U,',
image_list: '',
id: 131,
wx_user: {
object_name: 'wxuser',
nickName: '\u5f3a',
openId: 'ofKlR5aXjsvCXrdG1U1DAyl1f5tU',
object_type: 'default',
avatarUrl: 'https://thirdwx.qlogo.cn/mmopen/vi_32/KbsMOauZmxL64AVsAUp51XPacVMDQCtBd8uMzQyBKzrFTvKicicWJRPNTKXNgMyL9PEJGHibtGFEr8uliateTKAFAQ/132',
id: 533,
integral: 5198314,
created: '2021-05-07 10:24:27',
is_receive: true,
tag_name: '',
},
follow_num: 0,
position: '\u5fb7\u653f\u8def\u5357\u4e00\u5df7',
remark: '\u901a\u8fc7',
},
{
object_name: 'phototask',
status: 1,
put_date: '2021-06-18 17:39:00',
is_real: false,
name: null,
object_type: 'default',
latitude: 22.767033,
weight: 1,
phone: null,
title: '\u5de5\u4f5c\u5feb\u4e86',
longitude: 108.37496,
views_num: 0,
photo_task_type: {
object_name: 'phototasktype',
status: 1,
points: 100,
category: 3,
object_type: 'default',
name: '\u5de5\u4f5c',
id: 31,
weight: 2,
img: 'https://qiniu.yuhuofei.it/FsYp6g9wMLZaUAXLBeGjvOWaZ6KR',
},
likes_num: 0,
content: '\u554a\u554a\u554a\u554a\u554a\u554a\u554a\u554a\u554a\u554a\u554a\u554a\u554a\u554a\u554a\u554a\u554a\u554a\u554a\u554a',
video_list: 'https://qiniu.gx-stbd.com/FiGkIBXXkhvOITsy2vUYlVAkEWKR,',
image_list:
'https://qiniu.gx-stbd.com/FlUmtaABjfs5d_Kj7S4UjA-IAjyp?watermark/3/text/5ouN5pGE5Zyw54K5OiAg5LqU6LGh6Iiq5rSL5Z-O/font/5b6u6L2v6ZuF6buR/fontsize/240/fill/I0ZGRkZGRg==/dissolve/100/gravity/SouthWest/dx/28/dy/40/text/5ouN5pGE5pe26Ze0OiAgMjAyMS0wNi0xOCAxNzozODowMyDmmJ_mnJ_kupQ=/font/5b6u6L2v6ZuF6buR/fontsize/240/fill/I0ZGRkZGRg==/dissolve/100/gravity/SouthWest/dx/28/dy/10,',
id: 116,
wx_user: {
object_name: 'wxuser',
nickName: '\u5f3a',
openId: 'ofKlR5aXjsvCXrdG1U1DAyl1f5tU',
object_type: 'default',
avatarUrl: 'https://thirdwx.qlogo.cn/mmopen/vi_32/KbsMOauZmxL64AVsAUp51XPacVMDQCtBd8uMzQyBKzrFTvKicicWJRPNTKXNgMyL9PEJGHibtGFEr8uliateTKAFAQ/132',
id: 533,
integral: 5198314,
created: '2021-05-07 10:24:27',
is_receive: true,
tag_name: '',
},
follow_num: 0,
position: '\u4e94\u8c61\u822a\u6d0b\u57ce',
remark: null,
},
];
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论