Commit c213ec83eec780a129478f594b6af7c79fc45800
1 parent
c62ab6f2
商铺详情，新增
Showing
4 changed files
with
411 additions
and
287 deletions
pages/details/details.scss
| 1 | 1 | .page { |
| 2 | - position: absolute; | |
| 2 | + position: relative; | |
| 3 | 3 | width: 100%; |
| 4 | 4 | // height: 100%; |
| 5 | 5 | overflow-x: hidden; |
| 6 | 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 | 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 | 58 | display: flex; |
| 59 | + justify-content: space-between; | |
| 84 | 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 | 75 | display: flex; |
| 93 | 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 | 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 | 137 | .page-footer{ |
| 118 | 138 | position: fixed; |
| 119 | 139 | left: 0; |
| 120 | 140 | bottom: 0; |
| 121 | 141 | display: flex; |
| 142 | + align-items: center; | |
| 143 | + justify-content: center; | |
| 122 | 144 | width: 100%; |
| 123 | - height: 100rpx; | |
| 145 | + height: 125rpx; | |
| 124 | 146 | background-color: #FFFFFF; |
| 125 | 147 | padding-bottom: constant(safe-area-inset-bottom); |
| 126 | 148 | padding-bottom: env(safe-area-inset-bottom); |
| 127 | - .footer-buy{ | |
| 149 | + .footer-btn { | |
| 128 | 150 | display: flex; |
| 151 | + width: 70vw; | |
| 152 | + } | |
| 153 | + .footer-service { | |
| 154 | + display: flex; | |
| 155 | + flex-direction: column; | |
| 129 | 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 | 164 | \ No newline at end of file | ... | ... |
pages/details/details.vue
| 1 | 1 | <template> |
| 2 | 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 | 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 | 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 | 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 | 95 | </view> |
| 77 | 96 | </view> |
| 78 | 97 | </template> |
| ... | ... | @@ -82,22 +101,26 @@ |
| 82 | 101 | export default { |
| 83 | 102 | data() { |
| 84 | 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 | 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 | 125 | methods: { |
| 103 | 126 | leaseAdd(){ | ... | ... |
pages/leaseAdd/leaseAdd.scss
| ... | ... | @@ -3,9 +3,13 @@ |
| 3 | 3 | left: 0; |
| 4 | 4 | top: 0; |
| 5 | 5 | width: 100%; |
| 6 | - height: 100%; | |
| 6 | + overflow-y: scroll; | |
| 7 | + height: calc(100% - 120rpx); | |
| 7 | 8 | background-color: #f6f6f6; |
| 8 | 9 | } |
| 10 | +.steps-box { | |
| 11 | + padding-top: 40rpx; | |
| 12 | +} | |
| 9 | 13 | |
| 10 | 14 | .add-list{ |
| 11 | 15 | padding: 0 4%; |
| ... | ... | @@ -13,7 +17,6 @@ |
| 13 | 17 | border-radius: 20rpx; |
| 14 | 18 | margin-top: 20rpx; |
| 15 | 19 | width: 100%; |
| 16 | - padding-bottom: 150rpx; | |
| 17 | 20 | .list{ |
| 18 | 21 | display: flex; |
| 19 | 22 | justify-content: space-between; |
| ... | ... | @@ -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 | 99 | left: 0; |
| 65 | 100 | bottom: 0; |
| 66 | 101 | display: flex; |
| 102 | + align-items: center; | |
| 67 | 103 | width: 100%; |
| 68 | - height: 100rpx; | |
| 104 | + height: 125rpx; | |
| 69 | 105 | background-color: #FFFFFF; |
| 70 | 106 | padding-bottom: constant(safe-area-inset-bottom); |
| 71 | 107 | padding-bottom: env(safe-area-inset-bottom); | ... | ... |
pages/leaseAdd/leaseAdd.vue
| 1 | 1 | <template> |
| 2 | 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 | 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 | 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 | 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 | 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 | 119 | </view> |
| 97 | - </view> | |
| 120 | + </u-form> | |
| 98 | 121 | </view> |
| 99 | 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 | 128 | </view> |
| 108 | 129 | </view> |
| 109 | 130 | </template> |
| ... | ... | @@ -112,6 +133,23 @@ |
| 112 | 133 | export default { |
| 113 | 134 | data() { |
| 114 | 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 | 164 | } |
| 127 | 165 | }, |
| 128 | 166 | methods:{ |
| 167 | + typeChange(e) { | |
| 168 | + this.model1.type = e[0].label; | |
| 169 | + }, | |
| 129 | 170 | go(){ |
| 130 | 171 | uni.navigateTo({ |
| 131 | 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 | } | ... | ... |