aluminium-trading-uniapp-240925/pages/index/index.vue

<template>
	<view class="page">

		<!--顶部栏-->
		<topbar showRight="1"></topbar>

		<!-- 供应商 -->
		<view class="supplier">
			
			<view style="padding: 40rpx 0;"
			v-for="(item, index) in bannerList">
				<uv-swiper 
				:list="item" 
				:height="bannerSize[index]"
				keyName="image">
				</uv-swiper>
				<!-- imgMode="widthFix" -->
			</view>

			<visualization/>
		
			<!--报价和挂单-->
			<view class="btns" v-if="userShop">
				<span @click="goToPage(0)" class="oneBtn">
					{{ $t('other.supplierQuotation') }}
				</span>

				<!-- 这个提单不需要了 -->
				<!-- <span @click="goToPage(1)" class="twoBtn">
					{{ $t('other.supplierBilLading') }}
				</span> -->
			</view>
		</view>

		<tabber select="0" />
	</view>
</template>

<script>
	import topbar from '@/components/base/topbar.vue'
	import tabber from '@/components/base/tabbar.vue'
	import productList from '@/components/user/productList.vue'
	import { mapGetters } from 'vuex'
	import changeLanguage from '@/components/base/changeLanguage.vue'
	import visualization from '@/components/user/visualization.vue'
	export default {
		components: {
			tabber,
			topbar,
			productList,
			changeLanguage,
			visualization,
		},
		data() {
			return {
				queryParams: {
					pageNo: 1,
					pageSize: 10,
					title: ''
				},
				bannerList: [],
				bannerSize : ['420rpx', '220rpx', '220rpx'],
			}
		},
		onShow() {
			this.getImagePhoneOther()
			if (!this.$store.state.shop && !this.$store.state.buy) {
				uni.reLaunch({
					url: '/pages_order/auth/selectionIdentity?back=no&'
				})
			}
			this.$store.commit('getUserInfo')
			this.getBannerList()
		},
		computed: {
			...mapGetters(['userShop']),
		},
		methods: {

			getBannerList() {
				this.$api('bannerList', res => {
					this.bannerList = res.result
				})
			},

			goToPage(titleIndex) {
				this.$store.state.orderDetail = {}
				uni.navigateTo({
					url: '/pages_order/order/offerOrBillLading?titleIndex=' + titleIndex
				})
			},
			getImagePhoneOther() {
				this.$api('getImagePhoneOther', res => {

				})
			},
		}
	}
</script>

<style scoped lang="scss">
	* {
		box-sizing: border-box;
	}

	.page {
		background-color: #2e394d;
		min-height: 100vh;
		background-image: url('../../static/image/index/1.png');
		// 供应商
		.supplier {
			display: flex;
			flex-direction: column;
			// height: calc(100vh - 120rpx - 120rpx);
			background-color: #2e394d;

			.topItem {
				display: flex;
				justify-content: center;
				align-items: center;
				// height: 30%;
				background-size: cover;

				.imageFrame {

					width: 90%;
					height: 90%;
					//padding:80rpx;
				}
			}

			.threeHeOne {
				display: flex;
				padding: 20rpx 40rpx 10rpx;
				flex-direction: column;

				// height: 60%;



				.oneItem {
					display: flex;
					// height: 33%;

					.left {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						gap: 10rpx;
						width: 33%;
						background-color: #1e293d;
						color: white;
						font-size: 26rpx;

						.subText {
							text-align: center;
							width: 80%;
							background-color: #2e394d;
							padding: 0 20rpx;
						}
					}

					.right {
						//height: 30%;
						width: 66%;
						padding: 20rpx;
						background-image: url('../../static/image/index/1.png');
						background-size: cover;
						font-size: 20rpx;
						color: white;
					}
				}

				.twoItem {
					display: flex;
					justify-content: space-between;
					gap: 20rpx;
					// height: 33%;
					margin-top: 20rpx;
					padding: 10rpx;

					.left {
						width: 60%;
						padding: 20rpx;
						background-color: #1e293d;
					}

					.right {
						width: 40%;
						padding: 20rpx;
						background-color: #1e293d;
					}
				}

				.threeItem {
					display: flex;
					//width: 100vw;
					// height: 33%;


					.left {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						gap: 20rpx;
						width: 33%;
						background-color: #1e293d;
						color: white;
						font-size: 26rpx;

						.subText {
							text-align: center;
							background-color: #2e394d;
							width: 80%;
							padding: 0 20rpx;
						}
					}

					.right {
						//height: 200rpx;
						width: 66%;
						padding: 20rpx;
						background-image: url('../../static/image/index/1.png');
						background-size: cover;
						font-size: 20rpx;
						color: white;
					}
				}
			}

			.btns {
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 40rpx;

				.oneBtn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 40%;
					height: 70rpx;
					border-radius: 40rpx;
					color: #1F1C39;

					font-size: 28rpx;
					margin: 20rpx 10rpx 0 0;
					background: #f2f2f2;
					//margin-top: 20rpx;
					border-radius: 40rpx;
				}

				.twoBtn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 40%;
					height: 70rpx;
					border-radius: 40rpx;
					color: #1F1C39;
					font-size: 28rpx;
					margin: 20rpx 10rpx 0 0;
					background: #f2f2f2;
					//margin-top: 20rpx;
					border-radius: 40rpx;
				}

			}
		}

		// 采购商
		.purchaser {
			display: flex;
			flex-direction: column;
			//gap: 40rpx;
			background-color: #2e394d;


			.topItem {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 280rpx;
				background-image: url('../../static/image/index/1.png');
				background-size: cover;

				.imageFrame {

					width: 90%;
					// height: 90%;
					//padding:80rpx;
				}
			}

			.threeHeOne {
				display: flex;
				padding: 20rpx 40rpx 10rpx;
				flex-direction: column;


				.oneItem {
					display: flex;

					.left {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						gap: 10rpx;
						width: 33%;
						background-color: #1e293d;
						color: white;
						font-size: 26rpx;

						.subText {
							background-color: #2e394d;
							padding: 0 20rpx;
						}
					}

					.right {
						height: 180rpx;
						width: 66%;
						padding: 20rpx;
						background-image: url('../../static/image/index/1.png');
						background-size: cover;
						font-size: 20rpx;
						color: white;
					}
				}

				.twoItem {
					display: flex;
					justify-content: space-between;
					gap: 20rpx;
					height: 280rpx;
					margin-top: 20rpx;
					padding: 10rpx;

					.left {
						width: 60%;
						padding: 20rpx;
						background-color: #1e293d;
					}

					.right {
						width: 40%;
						padding: 20rpx;
						background-color: #1e293d;
					}
				}

				.threeItem {
					display: flex;
					//width: 100vw;

					.left {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						gap: 20rpx;
						width: 33%;
						background-color: #1e293d;
						color: white;
						font-size: 26rpx;

						.subText {
							background-color: #2e394d;
							padding: 0 20rpx;
						}
					}

					.right {
						height: 200rpx;
						width: 66%;
						padding: 20rpx;
						background-image: url('../../static/image/index/1.png');
						background-size: cover;
						font-size: 20rpx;
						color: white;
					}
				}
			}
		}
	}
</style>