| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122 |
- <template>
- <view class="content">
- <scroll-view scroll-y="true" class="list-wrap" :style="{'height': maxheight}">
- <view class="user-item flex">
- <image src="" mode="" class="item-logo"></image>
- <view class="item-info flex">
- <view class="info-name">
- 李丹丹 13523025369
- </view>
- <view class="info-address">
- 椒江区东海大道400号
- </view>
- <view class="info-t">
- 空桶型号:小瓶330ML
- </view>
- <view class="info-info flex">
- <view class="">
- 押桶:<text>0</text>
- </view>
- <view class="">
- 押金:<text>0</text>元
- </view>
- <view class="">
- 借桶:<text>0</text>
- </view>
- </view>
- </view>
- </view>
- </scroll-view>
- </view>
- </template>
- <script>
- import {
- getUserList
- } from "@/api/user.js"
- export default {
- data() {
- return {
- maxheight: '',
- };
- },
- onLoad(opt) {
- this.getUserList()
- },
- onShow() {
- },
- onReady(res) {
- var that = this;
- uni.getSystemInfo({
- success: resu => {
- const query = uni.createSelectorQuery();
- query.select('.list-wrap').boundingClientRect();
- query.exec(function(res) {
- that.maxheight = resu.windowHeight - res[0].top + 'px';
- });
- },
- fail: res => {}
- });
- },
- onReachBottom() {
- },
- methods: {
- getUserList() {
- getUserList().then(res => {
- console.log(res);
- })
- }
- }
- };
- </script>
- <style lang="scss" scoped>
- .user-item {
- width: 750rpx;
- height: 277rpx;
- align-items: flex-start;
- padding: 42rpx 35rpx;
- background-color: #fff;
- margin-bottom: 15rpx;
- .item-logo {
- width: 115rpx;
- height: 115rpx;
- border-radius: 50%;
- background-color: #eee;
- flex-shrink: 0;
- margin-right: 24rpx;
- }
- .item-info {
- flex-grow: 1;
- height: 100%;
- flex-direction: column;
- align-items: flex-start;
- justify-content: space-between;
- .info-name {
- font-size: 34rpx;
- font-weight: bold;
- color: #333333;
- }
- .info-address {
- font-size: 28rpx;
- font-weight: 500;
- color: #333333;
- }
- .info-t {
- font-size: 26rpx;
- font-weight: 500;
- color: #333333;
- }
- .info-info {
- width: 100%;
- font-size: 30rpx;
- font-weight: bold;
- color: #333333;
- text {
- color: #FF4C4C;
- }
- }
-
- }
- }
- </style>
|