officialAccount/pages/addjigou/where.vue

276 lines
5.6 KiB
Vue

<template>
<div class="container">
<u-modal v-model="show" :content="content"></u-modal>
<view class="white-content">
<view class="white-message">
<view>
<view class="one">
<view class="one-left">机构位置</view>
<view style="display: flex;align-items: center;">
<view class="one-right">请选择机构位置</view>
<image class="one-img" src="@/static/index/norelmap.png" @click="jumpToMap" />
</view>
</view>
</view>
<view>
<view class="one">
<view class="one-left">机构负责人</view>
<input class="one-right" type="text" placeholder="请输入机构负责人姓名" v-model="form.orgLeader" />
</view>
</view>
<view>
<view class="one">
<view class="one-left">机构负责人电话</view>
<input class="one-right" type="text" placeholder="请输入机构负责人电话" v-model="form.orgLeaderPhone" />
</view>
</view>
<view>
<view class="one">
<view class="one-left">楼宇牌号</view>
<input class="one-right" type="text" placeholder="请输入楼宇牌号" v-model="form.orgBuildingNumber" />
</view>
</view>
<view>
<view class="one">
<view class="one-left">房屋性质</view>
<input class="one-right" type="text" placeholder="请输入房屋性质" v-model="form.orgPropertyType" />
</view>
</view>
<view style="margin-bottom: 20rpx;">
<view class="one" style="position: relative;">
<view class="one-left">建筑面积</view>
<input class="one-right" type="number" placeholder="请输入建筑面积" v-model="form.orgBuildingArea" />
<view class="pingfangmi">
平方米
</view>
</view>
</view>
</view>
</view>
<view style="display: flex;width: 100%;">
<view class="finish-button" @click="goBack">
上一步
</view>
<view class="finish-button" @click="next">
确认并提交
</view>
</view>
</div>
</template>
<script setup>
import {
ref,
reactive
} from 'vue'
import {
onLoad
} from '@dcloudio/uni-app';
import {
base_url
} from '@/request/index.js'
const show = ref(false);
const content = ref("");
const form = reactive({
orgLeader:"",
orgLeaderPhone:"",
orgBuildingNumber:"",
orgPropertyType:"",
orgBuildingArea:""
})
// 本地保存的临时文件路径
const tempImagePath = ref('')
const headImge = ref("");
const backImge = ref("");
const openLook = (res) => {
if (res) {
content.value = res;
show.value = true
}
}
const next = () => {
// uni.navigateTo({
// url: "/pages/addjigou/where"
// });
}
const goBack = () => {
uni.navigateBack()
}
const jumpToMap = () => {
uni.navigateTo({
url: "/pages/map/index"
});
}
</script>
<style lang="scss" scoped>
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
background-color: rgb(239, 241, 252);
position: relative;
box-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
.white-content {
width: 90%;
margin-left: 5%;
margin-top: 30rpx;
// height: 1200rpx;
border-radius: 35rpx;
background-color: rgb(245, 251, 254);
.content-title {
display: flex;
// align-items: center;
height: 100rpx;
position: relative;
.content-weight {
// font-size: 35rpx;
font-weight: 600;
margin-left: 40rpx;
margin-top: 20rpx;
}
.content-img {
position: absolute;
right: 0;
top: 0;
width: 400rpx;
height: 100%;
}
}
}
.white-photo {
width: 90%;
margin-left: 5%;
// margin-top: 30rpx;
height: 300rpx;
border-radius: 35rpx;
background-color: #fff;
box-shadow: 4rpx 4rpx 8rpx rgba(0, 0, 0, 0.1);
justify-content: space-around;
align-items: center;
display: flex;
.photo {
width: 300rpx;
height: 200rpx;
}
}
.white-message {
width: 90%;
margin-left: 5%;
margin-top: 30rpx;
margin-bottom: 30rpx;
// height: 800rpx;
border-radius: 35rpx;
background-color: #fff;
box-shadow: 4rpx 4rpx 8rpx rgba(0, 0, 0, 0.1);
justify-content: space-around;
// align-items: center;
display: flex;
flex-direction: column;
.message-title {
width: 100%;
height: 100rpx;
align-items: center;
display: flex;
.shu {
width: 10rpx;
height: 30rpx;
background-color: #0097FF;
border-radius: 10rpx;
margin: 0 20rpx 0 30rpx;
}
.message-weight {
font-size: 30rpx;
// font-weight: 600;
}
}
.one {
width: 90%;
margin-left: 5%;
border-bottom: 1rpx solid #d7d7d7;
height: 90rpx;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10rpx;
.one-left {
margin-left: 10rpx;
}
.one-right {
// margin-right: 10rpx;
color: #999999;
overflow: hidden;
/* 隐藏超出内容 */
white-space: nowrap;
/* 不换行 */
font-size: 25rpx;
text-overflow: ellipsis;
max-width: 300rpx;
display: flex;
justify-content: flex-end;
}
}
}
}
.photo-left {
.photo-weight {
font-size: 26rpx;
font-weight: 600;
}
.photo-font {
font-size: 23rpx;
margin-top: 10rpx;
}
}
.finish-button {
display: flex;
justify-content: center;
align-items: center;
width: 45%;
height: 100rpx;
margin: 0rpx auto;
margin-bottom: 80rpx;
color: #fff;
background: linear-gradient(to right, #00C9FF, #0076FF);
border-radius: 50rpx;
font-size: 35rpx;
}
.one-img{
width: 60rpx;
height: 50rpx;
margin-right: 10rpx;
margin-left: 35rpx;
}
.pingfangmi{
position: absolute;
top: 50%;
right: 5rpx;
transform: translateY(-50%);
}
</style>