| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <view class="tc"> |
| | | <view class="index_box_vip_row" v-for="(item, index) in list" :key="index" @click="jump(item.id)"> |
| | | <view class="vip1"> |
| | | <view class="vip1_left"> |
| | | {{item.name || ''}} |
| | | </view> |
| | | <view class="vip1_right"> |
| | | {{item.price || ''}} |
| | | </view> |
| | | </view> |
| | | <view class="vip2"> |
| | | <text>{{item.descs || ''}}</text> |
| | | <u>Â¥{{item.linePrice || ''}}</u> |
| | | </view> |
| | | <view class="vip3"> |
| | | <view class="vip3_info">ä½è³{{item.dayPrice}}å
/天</view> |
| | | <view class="vip3_button">è´ä¹°</view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | data() { |
| | | return { |
| | | list: [], |
| | | page: 1 |
| | | }; |
| | | }, |
| | | onLoad() { |
| | | this.getList() |
| | | }, |
| | | onReachBottom() { |
| | | this.getList() |
| | | }, |
| | | methods: { |
| | | jump(id) { |
| | | uni.navigateTo({ |
| | | url: `/pages/packageDetails/packageDetails?id=${id}` |
| | | }); |
| | | }, |
| | | purchase(id) { |
| | | uni.navigateTo({ |
| | | url: `/pages/paymentPage/paymentPage?id=${id}` |
| | | }); |
| | | }, |
| | | async getList() { |
| | | let res = await this.$u.api.discountPage({ |
| | | capacity: 10, |
| | | page: this.page, |
| | | model: { |
| | | bikeOrElec: 2 |
| | | } |
| | | }) |
| | | if (res.code === 200) { |
| | | this.page += 1 |
| | | this.list.push(...res.data.records) |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style> |
| | | page { |
| | | background-color: #F7F7F7; |
| | | } |
| | | </style> |
| | | <style lang="scss" scoped> |
| | | .tc { |
| | | width: 100%; |
| | | padding: 20rpx; |
| | | box-sizing: border-box; |
| | | display: flex; |
| | | flex-direction: column; |
| | | .index_box_vip_row { |
| | | width: 100%; |
| | | height: 216rpx; |
| | | background: #FFFFFF; |
| | | box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.06); |
| | | border-radius: 12rpx; |
| | | padding: 24rpx; |
| | | box-sizing: border-box; |
| | | margin-bottom: 20rpx; |
| | | &:last-child { |
| | | margin: 0 !important; |
| | | } |
| | | .vip1 { |
| | | width: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | .vip1_left { |
| | | flex: 1; |
| | | font-weight: 500; |
| | | font-size: 32rpx; |
| | | color: #303030; |
| | | white-space: nowrap; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | text-align: left; |
| | | } |
| | | .vip1_right { |
| | | flex-shrink: 0; |
| | | font-weight: 400; |
| | | font-size: 40rpx; |
| | | color: #FF5A31; |
| | | white-space: nowrap; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | &:before { |
| | | content: 'ï¿¥'; |
| | | font-weight: 400; |
| | | font-size: 26rpx; |
| | | color: #FF5A31; |
| | | } |
| | | } |
| | | } |
| | | .vip2 { |
| | | width: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | margin-top: 10rpx; |
| | | margin-bottom: 16rpx; |
| | | text { |
| | | flex: 1; |
| | | white-space: nowrap; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | font-weight: 400; |
| | | font-size: 26rpx; |
| | | color: #777777; |
| | | text-align: left; |
| | | } |
| | | u { |
| | | flex-shrink: 0; |
| | | font-weight: 400; |
| | | font-size: 24rpx; |
| | | color: #999999; |
| | | text-decoration: line-through; |
| | | } |
| | | } |
| | | .vip3 { |
| | | width: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | .vip3_info { |
| | | padding: 6rpx 12rpx; |
| | | box-sizing: border-box; |
| | | background: rgba(255,90,49,0.1); |
| | | border-radius: 8rpx; |
| | | font-weight: 400; |
| | | font-size: 24rpx; |
| | | color: #FF5A31; |
| | | } |
| | | .vip3_button { |
| | | width: 120rpx; |
| | | height: 60rpx; |
| | | line-height: 60rpx; |
| | | text-align: center; |
| | | background: #01B6AD; |
| | | box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(1,182,173,0.24); |
| | | border-radius: 30rpx; |
| | | font-weight: 500; |
| | | font-size: 28rpx; |
| | | color: #FFFFFF; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |