zhuangxiu/pages/index/indexComponents/noUser.vue

<template>
	<view class="container">
		<view class="content">
			<view class="title">
				<text>HI，车主</text>
			</view>
			<view class="tip">
				<text>
					您还没未拥有车辆。
				</text>
			</view>
			<view class="itemTitleBox flex">
				<view class="itemTitle">
					附近商家
				</view>
				<view class="tager flex" @click="navTo('/pages/index/shopTab')">
					<text>切换</text>
					<image class="itemIcon" src="../../../static/icon/next1.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="shopContent flex">
				<view class="shoplogo">
					<image class="logo" :src="shopDetail.image" mode="scaleToFill"></image>
				</view>
				<view class="shopDetail">
					<view class="shopName clamp">
						{{shopDetail.name}}
					</view>
					<view class="shopDetailText">
						{{shopDetail.detailed_address}}
					</view>
				</view>
			</view>
			<view class="itemTitleBox flex">
				<view class="itemTitle">
					国标系列
				</view>
				<view class="tager flex" @click="navTo('/pages/shop/shopIndex?id='+shopDetail.id+'&type=1')">
					<text>全部</text>
					<image class="itemIcon" src="/static/icon/next1.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="flex cartList">
				<view class="itemBox" v-for="(item,index) in cartList" @click="navTo('/pages/product/product?id='+item.id)" :key='index'>
					<view class="imgBox">
						<image class="imageItem" :src="item.image" mode="scaleToFill"></image>
					</view>
					<view class="itemDetaile">
						<view class="cartName">
							<view class="clamp2 ">
								{{item.store_name}}
							</view>
						</view>
						<view class="maney clamp">
							<text class="greenText font-size-base">￥{{item.price}}</text>
							<text class="lign font-size-sm">{{item.sales|getNum}}+付款</text>
						</view>
					</view>
				</view>
			</view>
			<view class="itemTitleBox flex">
				<view class="itemTitle">
					电摩系列
				</view>
				<view class="tager flex" @click="navTo('/pages/shop/shopIndex?id='+shopDetail.id+'&type=2')">
					<text>全部</text>
					<image class="itemIcon" src="../../../static/icon/next1.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="flex cartList">
				<view class="itemBox" v-for="(item,index) in carTwoList" :key='index' @click="navTo('/pages/product/product?id='+item.id)">
					<view class="imgBox">
						<image class="imageItem" :src="item.image" mode="scaleToFill"></image>
					</view>
					<view class="itemDetaile">
						<view class="cartName">
							<view class="clamp2 ">
								{{item.store_name}}
							</view>
						</view>
						<view class="maney clamp">
							<text class="greenText font-size-base">￥{{item.price}}</text>
							<text class="lign font-size-sm">{{item.sales|getNum}}+付款</text>
						</view>
					</view>
				</view>
			</view>
			<view class="itemTitleBox flex">
				<view class="itemTitle">
					电轻摩系列
				</view>
				<view class="tager flex" @click="navTo('/pages/shop/shopIndex?id='+shopDetail.id)+'&type=3'">
					<text>全部</text>
					<image class="itemIcon" src="../../../static/icon/next1.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="flex cartList">
				<view class="itemBox" v-for="(item,index) in carTreeList" :key='index' @click="navTo('/pages/product/product?id='+item.id)">
					<view class="imgBox">
						<image class="imageItem" :src="item.image" mode="scaleToFill"></image>
					</view>
					<view class="itemDetaile">
						<view class="cartName">
							<view class="clamp2 ">
								{{item.store_name}}
							</view>
						</view>
						<view class="maney clamp">
							<text class="greenText font-size-base">￥{{item.price}}</text>
							<text class="lign font-size-sm">{{item.sales|getNum}}+付款</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex';
	import {
		getProducts,
	} from '@/api/product.js';
	export default {
		data() {
			return {
				cartList: [], //国标系列电动车
				carTwoList: [], //电摩系列电动车
				carTreeList: [], //电摩系列电动车
			};
		},
		computed: {
			...mapState('shop', ['shopDetail'])
		},
		filters: {
			getNum(num) {
				if (num) {
					// 转为字符串
					num += '';
					let nu = num.slice(0, 1);
					for (let i = 0; i < num.length - 1; i++) {
						nu += 0
					}
					return nu
				} else {
					return 0
				}
			}
		},
		methods: {
			init() {
				// 查询国标
				this.getProducts(2, 'salesOrder').then((data) => {
					this.cartList = data;
				})
				// 查询电车
				this.getProducts(5, 'salesOrder').then((data) => {
					this.carTwoList = data;
				})
				// 查询电轻摩
				this.getProducts(6, 'salesOrder').then((data) => {
					this.carTreeList = data;
				})
			},
			// 获取门店车辆信息
			getProducts(sid, type) {
				let data = {
					sid: sid,
					page: 1,
					limit: 10,
					store_id: this.shopDetail.id,
					is_car: 1
				}
				// 保存查询分类
				data[type] = 1
				return new Promise((ok, erro) => {
					getProducts(data).then(({
						data
					}) => {
						ok(data)
					}).catch((e) => {
						erro(e)
					})
				})
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		},

	};
</script>

<style lang="scss">
	$paddingJg:40rpx;
	.container{
		/* #ifdef APP */
		padding-top: calc(105rpx + var(--status-bar-height));
		/* #endif */
		/* #ifdef H5 || MP */
		padding-top: 105rpx;
		/* #endif */
	}
	.content {
		.greenText {
			color: $color-green;
		}
		.title {
			font-size: 48rpx;
			padding: 0 $paddingJg;
			padding-top: 60rpx;
		}

		.tip {
			font-size: 22rpx;
			color: $font-color-light;
			margin: 20rpx 0;
			padding: 0 $paddingJg;
		}

		.shopContent {
			color: $font-color-white;
			background-color: $base-color;
			border-radius: 20rpx;
			height: 160rpx;
			padding: 20rpx;
			margin: 0 $paddingJg;
			margin-bottom: 20rpx;

			.shoplogo {
				flex-shrink: 0;
				background-color: $font-color-white;
				width: 120rpx;
				height: 120rpx;
				border-radius: 20rpx;

				.logo {
					height: 100%;
					width: 100%;
				}
			}

			.shopDetail {
				padding-left: 30rpx;
				flex-grow: 1;

				.shopName {
					margin-bottom: 25rpx;
					font-size: 36rpx;
				}

				.shopDetailText {
					font-size: 22rpx;
				}
			}
		}

		.cartList {
			flex-wrap: wrap;
			margin: 0 $paddingJg;
			overflow: hidden;

			.itemBox {
				width: 310rpx;
				min-height: 460rpx;
				background-color: $font-color-white;
				border-radius: 20rpx;
				box-shadow: 0px 0px 10px 0px rgba(226, 226, 226, 0.35);
				margin-bottom: 30rpx;
				overflow: hidden;

				.imgBox {
					line-height: 0;

					.imageItem {
						width: 310rpx;
						height: 310rpx;
					}
				}

				.itemDetaile {
					padding: 10rpx 20rpx;

					.cartName {
						line-height: 1.5;
						font-size: 28rpx;
						color: $font-color-base;
						font-weight: 400;
						min-height: 90rpx;
					}

					.maney {
						line-height: 1;

						.lign {
							margin-left: 20rpx;
							color: $font-color-light;

						}
					}
				}
			}
		}
	}
</style>