Files
jjx-web/pages/index/index.vue
T
2023-12-07 23:21:43 +08:00

1011 lines
24 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<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="/static/images/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>
<view class="register">
<view class="left">
<view class="text">
<text>免费注册!!</text>
<el-divider class="divider" direction="vertical" />
<view class="ad-text2">
<text class="yellow">成为平台会员 免费询价</text>
<text class="white">企业专享价 续重免运费 增值权益 免息账期 采购管家</text>
</view>
</view>
</view>
<view class="right">
<el-button type="warning" round>
立即注册
<i class="el-icon-arrow-right"></i>
</el-button>
</view>
</view>
<!-- <gap height="100" />-->
<div style="clear:both;width: 100%;"></div>
<!-- 询价列表 start -->
<view class="enquiry-outer">
<view class="" style="height: 20px;"></view>
<el-divider>
<view class="divider-text">最新询价信息</view>
</el-divider>
<view class="" style="height: 20px;"></view>
<div class="mod-inner2Listcenter clearfix sliper">
<ul class="clearfix">
<li v-for="(item, index) in enquirySheetData" class="inli-mask" :key="index"
@click="vk.navigateTo('/pages/enquiry/detail?id=' + item._id);">
<a href="javascript:void(0)" style="display: block;" rel="nofollow">
<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 class="show-more"><i class="el-icon-view"></i>查看更多</div>
</ul>
</div>
</view>
<!-- 询价列表 end -->
<!-- 现货市场 start -->
<view class="" style="height: 20px;"></view>
<view class="spot-outer">
<el-divider>
<view class="spot-divider-text">现货市场</view>
</el-divider>
<view class="" style="height: 20px;"></view>
<view class="goods-list">
<view v-for="(item, index) in spotGoodsData" :key="index" class="goods"
:style="{marginRight:( index % 4 === 0 && index > 0) ? 0 : '25px'}">
<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>
<div class="show-more"><i class="el-icon-view"></i>查看更多</div>
</view>
<!-- 现货市场 end -->
<gap height="50" />
<!-- 合作商家 start -->
<view class="" style="height: 20px;"></view>
<view class="spot-outer">
<el-divider>
<view class="spot-divider-text">合作商家</view>
</el-divider>
<view class="" style="height: 20px;"></view>
<view class="goods-list">
<view v-for="(item, index) in spotGoodsData" :key="index" class="goods"
:style="{marginRight:( index % 4 === 0 && index > 0) ? 0 : '25px'}">
<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>
<div class="show-more"><i class="el-icon-view"></i>查看更多</div>
</view>
<!-- 合作商家 end -->
<!-- 金久信服务商展示 start -->
<view class="w1200">
<view class="" style="height: 20px;"></view>
<el-divider>
<view class="divider-text">金久信服务商展示</view>
</el-divider>
<view class="" style="height: 20px;"></view>
<view class="server-card2">
<view class="item b1">
<i class="el-icon-lock"></i>
<view class="p4">
<el-button plain round size="mini">交易安全</el-button>
</view>
</view>
<view class="item b2">
<i class="el-icon-lock"></i>
<view class="p4">
<el-button plain round size="mini">代检代查</el-button>
</view>
</view>
<view class="item b3">
<i class="el-icon-lock"></i>
<view class="p4">
<el-button plain round size="mini">优势资源匹配</el-button>
</view>
</view>
<view class="item b4">
<i class="el-icon-lock"></i>
<view class="p4">
<el-button plain round size="mini">交易模式多元化</el-button>
</view>
</view>
<view class="item b5">
<i class="el-icon-lock"></i>
<view class="p4">
<el-button plain round size="mini">电子合同</el-button>
</view>
</view>
</view>
</view>
<!-- 合作商家 end -->
<!-- 交易模式 start -->
<view class="w1200">
<view class="" style="height: 20px;"></view>
<el-divider>
<view class="divider-text">交易模式</view>
</el-divider>
<view class="" style="height: 20px;"></view>
<el-row :gutter="10" class="wrap" justify="space-between">
<el-col :span="6">
<el-card shadow="hover" class="transaction-card">
<view class="item">
<view class="p1">
<i class="el-icon-lock"></i>
自主交易
</view>
<view class="p2">
<view class="line"></view>
</view>
<view class="p3">
<text>货款直付销售商</text>
<text>双方平台保证金</text>
</view>
<view class="p4">
<el-button plain round size="mini">交易流程</el-button>
</view>
</view>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover" class="transaction-card">
<view class="item">
<view class="p1">
<i class="el-icon-key"></i>
金久信公正
</view>
<view class="p2">
<view class="line"></view>
</view>
<view class="p3">
<text>货款直付平台</text>
<text>交易成功后支付至销售商</text>
</view>
<view class="p4">
<el-button plain round size="mini">交易流程</el-button>
</view>
</view>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover" class="transaction-card">
<view class="item">
<view class="p1">
<i class="el-icon-postcard"></i>
信誉采购
</view>
<view class="p2">
<view class="line"></view>
</view>
<view class="p3">
<text>平台接受信誉采购的销售商</text>
<text>进行交易、到期后结算</text>
</view>
<view class="p4">
<el-button plain round size="mini">交易流程</el-button>
</view>
</view>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover" class="transaction-card">
<view class="item">
<view class="p1">
<i class="el-icon-medal"></i>
金久信自营
</view>
<view class="p2">
<view class="line"></view>
</view>
<view class="p3">
<text>货款直付平台</text>
<text>交易成功后支付至销售商</text>
</view>
<view class="p4">
<el-button plain round size="mini">交易流程</el-button>
</view>
</view>
</el-card>
</el-col>
</el-row>
</view>
<!-- 交易模式 end -->
<!-- 新闻资讯 start -->
<view class="w1200">
<el-row :gutter="10" class="wrap" justify="space-between">
<el-col :span="18">
<el-card shadow="hover" class="news-card">
<div slot="header" class="clearfix">
<span class="card-title">金久信·金融服务</span>
<el-button style="float: right; color: #BD3124;" size="mini">马上开通</el-button>
</div>
<div class="jrfw-img">
<image src="https://oss.wsdns.cn/20231207/a3ea8ffd7242453eb2242ffaaa89116d.png"
mode="widthFix"></image>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover" class="news-card">
<div slot="header" class="clearfix">
<span class="card-title">最新入驻</span>
</div>
<ul class="news-list" style="line-height: 2em;">
<li>广西聚钱财实业有限公司</li>
<li>广西聚钱财实业有限公司2</li>
<li>广西聚钱财实业有限公司3</li>
<li>广西聚钱财实业有限公司4</li>
<li>广西聚钱财实业有限公司5</li>
<li>广西聚钱财实业有限公司5</li>
<li>广西聚钱财实业有限公司5</li>
</ul>
</el-card>
</el-col>
</el-row>
</view>
<!-- 新闻资讯 end -->
<!-- 买家入门 卖家入门 start -->
<view class="w1200">
<el-row :gutter="10" class="wrap" justify="space-between">
<el-col :span="12">
<el-card shadow="hover" class="news-card">
<div slot="header" class="clearfix">
<span class="card-title">买家入门</span>
<el-button style="float: right; padding: 3px 0; color: #999999;" type="text">更多></el-button>
</div>
<div class="content">
<div class="news-img">
<image src="http://jyx.gxwebsoft.com/public/index/images/xw1.jpg" mode="widthFix">
</image>
</div>
<div class="tabs">
<el-tabs type="card" v-model="buyerTabs" @tab-click="handleClick1">
<el-tab-pane label="常见问题" name="first">
<ul class="news-list">
<li>常见问题常见问题常见见问题常问题常见问题常见问题常见问题1</li>
<li>常见问题2</li>
<li>常见问题3</li>
<li>常见问题4</li>
<li>常见问题5</li>
</ul>
</el-tab-pane>
<el-tab-pane label="如何采购" name="second">
<ul class="news-list">
<li>如何采购</li>
<li>如何采购</li>
<li>如何采购</li>
<li>如何采购</li>
<li>如何采购</li>
</ul>
</el-tab-pane>
</el-tabs>
</div>
</div>
</el-card>
</el-col>
<el-col :span="12" class="wrap" justify="space-between">
<el-card shadow="hover" class="news-card">
<div slot="header" class="clearfix">
<span class="card-title">卖家入门</span>
<el-button style="float: right; padding: 3px 0; color: #999999;" type="text">更多></el-button>
</div>
<div class="content">
<div class="news-img">
<image src="http://jyx.gxwebsoft.com/public/index/images/xw2.jpg" mode="widthFix">
</image>
</div>
<div class="tabs">
<el-tabs type="card" v-model="sellerTabs" @tab-click="handleClick2">
<el-tab-pane label="常见问题" name="first">
<ul class="news-list">
<li>常见问题常见问题常见见问题常问题常见问题常见问题常见问题1</li>
<li>常见问题2</li>
<li>常见问题3</li>
<li>常见问题4</li>
<li>常见问题5</li>
</ul>
</el-tab-pane>
<el-tab-pane label="店铺管理" name="second">
<ul class="news-list">
<li>如何采购</li>
<li>如何采购</li>
<li>如何采购</li>
<li>如何采购</li>
<li>如何采购</li>
</ul>
</el-tab-pane>
</el-tabs>
</div>
</div>
</el-card>
</el-col>
</el-row>
</view>
<!-- 买家入门 卖家入门 end -->
<!-- 资讯中心 start -->
<view class="w1200">
<view class="" style="height: 20px;"></view>
<el-divider>
<view class="divider-text">资讯中心</view>
</el-divider>
<view class="" style="height: 20px;"></view>
<el-row :gutter="10" class="wrap" justify="space-between">
<el-col :span="6">
<el-card shadow="hover">
<div slot="header" class="clearfix">
<span>市场信息</span>
</div>
<ul class="news-list">
<li>新闻资讯</li>
<li>新闻资讯</li>
<li>新闻资讯</li>
<li>新闻资讯</li>
<li>新闻资讯</li>
</ul>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover">
<div slot="header" class="clearfix">
<span>期货信息</span>
</div>
<ul class="news-list">
<li>新闻资讯</li>
<li>新闻资讯</li>
<li>新闻资讯</li>
<li>新闻资讯</li>
<li>新闻资讯</li>
</ul>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover">
<div slot="header" class="clearfix">
<span>行情分析</span>
</div>
<ul class="news-list">
<li>新闻资讯</li>
<li>新闻资讯</li>
<li>新闻资讯</li>
<li>新闻资讯</li>
<li>新闻资讯</li>
</ul>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover">
<div slot="header" class="clearfix">
<span>行业动态</span>
</div>
<ul class="news-list">
<li>新闻资讯</li>
<li>新闻资讯</li>
<li>新闻资讯</li>
<li>新闻资讯</li>
<li>新闻资讯</li>
</ul>
</el-card>
</el-col>
</el-row>
</view>
<!-- 资讯中心 end -->
<view class="ad-bottom">
<el-row :gutter="10" class="wrap" justify="space-between">
<el-col :span="12">
<view class="item">
<image src="http://jyx.gxwebsoft.com/uploads/20210506/8a6b689d22ffcb382dad758e15e933f9.jpg"
mode="widthFix" />
</view>
</el-col>
<el-col :span="12">
<view class="item">
<image src="http://jyx.gxwebsoft.com/uploads/20210506/13a1ee4c52fda80a7e03080198944671.jpg"
mode="widthFix" />
</view>
</el-col>
<el-col :span="12">
<view class="item">
<image src="http://jyx.gxwebsoft.com/uploads/20210521/41e761a2f98cdf5a7e873ead16fb47eb.jpg"
mode="widthFix" />
</view>
</el-col>
<el-col :span="12">
<view class="item">
<image src="http://jyx.gxwebsoft.com/uploads/20210506/8e24bf5d6b29858a8c5b1256b29ffadc.jpg"
mode="widthFix" />
</view>
</el-col>
</el-row>
</view>
<!-- <el-card class="register-count">
金久信已帮助6,157,952位企业解决产品供需难题
在线提交您的需求,即享专业服务
</el-card> -->
<gap height="50" />
<common-footer></common-footer>
<right-bar></right-bar>
</view>
</template>
<script>
import Gap from "../../components/gap/gap.vue";
var vk = uni.vk;
export default {
components: {
Gap
},
data() {
// 页面数据变量
return {
// init请求返回的数据
spotGoodsData: [],
enquirySheetData: [],
data: {},
// 表单请求数据
form1: {},
scrollTop: 0,
buyerTabs: 'first',
sellerTabs: 'first'
}
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
// 监听 - 页面每次【加载时】执行(如:前进)
onLoad(options = {}) {
console.log(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);
},
handleClick1() {
},
handleClick2() {
}
},
// 监听器
watch: {},
// 计算属性
computed: {}
}
</script>
<style lang="scss" scoped>
.w1200 {
width: 1200px;
margin: 20px auto;
}
.register {
background-color: #3d5fda;
width: 1200px;
height: 88px;
margin: 20px auto;
display: flex;
justify-content: space-between;
align-items: center;
.left {
display: flex;
align-items: center;
.text {
display: flex;
align-items: center;
font-size: 30px;
color: #ffffff;
padding-left: 50px;
.divider {
margin: 0 30px;
transform: translateX(-10%);
}
.ad-text2 {
display: flex;
flex-direction: column;
font-size: 18px;
// transform: rotate(0.1turn);
.yellow {
color: #fcb800;
font-size: 25px;
}
.white {
color: #ffffff;
}
}
}
}
.right {
padding-right: 50px;
display: flex;
}
}
.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;
.inli-mask {
padding: 20px;
min-height: 120px;
}
}
.show-more {
clear: both;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
background-color: #BD3124;
text-align: center;
width: 150px;
margin: 0 auto;
height: 40px;
cursor: pointer;
.el-icon-view {
font-size: 18px;
padding-right: 5px;
}
}
.enquiry-outer .mod-inner2Listcenter {
padding: 20px 0;
}
.spot-outer {
width: 1200px;
margin: 0px auto;
background-color: white;
padding: 50px;
}
.goods-list {
display: flex;
flex-wrap: wrap;
}
.goods {
width: 200px;
//height: 280px;
background-color: #FFFFFF;
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.05);
text-align: center;
//margin-right: 25px;
margin-bottom: 25px;
padding: 10px 20px;
&-title {
font-size: 15px;
color: #101010;
height: 62px;
padding-top: 20px;
font-weight: bold;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-webkit-line-clamp: 2;
}
&-stock {
font-size: 12px;
color: #BD3124;
}
&-address {
font-size: 12px;
margin: 10px 0;
}
&-image {
width: 100%;
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-address {
color: gray;
}
}
.detail-num .company {
font-size: 15px !important;
line-height: 2em;
}
.ad-bottom {
width: 1200px;
margin: 40px auto;
.item {
margin: 3px 0;
image {
width: 100%;
height: 100%;
}
}
.wrap {
flex-wrap: wrap;
}
}
.register-count {
width: 1200px;
margin: auto;
}
.card-title {
color: #BD3124;
}
.clearfix {
font-size: 16px;
font-weight: 500;
}
.news-card {
.news-img {
image {
width: 200px;
}
}
.content {
display: flex;
.tabs {
padding: 0 20px;
}
.news-list {
ul {}
li {
width: 330px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
}
.jrfw-img {
image {
width: 100%;
}
}
.transaction-card {
.item {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
height: 150px;
.p1 {
font-size: 20px;
font-weight: 500;
i {
font-size: 20px;
padding: 0 4px;
}
}
.p2 {
.line {
width: 40px;
height: 3px;
border-radius: 100px;
background-color: #BD3124;
}
}
.p3 {
display: flex;
flex-direction: column;
text-align: center;
font-size: 15px;
color: #666;
}
}
}
.server-card2 {
display: flex;
justify-content: space-between;
.item {
width: 240px;
height: 270px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
i {
font-size: 30px;
color: #ffffff;
}
.p4 {
margin-top: 20px;
}
}
.b1 {
background: url('http://jyx.gxwebsoft.com/public/index/images/god1hover.jpg');
background-position: center;
background-size: 150%;
}
.b2 {
background: url('http://jyx.gxwebsoft.com/public/index/images/god2hover.jpg');
background-position: center;
background-size: 150%;
}
.b3 {
background: url('http://jyx.gxwebsoft.com/public/index/images/god3hover.jpg');
background-position: center;
background-size: 150%;
}
.b4 {
background: url('http://jyx.gxwebsoft.com/public/index/images/god4hover.jpg');
background-position: center;
background-size: 150%;
}
.b5 {
background: url('http://jyx.gxwebsoft.com/public/index/images/god5hover.jpg');
background-position: center;
background-size: 150%;
}
}
</style>