TmOct5/barter-app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

同步版本

Browse Source
This commit is contained in:
唐明明
2021-08-24 08:53:35 +08:00
parent bfea54eb8f
commit 9a2acd3813
256 changed files with 15703 additions and 1803 deletions
Download Patch File Download Diff File Expand all files Collapse all files

467
pages/equity/index.vue
View File

@@ -1,61 +1,53 @@
<template>
<view>
<!-- 状态栏 -->
<nv :config="nvConfig" @nvTabTap="onNvTab"></nv>
<nv :config="nvConfig" @nvTabTap="onNvTab" @nvBtnTap="onRightBtn"></nv>
<block v-if="tabIndex === 0">
<!-- 搜索 -->
<view class="search">
<navigator class="nav" url="#">搜索企业/行业</navigator>
</view>
<!-- 推荐商家 -->
<view class="block-title">推荐商家</view>
<view class="block-title">
<view class="title">
推荐商家
</view>
</view>
<scroll-view scroll-x class="recommended">
<block v-for="(item, index) in 4" :key="index">
<block v-for="(item, index) in recommendBus" :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"
:src="item.cover"
mode="aspectFill"
/>
<view class="item-title">名创优品</view>
<view class="item-title nowrap">{{item.name || '-'}}</view>
<view class="item-btn">进店</view>
</view>
</block>
</scroll-view>
<!-- 热易商家 -->
<view class="block-title">
热易商家
<navigator class="more" url="#">查看更多</navigator>
<view class="title">
热易商家
</view>
</view>
<swiper class="hot-swiper">
<swiper-item v-for="(item, index) in 3" :key="index">
<swiper-item v-for="(item, index) in hotBus" :key="index">
<view class="hot-box">
<image
class="cover"
src="@/static/dev/mall-logo-00.png"
:src="item.cover"
mode="aspectFill"
/>
<view class="content">
<view class="title nowrap">MLB（美职联）</view>
<view class="hot-content">
<view class="hot-title nowrap">{{item.name || '-'}}</view>
<view class="credibility">
<uni-rate
:readonly="true"
color="#ddd"
active-color="#c82626"
:value="2.5"
:value="item.star"
:size="14"
/>
</view>
<view class="trading nowrap">累计交易100次</view>
<view class="trading nowrap">累计交易{{item.orders || 0}}次</view>
</view>
<view class="btn">进店</view>
</view>
@@ -63,68 +55,121 @@
</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>
<view class="industry-item" :class="{'show':index === industryIndex}" v-for="(item, index) in industryBus" :key="index">{{item.title}}</view>
</scroll-view>
<!-- 商家 -->
<industry-list :list="busList" />
</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 class="header-back">
<!-- 轮播图 -->
<view class="banner">
<swiper class="banner-swiper" indicator-color="#c82626" indicator-active-color="#f8f8f8" indicator-dots autoplay>
<swiper-item v-for="(item, index) in banners" :key="index">
<image class="cover" :src="item.cover" mode="aspectFill"></image>
</swiper-item>
</swiper>
</view>
<!-- 分类 -->
<view class="classify">
<view class="classify-item" v-for="(item, index) in classify" :key="index" @click="onClassify">
<image class="cover" :src="item.cover" mode="aspectFill"></image>
<view class="title">{{item.name}}</view>
</view>
</view>
</view>
<!-- 提醒信息 -->
<swiper class="notice">
<swiper-item>
<view class="swiper-item">公告信息</view>
</swiper-item>
</swiper>
<!-- 每日推荐 -->
<!-- 限时抢购 -->
<view class="block-title">
<view class="title">
每日推荐<text>小易精选 推荐好物</text>
</view>
</view>
<view class="goods-push" v-if="JSON.stringify(position) != '{}'">
<view class="itme item-mian" @click="onGoods(position.one)">
<image class="cover" :src="position.one.cover" mode="widthFix"></image>
<view class="title">{{position.one.name}}</view>
<view class="price"><text>¥</text>{{position.one.original_price}}</view>
</view>
<view class="itme">
<view class="itme-list" v-for="(item, index) in position.two" :key="index" @click="onGoods(item)">
<image class="cover" :src="item.cover" mode="aspectFill"></image>
<view class="title">{{item.name}}</view>
<view class="price"><text>¥</text>{{item.original_price}}</view>
</view>
</view>
</view>
<!-- 优惠券 -->
<view class="block-title">
<view class="title">
限时抢购<text>海量商家优惠券</text>
</view>
<navigator class="more" url="#">查看更多</navigator>
</view>
<view class="coupons" v-if="coupons.length > 0">
<view class="coupons-item" v-for="(item, index) in coupons" :key="index">
<view class="content">
<view class="coupons-title">{{item.title}}</view>
<view class="sun-text">{{item.title}}</view>
<view class="btn">立即领取</view>
</view>
<image class="logo" :src="item.cover" mode="aspectFill"></image>
</view>
</view>
<!-- 优选商品 -->
<goods-list :list="goods" priceType="CNY" @on-goods="onGoods" />
</block>
</view>
</template>
<script>
import { companies, companiesList } from '@/apis/interfaces/company'
import { mall, list } from '@/apis/interfaces/goods'
import goodsList from '@/components/goods-list/goods-list'
import industryList from '@/components/industry-list/industry-list'
export default{
comments:{
goodsList,
industryList
},
data() {
return {
tabIndex: 0,
nvConfig: {
tabIndex : 0,
nvConfig : {
tabArr: [
{title:'广场', active:true},
{title:'易货'}
],
color: "#555",
hideback: true
}
color: '#FFF',
hideback: true,
bgColor: '#c82626',
btn: [{
icon: '/static/icons/search-icon.png',
style: 'paddingRight: 20rpx;'
}]
},
// 易货部分
banners : [],
classify : [],
coupons : [],
position : {},
goods : [],
pages : {},
// 广场部分
industryIndex: 0,
recommendBus : [],
hotBus : [],
industryBus : [],
busList : [],
busPages : {}
};
},
created() {
this.getCompanies()
},
methods:{
// tab
onNvTab(e){
let tabIndex = e.index
for(let i in this.nvConfig.tabArr){
@@ -132,16 +177,231 @@
else this.nvConfig.tabArr[i].active = false
}
this.tabIndex = tabIndex
if(this.goods.length <= 0) this.getMall()
},
// 搜索
onRightBtn(e){
switch(e.index){
case 0:
this.$Router.push({name: 'Search'})
break
}
},
// 企业广场
getCompanies(){
companies().then(res=>{
this.recommendBus = res.positions
this.hotBus = res.hot
this.industryBus = [{title: '全部',}, ...res.industries]
this.getCompaniesList()
})
},
// 企业列表
getCompaniesList(){
companiesList().then(res => {
this.busList = res.data
this.busPages = res.pages
})
},
// 易货首页
getMall(){
mall().then(res => {
this.classify = res.categories
this.banners = res.banners
this.coupons = res.coupons
this.position = res.positions
})
this.getGoods()
},
// 商品列表
getGoods(){
list().then(res => {
this.goods = res.data
this.pages = res.page
})
},
// 商品详情
onGoods(e){
this.$Router.push({name: 'goodsDetails', params: {id: e.goods_id}})
},
// 易货分类
onClassify(){
this.$Router.push({name: 'goodsList'})
}
}
}
</script>
<style lang="scss" scoped>
// 易货
.header-back{
background-image: linear-gradient(to bottom, white , #f8f8f8);
padding-top: $padding;
// 易货轮播
.banner{
position: relative;
background: white;
margin: 0 $margin;
border-radius: $radius/2;
padding-top: calc(50% - #{$margin * 2});
overflow: hidden;
.banner-swiper{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
.cover{
width: 100%;
height: 100%;
border-radius: $radius/2;
}
}
}
// 分类
.classify{
display: flex;
margin: $margin/2;
flex-wrap: wrap;
.classify-item{
margin: $margin/2;
width: calc(20% - #{$margin});
text-align: center;
.cover{
width: 98rpx;
height: 98rpx;
vertical-align: top;
margin-bottom: $margin/2;
}
.title{
line-height: 40rpx;
font-size: $title-size-sm;
color: $text-gray;
}
}
}
}
// 每日推荐
.goods-push{
margin: 0 $margin;
background: white;
border-radius: $radius/2;
display: flex;
.itme{
width: 50%;
}
.item-mian{
width: 50%;
padding: $padding/2;
height: 450rpx;
box-sizing: border-box;
text-align: center;
border-right: solid 1rpx $border-color;
@extend .vertical;
.title{
font-weight: bold;
font-size: $title-size;
@extend .nowrap;
line-height: 50rpx;
}
.price{
color: $text-price;
font-size: $title-size;
font-weight: bold;
line-height: 50rpx;
text{
font-size: 80%;
margin-right: 10rpx;
}
}
.cover{
margin-bottom: 30rpx;
width: 220rpx;
height: 220rpx;
vertical-align: top;
}
}
.itme-list{
position: relative;
padding: 25rpx $padding/2;
padding-left: 150rpx;
height: 150rpx;
box-sizing: border-box;
.title{
font-size: $title-size-lg;
@extend .nowrap;
line-height: 60rpx;
}
.price{
color: $text-price;
font-size: $title-size;
font-weight: bold;
line-height: 40rpx;
text{
font-size: 80%;
margin-right: 10rpx;
}
}
.cover{
position: absolute;
left: $padding/2;
top: $padding/2;
width: calc(150rpx - #{$padding});
height: calc(150rpx - #{$padding});
}
}
}
// 优惠券
.coupons{
display: flex;
flex-wrap: wrap;
margin: -10rpx ($margin - 10rpx);
.coupons-item{
background: white;
width: calc(50% - 20rpx);
margin: 10rpx;
border-radius: $radius/2;
padding: $padding - 10;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
.content{
width: calc(100% - 118rpx);
.coupons-title{
font-size: $title-size-lg;
@extend .nowrap;
}
.sun-text{
font-size: $title-size-sm;
color: $text-gray;
margin-bottom: $margin/2;
@extend .nowrap;
}
.btn{
color: $text-price;
border:solid 1rpx $text-price;
display: inline-block;
font-size: $title-size-sm;
padding: 0 ($padding/2);
height: 45rpx;
line-height: 45rpx;
border-radius: 22rpx;
}
}
.logo{
width: 98rpx;
height: 98rpx;
border-radius: 50%;
border:solid 1rpx $border-color;
}
}
}
// 行业分类
.industry-tabs{
white-space:nowrap;
padding: 0 0 $padding 0;
.industry-item{
margin-left: $margin;
display: inline-block;
@@ -160,7 +420,7 @@
}
// 热易商家
.hot-swiper{
margin: $margin;
margin: 0 $margin $margin $margin;
height: 198rpx;
.hot-box{
position: absolute;
@@ -168,7 +428,6 @@
width: 100%;
border-radius: ($radius/2);
background: white;
box-shadow: 0 0 6rpx 6rpx rgba($color: #000, $alpha: .02);
padding: $padding;
box-sizing: border-box;
.cover{
@@ -178,15 +437,14 @@
width: calc(198rpx - #{$padding * 2});
height: calc(198rpx - #{$padding * 2});
}
.content{
.hot-content{
padding-left: calc(198rpx - #{$padding});
padding-right: calc(100rpx + #{$padding});
.title{
.hot-title{
font-weight: bold;
font-size: $title-size-lg;
line-height: 40rpx;
height: 40rpx;
color: $text-color;
padding-bottom: 10rpx;
}
.credibility{
@@ -217,11 +475,9 @@
// 推荐商家
.recommended{
white-space:nowrap;
padding: $padding 0;
.item-box{
display: inline-block;
background: white;
box-shadow: 0 0 6rpx 6rpx rgba($color: #000, $alpha: .02);
width: 240rpx;
margin-left: $margin;
border-radius: ($radius/2);
@@ -242,7 +498,6 @@
font-weight: bold;
font-size: $title-size-lg;
padding: ($padding/2) 0;
color: $text-color;
}
.item-btn{
font-size: $title-size-m;
@@ -254,27 +509,20 @@
}
}
}
// 搜索
.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;
padding: $padding;
display: flex;
justify-content: space-between;
.title{
font-weight: bold;
text{
padding-left: $padding/2;
font-weight: normal;
font-size: $title-size-m;
color: $text-gray;
}
}
.more{
font-size: $title-size-m;
font-weight: normal;
@@ -283,41 +531,4 @@
}
</style>
<!-- goods: [
{
cover: "https://yanxuan-item.nosdn.127.net/d3b072b5006f56935d15d239cbc5c953.jpg",
title: "片片大果仁，夏威夷坚果脆片 可可味 55克",
price: "16",
sales: "25"
},
{
cover: "https://yanxuan-item.nosdn.127.net/8cfaed758404e23bc74c7214505ce5ec.jpg",
title: "每日坚果亚麻籽谷物燕麦片 600克",
price: "58",
sales: "1002"
},
{
cover: "https://yanxuan-item.nosdn.127.net/65af0745153e2dfa3d7c4fafb7472db6.jpg",
title: "全新升级银罐，玲珑柑普茶 130克（10颗）",
price: "98",
sales: "2235"
},
{
cover: "https://yanxuan-item.nosdn.127.net/f3af9b6eaf15e6e3be1f14e14da90930.jpg",
title: "别致养生设计 猪鬃气垫按摩梳",
price: "79",
sales: "992"
},
{
cover: "https://yanxuan-item.nosdn.127.net/cb99e8a2f4597f3a5d05347a9eeb64c5.png",
title: "2020年新款，日式减压按摩腰靠",
price: "219",
sales: "231"
},
{
cover: "https://yanxuan-item.nosdn.127.net/fff6aead2baff207e869f0aa6f276b63.png",
title: "T300无线吸尘器",
price: "159",
sales: "988"
}
] -->