You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
372 lines
0 B
372 lines
0 B
1 year ago
|
<template>
|
||
|
|
<view class="body-background"></view>
|
||
|
|
<u-navbar
|
||
|
|
:title="title"
|
||
|
|
:auto-back="true"
|
||
|
|
left-icon-size="40rpx"
|
||
|
|
:safe-area-inset-top="true"
|
||
|
|
:placeholder="true"
|
||
|
|
bgColor="#ffffff"
|
||
|
|
></u-navbar>
|
||
|
|
<u-row :custom-style="{padding:'16rpx 26rpx 180rpx'}">
|
||
|
|
<u-col :span="12" :custom-style="{
|
||
|
|
backgroundColor:'#FFFFFF',
|
||
|
|
borderRadius:'20rpx',
|
||
|
|
padding:'40rpx 32rpx',
|
||
|
|
minHeight:'1000rpx',
|
||
|
|
position:'relative'
|
||
|
|
}">
|
||
|
|
<u-form
|
||
|
|
labelWidth="auto"
|
||
|
|
labelPosition="left"
|
||
|
|
:model="model1"
|
||
|
|
:rules="rules"
|
||
|
|
ref="form1"
|
||
|
|
>
|
||
|
|
<view class="form-title">
|
||
|
|
租房详情
|
||
|
|
</view>
|
||
|
|
<u-form-item
|
||
|
|
label="承租人"
|
||
|
|
prop="userInfo.sex"
|
||
|
|
borderBottom
|
||
|
|
ref="item1"
|
||
|
|
:custom-style="{padding:'34rpx 0',fontSize:'32rpx',color:'#020b18',fontWeight:'400',lineHeight:'50rpx'}"
|
||
|
|
>
|
||
|
|
<u-input
|
||
|
|
inputAlign="right"
|
||
|
|
disabledColor="#ffffff"
|
||
|
|
placeholder="请填写手机号，以便我们联系您"
|
||
|
|
border="none"
|
||
|
|
:custom-style="{paddingRight:'28rpx'}"
|
||
|
|
></u-input>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item
|
||
|
|
label="身份证号"
|
||
|
|
prop="userInfo.sex"
|
||
|
|
borderBottom
|
||
|
|
ref="item1"
|
||
|
|
:custom-style="{padding:'34rpx 0',fontSize:'32rpx',color:'#020b18',fontWeight:'400',lineHeight:'50rpx'}"
|
||
|
|
>
|
||
|
|
<u-input
|
||
|
|
inputAlign="right"
|
||
|
|
disabledColor="#ffffff"
|
||
|
|
placeholder="请填写手机号，以便我们联系您"
|
||
|
|
border="none"
|
||
|
|
:custom-style="{paddingRight:'28rpx'}"
|
||
|
|
></u-input>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item
|
||
|
|
label="联系方式"
|
||
|
|
prop="userInfo.sex"
|
||
|
|
borderBottom
|
||
|
|
ref="item1"
|
||
|
|
:custom-style="{padding:'34rpx 0',fontSize:'32rpx',color:'#020b18',fontWeight:'400',lineHeight:'50rpx'}"
|
||
|
|
>
|
||
|
|
<u-input
|
||
|
|
inputAlign="right"
|
||
|
|
disabledColor="#ffffff"
|
||
|
|
placeholder="请填写手机号，以便我们联系您"
|
||
|
|
border="none"
|
||
|
|
:custom-style="{paddingRight:'28rpx'}"
|
||
|
|
></u-input>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item
|
||
|
|
label="租期"
|
||
|
|
prop="userInfo.sex"
|
||
|
|
borderBottom
|
||
|
|
ref="item1"
|
||
|
|
:custom-style="{padding:'34rpx 0',fontSize:'32rpx',color:'#020b18',fontWeight:'400',lineHeight:'50rpx'}"
|
||
|
|
>
|
||
|
|
<u-input
|
||
|
|
inputAlign="right"
|
||
|
|
disabledColor="#ffffff"
|
||
|
|
placeholder="请填写手机号，以便我们联系您"
|
||
|
|
border="none"
|
||
|
|
:custom-style="{paddingRight:'28rpx'}"
|
||
|
|
></u-input>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item
|
||
|
|
label="租金"
|
||
|
|
prop="userInfo.sex"
|
||
|
|
borderBottom
|
||
|
|
ref="item1"
|
||
|
|
:custom-style="{padding:'34rpx 0',fontSize:'32rpx',color:'#020b18',fontWeight:'400',lineHeight:'50rpx'}"
|
||
|
|
>
|
||
|
|
<u-input
|
||
|
|
inputAlign="right"
|
||
|
|
disabledColor="#ffffff"
|
||
|
|
placeholder="请填写手机号，以便我们联系您"
|
||
|
|
border="none"
|
||
|
|
:custom-style="{paddingRight:'28rpx'}"
|
||
|
|
></u-input>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item
|
||
|
|
prop="userInfo.sex"
|
||
|
|
ref="item1"
|
||
|
|
:custom-style="{padding:'0 0',fontSize:'32rpx',color:'#020b18',fontWeight:'400',lineHeight:'50rpx'}"
|
||
|
|
>
|
||
|
|
<view class="form-label">
|
||
|
|
打款凭证
|
||
|
|
</view>
|
||
|
|
<u-upload
|
||
|
|
width="160"
|
||
|
|
height="160"
|
||
|
|
:fileList="fileList1"
|
||
|
|
name="1"
|
||
|
|
multiple
|
||
|
|
:maxCount="10"
|
||
|
|
uploadIcon="plus"
|
||
|
|
></u-upload>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item
|
||
|
|
prop="userInfo.sex"
|
||
|
|
ref="item1"
|
||
|
|
:custom-style="{padding:'0 0',fontSize:'32rpx',color:'#020b18',fontWeight:'400',lineHeight:'50rpx'}"
|
||
|
|
>
|
||
|
|
<view class="form-label no-top-pad">
|
||
|
|
租赁协议
|
||
|
|
</view>
|
||
|
|
<view class="row">
|
||
|
|
<view class="">
|
||
|
|
<u-upload
|
||
|
|
width="160"
|
||
|
|
height="160"
|
||
|
|
:fileList="fileList1"
|
||
|
|
name="1"
|
||
|
|
multiple
|
||
|
|
:maxCount="10"
|
||
|
|
uploadIcon="plus"
|
||
|
|
|
||
|
|
></u-upload>
|
||
|
|
</view>
|
||
|
|
<view class="">
|
||
|
|
<u-upload
|
||
|
|
width="160"
|
||
|
|
height="160"
|
||
|
|
:fileList="fileList1"
|
||
|
|
name="1"
|
||
|
|
multiple
|
||
|
|
:maxCount="10"
|
||
|
|
uploadIcon="plus"
|
||
|
|
></u-upload>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</u-form-item>
|
||
|
|
</u-form>
|
||
|
|
<view class="form-title m-t-46">
|
||
|
|
兑换详情
|
||
|
|
</view>
|
||
|
|
<view class="detail-container">
|
||
|
|
<view class="detail-item">
|
||
|
|
<u-cell-group
|
||
|
|
:border="false"
|
||
|
|
>
|
||
|
|
<u-cell
|
||
|
|
custom-style="padding:0;" v-for="i of 4">
|
||
|
|
<template #title>
|
||
|
|
<view class="item-title">
|
||
|
|
{{i}}月房租
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<template #label>
|
||
|
|
<view class="item-label">
|
||
|
|
2023-06-26
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<template #value>
|
||
|
|
<view class="item-value">
|
||
|
|
兑换 <text class="item-value-price">168</text> 暖新币
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
</u-cell>
|
||
|
|
</u-cell-group>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</u-col>
|
||
|
|
</u-row>
|
||
|
|
<view class="foot-button border-box">
|
||
|
|
<u-button
|
||
|
|
type="primary"
|
||
|
|
text="我要兑换"
|
||
|
|
shape="circle"
|
||
|
|
:custom-style="{
|
||
|
|
color:'#020B18',
|
||
|
|
backgroundColor:'#FF9545',
|
||
|
|
border:'none',
|
||
|
|
fontSize:'36',
|
||
|
|
fontWeight:'400',
|
||
|
|
height:'80rpx'
|
||
|
|
}"
|
||
|
|
></u-button>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
imghost
|
||
|
|
} from '@/config/host.js'
|
||
|
|
import MzSubsection from '@/components/MzSubsection/Index.vue';
|
||
|
|
import api from '@/utils/functions.js';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
MzSubsection
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
model1: {
|
||
|
|
userInfo: {
|
||
|
|
name: '',
|
||
|
|
sex: 1,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
rules: {
|
||
|
|
'userInfo.name': {
|
||
|
|
type: 'string',
|
||
|
|
required: true,
|
||
|
|
message: '请填写姓名',
|
||
|
|
trigger: ['blur', 'change']
|
||
|
|
},
|
||
|
|
'userInfo.sex': {
|
||
|
|
type: 'string',
|
||
|
|
max: 1,
|
||
|
|
required: true,
|
||
|
|
message: '请选择男或女',
|
||
|
|
trigger: ['blur', 'change']
|
||
|
|
},
|
||
|
|
},
|
||
|
|
sexList:[
|
||
|
|
{
|
||
|
|
id:1,
|
||
|
|
name: '男',
|
||
|
|
disabled: false,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
i:2,
|
||
|
|
name: '女',
|
||
|
|
disabled: false,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
list: [{
|
||
|
|
name: '最新资讯'
|
||
|
|
}, {
|
||
|
|
name: '表彰评优'
|
||
|
|
}, {
|
||
|
|
name: '活动回顾'
|
||
|
|
}],
|
||
|
|
// 或者如下，也可以配置keyName参数修改对象键名
|
||
|
|
// list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
|
||
|
|
current: 1,
|
||
|
|
title: '租房详情',
|
||
|
|
loading: true,
|
||
|
|
staticImage: {
|
||
|
|
bg: imghost + '/static/image/BG.png',
|
||
|
|
newIcon: imghost + '/static/image/new-icon.png',
|
||
|
|
},
|
||
|
|
user: {
|
||
|
|
avatar: imghost + '/static/image/banner.png',
|
||
|
|
nickname: '清晨的风',
|
||
|
|
coupons: 221,
|
||
|
|
id: 88685,
|
||
|
|
},
|
||
|
|
isTop: false,
|
||
|
|
lists: [
|
||
|
|
{
|
||
|
|
id: 1,
|
||
|
|
thumb: imghost + '/static/image/new-1.png',
|
||
|
|
title: '全市公安机关夏季治安打击整治“彭安行动”新闻发布会召开',
|
||
|
|
desc: '需要您带一点猫砂上门，谢谢',
|
||
|
|
time: '2023/06/16',
|
||
|
|
is_new: true
|
||
|
|
}, {
|
||
|
|
id: 2,
|
||
|
|
thumb: imghost + '/static/image/new-2.png',
|
||
|
|
title: '全市公安机关夏季治安打击整治“彭安行动”新闻发布会召开',
|
||
|
|
desc: '需要您带一点猫砂上门，谢谢',
|
||
|
|
time: '2023/06/16',
|
||
|
|
is_new: true
|
||
|
|
}, {
|
||
|
|
id: 3,
|
||
|
|
thumb: imghost + '/static/image/new-3.png',
|
||
|
|
title: '全市公安机关夏季治安打击整治“彭安行动”111开',
|
||
|
|
desc: '需要您带一点猫砂上门，谢谢',
|
||
|
|
time: '2023/06/16',
|
||
|
|
is_new: false
|
||
|
|
},
|
||
|
|
],
|
||
|
|
size: {
|
||
|
|
height: 500,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
|
||
|
|
},
|
||
|
|
onReady() {
|
||
|
|
let that = this;
|
||
|
|
let height = api.wxSystemInfo().system.windowHeight
|
||
|
|
let headerHeight = uni.$u.getPx(44) + uni.$u.sys().statusBarHeight
|
||
|
|
|
||
|
|
let info = uni.createSelectorQuery().in(this).select('.foot-button');
|
||
|
|
info.boundingClientRect(function (data) {
|
||
|
|
that.size.height = that.size.height = height - headerHeight - data.height - uni.$u.getPx('32rpx');
|
||
|
|
}).exec(function (res) {
|
||
|
|
|
||
|
|
});
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
api() {
|
||
|
|
return api
|
||
|
|
},
|
||
|
|
sectionStyle() {
|
||
|
|
const style = {};
|
||
|
|
style.padding = '0 26rpx';
|
||
|
|
style.position = 'sticky';
|
||
|
|
style.zIndex = '9999';
|
||
|
|
style.top = api.navHeight().systemBarHeight + 'px'
|
||
|
|
return style;
|
||
|
|
},
|
||
|
|
listHeight() {
|
||
|
|
let that = this;
|
||
|
|
let height;
|
||
|
|
let info = uni.createSelectorQuery().in(this).select('.subsection');
|
||
|
|
info.boundingClientRect(function (data) {
|
||
|
|
that.size.height = data.height;
|
||
|
|
}).exec(function (res) {
|
||
|
|
|
||
|
|
});
|
||
|
|
// that.size.height = (api.navHeight().windowHeight - height);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
chatDetail(item) {
|
||
|
|
wx.navigateTo({
|
||
|
|
url: '/pages/ChatDetail/index?id=' + item.id
|
||
|
|
});
|
||
|
|
},
|
||
|
|
checkSection(index) {
|
||
|
|
this.current = edit;
|
||
|
|
},
|
||
|
|
scrollToLower() {
|
||
|
|
|
||
|
|
},
|
||
|
|
},
|
||
|
|
onPageScroll(res) {
|
||
|
|
if (res.scrollTop <= 20) {
|
||
|
|
uni.$emit('isTop', true);
|
||
|
|
} else {
|
||
|
|
uni.$emit('isTop', false);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.listHeight();
|
||
|
|
// this.pagePadding = (api.navHeight().navPaddingTop +
|
||
|
|
// api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
1 year ago
|
@import './components/detail.scss';
|
||
|
1 year ago
|
</style>
|