@ -0,0 +1,473 @@ | |||
<template> | |||
<view class="page"> | |||
<!--顶部栏--> | |||
<topbar showRight="1"></topbar> | |||
<!-- 供应商 --> | |||
<view class="supplier" v-if="userShop"> | |||
<!--上面第一个--> | |||
<view class="topItem"> | |||
<view class="imageFrame"> | |||
<!-- <uv-swiper :list="bannerList[0]" height="320rpx" keyName="image"> | |||
</uv-swiper> --> | |||
<img src="../../static/image/index/4.png" style="width:100%;height:100%;"> | |||
</view> | |||
</view> | |||
<!-- 下面三个--> | |||
<view class="threeHeOne"> | |||
<!-- 第一个--> | |||
<view class="oneItem"> | |||
<view class="left"> | |||
<!--<span>Company Profile</span>--> | |||
<span> {{ $t('pages.index.index.companyProfile') }}</span> | |||
<span class="subText"> {{ $t('pages.index.index.aluminiumProduct') }}</span> | |||
</view> | |||
<view class="right"> | |||
随着全球经济的快速发展,我们这家领先的企业公司应运而生,致力于为客户提供卓越的服务和优质的产品。我们公司成立于2001年,总部位于深圳市横岗大厦,拥有广泛的业务领域和专业的团队,专注于实现客户的期望和需求。 | |||
</view> | |||
</view> | |||
<!-- 第二个--> | |||
<view class="twoItem"> | |||
<view class="left"> | |||
<img src="../../static/image/index/2.png" style="width:100%;height:100%;"> | |||
</view> | |||
<view class="right"> | |||
<img src="../../static/image/index/3.png" style="width:100%;height:100%;"> | |||
</view> | |||
</view> | |||
<!-- 第三个--> | |||
<view class="threeItem"> | |||
<view class="right"> | |||
随着全球经济的快速发展,我们这家领先的企业公司应运而生,致力于为客户提供卓越的服务和优质的产品。我们公司成立于2001年,总部位于深圳市横岗大厦,拥有广泛的业务领域和专业的团队,专注于实现客户的期望和需求。 | |||
</view> | |||
<view class="left"> | |||
<!--<span>Company Profile</span>--> | |||
<span> {{ $t('pages.index.index.companyProfile') }}</span> | |||
<span class="subText"> {{ $t('pages.index.index.aluminiumProduct') }}</span> | |||
</view> | |||
</view> | |||
</view> | |||
<!--报价和挂单--> | |||
<view class="btns"> | |||
<span @click="goToPage(0)" class="oneBtn"> | |||
{{ $t('other.supplierQuotation') }} | |||
</span> | |||
<!-- 这个提单不需要了 --> | |||
<!-- <span @click="goToPage(1)" class="twoBtn"> | |||
{{ $t('other.supplierBilLading') }} | |||
</span> --> | |||
</view> | |||
</view> | |||
<!-- 采购商 --> | |||
<view class="purchaser" v-else> | |||
<!--上面第一个--> | |||
<view class="topItem"> | |||
<view class="imageFrame"> | |||
<img src="../../static/image/index/4.png" style="width:100%;height:100%;"> | |||
</view> | |||
</view> | |||
<!-- 下面三个--> | |||
<view class="threeHeOne"> | |||
<!-- 第一个--> | |||
<view class="oneItem"> | |||
<view class="left"> | |||
<span>Company Profile</span> | |||
<span> {{ $t('pages.index.index.companyProfile') }}</span> | |||
<span class="subText"> {{ $t('pages.index.index.aluminiumProduct') }}</span> | |||
</view> | |||
<view class="right"> | |||
随着全球经济的快速发展,我们这家领先的企业公司应运而生,致力于为客户提供卓越的服务和优质的产品。我们公司成立于2001年,总部位于深圳市横岗大厦,拥有广泛的业务领域和专业的团队,专注于实现客户的期望和需求。 | |||
</view> | |||
</view> | |||
<!-- 第二个--> | |||
<view class="twoItem"> | |||
<view class="left"> | |||
<img src="../../static/image/index/2.png" style="width:100%;height:100%;"> | |||
</view> | |||
<view class="right"> | |||
<img src="../../static/image/index/3.png" style="width:100%;height:100%;"> | |||
</view> | |||
</view> | |||
<!-- 第三个--> | |||
<view class="threeItem"> | |||
<view class="right"> | |||
随着全球经济的快速发展,我们这家领先的企业公司应运而生,致力于为客户提供卓越的服务和优质的产品。我们公司成立于2001年,总部位于深圳市横岗大厦,拥有广泛的业务领域和专业的团队,专注于实现客户的期望和需求。 | |||
</view> | |||
<view class="left"> | |||
<span>Company Profile</span> | |||
<span> {{ $t('pages.index.index.companyProfile') }}</span> | |||
<span class="subText"> {{ $t('pages.index.index.aluminiumProduct') }}</span> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
<tabber select="0" /> | |||
</view> | |||
</template> | |||
<script> | |||
import topbar from '@/components/base/topbar.vue' | |||
import tabber from '@/components/base/tabbar.vue' | |||
import productList from '@/components/user/productList.vue' | |||
import { | |||
mapGetters | |||
} from 'vuex' | |||
import changeLanguage from '@/components/base/changeLanguage.vue' | |||
export default { | |||
components: { | |||
tabber, | |||
topbar, | |||
productList, | |||
changeLanguage | |||
}, | |||
data() { | |||
return { | |||
queryParams: { | |||
pageNo: 1, | |||
pageSize: 10, | |||
title: '' | |||
}, | |||
bannerList: [] | |||
} | |||
}, | |||
onShow() { | |||
this.getImagePhoneOther() | |||
if (!this.$store.state.shop && !this.$store.state.buy) { | |||
uni.reLaunch({ | |||
url: '/pages_order/auth/selectionIdentity?back=no&' | |||
}) | |||
} | |||
this.$store.commit('getUserInfo') | |||
this.getBannerList() | |||
}, | |||
computed: { | |||
...mapGetters(['userShop']), | |||
}, | |||
methods: { | |||
getBannerList() { | |||
this.$api('bannerList', res => { | |||
this.bannerList = res.result | |||
}) | |||
}, | |||
goToPage(titleIndex) { | |||
uni.navigateTo({ | |||
url: '/pages_order/order/offerOrBillLading?titleIndex=' + titleIndex | |||
}) | |||
}, | |||
getImagePhoneOther() { | |||
this.$api('getImagePhoneOther', res => { | |||
}) | |||
}, | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
* { | |||
box-sizing: border-box; | |||
} | |||
.page { | |||
background-color: #2e394d; | |||
min-height: 100vh; | |||
// 供应商 | |||
.supplier { | |||
display: flex; | |||
flex-direction: column; | |||
height: calc(100vh - 120rpx - 120rpx); | |||
background-color: #2e394d; | |||
.topItem { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
height: 30%; | |||
background-image: url('../../static/image/index/1.png'); | |||
background-size: cover; | |||
.imageFrame { | |||
width: 90%; | |||
height: 90%; | |||
//padding:80rpx; | |||
} | |||
} | |||
.threeHeOne { | |||
display: flex; | |||
padding: 20rpx 40rpx 10rpx; | |||
flex-direction: column; | |||
height: 60%; | |||
.oneItem { | |||
display: flex; | |||
height: 33%; | |||
.left { | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: center; | |||
align-items: center; | |||
gap: 10rpx; | |||
width: 33%; | |||
background-color: #1e293d; | |||
color: white; | |||
font-size: 26rpx; | |||
.subText { | |||
text-align: center; | |||
width: 80%; | |||
background-color: #2e394d; | |||
padding: 0 20rpx; | |||
} | |||
} | |||
.right { | |||
//height: 30%; | |||
width: 66%; | |||
padding: 20rpx; | |||
background-image: url('../../static/image/index/1.png'); | |||
background-size: cover; | |||
font-size: 20rpx; | |||
color: white; | |||
} | |||
} | |||
.twoItem { | |||
display: flex; | |||
justify-content: space-between; | |||
gap: 20rpx; | |||
height: 33%; | |||
margin-top: 20rpx; | |||
padding: 10rpx; | |||
.left { | |||
width: 60%; | |||
padding: 20rpx; | |||
background-color: #1e293d; | |||
} | |||
.right { | |||
width: 40%; | |||
padding: 20rpx; | |||
background-color: #1e293d; | |||
} | |||
} | |||
.threeItem { | |||
display: flex; | |||
//width: 100vw; | |||
height: 33%; | |||
.left { | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: center; | |||
align-items: center; | |||
gap: 20rpx; | |||
width: 33%; | |||
background-color: #1e293d; | |||
color: white; | |||
font-size: 26rpx; | |||
.subText { | |||
text-align: center; | |||
background-color: #2e394d; | |||
width: 80%; | |||
padding: 0 20rpx; | |||
} | |||
} | |||
.right { | |||
//height: 200rpx; | |||
width: 66%; | |||
padding: 20rpx; | |||
background-image: url('../../static/image/index/1.png'); | |||
background-size: cover; | |||
font-size: 20rpx; | |||
color: white; | |||
} | |||
} | |||
} | |||
.btns { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
gap: 40rpx; | |||
.oneBtn { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
width: 40%; | |||
height: 70rpx; | |||
border-radius: 40rpx; | |||
color: #1F1C39; | |||
font-size: 28rpx; | |||
margin: 20rpx 10rpx 0 0; | |||
background: #f2f2f2; | |||
//margin-top: 20rpx; | |||
border-radius: 40rpx; | |||
} | |||
.twoBtn { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
width: 40%; | |||
height: 70rpx; | |||
border-radius: 40rpx; | |||
color: #1F1C39; | |||
font-size: 28rpx; | |||
margin: 20rpx 10rpx 0 0; | |||
background: #f2f2f2; | |||
//margin-top: 20rpx; | |||
border-radius: 40rpx; | |||
} | |||
} | |||
} | |||
// 采购商 | |||
.purchaser { | |||
display: flex; | |||
flex-direction: column; | |||
//gap: 40rpx; | |||
background-color: #2e394d; | |||
.topItem { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
height: 280rpx; | |||
background-image: url('../../static/image/index/1.png'); | |||
background-size: cover; | |||
.imageFrame { | |||
width: 90%; | |||
height: 90%; | |||
//padding:80rpx; | |||
} | |||
} | |||
.threeHeOne { | |||
display: flex; | |||
padding: 20rpx 40rpx 10rpx; | |||
flex-direction: column; | |||
.oneItem { | |||
display: flex; | |||
.left { | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: center; | |||
align-items: center; | |||
gap: 10rpx; | |||
width: 33%; | |||
background-color: #1e293d; | |||
color: white; | |||
font-size: 26rpx; | |||
.subText { | |||
background-color: #2e394d; | |||
padding: 0 20rpx; | |||
} | |||
} | |||
.right { | |||
height: 180rpx; | |||
width: 66%; | |||
padding: 20rpx; | |||
background-image: url('../../static/image/index/1.png'); | |||
background-size: cover; | |||
font-size: 20rpx; | |||
color: white; | |||
} | |||
} | |||
.twoItem { | |||
display: flex; | |||
justify-content: space-between; | |||
gap: 20rpx; | |||
height: 280rpx; | |||
margin-top: 20rpx; | |||
padding: 10rpx; | |||
.left { | |||
width: 60%; | |||
padding: 20rpx; | |||
background-color: #1e293d; | |||
} | |||
.right { | |||
width: 40%; | |||
padding: 20rpx; | |||
background-color: #1e293d; | |||
} | |||
} | |||
.threeItem { | |||
display: flex; | |||
//width: 100vw; | |||
.left { | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: center; | |||
align-items: center; | |||
gap: 20rpx; | |||
width: 33%; | |||
background-color: #1e293d; | |||
color: white; | |||
font-size: 26rpx; | |||
.subText { | |||
background-color: #2e394d; | |||
padding: 0 20rpx; | |||
} | |||
} | |||
.right { | |||
height: 200rpx; | |||
width: 66%; | |||
padding: 20rpx; | |||
background-image: url('../../static/image/index/1.png'); | |||
background-size: cover; | |||
font-size: 20rpx; | |||
color: white; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@ -1,212 +1,208 @@ | |||
<template> | |||
<view class="page"> | |||
<view v-if="list.length>0" class="item" v-for="(item, index) in list" :key="index"> | |||
<view class="top"> | |||
<view class="service"> | |||
<text>{{ $t('other.aluminumProducts') }}</text> | |||
</view> | |||
<view class="status"> | |||
<text> {{ item.auditStatus_dictText }}</text> | |||
</view> | |||
</view> | |||
<view class="zhuti"> | |||
<view class="left"> | |||
<img :src="item.pic" style="width: 100%;height: 100%;"/> | |||
</view> | |||
<view class="right" @click="lookDetail(item,index)"> | |||
<view class="text-hidden-1" | |||
v-if="item.userName"> | |||
{{ $t('components.customerName') }} :{{ item.userName }} | |||
</view> | |||
<view class="text-hidden-1" | |||
v-if="item.phone"> | |||
客户电话:{{ item.phone }} | |||
</view> | |||
<view class="text-hidden-1"> | |||
{{ $t('other.pickupAddress') }}:{{ item.address }} | |||
</view> | |||
<view class="text-hidden-1"> | |||
{{ $t('other.pickupDate') }}:{{ item.createTime }} | |||
</view> | |||
</view> | |||
<view class="tip"> | |||
<!--审核状态 0审核中 1 审核通过 2审核未通过--> | |||
<img v-if="item.auditStatus==0" src="../../static/order/3.svg" style="width: 100%;height: 100%;"/> | |||
<img v-if="item.auditStatus==1" src="../../static/order/1.svg" style="width: 100%;height: 100%;"/> | |||
<img v-if="item.auditStatus==2" src="../../static/order/2.svg" style="width: 100%;height: 100%;"/> | |||
</view> | |||
</view> | |||
<!--撤单按钮--> | |||
<view class="bottom" v-if="showBackOrder"> | |||
<view @click="backOrder(item.id)" class="btn"> | |||
{{ $t('other.withdrawOrder') }} | |||
</view> | |||
</view> | |||
</view> | |||
<!--无历史记录--> | |||
<view | |||
style="padding: 100rpx 0;" | |||
v-else> | |||
<uv-empty | |||
mode="history" | |||
textSize="28rpx" | |||
iconSize="100rpx"/> | |||
</view> | |||
</view> | |||
<view class="page"> | |||
<view v-if="list.length>0" class="item" v-for="(item, index) in list" :key="index"> | |||
<view class="top"> | |||
<view class="service"> | |||
<text>{{ $t('other.aluminumProducts') }}</text> | |||
</view> | |||
<view class="status"> | |||
<text v-if="item.showStatus"> {{ item.showStatus_dictText }}</text> | |||
<text v-else> {{ item.auditStatus_dictText }}</text> | |||
</view> | |||
</view> | |||
<view class="zhuti"> | |||
<view class="left"> | |||
<img :src="item.pic" style="width: 100%;height: 100%;" /> | |||
</view> | |||
<view class="right" @click="lookDetail(item,index)"> | |||
<view class="text-hidden-1" v-if="item.userName"> | |||
{{ $t('components.customerName') }} :{{ item.userName }} | |||
</view> | |||
<view class="text-hidden-1" v-if="item.phone"> | |||
客户电话:{{ item.phone }} | |||
</view> | |||
<view class="text-hidden-1"> | |||
{{ $t('other.pickupAddress') }}:{{ item.address }} | |||
</view> | |||
<view class="text-hidden-1"> | |||
{{ $t('other.pickupDate') }}:{{ item.createTime }} | |||
</view> | |||
</view> | |||
<view class="tip" v-if="item.showStatus == 0"> | |||
<!--审核状态 0审核中 1 审核通过 2审核未通过--> | |||
<img v-if="item.auditStatus==0" src="../../static/order/3.svg" style="width: 100%;height: 100%;" /> | |||
<img v-if="item.auditStatus==1" src="../../static/order/1.svg" style="width: 100%;height: 100%;" /> | |||
<img v-if="item.auditStatus==2" src="../../static/order/2.svg" style="width: 100%;height: 100%;" /> | |||
</view> | |||
</view> | |||
<!--撤单按钮--> | |||
<view class="bottom" v-if="showBackOrder && item.showStatus == 0"> | |||
<view @click="backOrder(item.id)" class="btn"> | |||
{{ $t('other.withdrawOrder') }} | |||
</view> | |||
</view> | |||
</view> | |||
<!--无历史记录--> | |||
<view style="padding: 100rpx 0;" v-else> | |||
<uv-empty mode="history" textSize="28rpx" iconSize="100rpx" /> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
name: "orderList", | |||
props: { | |||
list: { | |||
type: Array, | |||
default: false | |||
}, | |||
showBackOrder: { | |||
type: Boolean, | |||
default: false | |||
} | |||
}, | |||
data() { | |||
return {} | |||
}, | |||
methods: { | |||
// 查看详情 | |||
lookDetail(item, index) { | |||
// 交易平台的列表只用于展示,有撤单的说明是我的挂单,则可以查看详情 | |||
if (this.showBackOrder){ | |||
// uni.navigateTo({ | |||
// url: `/pages_order/order/orderDetail2?id`+item.id | |||
// }) | |||
uni.navigateTo({ | |||
url: `/pages_order/order/myOrderDetail?orderInfo=${encodeURIComponent(JSON.stringify(item))}` | |||
}); | |||
} | |||
}, | |||
// 撤单 | |||
backOrder(id) { | |||
let self = this | |||
uni.showModal({ | |||
title: self.$t('other.backOrderTitle'), | |||
content: self.$t('other.backOrderTitleConfirm'), | |||
success(e) { | |||
if(e.confirm){ | |||
self.$api('noShow', {id}, res => { | |||
if (res.code == 200) { | |||
uni.showToast({ | |||
title: self.$t('other.backOrderSuccess'), | |||
icon: 'none' | |||
}) | |||
self.$emit("getList") | |||
} | |||
}) | |||
} | |||
} | |||
}) | |||
}, | |||
} | |||
} | |||
export default { | |||
name: "orderList", | |||
props: { | |||
list: { | |||
type: Array, | |||
default: false | |||
}, | |||
showBackOrder: { | |||
type: Boolean, | |||
default: false | |||
} | |||
}, | |||
data() { | |||
return {} | |||
}, | |||
methods: { | |||
// 查看详情 | |||
lookDetail(item, index) { | |||
// 交易平台的列表只用于展示,有撤单的说明是我的挂单,则可以查看详情 | |||
if (this.showBackOrder && item.showStatus == 0) { | |||
// uni.navigateTo({ | |||
// url: `/pages_order/order/orderDetail2?id`+item.id | |||
// }) | |||
uni.navigateTo({ | |||
url: `/pages_order/order/myOrderDetail?orderInfo=${encodeURIComponent(JSON.stringify(item))}` | |||
}); | |||
} | |||
}, | |||
// 撤单 | |||
backOrder(id) { | |||
let self = this | |||
uni.showModal({ | |||
title: self.$t('other.backOrderTitle'), | |||
content: self.$t('other.backOrderTitleConfirm'), | |||
success(e) { | |||
if (e.confirm) { | |||
self.$api('noShow', { | |||
id | |||
}, res => { | |||
if (res.code == 200) { | |||
uni.showToast({ | |||
title: self.$t('other.backOrderSuccess'), | |||
icon: 'none' | |||
}) | |||
self.$emit("getList") | |||
} | |||
}) | |||
} | |||
} | |||
}) | |||
}, | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.page { | |||
display: flex; | |||
flex-direction: column; | |||
gap: 20rpx; | |||
height: calc(90vh - 180rpx); | |||
.item { | |||
padding: 20rpx; | |||
border-radius: 40rpx; | |||
background-color: #fff; | |||
overflow: hidden; | |||
.top { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
font-size: 30rpx; | |||
.service { | |||
color: #000; | |||
} | |||
.status { | |||
color: #8d8d8d; | |||
font-size: 26rpx; | |||
font-weight: 600; | |||
} | |||
} | |||
.zhuti { | |||
display: flex; | |||
margin: 10rpx 0; | |||
position: relative; | |||
.left { | |||
width: 150rpx; | |||
height: 150rpx; | |||
border-radius: 10rpx; | |||
image { | |||
width: 150rpx; | |||
height: 150rpx; | |||
border-radius: 10rpx; | |||
} | |||
} | |||
.right { | |||
width: calc(100% - 160rpx); | |||
color: #777; | |||
font-size: 24rpx; | |||
padding-left: 20rpx; | |||
line-height: 40rpx; | |||
background-color: #f8f8f8; | |||
} | |||
.tip { | |||
width: 80rpx; | |||
height: 80rpx; | |||
position: absolute; | |||
bottom: -20rpx; | |||
right: -20rpx; | |||
} | |||
} | |||
.bottom { | |||
.btn { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
width: 40%; | |||
height: 50rpx; | |||
border-radius: 40rpx; | |||
color: #afafaf; | |||
font-size: 28rpx; | |||
margin: 20rpx 10rpx 0 0; | |||
background: #ffffff; | |||
border: 1px solid #757986; | |||
//margin-top: 20rpx; | |||
border-radius: 40rpx; | |||
} | |||
} | |||
} | |||
} | |||
.page { | |||
display: flex; | |||
flex-direction: column; | |||
gap: 20rpx; | |||
height: calc(90vh - 180rpx); | |||
.item { | |||
padding: 20rpx; | |||
border-radius: 40rpx; | |||
background-color: #fff; | |||
overflow: hidden; | |||
.top { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
font-size: 30rpx; | |||
.service { | |||
color: #000; | |||
} | |||
.status { | |||
color: #8d8d8d; | |||
font-size: 26rpx; | |||
font-weight: 600; | |||
} | |||
} | |||
.zhuti { | |||
display: flex; | |||
margin: 10rpx 0; | |||
position: relative; | |||
.left { | |||
width: 150rpx; | |||
height: 150rpx; | |||
border-radius: 10rpx; | |||
image { | |||
width: 150rpx; | |||
height: 150rpx; | |||
border-radius: 10rpx; | |||
} | |||
} | |||
.right { | |||
width: calc(100% - 160rpx); | |||
color: #777; | |||
font-size: 24rpx; | |||
padding-left: 20rpx; | |||
line-height: 40rpx; | |||
background-color: #f8f8f8; | |||
} | |||
.tip { | |||
width: 80rpx; | |||
height: 80rpx; | |||
position: absolute; | |||
bottom: -20rpx; | |||
right: -20rpx; | |||
} | |||
} | |||
.bottom { | |||
.btn { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
width: 40%; | |||
height: 50rpx; | |||
border-radius: 40rpx; | |||
color: #afafaf; | |||
font-size: 28rpx; | |||
margin: 20rpx 10rpx 0 0; | |||
background: #ffffff; | |||
border: 1px solid #757986; | |||
//margin-top: 20rpx; | |||
border-radius: 40rpx; | |||
} | |||
} | |||
} | |||
} | |||
</style> |