效果图
![](https://i-blog.csdnimg.cn/blog_migrate/d503711ba413da7a6de73e4b6443eae3.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4e775922cfca3e1e2a89335e1cafd54e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5b2ec92d98a75c93bdfd324619c55dd0.png)
源码:
Wxml
<!--pages/designerList/designerDetail.wxml-->
<view>
<view class='tc m_t20'>
<image src='{
{urlhttp + designerDetail.thumb}}' class='imglogo'></image>
<text class='font18 fontw7 block m_t5'>{
{designerDetail.name}}</text>
<text class='inline_block c_theme font12' style='background:#ffd3b0;padding:4rpx 16rpx;'>{
{designerDetail.honour}}</text>
<view class='font14'>
<view class='inline_block bd_all m_t10' style='border-color:#ff6000;padding:8rpx 30rpx;border-radius:70rpx;overflow:hidden'>
<text class='gray6'>设计费用:</text>
<text class='c_theme'>{
{designerDetail.attr_3}}</text>
</view>
</view>
</view>
<view class='p_all15'>
<view class='radius5' style='box-shadow:#ccc 0px 1px 5px;overflow:hidden'>
<text class='block white p_tb10 tc font15 bg_gray6'>简介</text>
<view class='font15 gray6 lineH_m p_all10'>
<text class='block' wx:if="{
{designerDetail.attr_2 !== ''}}">-作品:{
{designerDetail.attr_2}}</text>
<text class='block' wx:if="{
{designerDetail.attr_1 !== ''}}">-擅长:{
{designerDetail.attr_1}}</text>
<text class='block' wx:if="{
{designerDetail.attr_4 !== ''}}">-毕业院校:{
{designerDetail.attr_4}}</text>
<text class='block' wx:if="{
{designerDetail.attr_5 !== ''}}">-从业年限:{
{designerDetail.attr_5}}</text>
<text class='block' wx:if="{
{designerDetail.attr_6 !== ''}}">-设计理念:{
{designerDetail.attr_6}}</text>
</view>
</view>
</view>
<!-- 案例图片 -->
<view class='p_tb10 p_lr15 font16 gray3'>案例作品</view>
<view class='p_lr15 p_b20'>
<view class='m_t10' wx:for="{
{designerDetail.pics}}" bindtap='bindpreviewImage' id='{
{index}}'>
<image src='{
{urlhttp + item}}' mode='widthFix' style='width:100%;border-radius:40rpx;'></image>
</view>
</view>
<!-- 预约按钮 -->
<view style='height:100rpx;'></view>
<view class='pf footbtn flex'>
<view style='width:50%;border-color:white' class='bd_r white font18 tc bg_theme' data-type='预约设计' bindtap='orderTap'>预约设计</view>
<view style='width:50%;' class='white font18 tc bg_theme' data-type='预约量房' bindtap='orderTap'>预约量房</view>
</view>
<!-- 预约表单 -->
<view class='tip-content-dialog' hidden='{
{dialogHidden}}'>
<view class='tip-dialog-view p_all20 bg_white' style='width:90%;border-radius40rpx;overflow:hidden;'>
<text class='font15 gray9 inline_block p_b10 p_lr10' bindtap='closeTap'>取消</text>
<form bindsubmit="formSubmit">
<view class='p_all10'>
<view class='formView'>
<view class='inputs bg_graye gray6 font15 p_tb10 p_lr10'>
<picker bindchange="bindPickerzone" value="{
{index2}}" range="{
{userZoneList}}">
<label class='fl m_t5'>所在城市</label>
<text class='fr m_t5'>﹀</text>
<input class='tr fr' type='text' disabled='disabled' value='{
{userZoneList[index2]}}'></input>
<view class='cl'></view>
</picker>
</view>
<view class='inputs bg_graye gray6 font15 p_tb10 m_t15 p_lr10' bindtap='getLocation'>
<label class='fl m_t5'>工程位置</label>
<text class='fr m_t5'>﹀</text>
<input class='tr fr' type='text' disabled='disabled' value='{
{userlocation}}'></input>
<view class='cl'></view>
</view>
<view class='inputs bg_graye gray6 font15 p_tb10 m_t15 p_lr10'>
<picker bindchange="bindPickerChange" value="{
{index}}" range="{
{acreagelist}}">
<label class='fl m_t5'>房屋面积</label>
<text class='fr m_t5'>﹀</text>
<input class='tr fr' type='text' disabled='disabled' value='{
{acreagelist[index]}}'></input>
<view class='cl'></view>
</picker>
</view>
<view class='inputs bg_graye gray6 font15 p_tb10 m_t15 p_lr10'>
<label class='fl m_t5'>真实姓名</label>
<input class='tr fr' type='text' value='' name='name' placeholder='输入真实姓名'></input>
<view class='cl'></view>