Commit c213ec83eec780a129478f594b6af7c79fc45800
1 parent
c62ab6f2
商铺详情，新增
Showing
4 changed files
with
411 additions
and
287 deletions
pages/details/details.scss
| 1 | .page { | 1 | .page { |
| 2 | - position: absolute; | 2 | + position: relative; |
| 3 | width: 100%; | 3 | width: 100%; |
| 4 | // height: 100%; | 4 | // height: 100%; |
| 5 | overflow-x: hidden; | 5 | overflow-x: hidden; |
| 6 | // overflow-y: auto; | 6 | // overflow-y: auto; |
| 7 | } | 7 | } |
| 8 | -/* banner 标题 */ | ||
| 9 | -.banner-title{ | ||
| 10 | - background-color: #FFFFFF; | ||
| 11 | - padding-bottom: 20rpx; | ||
| 12 | -} | ||
| 13 | -/* banner */ | ||
| 14 | -.banner{ | 8 | +// 图片 |
| 9 | +.banner-img { | ||
| 15 | width: 100%; | 10 | width: 100%; |
| 16 | - height: 450rpx; | ||
| 17 | - .screen-swiper{ | ||
| 18 | - width: 100%; | ||
| 19 | - height: 100%; | ||
| 20 | - } | 11 | + height: 30vh; |
| 21 | } | 12 | } |
| 22 | -/* 价格 */ | ||
| 23 | -.price-info{ | ||
| 24 | - display: flex; | ||
| 25 | - align-items: center; | ||
| 26 | - justify-content: space-between; | ||
| 27 | - padding: 0 4%; | ||
| 28 | - margin: 20rpx 0; | ||
| 29 | - .price{ | ||
| 30 | - font-size: 28rpx; | ||
| 31 | - text { | ||
| 32 | - font-size: 24rpx; | ||
| 33 | - color: #aaaaaa; | 13 | +// 商铺信息 |
| 14 | +.banner { | ||
| 15 | + position: absolute; | ||
| 16 | + top: calc(30vh - 30rpx); | ||
| 17 | + width: 100%; | ||
| 18 | + margin-top: -20rpx; | ||
| 19 | + border-radius: 30rpx; | ||
| 20 | + background-color: #fff; | ||
| 21 | + padding: 26rpx 34rpx 100rpx; | ||
| 22 | + .banner-item { | ||
| 23 | + border-bottom: 2rpx solid #EBEBEB; | ||
| 24 | + padding-bottom: 32rpx; | ||
| 25 | + .banner-item-title { | ||
| 26 | + font-size: 28rpx; | ||
| 27 | + font-weight: 700; | ||
| 28 | + line-height: 48rpx; | ||
| 29 | + margin-top: 30rpx; | ||
| 34 | } | 30 | } |
| 35 | - .price-num { | ||
| 36 | - font-weight: bold; | ||
| 37 | - color: #ff7337; | ||
| 38 | - font-size: 40rpx; | ||
| 39 | - margin-top: 20rpx; | 31 | + .banner-item-form { |
| 32 | + .form-item { | ||
| 33 | + display: flex; | ||
| 34 | + justify-content: flex-start; | ||
| 35 | + align-items: top; | ||
| 36 | + padding: 8rpx 0; | ||
| 37 | + } | ||
| 38 | + } | ||
| 39 | + &:last-child { | ||
| 40 | + border-bottom: unset; | ||
| 40 | } | 41 | } |
| 41 | } | 42 | } |
| 42 | - .price-line { | ||
| 43 | - width: 2rpx; | ||
| 44 | - height: 80rpx; | ||
| 45 | - background-color: #f4f4f4; | ||
| 46 | - } | ||
| 47 | -} | ||
| 48 | -/* 标题 */ | ||
| 49 | -.goods-title{ | ||
| 50 | - padding: 0 4%; | ||
| 51 | - margin: 40rpx auto; | ||
| 52 | - text{ | ||
| 53 | - font-size: 34rpx; | ||
| 54 | - color: #000; | ||
| 55 | - font-weight: bold; | ||
| 56 | - } | ||
| 57 | -} | ||
| 58 | -.goods-icon { | ||
| 59 | - display: flex; | ||
| 60 | - margin: 0 20rpx; | ||
| 61 | - .goods-icon-list { | ||
| 62 | - background-color: #f1fff6; | ||
| 63 | - color:#4fa477; | ||
| 64 | - font-size: 24rpx; | ||
| 65 | - display: inline-block; | ||
| 66 | - padding: 10rpx 20rpx; | ||
| 67 | - margin-right: 10rpx; | ||
| 68 | - } | ||
| 69 | -} | ||
| 70 | -/* 评价 */ | ||
| 71 | -.evaluate-data{ | ||
| 72 | - padding: 0 4%; | ||
| 73 | - margin: 20rpx auto; | ||
| 74 | - background-color: #FFFFFF; | ||
| 75 | - overflow: hidden; | ||
| 76 | - .title-more{ | ||
| 77 | - display: flex; | ||
| 78 | - align-items: center; | ||
| 79 | - justify-content: space-between; | ||
| 80 | - width: 100%; | ||
| 81 | - height: 100rpx; | ||
| 82 | - .title{ | 43 | + // 基础信息 |
| 44 | + .info { | ||
| 45 | + .info-title { | ||
| 46 | + font-weight: bold; | ||
| 47 | + font-size: 32rpx; | ||
| 48 | + margin-bottom: 24rpx; | ||
| 49 | + span { | ||
| 50 | + display: inline-block; | ||
| 51 | + padding: 0 8rpx; | ||
| 52 | + } | ||
| 53 | + } | ||
| 54 | + .info-text { | ||
| 55 | + margin-bottom: 30rpx; | ||
| 56 | + } | ||
| 57 | + .info-racord { | ||
| 83 | display: flex; | 58 | display: flex; |
| 59 | + justify-content: space-between; | ||
| 84 | align-items: center; | 60 | align-items: center; |
| 85 | - height: 100%; | ||
| 86 | - text{ | ||
| 87 | - font-size: 30rpx; | ||
| 88 | - color: #000; | 61 | + .info-price { |
| 62 | + color: #31AA6A; | ||
| 63 | + span { | ||
| 64 | + font-size: 40rpx; | ||
| 65 | + font-weight: 700; | ||
| 66 | + margin-right: 4rpx; | ||
| 67 | + } | ||
| 89 | } | 68 | } |
| 90 | } | 69 | } |
| 91 | - .more{ | 70 | + } |
| 71 | + // 场地信息 | ||
| 72 | + // 位置信息 | ||
| 73 | + .position { | ||
| 74 | + .position-info { | ||
| 92 | display: flex; | 75 | display: flex; |
| 93 | align-items: center; | 76 | align-items: center; |
| 94 | - text{ | ||
| 95 | - font-size: 26rpx; | ||
| 96 | - color: #212121; | 77 | + flex-direction: row; |
| 78 | + margin: 38rpx 22rpx; | ||
| 79 | + background-color: #fff; | ||
| 80 | + font-size: 24rpx; | ||
| 81 | + padding: 20rpx 16rpx; | ||
| 82 | + line-height: 30rpx; | ||
| 83 | + border-radius: 14rpx; | ||
| 84 | + text { | ||
| 85 | + margin-left: 10rpx; | ||
| 97 | } | 86 | } |
| 98 | } | 87 | } |
| 99 | } | 88 | } |
| 100 | - .evaluate-list{ | ||
| 101 | - width: 100%; | ||
| 102 | - .content{ | 89 | + // 周边商铺 |
| 90 | + .other-business { | ||
| 91 | + .scroll-view_H { | ||
| 92 | + white-space: nowrap; | ||
| 103 | width: 100%; | 93 | width: 100%; |
| 104 | - .character{ | ||
| 105 | - display: flex; | ||
| 106 | - align-items: center; | ||
| 107 | - padding: 10rpx 0; | ||
| 108 | - text{ | ||
| 109 | - font-size: 26rpx; | ||
| 110 | - color: #333333; | 94 | + } |
| 95 | + .scroll-view-item_H { | ||
| 96 | + display: inline-block; | ||
| 97 | + width: 210rpx; | ||
| 98 | + margin-right: 22rpx; | ||
| 99 | + &:last-child { | ||
| 100 | + margin-right: 0; | ||
| 101 | + } | ||
| 102 | + .business-card { | ||
| 103 | + width: 100%; | ||
| 104 | + .u-image { | ||
| 105 | + overflow: hidden !important; | ||
| 106 | + border-radius: 20rpx !important; | ||
| 107 | + } | ||
| 108 | + .business-card-title { | ||
| 109 | + width: 100%; | ||
| 110 | + overflow : hidden;/*必须结合的属性,当内容溢出元素框时发生的事情*/ | ||
| 111 | + text-overflow: ellipsis;/*可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/ | ||
| 112 | + // display: -webkit-box;/*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/ | ||
| 113 | + // -webkit-line-clamp: 2;/*用来限制在一个块元素显示的文本的行数。*/ | ||
| 114 | + // -webkit-box-orient: vertical;/*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排*/ | ||
| 115 | + line-height: 30rpx; | ||
| 116 | + margin: 10rpx 0; | ||
| 117 | + padding: 0 10rpx; | ||
| 118 | + } | ||
| 119 | + .business-card-item { | ||
| 120 | + padding: 0 10rpx; | ||
| 121 | + font-weight: 400; | ||
| 122 | + font-size: 20rpx; | ||
| 123 | + color: #676767; | ||
| 124 | + line-height: 1.5; | ||
| 125 | + span { | ||
| 126 | + font-weight: 700; | ||
| 127 | + font-size: 30rpx; | ||
| 128 | + color: #000000; | ||
| 129 | + } | ||
| 111 | } | 130 | } |
| 112 | } | 131 | } |
| 113 | } | 132 | } |
| 114 | } | 133 | } |
| 115 | } | 134 | } |
| 135 | + | ||
| 116 | /* 底部 */ | 136 | /* 底部 */ |
| 117 | .page-footer{ | 137 | .page-footer{ |
| 118 | position: fixed; | 138 | position: fixed; |
| 119 | left: 0; | 139 | left: 0; |
| 120 | bottom: 0; | 140 | bottom: 0; |
| 121 | display: flex; | 141 | display: flex; |
| 142 | + align-items: center; | ||
| 143 | + justify-content: center; | ||
| 122 | width: 100%; | 144 | width: 100%; |
| 123 | - height: 100rpx; | 145 | + height: 125rpx; |
| 124 | background-color: #FFFFFF; | 146 | background-color: #FFFFFF; |
| 125 | padding-bottom: constant(safe-area-inset-bottom); | 147 | padding-bottom: constant(safe-area-inset-bottom); |
| 126 | padding-bottom: env(safe-area-inset-bottom); | 148 | padding-bottom: env(safe-area-inset-bottom); |
| 127 | - .footer-buy{ | 149 | + .footer-btn { |
| 128 | display: flex; | 150 | display: flex; |
| 151 | + width: 70vw; | ||
| 152 | + } | ||
| 153 | + .footer-service { | ||
| 154 | + display: flex; | ||
| 155 | + flex-direction: column; | ||
| 129 | align-items: center; | 156 | align-items: center; |
| 130 | - justify-content: space-between; | ||
| 131 | - width: 100%; | ||
| 132 | - height: 100%; | ||
| 133 | - .cart-add{ | ||
| 134 | - display: flex; | ||
| 135 | - align-items: center; | ||
| 136 | - justify-content: center; | ||
| 137 | - width: 100%; | ||
| 138 | - height: 100rpx; | ||
| 139 | - background-color: #3f9b6a; | ||
| 140 | - text{ | ||
| 141 | - font-size: 28rpx; | ||
| 142 | - color: #FFFFFF; | ||
| 143 | - } | 157 | + text { |
| 158 | + margin-top: 6rpx; | ||
| 159 | + line-height: 42rpx; | ||
| 144 | } | 160 | } |
| 145 | } | 161 | } |
| 146 | -} | 162 | -} |
| 163 | +} | ||
| 147 | \ No newline at end of file | 164 | \ No newline at end of file |
pages/details/details.vue
| 1 | <template> | 1 | <template> |
| 2 | <view> | 2 | <view> |
| 3 | - <!-- banner，标题 --> | ||
| 4 | - <view class="banner-title"> | ||
| 5 | - <!-- banner --> | ||
| 6 | - <view class="banner"> | ||
| 7 | - <swiper class="screen-swiper round-dot" indicator-dots="true" circular="true" autoplay="true" interval="5000" | ||
| 8 | - duration="500"> | ||
| 9 | - <swiper-item v-for="(val, index) in swiperList" :key="index"> | ||
| 10 | - | ||
| 11 | - <image :src="val.url" mode="aspectFill"></image> | ||
| 12 | - </swiper-item> | ||
| 13 | - </swiper> | ||
| 14 | - </view> | ||
| 15 | - <!-- 标题 --> | ||
| 16 | - <view class="goods-title"> | ||
| 17 | - <text>{{tableList.shopName}}</text> | ||
| 18 | - </view> | ||
| 19 | - <view class="goods-icon"> | ||
| 20 | - <view class="goods-icon-list">靠近地铁</view> | ||
| 21 | - <view class="goods-icon-list">采光好</view> | ||
| 22 | - </view> | ||
| 23 | - <!-- 价格 --> | ||
| 24 | - <view class="price-info"> | ||
| 25 | - <view class="price"> | ||
| 26 | - <view>单价<text>（元/m²/月）</text></view> | ||
| 27 | - <view class="price-num">100</view> | ||
| 28 | - </view> | ||
| 29 | - <view class="price-line"></view> | ||
| 30 | - <view class="price"> | ||
| 31 | - <view>面积<text>（m²）</text></view> | ||
| 32 | - <view class="price-num">265</view> | 3 | + <view class="banner-img"> |
| 4 | + <u-image :showLoading="true" :src="tableData.displayMainImage" width="100%" height="100%"></u-image> | ||
| 5 | + </view> | ||
| 6 | + <view class="banner"> | ||
| 7 | + <view class="banner-item info"> | ||
| 8 | + <view class="info-title"> | ||
| 9 | + {{tableData.shopName}}{{tableData.venueNumber}}， | ||
| 10 | + {{tableData.detailedLocation}} | ||
| 11 | + <!-- {{tableData.houseNumber}} --> | ||
| 12 | + <!-- <span>|</span> --> | ||
| 13 | + </view> | ||
| 14 | + <view class="info-text">{{tableData.shopDescription}}</view> | ||
| 15 | + <view class="info-racord"> | ||
| 16 | + <view class="info-price"><span>1000</span>元/月</view> | ||
| 17 | + <view class="info-intention">2456人有意向</view> | ||
| 18 | + </view> | ||
| 33 | </view> | 19 | </view> |
| 34 | - <view class="price-line"></view> | ||
| 35 | - <view class="price"> | ||
| 36 | - <view>月租金<text>（元/月）</text></view> | ||
| 37 | - <view class="price-num">26500</view> | 20 | + <view class="banner-item field"> |
| 21 | + <view class="banner-item-title">场地信息</view> | ||
| 22 | + <view class="banner-item-form"> | ||
| 23 | + <view class="form-item" style="width: 50%;"> | ||
| 24 | + <view class="label">场地类型：</view> | ||
| 25 | + <text>{{tableData.architecturalForm}}</text> | ||
| 26 | + </view> | ||
| 27 | + <view class="form-item" style="width: 50%;"> | ||
| 28 | + <view class="label">实际使用面积：</view> | ||
| 29 | + <text>{{tableData.actualUsableArea}}</text> | ||
| 30 | + </view> | ||
| 31 | + <view class="form-item"> | ||
| 32 | + <view class="label">所属区域：</view> | ||
| 33 | + <text>{{tableData.belongingRegion}}</text> | ||
| 34 | + </view> | ||
| 35 | + <view class="form-item"> | ||
| 36 | + <view class="label">规划图纸：</view> | ||
| 37 | + <view> | ||
| 38 | + <u-image v-if="tableData.architecturalDrawings" :showLoading="true" :src="tableData.architecturalDrawings" width="calc(90vw - 140rpx)" height="300rpx"></u-image> | ||
| 39 | + <text v-else>暂无</text> | ||
| 40 | + </view> | ||
| 41 | + <!-- architecturalDrawings --> | ||
| 42 | + </view> | ||
| 43 | + <view class="form-item"> | ||
| 44 | + | ||
| 45 | + </view> | ||
| 46 | + <view class="form-item"> | ||
| 47 | + <view class="label" style="width: 142rpx;">位置描述：</view> | ||
| 48 | + <text style='flex: 1;'>{{tableData.detailedLocation}}</text> | ||
| 49 | + </view> | ||
| 50 | + </view> | ||
| 38 | </view> | 51 | </view> |
| 39 | - </view> | ||
| 40 | - <view class="goods-icon"> | ||
| 41 | - <view class="goods-icon-list">2押1付</view> | ||
| 42 | - <view class="goods-icon-list">使用率80%</view> | ||
| 43 | - </view> | ||
| 44 | - </view> | ||
| 45 | - <!-- 评价 --> | ||
| 46 | - <view class="evaluate-data"> | ||
| 47 | - <view class="title-more"> | ||
| 48 | - <view class="title"> | ||
| 49 | - <text>更多信息</text> | ||
| 50 | - </view> | ||
| 51 | - <view class="more"> | ||
| 52 | - <text class="iconfont icon-more"></text> | ||
| 53 | - </view> | ||
| 54 | - </view> | ||
| 55 | - <view class="evaluate-list"> | ||
| 56 | - <view class="content"> | ||
| 57 | - <view class="character"> | ||
| 58 | - <text>地址：{{tableList.detailedLocation}}</text> | ||
| 59 | - </view> | ||
| 60 | - <view class="character"> | ||
| 61 | - <text>业态：零售</text> | ||
| 62 | - </view> | ||
| 63 | - <view class="character"> | ||
| 64 | - <text>招商要求：不可使用明火</text> | ||
| 65 | - </view> | ||
| 66 | - </view> | ||
| 67 | - </view> | ||
| 68 | - </view> | 52 | + <view class="banner-item position"> |
| 53 | + <view class="banner-item-title">位置信息</view> | ||
| 54 | + <view style="margin-top: 16rpx;"> | ||
| 55 | + <map style="width: 100%; height: 150rpx;"> | ||
| 56 | + <view class="position-info"> | ||
| 57 | + <u-image :showLoading="true" src="/static/images/location-icon.png" width="20rpx" height="20rpx"></u-image> | ||
| 58 | + <text>{{tableData.shopName}}{{tableData.venueNumber}}</text> | ||
| 59 | + </view> | ||
| 60 | + </map> | ||
| 61 | + </view> | ||
| 62 | + </view> | ||
| 63 | + <view class="banner-item other-business"> | ||
| 64 | + <view class="banner-item-title">周边商铺</view> | ||
| 65 | + <view style="margin-top: 16rpx;"> | ||
| 66 | + <scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120"> | ||
| 67 | + <view v-for="(item, index) in 10" :key="index" class="scroll-view-item_H"> | ||
| 68 | + <view class="business-card"> | ||
| 69 | + <u-image :showLoading="true" src="https://cdn.uviewui.com/uview/album/1.jpg" width="100%" height="210rpx"></u-image> | ||
| 70 | + <view class="business-card-title"> | ||
| 71 | + 这里是标题这里是标题这里是标题这里是标题这里是标题 | ||
| 72 | + </view> | ||
| 73 | + <view class="business-card-item">租金：￥<span>1067</span>/月</view> | ||
| 74 | + <view class="business-card-item">面积：<span>81</span>/m2</view> | ||
| 75 | + </view> | ||
| 76 | + </view> | ||
| 77 | + </scroll-view> | ||
| 78 | + </view> | ||
| 79 | + </view> | ||
| 80 | + </view> | ||
| 69 | <!-- 底部 --> | 81 | <!-- 底部 --> |
| 70 | <view class="page-footer"> | 82 | <view class="page-footer"> |
| 71 | - <view class="footer-buy" @click="leaseAdd"> | ||
| 72 | - <view class="cart-add"> | ||
| 73 | - <text>申请租赁</text> | ||
| 74 | - </view> | ||
| 75 | - </view> | 83 | + <view class="footer-service"> |
| 84 | + <u-image :showLoading="true" src="/static/images/sevice-icon.png" width="30rpx" height="30rpx"></u-image> | ||
| 85 | + <text>客服</text> | ||
| 86 | + </view> | ||
| 87 | + <view class="footer-btn"> | ||
| 88 | + <u-button type="primary">意向申请</u-button> | ||
| 89 | + <u-button type="success" style="margin-left: unset;" @click="leaseAdd">租赁申请</u-button> | ||
| 90 | + </view> | ||
| 91 | + <view class="footer-service"> | ||
| 92 | + <u-image :showLoading="true" src="/static/images/share-icon.png" width="30rpx" height="30rpx"></u-image> | ||
| 93 | + <text>分享</text> | ||
| 94 | + </view> | ||
| 76 | </view> | 95 | </view> |
| 77 | </view> | 96 | </view> |
| 78 | </template> | 97 | </template> |
| @@ -82,22 +101,26 @@ | @@ -82,22 +101,26 @@ | ||
| 82 | export default { | 101 | export default { |
| 83 | data() { | 102 | data() { |
| 84 | return { | 103 | return { |
| 85 | - tableList:{}, | ||
| 86 | - swiperList: [ | ||
| 87 | - { | ||
| 88 | - id: 0, | ||
| 89 | - type: 'image', | ||
| 90 | - url: this.$imgUrl('/img/1.jpg') | ||
| 91 | - } | ||
| 92 | - ], | 104 | + tableData:{}, |
| 105 | + swiperList: [ | ||
| 106 | + { | ||
| 107 | + id: 0, | ||
| 108 | + type: 'image', | ||
| 109 | + url: this.$imgUrl('/img/1.jpg') | ||
| 110 | + } | ||
| 111 | + ], | ||
| 112 | + latitude: 39.909, | ||
| 113 | + longitude: 116.39742, | ||
| 93 | }; | 114 | }; |
| 94 | }, | 115 | }, |
| 95 | onLoad(option){ | 116 | onLoad(option){ |
| 96 | - this.tableList = JSON.parse(option.item) | ||
| 97 | - this.swiperList[0].url = this.tableList.displayMainImage || this.tableList.locationDiagram | ||
| 98 | - console.log( this.swiperList) | ||
| 99 | - console.log( this.tableList) | ||
| 100 | - | 117 | + let data = JSON.parse(option.item) |
| 118 | + this.swiperList[0].url = data.displayMainImage || data.locationDiagram | ||
| 119 | + this.tableData = data; | ||
| 120 | + let location = JSON.parse(data.mapPunctuation) | ||
| 121 | + this.latitude = location.latitude; | ||
| 122 | + this.longitude = location.longitude; | ||
| 123 | + console.log(this.swiperList, this.tableData); | ||
| 101 | }, | 124 | }, |
| 102 | methods: { | 125 | methods: { |
| 103 | leaseAdd(){ | 126 | leaseAdd(){ |
pages/leaseAdd/leaseAdd.scss
| @@ -3,9 +3,13 @@ | @@ -3,9 +3,13 @@ | ||
| 3 | left: 0; | 3 | left: 0; |
| 4 | top: 0; | 4 | top: 0; |
| 5 | width: 100%; | 5 | width: 100%; |
| 6 | - height: 100%; | 6 | + overflow-y: scroll; |
| 7 | + height: calc(100% - 120rpx); | ||
| 7 | background-color: #f6f6f6; | 8 | background-color: #f6f6f6; |
| 8 | } | 9 | } |
| 10 | +.steps-box { | ||
| 11 | + padding-top: 40rpx; | ||
| 12 | +} | ||
| 9 | 13 | ||
| 10 | .add-list{ | 14 | .add-list{ |
| 11 | padding: 0 4%; | 15 | padding: 0 4%; |
| @@ -13,7 +17,6 @@ | @@ -13,7 +17,6 @@ | ||
| 13 | border-radius: 20rpx; | 17 | border-radius: 20rpx; |
| 14 | margin-top: 20rpx; | 18 | margin-top: 20rpx; |
| 15 | width: 100%; | 19 | width: 100%; |
| 16 | - padding-bottom: 150rpx; | ||
| 17 | .list{ | 20 | .list{ |
| 18 | display: flex; | 21 | display: flex; |
| 19 | justify-content: space-between; | 22 | justify-content: space-between; |
| @@ -56,6 +59,38 @@ | @@ -56,6 +59,38 @@ | ||
| 56 | } | 59 | } |
| 57 | } | 60 | } |
| 58 | } | 61 | } |
| 62 | + .deom-box { | ||
| 63 | + width: 100vw; | ||
| 64 | + display: flex !important; | ||
| 65 | + padding: 14rpx 0; | ||
| 66 | + background-color: #FFFFFF; | ||
| 67 | + border-radius: 9px; | ||
| 68 | + // margin-top: 9px; | ||
| 69 | + width: 100%; | ||
| 70 | + // .u-upload { | ||
| 71 | + // .u-add-wrap { | ||
| 72 | + // width: 304rpx !important; | ||
| 73 | + // height: 182rpx !important; | ||
| 74 | + // } | ||
| 75 | + // } | ||
| 76 | + // .u-upload { | ||
| 77 | + // height: 88px; | ||
| 78 | + // width: 155px; | ||
| 79 | + // background: url(/static/images/uploadID1.png); | ||
| 80 | + // background-size:134rpx 188rpx; | ||
| 81 | + // background-repeat:no-repeat; | ||
| 82 | + // } | ||
| 83 | + .img-deom { | ||
| 84 | + flex: 1; | ||
| 85 | + display: flex; | ||
| 86 | + flex-direction: column; | ||
| 87 | + align-items: center; | ||
| 88 | + padding: 20rpx; | ||
| 89 | + text { | ||
| 90 | + margin-top: 18rpx; | ||
| 91 | + } | ||
| 92 | + } | ||
| 93 | + } | ||
| 59 | } | 94 | } |
| 60 | 95 | ||
| 61 | /* 保存按钮 */ | 96 | /* 保存按钮 */ |
| @@ -64,8 +99,9 @@ | @@ -64,8 +99,9 @@ | ||
| 64 | left: 0; | 99 | left: 0; |
| 65 | bottom: 0; | 100 | bottom: 0; |
| 66 | display: flex; | 101 | display: flex; |
| 102 | + align-items: center; | ||
| 67 | width: 100%; | 103 | width: 100%; |
| 68 | - height: 100rpx; | 104 | + height: 125rpx; |
| 69 | background-color: #FFFFFF; | 105 | background-color: #FFFFFF; |
| 70 | padding-bottom: constant(safe-area-inset-bottom); | 106 | padding-bottom: constant(safe-area-inset-bottom); |
| 71 | padding-bottom: env(safe-area-inset-bottom); | 107 | padding-bottom: env(safe-area-inset-bottom); |
pages/leaseAdd/leaseAdd.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="page"> | 2 | <view class="page"> |
| 3 | - <view class="add-list"> | ||
| 4 | - <view class="list"> | ||
| 5 | - <view class="title"> | ||
| 6 | - <text>租赁人姓名</text> | ||
| 7 | - <text class="star">*</text> | ||
| 8 | - </view> | ||
| 9 | - <view class="content"> | ||
| 10 | - <input type="text" placeholder="请输入"> | ||
| 11 | - </view> | ||
| 12 | - </view> | ||
| 13 | - <view class="list"> | ||
| 14 | - <view class="title"> | ||
| 15 | - <text>身份证号</text> | ||
| 16 | - <text class="star">*</text> | ||
| 17 | - </view> | ||
| 18 | - <view class="content"> | ||
| 19 | - <input type="text" placeholder="请输入"> | ||
| 20 | - </view> | ||
| 21 | - </view> | ||
| 22 | - <view class="list"> | ||
| 23 | - <view class="title"> | ||
| 24 | - <text>联系方式</text> | ||
| 25 | - <text class="star">*</text> | ||
| 26 | - </view> | ||
| 27 | - <view class="content"> | ||
| 28 | - <input type="text" placeholder="请输入"> | ||
| 29 | - </view> | ||
| 30 | - </view> | ||
| 31 | - <view class="list"> | ||
| 32 | - <view class="title"> | ||
| 33 | - <text>意向租期</text> | ||
| 34 | - <text class="star">*</text> | ||
| 35 | - </view> | ||
| 36 | - <view class="content"> | ||
| 37 | - <input type="text" placeholder="请选择"> | ||
| 38 | - </view> | ||
| 39 | - </view> | ||
| 40 | - <view class="list"> | ||
| 41 | - <view class="title"> | ||
| 42 | - <text>经营用途</text> | ||
| 43 | - <text class="star">*</text> | ||
| 44 | - </view> | ||
| 45 | - <view class="content"> | ||
| 46 | - <input type="text" placeholder="请选择"> | ||
| 47 | - <image :src="$imgUrl('/right2.png')" ></image> | ||
| 48 | - </view> | ||
| 49 | - </view> | ||
| 50 | - <view class="list"> | ||
| 51 | - <view class="title"> | ||
| 52 | - <text>经营类型</text> | ||
| 53 | - <text class="star">*</text> | ||
| 54 | - </view> | ||
| 55 | - <view class="content"> | ||
| 56 | - <input type="text" placeholder="请选择"> | ||
| 57 | - <image :src="$imgUrl('/right2.png')"></image> | ||
| 58 | - </view> | 3 | + <view class="steps-box"> |
| 4 | + <u-steps :list="numList" :current="active"></u-steps> | ||
| 5 | + </view> | ||
| 6 | + <view> | ||
| 7 | + <view class="add-list" v-if="active == 0"> | ||
| 8 | + <u-form labelPosition="left" :model="model1" :rules="rules" ref="uForm" :labelWidth="250"> | ||
| 9 | + <u-form-item label="经营用途" prop="name" borderBottom> | ||
| 10 | + <u-input v-model="model1.name" ></u-input> | ||
| 11 | + </u-form-item> | ||
| 12 | + <u-form-item label="意向租期" prop="name" borderBottom> | ||
| 13 | + <u-input v-model="model1.name" ></u-input> | ||
| 14 | + </u-form-item> | ||
| 15 | + <u-form-item label="经营主体" prop="name" borderBottom> | ||
| 16 | + <u-input v-model="model1.name" ></u-input> | ||
| 17 | + </u-form-item> | ||
| 18 | + </u-form> | ||
| 59 | </view> | 19 | </view> |
| 60 | - <view class="feedback-data"> | ||
| 61 | - <view> | ||
| 62 | - <view class="title"> | ||
| 63 | - <text>法人身份证正反面</text> | ||
| 64 | - <text class="star">*</text> | ||
| 65 | - </view> | ||
| 66 | - </view> | ||
| 67 | - <view class="voucher-img"> | ||
| 68 | - <view class="voucher-list"> | ||
| 69 | - <image :src="$imgUrl('/voucher_bg.png')"></image> | ||
| 70 | - </view> | ||
| 71 | - </view> | 20 | + <view class="add-list" v-else-if='active == 1'> |
| 21 | + <u-form labelPosition="left" :model="model1" :rules="rules" ref="uForm" :labelWidth="250"> | ||
| 22 | + <u-form-item label="主体名称" prop="name" borderBottom> | ||
| 23 | + <u-input v-model="model1.name" ></u-input> | ||
| 24 | + </u-form-item> | ||
| 25 | + <u-form-item label="统一社会信用代码" prop="name" borderBottom> | ||
| 26 | + <u-input v-model="model1.name" ></u-input> | ||
| 27 | + </u-form-item> | ||
| 28 | + <u-form-item label="类型" prop="type" borderBottom> | ||
| 29 | + <u-input v-model="model1.type" type="select" @click="model1.typeShow = true" placeholder='请选择类型'/> | ||
| 30 | + <u-select v-model="model1.typeShow" :list="activesType" @confirm="typeChange"></u-select> | ||
| 31 | + </u-form-item> | ||
| 32 | + <u-form-item label="法定代表人" prop="name" borderBottom> | ||
| 33 | + <u-input v-model="model1.name" ></u-input> | ||
| 34 | + </u-form-item> | ||
| 35 | + <u-form-item label="经营范围" prop="name" borderBottom> | ||
| 36 | + <u-input v-model="model1.name" ></u-input> | ||
| 37 | + </u-form-item> | ||
| 38 | + <u-form-item label="注册资本" prop="name" borderBottom> | ||
| 39 | + <u-input v-model="model1.name" ></u-input> | ||
| 40 | + </u-form-item> | ||
| 41 | + <u-form-item label="成立日期" prop="name" borderBottom> | ||
| 42 | + <u-input v-model="model1.name" ></u-input> | ||
| 43 | + </u-form-item> | ||
| 44 | + <u-form-item label="住所" prop="name" borderBottom> | ||
| 45 | + <u-input v-model="model1.name" ></u-input> | ||
| 46 | + </u-form-item> | ||
| 47 | + <u-form-item label="邮箱地址" prop="name" borderBottom> | ||
| 48 | + <u-input v-model="model1.name" ></u-input> | ||
| 49 | + </u-form-item> | ||
| 50 | + <u-form-item label="经营期限" prop="name" borderBottom> | ||
| 51 | + <u-input v-model="model1.name" ></u-input> | ||
| 52 | + </u-form-item> | ||
| 53 | + <u-form-item label="营业执照" prop="name" borderBottom labelPosition="top"> | ||
| 54 | + <u-upload :active="active" :file-list="model1.fileList" ></u-upload> | ||
| 55 | + </u-form-item> | ||
| 56 | + </u-form> | ||
| 72 | </view> | 57 | </view> |
| 73 | - <view class="feedback-data"> | ||
| 74 | - <view> | ||
| 75 | - <view class="title"> | ||
| 76 | - <text>营业许可证</text> | ||
| 77 | - <text class="star">*</text> | 58 | + <view v-else> |
| 59 | + <u-form labelPosition="left" :model="model1" :rules="rules" ref="uForm" :labelWidth="250"> | ||
| 60 | + <view class="add-list"> | ||
| 61 | + <u-form-item label="经营者姓名" prop="name" borderBottom> | ||
| 62 | + <u-input v-model="model1.name" ></u-input> | ||
| 63 | + </u-form-item> | ||
| 64 | + <u-form-item label="证件类型" prop="type" borderBottom> | ||
| 65 | + <u-input v-model="model1.type" type="select" @click="model1.typeShow = true" placeholder='请选择类型'/> | ||
| 66 | + <u-select v-model="model1.typeShow" :list="activesType" @confirm="typeChange"></u-select> | ||
| 67 | + </u-form-item> | ||
| 68 | + <u-form-item label="身份证号码" prop="name" borderBottom> | ||
| 69 | + <u-input v-model="model1.name" ></u-input> | ||
| 70 | + </u-form-item> | ||
| 71 | + <u-form-item label="身份证有效期" prop="name" borderBottom> | ||
| 72 | + <u-input v-model="model1.name" ></u-input> | ||
| 73 | + </u-form-item> | ||
| 78 | </view> | 74 | </view> |
| 79 | - </view> | ||
| 80 | - <view class="voucher-img"> | ||
| 81 | - <view class="voucher-list"> | ||
| 82 | - <image :src="$imgUrl('/voucher_bg.png')"></image> | ||
| 83 | - </view> | ||
| 84 | - </view> | ||
| 85 | - </view> | ||
| 86 | - <view class="feedback-data"> | ||
| 87 | - <view> | ||
| 88 | - <view class="title"> | ||
| 89 | - <text>餐饮服务许可证</text> | ||
| 90 | - <text class="star">*</text> | 75 | + <view class="add-list"> |
| 76 | + <view class="deom-box"> | ||
| 77 | + <view class="img-deom"> | ||
| 78 | + <u-upload :active="active" :file-list="model1.fileList" :custom-btn="true" :max-count="1"> | ||
| 79 | + <view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150"> | ||
| 80 | + <u-image width="304rpx" height="182rpx" src="/static/images/uploadID1.png"></u-image> | ||
| 81 | + </view> | ||
| 82 | + </u-upload> | ||
| 83 | + <text>点击上传证件人像面</text> | ||
| 84 | + </view> | ||
| 85 | + <view class="img-deom"> | ||
| 86 | + <u-upload :active="active" :file-list="model1.fileList" :custom-btn="true" :max-count="1"> | ||
| 87 | + <view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150"> | ||
| 88 | + <u-image width="304rpx" height="182rpx" src="/static/images/uploadID2.png"></u-image> | ||
| 89 | + </view> | ||
| 90 | + </u-upload> | ||
| 91 | + <text>点击上传证件国徽面</text> | ||
| 92 | + </view> | ||
| 93 | + </view> | ||
| 94 | + </view> | ||
| 95 | + <view class="add-list"> | ||
| 96 | + <view style="line-height: 60rpx;">上传示例</view> | ||
| 97 | + <view class="deom-box"> | ||
| 98 | + <view class="img-deom"> | ||
| 99 | + <u-image width="304rpx" height="182rpx" src="/static/images/front-icon.png"></u-image> | ||
| 100 | + <text>人脸示例图</text> | ||
| 101 | + </view> | ||
| 102 | + <view class="img-deom"> | ||
| 103 | + <u-image width="304rpx" height="182rpx" src="/static/images/back-icon.png"></u-image> | ||
| 104 | + <text>国徽面示例图</text> | ||
| 105 | + </view> | ||
| 106 | + </view> | ||
| 91 | </view> | 107 | </view> |
| 92 | - </view> | ||
| 93 | - <view class="voucher-img"> | ||
| 94 | - <view class="voucher-list"> | ||
| 95 | - <image :src="$imgUrl('/voucher_bg.png')" ></image> | 108 | + <text style="display: inline-block; font-size: 24rpx; line-height: 30px; margin: 24rpx 30rpx 0;">请拍摄证件原件，保证照片拍摄清晰，取图完整，不反光。</text> |
| 109 | + <view class="add-list" labelPosition="left" :model="model1" :rules="rules" ref="uForm" :labelWidth="250"> | ||
| 110 | + <u-form-item label="是否为法人" prop="name" borderBottom> | ||
| 111 | + <u-radio-group v-model="model1.name"> | ||
| 112 | + <u-radio :name="1">是</u-radio> | ||
| 113 | + <u-radio :name="2">否</u-radio> | ||
| 114 | + </u-radio-group> | ||
| 115 | + </u-form-item> | ||
| 116 | + <u-form-item label="企业授权书" prop="name" borderBottom labelPosition="top"> | ||
| 117 | + <u-upload :active="active" :file-list="model1.fileList" ></u-upload> | ||
| 118 | + </u-form-item> | ||
| 96 | </view> | 119 | </view> |
| 97 | - </view> | 120 | + </u-form> |
| 98 | </view> | 121 | </view> |
| 99 | </view> | 122 | </view> |
| 100 | <!-- 保存按钮 --> | 123 | <!-- 保存按钮 --> |
| 101 | - <view class="page-footer" @click="go"> | ||
| 102 | - <view class="footer-buy"> | ||
| 103 | - <view class="cart-add"> | ||
| 104 | - <text>提交</text> | ||
| 105 | - </view> | ||
| 106 | - </view> | 124 | + <view class="page-footer"> |
| 125 | + <u-button style="background-color: #DFE0E4; flex: 1; margin: 0 10px;" @click="toBefor" v-if="active != 0">上一步</u-button> | ||
| 126 | + <u-button type="success" style="flex: 1; margin: 0 10px;" @click="toNext" v-if="active != 2">下一步</u-button> | ||
| 127 | + <u-button type="success" style="flex: 1; margin: 0 10px;" @click="go" v-if="active == 2">提交申请</u-button> | ||
| 107 | </view> | 128 | </view> |
| 108 | </view> | 129 | </view> |
| 109 | </template> | 130 | </template> |
| @@ -112,6 +133,23 @@ | @@ -112,6 +133,23 @@ | ||
| 112 | export default { | 133 | export default { |
| 113 | data() { | 134 | data() { |
| 114 | return { | 135 | return { |
| 136 | + active: 2, | ||
| 137 | + numList: [{name: '租赁信息'}, {name: '主体信息'}, {name: '经营者信息'}], | ||
| 138 | + model1: { | ||
| 139 | + name: '', | ||
| 140 | + type: '', | ||
| 141 | + typeShow: false, | ||
| 142 | + fileList: [], // 文件列表 | ||
| 143 | + }, | ||
| 144 | + rules: {}, | ||
| 145 | + // 类型 | ||
| 146 | + showType: false, | ||
| 147 | + activesType: [ | ||
| 148 | + {value: 1, label: '类型1'}, | ||
| 149 | + {value: 2, label: '类型2'}, | ||
| 150 | + ], | ||
| 151 | + // 上传文件 | ||
| 152 | + active: '', // 地址 | ||
| 115 | 153 | ||
| 116 | }; | 154 | }; |
| 117 | }, | 155 | }, |
| @@ -126,10 +164,21 @@ | @@ -126,10 +164,21 @@ | ||
| 126 | } | 164 | } |
| 127 | }, | 165 | }, |
| 128 | methods:{ | 166 | methods:{ |
| 167 | + typeChange(e) { | ||
| 168 | + this.model1.type = e[0].label; | ||
| 169 | + }, | ||
| 129 | go(){ | 170 | go(){ |
| 130 | uni.navigateTo({ | 171 | uni.navigateTo({ |
| 131 | url: '/pages/record/record' | 172 | url: '/pages/record/record' |
| 132 | }) | 173 | }) |
| 174 | + }, | ||
| 175 | + // 上一步 | ||
| 176 | + toBefor() { | ||
| 177 | + this.active = +this.active - 1; | ||
| 178 | + }, | ||
| 179 | + // 下一步 | ||
| 180 | + toNext() { | ||
| 181 | + this.active = +this.active + 1; | ||
| 133 | } | 182 | } |
| 134 | } | 183 | } |
| 135 | } | 184 | } |