zx_flk_app/pages/batteryPackage/batteryPackage.vue

<template>
	<view class="battery-package-main">
		<navBar bgColor="#fff" name="换电套餐" />
		
		<view class="package-icon-view flex-row">
			<img src="https://qiniu.bms16.com/FqF7erLOB8OutmFnre7-mbTkwpZr" alt="">
			<view class="package-icon-text flex-row">5秒换电，瞬间满电，畅享骑行新体验！</view>
		</view>
		<view v-for="(item,index) of list" @click="selectItem(item)" :key="index" class="package-list-view" :class="{'active' : item.package_code == form.package_code }">
			<view class="package-num-view flex-row"><text class="package-num">{{item.total_day || 0}}</text> 天 <text
					class="package-num">{{(item.total_num || 0)=== 0 ? '不限次数' : item.total_num + '次'}}</text></view>
			<view class="flex-row flex-between align-baseline">
				<view v-if="item.tag.child_tag_name" class="apply-battery">适用电池：<text class="apply-battery-num">{{ !!Number(item.tag.main_tag_name) ? item.tag.main_tag_name + "V" : item.tag.main_tag_name}}{{!!Number(item.tag.child_tag_name) ? item.tag.child_tag_name + "Ah" : item.tag.child_tag_name }}</text></view>
				
				<view v-else class="apply-battery">适用电池：<text class="apply-battery-num">{{ item.tag.main_tag_name }}</text></view>
				<view class="flex-row align-baseline">
					<!-- <text class="package-price">${{item.viewShowMoney || '0.00'}}</text> -->
					<text class="symbol-style">
						<text>$</text>
						<text style="font-size: 48rpx;">{{item.viewMoney || '0.00'}}</text>
						<!-- <text style="font-size: ;">.{{Math.floor((item.viewMoney - Math.floor(item.viewMoney))) || 0}}</text> -->
					</text>

				</view>
			</view>
		</view>
<!-- 		<view class="package-list-view">
			<view class="package-num-view flex-row"><text class="package-num">10</text> 天 <text
					class="package-num">10</text> 次</view>
			<view class="flex-row flex-between align-baseline">
				<view class="apply-battery">适用电池：<text class="apply-battery-num">48v20Ah</text></view>
				<view class="flex-row align-baseline">
					<text class="package-price">$35.9</text>
					<text class="symbol-style">
						<text>$</text>
						<text style="font-size: 64rpx;">23</text>
						<text style="font-size: ;">.0</text>
					</text>

				</view>
			</view>
		</view> -->
		<view class="flex-row package-tip" style="flex-direction: column;">
			<view class="flex-row" style="margin-bottom: 16rpx;">当前购买为虚拟IC卡</view>
			<view class="flex-row">如想要体验实体IC卡功能，前往最近的门店领取IC卡</view>
		</view>
		<view style="height: 200rpx;">
			
		</view>
		<view v-if="form.package_code" @click="isShowToBuy = true"  class="pay-btn">立即购买</view>
		<payTypeModel @closeShow='isShowToBuy = false' :free_price='form.price' :isShowToBuy='isShowToBuy' @payToOrder='submit'></payTypeModel>
	</view>
</template>

<script>
import { fenToYuan, msg } from '../../utils/util.js';

	const http = require('../../common/request.js');
	const config = require('../../common/config_gyq.js');
	import payTypeModel from '@/component/payTypeModel/payTypeModel';
	export default {
		components:{payTypeModel},
		data() {
			return {
				isShowToBuy:false,
				list:[],
				form:{
					pay_type:0,
					car_sn:"",
					package_code:"",
					price:""
				},
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
			this.listFn()
			
		},
		methods: {
			async submit(payType){
				this.form.pay_type = payType
				if(!this.form.car_sn){
					msg('请先绑定车辆！')
					return
				}
				uni.showLoading({
					mask:true,
					title:'提交中...'
				})
				let {
					data
				} = await http.postApi(config.API_FLK_EXCHANGE_PACKAGE_PAY, this.form)
				uni.hideLoading()
				console.log(data)
				if(data.code == 200){
					uni.navigateTo({
						url:`/pages/order/order`
					})
				}else{
					msg(data.msg)
				}
				this.isShowToBuy = false
			},
			selectItem(item){
				this.form.package_code = item.package_code
				this.form.price = item.money
			},
			async listFn() {
				let car_sn = uni.getStorageSync('car_info').car_sn || ''
				this.form.car_sn = car_sn
				let {
					data
				} = await http.postApi(config.API_FLK_EXCHANGE_PACKAGE_PACKAGE_LIST, {
					car_sn
				})
				if(data.code == 200){
					data.data.list.map(item=>{
						item.viewShowMoney = (item.show_money / 100).toFixed(2)
						item.viewMoney = (item.money / 100).toFixed(2)
					})
					if(data.data.list.length > 0){
						this.form.package_code = data.data.list[0].package_code
						this.form.price = data.data.list[0].money
					}
					this.list = data.data.list
					
				}
			},
		}
	};
</script>
<style>
	@import './batteryPackage.css';
</style>