<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>
<i v-else class="eosfont person_icon" @click="jumpPhpPage('app=member')"></i>
</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}" @cliick="$jump('/pages/financial/financialstage')">采购分期</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(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() {
uni.showLoading({
title: '加载中'
});
this.getData();
// #ifdef H5
//默认请求微信分享
if (this.$wechat && this.$wechat.isWechat()) {
this.$wechat.share({titie: this.$getNavigationBarTitle()});
}
this.postData();
// #endif
},
components: {
uniIcons,
BottomBar,
Fail
},
methods: {
// changeTab(index) {
// this.tabIndex = index;
// },
search() {
window.location.href = `${php}app=search&act=index&keyword=${this.keyword}`
},
// 向小程序发送数据
postData(){
jWeixin.miniProgram.getEnv(function (res) {
//获取当前环境
if(res.miniprogram){
// this.$wechat.postData('谛宝多多商城-首页');
const postData = {
link: window.location.href,
title: '谛宝多多商城'
}
jWeixin.miniProgram.postMessage({ data: JSON.stringify(postData) });
}
});
},
changeCurrent(index) {
this.current = index;
},
jumpSecondPage(cate_id, current, pageSize) {
uni.navigateTo({
url: `/pages/category/category?cate_id_1=${cate_id}¤t=${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;
}
uni.hideLoading();
}
})
},
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>
.person_icon {
font-size: 48rpx;
line-height: 60rpx;
}
.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>