对接口

落日与鲸

2025-02-24 c97b214697c736bdf27b545b4be6115ad36b7500

对接口

 H5/pages/Appeal/Appeal.vue

@@ -3,108 +3,324 @@
        <view class="main">
            <view class="card  flex a-center h-108 j-between">
                <text class="w-108 fs-27 font-bold mr-85">时间</text>
                <input placeholder-style="color: rgba(0,0,0,0.3);font-size:27rpx;" class="uni-input flex1"
                    maxlength="10" placeholder="请选择问题发生的时间" />
                <image src="/static/Appeal/left.png" class="w-19 h-19" mode=""></image>
                <view class=" flex a-center j-between flex1" @click="showDate=true">
                    <input v-model="time" disabled placeholder-style="color: rgba(0,0,0,0.3);font-size:27rpx;"
                        class="uni-input flex1" maxlength="10" placeholder="请选择问题发生的时间" />
                    <image src="/static/Appeal/left.png" class="w-19 h-19" mode=""></image>
                </view>
            </view>
            <view class="card  flex a-center h-108 j-between">
                <text class="w-108 fs-27 font-bold mr-85">问题类型</text>
                <input placeholder-style="color: rgba(0,0,0,0.3);font-size:27rpx;" class="uni-input flex1"
                    maxlength="10" placeholder="请选择问题类型" />
                <image src="/static/Appeal/left.png" class="w-19 h-19" mode=""></image>
                <view class=" flex a-center j-between flex1" @click="showList=true">
                    <input v-model="problemType" disabled placeholder-style="color: rgba(0,0,0,0.3);font-size:27rpx;"
                        class="uni-input flex1" maxlength="10" placeholder="请选择问题类型" />
                    <image src="/static/Appeal/left.png" class="w-19 h-19" mode=""></image>
                </view>
            </view>
            <view class="card  flex a-center h-108 j-between">
                <text class="w-108 fs-27 font-bold mr-85">群众</text>
                <input placeholder-style="color: rgba(0,0,0,0.3);font-size:27rpx;" class="uni-input flex1"
                    maxlength="10" placeholder="请输入群众姓名" />
                <input v-model="name" placeholder-style="color: rgba(0,0,0,0.3);font-size:27rpx;"
                    class="uni-input flex1" placeholder="请输入群众姓名" />

            </view>
            <view class="card  flex a-center h-108 j-between">
                <text class="w-108 fs-27 font-bold mr-85">联系电话</text>
                <input placeholder-style="color: rgba(0,0,0,0.3);font-size:27rpx;" class="uni-input flex1"
                    maxlength="10" placeholder="请输入群众联系电话" />
                <input v-model="contactNumber" type="number" placeholder-style="color: rgba(0,0,0,0.3);font-size:27rpx;"
                    class="uni-input flex1" maxlength="11" placeholder="请输入群众联系电话" />

            </view>
            <view class="card  flex a-center h-108 j-between" @click="goTopage">
                <text class="w-108 fs-27 font-bold mr-85">地点</text>
                <input placeholder-style="color: rgba(0,0,0,0.3);font-size:27rpx;" class="uni-input flex1"
                    maxlength="10" placeholder="请选择问题发生具体地点" />
                <image src="/static/Appeal/left.png" class="w-19 h-19" mode=""></image>

                <view class=" flex a-center j-between flex1">
                    <input v-model="location" disabled placeholder-style="color: rgba(0,0,0,0.3);font-size:27rpx;"
                        class="uni-input flex1" placeholder="请选择问题发生具体地点" />
                    <image src="/static/Appeal/left.png" class="w-19 h-19" mode=""></image>
                </view>
            </view>
            <view class="card  flex a-center h-108 j-between">
                <text class="w-108 fs-27 font-bold mr-85">详细地址</text>
                <input placeholder-style="color: rgba(0,0,0,0.3);font-size:27rpx;" class="uni-input flex1"
                    maxlength="10" placeholder="请输入详细地址描述" />
                <input v-model="detailedAddress" placeholder-style="color: rgba(0,0,0,0.3);font-size:27rpx;"
                    class="uni-input flex1" placeholder="请输入详细地址描述" />
            </view>
            <view class="mt-35">
                <text class="w-108 fs-27 font-bold mr-85">问题描述</text>
                <view class="bg mt-27 fs-27">
                    <view class="h-94 " style="border-bottom: 2rpx solid rgba(0, 10, 26, 0.07);">
                        <input placeholder-style="color: rgba(0,0,0,0.3);font-size:27rpx;" class="h-94 pl-31 flex1"
                            placeholder="请输入问题标题" />
                        <input v-model="descriptionTitle" placeholder-style="color: rgba(0,0,0,0.3);font-size:27rpx;"
                            class="h-94 pl-31 flex1" placeholder="请输入问题标题" />
                    </view>
                    <textarea name="" id="" cols="30" placeholder="请输入问题描述内容"
                    <textarea name="" v-model="descriptionContent" id="" cols="30" placeholder="请输入问题描述内容"
                        placeholder-style="color: rgba(0, 0, 0, 0.30);font-size:27rpx;" rows="10"></textarea>
                </view>
            </view>
            <view class="mt-35">
                <text class="w-108 fs-27 font-bold mr-85">图片</text>
                <view class="mt-27 flex a-center">
                    <view class="img mr-15">
                        <image src="/static/logo.png" class="w-140 h-140" mode=""></image>
                    <view class="img mr-15" v-for="item,index in images" :key="index">
                        <image :src="item" class="w-140 h-140" mode=""></image>
                        <view class="img-icon">
                            <image class="w-19 h-19" src="/static/Appeal/amplify.png" mode=""></image>
                            <image class="w-19 h-19 ml-35" src="/static/Appeal/trash.png" mode=""></image>
                            <image class="w-19 h-19" @click="previewImage(index)" src="/static/Appeal/amplify.png"
                                mode=""></image>
                            <image class="w-19 h-19 ml-35" @click="deletimg(item)" src="/static/Appeal/trash.png" mode="">
                            </image>
                        </view>
                    </view>
                    <image src="/static/Appeal/add.png" class="w-140 h-140" mode=""></image>
                    <image src="/static/Appeal/add.png" class="w-140 h-140" mode="" @click="uploadImg"></image>
                </view>
            </view>
            <view class="mt-35">
                <text class="w-108 fs-27 font-bold mr-85">视频</text>
                <view class="mt-27 flex a-center">
                    <view class="img mr-15">
                        <image src="/static/logo.png" class="w-140 h-140" mode=""></image>
                    <view class="img mr-15" v-for="item,index in videos" :key="index">
                        <video :controls="false" :show-center-play-btn="false" :src="item" class="w-140 h-140" mode=""></video>
                        <view class="img-icon">
                            <image class="w-19 h-19" src="/static/Appeal/amplify.png" mode=""></image>
                            <image class="w-19 h-19 ml-35" src="/static/Appeal/trash.png" mode=""></image>
                            <image class="w-19 h-19" @click="gotoPage(item)"  src="/static/Appeal/amplify.png" mode=""></image>
                            <image class="w-19 h-19 ml-35" @click="deletvideo(item)" src="/static/Appeal/trash.png" mode=""></image>
                        </view>
                    </view>
                    <image src="/static/Appeal/add.png" class="w-140 h-140" mode=""></image>
                    <image src="/static/Appeal/add.png" class="w-140 h-140" mode="" @click="uploadVideo"></image>
                </view>
            </view>
        </view>
        <view class="btn">
        <view class="btn" @click="submit">
            保存
        </view>
        <u-datetime-picker :show="showDate" v-model="value1" mode="date"></u-datetime-picker>
        <u-picker :show="showList" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker>
        <u-datetime-picker :show="showDate" v-model="value1" mode="date" :closeOnClickOverlay="true"
            @confirm="confirmone" @close="close" @cancel="cancel"></u-datetime-picker>
        <u-picker :show="showList" :columns="columns" @confirm="confirmtwo" :closeOnClickOverlay="true" @close="close"
            @cancel="cancel"></u-picker>
    </view>
</template>

<script>
    import dayjs from '@/uni_modules/uview-ui/libs/util/dayjs.js';
    import {
        save,
        getproblem
    } from './service.js'

    export default {
        data() {
            return {
                showList: false,
                showDate: false,
                value1: Number(new Date()),
                columns: [['医疗','教育','就业','住房','养老']],
                columns: [
                    ['医疗', '教育', '就业', '住房', '养老']
                ],
                time: '',
                problemType: '',
                name: '',
                contactNumber: '',
                location: '',
                detailedAddress: '',
                descriptionTitle: '',
                descriptionContent: '',
                images: [],
                videos: [],
            };
        },
        methods:{
            confirm(e){
                console.log(e,'eeee');
        onLoad() {
            this.getproblem()
        },
        methods: {
            previewImage(index) {
                uni.previewImage({
                    urls: this.images,
                    current: this.images[index],
                    longPressActions: {
                        itemList: ['发送给朋友', '保存图片', '收藏'],
                        success: function(data) {
                            console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
                        },
                        fail: function(err) {
                            console.log(err.errMsg);
                        }
                    }
                });
            },
            cancel(e){
                console.log(e,'eeee');
            deletimg(e) {
                this.images = this.images.filter(item => item != e)

            },
            goTopage(){
            deletvideo(e){
                this.videos = this.videos.filter(item => item != e)
            },
            gotoPage(e){
                uni.navigateTo({
                    url:'/pages/location/location'
                    url:`/pages/work-detail/maxVideo?url=${e}`
                })
            }
            },
            getproblem() {
                getproblem().then((resp => {
                    console.log(resp, '问题类型')
                }))
            },
            submit() {
                const preciseRegex = '/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/';
                if(!this.time){
                    uni.showToast({
                        title:'请选择时间',
                        icon:'none'
                    })
					
                }else if(!this.problemType){
                    uni.showToast({
                        title:'请选择问题类型',
                        icon:'none'
                    })
                }else if(!this.name){
                    uni.showToast({
                        title:'请输入群众姓名',
                        icon:'none'
                    })
                }else if(!this.contactNumber){
                    uni.showToast({
                        title:'请输入联系电话',
                        icon:'none'
                    })
                }else if(!preciseRegex.test(phoneNumber)){
                    uni.showToast({
                        title:'请输入正确的手机号',
                        icon:'none'
                    })
                }else if(!this.location){
                    uni.showToast({
                        title:'请选择地点',
                        icon:'none'
                    })
                }else if(!this.detailedAddress){
                    uni.showToast({
                        title:'请输入详细地址',
                        icon:'none'
                    })
                }else if(!this.descriptionTitle){
                    uni.showToast({
                        title:'请输入问题标题',
                        icon:'none'
                    })
                }else if(!this.descriptionContent){
                    uni.showToast({
                        title:'请输入问题描述',
                        icon:'none'
                    })
                }else if(this.images==0){
                    uni.showToast({
                        title:'请上传图片',
                        icon:'none'
                    })
                }else if(this.videos==0){
                    uni.showToast({
                        title:'请上传视频',
                        icon:'none'
                    })
                }
                const data = {
                    time: this.time,
                    problemType: this.problemType,
                    name: this.name,
                    contactNumber: this.contactNumber,
                    location: this.location,
                    detailedAddress: this.detailedAddress,
                    descriptionTitle: this.descriptionTitle,
                    descriptionContent: this.descriptionContent,
                    images: this.images.join(','),
                    videos: this.videos.join(','),
                }
                save().then(resp => {
                    console.log(resp, '保存');
                    if(resp.code==200){
                        uni.showToast({
                            title:'保存成功',
                            icon:'none'
                        })
                    }
                })
            },
            confirmone(e) {
                console.log(e, 'eeee');
                this.time = dayjs(e.value).format('YYYY-MM-DD')
                this.showDate = false
            },
            confirmtwo(e) {
                console.log(e, 'eeee');
                this.problemType = e.value[0]
                this.showList = false
            },
            cancel() {
                this.showDate = false
                this.showList = false
            },
            close(e) {
                this.showDate = false
                this.showList = false
            },
            goTopage() {
                uni.navigateTo({
                    url: '/pages/location/location'
                })
            },
            uploadImg() {
                uni.chooseImage({
                    count: 1, //默认9
                    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album'], //从相册选择
                    success: (res) => {
                        console.log(res, 'res');
                        uni.showLoading()
                        uni.uploadFile({
                            url: 'https://huacheng.psciio.com/api/huacheng-communitybackstage/communitypartybuilding/uploadimage',
                            filePath: res.tempFilePaths[0],
                            name: 'file',
                            header: {
                                'Authorization': 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOjE2NzYwOTg3NzQ0OTk0NjMxNjgsInR5cGUiOjMsImV4cCI6MTc0MTY4NjQ0OSwiY3JlYXRlZCI6MTc0MDM5MDQ0OTYxN30.UpanrjmCLuKlxm32IbBldBOSJJNYL8ZDrbZQM9z_HCW8X9cL8Ox8jwgX0j4_2nq3ALjYD7aPQWbVmMb2vHIIdA'
                            },
                            success: (uploadFileRes) => {
                                console.log(JSON.parse(uploadFileRes.data), 'uploadFileRes');
                                this.images = [...this.images, JSON.parse(uploadFileRes.data).data]
                                uni.hideLoading()
                            },
                            fail: () => {
                                uni.hideLoading()
                                uni.showToast({
                                    title: '上传失败',
                                    icon: 'error'
                                })
                            }
                        })
                    }
                });
            },
            uploadVideo() {
                uni.chooseVideo({
                    count: 1, //默认9
                    sourceType: ['camera', 'album'],
                    success: (res) => {
                        console.log(res, 'res');
                        uni.showLoading()
                        uni.uploadFile({
                            url: 'https://huacheng.psciio.com/api/huacheng-communitybackstage/communitypartybuilding/uploadimage',
                            filePath: res.tempFilePath,
                            name: 'file',
                            header: {
                                'Authorization': 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOjE2NzYwOTg3NzQ0OTk0NjMxNjgsInR5cGUiOjMsImV4cCI6MTc0MTY4NjQ0OSwiY3JlYXRlZCI6MTc0MDM5MDQ0OTYxN30.UpanrjmCLuKlxm32IbBldBOSJJNYL8ZDrbZQM9z_HCW8X9cL8Ox8jwgX0j4_2nq3ALjYD7aPQWbVmMb2vHIIdA'
                            },
                            success: (uploadFileRes) => {
                                console.log(JSON.parse(uploadFileRes.data).data, 'uploadFileRes');
                                this.videos = [...this.videos, JSON.parse(uploadFileRes.data).data]
                                uni.hideLoading()
                            },
                            fail: () => {
                                uni.hideLoading()
                                uni.showToast({
                                    title: '上传失败',
                                    icon: 'error'
                                })
                            }
                        })
                    }
                });
            },
        }
    }
</script>

 H5/pages/Appeal/service.js

New file
@@ -0,0 +1,9 @@
import request from '@/utils/request.js'


export const save =(params)=>{
    return request.post(`/api/huacheng-sangeshenbian/applet/complaint/save`,params)
} 
export const getproblem =(params)=>{
    return request.get(`/api/huacheng-sangeshenbian/applet/complaint/problem-type/list`,params)
} 

 H5/pages/index/index.vue

@@ -9,15 +9,10 @@
                    <image class="h-32" src="/static/home/img5.png" mode=""></image>
                </view>
                <swiper class="swiper " :indicator-dots="false" :autoplay="true" :interval="3000">
                    <swiper-item>
                        <image style="height: 270rpx;width: 688rpx;" src="/static/home/img2.png" mode=""></image>
                    <swiper-item v-for="item,index in bannerlist" :key="index">
                        <image style="height: 270rpx;width: 688rpx;border-radius: 19rpx;" :src="item.url" mode=""></image>
                    </swiper-item>
                    <swiper-item>
                        <image style="height: 270rpx;width: 688rpx;" src="/static/home/img2.png" mode=""></image>
                    </swiper-item>
                    <swiper-item>
                        <image style="height: 270rpx;width: 688rpx;" src="/static/home/img2.png" mode=""></image>
                    </swiper-item>
	
                </swiper>
            </view>
        </view>
@@ -54,37 +49,37 @@
            </view>
            <view class=" mt-15">
                <view class="flex a-center">
                    <view class="msg mr-19" @click="isactive=1" :class="isactive==1? 'active':''">
                    <view class="msg mr-19" @click="changeActive(1)" :class="isactive==1? 'active':''">
                        消息
                        <view class="tips">
                            6
                            {{msgList.length}}
                        </view>
                    </view>
                    <view class="representative" @click="isactive=2" :class="isactive==2? 'active':''">
                    <view class="representative" @click="changeActive(2)" :class="isactive==2? 'active':''">
                        待办
                        <view class="tips">
                            6
                            {{msgList.length}}
                        </view>
                    </view>
                </view>
                <view class="list mt-29">
                    <view class="flex a-center mb-27" v-for="item in 5">
                    <view class="flex a-center mb-27" v-for="item in msgList" :key="item.id">
                        <view class="avater pb-33">
                            <image class="w-85 h-85 br50" src="/static/home/img9.png" mode=""></image>
                            <view class="tips">

                            </view>
                        </view>
                        <view class="border-b flex1 ml-18 pb-33">
                        <view class="border-b flex1 ml-18 pb-33" >
                            <view class="fs-31  font-w500 flex  flex1 j-between">
                                <text>钟山淑</text>
                                <text class="fs-23 font-w400">16分钟前</text>
                                <text>{{item.title}}</text>
                                <text class="fs-23 font-w400">{{item.responseTime}}分钟前</text>

                            </view>
                            <view class="fs-27 flex j-between mt-8">
                                <text>向你发来10份报告</text>
                                <view class="read">已读</view>
                                <view class="noread">未读</view>
                                <text>{{item.title}}</text>
                                <view class="read" v-if="item.readStatus==1">已读</view>
                                <view class="noread" v-else>未读</view>

                            </view>
                        </view>
@@ -116,6 +111,9 @@
                showData: false,
                isClick: false,
                pageNum:1,
                bannerlist:[],
                msgList:[],
                msgListTotal:[],
            }
        },
        onLoad() {
@@ -126,6 +124,7 @@
            getBanner() {
                getBanner().then(resp => {
                    console.log(resp, '获取banner');
                    this.bannerlist =resp.data
                })
            },
            getMessagelist() {
@@ -135,7 +134,13 @@
                }
                getMessagelist(data).then(resp => {
                    console.log(resp, '获取消息列表');
                    this.msgListTotal=resp.data.records
                    this.msgList =resp.data.records.filter(item=> item.promptType==2)
                })
            },
            changeActive(value){
                this.isactive =value
                this.msgList =this.msgListTotal.filter(item=> item.promptType==1)
            },
            change() {
                console.log('1111');
@@ -281,6 +286,9 @@
        border-radius: 19rpx;

    }
    // swiper-item{
    //     border-radius: 19rpx;
    // }

    .msg {
        width: 173rpx;

 H5/pages/location/location.vue

@@ -1,29 +1,31 @@
<template>
    <view class="content">
        <u-navbar title="选择地点" bgColor="transparent" titleStyle="font-size: 35rpx;font-weight:bold;" placeholder>
            <view slot="left">
            <view slot="left" @click="back">
                <image src="/static/location/back.png" class="w-19 h-35" mode=""></image>
            </view>
        </u-navbar>
        <view class="" id="container">
			
        <view class="" id="container" @regionchange="onRegionChange">

        </view>
        <view class="">
            <view class="searchMain mb-35">
        <view class=" main">
            <view class="searchMain  mb-35 mt-38">
                <view class="search fs-27 ">
                    <text class="mr-35 ml-50">成都市</text>
                    <image class="w-17 h-8 mr-35" src="/static/location/toleft.png" mode=""></image>
                    <image class="w-31 h-31 mr-13" src="/static/location/search.png" mode=""></image>
                    <input class="flex1" placeholder="搜索小区/写字楼等" placeholder-style="font-size:27rpx"></input>
                    <view class="sure">
                    <input class="flex1" v-model="keyword" placeholder="搜索小区/写字楼等"
                        placeholder-style="font-size:27rpx"></input>
                    <view class="sure" @click="searchLocation">
                        确定
                    </view>
                </view>

            </view>
            <view class="card" :class="" v-for="item in 5">
                <text>天府新谷九号楼二单元</text>
                <text class="font-w500 fs-23 mt-25" style="color: rgba(0, 0, 0, 0.6);">四川省成都市高新区府城大道西段399号天</text>
            <view class="card" @click="changeAdr(item.id,item)" :class="item.id ==uid ?'activecard':''"
                v-for="item in locationList" :key="item.id">
                <text>{{item.address}}</text>
                <text class="font-w500 fs-23 mt-25" style="color: rgba(0, 0, 0, 0.6);">{{item.address}}</text>

            </view>
        </view>
@@ -37,30 +39,121 @@
            return {
                latitude: 39.909,
                longitude: 116.39742,
                map: null,
                uid: 0,
                keyword: '',
                locationList: [],
            };
        },
        mounted() {
			
        methods: {
            back() {
                uni.navigateBack()
            },
            onRegionChange(e) {
                if (e.type === 'end') {
                    // 地图移动结束时执行操作
                    console.log('地图移动结束，新的中心点经度:', e.longitude, '新的中心点纬度:', e.latitude);
                }
            },
            changeAdr(value, addr) {
                console.log(value, addr, 'asdasdada');
                this.uid = value
                const pages = getCurrentPages()
                let prevPage = pages[pages.length - 2];
                prevPage.location = addr.address
                setTimeout(() => {
                    uni.navigateBack()
                }, 500)
            },
            // 搜索地点
            searchLocation() {
                if (!this.keyword) return;
                uni.request({
                    url: `https://api.map.baidu.com/place/v2/search`,
                    method: 'GET',
                    data: {
                        query: this.keyword,
                        location: `${30.39},${104.04}`,
                        radius: 10000, // 搜索半径，单位：米
                        output: 'json',
                        ak: '3mHKIXMArjgIkgADzOlTYp4XssNSNkwr' // 替换为你自己的 AK
                    },
                    success: (res) => {
                        console.log(res, '-------');
                        if (res.data.status === 0) {
                            this.searchResults = res.data.results;
                            this.latitude = res.data.results[0].location.lat
                            this.longitude = res.data.results[0].location.lng
                            this.locationList = res.data.results.map((result, index) => {

                                result.id = index + 1

                                return result
                            });
                        }
                    },
                    fail: (err) => {
                        console.error('搜索失败:', err);
                    }
                });
            },
        },
         onReady() {
             var map = new BMapGL.Map("container");          // 创建地图实例 
             var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标 
             map.centerAndZoom(point, 15);   
         }
        onLoad() {

        },
        onReady() {
            this.map = new BMapGL.Map("container"); // 创建地图实例 
		
            uni.getLocation({
                type: 'wgs84',
                success: (res) => {
                    console.log(res, 'res');
                    this.longitude = res.longitude;
                    this.latitude = res.latitude;
                    var point = new BMapGL.Point(res.longitude, res.latitude); // 创建点坐标
                    this.map.centerAndZoom(point, 12);
                    var myGeo = new BMapGL.Geocoder();
                    // 根据坐标得到地址描述    
                    myGeo.getLocation(new BMapGL.Point(res.longitude, res.latitude), (result) => {
                        console.log(result, 'result');
                        this.locationList = result.surroundingPois.map((item, index) => {
                            item.id = index + 1
                            return item
                        })

                    })
                }
            });
        }
    }
</script>

<style lang="scss" scoped>
    #container {
        width: 100vw;
        height: 517rpx;
        height: 534rpx;
    }

    .content {
        display: flex;
        flex-direction: column;
        align-items: center;

        .main {
            background-color: #fff;
            border-radius: 34rpx;
            position: absolute;
            top: 517rpx;
            z-index: 100;

            .activecard {
                background: #F2F2F2;
            }

        }

    }


    .searchMain {
        padding-left: 40rpx;
@@ -101,7 +194,7 @@
        font-size: 31rpx;
        color: rgba(0, 0, 0, 0.8);
        padding: 34rpx 38rpx 33rpx 38rpx;
        background: #F2F2F2;
        background: #fff;
        border-bottom: 2rpx solid rgba(0, 10, 26, 0.07);
    }
</style>