Skip to content

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

feat: 完成 填写上报内容 页面

上级 2c59fe6c
隐藏空白字符变更
内嵌 并排
正在显示 包含 770 行增加 和 6 行删除
manifest.json
浏览文件 @ 618bf629
......@@ -70,13 +70,24 @@
},
"vueVersion" : "2",
"h5" : {
"devServer": {
"proxy": {
"/api": {
"target": "https://csssptest.yuhuofei.cn",
"pathRewrite": { "^/api": "" }
"devServer" : {
"proxy" : {
"/api" : {
"target" : "https://csssptest.yuhuofei.cn",
"pathRewrite" : {
"^/api" : ""
}
}
}
},
"sdkConfigs" : {
"maps" : {
"amap" : {
"key" : "08c498225508d06eef8fe9eb90c08ee1",
"securityJsCode" : "ad00dce650042baa788435f2f3ea4089",
"serviceHost" : ""
}
}
}
}
}
}
pages.json
浏览文件 @ 618bf629
......@@ -49,6 +49,13 @@
"navigationBarTitleText": "我的随手拍-详情",
"enablePullDownRefresh": false
}
},
{
"path": "pages/record-content/index",
"style": {
"navigationBarTitleText": "上报内容",
"enablePullDownRefresh": false
}
}
],
"tabBar": {
......
pages/record-content/CertificateTypeActionSheet.vue 0 → 100644
浏览文件 @ 618bf629
<template>
<view>
<u-action-sheet :actions="actionsOptions" :show="show" cancelText="取消" safeAreaInsetBottom round="32rpx" @close="onActionSheetClose" @select="onActionSheetSelect" />
</view>
</template>
<script>
const actionsOptions = [
{
name: '身份证',
},
];
export default {
name: 'CertificateTypeActionSheet',
props: {
success: {
type: Function,
default: (item) => {},
},
},
data() {
return {
show: false,
actionsOptions,
};
},
methods: {
async onActionSheetClose() {
this.show = false;
},
async onActionSheetSelect(item) {
this.success(item);
},
},
};
</script>
<style scoped lang="scss">
@import 'CertificateTypeActionSheet.scss';
</style>
pages/record-content/UploadActionSheet.vue 0 → 100644
浏览文件 @ 618bf629
<template>
<view>
<u-action-sheet :actions="actionsOptions" :show="show" cancelText="取消" safeAreaInsetBottom round="32rpx" @close="onActionSheetClose" @select="onActionSheetSelect" />
</view>
</template>
<script>
const actionsOptions = [
{
name: '图片',
type: 'image',
},
{
name: '视频',
type: 'video',
},
];
export default {
name: 'UploadActionSheet',
props: {
success: {
type: Function,
default: (item) => {},
},
},
data() {
return {
show: false,
actionsOptions,
};
},
methods: {
async onActionSheetClose() {
this.show = false;
},
async onActionSheetSelect(item) {
this.success(item);
},
},
};
</script>
<style scoped lang="scss">
@import 'UploadActionSheet.scss';
</style>
pages/record-content/index.scss 0 → 100644
浏览文件 @ 618bf629
.thing_icon {
width: 26rpx;
height: 28rpx;
}
.content {
padding: 38rpx 30rpx 50rpx 30rpx;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.report_box {
width: 100%;
}
.report_one {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 40rpx;
border-bottom: 2rpx solid #e4e4e4;
}
.report_left {
display: flex;
justify-content: flex-start;
align-items: center;
}
.report_right {
display: flex;
justify-content: flex-end;
align-items: center;
}
.report_name {
font-size: 32rpx;
font-weight: 500;
color: #000000;
}
.arrow_right {
width: 12rpx;
height: 20rpx;
margin-left: 24rpx;
}
.step_box {
width: 100%;
margin-top: 48rpx;
}
.tep_one {
display: flex;
align-items: center;
}
.clear {
display: flex;
}
.tep_icon {
width: 40rpx;
height: 40rpx;
}
.one {
margin-left: 16rpx;
font-size: 32rpx;
color: #000000;
font-weight: 500;
}
.tip {
font-size: 24rpx;
font-weight: 400;
color: #656565;
margin-left: 20rpx;
margin-top: 5rpx;
}
.photo_list {
display: flex;
justify-content: start;
align-items: center;
flex-wrap: wrap;
margin-top: 15px;
padding-bottom: 40rpx;
border-bottom: 2rpx solid #e4e4e4;
}
.photo_list2 {
display: flex;
justify-content: start;
align-items: center;
flex-wrap: wrap;
margin-top: 15px;
padding-bottom: 40rpx;
}
.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: 168rpx;
height: 168rpx;
border-radius: 16rpx;
}
.upload_del {
width: 40rpx;
height: 40rpx;
position: absolute;
top: 10rpx;
right: 10rpx;
}
.play-icon {
width: 68rpx;
height: 68rpx;
position: absolute;
top: 50%;
left: 50%;
margin-top: -34rpx;
margin-inline-start: -34rpx;
}
.photo_upload {
width: 168rpx;
height: 168rpx;
background: #ffffff;
border: 2rpx solid #e2e2e2;
border-radius: 16rpx;
display: flex;
justify-content: center;
align-items: center;
margin-right: 16rpx;
margin-bottom: 16rpx;
}
.upload_icon {
width: 54rpx;
height: 54rpx;
}
.write_box_title {
width: 100%;
background: #f5f5f5;
border-radius: 16rpx;
padding: 28rpx 20rpx;
}
.write_box {
width: 100%;
height: 252rpx;
background: #f5f5f5;
border-radius: 16rpx;
padding: 24rpx 20rpx;
}
.write_box ::placeholder {
font-size: 28rpx;
font-weight: 400;
color: #656565;
}
.address {
font-size: 28rpx;
font-weight: 400;
color: #ff2727;
text-decoration: underline;
}
.address2 {
font-size: 28rpx;
font-weight: 400;
color: #000000;
}
.address_tip {
font-size: 28rpx;
font-weight: 500;
color: #000000;
margin-top: 20rpx;
}
.btn {
height: 92rpx;
background: linear-gradient(270deg, #8171fc, #a471fc);
border-radius: 46rpx;
color: #fff !important;
font-size: 32rpx;
font-weight: 500;
display: flex;
justify-content: center;
align-items: center;
}
/* 实名上报 */
.real {
}
.real-header {
display: flex;
align-items: center;
}
.real-header view {
margin-left: 20rpx;
font-size: 32rpx;
font-weight: 500;
color: #000000;
}
.real-header image {
width: 44rpx;
height: 44rpx;
}
.real-content {
padding-left: 64rpx;
}
.real-content-switch {
margin: 26rpx 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.real-content-switch .title {
font-size: 32rpx;
font-weight: 400;
color: #000000;
}
.real-content-switch /deep/ .u-switch {
display: flex;
align-items: center;
}
.real-switch {
flex-shrink: 0;
}
.real-content-point {
font-size: 24rpx;
font-weight: 400;
color: #656565;
}
.real-content-input {
margin-top: 20rpx;
}
.real-content-input view {
margin-bottom: 20rpx;
}
.real-content-input input {
padding: 22rpx 20rpx;
background: #f5f5f5;
border: 2rpx solid #d3d3d3;
font-size: 24rpx;
font-weight: 400;
color: #000000;
}
.real-content-input .input {
padding: 22rpx 20rpx;
background: #f5f5f5;
border: 2rpx solid #d3d3d3;
font-size: 24rpx;
font-weight: 400;
color: #000000;
border-radius: 0 !important;
}
.real-content-input .input-placeholder {
font-size: 24rpx;
font-weight: 400;
color: #a1a1a1;
}
pages/record-content/index.vue 0 → 100644
浏览文件 @ 618bf629
<template>
<view>
<view class="detail_container">
<view class="content">
<view class="report_box">
<view class="report_one" @click="choice">
<view class="report_left">
<image mode="aspectFill" class="tep_icon" src="/static/icon/ic_rw_zhixing@2x.png" />
<view class="one">{{ !showActive ? null : '上报类型' }}</view>
</view>
<view class="report_right">
<template v-for="(item, index) in typeList">
<view v-if="id === item.id" class="report_name" :key="item.id">{{ item.name }}</view>
</template>
<image mode="aspectFill" class="arrow_right" src="/static/icon/arrow_right@2x.png" />
</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">{{ !showActive ? null : '拍摄地点' }}</view>
</view>
<view class="photo_list">
<view v-if="address === '点击授权获取位置信息'" class="address" @click="getAddress">{{ !showActive ? null : address }}</view>
<view v-else class="address2" @click="getAddress">{{ !showActive ? null : address }}</view>
<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" />
<view class="one">{{ !showActive ? null : '上传照片/视频' }}</view>
<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">
<!-- <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" />
</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" />
<view class="one">{{ !showActive ? null : '上报标题' }}</view>
</view>
<view class="report_title">
<input :maxlength="20" :placeholder="!showActive ? '' : '标题'" v-model="title" class="title_input" />
<view class="clear">
<text style="float: right; font-size: 28rpx; font-weight: 400; color: #656565; margin-right: 5px">{{ title.length }}/{{ maxWord }}</text>
<image v-if="title !== '' && showDel" bindtap="delTitle" mode="aspectFill" class="tep_icon" src="/static/icon/ic_bt_del@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" />
<view class="one">{{ !showActive ? null : '上报内容' }}</view>
</view>
<view class="photo_list2">
<textarea v-model="content" :placeholder="!showActive ? '' : '具体描述（最少10个字）'" class="write_box" bindinput="content" />
</view>
</view>
<!-- 实名上报 -->
<view class="step_box" v-if="showActive">
<view class="real">
<view class="real-header">
<image src="/static/icon/ic_smsb@2x.png" />
<view>实名上报</view>
</view>
<view class="real-content">
<view class="real-content-switch">
<view class="title">是否选择实名上报？</view>
<u-switch v-model="checked" active-color="#8176f9" inactive-color="#dedbfe" :size="22" />
</view>
<view class="real-content-point"> 注：实名上报不会展示实名在随手拍世界，仅供平台收集上报可信度。 </view>
<template v-if="checked">
<view class="real-content-input">
<view>{{ '真实姓名' }}</view>
<input v-model="realForm.name" type="text" placeholder="请填写真实姓名" placeholder-class="input-placeholder" />
</view>
<view class="real-content-input">
<view>{{ '电话号码' }}</view>
<input v-model="realForm.phone" type="text" placeholder="请填写电话号码" placeholder-class="input-placeholder" :maxlength="11" />
</view>
<view class="real-content-input">
<view>{{ '证件类型' }}</view>
<view @click="openSelectCertificateType">
<u-input
:value="realForm.certificateType"
type="text"
placeholder="请选择证件类型"
class="input"
placeholder-class="input-placeholder"
readonly
suffixIcon="arrow-right"
/>
</view>
</view>
<view class="real-content-input">
<view>{{ '证件号码' }}</view>
<input v-model="realForm.certificateText" type="text" placeholder="请填写证件号码" placeholder-class="input-placeholder" :disabled="!realForm.certificateType" />
</view>
</template>
</view>
</view>
</view>
<view class="step_box">
<button type="submit" @click="submitReview" class="btn">{{ !showActive ? null : '上报' }}</button>
</view>
</view>
<!-- <van-action-sheet :show="show" :actions="typeList" bind:close="onClose" cancel-text="取消" bind:select="onSelect" />-->
<u-action-sheet :actions="typeList" :show="show" cancelText="取消" safeAreaInsetBottom round="32rpx" @close="onActionSheetClose" @select="onActionSheetSelect" />
<UploadActionSheet ref="uploadActionSheet" :success="onUpload" />
<CertificateTypeActionSheet ref="certificateTypeActionSheet" :success="onCertificateTypeChange" />
</view>
</view>
</template>
<script>
import { typeList, week } from '@/pages/record-content/mock';
import UploadActionSheet from '@/pages/record-content/UploadActionSheet';
import CertificateTypeActionSheet from '@/pages/record-content/CertificateTypeActionSheet';
export default {
components: { CertificateTypeActionSheet, UploadActionSheet },
data() {
return {
week,
typeList,
type: '请选择上报类型',
show: false,
category: null,
address: '点击授权获取位置信息',
latitude: '',
longitude: '',
showDel: false,
photoList: [],
req: [],
content: '',
title: '',
id: null,
thisDay: '',
currentWord: 0,
maxWord: 20,
weekday: '',
checked: false,
realForm: {
name: '',
phone: '',
certificateType: '',
certificateText: '',
},
// 上传照片或视频类型
mediaType: ['image', 'video'],
showActive: true,
};
},
methods: {
async choice() {
this.show = !this.show;
},
/**
* 选择上报类型关闭
* @returns {Promise<void>}
*/
async onActionSheetClose() {
this.show = false;
},
/**
* 选择上报类型回调
* @returns {Promise<void>}
*/
async onActionSheetSelect(item) {
console.log('onActionSheetSelect', item);
this.id = item.id;
},
/**
* 获取地理位置
* @returns {Promise<void>}
*/
async getAddress() {
// uni.openLocation({
// latitude: 0,
// longitude: 0,
// success: (result) => {
// console.log('success', result);
// },
// fail: (result) => {
// console.log('fail', result);
// },
// });
uni.getLocation({
isHighAccuracy: true,
success: (result) => {
console.log('success', result);
},
fail: (result) => {
console.log('fail', result);
},
});
},
/**
* 打开选择 上传图片或视频 操作菜单
* @returns {Promise<void>}
*/
async upload() {
if (this.address === '' || this.address === '点击授权获取位置信息') {
// uni.showModal({
// title: '提示',
// content: '请获取拍摄地点后上传照片',
// showCancel: false,
// });
// return;
}
this.$refs.uploadActionSheet.show = true;
},
/**
* 上传图片或视频
* @param item
* @returns {Promise<void>}
*/
async onUpload(item) {
switch (item.type) {
case 'image':
uni.chooseImage({
success: (result) => {
console.log(result);
},
fail: (result) => {
console.log(result);
},
});
break;
case 'video':
uni.chooseVideo({
success: (result) => {
console.log(result);
},
fail: (result) => {
console.log(result);
},
});
break;
}
},
async openSelectCertificateType() {
this.$refs.certificateTypeActionSheet.show = true;
},
async onCertificateTypeChange(item) {
this.realForm.certificateType = item.name;
},
/**
* 上报按钮
* @returns {Promise<void>}
*/
async submitReview() {},
},
};
</script>
<style scoped lang="scss">
@import 'index.scss';
</style>
pages/record-content/mock.js 0 → 100644
浏览文件 @ 618bf629
export const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
export const typeList = [
{
object_name: 'phototasktype',
status: 1,
points: 100,
category: 2,
object_type: 'default',
name: '\u73af\u5883',
id: 25,
weight: 1,
img: 'https://qiniu.yuhuofei.it/FuUrWZNKhCwqrUY0debMGn9kpzPs',
},
{
object_name: 'phototasktype',
status: 1,
points: 100,
category: 2,
object_type: 'default',
name: '\u4ea4\u901a',
id: 26,
weight: 2,
img: 'https://qiniu.yuhuofei.it/FvCa_gLkJEMD89Lt3hXb-5hch8u2',
},
{
object_name: 'phototasktype',
status: 1,
points: 100,
category: 2,
object_type: 'default',
name: '\u6587\u5316',
id: 27,
weight: 3,
img: 'https://qiniu.yuhuofei.it/FkrENh17IEq2kFMLuAf3oTKlYedE',
},
{
object_name: 'phototasktype',
status: 1,
points: 100,
category: 2,
object_type: 'default',
name: '\u4f4f\u5bbf',
id: 28,
weight: 4,
img: 'https://qiniu.yuhuofei.it/FjQh8ys8bXzNhvGOF7-NouDsU-dp',
},
{
object_name: 'phototasktype',
status: 1,
points: 100,
category: 2,
object_type: 'default',
name: '\u9910\u996e',
id: 37,
weight: 5,
img: 'https://qiniu.yuhuofei.it/FoKhpvNzohfwL71caWTXNSYmR9be',
},
{
object_name: 'phototasktype',
status: 1,
points: 100,
category: 2,
object_type: 'default',
name: '\u5176\u4ed6',
id: 29,
weight: 6,
img: 'https://qiniu.yuhuofei.it/FgxfvMffyGyFb3vzHGp5ieSEwBYl',
},
];
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论