已对接6个接口

准备回复订单详情页面
2020-08-22 09:55:17 +08:00
parent 85e6ba710e
commit b68df95618
24 changed files with 4443 additions and 234 deletions
--- a/components/OrderOil.vue
+++ b/components/OrderOil.vue
@@ -0,0 +1,127 @@
+<template>
+	<view>
+		<view class="content text-left padding">
+			<view class="strong padding-bottom-xs color-333 ">
+				{{'oilSiteName'}}
+			</view>
+			<view class="font-12 color-999">
+				<text class="padding-right">1.32km</text> | <text class="padding-left text-cut">紫云路与金寨南路交口向西200...</text>
+			</view>
+		</view>
+		<view class="padding-left padding-right">
+			<view class="padding-bottom-sm">
+				油号选择：
+			</view>
+			<view class="grid col-5 justify-start">
+				<view class="padding-xs" v-for="(item,index) in ColorList" :key="index">
+					<button class="cu-btn" :class="[active===index?'bg-main-oil':'line-gray']">92#</button>
+				</view>
+			</view>
+		</view>
+		<view class="padding-top-xs padding-left padding-right">
+			<text class="strong padding-right font-16">
+				0#柴油
+			</text>
+			<text class="padding-right">星油价格:<text class="oil-main-color text-bold">￥6.41/L</text></text>
+			<text class="s-rich">市场价:￥6.5/L</text>
+		</view>
+		<view class="padding-left padding-right">
+			<view class="padding-bottom-sm">
+				油枪选择：
+			</view>
+			<view class="grid col-5 justify-start">
+
+				<view class="padding-xs" v-for="(item,index) in ColorList" :key="index">
+					<button class="cu-btn" :class="[active===index?'bg-main-oil':'line-gray']">{{index}}</button>
+				</view>
+			</view>
+		</view>
+
+		<view class="solid-top margin-top-sm shadow-warp">
+			<view class="cu-form-group">
+				<view class="title">加油升数</view>
+				<input type="number" placeholder="请输入加油升数" name="input"></input>
+				<text>约￥0.00</text>
+			</view>
+			<view class="my-cell">
+				<text class="font-12">星卡优惠金额</text><text class="fr">-￥0.00</text>
+			</view>
+			<view class="my-cell">
+				<text class="font-12">实际支付金额</text><text class="oil-main-color fr">￥0.00</text>
+			</view>
+		</view>
+		<button class="margin  round bg-main-oil">确定</button>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				active: 0,
+				ColorList: [1, 2, 9, 10]
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.page-content {
+		background-color: #F1F2F7;
+		min-height: 100%;
+		position: relative;
+	}
+
+	.navigation {
+		position: absolute;
+		right: 16px;
+		top: 10px;
+	}
+
+	.icon-self {
+		width: 1rem;
+		height: 1rem;
+	}
+
+	.oil-price {
+		position: relative;
+	}
+
+	.oil-price radio {
+		position: absolute;
+		left: 0rem;
+		top: 10px;
+	}
+
+	.qr-icon {
+		font-size: 2rem;
+	}
+
+	.pay-desc {
+		line-height: 2rem;
+	}
+
+	.bottom-pay {
+		min-height: 100rpx;
+		width: 750upx;
+	}
+
+	.pay-bar {
+		width: 750upx;
+		position: absolute;
+		bottom: 0;
+	}
+
+	.money-container {
+		position: relative;
+	}
+
+	.money-position {
+		position: absolute;
+		top: 0;
+		right: 0;
+		display: block;
+		border-radius: 0 0 0 100upx;
+	}
+</style>