lhyt_shop_applet/XCX-Shop/pages/userInfo/bindlog.vue

<template>
	<view class="body">
		<view class="content">
			<u-toast ref="uToast" />
			<view>
				<!--   <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="lower" lower-threshold="100" >
						
					   	</scroll-view> -->
				<view class="paddingOder">
					<view class="model" v-for="(item,index) in noticeList" :key=index>
						<ul>
							<li>
								<view class="Number">
									<p
										style="width: 1vw; height: 1vw; background-color: blue; border-radius: 50%; margin-top: 2vw; margin-right: 2vw;">
									</p>
									<p>品牌:</p>
									<p style="margin-left: 2vw;">{{item.model}}</p>
								</view>
								<view class="playOder">
									<p
										style="width: 1vw; height: 1vw; background-color: red; border-radius: 50%; margin-top: 2vw; margin-right: 2vw;">
									</p>
									<p>姓名:</p>
									<p style="margin-left: 2vw;">{{item.name}}</p>
								</view>
								<view class="playOder">
									<p
										style="width: 1vw; height: 1vw; background-color: red; border-radius: 50%; margin-top: 2vw; margin-right: 2vw;">
									</p>
									<p>电话:</p>
									<p style="margin-left: 2vw; ">{{item.tel}}</p>
								</view>
								<view class="playOder">
									<p
										style="width: 1vw; height: 1vw; background-color: green; border-radius: 50%; margin-top: 2vw; margin-right: 2vw;">
									</p>
									<p>车牌:</p>
									<p style="margin-left: 2vw; color: red;">{{item.number}}</p>
								</view>

							</li>
							<li :style="{backgroundColor:item.has_orders==true? 'red' : 'grey'  }"
								@click="maintenanceLog(item)"> {{ item.has_orders==true? '维修记录' : '暂无记录' }} </li>
						</ul>
					</view>
				</view>
			</view>
		</view>
		<view class="button" @click="submit">添加绑定</view>
	</view>
</template>
<script>
	export default {

		data() {
			return {
				trailerKeyboardShow: true,
				control: false,
				scrollTop: 0,
				token: '',
				noticeList: [],
				page: 1,
				totals: '',
				pageSize: '',
				status: 1
			}
		},
		onLoad() {
			this.getNoticeLists()
		},
		methods: {
			submit(){
				uni.navigateTo({
					url:'/pages/userInfo/bindCar'
				})
			},
			maintenanceLog(item) {
				if (item.has_orders == true) {
					uni.navigateTo({
						url: '/pages/userInfo/maintenanceList?id=' + item.id
					})
				}
			},
			getNoticeLists() {
				this.$api.getBindCar(res => {
					if (res.code == 0) {
						this.noticeList = res.data
					} else {
						this.errorToast(res.msg)
					}
				})
			},
			errorToast(msg) {
				this.$refs.uToast.show({
					title: msg,
					type: 'error',
					duration: 2000
				})
			},
		},

	}
</script>

<style scoped lang="scss">
	.body {
		width: 100vw;
		height: 99vh;
		box-sizing: border-box;
		padding: 0 2vw;
		background-color: #fafafa;
	}

	.button {
		position: fixed;
		width: 85vw;
		height: 10vw;
		margin-top: 10vw;
		background-color: red;
		line-height: 10vw;
		border-radius: 5vw;
		color: white;
		text-align: center;
		margin-left: 5vw;
		bottom: 3vw;
	}

	.paddingOder {
		width: 96vw;
		height: 93vh;
		background-color: #fafafa;
		border-radius: 8px;
		overflow-y: auto;

		.model {
			width: 96vw;
			height: 25vw;
			box-sizing: border-box;
			padding: 0 3vw;
			background-color: white;
			border-radius: 20px;
			margin-top: 2vw;

			ul {
				display: flex;
				justify-content: space-between;
				align-items: center;

				li {
					.Number {
						font-size: 0.8rem;
						display: flex;
						margin-top: 1vw;
					}

					.playOder {
						display: flex;
						font-size: 0.75rem;
						margin-top: 1vw;
						color: #808080;
					}
				}

				li:nth-child(2) {
					width: 20vw;
					height: 8vw;
					line-height: 20vw;
					text-align: center;
					line-height: 8vw;
					border-radius: 5px;

					color: white;
				}
			}
		}
	}
</style>