index.vue

<template>
	<view v-if="isLogin && !is_city">
		<Fail />
	</view>
	<view v-else>
		<view class="content">
			<view class="flex">
				<i class="logo"></i>
				<view class="search_view flex">
					<i class="search_icon" @click="search"></i>
					<input type="text" class="search_input" v-model="keyword" @confirm="search">
				</view>
				<text class="login_btn" @click="jumpPhpPage('app=member&act=login')" v-if="!isLogin">登录</text>
				<uni-icons v-else  type="person" size="30" @click="jumpPhpPage('app=member')"></uni-icons>
			</view>
			<view class="flex tab_bar">
				<text :class="{act: tabIndex === 1}" @click="jumpPhpPage()">首页</text>
				<text :class="{act: tabIndex === 2}" @click="jumpPhpPage('app=promotion')">精彩活动</text>
				<text :class="{act: tabIndex === 3}">
					<i class="credit_icon"></i>
					谛宝白条
				</text>
				<!-- <text :class="{act: tabIndex === 4}">采购分期</text> -->
			</view>
		</view>
		<view class="backimg">
			<view class="main_content">
				<view class="banner" style="display: none;"></view>
				<view class="part_one" style="margin-top: 20px;">
					<view>
						<text class="text">白条商品</text>
						<i></i>
						<text class="text">信用支付 账期无忧</text>
					</view>
					<view class="flex classbox">
						<view class="class_item" v-for="(item, index) in credit_cates_list" :key="index" @click="jumpSecondPage(item.cate_id, 1, 10)">
							<image :src="item.goods_list[0]['default_image'] || $defaultClassImg"></image>
							<text class="class_name">{{item.cate_name}}</text>
						</view>
					</view>
				</view>
				<view class="part_two">
					<view>
						<image class="portrait" :src="portrait || $defaultPortrait"></image>
						<p class="user_name">{{customer_name}}</p>
					</view>
					<text class="go_credit" @click="isLogin ? (credit_flg ? jumpGoPage() : jumpGoPage('/introduce')) : jumpPhpPage('app=member&act=login')"><text>我的白条</text><i class="go_credit_icon"></i></text>
				</view>
				<view class="part_three">
					<view class="part_three_top">
						<view>
							<p>谛宝多多 账期无忧</p>
							<p>最高可享12期免息</p>
						</view>
						<text class="go_detail" @click="isLogin ? (credit_flg ? jumpDetailPage() : jumpGoPage('/introduce')) : jumpPhpPage('app=member&act=login')">查看详情<i class="go_credit_icon"></i></text>
					</view>
					<view class="part_three_bottom">
						<view class="hot_goods"  v-for="(item, index) in credit_goods_list" :key="index">
							<image :src="item.default_image || $noGoodsImg" @click="jumpPhpPage(`app=goods&id=${item.goods_id}`)"></image>
							<p>{{item.goods_name}}</p>
							<!-- <text>9个月账期</text> -->
						</view>
					</view>
				</view>
				<view class="part_four">
					<p>白条精品 猜你需要</p>
					<view class="needs_tabs">
						<text v-for="(item, index) in credit_cates_list" :key="index" :class="[index == 0 ? 'tabs_item_first' : (index == credit_cates_list.length-1 ? 'tabs_item_last' : 'tabs_item'), current === index ? 'act' : '']" @click="changeCurrent(index)"><text>{{item.cate_name}}</text></text>
					</view>
					<view>
						<view v-for="(item, index) in credit_cates_list" :key="index" class="cate_goods_view" v-show="index == current">
							<view class="goods_info" v-for="(val, key ) in item.goods_list" :key="key">
								<image :src="val.default_image || $noGoodsImg" @click="jumpPhpPage(`app=goods&id=${val.goods_id}`)"></image>
								<text class="goods_name">{{val.goods_name}}</text>
								<view class="goods_tag">
									<text>限时免息</text>
									<!-- <text>9个月账期</text> -->
								</view>
								<text class="goods_des">{{val.goods_subname}}</text>
								<view class="price_view">
									<text>{{isLogin ? `￥${val.price}` : '登录显示价格'}}</text>
									<i @click="addCart(val.spec_id, 1)"></i>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<BottomBar />
		</view>
	</view>

</template>

<script>
	import { php, go } from '../../common/host.js';
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	import BottomBar from "@/components/BottomBar/BottomBar.vue";
	import Fail from '../fail.vue';
	export default {
		data() {
			return {
				tabIndex: 3, // 1:首页 2:精彩活动 3:谛宝白条 4:采购分期
				credit_cates_list: [], // 分类
				credit_goods_list: [],  // 商品
				customer_name: 'Hi, 谛宝多多',
				portrait: '',
				current: 0,
				keyword: '',
				isLogin: 0,
				credit_flg: 0,
				is_city: 0
			}
		},
		onLoad() {
			this.getData();
		},
		components: {
			uniIcons,
			BottomBar,
			Fail
		},
		methods: {
			// changeTab(index) {
			// 	this.tabIndex = index;
			// },
			search() {
				window.location.href = `${php}app=search&act=index&keyword=${this.keyword}`
			},
			changeCurrent(index) {
				this.current = index;
			},
			jumpSecondPage(cate_id, current, pageSize) {
				uni.navigateTo({
				    url: `/pages/category/category?cate_id_1=${cate_id}&current=${current}&page_size=${pageSize}`
				});
			},
			jumpDetailPage() {
				uni.navigateTo({
				    url: `/pages/detail/detail`
				});
			},
			getData() {
				uni.request({
					url: '/uni/api/credit_goods/get_credit_index_goods',
					method: 'GET',
					dataType: 'json',
					success: (res) => {
						this.credit_cates_list = res.data.data.credit_cates_list;
						this.credit_goods_list = res.data.data.credit_goods_list;
						this.isLogin  = res.data.login_flg;
						this.credit_flg = res.data.credit_flg;
						this.is_city = res.data.city_flg;
						if(res.data.data.customer_name) {
							this.customer_name = res.data.data.customer_name;
						}
						if(res.data.data.portrait) {
							this.portrait = res.data.data.portrait;
						}
					}
				})
			},
			jumpPhpPage(url) {
				let link = url ? `${php}${url}` : php;
				window.location.href =  link;
			},
			jumpGoPage(url) {
				let link = url ? `${go}${url}` : go;
				window.location.href =  link;
			},
			addCart(spec_id, quantity) {
				this.$addCart(spec_id, quantity, this.isLogin);
			}
		}
	};
</script>

<style lang="less" scoped>
	.flex {
		display: flex;
		justify-content: space-between;
		.logo {
			width: 192rpx;
			height: 60rpx;
			background: url(../../static/index/2931581575297_.pic.jpg) no-repeat;
			background-size: 100% 100%;
		}
	}
	.content {
		height: 180rpx;
		background: #fff;
		justify-content: space-between;
		padding: 24rpx;
		box-sizing: border-box;
		position: fixed;
		width: 100%;
		background-color: #fff;
		z-index: 11;
	}
	.search_view {
		width: 380rpx;
		height: 60rpx;
		background: #F5F5F5;
		border-radius: 30rpx;
	}
	.search_icon {
		display: inline-block;
		width: 56rpx;
		height: 56rpx;
		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAAAAAA5AE8dAAACh0lEQVRYw83ZMW/aQBTAcb7K3xaGDcQUIUWtEFKmMKRbVT5AEBOV+gFgZmEh6tatH4HIK8qUISGIFgllyFQhaqlyLjRpIR1I0jTCl9p5r81t9sk/2Xe+u3fvUtdryvLH3DylpNaQV08j16DLqwtjhNHF3BhhdHFpjDT688JIoxKt+RBdfjdGGl3OjTi6EDRvUVHzBl2KmitU2DQp2X7/jV4ZeVRqHN1HF+KmSV1fGnl0YRTQuQZq/hc6nYyGJ8PRZCqGBvudWimX9bK5Uq2zH0igYbecd7ktbr7cDZ+KBv2Kw5/FqfQfe9svVvS05d1Z7p3utU7t6AcbelZNr5hi0x8MBn6zuLpMV8+s6HsLelYCoFAf390a1wsAlKzqx2j0tArgNfz7PRP6DQ+gamuBb5Fo0EoDmfbswf1ZOwOkW0GS3u97QGZvTc1eBvD6CdCwAnjttXVtD6iE8dGuAzRma+tmDcDpxkaDMlDwIx7yC0A5iIv28kA96gvDOpDvxUU7LjCOfGoMuJ2Y6HQXKFr6twjUpvHQSQloWtAmUJrEQ0c5wLegPpAbxUOHWXAGFnTgQHYYDz3xwLWiLngnz+BNVdpUpfenNYX/VGVE/dXY338Ws5TKfKoz86usUY+sprxLtJra1312hskCNEuEAs6LSbKoLyqWWpXNo/NEoWRE1Pd2C4DtQ8n49OvBxuoDjkUj6eNVQ2wchElj/l5n9ybm3+30bv6kw20Atg4kdyfnR5sAvJTdR01eOIAjvDkbvnLgjTB6/mnHef35H24jVTa8KltzlSSCTrpDJTGjk0LSSXappOV0Eog6qU6dpKxO+lgn0a2Tktc5PFA65tA5kFE6OtI55JI4jvsF01XE0L1M7eEAAAAASUVORK5CYII=) no-repeat;
		background-size: 100% 100%;
	}	
	.search_input {
		height: 60rpx;
	}
	.login_btn {
		width: 92rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: #FFCD00;
		border-radius: 16rpx;
		color: #212121;
		font-size: 28rpx;
		text-align: center;
	}
	.tab_bar {
		padding: 0 24rpx;
		justify-content: space-between;
		margin-top: 34rpx;
		.credit_icon {
			display: inline-block;
			width: 36rpx;
			height: 36rpx;
			background: url(../../static/index/2821581501269_.pic.jpg) no-repeat;
			background-size: 100% 100%;
			vertical-align: bottom;
		}
	}
	.tab_bar text {
		font-size: 28rpx;
		color: #212121;
		line-height: 40rpx;
	}
	.tab_bar .act {
		font-family:PingFangSC-Medium,PingFang SC;
		font-weight:500;
		font-size: 32rpx;
		position: relative;
	}
	.tab_bar .act:after {
		position: absolute;
		width: 60rpx;
		height: 4rpx;
		background: #FFCD00;
		border-radius: 0 2rpx 2rpx 2rpx;
		content: '';
		left: 50%;
		margin-left: -30rpx;
		top: 48rpx;
	}
	.backimg {
		height: 678rpx;
		background: url(https://dbc-static.oss-cn-beijing.aliyuncs.com/credit/2611581321921_.pic_hd.png) no-repeat;
		background-size: 100% 100%;
		padding-top: 180rpx;
	}
	.main_content {
		width: 93.6%;
		margin: 0 auto;
		padding-bottom: 98rpx;
		.banner {
			width: 100%;
			height: 268rpx;
			margin: 20rpx 0;
		}
	}
	.part_one {
		padding: 36rpx 40rpx 0;
		border-radius: 16rpx;
		background: #fff;
	}
	.part_one .text:nth-of-type(1) {
		font-size: 36rpx;
		font-family:PingFangSC-Medium,PingFang SC;
		font-weight:500;
		line-height: 50rpx;
		vertical-align: middle;
	}
	.part_one .text:nth-of-type(2) {
		color: #7c7c7c;
		font-size:24rpx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		line-height: 34rpx;
		vertical-align: middle;
	}
	.part_one i {
		display: inline-block;
		width: 2rpx;
		height: 20rpx;
		background: #979797;
		margin: 0 12rpx;
		vertical-align: middle;
	}
	.classbox {
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 22rpx;
		box-shadow:0px 4px 16px 0px rgba(0,0,0,0.03);
		.class_item {
			flex:0 0 25%;
			margin-bottom: 32rpx;
			text-align: center;
		}
		image {
			display: block;
			width: 100rpx;
			height: 96rpx;
			border-radius: 50%;
			margin: 0 auto;
		}
		.class_name {
			font-size: 22rpx;
			line-height: 32rpx;
		}
	}
	.classbox:after {
		content: '';
		flex: auto;
	}
	.part_two {
		box-shadow:0px 4px 10px 0px rgba(0,0,0,0.05);
		border-radius:16rpx;
		padding: 26rpx;
		background: #fff;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.part_two .portrait {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		vertical-align: middle;
	}
	.part_two .user_name {
		font-size: 32rpx;
		font-weight: 600;
		vertical-align: middle;
		margin: 0 0 0 16rpx;
		width: 380rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: inline-block;
	}
	.go_credit {
		display: inline-block;
		width: 160rpx;
		height: 56rpx;
		border-radius: 28rpx;
		background: #D6C453;
		color: #fff;
		text-align: center;
		line-height: 56rpx;
		font-size: 26rpx;
		vertical-align: middle;
		padding-left: 10rpx;
	}
	.go_credit_icon {
		display: inline-block;
		width: 32rpx;
		height: 32rpx;
		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAUVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////8IN+deAAAAGnRSTlMAFBcjKC40OkFIUFhgZuDk6Ozw8fL2+Pr8/TSg/FgAAABVSURBVDjLY2AYBZiAkZGAvJAIB34FwlKinHhVsAtJiXHhVcEmKCXOjVcFq4CUBA9eFSz8UpK8eFUw80mJM1GigJAVhBxJyJuEAopgUBOMLILRPYIBAHaLBBuaK/qKAAAAAElFTkSuQmCC) no-repeat;
		background-size: 100% 100%;
		position: relative;
		top: 6rpx;
	}
	.part_three {
		height: 522rpx;
		border-radius:16rpx;
		padding: 0 22rpx;
		background: url(https://dbc-static.oss-cn-beijing.aliyuncs.com/credit/2521581321090_.pic_hd.png) no-repeat;
		background-size: 100% 100%;
		box-shadow:0px 12rpx 20rpx 0px rgba(0,0,0,0.05);
		margin-top: 20rpx;
		padding-top: 0.5px;
		.part_three_top {
			display: flex;
			justify-content: space-between;
			margin-top: 32rpx;
			align-items: center;
			p:nth-of-type(1) {
				color: #2E344C;
				font-size: 36rpx;
				font-family:AlibabaPuHuiTiB;
				line-height: 50rpx;
				font-weight: bold;
			}
			p:nth-of-type(2) {
				font-size: 32rpx;
				line-height: 44rpx;
				color: #2E344C;
			}
			.go_detail {
				background:rgba(0,0,0,0.5);
				width: 148rpx;
				height: 46rpx;
				border-radius: 23rpx;
				color: #fff;
				font-size: 24rpx;
				line-height: 46rpx;
				text-align: center;
				padding-left: 10rpx;
			}
		}
		.part_three_bottom {
			display: flex;
			justify-content: space-between;
			.hot_goods {
				width: 212rpx;
				height: 332rpx;
				background: #fff;
				border-radius: 16rpx;
				margin-top: 44rpx;
				text-align: center;
				image {
					width: 212rpx;
					height: 212rpx;
				}
			}
			p {
				font-size: 26rpx;
				line-height: 36rpx;
				width: 80%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin: 8rpx auto 0;
			}
			text {
				border: 1px solid #C7B64E;
				height: 36rpx;
				line-height: 36rpx;
				border-radius: 18rpx;
				padding: 0 12rpx;
				font-size: 22rpx;
				color: #C7B64E;
				position: relative;
				top: -10rpx;
			}
		}
	}
	.part_four {
		margin-top: 40rpx;
		> p {
			font-size: 32rpx;
			height: 44rpx;
			line-height: 44rpx;
			font-family:PingFangSC-Medium,PingFang SC;
			font-weight:500;
			margin-bottom: 24rpx;
		}
		.needs_tabs {
			height: 64rpx;
			overflow: auto;
			margin-bottom: 20rpx;
			white-space: nowrap;
			> text {
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				background: #ECECEC;
				display: inline-block;
				width: 200rpx;
				margin-right: 20rpx;
				position: relative;
				text {
					display: block;
					transform: skew(30deg);
				}
			}
			.tabs_item_first {
				background: url(../../static/index/2891581574508_.pic.jpg) no-repeat;
				background-size: 100% 100%;
				font-size: 28rpx;
				color: #6e6e6e;
				text {
					transform: skew(0deg) !important;
				}
			}
			.tabs_item_first.act {
				background: url(../../static/index/2811581501256_.pic.jpg) no-repeat;
				background-size: 100% 100%;
				color: #fff;
			}
			.tabs_item {
				border-radius: 16rpx;
				transform: skew(-30deg);
				font-size: 28rpx;
				color: #6e6e6e;
			}
			.tabs_item.act {
				background: #D6C453;
			}
			.tabs_item_last {
				background: url(../../static/index/2801581501256_.pic.jpg) no-repeat;
				background-size: 100% 100%;
				font-size: 28rpx;
				color: #6e6e6e;
				text {
					transform: skew(0deg) !important;
				}
			}
			.tabs_item_last.act {
				background: url(../../static/index/2841581501334_.pic.jpg) no-repeat;
				background-size: 100% 100%;
				color: #fff;
			}
		}
		.needs_tabs::-webkit-scrollbar {
			display: none;
		}
		.goods_info {
			width: 346rpx;
			height: 600rpx;
			padding: 32rpx;
			box-sizing: border-box;
			image {
				width: 280rpx;
				height: 280rpx;
			}
			.goods_name {
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 26rpx;
				color: #212121;
				line-height: 38rpx;
				display: block;
			}
			.goods_tag {
				display: block;
				text {
					display: inline-block;
					vertical-align: middle;
					border: 1px solid #C7B64E;
					color: #C7B64E;
					height: 36rpx;
					line-height: 36rpx;
					padding: 0 12rpx;
					border-radius: 18rpx;
					font-size: 22rpx;
					margin-right: 8rpx;
				}
			}
			.goods_des {
				height: 64rpx;
				font-size: 22rpx;
				line-height: 32rpx;
				color: #7C7C7C;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-top: 12rpx;
			}
			.price_view {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 56rpx;
				margin-top: 10rpx;
				text {
					font-family:PingFangSC-Medium,PingFang SC;
					font-weight:500;
					color: #000;
					font-size: 32rpx;
					line-height: 44rpx;
				}
				i {
					display: inline-block;
					width: 56rpx;
					height: 56rpx;
					background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAAAAACN7WTCAAABfElEQVRIx2P4TyZgGNU4qnFUIxEafx87+eYvORqvVFRUbiTLxstTSktW/yHHj7/2FRa9ICtw/kzM2wa2/MTmzZs2gTAEbL3yi0Co7sye/A9IfcpGBVlZU/7i1/g4o/gryObzEJtgdm4uyliDX+PXgpQn2Ly0LaUNv8Z/PYl7sGlcnTiRQMpZETsXm8aJccsJaDwTXfULU9/3ouiDBDS+j4z5jKnxU3T4IwIaf+SFXMXUeCsk+jOh3NEfuBpT4+bAwl+ENK7x68bUOMOvl2B+vOmd8h1d7F+F9xKCGj/5e75DF/sc6X6MoMbfOS7oiv6/dnF5SbjomODYhV4O7HIM+ExY4z5b+1lr1gPBurVr16xZs3rVipnetpV/CWv8XmiFAbzuElPKfd4wpb8PCPr7+yeAwMRJK14Mt5L822ZQmJ6FhOOHTSDOub/EaFwVCwYfwJxFYHbcR2I03stJTk5OgqaC6xkgTjdRNv7//R0I/sEKaWTOaI08qnHoaQQAAyi97TBEkioAAAAASUVORK5CYII=) no-repeat;
					background-size: 100% 100%;
				}
			}
		}
		.cate_goods_view {
			display: flex;
			justify-content: space-between;
			width: 100%;
		}
	}
</style>