更新

MrShi

2025-02-25 9dfc54bf6e0fdb3c746815707487c6ae50e98905

 bicycle/pages/packageDetails/packageDetails.vue

@@ -1,39 +1,51 @@
<template>
   <view class="tcx">
      <view class="tcx_bg">
      <view class="tcx_bg" v-if="info">
         <view class="index_box_vip_row">
            <view class="vip1">
               <text>电单车年卡</text>
               <text>365</text>
               <text>{{info.name || ''}}</text>
               <text>{{info.price || ''}}</text>
            </view>
            <view class="vip2">
               <text>365天畅骑，享受骑车乐趣</text>
               <u>¥699</u>
               <text>{{info.descs || ''}}</text>
               <u>¥{{info.linePrice || ''}}</u>
            </view>
            <view class="vip3">
               <view class="vip3_info">低至1元/天</view>
               <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">· 适用项目：电动车</view>
               <view class="info_list_row">· 适用项目：电动车</view>
               <view class="info_list_row">· 适用项目：电动车</view>
               <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">
         <viwe class="tcx_footer_button" @click="jump">¥365 购买套餐</viwe>
      <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>
@@ -43,14 +55,33 @@
   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/packageDetails'
               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;
            };
         }
      }
   }
@@ -71,7 +102,6 @@
         background: linear-gradient(#01B6AD 0%, #F7F7F7 100%);
         .index_box_vip_row {
            width: 100%;
            height: 226rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.06);
            border-radius: 12rpx;
@@ -80,7 +110,7 @@
            .vip1 {
               width: 100%;
               display: flex;
               align-items: center;
               align-items: start;
               justify-content: space-between;
               text {
                  &:nth-child(1) {
@@ -104,7 +134,7 @@
            .vip2 {
               width: 100%;
               display: flex;
               align-items: center;
               align-items: start;
               justify-content: space-between;
               margin-top: 10rpx;
               margin-bottom: 16rpx;
@@ -117,6 +147,7 @@
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #999999;
                  text-decoration: line-through;
               }
            }
            .vip3 {
@@ -179,6 +210,7 @@
         width: 100%;
         display: flex;
         flex-direction: column;
         z-index: 999;
         .tcx_footer_button {
            width: 100%;
            height: 96rpx;