You've already forked guangan-mp
1.0.0
This commit is contained in:
205
pages/user-share/user-share.vue
Normal file
205
pages/user-share/user-share.vue
Normal file
@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<view class="flex flex-column" style="width:100vw;height: 100vh; background-color: #F5F6F8;">
|
||||
<view class="flex flex-row align-center px-2 py-1" style="background-color: #FFF8D3; height: 56rpx;">
|
||||
<image src="@/static/images/icon-warn.png" style="height: 24rpx; width: 24rpx;"></image>
|
||||
<text style="color: #FFBE0E; font-size: 20rpx">随手拍简单、高效的反馈并上传问题</text>
|
||||
</view>
|
||||
<view class="bg-white mt-2 p-2 rounded-lg" style="padding-bottom: 200rpx;">
|
||||
<view class="flex-1" style="color: #666666;">问题类型：</view>
|
||||
<picker class="border-bottom border-light" :range="typeList" range-key="name" @change="handleTypeIdChange">
|
||||
<view class="py-3 flex align-center justify-between">
|
||||
<view class=" font28 flex align-center flex-1" v-if="type_name">{{type_name}}
|
||||
</view>
|
||||
<view class=" font28 text-light-black flex-1" v-else>请选择问题分类</view>
|
||||
<uni-icons type="right" color="#cccccc" size="20"></uni-icons>
|
||||
</view>
|
||||
</picker>
|
||||
<view class="flex-1 pt-3" style="color: #666666;">反馈内容：</view>
|
||||
<view class="border border-light rounded py-3 flex align-center justify-between" style="height: 200rpx;">
|
||||
<textarea v-model="form.content" autoHeight class="flex-1 font28" placeholder="随手拍反馈内容" />
|
||||
</view>
|
||||
<view class="flex-1 pt-3">问题地址：</view>
|
||||
<pick-regions defaultRegion="511602" @getRegion="handleGetRegion">
|
||||
<view class="py-3 flex align-center justify-between">
|
||||
<view class=" font28 flex align-center flex-1" v-if="province">{{province}}{{city}}{{area}}</view>
|
||||
<view class=" font28 text-light-black flex-1" v-else>省市区</view>
|
||||
<uni-icons type="right" color="#cccccc" size="20"></uni-icons>
|
||||
</view>
|
||||
</pick-regions>
|
||||
<view class="border rounded border-light py-3 flex align-center justify-between">
|
||||
<textarea v-model="form.ticket_address" autoHeight class="flex-1 font28" placeholder="详细地址（例如**街**号**）" />
|
||||
</view>
|
||||
<view class="flex-1 py-3">联系方式：</view>
|
||||
<view class="flex align-center justify-between py-3 ">
|
||||
<view class="flex-1 border-bottom border-light">
|
||||
<input class="font28" focus placeholder="姓名" v-model="form.contact_name" />
|
||||
</view>
|
||||
<view class="flex-1 border-bottom border-light">
|
||||
<input class="font28" type="number" placeholder="联系方式" v-model="form.contact_phone" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-1 py-3">相关图片：</view>
|
||||
<view class="flex py-3 mb-6">
|
||||
<div class="flex flex-wrap w-25 position-relative" v-for="(item,index) in img_array" :key='index'>
|
||||
<img class="img-add" :src="item" @click="previewImage(index)" alt=""/>
|
||||
<img class='img-delete position-absolute' src='/static/images/delete.png' @click='deleteImage(index)'>
|
||||
</div>
|
||||
<div class="flex flex-wrap w-25" @click="chooseImages()">
|
||||
<img class='img-add' src="/static/images/addImage.png" alt="">
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fixed-bottom border-top bg-white py-2 px-3">
|
||||
<view class="bg-danger py-3 font30 text-center text-white shadow rounded-circle" @click="onSubmit">
|
||||
立即提交
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { TaCache } from '../../common/cache';
|
||||
import {
|
||||
TaAjax, TaPost, baseUrl
|
||||
} from '@/common/ajax';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
province: "四川省",
|
||||
city: "广安市",
|
||||
area: "广安区",
|
||||
type_name: "",
|
||||
form: {
|
||||
type_id: 0,
|
||||
title: "用户随手拍",
|
||||
content: "",
|
||||
contact_name: "",
|
||||
contact_phone: "",
|
||||
ticket_region: "四川省/广安市/广安区",
|
||||
ticket_address: "",
|
||||
imgs: "",
|
||||
ticket_lat: null,
|
||||
ticket_lng: null,
|
||||
},
|
||||
img_array: [],
|
||||
typeList: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const that = this;
|
||||
const userInfo = TaCache.get('auth.user');
|
||||
if (!userInfo) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/user/login"
|
||||
})
|
||||
}
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
success(res) {
|
||||
that.form.ticket_lat = res.latitude;
|
||||
that.form.ticket_lng = res.longitude;
|
||||
},
|
||||
fail(err) {
|
||||
console.warn(err)
|
||||
}
|
||||
})
|
||||
},
|
||||
onReady() {
|
||||
this.getTypeList()
|
||||
},
|
||||
methods: {
|
||||
getTypeList() {
|
||||
TaAjax.get('/ticket/api.type/list').then((result) => {
|
||||
const data = result.data;
|
||||
this.typeList = data;
|
||||
})
|
||||
},
|
||||
handleTypeIdChange(e) {
|
||||
const index = e.detail.value;
|
||||
const curType = this.typeList[index];
|
||||
this.type_name = curType.name;
|
||||
this.form.type_id = curType.id
|
||||
},
|
||||
handleGetRegion(region) {
|
||||
this.province = region[0].name
|
||||
this.city = region[1].name
|
||||
this.area = region[2].name
|
||||
this.form.ticket_region = `${this.province}/${this.city}/${this.area}`
|
||||
},
|
||||
chooseImages() {
|
||||
const that = this;
|
||||
uni.chooseMedia({
|
||||
mediaType: ['image', 'video'],
|
||||
sourceType: ['album', 'camera'],
|
||||
sizeType: ['original'],
|
||||
success(res) {
|
||||
for(let i=0;i<res.tempFiles.length;i++){
|
||||
const tempFilePath = res.tempFiles[i].tempFilePath
|
||||
const loadingId = uni.showLoading({
|
||||
title: '上传中...',
|
||||
mask: true,
|
||||
})
|
||||
uni.uploadFile({
|
||||
url: baseUrl + '/custom/api.Upload/file',
|
||||
filePath: tempFilePath,
|
||||
name: 'file',
|
||||
success(res) {
|
||||
const responseStr = res.data;
|
||||
const response = JSON.parse(res.data);
|
||||
const data = response.data;
|
||||
const url = data.url;
|
||||
that.img_array.push(url);
|
||||
},
|
||||
complete() {
|
||||
uni.hideLoading(loadingId)
|
||||
},
|
||||
})
|
||||
}
|
||||
},
|
||||
})
|
||||
},
|
||||
previewImage(idx = 0) {
|
||||
uni.previewImage({
|
||||
urls: this.img_array,
|
||||
current: idx,
|
||||
loop: true,
|
||||
})
|
||||
},
|
||||
deleteImage(idx) {
|
||||
this.img_array.splice(idx, 1)
|
||||
},
|
||||
onSubmit() {
|
||||
this.form.imgs = this.img_array.join("|")
|
||||
TaPost('/ticket/api.auth.UserShare/add', this.form).then((result) => {
|
||||
if (result.code == 0) {
|
||||
return uni.showToast({
|
||||
icon: 'error',
|
||||
title: result.info,
|
||||
})
|
||||
}
|
||||
const id = result.data
|
||||
uni.switchTab({
|
||||
url: "/pages/index/index"
|
||||
})
|
||||
return uni.showToast({
|
||||
icon: 'success',
|
||||
title: result.info,
|
||||
})
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.img-add {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
}
|
||||
.img-delete {
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 48rpx;
|
||||
width: 48rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user