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
10 KiB
372 lines
10 KiB
<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"> |
|
@import './components/detail.scss'; |
|
</style> |