支付宝小程序，查询电价和服务费

pages/index/index.vue

@@ -145,79 +145,43 @@
 				</view>
 			</view>
 			<!-- 用户自定义是否显示主板计费规则 -->
-			<span v-if="isempty(fee_tpl.board_rules_hide)">
-				<view class="ct-ck1" v-show="tip_panel_show">
-					<span v-if="data.fee_type==2&&goods.coin_1_tp<10">
-						<view style=" text-align: justify;
-			                text-justify:inter-ideograph;">
-							功率范围: 0-{{goods.power_max_1-1}}W 1小时 {{goods.coin_1_tp}}/10}元
-						</view>
-						<view>
-							{{goods.power_max_1}}-{{goods.power_max_2 - 1}}W 1小时 {{goods.coin_2_tp/10}}元
-						</view>
-						<view>
-							{{goods.power_max_2}}-{{goods.power_max_3 - 1}}W 1小时 {{goods.coin_3_tp/10}}元
-						</view>
-						<view>
-							{{goods.power_max_3}}-{{goods.power_max_4 - 1}}W 1小时 {{goods.card_1_tp/10}}元
-						</view>
-						<view>
-							{{goods.power_max_4}}W及以上 1小时 {{goods.card_2_tp/10}}元
-						</view>
-					</span>
-					<span v-if="data.fee_type==2">
-						<view style=" text-align: justify;
-			                text-justify:inter-ideograph;">
-							功率范围: 0-{{goods.power_max_1 - 1}}W 1小时 {{goods.coin_1_tp/100}}元
-						</view>
-						<view>
-							{{goods.power_max_1}}-{{goods.power_max_2 - 1}}W 1小时 {{goods.coin_2_tp/100}}元
-						</view>
-						<view>
-							{{goods.power_max_2}}-{{goods.power_max_3 - 1}}W 1小时 {{goods.coin_3_tp/100}}元
-						</view>
-						<view>
-							{{goods.power_max_3}}-{{goods.power_max_4 - 1}}W 1小时 {{goods.card_1_tp/100}}元
-						</view>
-						<view>
-							{{goods.power_max_4}}W及以上 1小时 {{goods.card_2_tp/100}}元
-						</view>
-					</span>
-
-					<view v-if="data.fee_type==3" style=" text-align: justify;
-			                text-justify:inter-ideograph;">
-
-						服务费{{goods.port_power_max/1000}}元/度,
-						电价{{goods.card_min/1000}}元/度
-
-					</view>
-
-
-					<span v-if="data.fee_type==1&&(!isempty(params_sort[0].mny))">
-						<view style=" text-align: justify;
-			    text-justify:inter-ideograph;">
-							功率范围: 0-{{goods.power_max_1 - 1}}W 支付1元 {{params_sort[0].tm/params_sort[0].mny}} 分钟
-						</view>
-						<view>
-							{{goods.power_max_1}}-{{goods.power_max_2 - 1}}W 支付1元
-							{{goods.power_1_tim * params_sort[0].tm / (params_sort[0].mny * 100)}} 分钟
-						</view>
-						<view>
-							{{goods.power_max_2}}-{{goods.power_max_3 - 1}}W 支付1元
-							{{goods.power_2_tim * params_sort[0].tm / (params_sort[0].mny * 100)}} 分钟
-						</view>
-						<view>
-							{{goods.power_max_3}}-{{goods.power_max_4 - 1}}W 支付1元
-							{{goods.power_3_tim * params_sort[0].tm / (params_sort[0].mny * 100)}} 分钟
-						</view>
-						<view>
-							{{goods.power_max_4}}W及以上 支付1元
-							{{goods.power_4_tim * params_sort[0].tm / (params_sort[0].mny * 100)}} 分钟
-						</view>
-					</span>
-
-				</view>
-			</span>
+			
+			<view class="fee" v-if="fee_rule.show_rule" v-show="tip_panel_show">
+			              <view class="fee-h1 elec">电价({{ fee_rule.fee_type_text }})</view>
+			              <view class="ele-price-title flexSpaceBetween">
+			                <view class="title-item">{{ fee_rule.title.title1 }}</view>
+			                <view class="title-item">{{ fee_rule.title.title2 }}</view>
+			                <view class="title-item" v-if="!isempty(fee_rule.title.title3)">{{ fee_rule.title.title3 }}</view>
+			              </view>
+			              <view v-for="(item, key) in fee_rule.list" :key="key" class="time-item flexSpaceBetween">
+			                <text class="item">{{ item.v1 }}</text>
+			                <text class="item">{{ item.v2 }}</text>
+			                <text class="item" v-if="!isempty(fee_rule.title.title3)">{{ item.v3 }}</text>
+			              </view>
+			
+			              <template v-if="!isempty(fee_rule.service_fee)">
+			                <view v-if="[1, 3].includes(fee_rule.service_fee.type)" class="flexSpaceBetween service-fee">
+			                  <view class="fee-item">服务费({{ fee_rule.service_fee.type_name }})</view>
+			                  <view class="fee-item">{{ fee_rule.service_fee.config }}{{ fee_rule.service_fee.unit }}</view>
+			                </view>
+			
+			                <view v-else class="service-fee">
+			                  <view class="fee-h1">服务费({{ fee_rule.service_fee.type_name }})</view>
+			                  <view class="flexSpaceBetween sub-title">
+			                    <view>功率档位(W)</view>
+			                    <view>服务费(元/度)</view>
+			                  </view>
+			                  <view class="flexSpaceBetween sub-item" v-for="(v, k) in fee_rule.service_fee.config" :key="k">
+			                    <view class="flex"
+			                      >{{ v[0] }}<text class="sub-power" v-if="!isempty(v[1])"> ~ {{ v[1] }}</text></view
+			                    >
+			                    <view>{{ v[2] }}</view>
+			                  </view>
+			                </view>
+			              </template>
+			              <view class="fee-tips-bottom">发改委 [2024] 537号文件，实行电费+服务费的资费模式。</view>
+			        </view>
+			
 			<view v-if="!isempty(fee_tpl.full_stop_fee)" class="pay-btn-content" style="position: relative;">
 
 				<view @click="full_to_stop(data.balance, fee_tpl.full_stop_fee);" class="pay-btn item-tc"
@@ -373,6 +337,7 @@
 				goods: '',
 				port_list: '',
 				fee_tpl: '',
+				fee_rule:{},
 				params_sort: [],
 				oem_info: '',
 				ports: [{
@@ -756,6 +721,7 @@
 						_this.data = res.data.data
 						_this.params_sort = res.data.params_sort
 						_this.oem_info = res.data.oem_info
+						_this.fee_rule = res.data.fee_rule
 						uni.hideLoading();
 						// uni.showToast({
 						// 	title: '因支付宝用户系统升级,若您的余额丢失,请进入右上角 个人中心 点击同步余额功能。给您造成了不便,深表歉意。',
@@ -1165,14 +1131,31 @@
 				//计费模型展示
 				this.tip_panel_show = !this.tip_panel_show
 			},
-			isempty(item) {
-				//判断工具
-				if (item == 0 || item == '' || item == null) {
-					return true;
-				} else {
-					return false;
-				}
+			// isempty(item) {
+			// 	//判断工具
+			// 	if (item == 0 || item == '' || item == null) {
+			// 		return true;
+			// 	} else {
+			// 		return false;
+			// 	}
+			// },
+			
+			isempty(value) {
+			  if (value === null || value === undefined || value==0) {
+			    return true;
+			  }
+			  if (typeof value === 'string' && value.trim().length === 0) {
+			    return true;
+			  }
+			  if (Array.isArray(value) && value.length === 0) {
+			    return true;
+			  }
+			  if (typeof value === 'object' && Object.keys(value).length === 0) {
+			    return true;
+			  }
+			  return false;
 			},
+			
 			getStatus(status) {
 				//选择端口
 
@@ -2299,4 +2282,65 @@
 		color: #3f00ff;
 		margin-top: 20px;
 	}
+</style>
+
+<style lang="scss" scoped>
+	.flexSpaceBetween{
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+	    .fee {
+			padding:20rpx;
+	      background: #ffffff;
+	      border-radius: 10rpx;
+	      border: 1rpx solid #ccc;
+	      margin: 20rpx 0 30rpx 0;
+	      .ele-price-title {
+	        .title-item {
+	          width: 33.3333%;
+	          text-align: center;
+	        }
+	      }
+	      .time-item {
+	        font-size: 30rpx;
+	        margin: 5rpx 0;
+	        .item {
+	          width: 33.3333%;
+	          text-align: center;
+	        }
+	      }
+	      .service-fee {
+	        padding: 20rpx 0 0 20rpx;
+	        border-top: 1rpx solid #dcdfe2;
+	        margin-top: 20rpx;
+	        .fee-item {
+	          width: 50%;
+	          text-align: center;
+	          &:first-child {
+	            text-align: left;
+	          }
+	        }
+	        .sub-title {
+	          margin-bottom: 10rpx;
+	        }
+	        .sub-item {
+	          margin-bottom: 10rpx;
+	          .sub-power {
+	            margin-left: 10rpx;
+	          }
+	        }
+	      }
+	      .fee-h1 {
+	        margin-bottom: 10rpx;
+	        &.elec {
+	          padding-left: 20rpx;
+	        }
+	      }
+		  .fee-tips-bottom{
+			  padding:10rpx;
+			  background: #f9deca;
+		  }
+	    }
+		
 </style>