zx_flk_app/pages/batteryPackage/batteryPackage.vue

<template>
	<view class="battery-package-main">
		<navigation :scroll='scrollTop' :type="true" :name="$t('换电套餐')" />
		<view class="package-icon-view flex-row">
			<img src="https://qiniu.bms16.com/FqF7erLOB8OutmFnre7-mbTkwpZr" alt="">
			<view class="package-icon-text flex-row">5 {{ $t('秒换电，瞬间满电，畅享骑行新体验！') }}</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> {{ $t('天') }} <text
					class="package-num">{{(item.total_num || 0)=== 0 ? $t('不限次数') : item.total_num + $t('次')}}</text></view>
			<view class="flex-row flex-between align-baseline">
				<view v-if="item.tag.child_tag_name" class="apply-battery">{{ $t('适用电池：') }}<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">{{ $t('适用电池：') }}<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> {{ $t('天') }} <text
					class="package-num">10</text> {{ $t('次') }}</view>
			<view class="flex-row flex-between align-baseline">
				<view class="apply-battery">{{ $t('适用电池：') }}<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;">{{ $t('当前购买为虚拟') }}IC{{ $t('卡') }}</view>
			<view class="flex-row">{{ $t('如想要体验实体') }}IC{{ $t('卡功能，前往最近的门店领取') }}IC{{ $t('卡') }}</view>
		</view>
		<view style="height: 200rpx;">
			
		</view>
		<view v-if="form.package_code" @click="isShowToBuy = true"  class="pay-btn">{{ $t('需到店支付') }}</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},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		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(this.$t('请先绑定车辆！'))
					return
				}
				uni.showLoading({
					mask:true,
					title:this.$t('提交中')+'...'
				})
				let {
					data
				} = await http.postApi(config.API_FLK_EXCHANGE_PACKAGE_PAY, this.form)
				uni.hideLoading()
				if(data.code == 200){
					uni.navigateTo({
						url:`/pages/order/order?selectOrderType=0`
					})
				}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>