用户登录流程开发接口对接
This commit is contained in:
唐明明
@@ -2,68 +2,110 @@
|
||||
<view>
|
||||
<!-- 状态栏 -->
|
||||
<nv :config="nvConfig" @nvTabTap="onNvTab"></nv>
|
||||
<!-- 搜索 -->
|
||||
<view class="search">
|
||||
搜索
|
||||
</view>
|
||||
<!-- 推荐商家 -->
|
||||
<scroll-view scroll-x class="recommended">
|
||||
<block v-for="(item, index) in 4" :key="index">
|
||||
<view class="item-box">
|
||||
<image
|
||||
class="item-cover"
|
||||
src="@/static/dev/mall-logo-01.png"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view class="item-title">MLB</view>
|
||||
<view class="item-btn">进店</view>
|
||||
</view>
|
||||
<view class="item-box">
|
||||
<image
|
||||
class="item-cover"
|
||||
src="@/static/dev/mall-logo-00.png"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="item-title">名创优品</view>
|
||||
<view class="item-btn">进店</view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
<!-- 热易商家 -->
|
||||
<swiper class="hot-swiper">
|
||||
<swiper-item v-for="(item, index) in 3" :key="index">
|
||||
<view class="hot-box">
|
||||
<image
|
||||
class="cover"
|
||||
src="@/static/dev/mall-logo-00.png"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="content">
|
||||
<view class="title nowrap">MLB（美职联）</view>
|
||||
<view class="credibility">
|
||||
<uni-rate
|
||||
:readonly="true"
|
||||
color="#ddd"
|
||||
active-color="#c82626"
|
||||
:value="2.5"
|
||||
:size="14"
|
||||
/>
|
||||
</view>
|
||||
<view class="trading nowrap">累计交易100次</view>
|
||||
<block v-if="tabIndex === 0">
|
||||
<!-- 搜索 -->
|
||||
<view class="search">
|
||||
<navigator class="nav" url="#">搜索企业/行业</navigator>
|
||||
</view>
|
||||
<!-- 推荐商家 -->
|
||||
<view class="block-title">推荐商家</view>
|
||||
<scroll-view scroll-x class="recommended">
|
||||
<block v-for="(item, index) in 4" :key="index">
|
||||
<view class="item-box">
|
||||
<image
|
||||
class="item-cover"
|
||||
src="@/static/dev/mall-logo-01.png"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view class="item-title">MLB</view>
|
||||
<view class="item-btn">进店</view>
|
||||
</view>
|
||||
<view class="btn">进店</view>
|
||||
<view class="item-box">
|
||||
<image
|
||||
class="item-cover"
|
||||
src="@/static/dev/mall-logo-00.png"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="item-title">名创优品</view>
|
||||
<view class="item-btn">进店</view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
<!-- 热易商家 -->
|
||||
<view class="block-title">
|
||||
热易商家
|
||||
<navigator class="more" url="#">查看更多</navigator>
|
||||
</view>
|
||||
<swiper class="hot-swiper">
|
||||
<swiper-item v-for="(item, index) in 3" :key="index">
|
||||
<view class="hot-box">
|
||||
<image
|
||||
class="cover"
|
||||
src="@/static/dev/mall-logo-00.png"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="content">
|
||||
<view class="title nowrap">MLB（美职联）</view>
|
||||
<view class="credibility">
|
||||
<uni-rate
|
||||
:readonly="true"
|
||||
color="#ddd"
|
||||
active-color="#c82626"
|
||||
:value="2.5"
|
||||
:size="14"
|
||||
/>
|
||||
</view>
|
||||
<view class="trading nowrap">累计交易100次</view>
|
||||
</view>
|
||||
<view class="btn">进店</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<!-- 行业分类 -->
|
||||
<scroll-view class="industry-tabs" scroll-x>
|
||||
<view class="industry-item show">全部</view>
|
||||
<view class="industry-item">轻工食品</view>
|
||||
<view class="industry-item">服饰纺织</view>
|
||||
<view class="industry-item">家居用品</view>
|
||||
<view class="industry-item">住宿餐饮</view>
|
||||
<view class="industry-item">建筑建材</view>
|
||||
</scroll-view>
|
||||
<!-- 商家 -->
|
||||
</block>
|
||||
<!-- 易货商城 -->
|
||||
<block v-if="tabIndex === 1">
|
||||
<!-- 搜索 -->
|
||||
<view class="search">
|
||||
<navigator class="nav" url="#">搜索企业/行业</navigator>
|
||||
</view>
|
||||
<!-- 轮播图 -->
|
||||
<view class="banner">
|
||||
<swiper class="banner-swiper">
|
||||
<swiper-item>
|
||||
<view class="swiper-item">1</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view class="swiper-item">2</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<!-- 分类 -->
|
||||
<view class="classify">
|
||||
<view class="classify-item" v-for="(item, index) in 10" :key="index">
|
||||
<image src="" mode="aspectFill"></image>
|
||||
<view class="">餐饮美食</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<!-- 行业分类 -->
|
||||
<scroll-view class="industry-tabs" scroll-x>
|
||||
<view class="industry-item show">全部</view>
|
||||
<view class="industry-item">轻工食品</view>
|
||||
<view class="industry-item">服饰纺织</view>
|
||||
<view class="industry-item">家居用品</view>
|
||||
<view class="industry-item">住宿餐饮</view>
|
||||
<view class="industry-item">建筑建材</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- 提醒信息 -->
|
||||
<swiper class="notice">
|
||||
<swiper-item>
|
||||
<view class="swiper-item">公告信息</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<!-- 每日推荐 -->
|
||||
<!-- 限时抢购 -->
|
||||
<!-- 优选商品 -->
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -71,12 +113,14 @@
|
||||
export default{
|
||||
data() {
|
||||
return {
|
||||
tabIndex: 0,
|
||||
nvConfig: {
|
||||
tabArr: [
|
||||
{title:'企业广场', active:true},
|
||||
{title:'易货商城'}
|
||||
{title:'广场', active:true},
|
||||
{title:'易货'}
|
||||
],
|
||||
color: "#555"
|
||||
color: "#555",
|
||||
hideback: true
|
||||
}
|
||||
};
|
||||
},
|
||||
@@ -87,6 +131,7 @@
|
||||
if(i == tabIndex) this.nvConfig.tabArr[i].active = true
|
||||
else this.nvConfig.tabArr[i].active = false
|
||||
}
|
||||
this.tabIndex = tabIndex
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -96,7 +141,7 @@
|
||||
// 行业分类
|
||||
.industry-tabs{
|
||||
white-space:nowrap;
|
||||
padding: $padding 0;
|
||||
padding: 0 0 $padding 0;
|
||||
.industry-item{
|
||||
margin-left: $margin;
|
||||
display: inline-block;
|
||||
@@ -209,6 +254,33 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
// 搜索
|
||||
.search{
|
||||
padding: $padding;
|
||||
.nav{
|
||||
background: white;
|
||||
border-radius: $radius/2;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
text-align: center;
|
||||
box-shadow: 0 0 6rpx 6rpx rgba($color: #000000, $alpha: .02);
|
||||
font-size: $title-size-lg;
|
||||
color: $text-gray-m;
|
||||
}
|
||||
}
|
||||
// 模块标题
|
||||
.block-title{
|
||||
padding: 0 $padding;
|
||||
font-weight: bold;
|
||||
color: $text-color;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.more{
|
||||
font-size: $title-size-m;
|
||||
font-weight: normal;
|
||||
color: $text-gray;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- goods: [
|
||||
|
||||
Reference in New Issue
Block a user