350 lines
10 KiB
Vue
350 lines
10 KiB
Vue
<template>
|
||
<view>
|
||
<top-bar></top-bar>
|
||
<common-header></common-header>
|
||
<category-bar alwaysShowCategory></category-bar>
|
||
|
||
<!-- banner -->
|
||
<view class="banner-outer">
|
||
<el-carousel height="365px">
|
||
<el-carousel-item v-for="item in 4" :key="item">
|
||
<image class="carousel-img"
|
||
src="http://jyx.gxwebsoft.com/uploads/20210521/336a76fbf9fe44a07b5cfd4caf6f8bb9.jpg"
|
||
mode="scaleToFill"></image>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</view>
|
||
<!-- banner下 -->
|
||
<div class="group-inner3">
|
||
<div class="group-inner3-list">
|
||
<a href="/support/brand.html" rel="nofollow" target="_blank">
|
||
<div class="group-inner3-listleft">
|
||
<h2>厂家直营</h2>
|
||
<p>产地货源 正规优价</p>
|
||
</div>
|
||
<div class="group-inner3-listright">
|
||
<img src="/static/images/home1.png">
|
||
</div>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="group-inner3-list">
|
||
<a href="/market/index.html" rel="nofollow" target="_blank">
|
||
<div class="group-inner3-listleft">
|
||
<h2>采购·找现货</h2>
|
||
<p>专属采购助手<br>
|
||
为您匹配优质供应商</p>
|
||
</div>
|
||
<div class="group-inner3-listright">
|
||
<img src="/static/images/home2.png">
|
||
</div>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="group-inner3-list">
|
||
<a href="/yellowpage/index.html" rel="nofollow" target="_blank">
|
||
<div class="group-inner3-listleft">
|
||
<h2>供应·找买家 </h2>
|
||
<p>快速发布您的产品<br>
|
||
让网上生意变的如此简单</p>
|
||
</div>
|
||
<div class="group-inner3-listright">
|
||
<img src="/static/images/home3.png">
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both;width: 100%;"></div>
|
||
|
||
<!-- 询价列表 start -->
|
||
<view class="enquiry-outer">
|
||
<view class="" style="height: 40px;"></view>
|
||
<el-divider>
|
||
<view class="divider-text">最新询价信息</view>
|
||
</el-divider>
|
||
<view class="" style="height: 40px;"></view>
|
||
<div class="mod-inner2Listcenter clearfix sliper">
|
||
<ul class="clearfix">
|
||
<li v-for="(item, index) in enquirySheetData" class="inli-mask" :key="index">
|
||
<a href="javascript:void(0)" style="display: block;" rel="nofollow" target="_blank">
|
||
<div class="detail">
|
||
<div class="detail-kind clearfix">
|
||
<div class="tag">报价中</div>
|
||
<div class="kind"><span>{{ item.answerNumber || 0 }}</span>家已报价</div>
|
||
</div>
|
||
<div class="detail-infor">
|
||
<!-- <span>{{item.}}</span><span>{{}}支</span> -->
|
||
</div>
|
||
<div class="detail-num">
|
||
<span v-if="item.user.accountType === 1"
|
||
class="company">{{ item.user.person.personName }}</span>
|
||
<span v-if="item.user.accountType === 2"
|
||
class="company">{{ item.user.company.companyName }}</span>
|
||
<span class="time">{{ item._add_time_str }}</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
|
||
<div style="clear:both;width: 100%;"></div>
|
||
</ul>
|
||
</div>
|
||
</view>
|
||
<!-- 询价列表 end -->
|
||
|
||
<!-- 现货市场 start -->
|
||
<view class="" style="height: 40px;"></view>
|
||
<view class="spot-outer">
|
||
<el-divider>
|
||
<view class="spot-divider-text">现货市场</view>
|
||
</el-divider>
|
||
<view class="" style="height: 40px;"></view>
|
||
<view class="goods-list">
|
||
<view v-for="(item, index) in spotGoodsData" :key="index" class="goods">
|
||
<view class="goods-title">{{ item.name }}</view>
|
||
<view class="goods-stock">库存：{{ item.stock }}吨</view>
|
||
<view class="goods-address">供货地：{{ item.addressStr }}</view>
|
||
<view class="goods-image">
|
||
<image :src="item.user.businessCard.logo" mode="aspectFit"></image>
|
||
</view>
|
||
<view v-if="item.user.accountType === 1" class="goods-company">{{ item.user.person.personName }}
|
||
</view>
|
||
<view v-if="item.user.accountType === 2" class="goods-company">{{ item.user.company.companyName }}
|
||
</view>
|
||
<el-button class="empty-bg-plain-btn" @click="vk.navigateTo('/pages/spot/goods/detail?id=' + item._id);"
|
||
type="primary" plain size="small">立即查看
|
||
</el-button>
|
||
</view>
|
||
</view>
|
||
<view class="text-center">
|
||
<el-button>查看更多</el-button>
|
||
</view>
|
||
</view>
|
||
<!-- 现货市场 end -->
|
||
<gap height="100"/>
|
||
<common-footer></common-footer>
|
||
</view>
|
||
</template>
|
||
|
||
|
||
<script>
|
||
|
||
var vk = uni.vk;
|
||
export default {
|
||
data() {
|
||
// 页面数据变量
|
||
return {
|
||
// init请求返回的数据
|
||
spotGoodsData: [],
|
||
enquirySheetData: [],
|
||
data: {},
|
||
// 表单请求数据
|
||
form1: {},
|
||
scrollTop: 0,
|
||
}
|
||
},
|
||
onPageScroll(e) {
|
||
this.scrollTop = e.scrollTop;
|
||
},
|
||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||
onLoad(options = {}) {
|
||
vk = uni.vk;
|
||
this.options = options;
|
||
this.init(options);
|
||
},
|
||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||
onReady() {
|
||
|
||
},
|
||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||
onShow() {
|
||
|
||
},
|
||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||
onHide() {
|
||
|
||
},
|
||
// 监听 - 点击右上角转发时
|
||
onShareAppMessage(options) {
|
||
|
||
},
|
||
// 函数
|
||
methods: {
|
||
getSpotGoods() {
|
||
vk.callFunction({
|
||
url: 'client/spot/goods/pub/getList',
|
||
loading: false,
|
||
data: {
|
||
pageIndex: 1,
|
||
pageSize: 10,
|
||
},
|
||
success: (data) => {
|
||
console.log('data: ', data);
|
||
data.rows.forEach(item => {
|
||
try {
|
||
item.addressStr = item.address.province.name + "-" + item.address.city
|
||
.name + "-" + item.address.area.name
|
||
} catch (err) {
|
||
item.addressStr = ""
|
||
}
|
||
})
|
||
this.spotGoodsData = data.rows
|
||
}
|
||
});
|
||
},
|
||
getEnquirySheetList() {
|
||
vk.callFunction({
|
||
url: 'client/enquiry/sheet/pub/getList',
|
||
loading: false,
|
||
data: {
|
||
pageIndex: 1,
|
||
pageSize: 10,
|
||
},
|
||
success: (data) => {
|
||
|
||
this.enquirySheetData = data.rows
|
||
}
|
||
});
|
||
},
|
||
// 页面数据初始化函数
|
||
init(options) {
|
||
this.getSpotGoods()
|
||
this.getEnquirySheetList()
|
||
},
|
||
pageTo(path) {
|
||
vk.navigateTo(path);
|
||
}
|
||
},
|
||
// 监听器
|
||
watch: {},
|
||
// 计算属性
|
||
computed: {}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.banner-outer {
|
||
}
|
||
|
||
.carousel-img {
|
||
width: 760px;
|
||
height: 365px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.el-divider__text {
|
||
background-color: initial;
|
||
}
|
||
|
||
.el-carousel__item {
|
||
text-align: center;
|
||
}
|
||
|
||
.divider-text {
|
||
color: #393735;
|
||
font-size: 28px;
|
||
padding: 0 20px;
|
||
background-color: #f4f4f4;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.spot-divider-text {
|
||
color: #393735;
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
padding: 0 20px;
|
||
background-color: white;
|
||
}
|
||
|
||
.enquiry-outer {
|
||
width: 1200px;
|
||
margin: 0px auto;
|
||
}
|
||
|
||
.enquiry-outer .mod-inner2Listcenter {
|
||
|
||
padding: 20px 0;
|
||
}
|
||
|
||
.spot-outer {
|
||
width: 1200px;
|
||
margin: 0px auto;
|
||
background-color: white;
|
||
padding: 50px;
|
||
}
|
||
|
||
.goods-list {
|
||
|
||
display: flex;
|
||
|
||
}
|
||
|
||
.goods {
|
||
width: 217px;
|
||
//height: 280px;
|
||
background-color: #FFFFFF;
|
||
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.05);
|
||
text-align: center;
|
||
margin-right: 20px;
|
||
margin-bottom: 25px;
|
||
padding: 10px 20px;
|
||
|
||
&-title {
|
||
font-size: 15px;
|
||
color: #101010;
|
||
height: 62px;
|
||
padding-top: 20px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
&-stock {
|
||
font-size: 12px;
|
||
color: #BD3124;
|
||
}
|
||
|
||
&-address {
|
||
font-size: 12px;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
&-image {
|
||
width: 200px;
|
||
height: 70px;
|
||
margin: 0 auto;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
&-company {
|
||
color: #4F4F4F;
|
||
font-size: 14px;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
&-buy {
|
||
width: 108px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
color: rgba(169, 41, 36, 1);
|
||
font-size: 13px;
|
||
text-align: center;
|
||
font-family: Roboto;
|
||
border: 1px solid rgba(169, 41, 36, 1);
|
||
margin: 0 auto;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.goods-image {
|
||
width: 100%;
|
||
}
|
||
|
||
.goods-address {
|
||
color: gray;
|
||
}
|
||
|
||
}
|
||
</style> |