energy-front/pages/subpackages/components/commodity.vue

<template>
	<!-- <view class="dis_col_evenly" :style="{'width': windowWidth + 'px'}"> -->
	<view class="dis_col_evenly" style="width: 100%;">
		<text class="t_1">
			选择套餐
		</text>
		<view class="info_item">
			<text @click="handle_choose(reservetion_list[0].id)" class="com_info ischeck_choose">
				{{reservetion_list[0].name}}
			</text>
		</view>

		<view>
			<text style="font-size: 13px">租车定价规则:</text>
			<view style="flex-direction: row; width: 100%;">
				<view class="" style="margin-right: 10px;">
					<text style="font-size: 12px">起步价: {{billing_info.startingFare}} 元</text>
					<!-- <text style="font-size: 12px"></text> -->
				</view>
				<view class="" style="margin-right: 10px;">
					<text style="font-size: 12px">起步时间设置: {{billing_info.startingTime}} 分钟</text>
					<!-- <text style="font-size: 12px"></text> -->
				</view>
				<text style="font-size: 12px; ">每分钟计费: {{billing_info.billingPerMinute}} 元</text>
			</view>
			<view style="flex-direction: row; width: 100%;">
				<view class="" style="margin-right: 10px;">
					<text style="font-size: 12px">保险费用: {{billing_info.insuranceExpense}} 元</text>
					<!-- <text style="font-size: 12px"></text> -->
				</view>
				<view class="" style="margin-right: 10px;">
					<text style="font-size: 12px">vip折扣: {{billing_info.vipPrice}}折</text>
					<!-- <text style="font-size: 12px"></text> -->
				</view>
				<text style="font-size: 12px; ">超出还车范围调度费: {{billing_info.dispatchingCost}} 元</text>
			</view>
		</view>
		<!-- <text class="icon iconfont icon-diandongche" style="font-size: 20px;"></text> -->
		<view class="t_3">
			<!-- <input type="text" placeholder="请输入车牌号" class="style_input" v-model="input_value" /> -->
			<!-- <text class="btn_now" style="background: #eff0f4; color: #000;" @click="handlegoback">
				返回上一级
			</text> -->
			<text class="btn_now" style="width: 120px;" @click="no_commodity">
				不选择套餐直接骑行
			</text>
			<text class="btn_now" @click="made_car" style="width: 120px;">
				支付套餐并开始骑行
			</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		toRefs,
		defineProps,
		defineEmits
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReady
	} from '@dcloudio/uni-app';
	import {
		baseUrl,
		apiPath
	} from '@/sheep/config';
	import sheep from '@/sheep';
	import mapnvueApi from '@/sheep/api/home/mapnvue';
	const props = defineProps({
		reservetion_list: Array,
		rideOrderId: Number,
		check_number: String
	})
	const emit = defineEmits(['active', 'ride_id'])
	const all_props = toRefs(props)
	const info = uni.getSystemInfoSync()
	const windowWidth = info.windowWidth
	// console.log(windowWidth, 'windowWidth')
	const windowHeight = info.windowHeight
	const input_value = ref('')

	const style_input = ref({
		color: '#2979FF',
		borderColor: '#2979FF'
	})
	const isactive = ref(0)
	onShow(() => {
		getbilling()
		handle_choose()
	})
	// 
	const billing_info = ref({})

	async function getbilling() {
		const {
			data,
			code
		} = await mapnvueApi.riding_billing()
		if (code == 0) {
			billing_info.value = data
		} else {
			// console.log(res, '租车信息获取失败')
		}
	}
	// 
	async function made_car() {

		let val = {
			items: [{
				skuId: skus_id.value,
				count: 1
			}],
			pointStatus: false,
			deliveryType: 2,
			// rideId: all_props.rideOrderId.value
			rideId: uni.getStorageSync('rideOrderId')
		}
		// console.log(data,'data')
		const {
			data,
			code
		} = await mapnvueApi.order_create(val)
		if (code == 0) {
			// emit('active', 3)
			sheep.$router.go('/pages/pay/index', {
				id: data.payOrderId,
				type: '套餐支付'
			})
		} else {
			uni.showToast({
				icon: 'error',
				title: '骑行失败'
			})
		}
	}
	// 
	function must_go() {

	}
	// 
	//
	const skus_id = ref(0)

	async function handle_payment(val) {
		const {
			data,
			code
		} = await mapnvueApi.spu_get_detail(val)
		if (code == 0) {
			skus_id.value = data.skus[0].id
		} else {
			// 商品 SPU【{}】不处于上架状态
		}
	}
	// 
	const fault_choose = ref(false)
	// const check_id = ref(0)

	function handle_choose() {
		let data = all_props.reservetion_list.value[0].id
		// fault_choose.value = !fault_choose.value
		// check_id.value = data
		handle_payment(data)
	}
	// 
	function handlegoback() {
		emit('active', 5)
	}

	// 不选套餐直接骑行
	async function no_commodity() {
		let ride_ids = uni.getStorageSync('rideOrderId')
		const {
			data,
			code,
			msg
		} = await mapnvueApi.startRide(ride_ids)
		if (code == 0) {
			uni.setStorageSync('pay_type', '不支付直接骑行')
			emit('active', 3)
		} else {
			uni.showModal({
				title: '错误',
				content: msg,
				success: (res) => {}
			});
		}
	}
</script>

<style lang="scss" scoped>
	.dis_col_evenly {
		// width: 100%;
		height: 200px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		padding: 10px 20px;
		box-sizing: border-box;
	}

	.t_1 {
		width: 100%;
		font-weight: 600;
		font-size: 14px;
		text-align: center;
	}

	.t_2 {
		font-size: 12px;
		color: #999999;
		margin-top: 5px;
	}

	.info_item {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.com_info {
		line-height: 30px;
		padding: 0 5px;
		font-size: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
	}

	.t_3 {
		// width: 500px;
		// padding: 10px 40px;
		flex-direction: row;
		width: 100%;
		justify-content: space-between;
	}

	.operate {
		// margin-top: 10px;
		flex-direction: row;
		height: 30px;
		// align-items: center;
		justify-content: space-between;
		align-items: center;
		// background: skyblue;
		padding: 0 60px;
	}

	.operate_item_text {
		font-size: 12px;
		// margin-top: 10px;
		// width: 50px;
	}

	.style_input {
		border: 1px solid #ccc;
		color: #000;
		font-size: 12px;
		border-radius: 3px;
		height: 40px;
		text-align: center;
	}

	.btn_now {
		width: 80px;
		// margin: 0 10px;
		height: 40px;
		background: #4f918d;
		color: #fff;
		font-size: 12px;
		border-radius: 3px;
		line-height: 40px;
		text-align: center;
		// margin-top: 10px;
	}

	.ischeck_choose {
		background: #00aaff;
		color: #fff;
		opacity: 0.8;
		border-color: #00aaff;
	}
</style>