jiangping
2025-03-18 cc6ab7021c3aef6ca3bbf05f8bcb5bfe0e6f6096
bicycle/pages/setMenu/setMenu.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,175 @@
<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>