Skip to content

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

feat: 完成 我的随手拍详情 页面

上级 cd9697e9
隐藏空白字符变更
内嵌 并排
正在显示 包含 341 行增加 和 0 行删除
main.js
浏览文件 @ 2c59fe6c
......@@ -5,6 +5,11 @@ import Vue from 'vue';
import uView from '@/uni_modules/uview-ui';
Vue.use(uView);
Vue.config.productionTip = false;
Array.prototype.at = function (index) {
return [...this].splice(index, 1).pop();
};
App.mpType = 'app';
const app = new Vue({
...App,
......
pages.json
浏览文件 @ 2c59fe6c
......@@ -42,6 +42,13 @@
"navigationBarTitleText": "我的随手拍",
"enablePullDownRefresh": false
}
},
{
"path": "pages/mine-picture-detail/index",
"style": {
"navigationBarTitleText": "我的随手拍-详情",
"enablePullDownRefresh": false
}
}
],
"tabBar": {
......
pages/mine-picture-detail/index.scss 0 → 100644
浏览文件 @ 2c59fe6c
.container {
padding-bottom: 64rpx;
}
.article_head {
padding: 14rpx 30rpx 0 30rpx;
}
.title {
font-size: 48rpx;
font-weight: 500;
color: #000000;
letter-spacing: 1rpx;
}
.right {
font-size: 28rpx;
font-weight: 500;
color: #999999;
padding: 12rpx 0;
}
.line {
width: 750rpx;
height: 20rpx;
background: #f6f6f6;
}
.step_box {
padding: 42rpx 30rpx 0 30rpx;
}
.tep_one {
display: flex;
align-items: center;
}
.tep_icon {
width: 48rpx;
height: 48rpx;
}
.one {
margin-left: 16rpx;
font-size: 32rpx;
color: #000000;
font-weight: 500;
}
.photo_list {
display: flex;
justify-content: start;
align-items: center;
flex-wrap: wrap;
margin-top: 7px;
padding-bottom: 36rpx;
border-bottom: 2rpx solid #e4e4e4;
}
.content {
font-size: 28rpx;
font-weight: 400;
color: #333333;
padding-right: 58rpx;
}
.report_title {
display: flex;
justify-content: space-between;
align-items: center;
background: #f5f5f5;
border-radius: 16rpx;
padding: 28rpx 20rpx;
margin-top: 15px;
/* padding-bottom: 40rpx;
border-bottom: 2rpx solid #E4E4E4; */
}
.title_input {
width: 85%;
}
.photo_item {
width: 168rpx;
height: 168rpx;
border-radius: 16rpx;
position: relative;
margin-right: 16rpx;
margin-bottom: 16rpx;
}
.upload_img {
width: 0;
height: 0;
//width: 168rpx;
//height: 168rpx;
border-radius: 16rpx;
}
.address {
font-size: 28rpx;
font-weight: 400;
color: #999999;
margin-left: 60rpx;
}
.examine {
margin-left: 60rpx;
border-bottom: unset;
}
.examine_reason {
margin-left: 60rpx;
margin-top: 7px;
}
.examine_icon {
width: 48rpx;
height: 48rpx;
}
.examine_status {
font-size: 32rpx;
font-weight: 500;
color: #ff9a30;
margin-left: 18rpx;
}
.examine_status2 {
font-size: 32rpx;
font-weight: 500;
color: #8171fc;
margin-left: 18rpx;
}
.examine_status3 {
font-size: 32rpx;
font-weight: 500;
color: #fc7171;
margin-left: 18rpx;
}
.examine_result {
display: flex;
align-items: center;
}
.result {
margin-top: 18rpx;
font-size: 32rpx;
font-weight: 400;
color: #000000;
}
.play-icon {
width: 68rpx;
height: 68rpx;
position: absolute;
top: 50%;
left: 50%;
margin-top: -34rpx;
margin-inline-start: -34rpx;
}
.play-wrapper {
position: relative;
background-color: #000;
width: 168rpx;
height: 168rpx;
border-radius: 16rpx;
overflow: hidden;
}
pages/mine-picture-detail/index.vue 0 → 100644
浏览文件 @ 2c59fe6c
<template>
<view>
<view class="container" v-for="(item, index) in photoDetail" :key="item.id">
<view class="article_head">
<view class="title">{{ item.title }}</view>
<view class="right">{{ item.put_date }}</view>
</view>
<view class="line"></view>
<view class="step_box">
<view class="tep_one">
<image mode="aspectFill" class="tep_icon" src="/static/icon/ic_rw_zp@2x.png" />
<view class="one">上传照片</view>
</view>
<view class="photo_list">
<view class="photo_item" v-for="(val, index) in mediaList" :key="item.id" @click="previewVideo(val, index)">
<image v-if="val.type === 'image'" mode="aspectFill" :src="val.url" style="display: block; width: 168rpx; height: 168rpx; border-radius: 16rpx" />
<view v-else class="play-wrapper">
<video :id="`myVideo${index}`" class="upload_img" :src="val.url" />
<image src="/static/icon/ic_sj_bf@2x.png" mode="aspectFill" class="play-icon" />
</view>
</view>
</view>
</view>
<view class="step_box">
<view class="tep_one">
<image mode="aspectFill" class="tep_icon" src="/static/icon/ic_rw_neirong@2x.png" />
<view class="one">上报内容</view>
</view>
<view class="photo_list">
<view class="content">
<rich-text :nodes="item.content" />
</view>
</view>
</view>
<view class="step_box">
<view class="tep_one">
<image mode="aspectFill" class="tep_icon" src="/static/icon/ic_rw_didian@2x.png" />
<view class="one">拍摄地点</view>
</view>
<view class="photo_list">
<view class="address">{{ item.position }}</view>
</view>
</view>
<view class="step_box">
<view class="tep_one">
<image mode="aspectFill" class="tep_icon" src="/static/icon/ic_shz_jg@2x.png" />
<view class="one">审核结果</view>
</view>
<view class="photo_list examine" v-if="item.status === 1">
<image mode="aspectFill" src="/static/icon/ic_shz@2x.png" class="examine_icon" />
<view class="examine_status">审核中</view>
</view>
<view class="examine_reason" v-if="item.status === 2">
<view class="examine_result">
<image mode="aspectFill" src="/static/icon/ic_ytg@2x.png" class="examine_icon" />
<view class="examine_status2">已通过</view>
</view>
<view class="result">已获得{{ item.photo_task_type.points }}积分</view>
</view>
<view class="examine_reason" v-if="item.status === 3">
<view class="examine_result">
<image mode="aspectFill" src="/static/icon/ic_wtg@2x.png" class="examine_icon" />
<view class="examine_status3">未通过</view>
</view>
<view class="result">{{ item.remark }}</view>
</view>
</view>
</view>
</view>
</template>
<script>
import { photoDetail } from '@/pages/mine-picture-detail/mock';
export default {
data() {
return {
status: 1,
id: null,
photoList: [],
mediaList: [],
photoDetail: [],
};
},
onLoad(query) {
this.fetchPhotoDetail();
},
methods: {
async fetchPhotoDetail() {
const dataList = [photoDetail];
dataList.forEach((item) => {
item.image_list = item.image_list.split(',');
item.video_list = item.video_list.split(',');
item.put_date = item.put_date.substring(0, 16);
item.image_list.pop();
item.image_list.forEach((element) => {
this.mediaList.push({
type: 'image',
url: element,
});
});
item.video_list.pop();
item.video_list.forEach((element, index) => {
this.mediaList.push({
type: 'video',
url: element,
videoContext: uni.createVideoContext(`myVideo${index}`),
});
});
});
this.photoDetail = dataList;
},
// 预览视频
previewVideo(item, index) {
if (item.type === 'video') {
this.mediaList.at(index).videoContext.requestFullScreen();
}
if (item.type === 'image') {
uni.previewImage({
urls: [item.url],
});
}
},
},
};
</script>
<style scoped lang="scss">
@import 'index.scss';
</style>
pages/mine-picture-detail/mock.js 0 → 100644
浏览文件 @ 2c59fe6c
export const photoDetail = {
object_name: 'phototask',
status: 1,
put_date: '2021-06-29 17:17:19',
is_real: false,
name: '',
object_type: 'detail',
latitude: 22.755964,
opt_date: '2021-06-29 17:23:08',
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: 'detail',
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:
'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: 131,
wx_user: {
object_name: 'wxuser',
nickName: '\u5f3a',
openId: 'ofKlR5aXjsvCXrdG1U1DAyl1f5tU',
object_type: 'detail',
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',
};
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论