Skip to content

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

feat: 填写上报内容页面 接入接口（未完成

上级 e1211981
显示空白字符变更
内嵌 并排
正在显示 包含 117 行增加 和 10 行删除
pages/record-content/index.scss
浏览文件 @ 143b11eb
......@@ -127,8 +127,10 @@
}
.upload_img {
width: 168rpx;
height: 168rpx;
width: 0;
height: 0;
//width: 168rpx;
//height: 168rpx;
border-radius: 16rpx;
}
......@@ -306,3 +308,12 @@
font-weight: 400;
color: #a1a1a1;
}
.play-wrapper {
position: relative;
background-color: #000;
width: 168rpx;
height: 168rpx;
border-radius: 16rpx;
overflow: hidden;
}
pages/record-content/index.vue
浏览文件 @ 143b11eb
......@@ -16,6 +16,7 @@
</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" />
......@@ -27,6 +28,7 @@
<view v-if="address === '点击授权获取位置信息'" class="address_tip">{{ !showActive ? null : '提示：请授权获取位置信息后上传照片或视频' }}</view>
</view>
</view>
<view class="step_box">
<view class="tep_one">
<image mode="aspectFill" class="tep_icon" src="/static/icon/ic_rw_zp@2x.png" />
......@@ -34,18 +36,25 @@
<view class="tip">{{ !showActive ? null : '照片至少上传1张/视频20M以下' }}</view>
</view>
<view class="photo_list">
<view class="photo_item" bindtap="preview" v-for="(item, index) in photoList" :key="item.id">
<view class="photo_item" bindtap="preview" v-for="(item, index) in photoList" :key="item.id" @click="previewVideo(item, index)">
<!-- <image mode="aspectFill" class="upload_img" src="{{item}}" /> -->
<image mode="aspectFill" v-if="item.type === 'image'" class="upload_img" :src="item.url" />
<video class="upload_img" v-else :src="item.url" :show-fullscreen-btn="false" :show-play-btn="false" :show-center-play-btn="false" />
<image v-if="item.type === 'video'" src="/static/icon/ic_sj_bf@2x.png" mode="aspectFill" class="play-icon" />
<image catchtap="cancel" mode="aspectFill" class="upload_del" src="/static/icon/ic_zp_del@2x.png" />
<image mode="aspectFill" v-if="item.type === 'image'" :src="item.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="item.url" />
<image src="/static/icon/ic_sj_bf@2x.png" mode="aspectFill" class="play-icon" />
</view>
<!-- <video class="upload_img" v-else :src="item.url" :show-fullscreen-btn="false" :show-play-btn="false" :show-center-play-btn="false" />-->
<!-- <image v-if="item.type === 'video'" src="/static/icon/ic_sj_bf@2x.png" mode="aspectFill" class="play-icon" />-->
<image @click.native.stop="cancel(item, index)" mode="aspectFill" class="upload_del" src="/static/icon/ic_zp_del@2x.png" />
</view>
<view class="photo_upload" @click="upload">
<image mode="aspectFill" class="upload_icon" src="/static/icon/upload_icon@2x.png" />
</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" />
......@@ -59,6 +68,7 @@
</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" />
......@@ -68,6 +78,7 @@
<textarea v-model="content" :placeholder="!showActive ? '' : '具体描述（最少10个字）'" class="write_box" bindinput="content" />
</view>
</view>
<!-- 实名上报 -->
<view class="step_box" v-if="showActive">
<view class="real">
......@@ -112,6 +123,7 @@
</view>
</view>
</view>
<view class="step_box">
<button type="submit" @click="submitReview" class="btn">{{ !showActive ? null : '上报' }}</button>
</view>
......@@ -133,8 +145,11 @@ export default {
components: { CertificateTypeActionSheet, UploadActionSheet },
data() {
return {
query: {},
list: [],
week,
typeList,
typeList: [],
type: '请选择上报类型',
show: false,
category: null,
......@@ -163,7 +178,20 @@ export default {
showActive: true,
};
},
onLoad(query) {
console.log(query);
this.query = query;
this.fetchPhotoTaskTypeData();
},
methods: {
async fetchPhotoTaskTypeData() {
const { list } = await uni.$u.http.get('/api/app/phototasktype/list', { params: { parent_id: this.query.parent_id } });
this.typeList = list;
this.id = +this.query.detail_id;
},
async choice() {
this.show = !this.show;
},
......@@ -233,11 +261,37 @@ export default {
* @returns {Promise<void>}
*/
async onUpload(item) {
const upLoad = async (file, type = 'image') => {
const [_temp0, { data }] = await uni.request({ url: '/api/qiniu/token' });
const [_temp1, { data: res }] = await uni.uploadFile({
url: data.upload_url,
formData: {
token: data.upload_token,
file,
},
});
const { key } = JSON.parse(res);
this.photoList.push({
id: uni.$u.guid(),
type,
url: `${data.qn_domain}${key}`,
});
if (type === 'video') {
this.photoList = this.photoList.map((value, index) => ({
...value,
videoContext: uni.createVideoContext(`myVideo${index}`),
}));
}
};
switch (item.type) {
case 'image':
uni.chooseImage({
success: (result) => {
console.log(result);
result.tempFiles.forEach((value) => {
upLoad(value);
});
},
fail: (result) => {
console.log(result);
......@@ -248,6 +302,7 @@ export default {
uni.chooseVideo({
success: (result) => {
console.log(result);
upLoad(result.tempFile, 'video');
},
fail: (result) => {
console.log(result);
......@@ -269,7 +324,48 @@ export default {
* 上报按钮
* @returns {Promise<void>}
*/
async submitReview() {},
async submitReview() {
const t = (text = '') => uni.$u.toast(text);
if (!this.id) return t('请选择上报类型');
if (!this.photoList.filter(({ type }) => type === 'image').length) return t('请上传图片');
if (!this.title) return t('请输入标题');
if (!this.content) return t('请输入内容');
if (this.checked) {
if (!this.realForm.name) return t('请输入真实姓名');
if (!this.realForm.phone) return t('请输入电话号码');
if (!this.realForm.certificateType) return t('请选择证件类型');
if (!this.realForm.certificateText) return t('请输入证件号码');
}
await uni.$u.http.post('/api/photo_task/create', {
title: this.title,
type_id: this.id,
image_list: this.photoList.filter(({ type }) => type === 'image').join(),
video_list: this.photoList.filter(({ type }) => type === 'video').join(),
content: this.content,
is_real: this.checked,
name: this.realForm.name,
phone: this.realForm.phone,
certificates: this.realForm.certificateType,
card_number: this.realForm.certificateText,
});
},
// 预览视频
previewVideo(item, index) {
if (item.type === 'video') {
this.photoList.at(index).videoContext.requestFullScreen();
}
if (item.type === 'image') {
uni.previewImage({
urls: [item.url],
});
}
},
cancel(item, index) {
this.photoList.splice(index, 1);
},
},
};
</script>
......
pages/record/index.vue
浏览文件 @ 143b11eb
......@@ -56,7 +56,7 @@ export default {
onLoad(query) {
this.fetchPhotoTaskTypeData();
this.fetchPhotoTaskTypeDetail();
// this.fetchPhotoTaskTypeDetail();
},
methods: {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论