Merge remote-tracking branch 'origin/2.0.1' into 2.0.1

jiangping

2025-03-18 cc6ab7021c3aef6ca3bbf05f8bcb5bfe0e6f6096

 bicycle/pages/packageDetails/packageDetails.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,229 @@
<template>
   <view class="tcx">
      <view class="tcx_bg" v-if="info">
         <view class="index_box_vip_row">
            <view class="vip1">
               <text>{{info.name || ''}}</text>
               <text>{{info.price || ''}}</text>
            </view>
            <view class="vip2">
               <text>{{info.descs || ''}}</text>
               <u>Â¥{{info.linePrice || ''}}</u>
            </view>
            <view class="vip3">
               <view class="vip3_info">低至{{info.dayPrice}}元/天</view>
            </view>
         </view>
         <view class="info">
            <view class="info_title">适用规则</view>
            <view class="info_list">
               <view class="info_list_row">
                  Â· é€‚用项目：<template v-if="info.isbike === 1">自行车</template>
                  <template v-if="info.isbike === 1 && info.iselecbike === 1"> | </template>
                  <template v-if="info.iselecbike === 1">电动车</template>
               </view>
               <view class="info_list_row">
                  Â· é€‚用范围：
                  <tempalte v-if="info.useHoliday === 1">节假日可用</tempalte>
                  <template v-if="info.useHoliday === 1 && info.useWorkday === 1"> | </template>
                  <tempalte v-if="info.useWorkday === 1">工作日可用</tempalte>
               </view>
               <view class="info_list_row">
                  Â· ç”Ÿæ•ˆæ—¶é—´ï¼š
                  <tempalte v-if="info.useType === 0">{{info.useStartDate}}至{{info.useEndDate}}内有效</tempalte>
                  <tempalte v-if="info.useType === 1">购买后生效，有效期{{info.useDays}}天</tempalte>
                  <tempalte v-if="info.useType === 2">自{{info.useStartDate}}èµ·{{info.useDays}}天内有效</tempalte>
               </view>
            </view>
         </view>
         <view class="info">
            <view class="info_title">套餐说明</view>
            <view class="info_text">
               <u-parse :content="info.content"></u-parse>
            </view>
         </view>
         <view style="width: 100%; height: calc(96rpx + 20rpx + env(safe-area-inset-bottom));"></view>
      </view>
      <view class="tcx_footer" @click="jump">
         <viwe class="tcx_footer_button">Â¥{{info.price || ''}} è´­ä¹°å¥—餐</viwe>
         <view style="padding-bottom: env(safe-area-inset-bottom)"></view>
      </view>
   </view>
</template>

<script>
   export default {
      data() {
         return {
            id: null,
            info: null
         };
      },
      onLoad(options) {
         this.id = options.id
         this.getDesc()
      },
      methods: {
         async getDesc() {
            let res = await this.$u.api.discountDetail({ id: this.id })
            if (res.code === 200) {
               this.info = res.data
            }
         },
         jump() {
            uni.navigateTo({
               url: `/pages/paymentPage/paymentPage?id=${this.info.id}`
            });
         },
         calculateDays(startDate, endDate) {
            if (startDate && endDate) {
               const start = new Date(startDate).getTime();
               const end = new Date(endDate).getTime();
               const days = (end - start) / (1000 * 3600 * 24) + 1;
               return days;
            };
         }
      }
   }
</script>
<style>
   page {
      background-color: #F7F7F7;
   }
</style>
<style lang="scss" scoped>
   .tcx {
      width: 100%;
      .tcx_bg {
         width: 100%;
         height: 400rpx;
         padding: 40rpx 20rpx;
         box-sizing: border-box;
         background: linear-gradient(#01B6AD 0%, #F7F7F7 100%);
         .index_box_vip_row {
            width: 100%;
            background: #FFFFFF;
            box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.06);
            border-radius: 12rpx;
            padding: 24rpx;
            box-sizing: border-box;
            .vip1 {
               width: 100%;
               display: flex;
               align-items: start;
               justify-content: space-between;
               text {
                  &:nth-child(1) {
                     font-weight: 500;
                     font-size: 32rpx;
                     color: #303030;
                  }
                  &:nth-child(2) {
                     font-weight: 400;
                     font-size: 40rpx;
                     color: #FF5A31;
                     &:before {
                        content: 'ï¿¥';
                        font-weight: 400;
                        font-size: 26rpx;
                        color: #FF5A31;
                     }
                  }
               }
            }
            .vip2 {
               width: 100%;
               display: flex;
               align-items: start;
               justify-content: space-between;
               margin-top: 10rpx;
               margin-bottom: 16rpx;
               text {
                  font-weight: 400;
                  font-size: 26rpx;
                  color: #777777;
               }
               u {
                  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;
               }
            }
         }
         .info {
            width: 100%;
            padding: 32rpx 30rpx;
            box-sizing: border-box;
            background: #FFFFFF;
            border-radius: 20rpx;
            margin-top: 20rpx;
            .info_title {
               font-weight: 600;
               font-size: 32rpx;
               color: #303030;
               margin-bottom: 26rpx;
            }
            .info_list {
               width: 100%;
               display: flex;
               flex-direction: column;
               .info_list_row {
                  font-weight: 400;
                  font-size: 28rpx;
                  color: #333333;
                  margin-bottom: 20rpx;
                  &:last-child {
                     margin: 0 !important;
                  }
               }
            }
            .info_text {
               width: 100%;
               font-weight: 400;
               font-size: 28rpx;
               color: #333333;
            }
         }
      }
      .tcx_footer {
         padding: 0 20rpx;
         box-sizing: border-box;
         position: fixed;
         bottom: 0;
         left: 0;
         width: 100%;
         display: flex;
         flex-direction: column;
         z-index: 999;
         .tcx_footer_button {
            width: 100%;
            height: 96rpx;
            line-height: 96rpx;
            text-align: center;
            background: #01B6AD;
            box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(1,182,173,0.24);
            border-radius: 46rpx;
            font-weight: 500;
            font-size: 32rpx;
            color: #FFFFFF;
            margin-bottom: 20rpx;
         }
      }
   }
</style>